jin_ji_hu/src/views/dataCloudMap/index.vue

<template>
  <div class="dataCloudMap">
    <el-row class="dataCloudMap-main">
      <el-col :span="11" class="dataCloudMap-main-left">
        <!-- 服务业发展总览 -->
        <div class="dataCloudMap-left-top">
          <div class="echart-title">
            <div class="echart-left-title">
              <div class="L-title-left">
                <span class="dataCloudMap-birght"></span>
                <span class="dataCloudMap-title">服务业发展总览</span>
              </div>
              <span class="dataCloudMap-data">【统计数据截至：2024-01】</span>
            </div>
            <div class="rightBigNav">
              <div class="right-nav">
                <div
                  class="tabStyle"
                  v-for="(item, index) in options1"
                  :key="index"
                  @click="active(index)"
                  :class="activeIndex == index ? 'change-blue' : ''"
                >
                  <div class="change-grey-birght" :class="activeIndex == index ? 'change-blue-birght' : ''"></div>
                  <span class="change-grey-text" :class="activeIndex == index ? 'change-blue-text' : ''">{{ item.name }}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="echarts-data-box">
            <div class="E-box-item">
              <div class="img-box-one img-box"></div>
              <div class="data-box">
                <div class="box-number">
                  <span class="number-yuan">1758.13</span>
                  <span class="yuan-unit">亿元</span>
                </div>
                <div class="box-bottom">【2023】服务业增加值</div>
              </div>
            </div>
            <div class="E-box-item">
              <div class="img-box-two img-box"></div>
              <div class="data-box">
                <div class="box-number">
                  <span class="number-yuan">1.3</span>
                  <span class="yuan-unit">%</span>
                </div>
                <div class="box-bottom">【2023】服务业增速</div>
              </div>
            </div>
            <div class="E-box-item">
              <div class="img-box-three img-box"></div>
              <div class="data-box">
                <div class="box-number">
                  <span class="number-yuan">49.9</span>
                  <span class="yuan-unit">%</span>
                </div>
                <div class="box-bottom">【2023】服务业增加值占GDP比重</div>
              </div>
            </div>
          </div>
          <div id="echarts" ref="myChart"></div>
        </div>

        <!-- 行业纵深情况 -->
        <div class="dataCloudMap-left-bottom">
          <div class="industry-title">
            <div class="bottom-left-title">
              <div class="L-title-left">
                <span class="dataCloudMap-birght"></span>
                <span class="dataCloudMap-title">行业纵深情况</span>
              </div>
              <span class="dataCloudMap-data">【统计数据截至：2024-01】</span>
            </div>
            <div class="rightBtn" @click="industryBtn">查看更多数据>></div>
          </div>
          <section>
            <el-table v-loading="loadingOne" class="dataMap-two-table" :data="tableOneData" :row-class-name="tableRowClassName" :height="isFullscreen ? 420 : 330" :header-cell-style="{background:'#E8F3FC'}">  <!-- :max-height="tabHeader" -->
              <el-table-column label="行业大类" prop="bigType" width="320" align="center"/>
              <el-table-column label="全年营收" prop="revenue" width="130" align="center">
                <template slot-scope="scope">
                  <div class="project-trace-table-number">{{ scope.row.revenue }}</div>
                </template>
              </el-table-column>
              <el-table-column label="增加值(亿元)" prop="yuan" width="100" align="center">
                <template slot="header" slot-scope="scope">
                  <div class="Table-header">增加值</div>
                  <span class="Table-unit">(亿元)</span>
                </template>
                <template slot-scope="scope">
                  <div class="project-trace-table-number">{{ scope.row.yuan }}</div>
                </template>
              </el-table-column>
              <el-table-column label="增加值增速(按不变价)" prop="speedUp" width="180" align="center">
                <template slot="header" slot-scope="scope">
                  <div class="Table-header">增加值增速</div>
                  <span class="Table-unit">(按不变价)</span>
                </template>
                <template slot-scope="scope">
                  <div class="project-trace-table-number">{{ scope.row.speedUp }} <span>%</span></div>
                </template>
              </el-table-column>
              <el-table-column label="增加值占GDP比重" prop="proportion" align="center">
                <template slot-scope="scope">
                  <div class="project-trace-table-number">{{ scope.row.proportion }} <span>%</span></div>
                </template>
              </el-table-column>
            </el-table>
          </section>
        </div>
      </el-col>
      <el-col :span="13" class="dataCloudMap-main-right">
        <!-- 企业情况 -->
        <div class="dataCloudMap-right-top">
          <div class="right-top-title">
            <div class="L-title-left">
              <span class="dataCloudMap-birght"></span>
              <span class="dataCloudMap-title">企业情况</span>
            </div>
            <span class="dataCloudMap-data">【统计数据截至：2024-01】</span>
          </div>
          <div class="dataCloudMap-enterprise" :class="isFullscreen ? 'dataCloudMap-enterprise-fullscreen' : ''">
            <!-- 第一个卡片 -->
            <el-card shadow="always">
              <div slot="header" class="clearfix">
                <span>生产性服务业</span>
              </div>
              <div class="card-items">
                <div class="card-item-left">
                  <div class="card-img"></div>
                  <div class="card-type">规上企业数量:</div>
                </div>
                <div class="card-item-right">
                  <div class="card-number" @click="enterInfo('生产性服务业企业')">768</div>
                  <div class="card-unit">家</div>
                </div>
              </div>
              <div class="card-items">
                <div class="card-item-left">
                  <div class="card-img card-img-two"></div>
                  <div class="card-type">规上企业营收:</div>
                </div>
                <div class="card-item-right">
                  <div class="card-number number-two">1913</div>
                  <div class="card-unit unit-two">亿</div>
                </div>
              </div>
              <div class="card-items">
                <div class="card-item-left">
                  <div class="card-img card-img-three"></div>
                  <div class="card-type">全口径增加值:</div>
                </div>
                <div class="card-item-right">
                  <div class="card-number number-three">132</div>
                  <div class="card-unit unit-two">亿</div>
                </div>
              </div>
            </el-card>
            <!-- 第二个卡片 -->
            <el-card shadow="always">
              <div slot="header" class="clearfix">
                <span>生活性服务业</span>
              </div>
              <div class="card-items">
                <div class="card-item-left">
                  <div class="card-img"></div>
                  <div class="card-type">规上企业数量:</div>
                </div>
                <div class="card-item-right">
                  <div class="card-number" @click="enterInfo('生活性服务业企业')">768</div>
                  <div class="card-unit">家</div>
                </div>
              </div>
              <div class="card-items">
                <div class="card-item-left">
                  <div class="card-img card-img-two"></div>
                  <div class="card-type">规上企业营收:</div>
                </div>
                <div class="card-item-right">
                  <div class="card-number number-two">1913</div>
                  <div class="card-unit unit-two">亿</div>
                </div>
              </div>
              <div class="card-items">
                <div class="card-item-left">
                  <div class="card-img card-img-three"></div>
                  <div class="card-type">全口径增加值:</div>
                </div>
                <div class="card-item-right">
                  <div class="card-number number-three">132</div>
                  <div class="card-unit unit-two">亿</div>
                </div>
              </div>
            </el-card>
            <!-- 第三个卡片 -->
            <el-card shadow="always">
              <div slot="header" class="clearfix">
                <span>新兴服务业</span>
              </div>
              <div class="card-items">
                <div class="card-item-left">
                  <div class="card-img"></div>
                  <div class="card-type">规上企业数量:</div>
                </div>
                <div class="card-item-right">
                  <div class="card-number" @click="enterInfo('新兴服务业企业')">768</div>
                  <div class="card-unit">家</div>
                </div>
              </div>
              <div class="card-items">
                <div class="card-item-left">
                  <div class="card-img card-img-two"></div>
                  <div class="card-type">规上企业营收:</div>
                </div>
                <div class="card-item-right">
                  <div class="card-number number-two">1913</div>
                  <div class="card-unit unit-two">亿</div>
                </div>
              </div>
              <div class="card-items">
                <div class="card-item-left">
                  <div class="card-img card-img-three"></div>
                  <div class="card-type">全口径增加值:</div>
                </div>
                <div class="card-item-right">
                  <div class="card-number number-three">132</div>
                  <div class="card-unit unit-two">亿</div>
                </div>
              </div>
            </el-card>
            <!-- 第四个卡片 -->
            <el-card shadow="always">
              <div slot="header" class="clearfix">
                <span>限上批零住餐</span>
              </div>
              <div class="card-items">
                <div class="card-item-left">
                  <div class="card-img"></div>
                  <div class="card-type">规上企业数量:</div>
                </div>
                <div class="card-item-right">
                  <div class="card-number" @click="enterInfo('限上批零住餐企业')">768</div>
                  <div class="card-unit">家</div>
                </div>
              </div>
              <div class="card-items">
                <div class="card-item-left">
                  <div class="card-img card-img-two"></div>
                  <div class="card-type">规上企业营收:</div>
                </div>
                <div class="card-item-right">
                  <div class="card-number number-two">1913</div>
                  <div class="card-unit unit-two">亿</div>
                </div>
              </div>
              <div class="card-items">
                <div class="card-item-left">
                  <div class="card-img card-img-three"></div>
                  <div class="card-type">全口径增加值:</div>
                </div>
                <div class="card-item-right">
                  <div class="card-number number-three">132</div>
                  <div class="card-unit unit-two">亿</div>
                </div>
              </div>
            </el-card>
          </div>
          <div class="dataCloudMap-statistics">
            <div class="statistics-title">
              总部企业
            </div>
            <div class="statistics-items">
              <div class="statistics-item">
                <div class="statistics-item-img"></div>
                <div class="statistics-item-type">企业数量:</div>
                <div class="statistics-item-right">
                  <div class="statistics-item-number" @click="headqEnterpriseBtn">365</div>
                  <div class="statistics-item-unit">
                    <span>家</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="statistics-items">
              <div class="statistics-item">
                <div class="statistics-item-img item-img-two"></div>
                <div class="statistics-item-type">税收贡献:</div>
                <div class="statistics-item-right">
                  <div class="statistics-item-number number-two">1913</div>
                  <div class="statistics-item-unit unit-two">
                    <span>亿</span>
                    <el-popover
                      placement="top"
                      width="207"
                      trigger="click"
                    >
                      <div class="popover-Tooltip">增值税+企业所得税-免抵调库</div>
                      <img slot="reference" src="@/assets/images/Mapi.png" alt="">
                    </el-popover>
                  </div>
                </div>
              </div>
            </div>
            <div class="statistics-items statistics-items-none">
              <div class="statistics-item">
                <div class="statistics-item-img item-img-three"></div>
                <div class="statistics-item-type">经营数据:</div>
                <div class="statistics-item-right">
                  <div class="statistics-item-number number-three">132</div>
                  <div class="statistics-item-unit unit-two">
                    <span>亿</span>
                    <el-popover
                      placement="top"
                      width="170"
                      trigger="click"
                    >
                    <div class="popover-Tooltip">
                      <div>制造业总部提供产值</div>
                      <div>服务业总部提供营收</div>
                      <div>建筑业总部提供产值</div>
                      <div>贸易类总部提供销售额</div>
                    </div>
                      <img slot="reference" src="@/assets/images/Mapi.png" alt="">
                    </el-popover>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 荣誉情况 -->
        <div class="dataCloudMap-right-middle">
          <div class="honor-title">
            <div class="right-middle-title">
              <div class="L-title-left">
                <span class="dataCloudMap-birght"></span>
                <span class="dataCloudMap-title">荣誉情况</span>
              </div>
              <span class="dataCloudMap-data">【统计数据截至：2024-01】</span>
            </div>
            <div class="rightBtn" @click="honorBtn">查看更多数据>></div>
          </div>
          <div class="honor-data">
            <div class="honor-item" :class="isFullscreen ? 'honor-item-fullscreen' : ''">
              <span class="honor-item-left">领军企业</span>
              <div class="honor-item-right">
                <span class="honor-item-number">{{ honorData.count1 }}</span>
                <span class="honor-item-home">家</span>
              </div>
            </div>
            <div class="honor-item" :class="isFullscreen ? 'honor-item-fullscreen' : ''">
              <span class="honor-item-left">两业融合试点</span>
              <div class="honor-item-right">
                <span class="honor-item-number">{{ honorData.count2 }}</span>
                <span class="honor-item-home">家</span>
              </div>
            </div>
            <div class="honor-item" :class="isFullscreen ? 'honor-item-fullscreen' : ''">
              <span class="honor-item-left">工业设计</span>
              <div class="honor-item-right">
                <span class="honor-item-number">{{ honorData.count3 }}</span>
                <span class="honor-item-home">家</span>
              </div>
            </div>
            <div class="honor-item" :class="isFullscreen ? 'honor-item-fullscreen' : ''">
              <span class="honor-item-left">服务型制造示范</span>
              <div class="honor-item-right">
                <span class="honor-item-number">{{ honorData.count4 }}</span>
                <span class="honor-item-home">家</span>
              </div>
            </div>
            <div class="honor-item" :class="isFullscreen ? 'honor-item-fullscreen' : ''">
              <span class="honor-item-left">现代服务业集聚区</span>
              <div class="honor-item-right">
                <span class="honor-item-number">{{ honorData.count5 }}</span>
                <span class="honor-item-home">家</span>
              </div>
            </div>
            <div class="honor-item" :class="isFullscreen ? 'honor-item-fullscreen' : ''">
              <span class="honor-item-left">楼宇经济</span>
              <div class="honor-item-right">
                <span class="honor-item-number">{{ honorData.count6 }}</span>
                <span class="honor-item-home">家</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 项目追踪情况 -->
        <div class="dataCloudMap-right-bottom">
          <div class="project-trace-title">
            <div class="right-bottom-title">
              <div class="L-title-left">
                <span class="dataCloudMap-birght"></span>
                <span class="dataCloudMap-title">项目追踪情况</span>
              </div>
              <span class="dataCloudMap-data">【统计数据截至：2024-01】</span>
            </div>
            <div class="rightBtn" @click="projectBtn">查看更多数据>></div>
          </div>
          <section>
            <el-table v-loading="loadingTwo" class="dataMap-two-table" :data="tableTwoData" :row-class-name="tableRowClassName" :height="isFullscreen ? 220 : 170" :header-cell-style="{background:'#E8F3FC'}">  <!-- :max-height="tabHeader" -->
              <el-table-column label="申报任务名称" prop="enterpriseDirectory" width="500" align="center"/>
              <el-table-column label="填报时间" prop="time" align="center">
                <template slot-scope="scope">
                  <div v-if="scope.row.startTime && scope.row.endTime">{{ scope.row.startTime }}~{{ scope.row.endTime }}</div>
                  <div v-else>长期有效</div>
                </template>
              </el-table-column>
              <el-table-column label="已填报企业数" prop="count" align="center">
                <template slot-scope="scope">
                  <div class="project-trace-table-number">{{ scope.row.count }}</div>
                </template>
              </el-table-column>
            </el-table>
          </section>
        </div>
      </el-col>
    </el-row>
    <honorDialogVue ref="honorDialog" />
    <headqEnterprise ref="headqEnterprise" />
    <serviceIndustry :title="titleDialog" ref="serviceIndustry" />
    <collectDialog ref="collectDialog" />
  </div>
</template>
<script>
import screenfull from 'screenfull'
import * as echarts from "echarts";
import honorDialogVue from './components/honorDialog.vue';
import headqEnterprise from './components/headquarterEnterprise.vue'
import serviceIndustry from './components/serviceIndustry.vue'
import collectDialog from './components/collectDialog.vue'
import { honor, projectTracking } from "@/api/jin_ji_hu/dataCloudMap"
export default {
  components:{honorDialogVue,headqEnterprise,serviceIndustry,collectDialog},
  data() {
    return {
      activeIndex:0,
      options1: [
        {
          name: "按年",
          // url: require("../../assets/images/bg1.png"),
          // url1: require("../../assets/images/bg2.png"),
        },
        {
          name: "按季度",
          // url: require("../../assets/images/tb1.png"),
          // url1: require("../../assets/images/tb2.png"),
        },
      ],
      loadingOne: false,
      tableOneData: [
        {
          bigType:"科学研究和技术服务业",
          revenue:"506.63",
          yuan:"201",
          speedUp:"0.89",
          proportion:"11",
        },
        {
          bigType:"科学研究和技术服务业",
          revenue:"506.63",
          yuan:"201",
          speedUp:"0.89",
          proportion:"11",
        },{
          bigType:"科学研究和技术服务业",
          revenue:"506.63",
          yuan:"201",
          speedUp:"0.89",
          proportion:"11",
        },
        {
          bigType:"科学研究和技术服务业",
          revenue:"506.63",
          yuan:"201",
          speedUp:"0.89",
          proportion:"11",
        },{
          bigType:"科学研究和技术服务业",
          revenue:"506.63",
          yuan:"201",
          speedUp:"0.89",
          proportion:"11",
        },
        {
          bigType:"科学研究和技术服务业",
          revenue:"506.63",
          yuan:"201",
          speedUp:"0.89",
          proportion:"11",
        },{
          bigType:"科学研究和技术服务业",
          revenue:"506.63",
          yuan:"201",
          speedUp:"0.89",
          proportion:"11",
        },
        {
          bigType:"科学研究和技术服务业",
          revenue:"506.63",
          yuan:"201",
          speedUp:"0.89",
          proportion:"11",
        },{
          bigType:"科学研究和技术服务业",
          revenue:"506.63",
          yuan:"201",
          speedUp:"0.89",
          proportion:"11",
        },
        {
          bigType:"科学研究和技术服务业",
          revenue:"506.63",
          yuan:"201",
          speedUp:"0.89",
          proportion:"11",
        }
      ],
      loadingTwo: false,
      tableTwoData: [],
      honorData: {
        count1:0,
        count2:0,
        count3:0,
        count4:0,
        count5:0,
        count6:0,
      },
      honorTableData:[],
      titleDialog:"",
      isFullscreen: false,
      myChart: false,
      option:{}
    }
  },
  mounted(){
    this.$nextTick(()=>{
      this.initEchart();
    })
    this.getHonorList();
    this.getProjectList();
    
    this.screenFull();
    // this.init()
  },
  methods:{
    change() {
      this.isFullscreen = screenfull.isFullscreen;
      // this.myChart.setOption(this.option)
      this.myChart &&  this.myChart.resize()
      // this.myChart.clear()
      
    },
    screenFull() {
      window.addEventListener('keydown', this.KeyDown); 
      if (screenfull.isEnabled) {
        screenfull.on('change', this.change)
      }
    },
    KeyDown(event) {
      if (event.keyCode === 122) {
        event.preventDefault();
        this.isScreenFull();
      }
    },
    isScreenFull(){
      if (!screenfull.isEnabled) {
        // 浏览器不支持全屏
        return false;
      } else {
        this.$nextTick(()=>{
          screenfull.toggle();
          this.initEchart();
        }) 
      }
    },
    // 获取荣誉情况
    getHonorList(){
      honor().then(res=>{
        this.honorTableData = res.data;
        res.data.map(item=>{
          if(item.projectBigName == "省市服务业领军企业") {
            this.honorData.count1 = item.count1
          } else if(item.projectBigName == "两业融合试点单位") {
            this.honorData.count2 = item.count1
          } else if(item.projectBigName == "工业设计中心") {
            this.honorData.count3 = item.count1
          } else if(item.projectBigName == "服务型制造示范") {
            this.honorData.count4 = item.count1
          } else if(item.projectBigName == "省级现代服务业集聚区") {
            this.honorData.count5 = item.count1
          } else if(item.projectBigName == "楼宇经济") {
            this.honorData.count6 = item.count1
          }
        })
      })
    },
    // 获取项目追踪情况列表
    getProjectList(){
      this.loadingTwo = true;
      projectTracking().then(res=>{
        this.loadingTwo = false;
        this.tableTwoData = res.data;
      })
    },
    initEchart(){
      var chartDom = document.getElementById("echarts");
      this.myChart = echarts.init(chartDom);
      this.option = {
        // title: {
        //   text: "2019年销售水量和主营业务收入对比",
        //   textStyle: {
        //     align: "center",
        //     color: "#fff",
        //     fontSize: 20,
        //   },
        //   top: "3%",
        //   left: "10%",
        // },
        grid: {
          top: "3%",
          left: "3%",
          right: "3%",
          bottom: "8%", //也可设置left和right设置距离来控制图表的大小
        },
      //   tooltip: {
      //     trigger: "axis",
      //     axisPointer: {
      //       type: "shadow",
      //       label: {
      //         show: true,
      //       },
      //     },
      //   },
        // legend: {
        //   data: ["销售水量", "主营业务"],
        //   top: "1%",
        //   textStyle: {
        //   //   color: "#ffffff",
        //   },
        // },
        xAxis: {
          data: [
            "2019",
            "2020",
            "2021",
            "2022",
            "2023",
            "2024",
          ],
          axisLine: {
            show: true, //隐藏X轴轴线
            lineStyle: {
              color: "#ccc",
              opacity: 0.6,
            },
          },
          axisTick: {
            show: false, //隐藏X轴刻度
          },
          axisLabel: {
            show: true,
            color: "#666666", //X轴文字颜色
            fontSize: 14,
          },
        },
        yAxis: [
          {
            type: "value",
            splitLine: {
              show: true,
              lineStyle :{
                type: "dashed",
              }
            },
            axisLabel: {
              show: true,
              color: "#666666",
              fontSize: 12,
            },
          },
        ],
        series: [
          {
            name: "销售水量",
            type: "line",
            // yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
            // smooth: true, //平滑曲线显示  会让lineStyle的type设置的solid无效
            showAllSymbol: true, //显示所有图形。
            symbol: "circle", //标记的图形为实心圆
            symbolSize: 10, //标记的大小
            itemStyle: {
              //折线拐点标志的样式
              color: "#FFBB00",
              borderColor: "#fff",
              borderWidth: 2,
              shadowColor: 'rgba(255, 187, 0, 0.7)',
              shadowBlur: 10
            },
            lineStyle: {
              type: "solid",
              color: "#FFBB00",
              shadowColor: 'rgba(255, 187, 0, 0.5)',
              shadowBlur: 4
            },
            // 折线覆盖的颜色
            // areaStyle: {
            //   color: "rgba(5,140,255, 0.2)",
            // },
            data: [4.8, 4.4, 5.4, 4.1, 3.6, 3.4],
          },
          {
            name: "主营业务",
            type: "bar",
            barWidth: 25,
            itemStyle: {
              // normal: {
              //   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              //     {
              //       offset: 0,
              //       color: "#00FFE3",
              //     },
              //     {
              //       offset: 1,
              //       color: "#4693EC",
              //     },
              //   ]),
              // },
              color: "#0086FF",
            },
            data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8, 3, 5],
          },
        ],
      };
      this.myChart.setOption(this.option)
    },
    // 荣誉情况查看更多数据按钮
    honorBtn(){
      this.$refs.honorDialog.open(this.honorTableData);
    },
    // 总部企业企业数量按钮
    headqEnterpriseBtn(){
      this.$refs.headqEnterprise.open();
    },
    // 企业情况上方四个卡片数量按钮
    enterInfo(title) {
      this.titleDialog = title;
      this.$refs.serviceIndustry.open()
    },
    // 行业纵深情况查看详情按钮
    industryBtn(){
      this.$refs.collectDialog.open();
    },
    projectBtn(){
      this.$router.push({
        name: 'EnterpriseDirectory',
      })
    },
    active(e) {
      this.activeIndex = e;
    },
    // 修改table背景色
    tableRowClassName({row, rowIndex}){
      if (rowIndex % 2 !== 0) {
        return 'evenNumber-row';
      }
      return '';
    },
  },
}
</script>