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/UtilizationRateChart.vue | 152 ++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 152 insertions(+), 0 deletions(-)
diff --git a/src/views/mdc/base/modules/WorkshopSignage/UtilizationRateChart.vue b/src/views/mdc/base/modules/WorkshopSignage/UtilizationRateChart.vue
new file mode 100644
index 0000000..920b87b
--- /dev/null
+++ b/src/views/mdc/base/modules/WorkshopSignage/UtilizationRateChart.vue
@@ -0,0 +1,152 @@
+<template>
+ <div id="utilizationRate"></div>
+</template>
+
+<script>
+
+ export default {
+ name: 'UtilizationRateChart',
+ components: {},
+ props: {
+ dataSource: {
+ type: Array
+ }
+ },
+ watch: {
+ dataSource: {
+ handler(value) {
+ if (value) this.initChart()
+ }
+ }
+ },
+ data() {
+ return {
+ chartContainer: null
+ }
+ },
+ mounted() {
+ window.addEventListener('resize', this.handleWindowSizeChange)
+ },
+ methods: {
+ initChart() {
+ this.chartContainer = this.$echarts.init(document.getElementById('utilizationRate'))
+ const option = {
+ tooltip: {
+ trigger: 'axis',
+ // show:false //榧犳爣鏀剧疆涓婂幓鏄惁鏄剧ず鍊�
+ fontSize: this.fontSize(0.16)
+ },
+ legend: {
+ top: '2%',
+ right: '2%',
+ data: [
+ {
+ name: '鍏ㄥ巶',
+ textStyle: {
+ color: '#eee',
+ fontSize: this.fontSize(0.16),
+ fontWeight: 'bold'
+ }
+ }
+ ]
+ },
+
+ grid: {
+ left: '3%',
+ right: '3%',
+ bottom: '3%',
+ top: '15%',
+ containLabel: true
+ },
+ xAxis: {
+ type: 'category',
+ axisTick: {
+ show: true
+ },
+ boundaryGap: ['20%', '0%'],
+ data: ['鏄熸湡涓�', '鏄熸湡浜�', '鏄熸湡涓�', '鏄熸湡鍥�', '鏄熸湡浜�', '鏄熸湡鍏�'],
+ axisLabel: {
+ color: '#eee',
+ fontSize: '80%',
+ fontWeight: 'bold',
+ interval: 0
+
+ },
+ axisLine: {
+ lineStyle: {
+ color: '#eee'
+ }
+ }
+ },
+ yAxis:
+ [
+ {
+ type: 'value',
+ axisTick: {
+ show: true
+ },
+ splitLine: { //鍐冲畾鏄惁鏄剧ず鍧愭爣涓綉鏍�
+ show: true
+ },
+ min: 0.0,
+ position: 'left',
+ axisLabel: {
+ show: true,
+ interval: 'auto',
+ formatter: '{value}%',
+ textStyle: {
+ color: '#eee',
+ fontSize: '80%',
+ fontWeight: 'bold'
+ }
+ },
+ axisLine: {
+ lineStyle: {
+ color: ['white'],
+ width: 1,
+ show: true
+ }
+ }
+ }
+ ],
+ series: [
+ {
+ name: '鍏ㄥ巶',
+ type: 'line',
+ smooth: false,
+ symbol: 'circle',
+ symbolSize: this.fontSize(0.12),
+ data: this.dataSource,
+ itemStyle: {
+ normal: {
+ width: '10%',
+ color: '#ff9e3c',
+ fontSize: '60%',
+ 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
+ },
+
+ handleWindowSizeChange() {
+ if (this.chartContainer) this.chartContainer.resize()
+ }
+ }
+ }
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
--
Gitblit v1.9.3