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/OpenRateChart.vue | 171 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 171 insertions(+), 0 deletions(-)
diff --git a/src/views/mdc/base/modules/WorkshopSignage/OpenRateChart.vue b/src/views/mdc/base/modules/WorkshopSignage/OpenRateChart.vue
new file mode 100644
index 0000000..6bfbea6
--- /dev/null
+++ b/src/views/mdc/base/modules/WorkshopSignage/OpenRateChart.vue
@@ -0,0 +1,171 @@
+<template>
+ <div id="openRate"></div>
+</template>
+
+<script>
+ import * as echarts from 'echarts'
+
+ export default {
+ name: 'OpenRateChart',
+ 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('openRate'))
+ const option = {
+ tooltip: {
+ trigger: 'axis',
+ fontSize: this.fontSize(0.16)
+ },
+ xAxis: [
+ {
+ type: 'category',
+ axisTick: {
+ show: true
+ },
+ 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%'
+ }
+ },
+ axisLine: {
+ lineStyle: {
+ color: ['white'],
+ width: this.fontSize(0.01),
+ show: true
+ }
+ },
+ show: true
+ }
+
+ ],
+ grid: {
+ left: '3%',
+ right: '3%',
+ bottom: '3%',
+ top: '15%',
+ containLabel: true
+ },
+ legend: {
+ pageTextStyle: {
+ color: '#eee',
+ fontSize: this.fontSize(0.12)
+ },
+ top: '2%',
+ right: '2%',
+ data: [
+ {
+ name: '鍏ㄥ巶',
+ textStyle: {
+ color: '#eee',
+ fontSize: this.fontSize(0.16),
+ fontWeight: 'bold'
+ }
+ }
+ ]
+ },
+ series: [
+ {
+ 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: this.dataSource,
+ itemStyle: {
+ color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+ offset: 0,
+ color: '#96ceff'
+ },
+ {
+ offset: 0.6,
+ color: '#67c2ff'
+ },
+ {
+ offset: 1,
+ color: '#1195ff'
+ }], false)
+ }
+ }
+ ]
+ }
+ 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