From 54d11f9a2f395e021486e6a31912616274b3feda Mon Sep 17 00:00:00 2001
From: zhaowei <zhaowei>
Date: 星期一, 08 九月 2025 11:55:10 +0800
Subject: [PATCH] 车间智慧看板页面新增定时刷新功能
---
src/views/mdc/base/modules/WorkshopSignage/WorkshopEquipmentStatusChart.vue | 303 ++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 303 insertions(+), 0 deletions(-)
diff --git a/src/views/mdc/base/modules/WorkshopSignage/WorkshopEquipmentStatusChart.vue b/src/views/mdc/base/modules/WorkshopSignage/WorkshopEquipmentStatusChart.vue
new file mode 100644
index 0000000..ebb46d8
--- /dev/null
+++ b/src/views/mdc/base/modules/WorkshopSignage/WorkshopEquipmentStatusChart.vue
@@ -0,0 +1,303 @@
+<template>
+ <div>
+ <div id="workshop-equipment-status"></div>
+ <div class="circle-status-container">
+ <div v-for="(value,key) in dataSource">
+ <span :style="{backgroundColor:getStatusColorAndLabel(key,'color')}">{{dataSource[key]}}</span>
+ <span :style="{color:getStatusColorAndLabel(key,'color')}">{{getStatusColorAndLabel(key,'label')}}</span>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+ import signageApi from '@/api/signage'
+
+ export default {
+ name: 'WorkshopEquipmentStatusChart',
+ components: {},
+ props: {
+ deviceStatusList: {
+ type: Array
+ }
+ },
+ data() {
+ return {
+ chartContainer: null,
+ dataSource: {}
+ }
+ },
+ mounted() {
+ window.addEventListener('resize', this.handleWindowSizeChange)
+ },
+ methods: {
+ // 璋冪敤鎺ュ彛鑾峰彇鍏ㄥ巶璁惧鐘舵��
+ getWorkshopEquipmentStatusByApi() {
+ const that = this
+ signageApi.getWorkshopEquipmentStatusApi()
+ .then(res => {
+ if (res.success) {
+ let total = 0
+ for (let key in res.result) {
+ total += res.result[key]
+ }
+ that.dataSource = res.result
+ that.initChart(total)
+ }
+ })
+ },
+
+ /**
+ * 鍒濆鍖栧浘琛�
+ * @param total 璁惧鏁伴噺鎬诲拰
+ */
+ initChart(total) {
+ this.chartContainer = this.$echarts.init(document.getElementById('workshop-equipment-status'))
+ const option = {
+ tooltip: {
+ trigger: 'item',
+ show: true,
+ fontSize: '100%',
+ hoverAnimation: false,
+ itemStyle: {
+ label: {
+ show: true,
+ position: 'center',
+ formatter: '20'
+ }
+ }
+ },
+ label: {
+ show: true,
+ hoverAnimation: false,
+ position: 'center',
+ formatter: '20'
+ },
+ legend: {
+ bottom: '3%',
+ left: 'center',
+ data: [
+ {
+ name: '杩愯',
+ textStyle: {
+ color: '#eee',
+ fontSize: this.fontSize(0.12),
+ fontWeight: 'bold'
+ }
+ },
+ {
+ name: '寰呮満',
+ textStyle: {
+ color: '#eee',
+ fontSize: this.fontSize(0.12),
+ fontWeight: 'bold'
+ }
+ },
+ {
+ name: '鎶ヨ',
+ textStyle: {
+ color: '#eee',
+ fontSize: this.fontSize(0.12),
+ fontWeight: 'bold'
+ }
+ }
+ ,
+ {
+ name: '鍏虫満',
+ textStyle: {
+ color: '#eee',
+ fontSize: this.fontSize(0.12),
+ fontWeight: 'bold'
+ }
+ }
+ ]
+ },
+ color: ['#00FF19', '#FFF701', '#FC0001', '#7B7B7B'],
+ // 璁剧疆鐜舰涓棿鐨勬暟鎹�
+ graphic: [{
+ type: 'text',
+ z: 10,
+ left: '46%',
+ top: '42%',
+ style: {
+ fill: '#eee',
+ //鐜腑闂寸殑鏁版嵁
+ text: total,
+ fontSize: this.fontSize(0.20),
+ fontWeight: 'bold'
+ }
+
+ }],
+ series: [
+ {
+ name: '褰撳墠璁惧鐘舵��',
+ type: 'pie',
+ radius: ['40%', '70%'],
+ center: ['50%', '45%'],
+ // avoidLabelOverlap:false,
+ hoverAnimation: false,
+ itemStyle: {
+ borderColor: '#eee',
+ borderWidth: 2
+ },
+ label: {
+ show: false
+ },
+ labelLine: {
+ show: false
+ },
+ data: [
+ {
+ name: '杩愯',
+ value: this.dataSource.runCount,
+ textStyle: {
+ color: '#2278ff'
+ },
+ //璁剧疆鐜笂鐨勬暟鎹�
+ label: {
+ show: true,
+ hoverAnimation: false,
+ position: 'inner',
+ //鐜笂鐨勬暟鎹�
+ formatter: function(value) {
+ if (value.value !== 0) return value.value
+ else ''
+ },
+ fontSize: this.fontSize(0.16),
+ fontWeight: 'bold'
+ }
+ },
+ {
+ name: '寰呮満',
+ value: this.dataSource.standbyCount,
+ textStyle: {
+ color: '#ff9e3c'
+ },
+ //璁剧疆鐜笂鐨勬暟鎹�
+ label: {
+ show: true,
+ hoverAnimation: false,
+ position: 'inner',
+ //鐜笂鐨勬暟鎹�
+ formatter: function(value) {
+ if (value.value !== 0) return value.value
+ else ''
+ },
+ fontSize: this.fontSize(0.16),
+ fontWeight: 'bold'
+ }
+ },
+ {
+ name: '鎶ヨ',
+ value: this.dataSource.alarmCount,
+ textStyle: {
+ color: '#ff9e3c'
+ },
+ //璁剧疆鐜笂鐨勬暟鎹�
+ label: {
+ show: true,
+ hoverAnimation: false,
+ position: 'inner',
+ //鐜笂鐨勬暟鎹�
+ formatter: function(value) {
+ if (value.value !== 0) return value.value
+ else ''
+ },
+ fontSize: this.fontSize(0.16),
+ fontWeight: 'bold'
+ }
+ },
+ {
+ name: '鍏虫満',
+ value: this.dataSource.offCount,
+ textStyle: {
+ color: '#ff9e3c'
+ },
+ //璁剧疆鐜笂鐨勬暟鎹�
+ label: {
+ show: true,
+ hoverAnimation: false,
+ position: 'inner',
+ //鐜笂鐨勬暟鎹�
+ formatter: function(value) {
+ if (value.value !== 0) return value.value
+ else ''
+ },
+ fontSize: this.fontSize(0.16),
+ fontWeight: 'bold'
+ }
+ }
+ ]
+ }
+ ]
+ }
+ this.chartContainer.setOption(option, true)
+ },
+
+ //鑷�傚簲瀛椾綋鏂规硶灏佽
+ fontSize(res) {
+ var docEl = document.documentElement,
+ clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
+ if (!clientWidth) return
+ var fontSize = 100 * (clientWidth / 1920)
+ return res * fontSize
+ },
+
+ /**
+ * 鑾峰彇鐘舵�侀鑹插拰鏍囬
+ * @param dataSourceKey 鎺ュ彛鏁版嵁灞炴�ey
+ * @param statusKey 鐘舵�佸睘鎬abel/color
+ * @returns {string} 棰滆壊鐮佹垨鏍囬
+ */
+ getStatusColorAndLabel(dataSourceKey, statusKey) {
+ const { deviceStatusList } = this
+ switch (dataSourceKey) {
+ case 'runCount':
+ return deviceStatusList.find(item => item.label === '杩愯')[statusKey]
+ case 'standbyCount':
+ return deviceStatusList.find(item => item.label === '寰呮満')[statusKey]
+ case 'alarmCount':
+ return deviceStatusList.find(item => item.label === '鎶ヨ')[statusKey]
+ case 'offCount':
+ return deviceStatusList.find(item => item.label === '鍏虫満')[statusKey]
+ }
+ },
+
+ handleWindowSizeChange() {
+ if (this.chartContainer) this.chartContainer.resize()
+ }
+ }
+ }
+</script>
+
+<style scoped lang="less">
+ #workshop-equipment-status {
+ width: 75%;
+ height: 100%
+ }
+
+ .circle-status-container {
+ width: 25%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-evenly;
+
+ span {
+ display: inline-block;
+ font-size: 0.8vw;
+ }
+
+ span:first-child {
+ text-align: center;
+ width: 2vw;
+ height: 2vw;
+ font-size: 1vw;
+ line-height: 2vw;
+ border-radius: 50%;
+ margin-right: 8%;
+ color: #000;
+ font-weight: bold;
+ }
+ }
+</style>
\ No newline at end of file
--
Gitblit v1.9.3