描述:报修统计页面,点击工单统计跳转

This commit is contained in:
SelfRidicule 2024-08-29 16:32:54 +08:00
parent 094278f2ee
commit dc725a0110
3 changed files with 245 additions and 234 deletions

View File

@ -292,6 +292,8 @@ export default {
}
},
created () {
console.log('this.$route.query', this.$route.query)
this.queryParam.status = this.$route.query.status
this.selectRepairList()
this.selectType()
},

View File

@ -1,83 +1,83 @@
<template>
<a-card :bordered="false">
<div class="table-page-search-wrapper">
<a-form layout="inline">
<a-row :gutter="48">
<a-col :md="5" :sm="15">
<a-form-item label="报修单号">
<a-input placeholder="请输入报修单号" v-model="queryParam.sn" />
<a-card :bordered='false'>
<div class='table-page-search-wrapper'>
<a-form layout='inline'>
<a-row :gutter='48'>
<a-col :md='5' :sm='15'>
<a-form-item label='报修单号'>
<a-input placeholder='请输入报修单号' v-model='queryParam.sn' />
</a-form-item>
</a-col>
<a-col :md="8" :sm="24">
<span class="table-page-search-submitButtons">
<a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
<a-button style="margin-left: 8px" @click="() => queryParam = {}">重置</a-button>
<a-col :md='8' :sm='24'>
<span class='table-page-search-submitButtons'>
<a-button type='primary' @click='$refs.table.refresh(true)'>查询</a-button>
<a-button style='margin-left: 8px' @click='() => queryParam = {}'>重置</a-button>
</span>
</a-col>
</a-row>
</a-form>
</div>
<a-tabs default-active-key="1" @change="callback">
<a-tab-pane key="1" tab="全部信息">
<a-tabs :default-active-key='tabKey' @change='callback'>
<a-tab-pane key='1' tab='全部信息'>
<a-table
size="default"
rowKey="id"
:columns="columns"
:data-source="workerData"
size='default'
rowKey='id'
:columns='columns'
:data-source='workerData'
>
<span slot="name" slot-scope="text, record">
<a-tag color="blue">
<span slot='name' slot-scope='text, record'>
<a-tag color='blue'>
消息提示
</a-tag>
</span>
<span slot="content" slot-scope="text, record">
<a @click="toRepair(record.repairId)">{{ record.content }}</a>
<span slot='content' slot-scope='text, record'>
<a @click='toRepair(record.repairId)'>{{ record.content }}</a>
</span>
<span slot="action" slot-scope="text, record">
<a v-if="editEnabel" @click="handleView(record.id)">详情</a>
<a-divider type="vertical" />
<span slot='action' slot-scope='text, record'>
<a v-if='editEnabel' @click='handleView(record.id)'>详情</a>
<a-divider type='vertical' />
</span>
</a-table>
</a-tab-pane>
<a-tab-pane key="2" tab="未读通知" force-render>
<a-tab-pane key='2' tab='未读通知' force-render>
<a-table
size="default"
rowKey="id"
:columns="columns"
:data-source="noReadData"
size='default'
rowKey='id'
:columns='columns'
:data-source='noReadData'
>
<span slot="name" slot-scope="text, record">
<a-tag color="blue">
<span slot='name' slot-scope='text, record'>
<a-tag color='blue'>
消息提示
</a-tag>
</span>
<span slot="content" slot-scope="text, record">
<a @click="toRepair(record.repairId)">{{ record.content }}</a>
<span slot='content' slot-scope='text, record'>
<a @click='toRepair(record.repairId)'>{{ record.content }}</a>
</span>
<span slot="action" slot-scope="text, record">
<a v-if="editEnabel" @click="handleView(record.id)">详情</a>
<a-divider type="vertical" />
<span slot='action' slot-scope='text, record'>
<a v-if='editEnabel' @click='handleView(record.id)'>详情</a>
<a-divider type='vertical' />
</span>
</a-table>
</a-tab-pane>
<a-tab-pane key="3" tab="已读通知" force-render>
<a-tab-pane key='3' tab='已读通知' force-render>
<a-table
size="default"
rowKey="id"
:columns="columns"
:data-source="readData"
size='default'
rowKey='id'
:columns='columns'
:data-source='readData'
>
<span slot="name" slot-scope="text, record">
<a-tag color="blue">
<span slot='name' slot-scope='text, record'>
<a-tag color='blue'>
消息提示
</a-tag>
</span>
<span slot="content" slot-scope="text, record">
<a @click="toRepair(record.repairId)">{{ record.content }}</a>
<span slot='content' slot-scope='text, record'>
<a @click='toRepair(record.repairId)'>{{ record.content }}</a>
</span>
<span slot="action" slot-scope="text, record">
<a v-if="editEnabel" @click="handleView(record.id)">详情</a>
<a-divider type="vertical" />
<span slot='action' slot-scope='text, record'>
<a v-if='editEnabel' @click='handleView(record.id)'>详情</a>
<a-divider type='vertical' />
</span>
</a-table>
</a-tab-pane>
@ -97,6 +97,7 @@ export default {
},
data() {
return {
tabKey: '1',
labelCol: {
xs: { span: 24 },
sm: { span: 5 }
@ -143,6 +144,7 @@ export default {
},
created() {
this.tabKey = this.$route.query.tabKey
this.workerList()
},
methods: {

View File

@ -1,149 +1,152 @@
<template>
<div class="container">
<div class='container'>
<div class="topHeadView">
<div class="itemView">
<img class="imgView" :src='baseUrl + "/img/paidan.png"'>
<div class="label">待派单</div>
<div class="num">{{ adminStatsCount.wait }}</div>
<div class='topHeadView'>
<div class='itemView' @click="dispatchCase('1')">
<div class='imgView'
:style="{'background' : `no-repeat center/cover url(${baseUrl + '/img/paidan.png'}), white`}"></div>
<div class='label'>待派单</div>
<div class='num'>{{ adminStatsCount.wait }}</div>
</div>
<div class="itemView">
<div class="imgContainer">
<img class="imgView" :src='baseUrl + "/img/paidanjump.png"'>
<div class='itemView' @click="dispatchCase('3')">
<div class='imgContainer'>
<div class='imgView'
:style="{'background' : `no-repeat center/cover url(${baseUrl + '/img/paidanjump.png'}), white`}"></div>
</div>
<div class="label">重派单</div>
<div class="num">{{ adminStatsCount.anew }}</div>
<div class='label'>重派单</div>
<div class='num'>{{ adminStatsCount.anew }}</div>
</div>
<div class="itemView">
<img class="imgView" :src='baseUrl + "/img/time.png"'>
<div class="label">未查看通知</div>
<div class="num">{{ adminStatsCount.newnotice }}</div>
<div class='itemView' @click="jumpInfo('2')">
<div class='imgView'
:style="{'background' : `no-repeat center/cover url(${baseUrl + '/img/time.png'}), white`}"></div>
<div class='label'>未查看通知</div>
<div class='num'>{{ adminStatsCount.newnotice }}</div>
</div>
<div class="itemView">
<img class="imgView" :src='baseUrl + "/img/info.png"'>
<div class="label">已查看通知</div>
<div class="num">{{ adminStatsCount.oldnotice }}</div>
<div class='itemView' @click="jumpInfo('3')">
<div class='imgView'
:style="{'background' : `no-repeat center/cover url(${baseUrl + '/img/info.png'}), white`}"></div>
<div class='label'>已查看通知</div>
<div class='num'>{{ adminStatsCount.oldnotice }}</div>
</div>
</div>
<div class="caseStatisticsView">
<div class="headView">
<div class="titleView">工单统计</div>
<div class="typeView" style="width: 200px;">
<a-range-picker v-model="dateRange2" @change="onChange2" />
<div class='caseStatisticsView'>
<div class='headView'>
<div class='titleView'>工单统计</div>
<div class='typeView' style='width: 200px;'>
<a-range-picker v-model='dateRange2' @change='onChange2' />
</div>
</div>
<div class="contentView">
<div class="itemView">
<div class="label">维修工单</div>
<div class="value">{{ repairStatsCount.zs }}</div>
<div class='contentView'>
<div class='itemView' @click="dispatchCase()">
<div class='label'>维修工单</div>
<div class='value'>{{ repairStatsCount.zs }}</div>
</div>
<div class="itemView">
<div class="label">待维修工单</div>
<div class="value">{{ repairStatsCount.wait }}</div>
<div class='itemView' @click="dispatchCase('7')">
<div class='label'>处理中工单</div>
<div class='value'>{{ repairStatsCount.wait }}</div>
</div>
<div class="itemView">
<div class="label">超时量</div>
<div class="value">{{ repairStatsCount.timeout }}</div>
<div class='itemView'>
<div class='label'>超时量</div>
<div class='value'>{{ repairStatsCount.timeout }}</div>
</div>
<div class="itemView">
<div class="label">差评量</div>
<div class="value">{{ repairStatsCount.l }}</div>
<div class='itemView'>
<div class='label'>差评量</div>
<div class='value'>{{ repairStatsCount.l }}</div>
</div>
<div class="itemView">
<div class="label">中评量</div>
<div class="value">{{ repairStatsCount.m }}</div>
<div class='itemView'>
<div class='label'>中评量</div>
<div class='value'>{{ repairStatsCount.m }}</div>
</div>
<div class="itemView">
<div class="label">好评量</div>
<div class="value">{{ repairStatsCount.h }}</div>
<div class='itemView'>
<div class='label'>好评量</div>
<div class='value'>{{ repairStatsCount.h }}</div>
</div>
</div>
</div>
<div class="statusView">
<div class="caseStatusView">
<div class="headView">
<div class="titleView">工单完成情况</div>
<div class="typeView" style="width: 200px;">
<a-range-picker v-model="dateRange3L" @change="onChange3L" />
<div class='statusView'>
<div class='caseStatusView'>
<div class='headView'>
<div class='titleView'>工单完成情况</div>
<div class='typeView' style='width: 200px;'>
<a-range-picker v-model='dateRange3L' @change='onChange3L' />
</div>
</div>
<div class="contentView">
<div class="circularView">
<div id="echart1" style="width: 400px; height: 300px"></div>
<div class='contentView'>
<div class='circularView'>
<div id='echart1' style='width: 400px; height: 300px'></div>
</div>
<div class="centerLine"></div>
<div class="circularView">
<div id="echart2" style="width: 400px; height: 300px"></div>
<div class='centerLine'></div>
<div class='circularView'>
<div id='echart2' style='width: 400px; height: 300px'></div>
</div>
</div>
</div>
<div class="evaluateView">
<div class="headView">
<div class="titleView">评价情况</div>
<div class="typeView" style="width: 200px;">
<a-range-picker v-model="dateRange3R" @change="onChange3R" />
<div class='evaluateView'>
<div class='headView'>
<div class='titleView'>评价情况</div>
<div class='typeView' style='width: 200px;'>
<a-range-picker v-model='dateRange3R' @change='onChange3R' />
</div>
</div>
<div class="contentView">
<div id="echart3" style="width: 400px; height: 300px"></div>
<div class='contentView'>
<div id='echart3' style='width: 400px; height: 300px'></div>
</div>
</div>
</div>
<div class="faultView">
<div class="floorView">
<div class="headView">
<div class="titleView">网格长</div>
<div class="typeView" style="width: 200px;">
<a-range-picker v-model="dateRange4L" @change="onChange4L" />
<div class='faultView'>
<div class='floorView'>
<div class='headView'>
<div class='titleView'>网格长</div>
<div class='typeView' style='width: 200px;'>
<a-range-picker v-model='dateRange4L' @change='onChange4L' />
</div>
</div>
<div class="contentView">
<div id="echart4" style="width: 550px; height: 600px"></div>
<div class='contentView'>
<div id='echart4' style='width: 550px; height: 600px'></div>
</div>
</div>
<div class="rightView">
<div class="blockView">
<div class="headView">
<div class="titleView">故障统计</div>
<div class="typeView" style="width: 200px;">
<a-range-picker v-model="dateRange4R1" @change="onChange4R1" />
<div class='rightView'>
<div class='blockView'>
<div class='headView'>
<div class='titleView'>故障统计</div>
<div class='typeView' style='width: 200px;'>
<a-range-picker v-model='dateRange4R1' @change='onChange4R1' />
</div>
</div>
<div class="contentView">
<div id="echart5" style="width: 700px; height: 327px"></div>
<div class='contentView'>
<div id='echart5' style='width: 700px; height: 327px'></div>
</div>
</div>
<div class="blockView">
<div class="headView">
<div class="titleView">故障类型</div>
<div class="typeView" style="width: 200px;">
<a-range-picker v-model="dateRange4R2" @change="onChange4R2" />
<div class='blockView'>
<div class='headView'>
<div class='titleView'>故障类型</div>
<div class='typeView' style='width: 200px;'>
<a-range-picker v-model='dateRange4R2' @change='onChange4R2' />
</div>
</div>
<div class="contentView">
<div id="echart6" style="width: 700px; height: 327px"></div>
<div class='contentView'>
<div id='echart6' style='width: 700px; height: 327px'></div>
</div>
</div>
</div>
</div>
<div class="tableView">
<div class="headView">
<div class="titleView">项目详情</div>
<div class="typeView" style="width: 200px;">
<a-range-picker v-model="dateRange5" @change="onChange5" />
<div class='tableView'>
<div class='headView'>
<div class='titleView'>项目详情</div>
<div class='typeView' style='width: 200px;'>
<a-range-picker v-model='dateRange5' @change='onChange5' />
</div>
</div>
<div class="contentView">
<div class='contentView'>
<a-table
size="default"
ref="table"
style="width: 100%"
:columns="columns"
:data-source="loadData"
size='default'
ref='table'
style='width: 100%'
:columns='columns'
:data-source='loadData'
>
</a-table>
@ -168,7 +171,7 @@ import {
} from '@/api/admin/repair/repairStats'
//
const initStart=moment().startOf('isoWeek'),initEnd=moment().endOf('isoWeek');
const initStart = moment().startOf('isoWeek'), initEnd = moment().endOf('isoWeek')
export default {
name: 'RepairStatistics',
@ -269,26 +272,34 @@ export default {
this.deviceTypeStats()//
},
methods: {
//
dispatchCase(status) {
this.$router.push({ name: 'repair', query: { status } })
},
//
jumpInfo(tabKey) {
this.$router.push({ name: 'messageNotice', query: {tabKey} })
},
onChange2() {
this.repairCount2();
this.repairCount2()
},
onChange3L() {
this.repairCount3L();
this.repairCount3L()
},
onChange3R() {
this.repairCount3R();
this.repairCount3R()
},
onChange4L() {
this.floorStats();
this.floorStats()
},
onChange4R1() {
this.deviceStats();
this.deviceStats()
},
onChange4R2() {
this.failureStats();
this.failureStats()
},
onChange5() {
this.deviceTypeStats();
this.deviceTypeStats()
},
adminStats() {
repairAdminStats().then(res => {
@ -296,15 +307,15 @@ export default {
})
},
repairCount2() {
const startDate = this.dateRange2[0].format('YYYY-MM-DD');
const endDate = this.dateRange2[1].format('YYYY-MM-DD');
const startDate = this.dateRange2[0].format('YYYY-MM-DD')
const endDate = this.dateRange2[1].format('YYYY-MM-DD')
repairStats({ startDate: startDate, endDate: endDate, type: 'repair' }).then(res => {
this.repairStatsCount = res.data.stats
})
},
repairCount3L() {
const startDate = this.dateRange3L[0].format('YYYY-MM-DD');
const endDate = this.dateRange3L[1].format('YYYY-MM-DD');
const startDate = this.dateRange3L[0].format('YYYY-MM-DD')
const endDate = this.dateRange3L[1].format('YYYY-MM-DD')
repairStats({ startDate: startDate, endDate: endDate, type: 'end' }).then(res => {
this.finishCount = res.data.wc
this.timeout = res.data.timeout
@ -321,8 +332,8 @@ export default {
})
},
repairCount3R() {
const startDate = this.dateRange3R[0].format('YYYY-MM-DD');
const endDate = this.dateRange3R[1].format('YYYY-MM-DD');
const startDate = this.dateRange3R[0].format('YYYY-MM-DD')
const endDate = this.dateRange3R[1].format('YYYY-MM-DD')
repairStats({ startDate: startDate, endDate: endDate, type: 'eval' }).then(res => {
this.pj = res.data.pj
this.createEchartCake('echart3', {
@ -334,16 +345,16 @@ export default {
},
//
floorStats() {
const startDate = this.dateRange4L[0].format('YYYY-MM-DD');
const endDate = this.dateRange4L[1].format('YYYY-MM-DD');
const startDate = this.dateRange4L[0].format('YYYY-MM-DD')
const endDate = this.dateRange4L[1].format('YYYY-MM-DD')
floorStats({ startDate: startDate, endDate: endDate }).then(res => {
this.createEchartLine('echart4', res.data)
})
},
//
deviceStats() {
const startDate = this.dateRange4R1[0].format('YYYY-MM-DD');
const endDate = this.dateRange4R1[1].format('YYYY-MM-DD');
const startDate = this.dateRange4R1[0].format('YYYY-MM-DD')
const endDate = this.dateRange4R1[1].format('YYYY-MM-DD')
deviceStats({ startDate: startDate, endDate: endDate }).then(res => {
this.faultStatsCount = res.data
this.createColumnEcharrt('echart5', res.data)
@ -351,8 +362,8 @@ export default {
},
//
failureStats() {
const startDate = this.dateRange4R2[0].format('YYYY-MM-DD');
const endDate = this.dateRange4R2[1].format('YYYY-MM-DD');
const startDate = this.dateRange4R2[0].format('YYYY-MM-DD')
const endDate = this.dateRange4R2[1].format('YYYY-MM-DD')
failureStats({ startDate: startDate, endDate: endDate }).then(res => {
this.selectFaultStatsCount = res.data
this.createEchartCake('echart6', {
@ -364,8 +375,8 @@ export default {
},
//
deviceTypeStats() {
const startDate = this.dateRange5[0].format('YYYY-MM-DD');
const endDate = this.dateRange5[1].format('YYYY-MM-DD');
const startDate = this.dateRange5[0].format('YYYY-MM-DD')
const endDate = this.dateRange5[1].format('YYYY-MM-DD')
deviceTypeStats({ startDate: startDate, endDate: endDate }).then(res => {
this.loadData = res.rows
})
@ -478,7 +489,7 @@ export default {
]
//-=
for (let i = 0; i < rawData[0].length; ++i) {
rawData[0][i]-=rawData[1][i];
rawData[0][i] -= rawData[1][i]
}
const grid = {
left: 100,
@ -497,7 +508,7 @@ export default {
barWidth: '10px',
label: {
show: true,
formatter: (params) => params.value>0 ? params.value : ""
formatter: (params) => params.value > 0 ? params.value : ''
},
data: rawData[sid].map((d, did) => rawData[sid][did])
}
@ -548,6 +559,7 @@ export default {
flex-direction: column;
justify-content: center;
align-items: center;
cursor: pointer;
}
@ -555,15 +567,8 @@ export default {
width: 80px;
height: 80px;
border-radius: 80px;
background: white;
}
.topHeadView .itemView .imgView {
width: 80px;
height: 80px;
border-radius: 80px;
background: white;
}
.topHeadView .itemView .label {
margin-top: 10px;
@ -636,6 +641,8 @@ export default {
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
}