From f360cde8ff0b28ba677a4693cf45f47f206dd746 Mon Sep 17 00:00:00 2001
From: zhaowei <zhaowei>
Date: 星期三, 21 五月 2025 17:52:54 +0800
Subject: [PATCH] 1、设备管理中设备属性的字段显隐权限调整到设备状态字段 2、设备日志添加批量导出功能
---
src/views/mdc/base/modules/WorkshopSignage/WorkshopDeviceOverview.vue | 269 ++++++++++++++++++++---------------------------------
1 files changed, 104 insertions(+), 165 deletions(-)
diff --git a/src/views/mdc/base/modules/WorkshopSignage/WorkshopDeviceOverview.vue b/src/views/mdc/base/modules/WorkshopSignage/WorkshopDeviceOverview.vue
index cc5d449..ce5ba6e 100644
--- a/src/views/mdc/base/modules/WorkshopSignage/WorkshopDeviceOverview.vue
+++ b/src/views/mdc/base/modules/WorkshopSignage/WorkshopDeviceOverview.vue
@@ -1,22 +1,58 @@
<template>
<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 style="height: 100%">-->
+ <!--<div class="chart-container" :id="chartContainerId"></div>-->
+
+ <!--</div>-->
+ <div style="flex: 1;display: flex;flex-direction: column">
+ <div class="chart-container" :id="chartContainerId" style="flex: 1"></div>
+ <div class="pie-value-container">
+ <div>
+ <span class="color-square" style="background-color: #00923f"></span>瀹屾垚閲�
+ {{equipmentStatusCountObj.qualifiedQty}}
+ </div>
+ <div>
+ <span class="color-square" style="background-color: #e67817"></span>浠诲姟閲� {{equipmentStatusCountObj.planQty}}
+ </div>
</div>
</div>
+ <div class="equipment-state-container">
+ <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>
+
+ <SignageModal ref="signageModalRef" :modalTitle="modalTitle" :productionId="currentProductionId"/>
</div>
</template>
<script>
+ import signageApi from '@/api/signage'
+ import SignageModal from './SignageModal'
+
export default {
name: 'WorkshopDeviceOverview',
- components: {},
+ components: { SignageModal },
props: {
- equipmentList: {
+ workshopName: {
+ type: String
+ },
+ currentProductionId: {
+ type: String
+ },
+ equipmentStatusList: {
type: Array
},
toDecimal2NoZero: {
@@ -27,190 +63,76 @@
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: {},
+ modalTitle: ''
}
},
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.planQty !== 0 ? this.equipmentStatusCountObj.qualifiedQty / this.equipmentStatusCountObj.planQty : 0) * 100)
+ const yAxisData2 = 100 - yAxisData1
+ const finishedNum = 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: [
{
name: '绫荤洰',
type: 'pie',
- radius: '60%',
+ radius: '90%',
center: ['50%', '50%'],
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 finishedNum + '%'
}
}
},
{
- 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,17 +144,14 @@
}
]
}
- 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.on('click', () => {
+ this.modalTitle = this.workshopName + '褰撴湀浠诲姟瀹屾垚鐧惧垎姣�'
+ this.$refs.signageModalRef.visible = true
+ })
+
this.chartContainer.setOption(option, true)
},
@@ -248,6 +167,10 @@
return stateCount
},
+ getStatusImageAndLabel(label, property) {
+ return this.equipmentStatusList.find(item => item.label === label)[property]
+ },
+
/**
* 绐楀彛灏哄鍙樺寲鏃惰Е鍙�
* 璋冩暣鍥捐〃灏哄浠ラ�傚簲鍒嗚鲸鐜�
@@ -260,6 +183,22 @@
</script>
<style lang="less">
+ .pie-value-container {
+ > div {
+ text-align: center;
+ margin-bottom: 5px;
+ }
+
+ .color-square {
+ display: inline-block;
+ width: 0.625vw;
+ height: 0.45vw;
+ border-radius: 0.1vw;
+ background-color: #00ff80;
+ margin-right: 0.4vw;
+ }
+ }
+
.equipment-state-container {
display: flex;
flex-direction: column;
--
Gitblit v1.9.3