<template>
|
<div class="outer-container">
|
<div>
|
<h3 style="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>
|
<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>
|
<div id="last4Gauge" class="div-inline"></div>
|
<div id="last5Gauge" class="div-inline"></div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
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: { // 属性lineStyle控制线条样式
|
color: [[0.2, '#228b22'], [0.8, '#48b'], [1, '#ff4500']],
|
width: 8
|
}
|
},
|
axisTick: { // 坐标轴小标记
|
splitNumber: 10, // 每份split细分多少段
|
length: 12, // 属性length控制线长
|
lineStyle: { // 属性lineStyle控制线条样式
|
color: 'auto'
|
}
|
},
|
axisLabel: { // 坐标轴文本标签，详见axis.axisLabel
|
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
|
color: 'auto'
|
}
|
},
|
splitLine: { // 分隔线
|
show: true, // 默认显示，属性show控制显示与否
|
length: 30, // 属性length控制线长
|
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
|
color: 'auto'
|
}
|
},
|
pointer: {
|
width: 5
|
},
|
title: {
|
show: false,
|
offsetCenter: [0, '-40%'], // x, y，单位px
|
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
|
fontWeight: 'bolder'
|
}
|
},
|
detail: {
|
formatter: '{value}%',
|
offsetCenter: [0, '60%'],
|
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
|
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: { // 属性lineStyle控制线条样式
|
color: [[0.2, '#228b22'], [0.8, '#48b'], [1, '#ff4500']],
|
width: 8
|
}
|
},
|
axisTick: { // 坐标轴小标记
|
splitNumber: 10, // 每份split细分多少段
|
length: 12, // 属性length控制线长
|
lineStyle: { // 属性lineStyle控制线条样式
|
color: 'auto'
|
}
|
},
|
axisLabel: { // 坐标轴文本标签，详见axis.axisLabel
|
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
|
color: 'auto'
|
}
|
},
|
splitLine: { // 分隔线
|
show: true, // 默认显示，属性show控制显示与否
|
length: 30, // 属性length控制线长
|
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
|
color: 'auto'
|
}
|
},
|
pointer: {
|
width: 5
|
},
|
title: {
|
show: false,
|
offsetCenter: [0, '-40%'], // x, y，单位px
|
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
|
fontWeight: 'bolder'
|
}
|
},
|
detail: {
|
formatter: '{value}%',
|
offsetCenter: [0, '60%'],
|
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
|
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: { // 属性lineStyle控制线条样式
|
color: [[0.2, '#228b22'], [0.8, '#48b'], [1, '#ff4500']],
|
width: 8
|
}
|
},
|
axisTick: { // 坐标轴小标记
|
splitNumber: 10, // 每份split细分多少段
|
length: 12, // 属性length控制线长
|
lineStyle: { // 属性lineStyle控制线条样式
|
color: 'auto'
|
}
|
},
|
axisLabel: { // 坐标轴文本标签，详见axis.axisLabel
|
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
|
color: 'auto'
|
}
|
},
|
splitLine: { // 分隔线
|
show: true, // 默认显示，属性show控制显示与否
|
length: 30, // 属性length控制线长
|
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
|
color: 'auto'
|
}
|
},
|
pointer: {
|
width: 5
|
},
|
title: {
|
show: false,
|
offsetCenter: [0, '-40%'], // x, y，单位px
|
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
|
fontWeight: 'bolder'
|
}
|
},
|
detail: {
|
formatter: '{value}%',
|
offsetCenter: [0, '60%'],
|
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
|
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: { // 属性lineStyle控制线条样式
|
color: [[0.2, '#228b22'], [0.8, '#48b'], [1, '#ff4500']],
|
width: 8
|
}
|
},
|
axisTick: { // 坐标轴小标记
|
splitNumber: 10, // 每份split细分多少段
|
length: 12, // 属性length控制线长
|
lineStyle: { // 属性lineStyle控制线条样式
|
color: 'auto'
|
}
|
},
|
axisLabel: { // 坐标轴文本标签，详见axis.axisLabel
|
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
|
color: 'auto'
|
}
|
},
|
splitLine: { // 分隔线
|
show: true, // 默认显示，属性show控制显示与否
|
length: 30, // 属性length控制线长
|
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
|
color: 'auto'
|
}
|
},
|
pointer: {
|
width: 5
|
},
|
title: {
|
show: false,
|
offsetCenter: [0, '-40%'], // x, y，单位px
|
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
|
fontWeight: 'bolder'
|
}
|
},
|
detail: {
|
formatter: '{value}%',
|
offsetCenter: [0, '60%'],
|
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
|
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: { // 属性lineStyle控制线条样式
|
color: [[0.2, '#228b22'], [0.8, '#48b'], [1, '#ff4500']],
|
width: 8
|
}
|
},
|
axisTick: { // 坐标轴小标记
|
splitNumber: 10, // 每份split细分多少段
|
length: 12, // 属性length控制线长
|
lineStyle: { // 属性lineStyle控制线条样式
|
color: 'auto'
|
}
|
},
|
axisLabel: { // 坐标轴文本标签，详见axis.axisLabel
|
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
|
color: 'auto'
|
}
|
},
|
splitLine: { // 分隔线
|
show: true, // 默认显示，属性show控制显示与否
|
length: 30, // 属性length控制线长
|
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
|
color: 'auto'
|
}
|
},
|
pointer: {
|
width: 5
|
},
|
title: {
|
show: false,
|
offsetCenter: [0, '-40%'], // x, y，单位px
|
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
|
fontWeight: 'bolder'
|
}
|
},
|
detail: {
|
formatter: '{value}%',
|
offsetCenter: [0, '60%'],
|
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
|
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: { // 属性lineStyle控制线条样式
|
color: [[0.2, '#228b22'], [0.8, '#48b'], [1, '#ff4500']],
|
width: 8
|
}
|
},
|
axisTick: { // 坐标轴小标记
|
splitNumber: 10, // 每份split细分多少段
|
length: 12, // 属性length控制线长
|
lineStyle: { // 属性lineStyle控制线条样式
|
color: 'auto'
|
}
|
},
|
axisLabel: { // 坐标轴文本标签，详见axis.axisLabel
|
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
|
color: 'auto'
|
}
|
},
|
splitLine: { // 分隔线
|
show: true, // 默认显示，属性show控制显示与否
|
length: 30, // 属性length控制线长
|
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
|
color: 'auto'
|
}
|
},
|
pointer: {
|
width: 5
|
},
|
title: {
|
show: false,
|
offsetCenter: [0, '-40%'], // x, y，单位px
|
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
|
fontWeight: 'bolder'
|
}
|
},
|
detail: {
|
formatter: '{value}%',
|
offsetCenter: [0, '60%'],
|
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
|
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: { // 属性lineStyle控制线条样式
|
color: [[0.2, '#228b22'], [0.8, '#48b'], [1, '#ff4500']],
|
width: 8
|
}
|
},
|
axisTick: { // 坐标轴小标记
|
splitNumber: 10, // 每份split细分多少段
|
length: 12, // 属性length控制线长
|
lineStyle: { // 属性lineStyle控制线条样式
|
color: 'auto'
|
}
|
},
|
axisLabel: { // 坐标轴文本标签，详见axis.axisLabel
|
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
|
color: 'auto'
|
}
|
},
|
splitLine: { // 分隔线
|
show: true, // 默认显示，属性show控制显示与否
|
length: 30, // 属性length控制线长
|
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
|
color: 'auto'
|
}
|
},
|
pointer: {
|
width: 5
|
},
|
title: {
|
show: false,
|
offsetCenter: [0, '-40%'], // x, y，单位px
|
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
|
fontWeight: 'bolder'
|
}
|
},
|
detail: {
|
formatter: '{value}%',
|
offsetCenter: [0, '60%'],
|
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
|
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: { // 属性lineStyle控制线条样式
|
color: [[0.2, '#228b22'], [0.8, '#48b'], [1, '#ff4500']],
|
width: 8
|
}
|
},
|
axisTick: { // 坐标轴小标记
|
splitNumber: 10, // 每份split细分多少段
|
length: 12, // 属性length控制线长
|
lineStyle: { // 属性lineStyle控制线条样式
|
color: 'auto'
|
}
|
},
|
axisLabel: { // 坐标轴文本标签，详见axis.axisLabel
|
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
|
color: 'auto'
|
}
|
},
|
splitLine: { // 分隔线
|
show: true, // 默认显示，属性show控制显示与否
|
length: 30, // 属性length控制线长
|
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
|
color: 'auto'
|
}
|
},
|
pointer: {
|
width: 5
|
},
|
title: {
|
show: false,
|
offsetCenter: [0, '-40%'], // x, y，单位px
|
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
|
fontWeight: 'bolder'
|
}
|
},
|
detail: {
|
formatter: '{value}%',
|
offsetCenter: [0, '60%'],
|
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
|
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: { // 属性lineStyle控制线条样式
|
color: [[0.2, '#228b22'], [0.8, '#48b'], [1, '#ff4500']],
|
width: 8
|
}
|
},
|
axisTick: { // 坐标轴小标记
|
splitNumber: 10, // 每份split细分多少段
|
length: 12, // 属性length控制线长
|
lineStyle: { // 属性lineStyle控制线条样式
|
color: 'auto'
|
}
|
},
|
axisLabel: { // 坐标轴文本标签，详见axis.axisLabel
|
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
|
color: 'auto'
|
}
|
},
|
splitLine: { // 分隔线
|
show: true, // 默认显示，属性show控制显示与否
|
length: 30, // 属性length控制线长
|
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
|
color: 'auto'
|
}
|
},
|
pointer: {
|
width: 5
|
},
|
title: {
|
show: false,
|
offsetCenter: [0, '-40%'], // x, y，单位px
|
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
|
fontWeight: 'bolder'
|
}
|
},
|
detail: {
|
formatter: '{value}%',
|
offsetCenter: [0, '60%'],
|
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
|
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: { // 属性lineStyle控制线条样式
|
color: [[0.2, '#228b22'], [0.8, '#48b'], [1, '#ff4500']],
|
width: 8
|
}
|
},
|
axisTick: { // 坐标轴小标记
|
splitNumber: 10, // 每份split细分多少段
|
length: 12, // 属性length控制线长
|
lineStyle: { // 属性lineStyle控制线条样式
|
color: 'auto'
|
}
|
},
|
axisLabel: { // 坐标轴文本标签，详见axis.axisLabel
|
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
|
color: 'auto'
|
}
|
},
|
splitLine: { // 分隔线
|
show: true, // 默认显示，属性show控制显示与否
|
length: 30, // 属性length控制线长
|
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
|
color: 'auto'
|
}
|
},
|
pointer: {
|
width: 5
|
},
|
title: {
|
show: false,
|
offsetCenter: [0, '-40%'], // x, y，单位px
|
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
|
fontWeight: 'bolder'
|
}
|
},
|
detail: {
|
formatter: '{value}%',
|
offsetCenter: [0, '60%'],
|
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
|
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 lang="less" scoped>
|
.outer-container {
|
height: 100%;
|
overflow: auto;
|
|
> div {
|
height: 320px;
|
display: flex;
|
flex-direction: column
|
}
|
|
.div-inline {
|
width: 20%;
|
height: 100%;
|
}
|
}
|
</style>
|
