From be590d48f66806716c990bdce18d0ed90bf18797 Mon Sep 17 00:00:00 2001
From: zhaowei <zhaowei>
Date: 星期二, 04 三月 2025 15:52:28 +0800
Subject: [PATCH] 420项目： 1、大屏车间管理页面新增及编辑时随意输入车间名称调整为选择已有车间 2、增加车间看板拖拽及缩放功能权限功能 3、实现车间看板设备状态数量及图表数据由后台驱动 4、车间看板页面月、周、日利用率图表数据由后台驱动 5、车间看板页面报警信息列表数据由后台驱动 6、车间看板页面调整右侧设备状态判定，同时加入异常状态展示（设备编号背景色变为红色）
---
src/views/mdc/base/modules/WorkshopSignage/WorkshopDeviceOverview.vue | 217 ++++++++++++++----------------------------------------
1 files changed, 56 insertions(+), 161 deletions(-)
diff --git a/src/views/mdc/base/modules/WorkshopSignage/WorkshopDeviceOverview.vue b/src/views/mdc/base/modules/WorkshopSignage/WorkshopDeviceOverview.vue
index cc5d449..4bf22e8 100644
--- a/src/views/mdc/base/modules/WorkshopSignage/WorkshopDeviceOverview.vue
+++ b/src/views/mdc/base/modules/WorkshopSignage/WorkshopDeviceOverview.vue
@@ -2,21 +2,36 @@
<div style="flex:1;display: flex;">
<div class="chart-container" :id="chartContainerId"></div>
<div class="equipment-state-container">
- <div>璁惧鎬绘暟锛歿{equipmentList.length}}鍙�</div>
- <div>澶т慨銆侀」淇暟閲忥細{{getEquipmentMaintainCount}}鍙�</div>
- <div v-for="(item,index) in equipmentStateList" :key="index">
- <img :src="item.imageColor"><span>{{item.label}}锛歿{getEquipmentStateCount(item.value)}}鍙�</span>
+ <div>璁惧鎬绘暟锛歿{equipmentStatusCountObj.equipmentCount}}鍙�</div>
+ <div>澶т慨銆侀」淇暟閲忥細{{equipmentStatusCountObj.repairCount}}鍙�</div>
+ <div>
+ <img :src="getStatusImageAndLabel('姝ｅ父杩愯','statusImage')"><span>{{getStatusImageAndLabel('姝ｅ父杩愯','label')}}锛歿{equipmentStatusCountObj.runCount}}鍙�</span>
+ </div>
+ <div>
+ <img :src="getStatusImageAndLabel('寰呮満','statusImage')"><span>{{getStatusImageAndLabel('寰呮満','label')}}锛歿{equipmentStatusCountObj.waitCount}}鍙�</span>
+ </div>
+ <div>
+ <img :src="getStatusImageAndLabel('鎶ヨ','statusImage')"><span>{{getStatusImageAndLabel('鎶ヨ','label')}}锛歿{equipmentStatusCountObj.errorCount}}鍙�</span>
+ </div>
+ <div>
+ <img :src="getStatusImageAndLabel('鍏虫満','statusImage')"><span>{{getStatusImageAndLabel('鍏虫満','label')}}锛歿{equipmentStatusCountObj.closeCount}}鍙�</span>
+
</div>
</div>
</div>
</template>
<script>
+ import signageApi from '@/api/signage'
+
export default {
name: 'WorkshopDeviceOverview',
components: {},
props: {
- equipmentList: {
+ currentProductionId: {
+ type: String
+ },
+ equipmentStatusList: {
type: Array
},
toDecimal2NoZero: {
@@ -27,153 +42,40 @@
return {
chartContainer: null,
chartContainerId: 'left-col-chart1',
- equipmentStateList: [
- {
- label: '姝ｅ父杩愯',
- value: [3, 23],
- imageColor: require('@/assets/WorskhopSignage/stateImg_green.gif')
- },
- {
- label: '寰呮満',
- value: [1, 2],
- imageColor: require('@/assets/WorskhopSignage/stateImg_yellow.gif')
- },
- {
- label: '鎶ヨ',
- value: [22],
- imageColor: require('@/assets/WorskhopSignage/stateImg_red.gif')
- },
- {
- label: '鍏虫満',
- value: [null, 0],
- imageColor: require('@/assets/WorskhopSignage/stateImg_gray.gif')
- }
- ]
- }
- },
- computed: {
- /* 鑾峰彇璁惧澶т慨銆侀」淇暟閲� */
- getEquipmentMaintainCount() {
- return this.equipmentList.filter(item => item.maintainType === 2).length
+ equipmentStatusCountObj: {}
}
},
mounted() {
- this.getChartDataByApi()
window.addEventListener('resize', this.handleWindowResize)
+ if (!this.currentProductionId) return
+ this.getDeviceStatusCountByApi()
},
beforeDestroy() {
window.removeEventListener('resize', this.handleWindowResize)
},
methods: {
+ getDeviceStatusCountByApi() {
+ const that = this
+ signageApi.getDeviceStatusCountApi(that.currentProductionId)
+ .then(res => {
+ if (!res.success) return
+ that.equipmentStatusCountObj = res.result
+ this.getChartDataByApi()
+ })
+ },
+
getChartDataByApi() {
this.chartContainer = this.$echarts.init(document.getElementById(this.chartContainerId))
this.initChart()
},
initChart() {
- const data = [
- {
- 'number': '20102',
- 'name': '2-D鏁翠綋鏈哄專',
- 'count': 7,
- 'planCount': 14,
- 'rateCount': 0.5000
- },
- {
- 'number': '20103',
- 'name': '3-D鐕冪儳瀹ゆ満鍖�',
- 'count': 3,
- 'planCount': 9,
- 'rateCount': 0.3333
- },
- {
- 'number': '20104',
- 'name': '4-D鐒婃帴鏈哄專宸ユ',
- 'count': 11,
- 'planCount': 28,
- 'rateCount': 0.3929
- },
- {
- 'number': '20105',
- 'name': '5-D CRIC鍗曞厓',
- 'count': 2,
- 'planCount': 15,
- 'rateCount': 0.1333
- },
- {
- 'number': '20106',
- 'name': '6-D椋庢墖鍗曞厓',
- 'count': 6,
- 'planCount': 15,
- 'rateCount': 0.4000
- },
- {
- 'number': '20107',
- 'name': '7-D娑¤疆鏈哄專',
- 'count': 6,
- 'planCount': 17,
- 'rateCount': 0.3529
- },
- {
- 'number': '20109',
- 'name': '9-D閽冲伐鍗曞厓',
- 'count': 2,
- 'planCount': 18,
- 'rateCount': 0.1111
- },
- {
- 'number': null,
- 'name': '鎬讳换鍔�',
- 'count': 37,
- 'planCount': 116,
- 'rateCount': 0.3190
- }
- ]
- let yAxisData1, yAxisData2, completionNum
- const formatterData = [
- {
- value: '', name: '瀹屾垚閲�', itemStyle: { normal: { color: '#00923f' } },
- label: {
- normal: {
- show: true,
- fontSize: '70%',
- position: 'inside',
- formatter: function() {
- return completionNum + '%'
- }
- }
- }
- },
- {
- value: '', name: '浠诲姟閲�',
- itemStyle: { normal: { color: '#e67817' } },
- label: {
- normal: {
- show: false
- }
- }
- }
- ]
+ const yAxisData1 = this.toDecimal2NoZero((this.equipmentStatusCountObj.runCount / this.equipmentStatusCountObj.equipmentCount) * 100)
+ const yAxisData2 = 100 - yAxisData1
+ const runNum = yAxisData1
const option = {
legend: {
- show: false,
- bottom: 5,
- textStyle: {
- color: '#fff',
- fontSize: '70%'
- },
- itemWidth: 12,
- itemHeight: 8,
- selectedMode: false,
- formatter: function(name) {
- var target
- for (var i = 0, l = formatterData.length; i < l; i++) {
- if (formatterData[i].name == name) {
- target = formatterData[i].value
- }
- }
- return name + ' ' + target
- }
+ show: false
},
series: [
{
@@ -184,33 +86,31 @@
hoverAnimation: false,
data: [
{
- value: 0, name: '瀹屾垚閲�', itemStyle: { normal: { color: '#00923f' } },
+ value: 0,
+ name: '杩愯閲�',
+ itemStyle: { color: '#00923f' },
label: {
- normal: {
- show: true,
- fontSize: '70%',
- position: 'inside',
- textBorderWidth: 0,
- formatter: function() {
- return completionNum + '%'
- }
+ show: true,
+ fontSize: '70%',
+ color: '#fff',
+ position: 'inside',
+ textBorderWidth: 0,
+ formatter: function() {
+ return runNum + '%'
}
}
},
{
- value: 100, name: '浠诲姟閲�',
- itemStyle: { normal: { color: '#e67817' } },
+ value: 100,
+ name: '璁惧閲�',
+ itemStyle: { color: '#e67817' },
label: {
- normal: {
- show: false
- }
+ show: false
}
}
],
labelLine: {
- normal: {
- show: false
- }
+ show: false
},
itemStyle: {
emphasis: {
@@ -222,15 +122,6 @@
}
]
}
- data.forEach(item => {
- if (item.name === '鎬讳换鍔�' && item.rateCount !== null) {
- yAxisData1 = this.toDecimal2NoZero(item.rateCount * 100)
- yAxisData2 = 100 - this.toDecimal2NoZero(item.rateCount * 100)
- completionNum = yAxisData1
- formatterData[0].value = item.count
- formatterData[1].value = item.planCount
- }
- })
option.series[0].data[0].value = yAxisData1
option.series[0].data[1].value = yAxisData2
this.chartContainer.setOption(option, true)
@@ -248,6 +139,10 @@
return stateCount
},
+ getStatusImageAndLabel(label, property) {
+ return this.equipmentStatusList.find(item => item.label === label)[property]
+ },
+
/**
* 绐楀彛灏哄鍙樺寲鏃惰Е鍙�
* 璋冩暣鍥捐〃灏哄浠ラ�傚簲鍒嗚鲸鐜�
--
Gitblit v1.9.3