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 + 1)"
                  :class="activeIndex == index + 1 ? 'change-blue' : ''"
                >
                  <div class="change-grey-birght" :class="activeIndex == index + 1 ? 'change-blue-birght' : ''"></div>
                  <span class="change-grey-text" :class="activeIndex == index + 1 ? 'change-blue-text' : ''">{{ item.name }}</span>
                </div>
              </div>
            </div>
          </div>
          <echartData :activeIndex="activeIndex" ref="echartData"/>
        </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" :header-cell-style="{background:'#E8F3FC'}">  <!-- :max-height="tabHeader" -->
              <el-table-column label="行业大类" prop="industryCategories" align="center"/>
              <el-table-column label="全年营收" prop="yearRevenue" 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.yearRevenue }}</div>
                </template>
              </el-table-column>
              <el-table-column label="增加值(亿元)" prop="addValue" 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.addValue }}</div>
                </template>
              </el-table-column>
              <el-table-column label="增加值增速(按不变价)" prop="growth" 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.growth }} <span>%</span></div>
                </template>
              </el-table-column>
              <el-table-column label="增加值占GDP比重" prop="gdpProportion" align="center" width="100">
                <template slot-scope="scope">
                  <div class="project-trace-table-number">{{ scope.row.gdpProportion }} <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="dataCloudMap-right-top-box">
          </div> -->
          <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">
            <!-- 第一个卡片 -->
            <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">
              <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">
              <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">
              <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">
              <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">
              <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">
              <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" id="dataCloudMap-right-box">
          <div class="project-trace-title" id="project-trace-title-id">
            <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="tabHeader" :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 honorDialogVue from './components/honorDialog.vue';
import headqEnterprise from './components/headquarterEnterprise.vue'
import serviceIndustry from './components/serviceIndustry.vue'
import collectDialog from './components/collectDialog.vue'
import echartData from './components/echartData.vue'
import { honor, projectTracking, getIndustryDepth } from "@/api/jin_ji_hu/dataCloudMap"
export default {
  components:{honorDialogVue,headqEnterprise,serviceIndustry,collectDialog,echartData},
  data() {
    return {
      activeIndex:1,
      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: [],
      loadingTwo: false,
      tableTwoData: [],
      honorData: {
        count1:0,
        count2:0,
        count3:0,
        count4:0,
        count5:0,
        count6:0,
      },
      honorTableData:[],
      titleDialog:"",
      tabHeader: undefined,
    }
  },
  mounted(){
    this.getProjectList();
    this.getHonorList();
    this.getIndustryDepthList();
    // this.init()
    this.cancalDebounce();
    window.addEventListener('resize', this.cancalDebounce);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.cancalDebounce);
  },
  methods:{
    // 获取荣誉情况
    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
          }
        })
      })
    },
    // 获取行业纵深情况
    getIndustryDepthList(){
      this.loadingOne = true;
      getIndustryDepth().then(res=>{
        this.loadingOne = false;
        this.tableOneData = res.data
      })
    },
    // 获取项目追踪情况列表
    getProjectList(){
      this.loadingTwo = true;
      projectTracking().then(res=>{
        this.loadingTwo = false;
        this.tableTwoData = res.data;
      })
    },
    
    // 荣誉情况查看更多数据按钮
    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;
      this.$refs.echartData.getService(e);
    },
    // 修改table背景色
    tableRowClassName({row, rowIndex}){
      if (rowIndex % 2 !== 0) {
        return 'evenNumber-row';
      }
      return '';
    },
    // 屏幕尺寸变化
    cancalDebounce(){
      const element = document.getElementById('dataCloudMap-right-box'); // 通过元素的 ID 获取元素
      const header = document.getElementById('project-trace-title-id'); // 通过元素的 ID 获取元素
      const elementHeight = element.offsetHeight;
      const headerHeight = header.offsetHeight;
      this.tabHeader = elementHeight - headerHeight - 40;
    }
  },
}
</script>