迁移
This commit is contained in:
liuye
513
src/project/biaopin/AppPatrolReport/Statistics.vue
Normal file
513
src/project/biaopin/AppPatrolReport/Statistics.vue
Normal file
@@ -0,0 +1,513 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user