376 lines
9.6 KiB
Vue
376 lines
9.6 KiB
Vue
<template>
|
|
<div class="statistics">
|
|
<AiTopFixed>
|
|
<div class="select-gird">
|
|
<AiPagePicker type="dept" v-model="selectDept" valueObj nodeKey="fullId" formType="2" class="right-span" @change="changeDept">
|
|
<AiMore v-model="selectDept.fullName"/>
|
|
</AiPagePicker>
|
|
</div>
|
|
</AiTopFixed>
|
|
<div class="statstics-content">
|
|
<div class="info-content">
|
|
<div class="title">概况总览</div>
|
|
<div class="el-row">
|
|
<div class="item" v-for="(item, index) in todayList" :key="index" v-if="item.label != '累计办结'">
|
|
<h2>{{item.value}}</h2>
|
|
<p>{{item.label}}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="info-content">
|
|
<div class="title">事件办结率</div>
|
|
<div class="echart-content" id="finish"></div>
|
|
<div class="num" v-if="finishData">{{finshNum}}%</div>
|
|
<AiEmpty v-else></AiEmpty>
|
|
</div>
|
|
|
|
<div class="info-content">
|
|
<div class="title">工单上报趋势图</div>
|
|
<div class="echart-content" id="trend"></div>
|
|
<AiEmpty v-if="!trendData.length"></AiEmpty>
|
|
</div>
|
|
|
|
<div class="info-content">
|
|
<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('xbotEventStatusSearch')" value-name="dictValue" label-name="dictName" @confirm="selectStatus"></u-select>
|
|
</div>
|
|
<div class="echart-content" id="type"></div>
|
|
<AiEmpty v-if="!typeData.length"></AiEmpty>
|
|
</div>
|
|
<div class="pad-b120"></div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {mapState} from 'vuex'
|
|
import echarts from 'echarts'
|
|
export default {
|
|
props: {},
|
|
data() {
|
|
return {
|
|
todayList: [],
|
|
selectDept: {fullId: '', fullName: ''},
|
|
finishChart: null,
|
|
trendChart: null,
|
|
typeChart: null,
|
|
show: false,
|
|
finishData: [],
|
|
finshNum: '',
|
|
trendData: [],
|
|
trendDataX: [],
|
|
typeData: [],
|
|
statusInfo: {name: '', eventStatus: ''}
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState(['user']),
|
|
},
|
|
|
|
mounted() {
|
|
// this.selectGird.girdName = this.user.girdName
|
|
// this.selectGird.girdId = this.user.girdId
|
|
this.$dict.load('xbotEventStatusSearch').then(() => {
|
|
this.getStatistics()
|
|
})
|
|
},
|
|
methods: {
|
|
changeDept(e) {
|
|
this.selectDept = e[0]
|
|
this.getStatistics()
|
|
},
|
|
getStatistics() {
|
|
this.todayList = [], this.finishData = [], this.trendDataX = [], this.trendData = [], this.typeData = []
|
|
this.$http.post(`/app/appsessionarchivereportinfo/countByDeptId?deptFullId=${this.selectDept.fullId}&eventStatus=${this.statusInfo.eventStatus}`).then((res) => {
|
|
if (res.code == 0) {
|
|
this.$nextTick(() => {
|
|
this.chartInit()
|
|
})
|
|
|
|
Object.keys(res.data.allCountMap).forEach((key) => {
|
|
var info = {
|
|
label: key,
|
|
value: res.data.allCountMap[key]
|
|
}
|
|
this.todayList.push(info)
|
|
})
|
|
|
|
Object.keys(res.data.allCountMap).forEach((key) => {
|
|
if(key == '累计上报' || key == '累计办结') {
|
|
var info = {
|
|
name: key,
|
|
value: res.data.allCountMap[key]
|
|
}
|
|
this.finishData.push(info)
|
|
}
|
|
})
|
|
|
|
var num = Number(res.data.allCountMap['累计办结'])/Number(res.data.allCountMap['累计上报'])
|
|
this.finshNum = Number(num*100).toFixed(2)
|
|
|
|
res.data.trend.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)
|
|
})
|
|
|
|
this.chartInit()
|
|
}
|
|
})
|
|
},
|
|
|
|
chartInit() {
|
|
this.finishChart = echarts.init(document.getElementById('finish'))
|
|
this.trendChart = echarts.init(document.getElementById('trend'))
|
|
this.typeChart = echarts.init(document.getElementById('type'))
|
|
|
|
var option = {
|
|
tooltip: {
|
|
trigger: 'item'
|
|
},
|
|
series: [
|
|
{
|
|
name: '事件办结率',
|
|
type: 'pie',
|
|
radius: ['30%', '60%'],
|
|
itemStyle: {
|
|
normal: {
|
|
color: function (colors) {
|
|
var colorList = ['#83B5F7', '#7E94F6', '#85E3D5', '#2891FF'];
|
|
return colorList[colors.dataIndex];
|
|
}
|
|
},
|
|
},
|
|
data: this.finishData,
|
|
emphasis: {
|
|
itemStyle: {
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 0,
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)',
|
|
}
|
|
}
|
|
}
|
|
]
|
|
};
|
|
this.finishChart.setOption(option)
|
|
|
|
var option2 = {
|
|
grid: {
|
|
left: '5%',
|
|
right: '5%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#E1E5EF', //x轴的颜色
|
|
width: 1, //轴线的宽度
|
|
},
|
|
},
|
|
axisLabel: {
|
|
show: true,
|
|
textStyle: {
|
|
color: '#666',
|
|
},
|
|
},
|
|
data: this.trendDataX
|
|
},
|
|
yAxis: {
|
|
axisLine:{ //y轴
|
|
show: false
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
show: true,
|
|
textStyle: {
|
|
color: '#666',
|
|
},
|
|
},
|
|
type: 'value',
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
series: [
|
|
{
|
|
data: this.trendData,
|
|
type: 'line',
|
|
areaStyle: {//覆盖区域的渐变色
|
|
normal: {
|
|
color: {
|
|
type: 'linear',x: 0,y: 0,x2: 0,y2: 1,
|
|
colorStops: [
|
|
{
|
|
offset: 0, color: 'rgba(58,132,255, 0.8)' // 0% 处的颜色
|
|
},
|
|
{
|
|
offset: 1, color: 'rgba(58,132,255, 0)' // 100% 处的颜色
|
|
}
|
|
],
|
|
global: false // 缺省为 false
|
|
},
|
|
}
|
|
},
|
|
lineStyle: {
|
|
normal: {
|
|
color: '#2891FF'
|
|
}
|
|
},
|
|
itemStyle : {
|
|
normal : {
|
|
color:'#2891FF',
|
|
}
|
|
}
|
|
}
|
|
]
|
|
};
|
|
this.trendChart.setOption(option2)
|
|
|
|
var option3 = {
|
|
tooltip: {
|
|
trigger: 'item'
|
|
},
|
|
series: [
|
|
{
|
|
name: '工单事件分类',
|
|
type: 'pie',
|
|
radius: ['0%', '70%'],
|
|
itemStyle: {
|
|
normal: {
|
|
color: function (colors) {
|
|
var colorList = ['#2891FF', '#FF8700', '#83B5F7', '#7E94F6', '#85E3D5', '#2891FF'];
|
|
return colorList[colors.dataIndex];
|
|
}
|
|
},
|
|
},
|
|
data: this.typeData,
|
|
emphasis: {
|
|
itemStyle: {
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 0,
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)',
|
|
}
|
|
}
|
|
}
|
|
]
|
|
};
|
|
this.typeChart.setOption(option3)
|
|
},
|
|
|
|
selectStatus(e) {
|
|
this.statusInfo.name = e[0].label
|
|
this.statusInfo.eventStatus = e[0].value
|
|
this.getStatistics()
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.statistics {
|
|
background-color: #F3F7F8;
|
|
|
|
.statstics-content {
|
|
padding: 30px 30px 0;
|
|
}
|
|
::v-deep .AiTopFixed {
|
|
.content {
|
|
background-color: #3975C6;
|
|
color: #fff;
|
|
}
|
|
.icon-img{
|
|
width: 48px;
|
|
height: 48px;
|
|
}
|
|
}
|
|
::v-deep .AiMore{
|
|
span{
|
|
color: #fff;
|
|
}
|
|
}
|
|
.info-content{
|
|
width: 100%;
|
|
background: #FFF;
|
|
border-radius: 16px;
|
|
margin-bottom: 24px;
|
|
position: relative;
|
|
padding-bottom: 32px;
|
|
.title{
|
|
font-size: 32px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #333;
|
|
line-height: 48px;
|
|
padding: 24px 16px 24px 24px;
|
|
img{
|
|
float: right;
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
.type-select {
|
|
font-size: 26px;
|
|
position: absolute;
|
|
top: 20px;
|
|
right: 32px;
|
|
width: calc(100% - 250px);
|
|
text-align: right;
|
|
line-height: 48px;
|
|
}
|
|
}
|
|
.el-row{
|
|
display: flex;
|
|
padding: 32px 0 60px 0;
|
|
.item{
|
|
flex: 1;
|
|
text-align: center;
|
|
h2{
|
|
font-size: 64px;
|
|
font-family: DINAlternate-Bold, DINAlternate;
|
|
font-weight: bold;
|
|
color: #3B424A;
|
|
line-height: 64px;
|
|
margin-bottom: 8px;
|
|
}
|
|
p{
|
|
font-size: 28px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
color: #999;
|
|
line-height: 40px;
|
|
}
|
|
}
|
|
}
|
|
.echart-content {
|
|
width: 100%;
|
|
height: 500px;
|
|
}
|
|
.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>
|