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/ClassUtilizationRateChart.vue | 74 ++--------
src/views/mdc/base/WorkshopSignage.vue | 112 ++++++---------
src/views/mdc/base/modules/WorkshopSignage/OpenRateChart.vue | 7
src/views/mdc/base/modules/WorkshopSignage/WorkshopEquipmentStatusChart.vue | 1
src/views/mdc/base/modules/WorkshopSignage/WorkshopAlarmInfoTable.vue | 3
src/views/mdc/base/modules/WorkshopSignage/UtilizationRateRankChart.vue | 195 +++++++++++++--------------
src/views/mdc/base/modules/WorkshopSignage/EquipmentLayout.vue | 3
src/views/mdc/base/modules/WorkshopSignage/UtilizationRateChart.vue | 8
8 files changed, 163 insertions(+), 240 deletions(-)
diff --git a/src/views/mdc/base/WorkshopSignage.vue b/src/views/mdc/base/WorkshopSignage.vue
index 79f3a76..1414037 100644
--- a/src/views/mdc/base/WorkshopSignage.vue
+++ b/src/views/mdc/base/WorkshopSignage.vue
@@ -36,40 +36,34 @@
</div>
</div>
</div>
- <EquipmentLayout :deviceStatusList="deviceStatusList"/>
+ <EquipmentLayout ref="equipmentLayoutRef" :deviceStatusList="deviceStatusList"/>
</div>
<div class="workshop-alarm-info content-card">
<div class="card-title">鍏ㄥ巶鎶ヨ淇℃伅</div>
- <WorkshopAlarmInfoTable/>
+ <WorkshopAlarmInfoTable ref="alarmInfoRef"/>
</div>
</div>
<div class="content-right">
<div class="content-card">
<div class="card-title">鍓嶄竷澶╁埄鐢ㄧ巼鎺掑悕</div>
- <UtilizationRateRankChart/>
+ <UtilizationRateRankChart ref="rateRankRef"/>
</div>
<div class=" content-card">
<div class="card-title">鍏ㄥ巶骞冲潎杩愯鏁堢巼</div>
- <WorkshopEfficiencyAverageChart :dataSource="efficiencyData"/>
+ <WorkshopEfficiencyAverageChart ref="averageChartRef" :dataSource="efficiencyData"/>
</div>
<div class="workshop-equipment-status content-card">
<div class="card-title">鍏ㄥ巶褰撳墠璁惧鐘舵��</div>
- <WorkshopEquipmentStatusChart :deviceStatusList="deviceStatusList"/>
+ <WorkshopEquipmentStatusChart ref="equipmentStatusChartRef" :deviceStatusList="deviceStatusList"/>
</div>
</div>
</div>
-
- <EquipmentDetailModal ref="EquipmentDetailModal"></EquipmentDetailModal>
</div>
</template>
<script>
- import api from '@/api/mdc'
import signageApi from '@/api/signage'
- import { getFileAccessHttpUrl } from '@/api/manage'
- import EquipmentDetailModal from './modules/WorkshopSignage/EquipmentDetailModal'
- import { message } from 'ant-design-vue'
import OpenRateChart from './modules/WorkshopSignage/OpenRateChart'
import UtilizationRateChart from './modules/WorkshopSignage/UtilizationRateChart'
import ClassUtilizationRateChart from './modules/WorkshopSignage/ClassUtilizationRateChart'
@@ -78,10 +72,6 @@
import UtilizationRateRankChart from './modules/WorkshopSignage/UtilizationRateRankChart'
import WorkshopEquipmentStatusChart from './modules/WorkshopSignage/WorkshopEquipmentStatusChart'
import EquipmentLayout from './modules/WorkshopSignage/EquipmentLayout'
-
- message.config({
- maxCount: 3
- })
export default {
components: {
@@ -93,13 +83,13 @@
ClassUtilizationRateChart,
UtilizationRateChart,
OpenRateChart,
- EquipmentDetailModal
},
data() {
return {
currentDateTime: '',
efficiencyData: {},
- timingAcquisition: null, // 瀹氭椂鍒锋柊鏄惁寮�鍚�
+ shortTimingAcquisition: null, // 楂橀鍒锋柊
+ longTimingAcquisition: null, // 浣庨鍒锋柊
dateTimer: null,//瀹氭椂鑾峰彇褰撳墠鏃堕棿
deviceStatusList: [
{
@@ -121,52 +111,29 @@
]// 璁惧鐘舵�佹寚绀虹伅鍒楄〃锛�
}
},
- created() {
- this.getEfficiencyDataByApi()
+ mounted() {
+ // 绂佹鐢ㄦ埛閫変腑鍐呭
+ document.onselectstart = () => false
+ this.shortIntervalRefreshData()
+ this.longIntervalRefreshData()
+ this.dateTimer = setInterval(() => this.$nextTick(() => this.getCurrentDateTime()), 1000)
+ },
+ beforeDestroy() {
+ // 纭繚閿�姣佸畾鏃跺櫒銆佷簨浠跺強鍥炴敹璧勬簮
+ clearInterval(this.shortTimingAcquisition)
+ clearInterval(this.dateTimer)
+ this.shortTimingAcquisition = null
+ this.dateTimer = null
},
methods: {
getEfficiencyDataByApi() {
const that = this
signageApi.getEfficiencyDataApi()
.then(res => {
- console.log('res----------------', res)
if (res.success) that.efficiencyData = res.result
})
},
- /**
- * 閫氳繃杞﹂棿Id璋冪敤鎺ュ彛鑾峰彇杞﹂棿璇︾粏淇℃伅
- * @param id 杞﹂棿Id
- */
- getWorkshopDetailsByApi(id) {
- api.getWorkshopDetailByWorkshopIdApi(id).then((res) => {
- this.workshopDetails = res.result
- this.imgSrc = this.getImgView(this.workshopDetails.backgroundImage)
- this.$refs.deviceContainerRef.style.height = (this.windowHeight - this.pageHeaderHeight) + 'px'
- })
- },
-
- /**
- * 鍥剧墖棰勮
- * @param text 鍥剧墖鍦板潃
- */
- getImgView(text) {
- if (text && text.indexOf(',') > 0) {
- text = text.substring(0, text.indexOf(','))
- }
- return getFileAccessHttpUrl(text)
- },
-
- openDetail(item) {
- if (!this.isSwitchChecked) {
- if (item.equipmentStatus == 0) {
- this.$message.warning('璁惧澶勪簬鍏虫満鐘舵�侊紒')
- return false
- }
- this.$refs.EquipmentDetailModal.initData(item.equId)
- this.$refs.EquipmentDetailModal.timerModel(item.equId)
- }
- },
// 鑾峰彇褰撳墠鏃堕棿
getCurrentDateTime() {
@@ -184,21 +151,32 @@
if (min < 10) min = '0' + min
if (sec < 10) sec = '0' + sec
this.currentDateTime = `${year}骞�${mon}鏈�${day}鏃� ${hour}:${min}:${sec}`
+ },
+
+ /**
+ * 楂橀鍒锋柊鏁版嵁 鐩墠璁剧疆涓�5s
+ * @param intervalSecond 棰戠巼闂撮殧鏃堕棿锛堢锛�
+ */
+ shortIntervalRefreshData(intervalSecond = 0) {
+ this.shortTimingAcquisition = window.setTimeout(() => {
+ this.$refs.equipmentLayoutRef.getEquipmentStatusByApi()
+ this.$refs.alarmInfoRef.getWorkshopAlarmInfoByApi()
+ this.$refs.equipmentStatusChartRef.getWorkshopEquipmentStatusByApi()
+ this.shortIntervalRefreshData(5)
+ }, intervalSecond * 1000)
+ },
+
+ /**
+ * 浣庨鍒锋柊鏁版嵁 鐩墠璁剧疆涓�1h
+ * @param intervalSecond 棰戠巼闂撮殧鏃堕棿锛堢锛�
+ */
+ longIntervalRefreshData(intervalSecond = 0) {
+ this.longTimingAcquisition = window.setTimeout(() => {
+ this.getEfficiencyDataByApi()
+ this.$refs.rateRankRef.getUtilizationRateRankByApi()
+ this.longIntervalRefreshData(60 * 60)
+ }, intervalSecond * 1000)
}
- },
-
- mounted() {
- // 绂佹鐢ㄦ埛閫変腑鍐呭
- document.onselectstart = () => false
-
- this.dateTimer = setInterval(() => this.$nextTick(() => this.getCurrentDateTime()), 1000)
- },
- beforeDestroy() {
- // 纭繚閿�姣佸畾鏃跺櫒銆佷簨浠跺強鍥炴敹璧勬簮
- clearInterval(this.timingAcquisition)
- clearInterval(this.dateTimer)
- this.timingAcquisition = null
- this.dateTimer = null
}
}
</script>
diff --git a/src/views/mdc/base/modules/WorkshopSignage/ClassUtilizationRateChart.vue b/src/views/mdc/base/modules/WorkshopSignage/ClassUtilizationRateChart.vue
index 074608e..b91b5a7 100644
--- a/src/views/mdc/base/modules/WorkshopSignage/ClassUtilizationRateChart.vue
+++ b/src/views/mdc/base/modules/WorkshopSignage/ClassUtilizationRateChart.vue
@@ -1,7 +1,5 @@
<template>
- <div id="class-utilizationRate">
-
- </div>
+ <div id="class-utilizationRate"></div>
</template>
<script>
@@ -12,8 +10,8 @@
components: {},
props: {
dataSource: {
- type: Array,
- },
+ type: Array
+ }
},
watch: {
dataSource: {
@@ -35,7 +33,8 @@
this.chartContainer = this.$echarts.init(document.getElementById('class-utilizationRate'))
const option = {
tooltip: {
- fontSize: this.fontSize(0.12)
+ trigger: 'axis',
+ fontSize: this.fontSize(0.16)
},
xAxis: [
{
@@ -55,7 +54,6 @@
axisLine: {
lineStyle: {
color: '#eee'
- // width:fontSize(0.02)
}
}
}
@@ -63,7 +61,6 @@
yAxis: [
{
type: 'value',
- // name:'涓婂懆寮�鏈虹巼',
axisTick: {
show: true
},
@@ -102,7 +99,6 @@
legend: {
pageTextStyle: {
color: '#eee',
- // fontSize:'100%'
fontSize: this.fontSize(0.12)
},
top: '2%',
@@ -133,60 +129,22 @@
}
},
symbolSize: this.fontSize(0.16),
- // data: [38, 30, 44, 65, 23, 42],
data: this.dataSource,
itemStyle: {
- normal: {
- // barBorderRadius:[20,20,0,0],
- color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
- offset: 0,
- color: '#96ceff'
+ color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+ offset: 0,
+ color: '#96ceff'
+ },
+ {
+ offset: 0.6,
+ color: '#67c2ff'
},
- {
- offset: 0.6,
- color: '#67c2ff'
- },
- {
- offset: 1,
- color: '#1195ff'
- }], false)
- }
+ {
+ offset: 1,
+ color: '#1195ff'
+ }], false)
}
}
- // {
- // name: '浜т笟鍥巶鍖�',
- // type: 'bar',
- // axisLabel: {
- // show: true,
- // interval: 'auto',
- // formatter: '{value}%',
- // textStyle: {
- // color: '#eee',
- // fontSize: this.fontSize(0.16),
- // fontWeight: 'bold'
- // }
- // },
- // symbolSize: this.fontSize(0.16),
- // // data: [52, 44, 65, 59, 43, 21],
- // data: this.dataSource,
- // itemStyle: {
- // normal: {
- // // barBorderRadius:[20,20,0,0],
- // color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
- // offset: 0,
- // color: '#ffe9cc'
- // },
- // {
- // offset: 0.6,
- // color: '#ffd46b'
- // },
- // {
- // offset: 1,
- // color: '#ffb530'
- // }], false)
- // }
- // }
- // }
]
}
this.chartContainer.setOption(option, true)
diff --git a/src/views/mdc/base/modules/WorkshopSignage/EquipmentLayout.vue b/src/views/mdc/base/modules/WorkshopSignage/EquipmentLayout.vue
index d7c31ba..820913f 100644
--- a/src/views/mdc/base/modules/WorkshopSignage/EquipmentLayout.vue
+++ b/src/views/mdc/base/modules/WorkshopSignage/EquipmentLayout.vue
@@ -150,9 +150,6 @@
]
}
},
- created() {
- this.getEquipmentStatusByApi()
- },
methods: {
//璋冪敤鎺ュ彛鑾峰彇璁惧鐘舵�佸垪琛�
getEquipmentStatusByApi() {
diff --git a/src/views/mdc/base/modules/WorkshopSignage/OpenRateChart.vue b/src/views/mdc/base/modules/WorkshopSignage/OpenRateChart.vue
index 949c3b0..6bfbea6 100644
--- a/src/views/mdc/base/modules/WorkshopSignage/OpenRateChart.vue
+++ b/src/views/mdc/base/modules/WorkshopSignage/OpenRateChart.vue
@@ -1,6 +1,5 @@
<template>
- <div id="openRate">
- </div>
+ <div id="openRate"></div>
</template>
<script>
@@ -34,7 +33,8 @@
this.chartContainer = this.$echarts.init(document.getElementById('openRate'))
const option = {
tooltip: {
- fontSize: this.fontSize(0.12)
+ trigger: 'axis',
+ fontSize: this.fontSize(0.16)
},
xAxis: [
{
@@ -61,7 +61,6 @@
yAxis: [
{
type: 'value',
- // name:'涓婂懆寮�鏈虹巼',
axisTick: {
show: true
},
diff --git a/src/views/mdc/base/modules/WorkshopSignage/UtilizationRateChart.vue b/src/views/mdc/base/modules/WorkshopSignage/UtilizationRateChart.vue
index b90e1f9..920b87b 100644
--- a/src/views/mdc/base/modules/WorkshopSignage/UtilizationRateChart.vue
+++ b/src/views/mdc/base/modules/WorkshopSignage/UtilizationRateChart.vue
@@ -1,18 +1,15 @@
<template>
- <div id="utilizationRate">
-
- </div>
+ <div id="utilizationRate"></div>
</template>
<script>
- import * as echarts from 'echarts'
export default {
name: 'UtilizationRateChart',
components: {},
props: {
dataSource: {
- type: Array,
+ type: Array
}
},
watch: {
@@ -80,7 +77,6 @@
color: '#eee'
}
}
-
},
yAxis:
[
diff --git a/src/views/mdc/base/modules/WorkshopSignage/UtilizationRateRankChart.vue b/src/views/mdc/base/modules/WorkshopSignage/UtilizationRateRankChart.vue
index cd1a9ab..e22aad6 100644
--- a/src/views/mdc/base/modules/WorkshopSignage/UtilizationRateRankChart.vue
+++ b/src/views/mdc/base/modules/WorkshopSignage/UtilizationRateRankChart.vue
@@ -15,7 +15,6 @@
}
},
mounted() {
- this.getUtilizationRateRankByApi()
window.addEventListener('resize', this.handleWindowSizeChange)
},
methods: {
@@ -68,7 +67,7 @@
}
]
const defaultData = []
- const dataMax = +data.sort((x, y) => +y.value - +x.value)[0].value
+ const dataMax = data.length > 0 ? +data.sort((x, y) => +y.value - +x.value)[0].value : 0
let yAxisMax
if (dataMax === 0) yAxisMax = 1 // 鑻ユ暟鎹腑鏈�澶у�间负0锛屽垯灏嗚儗鏅粯璁ゅ�艰缃负1
else yAxisMax = Math.ceil(dataMax / 5) * 5 // 璁剧疆鏌卞浘鑳屾櫙闃村奖榛樿鍊硷紝鎬濊矾涓烘暟鎹渶澶у�兼渶鎺ヨ繎鐨勮兘琚�5鏁撮櫎鐨勬暟瀛�
@@ -118,98 +117,102 @@
show: false
}
},
- yAxis: [{
- type: 'category',
- inverse: true,
- triggerEvent: true,
- axisLabel: {
- show: true,
- textStyle: {
- color: '#fff',
- fontSize: '14',
- fontWeight: 'bolder'
- },
- formatter: function(value) {
- return `${data.find(item => item.name === value).name}`
- }
- },
- splitLine: {
- show: false
- },
- axisTick: {
- show: false
- },
- axisLine: {
- show: false
- },
- data: data.map(item => item.name)
- }, {
- type: 'category',
- inverse: true,
- axisTick: 'none',
- axisLine: 'none',
- show: true,
- axisLabel: {
- textStyle: {
- color: '#ffffff',
- fontSize: '14'
- },
- formatter: function(value) {
- return `${value}%`
- }
- },
- data: data
- }],
- series: [{
- name: '鍒╃敤鐜�',
- type: 'bar',
- zlevel: 1,
- itemStyle: {
- barBorderRadius: 100,
- color: function(params) {
- let num = colorArray.length
- return {
- type: 'linear',
- colorStops: [{
- offset: 0,
- color: colorArray[params.dataIndex % num].bottom
- }, {
- offset: 1,
- color: colorArray[params.dataIndex % num].top
- }, {
- offset: 0,
- color: colorArray[params.dataIndex % num].bottom
- }, {
- offset: 1,
- color: colorArray[params.dataIndex % num].top
- }, {
- offset: 0,
- color: colorArray[params.dataIndex % num].bottom
- }, {
- offset: 1,
- color: colorArray[params.dataIndex % num].top
- }, {
- offset: 0,
- color: colorArray[params.dataIndex % num].bottom
- }, {
- offset: 1,
- color: colorArray[params.dataIndex % num].top
- }, {
- offset: 0,
- color: colorArray[params.dataIndex % num].bottom
- }, {
- offset: 1,
- color: colorArray[params.dataIndex % num].top
- }, {
- offset: 0,
- color: colorArray[params.dataIndex % num].bottom
- }]
+ yAxis: [
+ {
+ type: 'category',
+ inverse: true,
+ triggerEvent: true,
+ axisLabel: {
+ show: true,
+ textStyle: {
+ color: '#fff',
+ fontSize: '14',
+ fontWeight: 'bolder'
+ },
+ formatter: function(value) {
+ return `${data.find(item => item.name === value).name}`
}
- }
+ },
+ splitLine: {
+ show: false
+ },
+ axisTick: {
+ show: false
+ },
+ axisLine: {
+ show: false
+ },
+ data: data.map(item => item.name)
},
- barWidth: 12,
- data: data
- },
+ {
+ type: 'category',
+ inverse: true,
+ axisTick: 'none',
+ axisLine: 'none',
+ show: true,
+ axisLabel: {
+ textStyle: {
+ color: '#ffffff',
+ fontSize: '14'
+ },
+ formatter: function(value) {
+ return `${value}%`
+ }
+ },
+ data: data
+ }
+ ],
+ series: [
+ {
+ name: '鍒╃敤鐜�',
+ type: 'bar',
+ zlevel: 1,
+ itemStyle: {
+ borderRadius: 100,
+ color: function(params) {
+ let num = colorArray.length
+ return {
+ type: 'linear',
+ colorStops: [{
+ offset: 0,
+ color: colorArray[params.dataIndex % num].bottom
+ }, {
+ offset: 1,
+ color: colorArray[params.dataIndex % num].top
+ }, {
+ offset: 0,
+ color: colorArray[params.dataIndex % num].bottom
+ }, {
+ offset: 1,
+ color: colorArray[params.dataIndex % num].top
+ }, {
+ offset: 0,
+ color: colorArray[params.dataIndex % num].bottom
+ }, {
+ offset: 1,
+ color: colorArray[params.dataIndex % num].top
+ }, {
+ offset: 0,
+ color: colorArray[params.dataIndex % num].bottom
+ }, {
+ offset: 1,
+ color: colorArray[params.dataIndex % num].top
+ }, {
+ offset: 0,
+ color: colorArray[params.dataIndex % num].bottom
+ }, {
+ offset: 1,
+ color: colorArray[params.dataIndex % num].top
+ }, {
+ offset: 0,
+ color: colorArray[params.dataIndex % num].bottom
+ }]
+ }
+ }
+ },
+ barWidth: 12,
+ data: data
+ },
{
name: '鑳屾櫙',
type: 'bar',
@@ -218,7 +221,7 @@
data: defaultData,
itemStyle: {
color: '#11294d',
- barBorderRadius: 100
+ borderRadius: 100
}
}
]
@@ -240,8 +243,4 @@
}
}
}
-</script>
-
-<style scoped lang="less">
-
-</style>
\ No newline at end of file
+</script>
\ No newline at end of file
diff --git a/src/views/mdc/base/modules/WorkshopSignage/WorkshopAlarmInfoTable.vue b/src/views/mdc/base/modules/WorkshopSignage/WorkshopAlarmInfoTable.vue
index a2cfef2..0065a84 100644
--- a/src/views/mdc/base/modules/WorkshopSignage/WorkshopAlarmInfoTable.vue
+++ b/src/views/mdc/base/modules/WorkshopSignage/WorkshopAlarmInfoTable.vue
@@ -16,9 +16,6 @@
dataSource: []
}
},
- mounted() {
- this.getWorkshopAlarmInfoByApi()
- },
methods: {
getWorkshopAlarmInfoByApi() {
const that = this
diff --git a/src/views/mdc/base/modules/WorkshopSignage/WorkshopEquipmentStatusChart.vue b/src/views/mdc/base/modules/WorkshopSignage/WorkshopEquipmentStatusChart.vue
index f3e9513..ebb46d8 100644
--- a/src/views/mdc/base/modules/WorkshopSignage/WorkshopEquipmentStatusChart.vue
+++ b/src/views/mdc/base/modules/WorkshopSignage/WorkshopEquipmentStatusChart.vue
@@ -28,7 +28,6 @@
}
},
mounted() {
- this.getWorkshopEquipmentStatusByApi()
window.addEventListener('resize', this.handleWindowSizeChange)
},
methods: {
--
Gitblit v1.9.3