From accebdce93486d3b4f26e55ffdea047549cce20c Mon Sep 17 00:00:00 2001
From: cuijian <cuijian@xalxzn.com>
Date: 星期一, 28 七月 2025 21:12:38 +0800
Subject: [PATCH] Merge branch 'master' of http://125.76.225.53:18448/r/xhj/vue_mdc_xhj
---
src/views/mdc/base/modules/comparativeAnalysis/ComparativeAnalysisGauge.vue | 836 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 836 insertions(+), 0 deletions(-)
diff --git a/src/views/mdc/base/modules/comparativeAnalysis/ComparativeAnalysisGauge.vue b/src/views/mdc/base/modules/comparativeAnalysis/ComparativeAnalysisGauge.vue
new file mode 100644
index 0000000..1fa304c
--- /dev/null
+++ b/src/views/mdc/base/modules/comparativeAnalysis/ComparativeAnalysisGauge.vue
@@ -0,0 +1,836 @@
+<template>
+ <div class="comparative_Gauge" style="width: 100%;height: 700px;display: flex;flex-direction: column;overflow: scroll">
+ <div style="flex: 1;text-align:center;display: flex;flex-direction: column">
+ <h3 style="height: 18px;margin: 0 auto;">鍒╃敤鐜� Top 5</h3>
+
+ <div style="flex: 1;display: flex;">
+ <div id="top1Gauge" class="div-inline"></div>
+ <div id="top2Gauge" class="div-inline"></div>
+ <div id="top3Gauge" class="div-inline"></div>
+ <div id="top4Gauge" class="div-inline"></div>
+ <div id="top5Gauge" class="div-inline"></div>
+ </div>
+ </div>
+ <div style="flex: 1;text-align:center;display: flex;flex-direction: column">
+ <h3 style="height: 18px; margin: 0 auto;">鍒╃敤鐜� Last 5</h3>
+
+ <div style="flex: 1;display: flex;">
+ <div id="last1Gauge" class="div-inline"></div>
+ <div id="last2Gauge" class="div-inline"></div>
+ <div id="last3Gauge" class="div-inline"></div>
+ <div id="last4Gauge" class="div-inline"></div>
+ <div id="last5Gauge" class="div-inline"></div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+ import * as echarts from 'echarts'
+ export default {
+ name: 'comparativeAnalysisGauge',
+ props:{dataList:''},
+ data(){
+ return{
+ utilizationRateTopOne:0,
+ utilizationRateTopOneEquipment:0,
+ utilizationRateTopTwo:0,
+ utilizationRateTopTwoEquipment:0,
+ utilizationRateTopThree:0,
+ utilizationRateTopThreeEquipment:0,
+ utilizationRateTopFour:0,
+ utilizationRateTopFourEquipment:0,
+ utilizationRateTopFive:0,
+ utilizationRateTopFiveEquipment:0,
+ utilizationRateLastOne:0,
+ utilizationRateLastOneEquipment:0,
+ utilizationRateLastTwo:0,
+ utilizationRateLastTwoEquipment:0,
+ utilizationRateLastThree:0,
+ utilizationRateLastThreeEquipment:0,
+ utilizationRateLastFour:0,
+ utilizationRateLastFourEquipment:0,
+ utilizationRateLastFive:0,
+ utilizationRateLastFiveEquipment:0,
+ TopLastList:[]
+ }
+ },
+ watch:{
+ dataList(val){
+ console.log(val);
+ this.TopLastList = val
+ this.draw()
+ },
+ },
+ mounted(){
+ this.draw();
+ },
+ methods:{
+ draw(){
+ let gaugeTopChart1 = this.$echarts.init(document.getElementById('top1Gauge'),'macarons');
+ let gaugeTopChart2 = this.$echarts.init(document.getElementById('top2Gauge'),'macarons');
+ let gaugeTopChart3 = this.$echarts.init(document.getElementById('top3Gauge'),'macarons');
+ let gaugeTopChart4 = this.$echarts.init(document.getElementById('top4Gauge'),'macarons');
+ let gaugeTopChart5 = this.$echarts.init(document.getElementById('top5Gauge'),'macarons');
+ let gaugeLastChart1 = this.$echarts.init(document.getElementById('last1Gauge'),'macarons');
+ let gaugeLastChart2 = this.$echarts.init(document.getElementById('last2Gauge'),'macarons');
+ let gaugeLastChart3 = this.$echarts.init(document.getElementById('last3Gauge'),'macarons');
+ let gaugeLastChart4 = this.$echarts.init(document.getElementById('last4Gauge'),'macarons');
+ let gaugeLastChart5 = this.$echarts.init(document.getElementById('last5Gauge'),'macarons');
+ let gaugeTopOption1 = {
+ title : {
+ x : 'center',
+ y : 'bottom',
+ text : 'TOP1'
+ },
+ tooltip : {
+ formatter: "{a} <br/>{b} : {c}%"
+ },
+ series : [
+ {
+ name:'TOP1',
+ type:'gauge',
+ splitNumber: 10, // 鍒嗗壊娈垫暟锛岄粯璁や负5
+ axisLine: { // 鍧愭爣杞寸嚎
+ lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
+ color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']],
+ width: 8
+ }
+ },
+ axisTick: { // 鍧愭爣杞村皬鏍囪
+ splitNumber: 10, // 姣忎唤split缁嗗垎澶氬皯娈�
+ length :12, // 灞炴�ength鎺у埗绾块暱
+ lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
+ color: 'auto'
+ }
+ },
+ axisLabel: { // 鍧愭爣杞存枃鏈爣绛撅紝璇﹁axis.axisLabel
+ textStyle: { // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE
+ color: 'auto'
+ }
+ },
+ splitLine: { // 鍒嗛殧绾�
+ show: true, // 榛樿鏄剧ず锛屽睘鎬how鎺у埗鏄剧ず涓庡惁
+ length :30, // 灞炴�ength鎺у埗绾块暱
+ lineStyle: { // 灞炴�ineStyle锛堣瑙乴ineStyle锛夋帶鍒剁嚎鏉℃牱寮�
+ color: 'auto'
+ }
+ },
+ pointer : {
+ width : 5
+ },
+ title : {
+ show : false,
+ offsetCenter: [0, '-40%'], // x, y锛屽崟浣峱x
+ textStyle: { // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE
+ fontWeight: 'bolder'
+ }
+ },
+ detail : {
+ formatter:'{value}%',
+ offsetCenter: [0, '60%'],
+ textStyle: { // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE
+ color: 'auto',
+ fontWeight: 'bolder',
+ fontSize:20
+ }
+ },
+ data:[{value: 0, name: '鍒╃敤鐜�'}]
+ }
+ ]
+ };
+ let gaugeTopOption2 = {
+ title : {
+ x : 'center',
+ y : 'bottom',
+ text : 'TOP2'
+ },
+ tooltip : {
+ formatter: "{a} <br/>{b} : {c}%"
+ },
+ series : [
+ {
+ name:'TOP2',
+ type:'gauge',
+ splitNumber: 10, // 鍒嗗壊娈垫暟锛岄粯璁や负5
+ axisLine: { // 鍧愭爣杞寸嚎
+ lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
+ color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']],
+ width: 8
+ }
+ },
+ axisTick: { // 鍧愭爣杞村皬鏍囪
+ splitNumber: 10, // 姣忎唤split缁嗗垎澶氬皯娈�
+ length :12, // 灞炴�ength鎺у埗绾块暱
+ lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
+ color: 'auto'
+ }
+ },
+ axisLabel: { // 鍧愭爣杞存枃鏈爣绛撅紝璇﹁axis.axisLabel
+ textStyle: { // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE
+ color: 'auto'
+ }
+ },
+ splitLine: { // 鍒嗛殧绾�
+ show: true, // 榛樿鏄剧ず锛屽睘鎬how鎺у埗鏄剧ず涓庡惁
+ length :30, // 灞炴�ength鎺у埗绾块暱
+ lineStyle: { // 灞炴�ineStyle锛堣瑙乴ineStyle锛夋帶鍒剁嚎鏉℃牱寮�
+ color: 'auto'
+ }
+ },
+ pointer : {
+ width : 5
+ },
+ title : {
+ show : false,
+ offsetCenter: [0, '-40%'], // x, y锛屽崟浣峱x
+ textStyle: { // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE
+ fontWeight: 'bolder'
+ }
+ },
+ detail : {
+ formatter:'{value}%',
+ offsetCenter: [0, '60%'],
+ textStyle: { // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE
+ color: 'auto',
+ fontWeight: 'bolder',
+ fontSize:20
+ }
+ },
+ data:[{value: 0, name: '鍒╃敤鐜�'}]
+ }
+ ]
+ };
+ let gaugeTopOption3 = {
+ title : {
+ x : 'center',
+ y : 'bottom',
+ text : 'TOP3'
+ },
+ tooltip : {
+ formatter: "{a} <br/>{b} : {c}%"
+ },
+ series : [
+ {
+ name:'TOP3',
+ type:'gauge',
+ splitNumber: 10, // 鍒嗗壊娈垫暟锛岄粯璁や负5
+ axisLine: { // 鍧愭爣杞寸嚎
+ lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
+ color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']],
+ width: 8
+ }
+ },
+ axisTick: { // 鍧愭爣杞村皬鏍囪
+ splitNumber: 10, // 姣忎唤split缁嗗垎澶氬皯娈�
+ length :12, // 灞炴�ength鎺у埗绾块暱
+ lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
+ color: 'auto'
+ }
+ },
+ axisLabel: { // 鍧愭爣杞存枃鏈爣绛撅紝璇﹁axis.axisLabel
+ textStyle: { // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE
+ color: 'auto'
+ }
+ },
+ splitLine: { // 鍒嗛殧绾�
+ show: true, // 榛樿鏄剧ず锛屽睘鎬how鎺у埗鏄剧ず涓庡惁
+ length :30, // 灞炴�ength鎺у埗绾块暱
+ lineStyle: { // 灞炴�ineStyle锛堣瑙乴ineStyle锛夋帶鍒剁嚎鏉℃牱寮�
+ color: 'auto'
+ }
+ },
+ pointer : {
+ width : 5
+ },
+ title : {
+ show : false,
+ offsetCenter: [0, '-40%'], // x, y锛屽崟浣峱x
+ textStyle: { // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE
+ fontWeight: 'bolder'
+ }
+ },
+ detail : {
+ formatter:'{value}%',
+ offsetCenter: [0, '60%'],
+ textStyle: { // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE
+ color: 'auto',
+ fontWeight: 'bolder',
+ fontSize:20
+ }
+ },
+ data:[{value: 0, name: '鍒╃敤鐜�'}]
+ }
+ ]
+ };
+ let gaugeTopOption4 = {
+ title : {
+ x : 'center',
+ y : 'bottom',
+ text : 'TOP4'
+ },
+ tooltip : {
+ formatter: "{a} <br/>{b} : {c}%"
+ },
+ series : [
+ {
+ name:'TOP4',
+ type:'gauge',
+ splitNumber: 10, // 鍒嗗壊娈垫暟锛岄粯璁や负5
+ axisLine: { // 鍧愭爣杞寸嚎
+ lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
+ color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']],
+ width: 8
+ }
+ },
+ axisTick: { // 鍧愭爣杞村皬鏍囪
+ splitNumber: 10, // 姣忎唤split缁嗗垎澶氬皯娈�
+ length :12, // 灞炴�ength鎺у埗绾块暱
+ lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
+ color: 'auto'
+ }
+ },
+ axisLabel: { // 鍧愭爣杞存枃鏈爣绛撅紝璇﹁axis.axisLabel
+ textStyle: { // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE
+ color: 'auto'
+ }
+ },
+ splitLine: { // 鍒嗛殧绾�
+ show: true, // 榛樿鏄剧ず锛屽睘鎬how鎺у埗鏄剧ず涓庡惁
+ length :30, // 灞炴�ength鎺у埗绾块暱
+ lineStyle: { // 灞炴�ineStyle锛堣瑙乴ineStyle锛夋帶鍒剁嚎鏉℃牱寮�
+ color: 'auto'
+ }
+ },
+ pointer : {
+ width : 5
+ },
+ title : {
+ show : false,
+ offsetCenter: [0, '-40%'], // x, y锛屽崟浣峱x
+ textStyle: { // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE
+ fontWeight: 'bolder'
+ }
+ },
+ detail : {
+ formatter:'{value}%',
+ offsetCenter: [0, '60%'],
+ textStyle: { // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE
+ color: 'auto',
+ fontWeight: 'bolder',
+ fontSize:20
+ }
+ },
+ data:[{value: 0, name: '鍒╃敤鐜�'}]
+ }
+ ]
+ };
+ let gaugeTopOption5 = {
+ title : {
+ x : 'center',
+ y : 'bottom',
+ text : 'TOP5'
+ },
+ tooltip : {
+ formatter: "{a} <br/>{b} : {c}%"
+ },
+ series : [
+ {
+ name:'TOP5',
+ type:'gauge',
+ splitNumber: 10, // 鍒嗗壊娈垫暟锛岄粯璁や负5
+ axisLine: { // 鍧愭爣杞寸嚎
+ lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
+ color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']],
+ width: 8
+ }
+ },
+ axisTick: { // 鍧愭爣杞村皬鏍囪
+ splitNumber: 10, // 姣忎唤split缁嗗垎澶氬皯娈�
+ length :12, // 灞炴�ength鎺у埗绾块暱
+ lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
+ color: 'auto'
+ }
+ },
+ axisLabel: { // 鍧愭爣杞存枃鏈爣绛撅紝璇﹁axis.axisLabel
+ textStyle: { // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE
+ color: 'auto'
+ }
+ },
+ splitLine: { // 鍒嗛殧绾�
+ show: true, // 榛樿鏄剧ず锛屽睘鎬how鎺у埗鏄剧ず涓庡惁
+ length :30, // 灞炴�ength鎺у埗绾块暱
+ lineStyle: { // 灞炴�ineStyle锛堣瑙乴ineStyle锛夋帶鍒剁嚎鏉℃牱寮�
+ color: 'auto'
+ }
+ },
+ pointer : {
+ width : 5
+ },
+ title : {
+ show : false,
+ offsetCenter: [0, '-40%'], // x, y锛屽崟浣峱x
+ textStyle: { // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE
+ fontWeight: 'bolder'
+ }
+ },
+ detail : {
+ formatter:'{value}%',
+ offsetCenter: [0, '60%'],
+ textStyle: { // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE
+ color: 'auto',
+ fontWeight: 'bolder',
+ fontSize:20
+ }
+ },
+ data:[{value: 0, name: '鍒╃敤鐜�'}]
+ }
+ ]
+ };
+ let gaugeLessOption1 = {
+ title : {
+ x : 'center',
+ y : 'bottom',
+ text : 'LAST1'
+ },
+ tooltip : {
+ formatter: "{a} <br/>{b} : {c}%"
+ },
+ series : [
+ {
+ name:'LAST1',
+ type:'gauge',
+ splitNumber: 10, // 鍒嗗壊娈垫暟锛岄粯璁や负5
+ axisLine: { // 鍧愭爣杞寸嚎
+ lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
+ color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']],
+ width: 8
+ }
+ },
+ axisTick: { // 鍧愭爣杞村皬鏍囪
+ splitNumber: 10, // 姣忎唤split缁嗗垎澶氬皯娈�
+ length :12, // 灞炴�ength鎺у埗绾块暱
+ lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
+ color: 'auto'
+ }
+ },
+ axisLabel: { // 鍧愭爣杞存枃鏈爣绛撅紝璇﹁axis.axisLabel
+ textStyle: { // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE
+ color: 'auto'
+ }
+ },
+ splitLine: { // 鍒嗛殧绾�
+ show: true, // 榛樿鏄剧ず锛屽睘鎬how鎺у埗鏄剧ず涓庡惁
+ length :30, // 灞炴�ength鎺у埗绾块暱
+ lineStyle: { // 灞炴�ineStyle锛堣瑙乴ineStyle锛夋帶鍒剁嚎鏉℃牱寮�
+ color: 'auto'
+ }
+ },
+ pointer : {
+ width : 5
+ },
+ title : {
+ show : false,
+ offsetCenter: [0, '-40%'], // x, y锛屽崟浣峱x
+ textStyle: { // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE
+ fontWeight: 'bolder'
+ }
+ },
+ detail : {
+ formatter:'{value}%',
+ offsetCenter: [0, '60%'],
+ textStyle: { // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE
+ color: 'auto',
+ fontWeight: 'bolder',
+ fontSize:20
+ }
+ },
+ data:[{value: 0, name: '鍒╃敤鐜�'}]
+ }
+ ]
+ };
+ let gaugeLessOption2 = {
+ title : {
+ x : 'center',
+ y : 'bottom',
+ text : 'LAST2'
+ },
+ tooltip : {
+ formatter: "{a} <br/>{b} : {c}%"
+ },
+ series : [
+ {
+ name:'LAST2',
+ type:'gauge',
+ splitNumber: 10, // 鍒嗗壊娈垫暟锛岄粯璁や负5
+ axisLine: { // 鍧愭爣杞寸嚎
+ lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
+ color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']],
+ width: 8
+ }
+ },
+ axisTick: { // 鍧愭爣杞村皬鏍囪
+ splitNumber: 10, // 姣忎唤split缁嗗垎澶氬皯娈�
+ length :12, // 灞炴�ength鎺у埗绾块暱
+ lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
+ color: 'auto'
+ }
+ },
+ axisLabel: { // 鍧愭爣杞存枃鏈爣绛撅紝璇﹁axis.axisLabel
+ textStyle: { // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE
+ color: 'auto'
+ }
+ },
+ splitLine: { // 鍒嗛殧绾�
+ show: true, // 榛樿鏄剧ず锛屽睘鎬how鎺у埗鏄剧ず涓庡惁
+ length :30, // 灞炴�ength鎺у埗绾块暱
+ lineStyle: { // 灞炴�ineStyle锛堣瑙乴ineStyle锛夋帶鍒剁嚎鏉℃牱寮�
+ color: 'auto'
+ }
+ },
+ pointer : {
+ width : 5
+ },
+ title : {
+ show : false,
+ offsetCenter: [0, '-40%'], // x, y锛屽崟浣峱x
+ textStyle: { // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE
+ fontWeight: 'bolder'
+ }
+ },
+ detail : {
+ formatter:'{value}%',
+ offsetCenter: [0, '60%'],
+ textStyle: { // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE
+ color: 'auto',
+ fontWeight: 'bolder',
+ fontSize:20
+ }
+ },
+ data:[{value: 0, name: '鍒╃敤鐜�'}]
+ }
+ ]
+ };
+ let gaugeLessOption3 = {
+ title : {
+ x : 'center',
+ y : 'bottom',
+ text : 'LAST3'
+ },
+ tooltip : {
+ formatter: "{a} <br/>{b} : {c}%"
+ },
+ series : [
+ {
+ name:'LAST3',
+ type:'gauge',
+ splitNumber: 10, // 鍒嗗壊娈垫暟锛岄粯璁や负5
+ axisLine: { // 鍧愭爣杞寸嚎
+ lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
+ color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']],
+ width: 8
+ }
+ },
+ axisTick: { // 鍧愭爣杞村皬鏍囪
+ splitNumber: 10, // 姣忎唤split缁嗗垎澶氬皯娈�
+ length :12, // 灞炴�ength鎺у埗绾块暱
+ lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
+ color: 'auto'
+ }
+ },
+ axisLabel: { // 鍧愭爣杞存枃鏈爣绛撅紝璇﹁axis.axisLabel
+ textStyle: { // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE
+ color: 'auto'
+ }
+ },
+ splitLine: { // 鍒嗛殧绾�
+ show: true, // 榛樿鏄剧ず锛屽睘鎬how鎺у埗鏄剧ず涓庡惁
+ length :30, // 灞炴�ength鎺у埗绾块暱
+ lineStyle: { // 灞炴�ineStyle锛堣瑙乴ineStyle锛夋帶鍒剁嚎鏉℃牱寮�
+ color: 'auto'
+ }
+ },
+ pointer : {
+ width : 5
+ },
+ title : {
+ show : false,
+ offsetCenter: [0, '-40%'], // x, y锛屽崟浣峱x
+ textStyle: { // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE
+ fontWeight: 'bolder'
+ }
+ },
+ detail : {
+ formatter:'{value}%',
+ offsetCenter: [0, '60%'],
+ textStyle: { // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE
+ color: 'auto',
+ fontWeight: 'bolder',
+ fontSize:20
+ }
+ },
+ data:[{value: 0, name: '鍒╃敤鐜�'}]
+ }
+ ]
+ };
+ let gaugeLessOption4 = {
+ title : {
+ x : 'center',
+ y : 'bottom',
+ text : 'LAST4'
+ },
+ tooltip : {
+ formatter: "{a} <br/>{b} : {c}%"
+ },
+ series : [
+ {
+ name:'LAST4',
+ type:'gauge',
+ splitNumber: 10, // 鍒嗗壊娈垫暟锛岄粯璁や负5
+ axisLine: { // 鍧愭爣杞寸嚎
+ lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
+ color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']],
+ width: 8
+ }
+ },
+ axisTick: { // 鍧愭爣杞村皬鏍囪
+ splitNumber: 10, // 姣忎唤split缁嗗垎澶氬皯娈�
+ length :12, // 灞炴�ength鎺у埗绾块暱
+ lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
+ color: 'auto'
+ }
+ },
+ axisLabel: { // 鍧愭爣杞存枃鏈爣绛撅紝璇﹁axis.axisLabel
+ textStyle: { // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE
+ color: 'auto'
+ }
+ },
+ splitLine: { // 鍒嗛殧绾�
+ show: true, // 榛樿鏄剧ず锛屽睘鎬how鎺у埗鏄剧ず涓庡惁
+ length :30, // 灞炴�ength鎺у埗绾块暱
+ lineStyle: { // 灞炴�ineStyle锛堣瑙乴ineStyle锛夋帶鍒剁嚎鏉℃牱寮�
+ color: 'auto'
+ }
+ },
+ pointer : {
+ width : 5
+ },
+ title : {
+ show : false,
+ offsetCenter: [0, '-40%'], // x, y锛屽崟浣峱x
+ textStyle: { // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE
+ fontWeight: 'bolder'
+ }
+ },
+ detail : {
+ formatter:'{value}%',
+ offsetCenter: [0, '60%'],
+ textStyle: { // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE
+ color: 'auto',
+ fontWeight: 'bolder',
+ fontSize:20
+ }
+ },
+ data:[{value: 0, name: '鍒╃敤鐜�'}]
+ }
+ ]
+ };
+ let gaugeLessOption5 = {
+ title : {
+ x : 'center',
+ y : 'bottom',
+ text : 'LAST5'
+ },
+ tooltip : {
+ formatter: "{a} <br/>{b} : {c}%"
+ },
+ series : [
+ {
+ name:'LAST5',
+ type:'gauge',
+ splitNumber: 10, // 鍒嗗壊娈垫暟锛岄粯璁や负5
+ axisLine: { // 鍧愭爣杞寸嚎
+ lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
+ color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']],
+ width: 8
+ }
+ },
+ axisTick: { // 鍧愭爣杞村皬鏍囪
+ splitNumber: 10, // 姣忎唤split缁嗗垎澶氬皯娈�
+ length :12, // 灞炴�ength鎺у埗绾块暱
+ lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
+ color: 'auto'
+ }
+ },
+ axisLabel: { // 鍧愭爣杞存枃鏈爣绛撅紝璇﹁axis.axisLabel
+ textStyle: { // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE
+ color: 'auto'
+ }
+ },
+ splitLine: { // 鍒嗛殧绾�
+ show: true, // 榛樿鏄剧ず锛屽睘鎬how鎺у埗鏄剧ず涓庡惁
+ length :30, // 灞炴�ength鎺у埗绾块暱
+ lineStyle: { // 灞炴�ineStyle锛堣瑙乴ineStyle锛夋帶鍒剁嚎鏉℃牱寮�
+ color: 'auto'
+ }
+ },
+ pointer : {
+ width : 5
+ },
+ title : {
+ show : false,
+ offsetCenter: [0, '-40%'], // x, y锛屽崟浣峱x
+ textStyle: { // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE
+ fontWeight: 'bolder'
+ }
+ },
+ detail : {
+ formatter:'{value}%',
+ offsetCenter: [0, '60%'],
+ textStyle: { // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE
+ color: 'auto',
+ fontWeight: 'bolder',
+ fontSize:20
+ }
+ },
+ data:[{value: 0, name: '鍒╃敤鐜�'}]
+ }
+ ]
+ };
+ if(this.TopLastList != null){
+ this.utilizationRateTopOne=0
+ this.utilizationRateTopOneEquipment = 'TOP1'
+ this.utilizationRateTopTwo=0
+ this.utilizationRateTopTwoEquipment = 'TOP2'
+ this.utilizationRateTopThree=0
+ this.utilizationRateTopThreeEquipment = 'TOP3'
+ this.utilizationRateTopFour =0
+ this.utilizationRateTopFourEquipment = 'TOP4'
+ this.utilizationRateTopFive=0
+ this.utilizationRateTopFiveEquipment = 'TOP5'
+ this.utilizationRateLastOne=0
+ this.utilizationRateLastOneEquipment = 'LAST1'
+ this.utilizationRateLastTwo=0
+ this.utilizationRateLastTwoEquipment = 'LAST2'
+ this.utilizationRateLastThree=0
+ this.utilizationRateLastThreeEquipment = 'LAST3'
+ this.utilizationRateLastFour=0
+ this.utilizationRateLastFourEquipment = 'LAST4'
+ this.utilizationRateLastFive=0
+ this.utilizationRateLastFiveEquipment = 'LAST5'
+ if(this.TopLastList.tops){
+ for(var i = 0;i<this.TopLastList.tops.length;i++){
+ if(i == 0){
+ this.utilizationRateTopOneEquipment=this.TopLastList.tops[0].equipmentId
+ this.utilizationRateTopOne=this.TopLastList.tops[0].utilizationRate
+ }else if(i == 1){
+ this.utilizationRateTopTwoEquipment=this.TopLastList.tops[1].equipmentId
+ this.utilizationRateTopTwo=this.TopLastList.tops[1].utilizationRate
+ }else if(i == 2){
+ this.utilizationRateTopThreeEquipment=this.TopLastList.tops[2].equipmentId
+ this.utilizationRateTopThree=this.TopLastList.tops[2].utilizationRate
+ }else if(i == 3){
+ this.utilizationRateTopFourEquipment=this.TopLastList.tops[3].equipmentId
+ this.utilizationRateTopFour=this.TopLastList.tops[3].utilizationRate
+ }else if(i == 4){
+ this.utilizationRateTopFiveEquipment=this.TopLastList.tops[4].equipmentId
+ this.utilizationRateTopFive=this.TopLastList.tops[4].utilizationRate
+ }
+ }
+ }
+ if(this.TopLastList.lasts){
+ for(var j = 0;j<this.TopLastList.lasts.length;j++){
+ if(j == 0){
+ this.utilizationRateLastOneEquipment=this.TopLastList.lasts[0].equipmentId
+ this.utilizationRateLastOne=this.TopLastList.lasts[0].utilizationRate
+ }else if(j == 1){
+ this.utilizationRateLastTwoEquipment=this.TopLastList.lasts[1].equipmentId
+ this.utilizationRateLastTwo=this.TopLastList.lasts[1].utilizationRate
+ }else if(j == 2){
+ this.utilizationRateLastThreeEquipment=this.TopLastList.lasts[2].equipmentId
+ this.utilizationRateLastThree=this.TopLastList.lasts[2].utilizationRate
+ }else if(j == 3){
+ this.utilizationRateLastFourEquipment=this.TopLastList.lasts[3].equipmentId
+ this.utilizationRateLastFour=this.TopLastList.lasts[3].utilizationRate
+ }else if(j == 4){
+ this.utilizationRateLastFiveEquipment=this.TopLastList.lasts[4].equipmentId
+ this.utilizationRateLastFive=this.TopLastList.lasts[4].utilizationRate
+ }
+ }
+ }
+ gaugeTopOption1.title.text = this.utilizationRateTopOneEquipment
+ gaugeTopOption1.series[0].data = [{value : (this.utilizationRateTopOne * 100).toFixed(2), name : '鍒╃敤鐜�'}];
+ gaugeTopOption2.title.text = this.utilizationRateTopTwoEquipment
+ gaugeTopOption2.series[0].data = [{value : (this.utilizationRateTopTwo * 100).toFixed(2), name : '鍒╃敤鐜�'}];
+ gaugeTopOption3.title.text = this.utilizationRateTopThreeEquipment
+ gaugeTopOption3.series[0].data = [{value : (this.utilizationRateTopThree * 100).toFixed(2), name : '鍒╃敤鐜�'}];
+ gaugeTopOption4.title.text = this.utilizationRateTopFourEquipment
+ gaugeTopOption4.series[0].data = [{value : (this.utilizationRateTopFour * 100).toFixed(2), name : '鍒╃敤鐜�'}];
+ gaugeTopOption5.title.text = this.utilizationRateTopFiveEquipment
+ gaugeTopOption5.series[0].data = [{value : (this.utilizationRateTopFive * 100).toFixed(2), name : '鍒╃敤鐜�'}];
+
+ gaugeLessOption1.title.text = this.utilizationRateLastOneEquipment
+ gaugeLessOption1.series[0].data = [{value : (this.utilizationRateLastOne * 100).toFixed(2), name : '鍒╃敤鐜�'}];
+ gaugeLessOption2.title.text = this.utilizationRateLastTwoEquipment
+ gaugeLessOption2.series[0].data = [{value : (this.utilizationRateLastTwo * 100).toFixed(2), name : '鍒╃敤鐜�'}];
+ gaugeLessOption3.title.text = this.utilizationRateLastThreeEquipment
+ gaugeLessOption3.series[0].data = [{value : (this.utilizationRateLastThree * 100).toFixed(2), name : '鍒╃敤鐜�'}];
+ gaugeLessOption4.title.text = this.utilizationRateLastFourEquipment
+ gaugeLessOption4.series[0].data = [{value : (this.utilizationRateLastFour * 100).toFixed(2), name : '鍒╃敤鐜�'}];
+ gaugeLessOption5.title.text = this.utilizationRateLastFiveEquipment
+ gaugeLessOption5.series[0].data = [{value : (this.utilizationRateLastFive * 100).toFixed(2), name : '鍒╃敤鐜�'}];
+ gaugeTopChart1.setOption(gaugeTopOption1);
+ gaugeTopChart2.setOption(gaugeTopOption2);
+ gaugeTopChart3.setOption(gaugeTopOption3);
+ gaugeTopChart4.setOption(gaugeTopOption4);
+ gaugeTopChart5.setOption(gaugeTopOption5);
+ gaugeLastChart1.setOption(gaugeLessOption1);
+ gaugeLastChart2.setOption(gaugeLessOption2);
+ gaugeLastChart3.setOption(gaugeLessOption3);
+ gaugeLastChart4.setOption(gaugeLessOption4);
+ gaugeLastChart5.setOption(gaugeLessOption5);
+ }else{
+ gaugeTopChart1.setOption(gaugeTopOption1);
+ gaugeTopChart2.setOption(gaugeTopOption2);
+ gaugeTopChart3.setOption(gaugeTopOption3);
+ gaugeTopChart4.setOption(gaugeTopOption4);
+ gaugeTopChart5.setOption(gaugeTopOption5);
+ gaugeLastChart1.setOption(gaugeLessOption1);
+ gaugeLastChart2.setOption(gaugeLessOption2);
+ gaugeLastChart3.setOption(gaugeLessOption3);
+ gaugeLastChart4.setOption(gaugeLessOption4);
+ gaugeLastChart5.setOption(gaugeLessOption5);
+ }
+ gaugeTopChart1.setOption(gaugeTopOption1);
+ gaugeTopChart2.setOption(gaugeTopOption2);
+ gaugeTopChart3.setOption(gaugeTopOption3);
+ gaugeTopChart4.setOption(gaugeTopOption4);
+ gaugeTopChart5.setOption(gaugeTopOption5);
+ gaugeLastChart1.setOption(gaugeLessOption1);
+ gaugeLastChart2.setOption(gaugeLessOption2);
+ gaugeLastChart3.setOption(gaugeLessOption3);
+ gaugeLastChart4.setOption(gaugeLessOption4);
+ gaugeLastChart5.setOption(gaugeLessOption5);
+ window.addEventListener('resize', function() {
+ gaugeTopChart1.resize()
+ gaugeTopChart2.resize()
+ gaugeTopChart3.resize()
+ gaugeTopChart4.resize()
+ gaugeTopChart5.resize()
+ gaugeLastChart1.resize()
+ gaugeLastChart2.resize()
+ gaugeLastChart3.resize()
+ gaugeLastChart4.resize()
+ gaugeLastChart5.resize()
+ })
+ }
+
+ }
+ }
+</script>
+
+<style scoped>
+ .div-inline{
+ flex: 1;
+ }
+</style>
\ No newline at end of file
--
Gitblit v1.9.3