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/UtilizationRateRankChart.vue | 246 +++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 246 insertions(+), 0 deletions(-)
diff --git a/src/views/mdc/base/modules/WorkshopSignage/UtilizationRateRankChart.vue b/src/views/mdc/base/modules/WorkshopSignage/UtilizationRateRankChart.vue
new file mode 100644
index 0000000..e22aad6
--- /dev/null
+++ b/src/views/mdc/base/modules/WorkshopSignage/UtilizationRateRankChart.vue
@@ -0,0 +1,246 @@
+<template>
+ <div id="utilizationRate-rank"></div>
+</template>
+
+<script>
+ import signageApi from '@/api/signage'
+
+ export default {
+ name: 'UtilizationRateRankChart',
+ components: {},
+ data() {
+ return {
+ chartContainer: null,
+ dataSource: []
+ }
+ },
+ mounted() {
+ window.addEventListener('resize', this.handleWindowSizeChange)
+ },
+ methods: {
+ getUtilizationRateRankByApi() {
+ const that = this
+ signageApi.getUtilizationRateRankApi()
+ .then(res => {
+ if (res.success) {
+ that.dataSource = res.result.map(item => {
+ return {
+ name: item.topName,
+ value: item.topRate
+ }
+ })
+ that.initChart()
+ }
+ })
+ },
+
+ initChart() {
+ this.chartContainer = this.$echarts.init(document.getElementById('utilizationRate-rank'))
+ const data = this.dataSource
+ const colorArray = [
+ {
+ top: '#79CEAA',
+ bottom: '#79CEAA'
+ },
+ {
+ top: '#F589A2',
+ bottom: '#F589A2'
+ },
+ {
+ top: '#6FBF9D',
+ bottom: '#6FBF9D'
+ },
+ {
+ top: '#66DFE2',
+ bottom: '#66DFE2'
+ }, {
+ top: '#A7F0C1',
+ bottom: '#A7F0C1'
+ },
+ {
+ top: '#FAE893',
+ bottom: '#FAE893'
+ },
+ {
+ top: '#F7B7A0',
+ bottom: '#F7B7A0'
+ }
+ ]
+ const defaultData = []
+ 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鏁撮櫎鐨勬暟瀛�
+ const yAxisInterval = yAxisMax / 5 // 鍚屾椂灏嗗埢搴﹀�煎垎鎴�5浠�
+ data.forEach(item => defaultData.push(yAxisMax))
+ const option = {
+ title: {
+ show: false // 鏄惁鏄剧ず鏍囬锛岄粯璁や负true
+ },
+ grid: {
+ left: '3%',
+ right: '3%',
+ bottom: '3%',
+ top: '3%',
+ containLabel: true
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'none'
+ },
+ formatter: function(params) {
+ return '<span style="font-weight:bolder;">' + params[0].name + '</span><br/>' +
+ '<span style="display:inline-block; width:10px; height:10px; border-radius:100px; margin-right:5px; background:' + params[0].color.colorStops[params[0].dataIndex].color + '"></span>' + params[0].seriesName + ' : ' + params[0].value + '%'
+ }
+ },
+ xAxis: {
+ name: '',
+ nameTextStyle: {
+ color: '#fff'
+ },
+ axisLabel: {
+ margin: 20,
+ textStyle: {
+ color: '#fff'
+ }
+ },
+ show: true,
+ min: 0,
+ max: 'dataMax',
+ interval: yAxisInterval,
+ type: 'value',
+ axisTick: {
+ show: false
+ },
+ splitLine: {
+ 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: {
+ 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',
+ barWidth: 12,
+ barGap: '-100%',
+ data: defaultData,
+ itemStyle: {
+ color: '#11294d',
+ borderRadius: 100
+ }
+ }
+ ]
+ }
+ 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>
\ No newline at end of file
--
Gitblit v1.9.3