<template> <view> <cu-custom bgColor="bg-blue" :isBack="true" backUrl="/pages/index/index"> <block slot="content">数据分析</block> </cu-custom> <view class="header-line-2"> <!-- <jp-picker v-model="yqid" rangeKey="label" rangeValue="value" :range="parkList" :onChangeNew="changeYQId" empty="选择园区"> </jp-picker> --> <picker @change="changeYQId" :value="yqIndex" :range="showYQList"> <view class=" picker action"> <view style="color: #fff;">{{showYQList[yqIndex]}}</view> </view> </picker> </view> <view class="header-line"> <view @click="changeShow(2)" :class="show == 2 ? 'actClass' : ''">楼宇</view> <view @click="changeShow(1)" :class="show == 1 ? 'actClass' : ''">统计报表</view> </view> <view class="page-box" v-show="show != 1"> <view class="yqshpmfxBox"> <view class="tab-header"> <view class="header-name">楼宇税收排名分析</view> </view> <view class="pmfx-box"> <qiun-data-charts type="column" :opts="opts" :chartData="chartData" :ontouch="true" /> </view> <view class="line-box"></view> <view class="ssbox"> <view class="ss-left-box"> <view class="num">{{ssInfo.yearTax}}<text class="unit">万元</text></view> <view style="height: 20rpx;"></view> <view class="unit">税收总额</view> </view> <view class="ss-right-box"> <view class="right-text-box"> <view class="num">{{ssInfo.monthrTax}}<text class="unit">万元</text></view> <view style="height: 20rpx;"></view> <view class="unit">本月税收(占比)</view> </view> <view class="pie-box"> <qiun-data-charts type="arcbar" :opts="opts2" :chartData="chartData2" /> </view> </view> </view> </view> <view class="page-center-box"> <view class="center-left-box"> <view class="center-title">楼宇入住率排名分析</view> <view class="table-line" v-for="(item, index) in rzList" :key="index"> <view class="index">{{index + 1 }}</view> <view class="name">{{item.name}}</view> <view class="percent">{{item.value}}%</view> </view> </view> <view class="center-right-box"> <view class="center-title">楼宇企业数量类型分析</view> <view class="right-box-in"> <qiun-data-charts type="pie" :opts="opts3" :chartData="chartData3" /> </view> </view> </view> <view class="yqqsBox"> <view class="tab-header"> <view class="header-name">楼宇税收趋势分析</view> <jp-picker v-model="ssqsLYid" rangeKey="label" rangeValue="value" :range="LYList" :onChangeNew="changeSSLYId"> </jp-picker> </view> <view class="pmfx-box"> <qiun-data-charts type="line" :opts="opts4" :chartData="chartDataSSLY" /> </view> <view style="height: 20rpx;"></view> </view> <view class="yqqsBox"> <view class="tab-header"> <view class="header-name">楼宇新增企业月增长量</view> <jp-picker v-model="yzlLYid" rangeKey="label" rangeValue="value" :range="LYList" :onChangeNew="changeData"> </jp-picker> </view> <view class="pmfx-box"> <qiun-data-charts type="line" :opts="opts4" :chartData="chartDataLLXZL" /> </view> <view style="height: 20rpx;"></view> </view> </view> <view v-show="show == 1"> <view class="page-box"> <view class="yqqsBox"> <view class="tab-header"> <view class="header-name">园区企业总数统计分析</view> </view> <view class="pmfx-box"> <qiun-data-charts type="line" :opts="opts4" :chartData="chartDataYQQYZS" /> </view> <view style="height: 20rpx;"></view> </view> </view> <view class="page-box"> <view class="yqqsBox"> <view class="tab-header"> <view class="header-name">本年度税收额分析</view> </view> <view class="pmfx-box"> <qiun-data-charts type="column" :opts="opts" :chartData="BNDSSchartData" :ontouch="true" /> </view> <view style="height: 20rpx;"></view> </view> </view> <view class="page-box"> <view class="yqqsBox"> <view class="tab-header"> <view class="header-name">本年度销售额分析</view> </view> <view class="pmfx-box"> <qiun-data-charts type="column" :opts="opts" :chartData="BNDXSchartData" :ontouch="true" /> </view> <view style="height: 20rpx;"></view> </view> </view> <view class="page-box"> <view class="yqqsBox"> <view class="tab-header"> <view class="header-name">园区企业参保人数统计分析</view> </view> <view class="pmfx-box"> <qiun-data-charts type="line" :opts="opts4" :chartData="chartDataYQSBRS" /> </view> <view style="height: 20rpx;"></view> </view> </view> <view class="page-box"> <view class="yqqsBox"> <view class="tab-header"> <view class="header-name">人才分析</view> </view> <view class="pmfx-box"> <qiun-data-charts type="pie" :opts="optsSS" :chartData="chartDataSBRS" /> </view> <view style="height: 20rpx;"></view> </view> </view> </view> </view> </template> <script> import uniFab from '@/components/uni-fab/uni-fab.vue'; import loginService from '@/api/auth/loginService.js' import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js"; import MescrollMoreItemMixin from "@/components/mescroll-uni/mixins/mescroll-more-item.js"; export default { mixins: [MescrollMixin, MescrollMoreItemMixin], // 使用mixin (在main.js注册全局组件) onShow(option) { this.$auth.checkLogin() }, components: { }, data() { return { yqIndex: 0, show: 2, parkList: [], LYList: [], ssInfo: {}, rzList: [], ssqsLYid: '', yzlLYid: '', yqid: '', chartData: {}, BNDSSchartData: {}, BNDXSchartData: {}, //您可以通过修改 config-ucharts.js 文件中下标为 ['column'] 的节点来配置全局默认参数,如都是默认参数,此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式,达到页面简洁的需求。 opts: { color: ["#1FD094"], padding: [15, 15, 0, 5], touchMoveLimit: 24, enableScroll: true, legend: { show: false }, xAxis: { disableGrid: true, scrollShow: true, itemCount: 4 }, yAxis: { data: [{ min: 0 }] }, extra: { column: { type: "group", width: 30, activeBgColor: "#000000", activeBgOpacity: 0.08 } } }, chartData2: {}, //您可以通过修改 config-ucharts.js 文件中下标为 ['arcbar'] 的节点来配置全局默认参数,如都是默认参数,此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式,达到页面简洁的需求。 opts2: { color: ["#1890FF"], title: { name: '', fontSize: 0, }, subtitle: { name: '', fontSize: 0, }, extra: { arcbar: { type: "circle", width: 4, backgroundColor: "#E9E9E9", startAngle: 1.5, endAngle: 0.25, gap: 2 } } }, chartData3: {}, //您可以通过修改 config-ucharts.js 文件中下标为 ['pie'] 的节点来配置全局默认参数,如都是默认参数,此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式,达到页面简洁的需求。 opts3: { color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc" ], padding: [5, 5, 5, 5], enableScroll: true, legend: { show: false }, dataLabel: false, extra: { pie: { activeOpacity: 0.5, activeRadius: 10, offsetAngle: 0, labelWidth: 15, border: true, borderWidth: 3, borderColor: "#FFFFFF" } } }, chartData4: {}, chartDataSSLY: {}, chartDataLLXZL: {}, //您可以通过修改 config-ucharts.js 文件中下标为 ['line'] 的节点来配置全局默认参数,如都是默认参数,此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式,达到页面简洁的需求。 opts4: { color: ["#1890FF"], padding: [15, 10, 30, 15], enableScroll: false, legend: { show: false }, xAxis: { disableGrid: true, rotateLabel: true, rotateAngle: 45, }, yAxis: { gridType: "dash", dashLength: 2 }, extra: { line: { type: "straight", width: 2, activeType: "hollow" } } }, chartDataSBRS: {}, chartDataYQQYZS: {}, chartDataYQSBRS: {}, chartDataSSEFX: {}, showYQList: [], optsSS: { color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc" ], padding: [5, 5, 5, 5], enableScroll: true, extra: { pie: { activeOpacity: 0.5, activeRadius: 10, offsetAngle: 0, labelWidth: 15, border: false, borderWidth: 3, borderColor: "#FFFFFF" } } } } }, created() { this.getParkList() this.getAllparkList() }, mounted() { this.AppFirst() }, methods: { changeData() { this.AppFirstAddNwe() }, getAllparkList() { loginService.parkList({ current: 1, size: 1000000, }).then(({ data }) => { this.parkList = data.records.map((item) => { return { label: item.parkName, value: item.id } }) this.showYQList = data.records.map((item) => item.parkName) this.yqid = this.parkList[0].value }).catch(e => { console.log(e) }) }, changeYQId(e) { console.log('更改园区id') console.log(e, '================>e') this.yqIndex = e.detail.value this.yqid = this.parkList[this.yqIndex].value }, changeShow(index) { this.show = index if (index == 1) { this.getStatisticsForPark() this.getSaleStatisticsForPark() this.getSaleStatisticsForYear2() } }, getSaleStatisticsForYear2() { loginService .getSaleStatisticsForYear2({ yqid: this.yqid, lyid: '', }) .then(({ data }) => { let keys = data.map(item => item.building_name); let values = data.map(item => item.nowYearIncome); let res = { categories: keys, series: [{ name: "税收", data: values }] }; this.BNDSSchartData = JSON.parse(JSON.stringify(res)); let values2 = data.map(item => item.nowYearSale); let res2 = { categories: keys, series: [{ name: "销售", data: values2 }] }; this.BNDXSchartData = JSON.parse(JSON.stringify(res2)); }); }, // 楼宇新增企业月增量 AppFirstAddNwe() { loginService.AppFirstAddNwe({ searchid: this.yzlLYid }).then(({ data }) => { let keys = Object.keys(data[0]); let values = Object.values(data[0]); let res4 = { categories: keys, series: [{ name: "新增企业数", data: values }] }; this.chartDataLLXZL = JSON.parse(JSON.stringify(res4)); }).catch(e => { console.log(e) }) }, changeSSLYId() { this.AppFirstAddTotle() }, // 税收 AppFirstAddTotle() { loginService.AppFirstAddTotle({ searchid: this.ssqsLYid }).then(({ data }) => { let keys = Object.keys(data[0]); let values = Object.values(data[0]); let res4 = { categories: keys, series: [{ name: "税收", data: values }] }; this.chartDataSSLY = JSON.parse(JSON.stringify(res4)); }).catch(e => { console.log(e) }) }, getSaleStatisticsForPark() { loginService.getSaleStatisticsForPark({ }).then(({ data }) => { console.log(data, '===============.data') let peopelList = [{ name: '博士生', value: data[0].DoctoralStudent, }, { name: '硕士生', value: data[0].Postgraduate, }, { name: '本科生', value: data[0].Undergraduate, }, { name: '本科以下', value: data[0].BelowUndergraduate, }, ] let res2 = { series: [{ data: peopelList }] }; this.chartDataSBRS = JSON.parse(JSON.stringify(res2)); }).catch(e => { console.log(e) }) }, getParkList() { loginService.list({ current: 1, size: 1000000, }).then(({ data }) => { this.LYList = data.records.map((item) => { return { label: item.buildingName, value: item.id } }) this.ssqsLYid = this.LYList[0].value this.yzlLYid = this.LYList[0].value this.AppFirstAddTotle() this.AppFirstAddNwe() }).catch(e => { console.log(e) }) }, AppFirst() { loginService.AppFirst().then(({ data }) => { let lyssList = data[0]; let keys = Object.keys(lyssList); let values = Object.values(lyssList); let res = { categories: keys, series: [{ name: "税收", data: values }] }; this.chartData = JSON.parse(JSON.stringify(res)); this.ssInfo = data[1] let res2 = { series: [{ color: "#2fc25b", data: Number(this.ssInfo.percentage).toFixed(2) }] }; this.chartData2 = JSON.parse(JSON.stringify(res2)); let rzList = data[2]; const rzListNew = []; for (const key in rzList) { if (rzList.hasOwnProperty(key)) { rzListNew.push({ name: key, value: parseFloat(rzList[key]).toFixed(2) }); } } this.rzList = rzListNew.slice(0, 5) let lyslList = data[3] let lyslListNew = [] for (const key in lyslList) { if (lyslList.hasOwnProperty(key)) { lyslListNew.push({ 'name': this.$dictUtils.getDictLabel("industrial_type", key, '-'), 'value': parseFloat(lyslList[key]).toFixed(2) * 100 }); } } let res3 = { series: [{ data: lyslListNew }] } this.chartData3 = JSON.parse(JSON.stringify(res3)); }).catch(e => { console.log(e) }) }, getStatisticsForPark() { loginService.getStatisticsForPark({ }).then(({ data }) => { let buildNameArr = data.map(item => item.park_name) let buildQYZS = data.map(item => item.qycount) let buildSSZE = data.map(item => item.ssze) let buildSBRS = data.map(item => item.sbuser) let res = { categories: buildNameArr, series: [{ name: "企业总数", data: buildQYZS }] }; this.chartDataYQQYZS = JSON.parse(JSON.stringify(res)); // chartDataSBRS let resCB = { categories: buildNameArr, series: [{ name: "企业参保人数统计", data: buildSBRS }] }; this.chartDataYQSBRS = JSON.parse(JSON.stringify(resCB)); }).catch(e => { console.log(e) }) }, }, } </script> <style> @font-face { font-family: 'DIN'; /* 自定义字体名称 */ src: url('/static/fonts/DINSchrift.ttf'); /* 字体文件路径 */ } .header-line { display: flex; background: #36A7F3; font-weight: normal; font-size: 32rpx; color: #fff; justify-content: space-around; height: 240rpx; line-height: 80rpx; } .header-line-2{ background: #36A7F3; font-weight: normal; font-size: 32rpx; color: #fff !important; line-height: 40rpx; padding-left: 40rpx; } .text-grey { color: #fff; } .page-box { position: relative; top: -160rpx; } .yqshpmfxBox { width: 706rpx; border-radius: 40rpx; background: #fff; margin-left: auto; margin-right: auto; box-shadow: 0px 8px 16px 2px rgba(101, 101, 101, 0.2); } .actClass { color: #FAF82F; } .yqqsBox { margin-top: 30rpx; width: 706rpx; border-radius: 40rpx; background: #fff; margin-left: auto; margin-right: auto; box-shadow: 0px 8px 16px 2px rgba(101, 101, 101, 0.2); } .tab-header { display: flex; justify-content: space-between; padding-left: 40rpx; padding-right: 40rpx; border-bottom: 1rpx solid #D5D4D0; align-items: center; } .header-name { font-size: 32rpx; color: #40547E; line-height: 102rpx; } .pmfx-box { height: 440rpx; } .ssfx-box { height: 650rpx; } .line-box { height: 30rpx; border-bottom: 1rpx solid #D5D4D0; } .ssbox { display: flex; } .ss-left-box { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 156rpx; border-right: 1rpx solid #D5D4D0; } .ss-right-box { flex: 1; display: flex; justify-content: center; align-items: center; } .num { font-weight: bold; font-size: 44rpx; font-family: 'DIN'; color: #070303; } .unit { font-size: 28rpx; color: #07245A; opacity: 0.7; } .right-text-box { flex: 1; } .pie-box { height: 156rpx; width: 110rpx; } .page-center-box { display: flex; width: 706rpx; margin-left: auto; margin-right: auto; justify-content: space-between; margin-top: 30rpx; } .center-left-box { width: 344rpx; border-radius: 40rpx; border-radius: 40rpx; padding-left: 20rpx; padding-right: 20rpx; background: #fff; box-shadow: 0px 8px 16px 2px rgba(101, 101, 101, 0.2); padding-bottom: 30rpx; } .center-right-box { width: 344rpx; border-radius: 40rpx; border-radius: 40rpx; padding-left: 20rpx; padding-right: 20rpx; background: #fff; box-shadow: 0px 8px 16px 2px rgba(101, 101, 101, 0.2); padding-bottom: 30rpx; } .center-title { font-size: 24rpx; color: #064875; line-height: 18px; opacity: 0.7; padding-left: 22rpx; padding-top: 23rpx; padding-bottom: 23rpx; } .table-line { display: flex; line-height: 50rpx; height: 50rpx; } .table-line:nth-child(odd) { background-color: #fff; } .table-line:nth-child(even) { background-color: #F1F6F9; } .index { width: 15%; text-align: center; font-size: 28rpx; color: #122F64; font-family: 'DIN'; } .name { font-size: 26rpx; color: #242323; width: 65%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .percent { font-weight: bold; font-size: 28rpx; color: #219BED; font-family: 'DIN'; } .right-box-in { height: 220rpx; } </style>