|
@@ -5,29 +5,29 @@
|
|
<a-col class="gutter-row" :span="8">
|
|
<a-col class="gutter-row" :span="8">
|
|
<div class="gutter-box">
|
|
<div class="gutter-box">
|
|
<a-row type="flex" justify="space-between" style="flex:1; font-size:22px;font-weight: 500;color: #373737;">
|
|
<a-row type="flex" justify="space-between" style="flex:1; font-size:22px;font-weight: 500;color: #373737;">
|
|
- <a-col>待入库数量</a-col>
|
|
|
|
- <a-col>200</a-col>
|
|
|
|
|
|
+ <a-col>今日维修数据</a-col>
|
|
|
|
+ <a-col>{{ topData.repairTotalNum }}</a-col>
|
|
</a-row>
|
|
</a-row>
|
|
<a-row type="flex" justify="space-between" :gutter="[0,16]" style="flex:1;font-size:18px;font-weight: 500;">
|
|
<a-row type="flex" justify="space-between" :gutter="[0,16]" style="flex:1;font-size:18px;font-weight: 500;">
|
|
<a-col >
|
|
<a-col >
|
|
<a-badge color="#E4007F"/>
|
|
<a-badge color="#E4007F"/>
|
|
- <span style="color:#E4007F;">采购入库 77</span>
|
|
|
|
|
|
+ <span style="color:#E4007F;">待维修 {{ topData.waitForRepairNum }}</span>
|
|
</a-col>
|
|
</a-col>
|
|
<a-col >
|
|
<a-col >
|
|
<a-badge color="#5864FF"/>
|
|
<a-badge color="#5864FF"/>
|
|
- <span style="color:#5864FF;">退库入库 77</span>
|
|
|
|
|
|
+ <span style="color:#5864FF;">待审核 {{ topData.verifyRepairNum }}</span>
|
|
|
|
|
|
</a-col>
|
|
</a-col>
|
|
</a-row>
|
|
</a-row>
|
|
<a-row type="flex" justify="space-between" :gutter="[0,16]" style="flex:1;font-size:18px;font-weight: 500;">
|
|
<a-row type="flex" justify="space-between" :gutter="[0,16]" style="flex:1;font-size:18px;font-weight: 500;">
|
|
<a-col >
|
|
<a-col >
|
|
<a-badge color="#F19149"/>
|
|
<a-badge color="#F19149"/>
|
|
- <span style="color:#F19149;">调拨入库 77</span>
|
|
|
|
|
|
+ <span style="color:#F19149;">已完成 {{ topData.completedRepairNum }}</span>
|
|
|
|
|
|
</a-col>
|
|
</a-col>
|
|
<a-col>
|
|
<a-col>
|
|
<a-badge color="#009944"/>
|
|
<a-badge color="#009944"/>
|
|
- <span style="color:#009944;">XXX出库 77</span>
|
|
|
|
|
|
+ <span style="color:#009944;">已驳回 {{ topData.refusedRepairNum }}</span>
|
|
|
|
|
|
</a-col>
|
|
</a-col>
|
|
</a-row>
|
|
</a-row>
|
|
@@ -36,29 +36,29 @@
|
|
<a-col class="gutter-row" :span="8">
|
|
<a-col class="gutter-row" :span="8">
|
|
<div class="gutter-box">
|
|
<div class="gutter-box">
|
|
<a-row type="flex" justify="space-between" style="flex:1; font-size:22px;font-weight: 500;color: #373737;">
|
|
<a-row type="flex" justify="space-between" style="flex:1; font-size:22px;font-weight: 500;color: #373737;">
|
|
- <a-col>待出库数量</a-col>
|
|
|
|
- <a-col>200</a-col>
|
|
|
|
|
|
+ <a-col>今日委外数据</a-col>
|
|
|
|
+ <a-col>{{ topData.outRepairTotalNum }}</a-col>
|
|
</a-row>
|
|
</a-row>
|
|
<a-row type="flex" justify="space-between" :gutter="[0,16]" style="flex:1;font-size:18px;font-weight: 500;">
|
|
<a-row type="flex" justify="space-between" :gutter="[0,16]" style="flex:1;font-size:18px;font-weight: 500;">
|
|
<a-col >
|
|
<a-col >
|
|
<a-badge color="#E4007F"/>
|
|
<a-badge color="#E4007F"/>
|
|
- <span style="color:#E4007F;">领用出库 77</span>
|
|
|
|
|
|
+ <span style="color:#E4007F;">待维修 {{ topData.outWaitForRepairNum }}</span>
|
|
</a-col>
|
|
</a-col>
|
|
<a-col >
|
|
<a-col >
|
|
<a-badge color="#5864FF"/>
|
|
<a-badge color="#5864FF"/>
|
|
- <span style="color:#5864FF;">退库入库 77</span>
|
|
|
|
|
|
+ <span style="color:#5864FF;">待审核 {{ topData.outVerifyRepairNum }}</span>
|
|
|
|
|
|
</a-col>
|
|
</a-col>
|
|
</a-row>
|
|
</a-row>
|
|
<a-row type="flex" justify="space-between" :gutter="[0,16]" style="flex:1;font-size:18px;font-weight: 500;">
|
|
<a-row type="flex" justify="space-between" :gutter="[0,16]" style="flex:1;font-size:18px;font-weight: 500;">
|
|
<a-col >
|
|
<a-col >
|
|
<a-badge color="#F19149"/>
|
|
<a-badge color="#F19149"/>
|
|
- <span style="color:#F19149;">调拨出库 77</span>
|
|
|
|
|
|
+ <span style="color:#F19149;">已完成 {{ topData.outCompletedRepairNum }}</span>
|
|
|
|
|
|
</a-col>
|
|
</a-col>
|
|
<a-col>
|
|
<a-col>
|
|
<a-badge color="#009944"/>
|
|
<a-badge color="#009944"/>
|
|
- <span style="color:#009944;">XXX出库 77</span>
|
|
|
|
|
|
+ <span style="color:#009944;">已驳回 {{ topData.outRefusedRepairNum }}</span>
|
|
|
|
|
|
</a-col>
|
|
</a-col>
|
|
</a-row>
|
|
</a-row>
|
|
@@ -67,13 +67,13 @@
|
|
<a-col class="gutter-row" :span="8">
|
|
<a-col class="gutter-row" :span="8">
|
|
<div style="display:flex;text-align:center;background:#fff;height: 170px;">
|
|
<div style="display:flex;text-align:center;background:#fff;height: 170px;">
|
|
<div style="width:48%;margin:auto;font-size:30px; line-height: 60px;">
|
|
<div style="width:48%;margin:auto;font-size:30px; line-height: 60px;">
|
|
- <div>备件总数</div>
|
|
|
|
- <div style="font-size:24px;">333333</div>
|
|
|
|
|
|
+ <div>维修总计</div>
|
|
|
|
+ <div style="font-size:24px;">{{ topData.totalNum }}</div>
|
|
</div>
|
|
</div>
|
|
<div style="width: 1px;height: 70px;background: #999999;margin:auto;"></div>
|
|
<div style="width: 1px;height: 70px;background: #999999;margin:auto;"></div>
|
|
<div style="width:48%;margin:auto; font-size:30px;line-height: 60px;">
|
|
<div style="width:48%;margin:auto; font-size:30px;line-height: 60px;">
|
|
- <div>备件总数</div>
|
|
|
|
- <div style="font-size:24px;">333333</div>
|
|
|
|
|
|
+ <div>维修费用总计</div>
|
|
|
|
+ <div style="font-size:24px;">{{ topData.totalFee }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a-col>
|
|
</a-col>
|
|
@@ -81,10 +81,10 @@
|
|
</div>
|
|
</div>
|
|
<div class="gutter-example">
|
|
<div class="gutter-example">
|
|
<a-row :gutter="[20,40]">
|
|
<a-row :gutter="[20,40]">
|
|
- <a-col class="gutter-row" :span="6">
|
|
|
|
|
|
+ <a-col class="gutter-row" :span="8">
|
|
<div style="height: 471px;background: #FFFFFF;padding:24px">
|
|
<div style="height: 471px;background: #FFFFFF;padding:24px">
|
|
- <div style="display:flex;justify-content: space-between;width:100px;height: 18px; font-size:16px;color: #555555; ">
|
|
|
|
- <div>设备实施状态</div>
|
|
|
|
|
|
+ <div style="display:flex;justify-content: space-between;width:160px;height: 18px; font-size:16px;color: #555555; ">
|
|
|
|
+ <div>维修费用类别统计</div>
|
|
<!-- <div>设备总数100</div> -->
|
|
<!-- <div>设备总数100</div> -->
|
|
</div>
|
|
</div>
|
|
<div id="container-pie"></div>
|
|
<div id="container-pie"></div>
|
|
@@ -92,14 +92,14 @@
|
|
</a-col>
|
|
</a-col>
|
|
<a-col class="gutter-row" :span="12">
|
|
<a-col class="gutter-row" :span="12">
|
|
<div style="height: 471px;background: #FFFFFF; padding:24px;">
|
|
<div style="height: 471px;background: #FFFFFF; padding:24px;">
|
|
- <div style="display:flex;justify-content: space-between;width:100px;height: 18px; font-size:16px;color: #555555; margin-bottom:80px;">
|
|
|
|
|
|
+ <div style="display:flex;justify-content: space-between;width:190px;height: 18px; font-size:16px;color: #555555; margin-bottom:80px;">
|
|
<div style="width: 7px;background: #4D86ED;"></div>
|
|
<div style="width: 7px;background: #4D86ED;"></div>
|
|
- <div>近一周数据</div>
|
|
|
|
|
|
+ <div>近一周每日产生维修单数</div>
|
|
</div>
|
|
</div>
|
|
- <div id="container-line"></div>
|
|
|
|
|
|
+ <div id="container-line"></div>
|
|
</div>
|
|
</div>
|
|
</a-col>
|
|
</a-col>
|
|
- <a-col class="gutter-row" :span="6">
|
|
|
|
|
|
+ <a-col class="gutter-row" :span="4">
|
|
<div style="height: 471px;display:flex;flex-direction:column;justify-content: space-between">
|
|
<div style="height: 471px;display:flex;flex-direction:column;justify-content: space-between">
|
|
<div class="btn" style="background:linear-gradient(to right,#36B5FA,#26ECF5);">
|
|
<div class="btn" style="background:linear-gradient(to right,#36B5FA,#26ECF5);">
|
|
<my-icon type="icon-chukuguanli" style="font-size:58px;"/>
|
|
<my-icon type="icon-chukuguanli" style="font-size:58px;"/>
|
|
@@ -180,7 +180,7 @@
|
|
|
|
|
|
<script>
|
|
<script>
|
|
import { STable } from '@/components'
|
|
import { STable } from '@/components'
|
|
-import { getWorkplaceBacklogUserPage } from '@/api/workplace/backlog'
|
|
|
|
|
|
+import { getWorkplaceBacklogUserPage, getWorkplaceBacklogTopData, getWorkplaceBacklogWeekData, getWorkplaceBacklogPie } from '@/api/workplace/backlog'
|
|
import { Chart } from '@antv/g2'
|
|
import { Chart } from '@antv/g2'
|
|
export default {
|
|
export default {
|
|
name: 'NewWorkplaceBacklog',
|
|
name: 'NewWorkplaceBacklog',
|
|
@@ -198,17 +198,19 @@ export default {
|
|
{ item: '事例五', count: 9, percent: 0.09 }
|
|
{ item: '事例五', count: 9, percent: 0.09 }
|
|
],
|
|
],
|
|
lineData: [
|
|
lineData: [
|
|
- { week: '周一', value: 3 },
|
|
|
|
- { week: '周二', value: 4 },
|
|
|
|
- { week: '周三', value: 7.5 },
|
|
|
|
- { week: '周四', value: 5 },
|
|
|
|
- { week: '周五', value: 4.9 },
|
|
|
|
- { week: '周六', value: 6 },
|
|
|
|
- { week: '周日', value: 7 },
|
|
|
|
-],
|
|
|
|
|
|
+ { week: '周一', value: 3 },
|
|
|
|
+ { week: '周二', value: 4 },
|
|
|
|
+ { week: '周三', value: 7.5 },
|
|
|
|
+ { week: '周四', value: 5 },
|
|
|
|
+ { week: '周五', value: 4.9 },
|
|
|
|
+ { week: '周六', value: 6 },
|
|
|
|
+ { week: '周日', value: 7 }
|
|
|
|
+ ],
|
|
allCount: 100,
|
|
allCount: 100,
|
|
chartPie: null,
|
|
chartPie: null,
|
|
chartLine: null,
|
|
chartLine: null,
|
|
|
|
+ topData: null,
|
|
|
|
+ type: this.$route.query.type,
|
|
queryParam: {
|
|
queryParam: {
|
|
status: 1
|
|
status: 1
|
|
},
|
|
},
|
|
@@ -315,7 +317,7 @@ export default {
|
|
},
|
|
},
|
|
created () {
|
|
created () {
|
|
this.getDict()
|
|
this.getDict()
|
|
- //this.getInfo()
|
|
|
|
|
|
+ // this.getInfo()
|
|
},
|
|
},
|
|
mounted () {
|
|
mounted () {
|
|
this.$nextTick(function () {
|
|
this.$nextTick(function () {
|
|
@@ -326,10 +328,32 @@ export default {
|
|
getDict () {
|
|
getDict () {
|
|
this.typeDict = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.WORKPLACE_BACKLOG_TYPE)
|
|
this.typeDict = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.WORKPLACE_BACKLOG_TYPE)
|
|
this.typeDetailDict = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.WORKPLACE_BACKLOG_DETAIL_TYPE)
|
|
this.typeDetailDict = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.WORKPLACE_BACKLOG_DETAIL_TYPE)
|
|
|
|
+ getWorkplaceBacklogTopData('workplace-repair-manage').then(res => {
|
|
|
|
+ this.topData = res.data
|
|
|
|
+ })
|
|
},
|
|
},
|
|
getInfo () {
|
|
getInfo () {
|
|
- this.getPieCharts('container-pie', this.equipmentData)
|
|
|
|
- this.getLineCharts('container-line', this.lineData)
|
|
|
|
|
|
+ Promise.all([getWorkplaceBacklogWeekData('workplace-repair-manage'), getWorkplaceBacklogPie('workplace-repair-manage')]).then(res => {
|
|
|
|
+ console.log(res)
|
|
|
|
+ this.lineData = res[0].data.reduce((pre, item) => {
|
|
|
|
+ pre.push({
|
|
|
|
+ week: item.weekDayName,
|
|
|
|
+ value: item.tempTotalNum
|
|
|
|
+ })
|
|
|
|
+ return pre
|
|
|
|
+ }, [])
|
|
|
|
+ this.equipmentData = res[1].data.reduce((pre, item) => {
|
|
|
|
+ pre.push({
|
|
|
|
+ item: item.typeName,
|
|
|
|
+ count: item.fee,
|
|
|
|
+ percent: item.fee
|
|
|
|
+ })
|
|
|
|
+ return pre
|
|
|
|
+ }, [])
|
|
|
|
+ }).then(() => {
|
|
|
|
+ this.getPieCharts('container-pie', this.equipmentData)
|
|
|
|
+ this.getLineCharts('container-line', this.lineData)
|
|
|
|
+ })
|
|
},
|
|
},
|
|
getPieCharts (id, data) {
|
|
getPieCharts (id, data) {
|
|
this.chartPie && this.chartPie.destroy()// 防止点击搜索按钮新增一个
|
|
this.chartPie && this.chartPie.destroy()// 防止点击搜索按钮新增一个
|
|
@@ -339,7 +363,7 @@ export default {
|
|
height: 400
|
|
height: 400
|
|
})
|
|
})
|
|
this.chartPie.data(data)
|
|
this.chartPie.data(data)
|
|
- this.chartPie.scale('count',{
|
|
|
|
|
|
+ this.chartPie.scale('count', {
|
|
nice: true
|
|
nice: true
|
|
})
|
|
})
|
|
this.chartPie.coordinate('theta', {
|
|
this.chartPie.coordinate('theta', {
|
|
@@ -357,38 +381,6 @@ export default {
|
|
// 辅助文本
|
|
// 辅助文本
|
|
this.chartPie
|
|
this.chartPie
|
|
.annotation()
|
|
.annotation()
|
|
- .text({
|
|
|
|
- position: ['50%', '50%'],
|
|
|
|
- content: '主机',
|
|
|
|
- style: {
|
|
|
|
- fontSize: 14,
|
|
|
|
- fill: '#8c8c8c',
|
|
|
|
- textAlign: 'center'
|
|
|
|
- },
|
|
|
|
- offsetY: -20
|
|
|
|
- })
|
|
|
|
- .text({
|
|
|
|
- position: ['50%', '50%'],
|
|
|
|
- content: '100',
|
|
|
|
- style: {
|
|
|
|
- fontSize: 20,
|
|
|
|
- fill: '#8c8c8c',
|
|
|
|
- textAlign: 'center'
|
|
|
|
- },
|
|
|
|
- offsetX: -10,
|
|
|
|
- offsetY: 20
|
|
|
|
- })
|
|
|
|
- .text({
|
|
|
|
- position: ['50%', '50%'],
|
|
|
|
- content: '台',
|
|
|
|
- style: {
|
|
|
|
- fontSize: 14,
|
|
|
|
- fill: '#8c8c8c',
|
|
|
|
- textAlign: 'center'
|
|
|
|
- },
|
|
|
|
- offsetY: 20,
|
|
|
|
- offsetX: 20
|
|
|
|
- })
|
|
|
|
this.chartPie
|
|
this.chartPie
|
|
.interval()
|
|
.interval()
|
|
.adjust('stack')
|
|
.adjust('stack')
|
|
@@ -397,7 +389,7 @@ export default {
|
|
.label('percent', (percent) => {
|
|
.label('percent', (percent) => {
|
|
return {
|
|
return {
|
|
content: (data) => {
|
|
content: (data) => {
|
|
- return `${data.item}: ${percent * 100}`
|
|
|
|
|
|
+ return `${data.item}: ${percent}`
|
|
}
|
|
}
|
|
}
|
|
}
|
|
})
|
|
})
|
|
@@ -412,42 +404,41 @@ export default {
|
|
|
|
|
|
this.chartPie.render()
|
|
this.chartPie.render()
|
|
},
|
|
},
|
|
- getLineCharts(id,data){
|
|
|
|
- this.chartLine=new Chart({
|
|
|
|
- container: id,
|
|
|
|
- autoFit: true,
|
|
|
|
- height: 300,
|
|
|
|
-});
|
|
|
|
-
|
|
|
|
-this.chartLine.data(data);
|
|
|
|
-this.chartLine.scale({
|
|
|
|
- week: {
|
|
|
|
- range: [0, 1],
|
|
|
|
- },
|
|
|
|
- value: {
|
|
|
|
- min: 0,
|
|
|
|
- nice: true,
|
|
|
|
- },
|
|
|
|
-});
|
|
|
|
|
|
+ getLineCharts (id, data) {
|
|
|
|
+ this.chartLine = new Chart({
|
|
|
|
+ container: id,
|
|
|
|
+ autoFit: true,
|
|
|
|
+ height: 300
|
|
|
|
+ })
|
|
|
|
|
|
-this.chartLine.tooltip({
|
|
|
|
- showCrosshairs: true, // 展示 Tooltip 辅助线
|
|
|
|
- shared: true,
|
|
|
|
-});
|
|
|
|
|
|
+ this.chartLine.data(data)
|
|
|
|
+ this.chartLine.scale({
|
|
|
|
+ week: {
|
|
|
|
+ range: [0, 1]
|
|
|
|
+ },
|
|
|
|
+ value: {
|
|
|
|
+ min: 0,
|
|
|
|
+ nice: true
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
|
|
-this.chartLine.axis('value', {
|
|
|
|
- label: {
|
|
|
|
- formatter: (val) => {
|
|
|
|
- return val + 'k';
|
|
|
|
- },
|
|
|
|
- },
|
|
|
|
-});
|
|
|
|
|
|
+ this.chartLine.tooltip({
|
|
|
|
+ showCrosshairs: true, // 展示 Tooltip 辅助线
|
|
|
|
+ shared: true
|
|
|
|
+ })
|
|
|
|
|
|
-this.chartLine.area().position('week*value')
|
|
|
|
-this.chartLine.line().position('week*value')
|
|
|
|
|
|
+ this.chartLine.axis('value', {
|
|
|
|
+ label: {
|
|
|
|
+ formatter: (val) => {
|
|
|
|
+ return val
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
|
|
-this.chartLine.render();
|
|
|
|
|
|
+ this.chartLine.area().position('week*value')
|
|
|
|
+ this.chartLine.line().position('week*value')
|
|
|
|
|
|
|
|
+ this.chartLine.render()
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|