yinq
/
zs_aucma-mes-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改接口调用

Browse Source
master
suixy 4 weeks ago
parent a25e72e95b
commit 9bcb12bee4
3 changed files with 260 additions and 105 deletions
Show Stats Download Patch File Download Diff File

12
src/views/board/board1/index.vue
Unescape Escape View File

@ -54,19 +54,19 @@
<div class="itemType itemType3" v-if="i.STATUSCODE===0">未开机</div> <div class="itemType itemType3" v-if="i.STATUSCODE===0">未开机</div>
<div class="itemTime itemTime0" v-if="i.STATUSCODE===2"> <div class="itemTime itemTime0" v-if="i.STATUSCODE===2">
<span style="font-size: 1.5vw;margin-right: 0.2vw;;font-weight: 700">{{ timeData[i.DEVICECODE] || '0' }}</span> <span style="font-size: 1.5vw;margin-right: 0.2vw;;font-weight: 700">{{ timeData[i.DEVICECODE] || '0' }}</span>
<span>min</span> <span>h</span>
</div> </div>
<div class="itemTime itemTime1" v-if="i.STATUSCODE===3"> <div class="itemTime itemTime1" v-if="i.STATUSCODE===3">
<span style="font-size: 1.5vw;margin-right: 0.2vw;;font-weight: 700">{{ timeData[i.DEVICECODE] || '0' }}</span> <span style="font-size: 1.5vw;margin-right: 0.2vw;;font-weight: 700">{{ timeData[i.DEVICECODE] || '0' }}</span>
<span>min</span> <span>h</span>
</div> </div>
<div class="itemTime itemTime2" v-if="i.STATUSCODE===1"> <div class="itemTime itemTime2" v-if="i.STATUSCODE===1">
<span style="font-size: 1.5vw;margin-right: 0.2vw;;font-weight: 700">{{ timeData[i.DEVICECODE] || '0' }}</span> <span style="font-size: 1.5vw;margin-right: 0.2vw;;font-weight: 700">{{ timeData[i.DEVICECODE] || '0' }}</span>
<span>min</span> <span>h</span>
</div> </div>
<div class="itemTime itemTime3" v-if="i.STATUSCODE===0"> <div class="itemTime itemTime3" v-if="i.STATUSCODE===0">
<span style="font-size: 1.5vw;margin-right: 0.2vw;;font-weight: 700">{{ timeData[i.DEVICECODE] || '0' }}</span> <span style="font-size: 1.5vw;margin-right: 0.2vw;;font-weight: 700">{{ timeData[i.DEVICECODE] || '0' }}</span>
<span>min</span> <span>h</span>
</div> </div>
<div class="itemText">待机时长</div> <div class="itemText">待机时长</div>
</div> </div>
@ -239,7 +239,7 @@ export default {
this.getData() this.getData()
timer = setInterval(() => { timer = setInterval(() => {
this.getData() this.getData()
}, 1000 * 30) }, 1000 * 60 * 10)
}, },
methods: { methods: {
getData() { getData() {
@ -254,7 +254,7 @@ export default {
setTimeout(() => { setTimeout(() => {
getDeviceStartTimeList().then(res => { getDeviceStartTimeList().then(res => {
res.data.forEach(e => { res.data.forEach(e => {
this.timeData[e.DEVICECODE] = ((e.STARTTIME / 60) || 0).toFixed(1) this.timeData[e.DEVICECODE] = ((e.STARTTIME / 60 / 60) || 0).toFixed(1)
}) })
}) })
}, 1000 * 2) }, 1000 * 2)

188
src/views/board/board4/index.vue
Unescape Escape View File

@ -2,98 +2,110 @@
<div class="app-container"> <div class="app-container">
<div class="headTitle">数字化注塑车间管控中心</div> <div class="headTitle">数字化注塑车间管控中心</div>
<div class="centerDevice"></div> <div class="centerDevice"></div>
<div class="text1" style="top: 14.7%;left: 5.5%;">今日计划数: <span style="color: #6ACBFD">{{ form.text1 }}</span> <div class="text1" style="top: 14.7%;left: 5.5%;">今日计划数: <span
style="color: #6ACBFD">{{ form.isSimulate ? form.text1 : orderStatisticsData.planCount }}</span>
</div> </div>
<div class="text1" style="top: 14.7%;left: 16.8%;">今日完成数: <span style="color: #68FD82">{{ <div class="text1" style="top: 14.7%;left: 16.8%;">今日完成数: <span style="color: #68FD82">{{
form.text2 form.isSimulate ? form.text2 : orderStatisticsData.completeCount
}}</span> }}</span>
</div> </div>
<div class="text1" style="top: 24%;left: 5.5%;">今日差异数: <span style="color: #FEF16A">{{ form.text3 }}</span> <div class="text1" style="top: 24%;left: 5.5%;">今日差异数: <span
style="color: #FEF16A">{{ form.isSimulate ? form.text3 : orderStatisticsData.diffCount }}</span>
</div> </div>
<div class="text1" style="top: 24%;left: 16.8%;">今日完成率: <span style="color: #69CBFE">{{ form.text4 }}%</span> <div class="text1" style="top: 24%;left: 16.8%;">今日完成率: <span
style="color: #69CBFE">{{ form.isSimulate ? form.text4 : orderStatisticsData.completeRate }}%</span>
</div> </div>
<div class="text1" style="top: 12%;left: 29%;">今日用水(t):</div> <div class="text1" style="top: 12%;left: 29%;">日累计产量</div>
<div class="text1" style="top: 12%;left: 44%;">今日用电(kwh):</div> <div class="text1" style="top: 12%;left: 44%;">月累计产量</div>
<div class="text1" style="top: 12%;left: 59%;">今日用气(m³):</div> <div class="text1" style="top: 12%;left: 59%;">年累计产量</div>
<div class="text1" style="top: 19.1%;left: 75%;">正常: <span style="color: #6AFD81">{{ form.text8 }}</span></div> <div class="text1" style="top: 19.1%;left: 75%;">正常: <span
<div class="text1" style="top: 19.1%;left: 82.4%;">告警: <span style="color: #FFF46C">{{ form.text9 }}</span> style="color: #6AFD81">{{ form.isSimulate ? form.text8 : deviceStatusData.normalCount }}</span></div>
<div class="text1" style="top: 19.1%;left: 82.4%;">告警: <span
style="color: #FFF46C">{{ form.isSimulate ? form.text9 : deviceStatusData.alarmCount }}</span>
</div> </div>
<div class="text1" style="top: 19.1%;left: 89.8%;">停机: <span style="color: #F9241F">{{ form.text10 }}</span> <div class="text1" style="top: 19.1%;left: 89.8%;">停机: <span
style="color: #F9241F">{{ form.isSimulate ? form.text10 : deviceStatusData.stopCount }}</span>
</div> </div>
<div class="num1" style="color:#63CDFA;top: 17%;left: 30.05%;">{{ <div class="num1" style="color:#63CDFA;top: 17%;left: 30.05%;">{{
(form.text5 || '').padStart(5, '0').split('')[0] ((form.isSimulate ? form.text5 : (''+productionTotalData.dayTotal)) || '').padStart(5, '0').split('')[0]
}} }}
</div> </div>
<div class="num1" style="color:#63CDFA;top: 17%;left: 32.55%;">{{ <div class="num1" style="color:#63CDFA;top: 17%;left: 32.55%;">{{
(form.text5 || '').padStart(5, '0').split('')[1] ((form.isSimulate ? form.text5 : (''+productionTotalData.dayTotal)) || '').padStart(5, '0').split('')[1]
}} }}
</div> </div>
<div class="num1" style="color:#63CDFA;top: 17%;left: 35.05%;">{{ <div class="num1" style="color:#63CDFA;top: 17%;left: 35.05%;">{{
(form.text5 || '').padStart(5, '0').split('')[2] ((form.isSimulate ? form.text5 : (''+productionTotalData.dayTotal)) || '').padStart(5, '0').split('')[2]
}} }}
</div> </div>
<div class="num1" style="color:#63CDFA;top: 17%;left: 37.55%;">{{ <div class="num1" style="color:#63CDFA;top: 17%;left: 37.55%;">{{
(form.text5 || '').padStart(5, '0').split('')[3] ((form.isSimulate ? form.text5 : (''+productionTotalData.dayTotal)) || '').padStart(5, '0').split('')[3]
}} }}
</div> </div>
<div class="num1" style="color:#63CDFA;top: 17%;left: 40.05%;">{{ <div class="num1" style="color:#63CDFA;top: 17%;left: 40.05%;">{{
(form.text5 || '').padStart(5, '0').split('')[4] ((form.isSimulate ? form.text5 : (''+productionTotalData.dayTotal)) || '').padStart(5, '0').split('')[4]
}} }}
</div> </div>
<div class="num1" style="color:#69FD80;top: 17%;left: 45.05%;">{{ <div class="num1" style="color:#69FD80;top: 17%;left: 45.05%;">{{
(form.text6 || '').padStart(5, '0').split('')[0] ((form.isSimulate ? form.text6 : (''+productionTotalData.monthTotal)) || '').padStart(5, '0').split('')[0]
}} }}
</div> </div>
<div class="num1" style="color:#69FD80;top: 17%;left: 47.55%;">{{ <div class="num1" style="color:#69FD80;top: 17%;left: 47.55%;">{{
(form.text6 || '').padStart(5, '0').split('')[1] ((form.isSimulate ? form.text6 : (''+productionTotalData.monthTotal)) || '').padStart(5, '0').split('')[1]
}} }}
</div> </div>
<div class="num1" style="color:#69FD80;top: 17%;left: 50.05%;">{{ <div class="num1" style="color:#69FD80;top: 17%;left: 50.05%;">{{
(form.text6 || '').padStart(5, '0').split('')[2] ((form.isSimulate ? form.text6 : (''+productionTotalData.monthTotal)) || '').padStart(5, '0').split('')[2]
}} }}
</div> </div>
<div class="num1" style="color:#69FD80;top: 17%;left: 52.55%;">{{ <div class="num1" style="color:#69FD80;top: 17%;left: 52.55%;">{{
(form.text6 || '').padStart(5, '0').split('')[3] ((form.isSimulate ? form.text6 : (''+productionTotalData.monthTotal)) || '').padStart(5, '0').split('')[3]
}} }}
</div> </div>
<div class="num1" style="color:#69FD80;top: 17%;left: 55.05%;">{{ <div class="num1" style="color:#69FD80;top: 17%;left: 55.05%;">{{
(form.text6 || '').padStart(5, '0').split('')[4] ((form.isSimulate ? form.text6 : (''+productionTotalData.monthTotal)) || '').padStart(5, '0').split('')[4]
}} }}
</div> </div>
<div class="num1" style="color:#FEF26A;top: 17%;left: 60.05%;">{{ <div class="num1" style="color:#FEF26A;top: 17%;left: 60.05%;">{{
(form.text7 || '').padStart(5, '0').split('')[0] ((form.isSimulate ? form.text7 : (''+productionTotalData.yearTotal)) || '').padStart(5, '0').split('')[0]
}} }}
</div> </div>
<div class="num1" style="color:#FEF26A;top: 17%;left: 62.55%;">{{ <div class="num1" style="color:#FEF26A;top: 17%;left: 62.55%;">{{
(form.text7 || '').padStart(5, '0').split('')[1] ((form.isSimulate ? form.text7 : (''+productionTotalData.yearTotal)) || '').padStart(5, '0').split('')[1]
}} }}
</div> </div>
<div class="num1" style="color:#FEF26A;top: 17%;left: 65.05%;">{{ <div class="num1" style="color:#FEF26A;top: 17%;left: 65.05%;">{{
(form.text7 || '').padStart(5, '0').split('')[2] ((form.isSimulate ? form.text7 : (''+productionTotalData.yearTotal)) || '').padStart(5, '0').split('')[2]
}} }}
</div> </div>
<div class="num1" style="color:#FEF26A;top: 17%;left: 67.55%;">{{ <div class="num1" style="color:#FEF26A;top: 17%;left: 67.55%;">{{
(form.text7 || '').padStart(5, '0').split('')[3] ((form.isSimulate ? form.text7 : (''+productionTotalData.yearTotal)) || '').padStart(5, '0').split('')[3]
}} }}
</div> </div>
<div class="num1" style="color:#FEF26A;top: 17%;left: 70.05%;">{{ <div class="num1" style="color:#FEF26A;top: 17%;left: 70.05%;">{{
(form.text7 || '').padStart(5, '0').split('')[4] ((form.isSimulate ? form.text7 : (''+productionTotalData.yearTotal)) || '').padStart(5, '0').split('')[4]
}} }}
</div> </div>
<div class="text2" style="top: 12.7%;left: 84.7%;">设备总数: <span style="color: #68CBFF">{{ form.text11 }}</span> <div class="text2" style="top: 12.7%;left: 84.7%;">设备总数: <span style="color: #68CBFF">{{
form.isSimulate ? form.text11 : deviceStatusData.totalCount
}}</span>
</div> </div>
<div class="text2" style="top: 41%;left: 84.7%;">总维修次数: <span style="color: #EF241E">{{ form.text12 }}</span> <div class="text2" style="top: 41%;left: 84.7%;">总维修次数: <span style="color: #EF241E">{{
form.isSimulate ? form.text12 : deviceStatusData.repairCount
}}</span>
</div> </div>
<div class="text3" style="top: 35.15%;left: 5.5%;">工单进度</div> <div class="text3" style="top: 35.15%;left: 5.5%;">工单进度</div>
<div class="text3" style="top: 35.15%;left: 75%;">维修分析</div> <div class="text3" style="top: 35.15%;left: 75%;">维修分析</div>
<div class="text3" style="top: 63.05%;left: 5.5%;">质量追溯</div> <div class="text3" style="top: 63.05%;left: 5.5%;">质量追溯</div>
<div class="text3" style="top: 63.05%;left: 30.2%;">设备分析</div> <div class="text3" style="top: 63.05%;left: 30.2%;">设备分析</div>
<div class="text3" style="top: 63.05%;left: 75%;">告警趋势</div> <div class="text3" style="top: 63.05%;left: 75%;">告警趋势</div>
<div class="deviceError" v-if="form.view1"> <div class="deviceError" v-if="form.isSimulate ? form.view1 : alarmInfoData.hasAlarm ">
<div class="icon"></div> <div class="icon"></div>
<div class="text" style="left: 18%">{{ form.info1.text1 }}</div> <div class="text" style="left: 18%">{{ form.isSimulate ? form.info1.text1 : alarmInfoData.deviceName }}</div>
<div class="text" style="left: 42%;color: #F42223">{{ form.info1.text2 }}</div> <div class="text" style="left: 42%;color: #F42223">
<div class="text" style="left: 75%">{{ form.info1.text3 }}</div> {{ form.isSimulate ? form.info1.text2 : alarmInfoData.alarmReason }}
</div>
<div class="text" style="left: 75%">{{ form.isSimulate ? form.info1.text3 : alarmInfoData.alarmTime }}</div>
</div> </div>
<div class="scrollTable"> <div class="scrollTable">
@ -116,48 +128,48 @@
</div> </div>
<vue-seamless-scroll <vue-seamless-scroll
:class-option="scrollTableOption" :class-option="scrollTableOption"
:data="form.table1" :data="form.isSimulate ? form.table1 : orderProgressList"
class="case-item" class="case-item"
:key="key" :key="key"
style="height: calc(100% - 20px - 1vw - 0.4vw);overflow: hidden;" style="height: calc(100% - 20px - 1vw - 0.4vw);overflow: hidden;"
> >
<div <div
v-for="(item, index) in form.table1" v-for="(item, index) in form.isSimulate ? form.table1 : orderProgressList"
:key="index" :key="index"
> >
<div :style='"background-color:" + ((index % 2 === 0)? "#05346022":"#05346044") '> <div :style='"background-color:" + ((index % 2 === 0)? "#05346022":"#05346044") '>
<div <div
class="scrollTableItem" style="width: 25%"> class="scrollTableItem" style="width: 25%">
{{ item.text1 }} {{ form.isSimulate ? item.text1 : item.materialName }}
</div> </div>
<div <div
class="scrollTableItem" style="width: 16.66%"> class="scrollTableItem" style="width: 16.66%">
{{ item.text2 }} {{ form.isSimulate ? item.text2 : item.planCount }}
</div> </div>
<div <div
class="scrollTableItem" style="width: 16.66%"> class="scrollTableItem" style="width: 16.66%">
{{ item.text3 }} {{ form.isSimulate ? item.text3 : item.completeCount }}
</div> </div>
<div <div
class="scrollTableItem" style="width: 16.66%"> class="scrollTableItem" style="width: 16.66%">
{{ item.text4 }} {{ form.isSimulate ? item.text4 : item.diffCount }}
</div> </div>
<div <div
class="scrollTableItem" style="width: 25%"> class="scrollTableItem" style="width: 25%">
{{ item.text5 }} {{ form.isSimulate ? item.text5 : item.progress }}
</div> </div>
</div> </div>
</div> </div>
</vue-seamless-scroll> </vue-seamless-scroll>
</div> </div>
<div class="repairTimes"> <div class="repairTimes">
<div class="item" v-for="(i,k) in form.table2"> <div class="item" v-for="(i,k) in form.isSimulate ? form.table2 : repairAnalysisList ">
<div class="num">{{ k + 1 }}</div> <div class="num">{{ k + 1 }}</div>
<div class="deviceName">{{ i.text1 }}</div> <div class="deviceName">{{ form.isSimulate ? i.text1 : i.deviceName }}</div>
<div class="schedule"> <div class="schedule">
<div class="progressBar" :style="{width: i.text2 + '%'}"></div> <div class="progressBar" :style="{width: (form.isSimulate ? i.text2: i.percent) + '%'}"></div>
</div> </div>
<div class="times">{{ i.text3 }}次</div> <div class="times">{{ form.isSimulate ? i.text3 : i.repairCount }}次</div>
</div> </div>
</div> </div>
<div class="chart1"> <div class="chart1">
@ -183,6 +195,13 @@
:visible.sync="configDialogVisible" :visible.sync="configDialogVisible"
width="70%"> width="70%">
<el-form :inline="true" :model="form" label-width="120px"> <el-form :inline="true" :model="form" label-width="120px">
<el-form-item label="是否使用模拟数据">
<el-switch
v-model="form.isSimulate"
active-color="#13ce66"
inactive-color="#ff4949">
</el-switch>
</el-form-item>
<el-form-item label="今日计划数"> <el-form-item label="今日计划数">
<el-input v-model="form.text1" autocomplete="off"></el-input> <el-input v-model="form.text1" autocomplete="off"></el-input>
</el-form-item> </el-form-item>
@ -445,6 +464,13 @@ import {getSimulateData} from "@/api/board/getData";
import {updateCustomData} from "@/api/base/customData"; import {updateCustomData} from "@/api/base/customData";
import {Message} from "element-ui"; import {Message} from "element-ui";
import {getDeviceStatusStatistics} from "@/api/baseDeviceParamVal/val"; import {getDeviceStatusStatistics} from "@/api/baseDeviceParamVal/val";
import {
getAlarmInfo, getDeviceProductionList,
getDeviceStatus,
getOrderProgressList,
getOrderStatistics,
getProductionTotal, getQualityStatistics, getQualityTraceList, getRepairAnalysisList, getRepairTrendList
} from "@/api/board/board4";
const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100 const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
export default { export default {
@ -527,10 +553,20 @@ export default {
waitTime: 0, waitTime: 0,
}, },
isData: false, isData: false,
row: {} row: {},
productionTotalData: {},
orderStatisticsData: {},
orderProgressList: [],
deviceStatusData: {},
alarmInfoData: {},
repairAnalysisList: [],
repairTrendList: [],
qualityStatisticsData: {},
qualityTraceList: [],
deviceProductionList:[]
} }
}, },
mounted() { async mounted() {
getSimulateData({customCode: 'board-1' || '', customType: 1}).then(val => { getSimulateData({customCode: 'board-1' || '', customType: 1}).then(val => {
this.row = val.rows[0] this.row = val.rows[0]
this.form = JSON.parse(val.rows[0].customData); this.form = JSON.parse(val.rows[0].customData);
@ -539,14 +575,51 @@ export default {
this.chartInit() this.chartInit()
}) })
}) })
await this.getData()
setInterval(async () => {
await this.getData()
}, 1000 * 60 * 10)
}, },
methods: { methods: {
async getData(){
getProductionTotal().then(val => {
this.productionTotalData = val.data
})
getOrderStatistics().then(val => {
this.orderStatisticsData = val.data
})
getOrderProgressList().then(val => {
this.orderProgressList = val.data
})
getDeviceStatus().then(val => {
this.deviceStatusData = val.data
})
getAlarmInfo().then(val => {
this.alarmInfoData = val.data
})
getRepairAnalysisList().then(val => {
this.repairAnalysisList = val.data
})
await getRepairTrendList().then(val => {
this.repairTrendList = val.data
})
await getQualityStatistics().then(val => {
this.qualityStatisticsData = val.data
})
await getQualityTraceList().then(val => {
this.qualityTraceList = val.data
})
await getDeviceProductionList().then(val => {
this.deviceProductionList = val.data
})
this.chartInit()
},
chartInit() { chartInit() {
this.$refs.chart1.setData({ this.$refs.chart1.setData({
title: { title: {
y: 'center', y: 'center',
left: '60%', left: '60%',
text: `{dot1|●} {name|合格数} ：{value|${this.form.chart1.value1}}\n\n\n{dot2|●} {name|不合格数} ：{value|${this.form.chart1.value2}}`, text: `{dot1|●} {name|合格数} ：{value|${this.form.isSimulate ? this.form.chart1.value1 : this.qualityStatisticsData.qualifiedCount}}\n\n\n{dot2|●} {name|不合格数} ：{value|${this.form.isSimulate ? this.form.chart1.value2 : this.qualityStatisticsData.unqualifiedCount}}`,
textStyle: { textStyle: {
color: '#ffffff', color: '#ffffff',
rich: { rich: {
@ -599,7 +672,7 @@ export default {
}, },
data: [ data: [
{ {
value: this.form.chart1.value2, value: this.form.isSimulate ? this.form.chart1.value2 : this.qualityStatisticsData.unqualifiedCount,
name: '不合格数', name: '不合格数',
itemStyle: { itemStyle: {
color: '#4E97FF', color: '#4E97FF',
@ -608,7 +681,7 @@ export default {
}, },
}, },
{ {
value: this.form.chart1.value1, value: this.form.isSimulate ? this.form.chart1.value1 : this.qualityStatisticsData.qualifiedCount,
name: '合格数', name: '合格数',
itemStyle: { itemStyle: {
color: '#0000', color: '#0000',
@ -643,9 +716,12 @@ export default {
fontSize: 8, fontSize: 8,
color: '#ddd', color: '#ddd',
}, },
indicator: this.form.chart4.map(e => { indicator: this.form.isSimulate ? this.form.chart4.map(e => {
return {name: e.value1, max: e.value3} return {name: e.value1, max: e.value3}
}) }) : this.qualityTraceList.map(e => {
return {name: e.materialName, max: e.passLimit}
}),
}, },
series: [ series: [
{ {
@ -661,8 +737,10 @@ export default {
}, },
data: [ data: [
{ {
value: this.form.chart4.map(e => { value: this.form.isSimulate ? this.form.chart4.map(e => {
return e.value2 return e.value2
}) : this.qualityTraceList.map(e => {
return e.passRate
}), }),
name: 'Allocated Budget', name: 'Allocated Budget',
areaStyle: { areaStyle: {
@ -684,7 +762,7 @@ export default {
}) })
this.$refs.chart2.setData({ this.$refs.chart2.setData({
xAxis: { xAxis: {
data: this.form.chart2.map(e => e.value1), data: this.form.isSimulate ? this.form.chart2.map(e => e.value1) : this.deviceProductionList.map(e => e.deviceName),
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: '#377097', color: '#377097',
@ -770,7 +848,7 @@ export default {
color: '#66C7FA', color: '#66C7FA',
position: 'top', position: 'top',
}, },
data: this.form.chart2.map(e => e.value2), data: this.form.isSimulate ? this.form.chart2.map(e => e.value2) : this.deviceProductionList.map(e => e.production),
}, },
{ {
type: 'pictorialBar', type: 'pictorialBar',
@ -785,13 +863,13 @@ export default {
itemStyle: { itemStyle: {
color: '#0D2DD7' color: '#0D2DD7'
}, },
data: this.form.chart2.map(e => e.value2), data: this.form.isSimulate ? this.form.chart2.map(e => e.value2) : this.deviceProductionList.map(e => e.production),
} }
], ],
}) })
this.$refs.chart3.setData({ this.$refs.chart3.setData({
xAxis: { xAxis: {
data: this.form.chart3.map(e => e.value1), data: this.form.isSimulate ? this.form.chart3.map(e => e.value1) : this.repairTrendList?.map(e => e.timeHour),
boundaryGap: false, boundaryGap: false,
axisLine: { axisLine: {
lineStyle: { lineStyle: {
@ -868,7 +946,7 @@ export default {
label: { label: {
show: false, show: false,
}, },
data: this.form.chart3.map(e => e.value2), data: this.form.isSimulate ? this.form.chart3.map(e => e.value2) : this.repairTrendList.map(e => e.repairCount),
}, },
], ],
}) })

165
src/views/board/board5/index.vue
Unescape Escape View File

@ -3,63 +3,89 @@
<div class="headTitle">数字化注塑车间管控中心</div> <div class="headTitle">数字化注塑车间管控中心</div>
<div class="text1" style="top: 11.8%;left: 4.5%;letter-spacing: 0.3vw"> <div class="text1" style="top: 11.8%;left: 4.5%;letter-spacing: 0.3vw">
<span>工单总数:</span> <span>工单总数:</span>
<span style="color: #fff;letter-spacing: 0.2vw"> {{ form.text1 }}</span> <span style="color: #fff;letter-spacing: 0.2vw"> {{
form.isSimulate ? form.text1 : orderWorkStatisticsData.totalCount
}}</span>
<span style="color: #fff;letter-spacing: 0.2vw">个</span> <span style="color: #fff;letter-spacing: 0.2vw">个</span>
</div> </div>
<div class="text1" style="top: 11.8%;left: 19%;letter-spacing: 0.5vw"> <div class="text1" style="top: 11.8%;left: 19%;letter-spacing: 0.5vw">
<span>已完成:</span> <span>已完成:</span>
<span style="color: #43FC36;letter-spacing: 0.2vw"> {{ form.text2 }}</span> <span style="color: #43FC36;letter-spacing: 0.2vw"> {{
form.isSimulate ? form.text2 : orderWorkStatisticsData.completeCount
}}</span>
<span style="color: #fff;letter-spacing: 0.2vw">个</span> <span style="color: #fff;letter-spacing: 0.2vw">个</span>
</div> </div>
<div class="text1" style="top: 11.8%;left: 33.8%;letter-spacing: 0.5vw"> <div class="text1" style="top: 11.8%;left: 33.8%;letter-spacing: 0.5vw">
<span>完成率:</span> <span>完成率:</span>
<span style="color: #43FC35;letter-spacing: 0.2vw"> {{ form.text3 }}</span> <span style="color: #43FC35;letter-spacing: 0.2vw"> {{
form.isSimulate ? form.text3 : orderWorkStatisticsData.completeRate
}}</span>
<span style="color: #fff;letter-spacing: 0.2vw">%</span> <span style="color: #fff;letter-spacing: 0.2vw">%</span>
</div> </div>
<div class="text1" style="top: 11.8%;left: 48.2%;letter-spacing: 0.3vw"> <div class="text1" style="top: 11.8%;left: 48.2%;letter-spacing: 0.3vw">
<span>停机工单:</span> <span>停机工单:</span>
<span style="color: #EF0506;letter-spacing: 0.2vw"> {{ form.text4 }}</span> <span style="color: #EF0506;letter-spacing: 0.2vw"> {{
form.isSimulate ? form.text4 : orderWorkStatisticsData.stopCount
}}</span>
<span style="color: #fff;letter-spacing: 0.2vw">个</span> <span style="color: #fff;letter-spacing: 0.2vw">个</span>
</div> </div>
<div class="text1" style="top: 11.8%;left: 62.9%;letter-spacing: 0.1vw"> <div class="text1" style="top: 11.8%;left: 62.9%;letter-spacing: 0.1vw">
<span>平均响应时间:</span> <span>平均响应时间:</span>
<span style="color: #ECB808;letter-spacing: 0.2vw"> {{ form.text5 }}</span> <span style="color: #ECB808;letter-spacing: 0.2vw"> {{
form.isSimulate ? form.text5 : (parseFloat(repairTimeStatisticsData.avgResponseTime) > 1000 ? '无响应' : repairTimeStatisticsData.avgResponseTime)
}}</span>
<span style="color: #fff;letter-spacing: 0.2vw">min</span> <span style="color: #fff;letter-spacing: 0.2vw">min</span>
</div> </div>
<div class="text1" style="top: 11.8%;left: 84%;letter-spacing: 0.1vw"> <div class="text1" style="top: 11.8%;left: 84%;letter-spacing: 0.1vw">
<span>平均维修时间:</span> <span>平均维修时间:</span>
<span style="color: #E10806;letter-spacing: 0.2vw"> {{ form.text6 }}</span> <span style="color: #E10806;letter-spacing: 0.2vw"> {{
form.isSimulate ? form.text6 : repairTimeStatisticsData.avgRepairTime
}}</span>
<span style="color: #fff;letter-spacing: 0.2vw">H</span> <span style="color: #fff;letter-spacing: 0.2vw">H</span>
</div> </div>
<div class="text2" style="top: 19.7%;left: 11%;">设备保养执行情况</div> <div class="text2" style="top: 19.7%;left: 11%;">设备保养执行情况</div>
<div class="text2" style="top: 19.7%;left: 42.5%;">设备巡检执行情况</div> <div class="text2" style="top: 19.7%;left: 42.5%;">设备巡检执行情况</div>
<div class="text2" style="top: 19.7%;left: 74.5%;">故障原因统计TOP5</div> <div class="text2" style="top: 19.7%;left: 74.5%;">故障原因统计TOP5</div>
<div class="text2" style="top: 59.7%;left: 9.7%;">故障数量曲线</div> <div class="text2" style="top: 59.7%;left: 9.7%;">故障数量曲线</div>
<div class="text2" style="top: 59.7%;left: 74.5%;">备件消耗费用TOP5</div> <div class="text2" style="top: 59.7%;left: 74.5%;">机台产量TOP5</div>
<div class="text3" style="top: 31%;left: 20.9%;">计划保养</div> <div class="text3" style="top: 31%;left: 20.9%;">计划保养</div>
<div class="text3" style="top: 31%;left: 27.5%">已保养</div> <div class="text3" style="top: 31%;left: 27.5%">已保养</div>
<div class="text3" style="top: 42.5%;left: 18.8%;">待保养</div> <div class="text3" style="top: 42.5%;left: 18.8%;">待保养</div>
<div class="text3" style="top: 42.5%;left: 24.6%;">保养中</div> <div class="text3" style="top: 42.5%;left: 24.6%;">保养中</div>
<div class="text3" style="top: 42.5%;left: 30.3%;">待验证</div> <div class="text3" style="top: 42.5%;left: 30.3%;">待验证</div>
<div class="text4" style="top: 34.3%;left: 20.9%;font-size: 1vw">{{ form.text7 }}单</div> <div class="text4" style="top: 34.3%;left: 20.9%;font-size: 1vw">
<div class="text4" style="top: 34.3%;left: 27.5%;font-size: 1vw">{{ form.text8 }}单</div> {{ form.isSimulate ? form.text7 : maintStatisticsData.planCount }}单
<div class="text4" style="top: 45.6%;left: 18.8%;">{{ form.text9 }}% / <span style="font-size: 0.6vw">{{ </div>
form.text10 <div class="text4" style="top: 34.3%;left: 27.5%;font-size: 1vw">
{{ form.isSimulate ? form.text8 : maintStatisticsData.completeCount }}单
</div>
<div class="text4" style="top: 45.6%;left: 18.8%;">
{{ form.isSimulate ? form.text9 : maintStatisticsData.waitingCount }}% / <span style="font-size: 0.6vw">{{
form.isSimulate ? form.text10 : maintStatisticsData.waitingRate
}}单</span></div> }}单</span></div>
<div class="text4" style="top: 45.6%;left: 24.6%;">{{ form.text11 }}% / <span <div class="text4" style="top: 45.6%;left: 24.6%;">{{
style="font-size: 0.6vw">{{ form.text12 }}单</span></div> form.isSimulate ? form.text11 : maintStatisticsData.doingCount
<div class="text4" style="top: 45.6%;left: 30.3%;">{{ form.text13 }}% / <span }}% / <span
style="font-size: 0.6vw">{{ form.text14 }}单</span></div> style="font-size: 0.6vw">{{ form.isSimulate ? form.text12 : maintStatisticsData.doingRate }}单</span></div>
<div class="text4" style="top: 45.6%;left: 30.3%;">
{{ form.isSimulate ? form.text13 : maintStatisticsData.verifyCount }}% / <span
style="font-size: 0.6vw">{{ form.isSimulate ? form.text14 : maintStatisticsData.verifyRate }}单</span></div>
<div class="chart1"> <div class="chart1">
<div class="title"><span style="font-size: 1.5vw;font-weight: 800">{{ form.text15 }}</span>%</div> <div class="title"><span style="font-size: 1.5vw;font-weight: 800">{{
form.isSimulate ? form.text15 : maintStatisticsData.completeRate
}}</span>%
</div>
<div class="subTitle">完成率</div> <div class="subTitle">完成率</div>
<Chart ref="chart1"></Chart> <Chart ref="chart1"></Chart>
</div> </div>
<div class="chart2"> <div class="chart2">
<div class="deviceNum">应检设备<span style="color: #56BDFF;font-weight: 800;margin-left: 1vw">{{ <div class="deviceNum">应检设备<span style="color: #56BDFF;font-weight: 800;margin-left: 1vw">{{
form.text16 form.isSimulate ? form.text16 : inspectStatisticsData.deviceCount
}}台</span></div> }}台</span></div>
<div class="title"><span style="font-size: 1.5vw;font-weight: 800">{{ form.text17 }}</span>%</div> <div class="title"><span style="font-size: 1.5vw;font-weight: 800">{{
form.isSimulate ? form.text17 : inspectStatisticsData.completeRate
}}</span>%
</div>
<div class="subTitle">完成率</div> <div class="subTitle">完成率</div>
<Chart ref="chart2"></Chart> <Chart ref="chart2"></Chart>
</div> </div>
@ -76,13 +102,13 @@
</div> </div>
<div class="repairTimes"> <div class="repairTimes">
<div class="expendImg" v-if="toggle"></div> <div class="expendImg" v-if="toggle"></div>
<div class="item" v-for="(i,k) in form.chart2" v-else> <div class="item" v-for="(i,k) in form.isSimulate ? form.chart2 :productionTop5Data " v-else>
<div class="num">{{ k + 1 }}</div> <div class="num">{{ k + 1 }}</div>
<div class="deviceName">{{ i.value1 }}</div> <div class="deviceName">{{ form.isSimulate ? i.value1 : i.deviceName }}</div>
<div class="schedule"> <div class="schedule">
<div class="progressBar" :style="{width: i.value2 + '%'}"></div> <div class="progressBar" :style="{width: (form.isSimulate ? i.value2 :i.percent ) + '%'}"></div>
</div> </div>
<div class="times">{{ i.value3 }}次</div> <div class="times">{{ form.isSimulate ? i.value3 : i.production }}个</div>
</div> </div>
</div> </div>
<div class="config"> <div class="config">
@ -94,6 +120,13 @@
:visible.sync="configDialogVisible" :visible.sync="configDialogVisible"
width="70%"> width="70%">
<el-form :inline="true" :model="form" label-width="120px"> <el-form :inline="true" :model="form" label-width="120px">
<el-form-item label="是否使用模拟数据">
<el-switch
v-model="form.isSimulate"
active-color="#13ce66"
inactive-color="#ff4949">
</el-switch>
</el-form-item>
<el-form-item label="工单总数"> <el-form-item label="工单总数">
<el-input v-model="form.text1" autocomplete="off"></el-input> <el-input v-model="form.text1" autocomplete="off"></el-input>
</el-form-item> </el-form-item>
@ -251,6 +284,14 @@ import {getSimulateData} from "@/api/board/getData";
import {updateCustomData} from "@/api/base/customData"; import {updateCustomData} from "@/api/base/customData";
import {Message} from "element-ui"; import {Message} from "element-ui";
import {getDeviceStatusStatistics} from "@/api/baseDeviceParamVal/val"; import {getDeviceStatusStatistics} from "@/api/baseDeviceParamVal/val";
import {
getDeviceStatusDistribution, getFaultSourceDistribution, getFaultTrendList,
getInspectStatistics,
getMaintStatistics,
getOrderWorkStatistics, getProductionTop5,
getRepairTimeStatistics
} from "@/api/board/board5";
import Log from "@/views/monitor/job/log.vue";
const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100 const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
export default { export default {
@ -303,24 +344,60 @@ export default {
configDialogVisible: false, configDialogVisible: false,
toggle: false, toggle: false,
isData: false, isData: false,
row: {} row: {},
orderWorkStatisticsData: {},
repairTimeStatisticsData: {},
maintStatisticsData: {},
inspectStatisticsData: {},
deviceStatusDistributionData: {},
faultSourceDistributionData: {},
faultTrendList: [],
productionTop5Data: []
} }
}, },
mounted() { async mounted() {
getSimulateData({customCode: 'board-2' || '', customType: 1}).then(val => { getSimulateData({customCode: 'board-2' || '', customType: 1}).then(val => {
this.row = val.rows[0] this.row = val.rows[0]
this.form = JSON.parse(val.rows[0].customData); this.form = JSON.parse(val.rows[0].customData);
this.isData = true this.isData = true
this.$nextTick(() => {
this.chartInit()
})
}) })
await this.getData()
setInterval(async () => {
await this.getData()
}, 1000 * 60 * 10)
}, },
methods: { methods: {
async getData() {
await getOrderWorkStatistics().then(res => {
this.orderWorkStatisticsData = res.data
})
await getRepairTimeStatistics().then(res => {
this.repairTimeStatisticsData = res.data
})
await getMaintStatistics().then(res => {
this.maintStatisticsData = res.data
})
await getInspectStatistics().then(res => {
this.inspectStatisticsData = res.data
})
await getDeviceStatusDistribution().then(res => {
this.deviceStatusDistributionData = res.data
})
await getFaultSourceDistribution().then(res => {
this.faultSourceDistributionData = res.data
})
await getFaultTrendList().then(res => {
this.faultTrendList = res.data
})
await getProductionTop5().then(res => {
this.productionTop5Data = res.data
})
this.chartInit()
},
chartInit() { chartInit() {
let data = [ let data = [
{ {
value: this.form.value1, value: this.form.isSimulate ? this.form.value1 : this.deviceStatusDistributionData.experimentPercent,
name: '实验设备', name: '实验设备',
index: 0, index: 0,
itemStyle: { itemStyle: {
@ -330,7 +407,7 @@ export default {
}, },
}, },
{ {
value: this.form.value2, value: this.form.isSimulate ? this.form.value2 : this.deviceStatusDistributionData.uncheckedPercent,
name: '未检设备', name: '未检设备',
index: 1, index: 1,
itemStyle: { itemStyle: {
@ -340,7 +417,7 @@ export default {
}, },
}, },
{ {
value: this.form.value3, value: this.form.isSimulate ? this.form.value3 : this.deviceStatusDistributionData.normalPercent,
name: '正常设备', name: '正常设备',
index: 2, index: 2,
itemStyle: { itemStyle: {
@ -350,7 +427,7 @@ export default {
}, },
}, },
{ {
value: this.form.value4, value: this.form.isSimulate ? this.form.value4 : this.deviceStatusDistributionData.abnormalPercent,
index: 3, index: 3,
name: '异常设备', name: '异常设备',
itemStyle: { itemStyle: {
@ -362,7 +439,7 @@ export default {
] ]
let chartData = [ let chartData = [
{ {
value: this.form.value5, value: this.form.isSimulate ? this.form.value5 : this.faultSourceDistributionData.maintainPercent,
name: '维护故障', name: '维护故障',
index: 0, index: 0,
itemStyle: { itemStyle: {
@ -372,7 +449,7 @@ export default {
}, },
}, },
{ {
value: this.form.value6, value: this.form.isSimulate ? this.form.value6 : this.faultSourceDistributionData.runningPercent,
name: '运行故障', name: '运行故障',
index: 1, index: 1,
itemStyle: { itemStyle: {
@ -382,7 +459,7 @@ export default {
}, },
}, },
{ {
value: this.form.value7, value: this.form.isSimulate ? this.form.value7 : this.faultSourceDistributionData.naturalPercent,
name: '自然故障', name: '自然故障',
index: 2, index: 2,
itemStyle: { itemStyle: {
@ -407,15 +484,15 @@ export default {
}, },
data: [ data: [
{ {
value: Math.min(parseFloat(this.form.text15), 100), value: Math.min(parseFloat(this.form.isSimulate ? this.form.text15 : (this.maintStatisticsData.completeCount)), 100),
name: '不合格数', name: '合格数',
itemStyle: { itemStyle: {
color: '#00AFFF' color: '#00AFFF'
}, },
}, },
{ {
value: Math.max((100 - parseFloat(this.form.text15)), 0), value: Math.max((100 - parseFloat((this.form.isSimulate ? this.form.text15 : this.maintStatisticsData.completeCount))), 0),
name: '合格数', name: '不合格数',
itemStyle: { itemStyle: {
color: '#0000' color: '#0000'
}, },
@ -554,7 +631,7 @@ export default {
this.$refs.chart4.setData({ this.$refs.chart4.setData({
xAxis: { xAxis: {
data: this.form.chart1.map(e => e.value1), data: this.form.isSimulate ? this.form.chart1.map(e => e.value1) : this.faultTrendList.map(e => e.dateValue),
boundaryGap: false, boundaryGap: false,
axisLine: { axisLine: {
lineStyle: { lineStyle: {
@ -630,7 +707,7 @@ export default {
label: { label: {
show: false, show: false,
}, },
data: this.form.chart1.map(e => e.value2), data: this.form.isSimulate ? this.form.chart1.map(e => e.value2) : this.faultTrendList.map(e => e.faultCount),
}, },
] ]
}) })
@ -709,9 +786,9 @@ export default {
.title { .title {
position: absolute; position: absolute;
bottom: 51%; top: 51%;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translate(-50%, calc(-100% - 0.4vw));
color: #55BCFE; color: #55BCFE;
font-size: 1.1vw; font-size: 1.1vw;
letter-spacing: 0.2vw; letter-spacing: 0.2vw;
@ -746,9 +823,9 @@ export default {
.title { .title {
position: absolute; position: absolute;
bottom: 51%; top: 51%;
left: 23%; left: 23%;
transform: translateX(-50%); transform: translate(-50%, calc(-100% - 0.4vw));
color: #55BCFE; color: #55BCFE;
font-size: 1.1vw; font-size: 1.1vw;
letter-spacing: 0.2vw; letter-spacing: 0.2vw;

Write Preview
Loading…
Cancel
Save