From 3a097696dbc536ad29ccf60b7cf381a08e1bebf0 Mon Sep 17 00:00:00 2001
From: zhaowei <zhaowei>
Date: 星期四, 26 六月 2025 17:41:30 +0800
Subject: [PATCH] 1、设备日利用率以及设备日利用率对比页面优化图表加载展示区域及代码 2、调整操作工终端登录页背景图片
---
src/views/mdc/base/modules/comparativeAnalysis/ComparativeAnalysisGauge.vue | 732 ++++++++++++++++++++++++++++---------------------------
1 files changed, 372 insertions(+), 360 deletions(-)
diff --git a/src/views/mdc/base/modules/comparativeAnalysis/ComparativeAnalysisGauge.vue b/src/views/mdc/base/modules/comparativeAnalysis/ComparativeAnalysisGauge.vue
index 1fa304c..d01c305 100644
--- a/src/views/mdc/base/modules/comparativeAnalysis/ComparativeAnalysisGauge.vue
+++ b/src/views/mdc/base/modules/comparativeAnalysis/ComparativeAnalysisGauge.vue
@@ -1,9 +1,9 @@
<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 class="outer-container">
+ <div>
+ <h3 style="margin: 0 auto;">鍒╃敤鐜� Top 5</h3>
- <div style="flex: 1;display: flex;">
+ <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>
@@ -11,10 +11,11 @@
<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>
+ <h3 style="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>
@@ -26,80 +27,79 @@
</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:[]
+ 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);
+ watch: {
+ dataList(val) {
+ console.log(val)
this.TopLastList = val
this.draw()
- },
+ }
},
- mounted(){
- 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');
+ 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'
+ title: {
+ x: 'center',
+ y: 'bottom',
+ text: 'TOP1'
},
- tooltip : {
- formatter: "{a} <br/>{b} : {c}%"
+ tooltip: {
+ formatter: '{a} <br/>{b} : {c}%'
},
- series : [
+ series: [
{
- name:'TOP1',
- type:'gauge',
+ name: 'TOP1',
+ type: 'gauge',
splitNumber: 10, // 鍒嗗壊娈垫暟锛岄粯璁や负5
axisLine: { // 鍧愭爣杞寸嚎
lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
- color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']],
+ color: [[0.2, '#228b22'], [0.8, '#48b'], [1, '#ff4500']],
width: 8
}
},
axisTick: { // 鍧愭爣杞村皬鏍囪
splitNumber: 10, // 姣忎唤split缁嗗垎澶氬皯娈�
- length :12, // 灞炴�ength鎺у埗绾块暱
+ length: 12, // 灞炴�ength鎺у埗绾块暱
lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
color: 'auto'
}
@@ -111,57 +111,57 @@
},
splitLine: { // 鍒嗛殧绾�
show: true, // 榛樿鏄剧ず锛屽睘鎬how鎺у埗鏄剧ず涓庡惁
- length :30, // 灞炴�ength鎺у埗绾块暱
+ length: 30, // 灞炴�ength鎺у埗绾块暱
lineStyle: { // 灞炴�ineStyle锛堣瑙乴ineStyle锛夋帶鍒剁嚎鏉℃牱寮�
color: 'auto'
}
},
- pointer : {
- width : 5
+ pointer: {
+ width: 5
},
- title : {
- show : false,
+ title: {
+ show: false,
offsetCenter: [0, '-40%'], // x, y锛屽崟浣峱x
textStyle: { // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE
fontWeight: 'bolder'
}
},
- detail : {
- formatter:'{value}%',
+ detail: {
+ formatter: '{value}%',
offsetCenter: [0, '60%'],
textStyle: { // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE
color: 'auto',
fontWeight: 'bolder',
- fontSize:20
+ fontSize: 20
}
},
- data:[{value: 0, name: '鍒╃敤鐜�'}]
+ data: [{ value: 0, name: '鍒╃敤鐜�' }]
}
]
- };
- let gaugeTopOption2 = {
- title : {
- x : 'center',
- y : 'bottom',
- text : 'TOP2'
+ }
+ let gaugeTopOption2 = {
+ title: {
+ x: 'center',
+ y: 'bottom',
+ text: 'TOP2'
},
- tooltip : {
- formatter: "{a} <br/>{b} : {c}%"
+ tooltip: {
+ formatter: '{a} <br/>{b} : {c}%'
},
- series : [
+ series: [
{
- name:'TOP2',
- type:'gauge',
+ name: 'TOP2',
+ type: 'gauge',
splitNumber: 10, // 鍒嗗壊娈垫暟锛岄粯璁や负5
axisLine: { // 鍧愭爣杞寸嚎
lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
- color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']],
+ color: [[0.2, '#228b22'], [0.8, '#48b'], [1, '#ff4500']],
width: 8
}
},
axisTick: { // 鍧愭爣杞村皬鏍囪
splitNumber: 10, // 姣忎唤split缁嗗垎澶氬皯娈�
- length :12, // 灞炴�ength鎺у埗绾块暱
+ length: 12, // 灞炴�ength鎺у埗绾块暱
lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
color: 'auto'
}
@@ -173,57 +173,57 @@
},
splitLine: { // 鍒嗛殧绾�
show: true, // 榛樿鏄剧ず锛屽睘鎬how鎺у埗鏄剧ず涓庡惁
- length :30, // 灞炴�ength鎺у埗绾块暱
+ length: 30, // 灞炴�ength鎺у埗绾块暱
lineStyle: { // 灞炴�ineStyle锛堣瑙乴ineStyle锛夋帶鍒剁嚎鏉℃牱寮�
color: 'auto'
}
},
- pointer : {
- width : 5
+ pointer: {
+ width: 5
},
- title : {
- show : false,
+ title: {
+ show: false,
offsetCenter: [0, '-40%'], // x, y锛屽崟浣峱x
textStyle: { // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE
fontWeight: 'bolder'
}
},
- detail : {
- formatter:'{value}%',
+ detail: {
+ formatter: '{value}%',
offsetCenter: [0, '60%'],
textStyle: { // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE
color: 'auto',
fontWeight: 'bolder',
- fontSize:20
+ fontSize: 20
}
},
- data:[{value: 0, name: '鍒╃敤鐜�'}]
+ data: [{ value: 0, name: '鍒╃敤鐜�' }]
}
]
- };
+ }
let gaugeTopOption3 = {
- title : {
- x : 'center',
- y : 'bottom',
- text : 'TOP3'
+ title: {
+ x: 'center',
+ y: 'bottom',
+ text: 'TOP3'
},
- tooltip : {
- formatter: "{a} <br/>{b} : {c}%"
+ tooltip: {
+ formatter: '{a} <br/>{b} : {c}%'
},
- series : [
+ series: [
{
- name:'TOP3',
- type:'gauge',
+ name: 'TOP3',
+ type: 'gauge',
splitNumber: 10, // 鍒嗗壊娈垫暟锛岄粯璁や负5
axisLine: { // 鍧愭爣杞寸嚎
lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
- color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']],
+ color: [[0.2, '#228b22'], [0.8, '#48b'], [1, '#ff4500']],
width: 8
}
},
axisTick: { // 鍧愭爣杞村皬鏍囪
splitNumber: 10, // 姣忎唤split缁嗗垎澶氬皯娈�
- length :12, // 灞炴�ength鎺у埗绾块暱
+ length: 12, // 灞炴�ength鎺у埗绾块暱
lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
color: 'auto'
}
@@ -235,57 +235,57 @@
},
splitLine: { // 鍒嗛殧绾�
show: true, // 榛樿鏄剧ず锛屽睘鎬how鎺у埗鏄剧ず涓庡惁
- length :30, // 灞炴�ength鎺у埗绾块暱
+ length: 30, // 灞炴�ength鎺у埗绾块暱
lineStyle: { // 灞炴�ineStyle锛堣瑙乴ineStyle锛夋帶鍒剁嚎鏉℃牱寮�
color: 'auto'
}
},
- pointer : {
- width : 5
+ pointer: {
+ width: 5
},
- title : {
- show : false,
+ title: {
+ show: false,
offsetCenter: [0, '-40%'], // x, y锛屽崟浣峱x
textStyle: { // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE
fontWeight: 'bolder'
}
},
- detail : {
- formatter:'{value}%',
+ detail: {
+ formatter: '{value}%',
offsetCenter: [0, '60%'],
textStyle: { // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE
color: 'auto',
fontWeight: 'bolder',
- fontSize:20
+ fontSize: 20
}
},
- data:[{value: 0, name: '鍒╃敤鐜�'}]
+ data: [{ value: 0, name: '鍒╃敤鐜�' }]
}
]
- };
+ }
let gaugeTopOption4 = {
- title : {
- x : 'center',
- y : 'bottom',
- text : 'TOP4'
+ title: {
+ x: 'center',
+ y: 'bottom',
+ text: 'TOP4'
},
- tooltip : {
- formatter: "{a} <br/>{b} : {c}%"
+ tooltip: {
+ formatter: '{a} <br/>{b} : {c}%'
},
- series : [
+ series: [
{
- name:'TOP4',
- type:'gauge',
+ name: 'TOP4',
+ type: 'gauge',
splitNumber: 10, // 鍒嗗壊娈垫暟锛岄粯璁や负5
axisLine: { // 鍧愭爣杞寸嚎
lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
- color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']],
+ color: [[0.2, '#228b22'], [0.8, '#48b'], [1, '#ff4500']],
width: 8
}
},
axisTick: { // 鍧愭爣杞村皬鏍囪
splitNumber: 10, // 姣忎唤split缁嗗垎澶氬皯娈�
- length :12, // 灞炴�ength鎺у埗绾块暱
+ length: 12, // 灞炴�ength鎺у埗绾块暱
lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
color: 'auto'
}
@@ -297,57 +297,57 @@
},
splitLine: { // 鍒嗛殧绾�
show: true, // 榛樿鏄剧ず锛屽睘鎬how鎺у埗鏄剧ず涓庡惁
- length :30, // 灞炴�ength鎺у埗绾块暱
+ length: 30, // 灞炴�ength鎺у埗绾块暱
lineStyle: { // 灞炴�ineStyle锛堣瑙乴ineStyle锛夋帶鍒剁嚎鏉℃牱寮�
color: 'auto'
}
},
- pointer : {
- width : 5
+ pointer: {
+ width: 5
},
- title : {
- show : false,
+ title: {
+ show: false,
offsetCenter: [0, '-40%'], // x, y锛屽崟浣峱x
textStyle: { // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE
fontWeight: 'bolder'
}
},
- detail : {
- formatter:'{value}%',
+ detail: {
+ formatter: '{value}%',
offsetCenter: [0, '60%'],
textStyle: { // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE
color: 'auto',
fontWeight: 'bolder',
- fontSize:20
+ fontSize: 20
}
},
- data:[{value: 0, name: '鍒╃敤鐜�'}]
+ data: [{ value: 0, name: '鍒╃敤鐜�' }]
}
]
- };
+ }
let gaugeTopOption5 = {
- title : {
- x : 'center',
- y : 'bottom',
- text : 'TOP5'
+ title: {
+ x: 'center',
+ y: 'bottom',
+ text: 'TOP5'
},
- tooltip : {
- formatter: "{a} <br/>{b} : {c}%"
+ tooltip: {
+ formatter: '{a} <br/>{b} : {c}%'
},
- series : [
+ series: [
{
- name:'TOP5',
- type:'gauge',
+ name: 'TOP5',
+ type: 'gauge',
splitNumber: 10, // 鍒嗗壊娈垫暟锛岄粯璁や负5
axisLine: { // 鍧愭爣杞寸嚎
lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
- color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']],
+ color: [[0.2, '#228b22'], [0.8, '#48b'], [1, '#ff4500']],
width: 8
}
},
axisTick: { // 鍧愭爣杞村皬鏍囪
splitNumber: 10, // 姣忎唤split缁嗗垎澶氬皯娈�
- length :12, // 灞炴�ength鎺у埗绾块暱
+ length: 12, // 灞炴�ength鎺у埗绾块暱
lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
color: 'auto'
}
@@ -359,57 +359,57 @@
},
splitLine: { // 鍒嗛殧绾�
show: true, // 榛樿鏄剧ず锛屽睘鎬how鎺у埗鏄剧ず涓庡惁
- length :30, // 灞炴�ength鎺у埗绾块暱
+ length: 30, // 灞炴�ength鎺у埗绾块暱
lineStyle: { // 灞炴�ineStyle锛堣瑙乴ineStyle锛夋帶鍒剁嚎鏉℃牱寮�
color: 'auto'
}
},
- pointer : {
- width : 5
+ pointer: {
+ width: 5
},
- title : {
- show : false,
+ title: {
+ show: false,
offsetCenter: [0, '-40%'], // x, y锛屽崟浣峱x
textStyle: { // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE
fontWeight: 'bolder'
}
},
- detail : {
- formatter:'{value}%',
+ detail: {
+ formatter: '{value}%',
offsetCenter: [0, '60%'],
textStyle: { // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE
color: 'auto',
fontWeight: 'bolder',
- fontSize:20
+ fontSize: 20
}
},
- data:[{value: 0, name: '鍒╃敤鐜�'}]
+ data: [{ value: 0, name: '鍒╃敤鐜�' }]
}
]
- };
+ }
let gaugeLessOption1 = {
- title : {
- x : 'center',
- y : 'bottom',
- text : 'LAST1'
+ title: {
+ x: 'center',
+ y: 'bottom',
+ text: 'LAST1'
},
- tooltip : {
- formatter: "{a} <br/>{b} : {c}%"
+ tooltip: {
+ formatter: '{a} <br/>{b} : {c}%'
},
- series : [
+ series: [
{
- name:'LAST1',
- type:'gauge',
+ name: 'LAST1',
+ type: 'gauge',
splitNumber: 10, // 鍒嗗壊娈垫暟锛岄粯璁や负5
axisLine: { // 鍧愭爣杞寸嚎
lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
- color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']],
+ color: [[0.2, '#228b22'], [0.8, '#48b'], [1, '#ff4500']],
width: 8
}
},
axisTick: { // 鍧愭爣杞村皬鏍囪
splitNumber: 10, // 姣忎唤split缁嗗垎澶氬皯娈�
- length :12, // 灞炴�ength鎺у埗绾块暱
+ length: 12, // 灞炴�ength鎺у埗绾块暱
lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
color: 'auto'
}
@@ -421,57 +421,57 @@
},
splitLine: { // 鍒嗛殧绾�
show: true, // 榛樿鏄剧ず锛屽睘鎬how鎺у埗鏄剧ず涓庡惁
- length :30, // 灞炴�ength鎺у埗绾块暱
+ length: 30, // 灞炴�ength鎺у埗绾块暱
lineStyle: { // 灞炴�ineStyle锛堣瑙乴ineStyle锛夋帶鍒剁嚎鏉℃牱寮�
color: 'auto'
}
},
- pointer : {
- width : 5
+ pointer: {
+ width: 5
},
- title : {
- show : false,
+ title: {
+ show: false,
offsetCenter: [0, '-40%'], // x, y锛屽崟浣峱x
textStyle: { // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE
fontWeight: 'bolder'
}
},
- detail : {
- formatter:'{value}%',
+ detail: {
+ formatter: '{value}%',
offsetCenter: [0, '60%'],
textStyle: { // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE
color: 'auto',
fontWeight: 'bolder',
- fontSize:20
+ fontSize: 20
}
},
- data:[{value: 0, name: '鍒╃敤鐜�'}]
+ data: [{ value: 0, name: '鍒╃敤鐜�' }]
}
]
- };
+ }
let gaugeLessOption2 = {
- title : {
- x : 'center',
- y : 'bottom',
- text : 'LAST2'
+ title: {
+ x: 'center',
+ y: 'bottom',
+ text: 'LAST2'
},
- tooltip : {
- formatter: "{a} <br/>{b} : {c}%"
+ tooltip: {
+ formatter: '{a} <br/>{b} : {c}%'
},
- series : [
+ series: [
{
- name:'LAST2',
- type:'gauge',
+ name: 'LAST2',
+ type: 'gauge',
splitNumber: 10, // 鍒嗗壊娈垫暟锛岄粯璁や负5
axisLine: { // 鍧愭爣杞寸嚎
lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
- color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']],
+ color: [[0.2, '#228b22'], [0.8, '#48b'], [1, '#ff4500']],
width: 8
}
},
axisTick: { // 鍧愭爣杞村皬鏍囪
splitNumber: 10, // 姣忎唤split缁嗗垎澶氬皯娈�
- length :12, // 灞炴�ength鎺у埗绾块暱
+ length: 12, // 灞炴�ength鎺у埗绾块暱
lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
color: 'auto'
}
@@ -483,57 +483,57 @@
},
splitLine: { // 鍒嗛殧绾�
show: true, // 榛樿鏄剧ず锛屽睘鎬how鎺у埗鏄剧ず涓庡惁
- length :30, // 灞炴�ength鎺у埗绾块暱
+ length: 30, // 灞炴�ength鎺у埗绾块暱
lineStyle: { // 灞炴�ineStyle锛堣瑙乴ineStyle锛夋帶鍒剁嚎鏉℃牱寮�
color: 'auto'
}
},
- pointer : {
- width : 5
+ pointer: {
+ width: 5
},
- title : {
- show : false,
+ title: {
+ show: false,
offsetCenter: [0, '-40%'], // x, y锛屽崟浣峱x
textStyle: { // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE
fontWeight: 'bolder'
}
},
- detail : {
- formatter:'{value}%',
+ detail: {
+ formatter: '{value}%',
offsetCenter: [0, '60%'],
textStyle: { // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE
color: 'auto',
fontWeight: 'bolder',
- fontSize:20
+ fontSize: 20
}
},
- data:[{value: 0, name: '鍒╃敤鐜�'}]
+ data: [{ value: 0, name: '鍒╃敤鐜�' }]
}
]
- };
+ }
let gaugeLessOption3 = {
- title : {
- x : 'center',
- y : 'bottom',
- text : 'LAST3'
+ title: {
+ x: 'center',
+ y: 'bottom',
+ text: 'LAST3'
},
- tooltip : {
- formatter: "{a} <br/>{b} : {c}%"
+ tooltip: {
+ formatter: '{a} <br/>{b} : {c}%'
},
- series : [
+ series: [
{
- name:'LAST3',
- type:'gauge',
+ name: 'LAST3',
+ type: 'gauge',
splitNumber: 10, // 鍒嗗壊娈垫暟锛岄粯璁や负5
axisLine: { // 鍧愭爣杞寸嚎
lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
- color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']],
+ color: [[0.2, '#228b22'], [0.8, '#48b'], [1, '#ff4500']],
width: 8
}
},
axisTick: { // 鍧愭爣杞村皬鏍囪
splitNumber: 10, // 姣忎唤split缁嗗垎澶氬皯娈�
- length :12, // 灞炴�ength鎺у埗绾块暱
+ length: 12, // 灞炴�ength鎺у埗绾块暱
lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
color: 'auto'
}
@@ -545,57 +545,57 @@
},
splitLine: { // 鍒嗛殧绾�
show: true, // 榛樿鏄剧ず锛屽睘鎬how鎺у埗鏄剧ず涓庡惁
- length :30, // 灞炴�ength鎺у埗绾块暱
+ length: 30, // 灞炴�ength鎺у埗绾块暱
lineStyle: { // 灞炴�ineStyle锛堣瑙乴ineStyle锛夋帶鍒剁嚎鏉℃牱寮�
color: 'auto'
}
},
- pointer : {
- width : 5
+ pointer: {
+ width: 5
},
- title : {
- show : false,
+ title: {
+ show: false,
offsetCenter: [0, '-40%'], // x, y锛屽崟浣峱x
textStyle: { // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE
fontWeight: 'bolder'
}
},
- detail : {
- formatter:'{value}%',
+ detail: {
+ formatter: '{value}%',
offsetCenter: [0, '60%'],
textStyle: { // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE
color: 'auto',
fontWeight: 'bolder',
- fontSize:20
+ fontSize: 20
}
},
- data:[{value: 0, name: '鍒╃敤鐜�'}]
+ data: [{ value: 0, name: '鍒╃敤鐜�' }]
}
]
- };
+ }
let gaugeLessOption4 = {
- title : {
- x : 'center',
- y : 'bottom',
- text : 'LAST4'
+ title: {
+ x: 'center',
+ y: 'bottom',
+ text: 'LAST4'
},
- tooltip : {
- formatter: "{a} <br/>{b} : {c}%"
+ tooltip: {
+ formatter: '{a} <br/>{b} : {c}%'
},
- series : [
+ series: [
{
- name:'LAST4',
- type:'gauge',
+ name: 'LAST4',
+ type: 'gauge',
splitNumber: 10, // 鍒嗗壊娈垫暟锛岄粯璁や负5
axisLine: { // 鍧愭爣杞寸嚎
lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
- color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']],
+ color: [[0.2, '#228b22'], [0.8, '#48b'], [1, '#ff4500']],
width: 8
}
},
axisTick: { // 鍧愭爣杞村皬鏍囪
splitNumber: 10, // 姣忎唤split缁嗗垎澶氬皯娈�
- length :12, // 灞炴�ength鎺у埗绾块暱
+ length: 12, // 灞炴�ength鎺у埗绾块暱
lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
color: 'auto'
}
@@ -607,57 +607,57 @@
},
splitLine: { // 鍒嗛殧绾�
show: true, // 榛樿鏄剧ず锛屽睘鎬how鎺у埗鏄剧ず涓庡惁
- length :30, // 灞炴�ength鎺у埗绾块暱
+ length: 30, // 灞炴�ength鎺у埗绾块暱
lineStyle: { // 灞炴�ineStyle锛堣瑙乴ineStyle锛夋帶鍒剁嚎鏉℃牱寮�
color: 'auto'
}
},
- pointer : {
- width : 5
+ pointer: {
+ width: 5
},
- title : {
- show : false,
+ title: {
+ show: false,
offsetCenter: [0, '-40%'], // x, y锛屽崟浣峱x
textStyle: { // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE
fontWeight: 'bolder'
}
},
- detail : {
- formatter:'{value}%',
+ detail: {
+ formatter: '{value}%',
offsetCenter: [0, '60%'],
textStyle: { // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE
color: 'auto',
fontWeight: 'bolder',
- fontSize:20
+ fontSize: 20
}
},
- data:[{value: 0, name: '鍒╃敤鐜�'}]
+ data: [{ value: 0, name: '鍒╃敤鐜�' }]
}
]
- };
+ }
let gaugeLessOption5 = {
- title : {
- x : 'center',
- y : 'bottom',
- text : 'LAST5'
+ title: {
+ x: 'center',
+ y: 'bottom',
+ text: 'LAST5'
},
- tooltip : {
- formatter: "{a} <br/>{b} : {c}%"
+ tooltip: {
+ formatter: '{a} <br/>{b} : {c}%'
},
- series : [
+ series: [
{
- name:'LAST5',
- type:'gauge',
+ name: 'LAST5',
+ type: 'gauge',
splitNumber: 10, // 鍒嗗壊娈垫暟锛岄粯璁や负5
axisLine: { // 鍧愭爣杞寸嚎
lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
- color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']],
+ color: [[0.2, '#228b22'], [0.8, '#48b'], [1, '#ff4500']],
width: 8
}
},
axisTick: { // 鍧愭爣杞村皬鏍囪
splitNumber: 10, // 姣忎唤split缁嗗垎澶氬皯娈�
- length :12, // 灞炴�ength鎺у埗绾块暱
+ length: 12, // 灞炴�ength鎺у埗绾块暱
lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
color: 'auto'
}
@@ -669,148 +669,148 @@
},
splitLine: { // 鍒嗛殧绾�
show: true, // 榛樿鏄剧ず锛屽睘鎬how鎺у埗鏄剧ず涓庡惁
- length :30, // 灞炴�ength鎺у埗绾块暱
+ length: 30, // 灞炴�ength鎺у埗绾块暱
lineStyle: { // 灞炴�ineStyle锛堣瑙乴ineStyle锛夋帶鍒剁嚎鏉℃牱寮�
color: 'auto'
}
},
- pointer : {
- width : 5
+ pointer: {
+ width: 5
},
- title : {
- show : false,
+ title: {
+ show: false,
offsetCenter: [0, '-40%'], // x, y锛屽崟浣峱x
textStyle: { // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE
fontWeight: 'bolder'
}
},
- detail : {
- formatter:'{value}%',
+ detail: {
+ formatter: '{value}%',
offsetCenter: [0, '60%'],
textStyle: { // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE
color: 'auto',
fontWeight: 'bolder',
- fontSize:20
+ fontSize: 20
}
},
- data:[{value: 0, name: '鍒╃敤鐜�'}]
+ 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 != 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
+ 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 : '鍒╃敤鐜�'}];
+ 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 : '鍒╃敤鐜�'}];
+ 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 : '鍒╃敤鐜�'}];
+ 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 : '鍒╃敤鐜�'}];
+ 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 : '鍒╃敤鐜�'}];
+ 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 : '鍒╃敤鐜�'}];
+ 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 : '鍒╃敤鐜�'}];
+ 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 : '鍒╃敤鐜�'}];
+ 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 : '鍒╃敤鐜�'}];
+ 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);
+ 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);
+ 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()
@@ -829,8 +829,20 @@
}
</script>
-<style scoped>
- .div-inline{
- flex: 1;
+<style lang="less" scoped>
+ .outer-container {
+ height: 100%;
+ overflow: auto;
+
+ > div {
+ height: 320px;
+ display: flex;
+ flex-direction: column
+ }
+
+ .div-inline {
+ width: 20%;
+ height: 100%;
+ }
}
</style>
\ No newline at end of file
--
Gitblit v1.9.3