503 lines
13 KiB
Vue
503 lines
13 KiB
Vue
<template>
|
|
<section class="AppWorkStatistics">
|
|
<ai-detail list>
|
|
<ai-title slot="title" title="工单统计">
|
|
<template #rightBtn>
|
|
<el-row type="flex" align="middle">
|
|
<el-cascader ref="cascader1" clearable v-model="totalDeptList" :options="deptOptions" placeholder="所属部门" size="small"
|
|
:props="defaultProps" :show-all-levels="false" @change="totalDeptSelect"></el-cascader>
|
|
</el-row>
|
|
</template>
|
|
</ai-title>
|
|
<template #content>
|
|
<div class="card_list">
|
|
<div class="card">
|
|
<h2>累计上报</h2>
|
|
<p class="color1">{{ totalInfo['累计上报'] || 0 }}</p>
|
|
</div>
|
|
<div class="card">
|
|
<h2>今日上报</h2>
|
|
<p class="color1">{{ totalInfo['今日上报'] || 0 }}</p>
|
|
</div>
|
|
<div class="card">
|
|
<h2>办理中</h2>
|
|
<p class="color1">{{ totalInfo['办理中'] || 0 }}</p>
|
|
</div>
|
|
<div class="card">
|
|
<h2>今日办结</h2>
|
|
<p class="color1">{{ totalInfo['今日办结'] || 0 }}</p>
|
|
</div>
|
|
</div>
|
|
<ai-title slot="title" title="工单分析">
|
|
<template #rightBtn>
|
|
<el-row type="flex" align="middle">
|
|
<span class="shortcut" v-for="(item,i) in timeCheck" :key="i" :class="{active:type==i}"
|
|
@click="timeChange(i)" v-text="item"/>
|
|
<el-cascader ref="cascader2" clearable v-model="deptList" :options="deptOptions" placeholder="所属部门" size="small"
|
|
:props="defaultProps" :show-all-levels="false" @change="deptSelect"></el-cascader>
|
|
</el-row>
|
|
</template>
|
|
</ai-title>
|
|
<el-row type="flex" class="mar-t4 gap-20">
|
|
<div class="chartBox fill">
|
|
<b>事件办结率</b>
|
|
<div>
|
|
<div class="end-num" v-if="endData.length">{{endNum}}%</div>
|
|
<div id="endChart" style="height: 260px; width: 100%;" v-if="endData.length"></div>
|
|
<ai-empty v-else style="height: 200px; width: 100%;" id="empty"/>
|
|
</div>
|
|
</div>
|
|
<div class="chartBox fill">
|
|
<b>工单上报趋势</b>
|
|
<div>
|
|
<div id="trendChart" style="height: 260px; width: 100%;" v-if="trendData.length"></div>
|
|
<ai-empty v-else style="height: 200px; width: 100%;" id="empty"/>
|
|
</div>
|
|
</div>
|
|
</el-row>
|
|
<el-row type="flex" class="mar-t4 gap-20">
|
|
<div class="chartBox fill">
|
|
<div class="title-flex">
|
|
<b>工单分类</b>
|
|
<ai-select v-model="eventStatus" :selectList="dict.getDict('xbotEventStatusSearch')" @change="statusChange"/>
|
|
</div>
|
|
<div>
|
|
<div id="typeChart" style="height: 270px; width: 100%;" v-if="typeData.length"></div>
|
|
<ai-empty v-else style="height: 200px; width: 100%;" id="empty"/>
|
|
</div>
|
|
</div>
|
|
<div class="chartBox fill">
|
|
<b>工单排名</b>
|
|
<div>
|
|
<ai-table v-if="tableData.length"
|
|
:tableData="tableData"
|
|
:col-configs="colConfigs"
|
|
:isShowPagination="false"
|
|
style="margin-top: 6px; width: 100%;">
|
|
</ai-table>
|
|
<ai-empty v-else style="height: 200px; width: 100%;" id="empty"/>
|
|
</div>
|
|
</div>
|
|
</el-row>
|
|
<ai-dialog :visible.sync="dialogDate" title="选择时间" width="500px" customFooter>
|
|
<el-date-picker v-model="timeList" size="small" type="daterange" value-format="yyyy-MM-dd"
|
|
range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
|
|
</el-date-picker>
|
|
<el-button slot="footer" @click="selectDete" type="primary">确认</el-button>
|
|
</ai-dialog>
|
|
</template>
|
|
</ai-detail>
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
import {mapState} from "vuex"
|
|
;
|
|
import AiDetail from "dui/packages/layout/AiDetail.vue";
|
|
import AiTitle from "dui/packages/basic/AiTitle.vue";
|
|
import "echarts-wordcloud";
|
|
|
|
export default {
|
|
name: "AppWorkStatistics",
|
|
components: {AiTitle, AiDetail},
|
|
label: "工单统计",
|
|
props: {
|
|
instance: Function,
|
|
dict: Object,
|
|
permissions: Function,
|
|
},
|
|
data() {
|
|
return {
|
|
defaultProps: {
|
|
label: 'name',
|
|
value: 'fullId',
|
|
checkStrictly: true,
|
|
},
|
|
deptOptions: [],
|
|
info: {},
|
|
trendData: [],
|
|
trendChart: null,
|
|
endData: [],
|
|
endChart: null,
|
|
typeData: [],
|
|
typeChart: null,
|
|
tableData: [],
|
|
totalInfo: {},
|
|
type: '0',
|
|
timeCheck: ['近7天', '近30天', '近1年', '自定义'],
|
|
dialog: false,
|
|
dialogDate: false,
|
|
timeList: [],
|
|
startTime: '',
|
|
endTime: '',
|
|
totalDeptList: [],
|
|
deptList: [],
|
|
time: [],
|
|
endNum: 0,
|
|
eventStatus: '',
|
|
isTypeInit: false, //true分类请求不重新重置其它chart
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState(['user']),
|
|
colConfigs() {
|
|
return [
|
|
{prop: "rank", label: '排名', align: "center", width: "80px"},
|
|
{prop: "roomName", label: '群名称', align: "center"},
|
|
{prop: "ownerName", label: '群主', align: "center", width: "100px"},
|
|
{prop: "c", label: '工单数', align: "center", width: "100px"},
|
|
]
|
|
},
|
|
},
|
|
created() {
|
|
this.$dict.load('xbotEventStatusSearch')
|
|
this.getDeptList()
|
|
this.getTotal()
|
|
this.getStatistics()
|
|
},
|
|
methods: {
|
|
getTotal() {
|
|
var totalDepartmentId = this.totalDeptList.length ? this.totalDeptList[this.totalDeptList.length-1] : ''
|
|
this.instance.post(`/app/appsessionarchivereportinfo/statistics1?deptFullId=${totalDepartmentId}`).then(res => {
|
|
if (res?.data) {
|
|
console.log(res)
|
|
this.totalInfo = res.data
|
|
}
|
|
})
|
|
},
|
|
getStatistics() {
|
|
if(!this.isTypeInit) {
|
|
this.trendData = [], this.endData = [], this.typeData = [], this.tableData = []
|
|
}else {
|
|
this.typeData = []
|
|
}
|
|
var departmentId = this.deptList.length ? this.deptList[this.deptList.length-1] : ''
|
|
this.instance.post('/app/appsessionarchivereportinfo/statistics2', null, {
|
|
params: {
|
|
deptFullId: departmentId,
|
|
type: this.type,
|
|
startTime: this.startTime,
|
|
endTime: this.endTime,
|
|
eventStatus: this.eventStatus
|
|
}
|
|
}).then(res => {
|
|
if (res?.data) {
|
|
this.info = res.data
|
|
if(this.isTypeInit) { //只刷新分类
|
|
this.info.groupList.map((item) => {
|
|
var i = { name: item.groupName, value: item.totalNum };
|
|
this.typeData.push(i);
|
|
})
|
|
if(this.typeData.length) {
|
|
this.$nextTick(() => {
|
|
this.typeChartInit(this.typeData)
|
|
})
|
|
}
|
|
return
|
|
}
|
|
|
|
|
|
var trendX = []
|
|
this.info.trend.map((item) => {
|
|
trendX.push(item.ymd)
|
|
this.trendData.push(item.ecount)
|
|
})
|
|
if(this.trendData.length) {
|
|
this.$nextTick(() => {
|
|
this.trendChartInit(trendX, this.trendData)
|
|
})
|
|
}
|
|
|
|
|
|
Object.keys(res.data.allCountMap).forEach((key) => {
|
|
var info = {
|
|
name: key,
|
|
value: res.data.allCountMap[key]
|
|
}
|
|
this.endData.push(info)
|
|
})
|
|
if(this.endData.length) {
|
|
this.$nextTick(() => {
|
|
this.endChartInit(this.endData)
|
|
})
|
|
}
|
|
var num = res.data.allCountMap['累计办结']/res.data.allCountMap['累计上报']
|
|
this.endNum = Number(num*100).toFixed(2)
|
|
|
|
|
|
this.info.groupList.map((item) => {
|
|
var i = { name: item.groupName, value: item.totalNum };
|
|
this.typeData.push(i);
|
|
})
|
|
if(this.typeData.length) {
|
|
this.$nextTick(() => {
|
|
this.typeChartInit(this.typeData)
|
|
})
|
|
}
|
|
|
|
this.info.ranking.map((item, index)=> {
|
|
if(index < 5) {
|
|
item.rank = index+1
|
|
this.tableData.push(item)
|
|
}
|
|
})
|
|
}
|
|
})
|
|
},
|
|
trendChartInit(xData, yData) {
|
|
this.trendChart = echarts.init(document.getElementById('trendChart'))
|
|
let option = {
|
|
xAxis: {
|
|
type: 'category',
|
|
data: xData
|
|
},
|
|
yAxis: {
|
|
type: 'value'
|
|
},
|
|
grid: {
|
|
left: '10px',
|
|
right: '28px',
|
|
bottom: '14px',
|
|
top: '30px',
|
|
containLabel: true
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
legend: {
|
|
type: "plain"
|
|
},
|
|
color: '#2891FF',
|
|
series: [
|
|
{
|
|
data: yData,
|
|
type: 'line'
|
|
}
|
|
]
|
|
}
|
|
this.trendChart.setOption(option)
|
|
},
|
|
endChartInit(data) {
|
|
this.endChart = echarts.init(document.getElementById('endChart'))
|
|
var option = {
|
|
tooltip: {
|
|
trigger: 'item'
|
|
},
|
|
series: [
|
|
{
|
|
type: 'pie',
|
|
radius: ['60%', '90%'],
|
|
avoidLabelOverlap: false,
|
|
label: {
|
|
show: false,
|
|
position: 'center'
|
|
},
|
|
|
|
labelLine: {
|
|
show: false
|
|
},
|
|
data,
|
|
}
|
|
]
|
|
}
|
|
this.endChart.setOption(option)
|
|
},
|
|
typeChartInit(data) {
|
|
this.typeChart = echarts.init(document.getElementById('typeChart'))
|
|
var option = option = {
|
|
tooltip: {
|
|
trigger: 'item'
|
|
},
|
|
// legend: {
|
|
// bottom: '0%',
|
|
// left: 'center'
|
|
// },
|
|
series: [
|
|
{
|
|
type: 'pie',
|
|
radius: '76%',
|
|
data,
|
|
emphasis: {
|
|
itemStyle: {
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 0,
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
}
|
|
}
|
|
}
|
|
]
|
|
}
|
|
this.typeChart.setOption(option)
|
|
},
|
|
getDeptList() {
|
|
this.instance.post(`/app/wxcp/wxdepartment/listAll`).then((res) => {
|
|
if (res.code == 0) {
|
|
this.deptOptions = this.toTree(res.data)
|
|
}
|
|
})
|
|
},
|
|
toTree(data) {
|
|
let result = [];
|
|
if (!Array.isArray(data)) {
|
|
return result
|
|
}
|
|
let map = {};
|
|
data.forEach(item => {
|
|
map[item.id] = item;
|
|
});
|
|
data.forEach(item => {
|
|
let parent = map[item.parentid];
|
|
if (parent) {
|
|
(parent.children || (parent.children = [])).push(item);
|
|
} else {
|
|
result.push(item);
|
|
}
|
|
});
|
|
return result;
|
|
},
|
|
statusChange() {
|
|
this.isTypeInit = true
|
|
this.getStatistics()
|
|
},
|
|
totalDeptSelect() {
|
|
this.getTotal()
|
|
},
|
|
deptSelect() {
|
|
this.getStatistics()
|
|
},
|
|
timeChange(index) {
|
|
this.type = index
|
|
if (index == 3) {
|
|
this.dialogDate = true
|
|
} else {
|
|
this.startTime = ''
|
|
this.endTime = ''
|
|
this.isTypeInit = false
|
|
this.getStatistics()
|
|
}
|
|
},
|
|
selectDete() {
|
|
if (!this.timeList || !this.timeList.length) {
|
|
return this.$message.error('请选择自定义时间');
|
|
}
|
|
this.startTime = this.timeList?.[0]
|
|
this.endTime = this.timeList?.[1]
|
|
this.dialogDate = false
|
|
this.isTypeInit = false
|
|
this.getStatistics()
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.AppWorkStatistics {
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
|
|
.shortcut {
|
|
display: inline-block;
|
|
width: 70px;
|
|
height: 32px;
|
|
line-height: 32px;
|
|
border-radius: 2px;
|
|
border: 1px solid #D0D4DC;
|
|
margin-right: 8px;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
|
|
&.active {
|
|
color: #2266FF;
|
|
border: 1px solid #2266FF;
|
|
}
|
|
}
|
|
|
|
.chartBox {
|
|
background: #F9F9F9;
|
|
box-shadow: 0px 4px 6px -2px rgba(15, 15, 21, 0.1500);
|
|
border-radius: 4px;
|
|
padding: 16px;
|
|
box-sizing: border-box;
|
|
margin-top: 6px;
|
|
position: relative;
|
|
|
|
.title-flex {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
.chart {
|
|
width: 100%;
|
|
height: 300px;
|
|
}
|
|
|
|
.end-num {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
margin: -10px 0 0 -70px;
|
|
height: 44px;
|
|
line-height: 44px;
|
|
width: 140px;
|
|
text-align: center;
|
|
font-size: 40px;
|
|
}
|
|
}
|
|
|
|
.card_list {
|
|
display: flex;
|
|
margin-bottom: 4px;
|
|
|
|
.card {
|
|
flex: 1;
|
|
height: 76px;
|
|
background: #F9F9F9;
|
|
border-radius: 2px;
|
|
margin-right: 20px;
|
|
padding: 8px 24px;
|
|
box-sizing: border-box;
|
|
|
|
h2 {
|
|
color: #888888;
|
|
font-weight: 600;
|
|
font-size: 16px;
|
|
}
|
|
|
|
p {
|
|
margin-top: 8px;
|
|
font-size: 24px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.color1 {
|
|
color: #2891FF;
|
|
}
|
|
|
|
.color2 {
|
|
color: #22AA99;
|
|
}
|
|
|
|
.color3 {
|
|
color: #F8B425;
|
|
}
|
|
}
|
|
|
|
.card:last-child {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
|
|
:deep( .el-dialog__footer ) {
|
|
text-align: center;
|
|
}
|
|
|
|
:deep( .el-dialog__header ) {
|
|
border-bottom: 1px solid #DDD;
|
|
}
|
|
|
|
:deep( .ai-detail ) {
|
|
background: #FFF;
|
|
}
|
|
}
|
|
</style>
|