From 2d93721c3758621a6b9a7eff038a8d6eac4fda24 Mon Sep 17 00:00:00 2001
From: zhaowei <zhaowei>
Date: 星期四, 26 六月 2025 15:30:26 +0800
Subject: [PATCH] 1、调整设备打卡率页面查询区域样式 2、对比分析页面新增图表数据加载提示以及优化整体页面图表展示及代码 3、调整班次班制管理页面左侧新增班制后刷新列表逻辑以及右侧配置按钮展示条件
---
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