kubbo/dvcp_v2_wxcp_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

工单

Browse Source
This commit is contained in:
liuye
2024-08-08 13:38:29 +08:00
parent 8da84b02ac
commit 4997f2a564
19 changed files with 995 additions and 331 deletions
Download Patch File Download Diff File Expand all files Collapse all files

189
src/project/weiyang/AppWorkOrder/Statistics.vue
View File

@@ -2,8 +2,9 @@
<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 type="gird" valueObj nodeKey="id" formType="2" @select="handleSelectGird" class="right-span"
action="/app/apppatrolreportinfo/listByInfo">
<AiMore v-model="selectGird.girdName" icon="arrow-right" placeholder="选择网格"/>
</AiPagePicker>
</div>
</AiTopFixed>
@@ -11,32 +12,33 @@
<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 class="item" v-for="(item, index) in todayList" :key="index" @click="toList(item)">
<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>
<div class="echart-content" id="finish" v-if="showFinish"></div>
<div class="num" v-if="showFinish">{{ finshNum || 0 }}%</div>
<AiEmpty v-else></AiEmpty>
</div>
<div class="info-content">
<div class="title">工单上报趋势图</div>
<div class="echart-content" id="trend"></div>
<div class="title">工单管理趋势图</div>
<AiEmpty v-if="!trendData.length"></AiEmpty>
<div class="echart-content" id="trend" v-else></div>
</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 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="echart-content" id="type"></div>
<AiEmpty v-if="!typeData.length"></AiEmpty>
<div class="echart-content" id="type" v-else></div>
</div>
<div class="pad-b120"></div>
</div>
@@ -46,47 +48,38 @@
<script>
import {mapState} from 'vuex'
import echarts from 'echarts'
export default {
props: {},
data() {
return {
todayList: [],
selectDept: {fullId: '', fullName: ''},
selectGird: {id: '', girdName: ''},
finishChart: null,
trendChart: null,
typeChart: null,
show: false,
finishData: [],
showFinish: false,
finshNum: '',
trendData: [],
trendDataX: [],
typeData: [],
statusInfo: {name: '', eventStatus: ''}
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()
})
created() {
this.getGirdInfo()
},
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) => {
this.todayList = [], this.finishData = [], this.trendDataX = [], this.trendData = [], this.typeData = [], this.showFinish = false
this.$http.post(`/app/apppatrolreportinfov2/countByGirdId?girdId=${this.selectGird.id}&eventStatus=${this.statusInfo.eventStatus}`).then((res) => {
if (res.code == 0) {
this.$nextTick(() => {
this.chartInit()
})
Object.keys(res.data.allCountMap).forEach((key) => {
var info = {
@@ -96,20 +89,24 @@ export default {
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)
Object.keys(res.data.finishCountMap).forEach((key) => {
var info = {
name: key,
value: res.data.finishCountMap[key]
}
if (res.data.finishCountMap[key] > 0) {
this.showFinish = true
}
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) => {
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)
})
@@ -122,16 +119,35 @@ export default {
this.typeData.push(info)
})
this.chartInit()
this.$nextTick(() => {
if (this.showFinish) {
this.finishChartInit()
}
if (this.trendData.length) {
this.trendChartInit()
}
if (this.typeData.length) {
this.typeChartInit()
}
})
}
})
},
chartInit() {
this.finishChart = echarts.init(document.getElementById('finish'))
this.trendChart = echarts.init(document.getElementById('trend'))
this.typeChart = echarts.init(document.getElementById('type'))
getGirdInfo() {
this.$http.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() {
this.finishChart = echarts.init(document.getElementById('finish'))
var option = {
tooltip: {
trigger: 'item'
@@ -144,7 +160,7 @@ export default {
itemStyle: {
normal: {
color: function (colors) {
var colorList = ['#83B5F7', '#7E94F6', '#85E3D5', '#2891FF'];
var colorList = ['#7E94F6', '#85E3D5', '#2891FF'];
return colorList[colors.dataIndex];
}
},
@@ -161,7 +177,10 @@ export default {
]
};
this.finishChart.setOption(option)
},
trendChartInit() {
this.trendChart = echarts.init(document.getElementById('trend'))
var option2 = {
grid: {
left: '5%',
@@ -187,7 +206,7 @@ export default {
data: this.trendDataX
},
yAxis: {
axisLine:{ //y轴
axisLine: { //y轴
show: false
},
axisTick: {
@@ -209,9 +228,9 @@ export default {
data: this.trendData,
type: 'line',
areaStyle: {//覆盖区域的渐变色
normal: {
color: {
type: 'linear',x: 0,y: 0,x2: 0,y2: 1,
normal: {
color: {
type: 'linear', x: 0, y: 0, x2: 0, y2: 1,
colorStops: [
{
offset: 0, color: 'rgba(58,132,255, 0.8)' // 0% 处的颜色
@@ -221,31 +240,34 @@ export default {
}
],
global: false // 缺省为 false
},
}
},
}
},
lineStyle: {
normal: {
color: '#2891FF'
}
},
itemStyle : {
normal : {
color:'#2891FF',
itemStyle: {
normal: {
color: '#2891FF',
}
}
}
]
};
this.trendChart.setOption(option2)
},
typeChartInit() {
this.typeChart = echarts.init(document.getElementById('type'))
var option3 = {
tooltip: {
trigger: 'item'
},
series: [
{
name: '工单事件分类',
name: '巡查事件分类',
type: 'pie',
radius: ['0%', '70%'],
itemStyle: {
@@ -275,6 +297,19 @@ export default {
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?title=${row.label}&searchType=${searchType}&girdId=${this.selectGird.id}`})
}
},
}
</script>
@@ -282,44 +317,51 @@ export default {
<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{
.icon-img {
width: 48px;
height: 48px;
}
}
::v-deep .AiMore{
span{
::v-deep .AiMore {
span {
color: #fff;
}
}
.info-content{
.info-content {
width: 100%;
background: #FFF;
border-radius: 16px;
margin-bottom: 24px;
position: relative;
padding-bottom: 32px;
.title{
.title {
font-size: 32px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #333;
line-height: 48px;
padding: 24px 16px 24px 24px;
img{
img {
float: right;
width: 40px;
height: 40px;
}
.type-select {
font-size: 26px;
position: absolute;
@@ -330,13 +372,16 @@ export default {
line-height: 48px;
}
}
.el-row{
.el-row {
display: flex;
padding: 32px 0 60px 0;
.item{
.item {
flex: 1;
text-align: center;
h2{
h2 {
font-size: 64px;
font-family: DINAlternate-Bold, DINAlternate;
font-weight: bold;
@@ -344,7 +389,8 @@ export default {
line-height: 64px;
margin-bottom: 8px;
}
p{
p {
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
color: #999;
@@ -352,10 +398,12 @@ export default {
}
}
}
.echart-content {
width: 100%;
height: 500px;
}
.num {
position: absolute;
left: 50%;
@@ -367,7 +415,8 @@ export default {
text-align: center;
}
}
.pad-b120{
.pad-b120 {
background-color: #F3F7F8;
padding-bottom: 120px;
}