设备数据
This commit is contained in:
@@ -67,10 +67,10 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="pie_legend">
|
||||
<div class="pie_legend_item" v-for="(e, i) in stateStatistics.fourState" :key="i" :class="'pie_legend_item_bg_' + (i + 1)">
|
||||
<p class="pie_legend_txt_1">{{ e.stateName }}</p>
|
||||
<div class="pie_legend_item" v-for="(e, i) in deviceRunStat.seriesData" :key="'sbyxtj' + i" :class="'pie_legend_item_bg_' + (i + 1)">
|
||||
<p class="pie_legend_txt_1">{{ e.name }}</p>
|
||||
<div class="pie_legend_txt_wraper">
|
||||
<p class="pie_legend_txt_2">{{ e.status }}</p>
|
||||
<p class="pie_legend_txt_2">{{ e.value }}</p>
|
||||
<p class="pie_legend_txt_3">{{ e.rate }}</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -125,8 +125,8 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { homepageDataLeft, homepageDataRight, screenTableData } from '@js/mork2.js'
|
||||
// import { homepageDataLeft } from '@js/getData2.js'
|
||||
// import { screenTableData } from '@js/mork2.js'
|
||||
import { screenTableData } from '@js/getData2.js'
|
||||
import symbol1 from '@img/symbol_1.png'
|
||||
import symbol2 from '@img/symbol_2.png'
|
||||
import symbol3 from '@img/symbol_3.png'
|
||||
@@ -147,34 +147,17 @@ export default {
|
||||
return {
|
||||
interTime: this.$store.getters.setTime,
|
||||
timer: null,
|
||||
chart1Timer: null,
|
||||
chart2Timer: null,
|
||||
chart3Timer: null,
|
||||
chart4Timer: null,
|
||||
expand: false,
|
||||
deviceErrorRecordList: [], // 设备报警信息
|
||||
mixingList: [], // 当日混料
|
||||
historyList: [], // 历史分析
|
||||
todayMixProduction: {}, // 今日生产混料
|
||||
todayPressProduction: {}, // 今日生产成型
|
||||
todaySortProduction: {}, // 今日生产包装
|
||||
orderFulfillmentRate: {}, // 订单完成
|
||||
todayTotalPlan: '',
|
||||
materialCountSize: '',
|
||||
sortCompleted: '',
|
||||
sortCompletedQty: '',
|
||||
sortMaterialCountSize: '',
|
||||
fulfillmentRate: '',
|
||||
todayMix: [], // 当日混料
|
||||
todaySort: [], // 当日成品
|
||||
inventory: [], // 库存量监控
|
||||
history: [], // 历史分析
|
||||
chart2Timer: null,
|
||||
chart3Timer: null,
|
||||
chart4Timer: null,
|
||||
chart5Timer: null,
|
||||
chart7Timer: null,
|
||||
chart9Timer: null,
|
||||
capacityRate: [], // 设备产能利用
|
||||
stateStatistics: {}, // 设备运行统计
|
||||
areaDeviceStatus: [{process: '混料'}, {process: '压制'}, {process: '干燥'}, {process: '包装'}], // 工序设备状态
|
||||
top10Of30Days: [] // 30天故障top10
|
||||
deviceErrorList: [], // 30天故障Top10
|
||||
productList: [], // 当日成品
|
||||
deviceRunStat: {} // 设备运行统计
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@@ -192,17 +175,15 @@ export default {
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this._homepageDataLeft()
|
||||
this._homepageDataRight()
|
||||
this._screenTableData()
|
||||
// this.refresh()
|
||||
},
|
||||
beforeDestroy () {
|
||||
clearInterval(this.timer)
|
||||
clearInterval(this.chart1Timer)
|
||||
clearInterval(this.chart2Timer)
|
||||
clearInterval(this.chart3Timer)
|
||||
clearInterval(this.chart4Timer)
|
||||
clearInterval(this.chart5Timer)
|
||||
},
|
||||
methods: {
|
||||
expandTooltip () {
|
||||
@@ -210,103 +191,38 @@ export default {
|
||||
},
|
||||
refresh () {
|
||||
this.timer = setInterval(() => {
|
||||
this._homepageDataLeft()
|
||||
this._screenTableData()
|
||||
}, this.interTime)
|
||||
},
|
||||
async _homepageDataLeft () {
|
||||
let res = await homepageDataLeft()
|
||||
async _screenTableData () {
|
||||
let res = await screenTableData()
|
||||
clearInterval(this.chart1Timer)
|
||||
clearInterval(this.chart2Timer)
|
||||
clearInterval(this.chart3Timer)
|
||||
clearInterval(this.chart4Timer)
|
||||
clearInterval(this.chart5Timer)
|
||||
this.todayMixProduction = res.todayProduction.todayMixProduction
|
||||
this.todayPressProduction = res.todayProduction.todayPressProduction
|
||||
this.todaySortProduction = res.todayProduction.todaySortProduction
|
||||
this.todayTotalPlan = res.todayProduction.todayTotalPlan
|
||||
this.materialCountSize = res.todayProduction.materialCountSize
|
||||
this.sortCompleted = res.todayProduction.sortCompleted
|
||||
this.sortCompletedQty = res.todayProduction.sortCompletedQty
|
||||
this.sortMaterialCountSize = res.todayProduction.sortMaterialCountSize
|
||||
this.fulfillmentRate = res.todayProduction.fulfillmentRate
|
||||
this.orderFulfillmentRate = Number(res.todayProduction.orderFulfillmentRate.real) / Number(res.todayProduction.orderFulfillmentRate.plan) * 100
|
||||
this.orderFulfillmentRate = this.orderFulfillmentRate.toFixed(0)
|
||||
this.todayMix = [...res.todayMix]
|
||||
this.todaySort = [...res.todaySort]
|
||||
let total = res.inventory.reduce((a, b) => {
|
||||
return a + Number(b.qty)
|
||||
}, 0)
|
||||
res.inventory.map(el => {
|
||||
let rate = Number(el.qty) * 100 / Number(total)
|
||||
this.deviceErrorRecordList = [...res.deviceErrorRecordList]
|
||||
this.mixingList = [...res.mixingList]
|
||||
this.productList = [...res.productList]
|
||||
this.historyList = [...res.historyList]
|
||||
this.deviceErrorList = [...res.deviceErrorList]
|
||||
this.deviceErrorList.map((e, i) => {
|
||||
this.$set(e, 'sort', i + 1)
|
||||
})
|
||||
this.deviceErrorList = this.deviceErrorList.reverse()
|
||||
let seriesData = [{value: res.deviceRunStat.runNum, name: '正常运行'}, {value: res.deviceRunStat.unProducedNum, name: '暂未生产'}, {value: res.deviceRunStat.freeNum, name: '空闲设备'}, {value: res.deviceRunStat.errorNum, name: '故障设备'}]
|
||||
seriesData.map(el => {
|
||||
let rate = Number(el.value) * 100 / Number(res.deviceRunStat.total)
|
||||
rate = rate.toFixed(2) + '%'
|
||||
this.$set(el, 'rate', rate)
|
||||
})
|
||||
this.inventory = [...res.inventory]
|
||||
this.history = [...res.history]
|
||||
this.deviceRunStat = res.deviceRunStat
|
||||
this.deviceRunStat.seriesData = seriesData
|
||||
this.setEchart1()
|
||||
this.setEchart2()
|
||||
this.setEchart3()
|
||||
// this.setEchart4()
|
||||
// this.setEchart5()
|
||||
},
|
||||
async _homepageDataRight () {
|
||||
let res = await homepageDataRight()
|
||||
clearInterval(this.chart7Timer)
|
||||
clearInterval(this.chart9Timer)
|
||||
this.capacityRate = [...res.capacityRate]
|
||||
res.stateStatistics.fourState.map(el => {
|
||||
let rate = Number(el.status) * 100 / Number(res.stateStatistics.count)
|
||||
rate = rate.toFixed(2) + '%'
|
||||
this.$set(el, 'rate', rate)
|
||||
})
|
||||
this.stateStatistics = res.stateStatistics
|
||||
this.deviceWorkOrder = [...res.deviceWorkOrder]
|
||||
this.areaDeviceStatus.map((e, i) => {
|
||||
if (i === 0) {
|
||||
this.$set(e, 'running', res.areaDeviceStatus.mix.running)
|
||||
this.$set(e, 'pausing', res.areaDeviceStatus.mix.pausing)
|
||||
this.$set(e, 'shutdown', res.areaDeviceStatus.mix.shutdown)
|
||||
this.$set(e, 'inTrouble', res.areaDeviceStatus.mix.inTrouble)
|
||||
}
|
||||
if (i === 1) {
|
||||
this.$set(e, 'running', res.areaDeviceStatus.press.running)
|
||||
this.$set(e, 'pausing', res.areaDeviceStatus.press.pausing)
|
||||
this.$set(e, 'shutdown', res.areaDeviceStatus.press.shutdown)
|
||||
this.$set(e, 'inTrouble', res.areaDeviceStatus.press.inTrouble)
|
||||
}
|
||||
if (i === 2) {
|
||||
this.$set(e, 'running', res.areaDeviceStatus.dry.running)
|
||||
this.$set(e, 'pausing', res.areaDeviceStatus.dry.pausing)
|
||||
this.$set(e, 'shutdown', res.areaDeviceStatus.dry.shutdown)
|
||||
this.$set(e, 'inTrouble', res.areaDeviceStatus.dry.inTrouble)
|
||||
}
|
||||
if (i === 3) {
|
||||
this.$set(e, 'running', res.areaDeviceStatus.sort.running)
|
||||
this.$set(e, 'pausing', res.areaDeviceStatus.sort.pausing)
|
||||
this.$set(e, 'shutdown', res.areaDeviceStatus.sort.shutdown)
|
||||
this.$set(e, 'inTrouble', res.areaDeviceStatus.sort.inTrouble)
|
||||
}
|
||||
})
|
||||
this.top10Of30Days = [...res.top10Of30Days]
|
||||
this.top10Of30Days.map((e, i) => {
|
||||
this.$set(e, 'sort', i + 1)
|
||||
})
|
||||
this.top10Of30Days = this.top10Of30Days.reverse()
|
||||
this.setEchart4()
|
||||
this.setEchart5()
|
||||
},
|
||||
async _screenTableData () {
|
||||
let res = await screenTableData()
|
||||
clearInterval(this.chart2Timer)
|
||||
clearInterval(this.chart3Timer)
|
||||
clearInterval(this.chart4Timer)
|
||||
clearInterval(this.chart5Timer)
|
||||
clearInterval(this.chart7Timer)
|
||||
clearInterval(this.chart9Timer)
|
||||
this.deviceErrorRecordList = [...res.deviceErrorRecordList]
|
||||
this.mixingList = [...res.mixingList]
|
||||
this.historyList = [...res.historyList]
|
||||
},
|
||||
setEchart1 () {
|
||||
let img = {
|
||||
imgSrc1: symbol1,
|
||||
@@ -448,7 +364,7 @@ export default {
|
||||
this.$echarts.dispose(document.getElementById('new_home_echart_1'))
|
||||
let echart = this.$echarts.init(document.getElementById('new_home_echart_1'))
|
||||
echart.setOption(option)
|
||||
this.chart2Timer = setInterval(() => {
|
||||
this.chart1Timer = setInterval(() => {
|
||||
if (option.dataZoom[0].endValue >= barData1.length - 1) {
|
||||
option.dataZoom[0].endValue = 4
|
||||
option.dataZoom[0].startValue = 0
|
||||
@@ -467,11 +383,11 @@ export default {
|
||||
let barData1 = []
|
||||
let barData2 = []
|
||||
let barData3 = []
|
||||
this.todaySort.map(el => {
|
||||
barName.push(el.materialCode)
|
||||
barData1.push(el.plan)
|
||||
barData2.push(el.press)
|
||||
barData3.push(el.real)
|
||||
this.productList.map(el => {
|
||||
barName.push(el.materialName)
|
||||
barData1.push(el.requiredNum)
|
||||
barData2.push(el.suppressedNum)
|
||||
barData3.push(el.finishedNum)
|
||||
})
|
||||
let option = {
|
||||
grid: {
|
||||
@@ -646,7 +562,7 @@ export default {
|
||||
this.$echarts.dispose(document.getElementById('new_home_echart_2'))
|
||||
let echart = this.$echarts.init(document.getElementById('new_home_echart_2'))
|
||||
echart.setOption(option)
|
||||
this.chart3Timer = setInterval(() => {
|
||||
this.chart2Timer = setInterval(() => {
|
||||
if (option.dataZoom[0].endValue >= barData1.length - 1) {
|
||||
option.dataZoom[0].endValue = 4
|
||||
option.dataZoom[0].startValue = 0
|
||||
@@ -667,17 +583,17 @@ export default {
|
||||
imgSrc3: lineSelected
|
||||
}
|
||||
let total = 0
|
||||
this.history.map(el => {
|
||||
total = Math.max(total, Number(el.press), Number(el.sort))
|
||||
this.historyList.map(el => {
|
||||
total = Math.max(total, Number(el.suppressedNum), Number(el.finishedNum))
|
||||
})
|
||||
let barName = []
|
||||
let barData1 = []
|
||||
let barData2 = []
|
||||
let totalDate = []
|
||||
this.history.map(el => {
|
||||
barName.push(el.date)
|
||||
barData1.push(el.press)
|
||||
barData2.push(el.sort)
|
||||
this.historyList.map(el => {
|
||||
barName.push(el.produceDate)
|
||||
barData1.push(el.suppressedNum)
|
||||
barData2.push(el.finishedNum)
|
||||
})
|
||||
let option = {
|
||||
grid: {
|
||||
@@ -849,7 +765,7 @@ export default {
|
||||
let echart = this.$echarts.init(document.getElementById('new_home_echart_3'))
|
||||
echart.setOption(option)
|
||||
let len = 0
|
||||
this.chart5Timer = setInterval(() => {
|
||||
this.chart3Timer = setInterval(() => {
|
||||
if (len === barName.length) {
|
||||
len = 0
|
||||
}
|
||||
@@ -878,12 +794,8 @@ export default {
|
||||
},
|
||||
setEchart4 () {
|
||||
let colors = ['#1980EA', '#67D470', '#B4C9EF', '#EF5252', '#BCBF5C', '#6d5edd', '#bf41bb']
|
||||
let seriesData = this.stateStatistics.fourState
|
||||
seriesData.map((el, i) => {
|
||||
el.value = el.status
|
||||
el.name = el.stateName
|
||||
})
|
||||
let total = this.stateStatistics.count
|
||||
let seriesData = this.deviceRunStat.seriesData
|
||||
let total = this.deviceRunStat.total
|
||||
let option = {
|
||||
color: colors,
|
||||
grid: {
|
||||
@@ -951,14 +863,14 @@ export default {
|
||||
let ydata = []
|
||||
let xdata = []
|
||||
let total = 0
|
||||
this.top10Of30Days.map(el => {
|
||||
total = Math.max(total, Number(el.count))
|
||||
this.deviceErrorList.map(el => {
|
||||
total = Math.max(total, Number(el.errorNum))
|
||||
})
|
||||
let data = []
|
||||
this.top10Of30Days.map(el => {
|
||||
ydata.push(el.device_name)
|
||||
xdata.push({name: el.device_name, value: el.count, sort: el.sort})
|
||||
data.push({value: total, num: el.count})
|
||||
this.deviceErrorList.map(el => {
|
||||
ydata.push(el.deviceName)
|
||||
xdata.push({name: el.deviceName, value: el.errorNum, sort: el.sort})
|
||||
data.push({value: total, num: el.errorNum})
|
||||
})
|
||||
let img = {
|
||||
bg1: bg1,
|
||||
@@ -1209,7 +1121,7 @@ export default {
|
||||
this.$echarts.dispose(document.getElementById('new_home_echart_5'))
|
||||
let echart = this.$echarts.init(document.getElementById('new_home_echart_5'))
|
||||
echart.setOption(option)
|
||||
this.chart9Timer = setInterval(() => {
|
||||
this.chart4Timer = setInterval(() => {
|
||||
if (option.dataZoom[0].endValue === 0) {
|
||||
option.dataZoom[0].endValue = 6
|
||||
option.dataZoom[0].startValue = 9
|
||||
|
||||
Reference in New Issue
Block a user