<template>
<view>
<cu-custom bgColor="bg-blue" :isBack="true" backUrl="/pages/indexcf/indexcf">
<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 loginService from '@/api/auth/loginService.js'
export default {
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()
this.AppFirstAddTotle()
this.AppFirstAddNwe()
},
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() {
let res = {
categories: [2020, 2021, 2022, 2023, 2024],
series: [{
name: "税收",
data: [1020, 980, 1011, 947, 1024]
}]
};
this.BNDSSchartData = JSON.parse(JSON.stringify(res));
let res2 = {
categories: [2020, 2021, 2022, 2023, 2024],
series: [{
name: "销售",
data: [2020, 1980, 3011, 1947, 2324]
}]
};
this.BNDXSchartData = JSON.parse(JSON.stringify(res2));
},
// 楼宇新增企业月增量
AppFirstAddNwe() {
let res4 = {
categories: ['1月', '2月', '3月', '4月'],
series: [{
name: "新增企业数",
data: [5,0,2,7]
}]
};
this.chartDataLLXZL = JSON.parse(JSON.stringify(res4));
},
changeSSLYId() {
this.AppFirstAddTotle()
},
// 税收
AppFirstAddTotle() {
let res4 = {
categories: ['1月', '2月', '3月', '4月'],
series: [{
name: "税收",
data: [345,125,467,789]
}]
};
this.chartDataSSLY = JSON.parse(JSON.stringify(res4));
},
getSaleStatisticsForPark() {
let peopelList = [{
name: '博士生',
value: 29,
},
{
name: '硕士生',
value: 58,
},
{
name: '本科生',
value: 472,
},
{
name: '本科以下',
value: 289,
},
]
let res2 = {
series: [{
data: peopelList
}]
};
this.chartDataSBRS = JSON.parse(JSON.stringify(res2));
},
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
}).catch(e => {
console.log(e)
})
},
AppFirst() {
let data = [{
"B9": "1365.24",
"B4": "638.81",
"B8": "71.15",
"B5": "69.44",
"B10": "2.3"
}, {
"percentage": "0",
"yearTax": "0.0",
"monthrTax": "0.0"
}, {
"B10": "35.92",
"B4": "36.99",
"B5": "41.55",
"B6": "30.38",
"B8": "81.97",
"B9": "92.14"
}, {
"5": "21.62",
"5,10": "14.19",
"1,10": "12.16",
"1": "4.73",
"5,12": "4.05",
"2": "3.38",
"5,10,16": "2.70",
"4": "2.03",
"5,12,13": "2.03",
"5,10,11": "2.03",
"5,9": "1.35",
"5,10,14": "0.68",
"1,17,18": "0.68",
"1,12": "0.68",
"5,1": "0.68",
"6": "0.68",
"5,10,9": "0.68",
"5,17,18": "0.68",
"7": "0.68",
"5,15,10": "0.68",
"5,17": "0.68",
"5,10,15": "0.68",
"9": "0.68",
"1,9": "0.68"
}];
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));
},
getStatisticsForPark() {
let res = {
categories: ['亭湖产业园', '数字基地', '环保产业园','光电产业园', '兴泰产业园'],
series: [{
name: "企业总数",
data: [12, 20, 3, 7, 8]
}]
};
this.chartDataYQQYZS = JSON.parse(JSON.stringify(res));
// chartDataSBRS
let resCB = {
categories: ['亭湖产业园', '数字基地', '环保产业园','光电产业园', '兴泰产业园'],
series: [{
name: "企业参保人数统计",
data: [82, 70, 35, 72, 81]
}]
};
this.chartDataYQSBRS = JSON.parse(JSON.stringify(resCB));
},
},
}
</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>