|
|
<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 v-if="scope.row.growth != '-'">%</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 v-if="scope.row.gdpProportion != '-'">%</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-bottom">
|
|
|
<div class="dataCloudMap-enterprise">
|
|
|
<!-- 第一个卡片 -->
|
|
|
<el-card shadow="always" v-for="(item,index) in cardData" :key="index">
|
|
|
<div slot="header" class="clearfix">
|
|
|
<span>{{ item.servicesType == 1 ? '生产性服务业' : item.servicesType == 2 ? '生活性服务业' : item.servicesType == 3 ? '新兴服务业' : item.servicesType == 4 ? '限上批零住餐' : '' }}</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(item.servicesType)">{{ item.qyCount }}</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">{{ item.allRevenue }}</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">{{ item.addValue }}</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">{{ AllData.qyCount }}</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">{{ AllData.allRevenue }}</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">{{ AllData.addValue }}</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>
|
|
|
|
|
|
<!-- 荣誉情况 -->
|
|
|
<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">【统计数据截至：{{ time }}】</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, selectCount } from "@/api/jin_ji_hu/dataCloudMap"
|
|
|
export default {
|
|
|
components:{honorDialogVue,headqEnterprise,serviceIndustry,collectDialog,echartData},
|
|
|
data() {
|
|
|
return {
|
|
|
activeIndex:1,
|
|
|
options1: [
|
|
|
{
|
|
|
name: "按年",
|
|
|
},
|
|
|
{
|
|
|
name: "按季度",
|
|
|
},
|
|
|
],
|
|
|
loadingOne: false,
|
|
|
tableOneData: [],
|
|
|
loadingTwo: false,
|
|
|
tableTwoData: [],
|
|
|
honorData: {
|
|
|
count1:0,
|
|
|
count2:0,
|
|
|
count3:0,
|
|
|
count4:0,
|
|
|
count5:0,
|
|
|
count6:0,
|
|
|
},
|
|
|
honorTableData:[],
|
|
|
titleDialog:"",
|
|
|
tabHeader: undefined,
|
|
|
time:"",
|
|
|
cardData: [],
|
|
|
AllData:{},
|
|
|
}
|
|
|
},
|
|
|
mounted(){
|
|
|
this.getProjectList();
|
|
|
this.getHonorList();
|
|
|
this.getIndustryDepthList();
|
|
|
this.getSelectCount();
|
|
|
// this.init()
|
|
|
this.time = this.getNowFormatDate();
|
|
|
this.cancalDebounce();
|
|
|
window.addEventListener('resize', this.cancalDebounce);
|
|
|
},
|
|
|
beforeDestroy() {
|
|
|
window.removeEventListener('resize', this.cancalDebounce);
|
|
|
},
|
|
|
methods:{
|
|
|
// 获取最新年月日
|
|
|
getNowFormatDate() {
|
|
|
let date = new Date(),
|
|
|
year = date.getFullYear(), //获取完整的年份(4位)
|
|
|
month = date.getMonth() + 1, //获取当前月份(0-11,0代表1月)
|
|
|
strDate = date.getDate() // 获取当前日(1-31)
|
|
|
if (month < 10) month = `0${month}` // 如果月份是个位数，在前面补0
|
|
|
if (strDate < 10) strDate = `0${strDate}` // 如果日是个位数，在前面补0
|
|
|
return `${year}-${month}-${strDate}`
|
|
|
},
|
|
|
// 获取企业情况数据
|
|
|
getSelectCount(){
|
|
|
selectCount().then(res=>{
|
|
|
res.data.map(item=>{
|
|
|
if(item.servicesType != 5) {
|
|
|
this.cardData.push(item)
|
|
|
} else if(item.servicesType == 5) {
|
|
|
this.AllData = item;
|
|
|
}
|
|
|
})
|
|
|
})
|
|
|
},
|
|
|
// 获取荣誉情况
|
|
|
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 == 1 ? '生产性服务业' : title == 2 ? '生活性服务业' : title == 3 ? '新兴服务业' : title == 4 ? '限上批零住餐' : '';
|
|
|
this.$refs.serviceIndustry.open(title)
|
|
|
},
|
|
|
// 行业纵深情况查看详情按钮
|
|
|
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>
|
