514 lines
14 KiB
Vue
514 lines
14 KiB
Vue
<template>
|
|
<div class="statistics">
|
|
<div class="select-gird">
|
|
<AiPagePicker type="gird" valueObj nodeKey="id" @select="handleSelectGird" class="right-span"
|
|
:params="{formType:2, axiosUrl:'/app/apppatrolreportinfo/listByInfo'}">
|
|
<!-- <AiMore v-model="selectGird.girdName" icon="arrow-right" placeholder="选择网格"/> -->
|
|
<div class="gird-content">
|
|
<div class="gird-name">
|
|
<img src="https://cdn.sinoecare.com/i/2024/07/17/6697868b9170c.png" alt="">
|
|
<span>{{selectGird.girdName || '所属网格'}}</span>
|
|
</div>
|
|
<u-icon name="arrow-down" color="#666" size="24" style="margin-left: 4px" />
|
|
</div>
|
|
</AiPagePicker>
|
|
</div>
|
|
<div class="statstics-content">
|
|
<div class="el-row">
|
|
<div class="item" v-for="(item, index) in todayList" :key="index" @click="toList(item)">
|
|
<div class="label"><span></span>{{ item.label }}</div>
|
|
<h2>{{ item.value }}</h2>
|
|
</div>
|
|
</div>
|
|
<div class="title">事件办结率</div>
|
|
<div class="info-content">
|
|
<canvas canvas-id="finish" id="finish" class="echart-content e-canvas" v-if="showFinish"/>
|
|
<AiEmpty v-else></AiEmpty>
|
|
</div>
|
|
<div class="title">上报趋势图</div>
|
|
<div class="info-content">
|
|
|
|
<AiEmpty v-if="!trendData.length"></AiEmpty>
|
|
<canvas canvas-id="trend" id="trend" class="echart-content" v-else/>
|
|
</div>
|
|
<div class="title">事件分类
|
|
<!-- <div class="type-select" :style="statusInfo.name ? '' : 'color:#999;'" @click="show=true">{{statusInfo.name || '请选择'}}<u-icon name="arrow-right"></u-icon></div> -->
|
|
<u-select v-model="show" :list="$dict.getDict('clapEventStatusHistory')" value-name="dictValue"
|
|
label-name="dictName" @confirm="selectStatus"></u-select>
|
|
</div>
|
|
<div class="info-content">
|
|
<AiEmpty v-if="!typeData.length"></AiEmpty>
|
|
<canvas canvas-id="type" id="type" class="echart-content" v-else/>
|
|
</div>
|
|
<div class="pad-b120"></div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {mapState} from 'vuex'
|
|
// import echarts from 'echarts'
|
|
import uCharts from "./components/echarts/u-charts.min.js";
|
|
var uChartsInstance = {};
|
|
export default {
|
|
data() {
|
|
return {
|
|
todayList: [],
|
|
selectGird: {id: '', girdName: ''},
|
|
finishChart: null,
|
|
trendChart: null,
|
|
typeChart: null,
|
|
show: false,
|
|
finishData: [],
|
|
showFinish: false,
|
|
finshNum: '',
|
|
trendData: [],
|
|
trendDataX: [],
|
|
typeData: [],
|
|
statusInfo: {name: '', eventStatus: ''},
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState(['user']),
|
|
},
|
|
|
|
mounted() {
|
|
this.getGirdInfo()
|
|
},
|
|
methods: {
|
|
getStatistics() {
|
|
this.todayList = [], this.finishData = [], this.trendDataX = [], this.trendData = [], this.typeData = [], this.showFinish = false
|
|
this.$instance.post(`/app/apppatrolreportinfov2/countByGirdId?girdId=${this.selectGird.id}&eventStatus=${this.statusInfo.eventStatus}`).then((res) => {
|
|
if (res.code == 0) {
|
|
|
|
Object.keys(res.data.allCountMap).forEach((key) => {
|
|
var info = {
|
|
label: key,
|
|
value: res.data.allCountMap[key]
|
|
}
|
|
this.todayList.push(info)
|
|
})
|
|
|
|
Object.keys(res.data.finishCountMap).forEach((key) => {
|
|
var info = {
|
|
'name': key,
|
|
'value': Number(res.data.finishCountMap[key])
|
|
}
|
|
this.finishData.push(info)
|
|
|
|
if (res.data.finishCountMap[key] > 0) {
|
|
this.showFinish = true
|
|
}
|
|
})
|
|
|
|
console.log(this.finishData)
|
|
|
|
if (this.showFinish) {
|
|
var num = res.data.finishCountMap['累计事件办结'] / res.data.finishCountMap['累计事件上报']
|
|
this.finshNum = Number(num * 100).toFixed(2)
|
|
}
|
|
res.data.dateCountList.map((item) => {
|
|
this.trendData.push(item.ecount)
|
|
this.trendDataX.push(item.ymd)
|
|
})
|
|
res.data.groupList.map((item) => {
|
|
var info = {
|
|
'name': item.groupName,
|
|
'value': item.totalNum
|
|
}
|
|
this.typeData.push(info)
|
|
})
|
|
|
|
console.log(this.finishData)
|
|
if (this.showFinish) {
|
|
this.$nextTick(() => {
|
|
this.finishChartInit('finish')
|
|
})
|
|
}
|
|
if (this.trendData.length) {
|
|
this.$nextTick(() => {
|
|
this.trendChartInit('trend')
|
|
})
|
|
}
|
|
if (this.typeData.length) {
|
|
this.$nextTick(() => {
|
|
this.typeChartInit('type')
|
|
})
|
|
}
|
|
|
|
}
|
|
})
|
|
},
|
|
|
|
getGirdInfo() {
|
|
this.$instance.post(`/app/apppatrolreportinfo/getRootByGirdMember`).then((res) => {
|
|
if (res.code == 0) {
|
|
this.selectGird.girdName = res.data.girdName
|
|
this.selectGird.id = res.data.id
|
|
this.$dict.load('clapEventStatusHistory').then(() => {
|
|
this.getStatistics()
|
|
})
|
|
}
|
|
})
|
|
},
|
|
finishChartInit(id) {
|
|
// console.log(this.finishData)
|
|
var ctx = uni.createCanvasContext(id, this);
|
|
uChartsInstance[id] = new uCharts({
|
|
type: "ring",
|
|
width: 350,
|
|
height: 250,
|
|
context: ctx,
|
|
series: [
|
|
{
|
|
data: this.finishData
|
|
}
|
|
],
|
|
animation: true,
|
|
rotate: false,
|
|
rotateLock: false,
|
|
background: "#FFFFFF",
|
|
color: ['#7E94F6', '#85E3D5', '#2891FF'],
|
|
padding: [5,5,5,5],
|
|
dataLabel: true,
|
|
enableScroll: false,
|
|
legend: {
|
|
show: true,
|
|
position: "bottom",
|
|
lineHeight: 25
|
|
},
|
|
title: {
|
|
name: "办结率",
|
|
fontSize: 12,
|
|
color: "#222"
|
|
},
|
|
subtitle: {
|
|
name: this.finshNum+'%',
|
|
fontSize: 20,
|
|
color: "#5C8FFA"
|
|
},
|
|
extra: {
|
|
ring: {
|
|
ringWidth: 40,
|
|
activeOpacity: 0.5,
|
|
activeRadius: 10,
|
|
offsetAngle: 0,
|
|
labelWidth: 5,
|
|
border: false,
|
|
borderWidth: 2,
|
|
borderColor: "#FFFFFF"
|
|
}
|
|
}
|
|
})
|
|
|
|
// const query = uni.createSelectorQuery().in(this);
|
|
// query.select('#' + id).fields({ node: true, size: true }).exec(res => {
|
|
// console.log(res)
|
|
// if (res[0]) {
|
|
// const canvas = res[0].node;
|
|
// const ctx = canvas.getContext('2d');
|
|
// canvas.width = 350
|
|
// canvas.height = 250
|
|
// uChartsInstance[id] = new uCharts({
|
|
// type: "ring",
|
|
// width: 350,
|
|
// height: 250,
|
|
// context: ctx,
|
|
// series: [
|
|
// {
|
|
// data: this.finishData
|
|
// }
|
|
// ],
|
|
// animation: true,
|
|
// rotate: false,
|
|
// rotateLock: false,
|
|
// background: "#FFFFFF",
|
|
// color: ['#7E94F6', '#85E3D5', '#2891FF'],
|
|
// padding: [5,5,5,5],
|
|
// dataLabel: true,
|
|
// enableScroll: false,
|
|
// legend: {
|
|
// show: true,
|
|
// position: "bottom",
|
|
// lineHeight: 25
|
|
// },
|
|
// title: {
|
|
// name: "办结率",
|
|
// fontSize: 12,
|
|
// color: "#222"
|
|
// },
|
|
// subtitle: {
|
|
// name: this.finshNum+'%',
|
|
// fontSize: 20,
|
|
// color: "#5C8FFA"
|
|
// },
|
|
// extra: {
|
|
// ring: {
|
|
// ringWidth: 40,
|
|
// activeOpacity: 0.5,
|
|
// activeRadius: 10,
|
|
// offsetAngle: 0,
|
|
// labelWidth: 5,
|
|
// border: false,
|
|
// borderWidth: 2,
|
|
// borderColor: "#FFFFFF"
|
|
// }
|
|
// }
|
|
// });
|
|
// }else{
|
|
// console.error("[uCharts]: 未获取到 context");
|
|
// }
|
|
// });
|
|
},
|
|
trendChartInit(id) {
|
|
const ctx = uni.createCanvasContext(id, this);
|
|
uChartsInstance[id] = new uCharts({
|
|
type: "line",
|
|
context: ctx,
|
|
width: 346,
|
|
height: 232,
|
|
categories: this.trendDataX,
|
|
series: [
|
|
{
|
|
name: '',
|
|
data: this.trendData
|
|
}
|
|
],
|
|
animation: true,
|
|
background: "#FFFFFF",
|
|
color: ["#2891FF"],
|
|
padding: [15, 10, 0, 15],
|
|
enableScroll: false,
|
|
legend: {
|
|
show: false
|
|
},
|
|
xAxis: {
|
|
disableGrid: true,
|
|
},
|
|
yAxis: {
|
|
gridType: "dash",
|
|
dashLength: 2,
|
|
},
|
|
linearType: 'custom',
|
|
serie: {
|
|
linearColor: '#5B8FF9'
|
|
},
|
|
extra: {
|
|
line: {
|
|
type: "straight",
|
|
width: 2,
|
|
activeType: "hollow",
|
|
},
|
|
}
|
|
})
|
|
},
|
|
typeChartInit(id) {
|
|
var ctx = uni.createCanvasContext(id, this);
|
|
uChartsInstance[id] = new uCharts({
|
|
type: "ring",
|
|
width: 350,
|
|
height: 250,
|
|
context: ctx,
|
|
series: [
|
|
{
|
|
data: this.typeData
|
|
}
|
|
],
|
|
animation: true,
|
|
rotate: false,
|
|
rotateLock: false,
|
|
background: "#FFFFFF",
|
|
color: ['#2891FF', '#FF8700', '#83B5F7', '#7E94F6', '#85E3D5', '#2891FF'],
|
|
padding: [5,5,5,5],
|
|
dataLabel: true,
|
|
enableScroll: false,
|
|
legend: {
|
|
show: true,
|
|
position: "bottom",
|
|
lineHeight: 25
|
|
},
|
|
extra: {
|
|
ring: {
|
|
ringWidth: 40,
|
|
activeOpacity: 0.5,
|
|
activeRadius: 10,
|
|
offsetAngle: 0,
|
|
labelWidth: 5,
|
|
border: false,
|
|
borderWidth: 2,
|
|
borderColor: "#FFFFFF"
|
|
}
|
|
}
|
|
})
|
|
},
|
|
selectStatus(e) {
|
|
this.statusInfo.name = e[0].label
|
|
this.statusInfo.eventStatus = e[0].value
|
|
this.getStatistics()
|
|
},
|
|
handleSelectGird(v) {
|
|
this.selectGird = v || {}
|
|
this.getStatistics()
|
|
},
|
|
toList(row) {
|
|
var searchType = '', typeList = ['', '', '累计上报', '今日上报', '今日办结', '办理中']
|
|
typeList.map((item, index) => {
|
|
if (item == row.label) {
|
|
return searchType = index
|
|
}
|
|
})
|
|
uni.navigateTo({url: `./StatisticsList?searchType=${searchType}&girdId=${this.selectGird.id}`})
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.statistics {
|
|
.select-gird {
|
|
width: calc(100% - 64px);
|
|
box-sizing: border-box;
|
|
position: fixed;
|
|
left: 32px;
|
|
z-index: 9;
|
|
padding: 24px;
|
|
background-color: #fff;
|
|
border-radius: 16px;
|
|
.gird-content {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.gird-name {
|
|
width: calc(100% - 60px);
|
|
font-family: PingFangSC-Medium;
|
|
font-weight: 500;
|
|
font-size: 32px;
|
|
color: #333;
|
|
line-height: 48px;
|
|
img {
|
|
width: 28px;
|
|
height: 28px;
|
|
margin-right: 20px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.statstics-content {
|
|
padding: 128px 30px 200px;
|
|
.el-row {
|
|
.item {
|
|
display: inline-block;
|
|
width: calc(50% - 9px);
|
|
padding: 24px;
|
|
box-sizing: border-box;
|
|
background-color: #fff;
|
|
border-radius: 16px;
|
|
margin: 0 16px 16px 0;
|
|
.label {
|
|
line-height: 40px;
|
|
font-family: PingFangSC-Regular;
|
|
font-size: 28px;
|
|
color: #666;
|
|
margin-bottom: 8px;
|
|
span {
|
|
display: inline-block;
|
|
width: 16px;
|
|
height: 16px;
|
|
margin-right: 8px;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
h2 {
|
|
line-height: 64px;
|
|
font-family: PingFangSC-SNaNpxibold;
|
|
font-weight: 600;
|
|
font-size: 48px;
|
|
color: #333;
|
|
padding-left: 24px;
|
|
}
|
|
}
|
|
.item:nth-of-type(1) {
|
|
.label {
|
|
span {
|
|
border: 4px solid #7A8EC5;
|
|
}
|
|
}
|
|
}
|
|
.item:nth-of-type(2) {
|
|
margin-right: 0;
|
|
.label {
|
|
span {
|
|
border: 4px solid #F6BD15;
|
|
}
|
|
}
|
|
}
|
|
.item:nth-of-type(3) {
|
|
.label {
|
|
span {
|
|
border: 4px solid #5C8FFA;
|
|
}
|
|
}
|
|
}
|
|
.item:nth-of-type(4) {
|
|
margin-right: 0;
|
|
.label {
|
|
span {
|
|
border: 4px solid #60DCAA;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.title {
|
|
font-size: 32px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
color: #333;
|
|
line-height: 48px;
|
|
padding: 24px;
|
|
.type-select {
|
|
font-size: 26px;
|
|
position: absolute;
|
|
top: 20px;
|
|
right: 32px;
|
|
width: calc(100% - 250px);
|
|
text-align: right;
|
|
line-height: 48px;
|
|
}
|
|
}
|
|
.info-content {
|
|
width: 100%;
|
|
background: #FFF;
|
|
border-radius: 16px;
|
|
margin-bottom: 32px;
|
|
position: relative;
|
|
padding-bottom: 32px;
|
|
img {
|
|
float: right;
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
|
|
.echart-content {
|
|
width: 100%;
|
|
height: 500px;
|
|
padding: 0 32px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.num {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 320px;
|
|
margin-left: -100px;
|
|
font-size: 40px;
|
|
font-weight: 600;
|
|
width: 200px;
|
|
text-align: center;
|
|
}
|
|
}
|
|
.pad-b120 {
|
|
background-color: #F3F7F8;
|
|
padding-bottom: 120px;
|
|
}
|
|
}
|
|
</style>
|