|
|
@ -1,9 +1,16 @@
|
|
|
|
<template>
|
|
|
|
<template>
|
|
|
|
<div class="app-container">
|
|
|
|
<div class="app-container">
|
|
|
|
<div class="headTitle">箱、门匹配生产数据监控平台</div>
|
|
|
|
<div class="headTitle">箱、门匹配生产数据监控平台</div>
|
|
|
|
<div class="topNum planNum">{{ planNum }}</div>
|
|
|
|
<div class="topNum planNum">{{
|
|
|
|
<div class="topNum practicalNum">{{ practicalNum }}</div>
|
|
|
|
planNum.toString().split('').concat(['0', '0', '0', '0']).slice(0, 4).join('')
|
|
|
|
<div class="topNum differenceValue">{{ differenceValue }}</div>
|
|
|
|
}}
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="topNum practicalNum">
|
|
|
|
|
|
|
|
{{ practicalNum.toString().split('').concat(['0', '0', '0', '0']).slice(0, 4).join('') }}
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="topNum differenceValue">
|
|
|
|
|
|
|
|
{{ (practicalNum - planNum).toString().split('').concat(['0', '0', '0', '0']).slice(0, 4).join('') }}
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<div class="title" v-for="(i,k) in title"
|
|
|
|
<div class="title" v-for="(i,k) in title"
|
|
|
|
:style="'top:'+(titlePosition[k]&&titlePosition[k].top||0)+'%;left:'+(titlePosition[k]&&titlePosition[k].left||0)+'%'">
|
|
|
|
:style="'top:'+(titlePosition[k]&&titlePosition[k].top||0)+'%;left:'+(titlePosition[k]&&titlePosition[k].left||0)+'%'">
|
|
|
|
{{ i }}
|
|
|
|
{{ i }}
|
|
|
@ -23,10 +30,14 @@
|
|
|
|
<div class="supplementInfo">注射压力标准范围:10.0-14.0Mpa A、B组份枪头压力差<1Mpa</div>
|
|
|
|
<div class="supplementInfo">注射压力标准范围:10.0-14.0Mpa A、B组份枪头压力差<1Mpa</div>
|
|
|
|
<div class="supplementInfo1">发泡料温度标准范围:18.0-24.0℃</div>
|
|
|
|
<div class="supplementInfo1">发泡料温度标准范围:18.0-24.0℃</div>
|
|
|
|
<div style="position: absolute;top: 62%; left: 40%;color:#FFF">
|
|
|
|
<div style="position: absolute;top: 62%; left: 40%;color:#FFF">
|
|
|
|
<div style="width: 12px;height: 12px;background-color: #1be409;display: inline-block;margin: 0 8px;"></div> 启用
|
|
|
|
<div style="width: 12px;height: 12px;background-color: #1be409;display: inline-block;margin: 0 8px;"></div>
|
|
|
|
<div style="width: 12px;height: 12px;background-color: #8a8e96;display: inline-block;margin: 0 8px;"></div>停用
|
|
|
|
启用
|
|
|
|
<div style="width: 12px;height: 12px;background-color: #ff0000;display: inline-block;margin: 0 8px;"></div> 注料位
|
|
|
|
<div style="width: 12px;height: 12px;background-color: #8a8e96;display: inline-block;margin: 0 8px;"></div>
|
|
|
|
<div style="width: 12px;height: 12px;background-color: #ff8000;display: inline-block;margin: 0 8px;"></div>出模位
|
|
|
|
停用
|
|
|
|
|
|
|
|
<div style="width: 12px;height: 12px;background-color: #ff0000;display: inline-block;margin: 0 8px;"></div>
|
|
|
|
|
|
|
|
注料位
|
|
|
|
|
|
|
|
<div style="width: 12px;height: 12px;background-color: #ff8000;display: inline-block;margin: 0 8px;"></div>
|
|
|
|
|
|
|
|
出模位
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="scrollTable">
|
|
|
|
<div class="scrollTable">
|
|
|
@ -76,11 +87,11 @@
|
|
|
|
<div style="width: 33%;display: inline-block">型号</div>
|
|
|
|
<div style="width: 33%;display: inline-block">型号</div>
|
|
|
|
<div style="width: 33%;display: inline-block">产量</div>
|
|
|
|
<div style="width: 33%;display: inline-block">产量</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div v-for="i in 10"
|
|
|
|
<div v-for="i in bottomTableData.slice(0,10)"
|
|
|
|
:style="'margin-bottom:2px;height: calc(9% - 2px);line-height:calc(2.6vh - 2px);color: '+ (i === 2 ? '#bed4ce' : '#1be409')+';text-align: center;background-color:' + (i === 2 ? '#053460' : '#053460')">
|
|
|
|
:style="'margin-bottom:2px;height: calc(9% - 2px);line-height:calc(2.6vh - 2px);color: '+ setColor(i.value5)+';text-align: center;background-color:' + (i === 2 ? '#053460' : '#053460')">
|
|
|
|
<div style="width: 33%;display: inline-block">{{ i }}</div>
|
|
|
|
<div style="width: 33%;display: inline-block">{{ i.value1 }}</div>
|
|
|
|
<div style="width: 33%;display: inline-block">487JFY</div>
|
|
|
|
<div style="width: 33%;display: inline-block">{{ i.value2 }}</div>
|
|
|
|
<div style="width: 33%;display: inline-block">15-15</div>
|
|
|
|
<div style="width: 33%;display: inline-block">{{ i.value3 }}-{{ i.value4 }}</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="tableTwo">
|
|
|
|
<div class="tableTwo">
|
|
|
@ -89,11 +100,11 @@
|
|
|
|
<div style="width: 33%;display: inline-block">型号</div>
|
|
|
|
<div style="width: 33%;display: inline-block">型号</div>
|
|
|
|
<div style="width: 33%;display: inline-block">产量</div>
|
|
|
|
<div style="width: 33%;display: inline-block">产量</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div v-for="i in 10"
|
|
|
|
<div v-for="i in bottomTableData.slice(10,20)"
|
|
|
|
:style="'margin-bottom:2px;height: calc(9% - 2px);line-height:calc(2.6vh - 2px);color:'+ (i === 2 ? '#ff5959' : '#1be409')+';text-align: center;background-color:' + (i === 2 ? '#053460' : '#053460')">
|
|
|
|
:style="'margin-bottom:2px;height: calc(9% - 2px);line-height:calc(2.6vh - 2px);color:'+ setColor(i.value5)+';text-align: center;background-color:' + (i === 2 ? '#053460' : '#053460')">
|
|
|
|
<div style="width: 33%;display: inline-block">{{ i }}</div>
|
|
|
|
<div style="width: 33%;display: inline-block">{{ i.value1 }}</div>
|
|
|
|
<div style="width: 33%;display: inline-block">487JFY</div>
|
|
|
|
<div style="width: 33%;display: inline-block">{{ i.value2 }}</div>
|
|
|
|
<div style="width: 33%;display: inline-block">15-15</div>
|
|
|
|
<div style="width: 33%;display: inline-block">{{ i.value3 }}-{{ i.value4 }}</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="tableThree">
|
|
|
|
<div class="tableThree">
|
|
|
@ -102,11 +113,11 @@
|
|
|
|
<div style="width: 33%;display: inline-block">型号</div>
|
|
|
|
<div style="width: 33%;display: inline-block">型号</div>
|
|
|
|
<div style="width: 33%;display: inline-block">产量</div>
|
|
|
|
<div style="width: 33%;display: inline-block">产量</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div v-for="i in 10"
|
|
|
|
<div v-for="i in bottomTableData.slice(20,30)"
|
|
|
|
:style="'margin-bottom:2px;height: calc(9% - 2px);line-height:calc(2.6vh - 2px);color:'+ (i === 2 ? '#ffb769' : '#1be409')+';text-align: center;background-color:' + (i === 2 ? '#053460' : '#053460')">
|
|
|
|
:style="'margin-bottom:2px;height: calc(9% - 2px);line-height:calc(2.6vh - 2px);color:'+ setColor(i.value5)+';text-align: center;background-color:' + (i === 2 ? '#053460' : '#053460')">
|
|
|
|
<div style="width: 33%;display: inline-block">{{ i }}</div>
|
|
|
|
<div style="width: 33%;display: inline-block">{{ i.value1 }}</div>
|
|
|
|
<div style="width: 33%;display: inline-block">487JFY</div>
|
|
|
|
<div style="width: 33%;display: inline-block">{{ i.value2 }}</div>
|
|
|
|
<div style="width: 33%;display: inline-block">15-15</div>
|
|
|
|
<div style="width: 33%;display: inline-block">{{ i.value3 }}-{{ i.value4 }}</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="tableFour">
|
|
|
|
<div class="tableFour">
|
|
|
@ -115,11 +126,11 @@
|
|
|
|
<div style="width: 33%;display: inline-block">型号</div>
|
|
|
|
<div style="width: 33%;display: inline-block">型号</div>
|
|
|
|
<div style="width: 33%;display: inline-block">产量</div>
|
|
|
|
<div style="width: 33%;display: inline-block">产量</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div v-for="i in 10"
|
|
|
|
<div v-for="i in bottomTableData.slice(30,40)"
|
|
|
|
:style="'margin-bottom:2px;height: calc(9% - 2px);line-height:calc(2.6vh - 2px);color:'+ (i === 2 ? '#bed4ce' : '#1be409')+';text-align: center;background-color:' + (i === 2 ? '#053460' : '#053460')">
|
|
|
|
:style="'margin-bottom:2px;height: calc(9% - 2px);line-height:calc(2.6vh - 2px);color:'+ setColor(i.value5)+';text-align: center;background-color:' + (i === 2 ? '#053460' : '#053460')">
|
|
|
|
<div style="width: 33%;display: inline-block">{{ i }}</div>
|
|
|
|
<div style="width: 33%;display: inline-block">{{ i.value1 }}</div>
|
|
|
|
<div style="width: 33%;display: inline-block">487JFY</div>
|
|
|
|
<div style="width: 33%;display: inline-block">{{ i.value2 }}</div>
|
|
|
|
<div style="width: 33%;display: inline-block">15-15</div>
|
|
|
|
<div style="width: 33%;display: inline-block">{{ i.value3 }}-{{ i.value4 }}</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
@ -130,6 +141,7 @@ import vueSeamlessScroll from "vue-seamless-scroll";
|
|
|
|
import Chart from "../../../components/board/Chart";
|
|
|
|
import Chart from "../../../components/board/Chart";
|
|
|
|
import * as echarts from 'echarts'
|
|
|
|
import * as echarts from 'echarts'
|
|
|
|
import {getData} from "@/api/board/getData";
|
|
|
|
import {getData} from "@/api/board/getData";
|
|
|
|
|
|
|
|
import {mixData} from "@/api/board/mixData";
|
|
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
export default {
|
|
|
|
components: {
|
|
|
|
components: {
|
|
|
@ -188,15 +200,20 @@ export default {
|
|
|
|
waitTime: 0,
|
|
|
|
waitTime: 0,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
scrollTableData: [],
|
|
|
|
scrollTableData: [],
|
|
|
|
|
|
|
|
bottomTableData: [],
|
|
|
|
|
|
|
|
RequestDataSet: [
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
e: 'xm-01',
|
|
|
|
|
|
|
|
i: "",
|
|
|
|
|
|
|
|
f: (e) => {
|
|
|
|
|
|
|
|
this.scrollTableData = e
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
mounted() {
|
|
|
|
{
|
|
|
|
let timeInter = setInterval(() => {
|
|
|
|
e: 'xm-02',
|
|
|
|
this.show = (this.show + 1) % 4
|
|
|
|
i: "",
|
|
|
|
}, 10 * 1000)
|
|
|
|
f: (e) => {
|
|
|
|
getData().then(e => {
|
|
|
|
this.$refs.chart2.setData({
|
|
|
|
this.scrollTableData = e.table33
|
|
|
|
|
|
|
|
this.$refs.chart1.setData({
|
|
|
|
|
|
|
|
tooltip: {
|
|
|
|
tooltip: {
|
|
|
|
trigger: "axis",
|
|
|
|
trigger: "axis",
|
|
|
|
axisPointer: {
|
|
|
|
axisPointer: {
|
|
|
@ -207,31 +224,20 @@ export default {
|
|
|
|
grid: {
|
|
|
|
grid: {
|
|
|
|
left: "0",
|
|
|
|
left: "0",
|
|
|
|
right: "4%",
|
|
|
|
right: "4%",
|
|
|
|
bottom: "0",
|
|
|
|
bottom: 0,
|
|
|
|
top: 35,
|
|
|
|
top: 20,
|
|
|
|
containLabel: true,
|
|
|
|
containLabel: true,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
legend: {
|
|
|
|
|
|
|
|
data: e.chart5.y.map(val => val.name),
|
|
|
|
|
|
|
|
right: 'center',
|
|
|
|
|
|
|
|
top: 0,
|
|
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
|
|
color: "#fff",
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
itemWidth: 12,
|
|
|
|
|
|
|
|
itemHeight: 10,
|
|
|
|
|
|
|
|
// itemGap: 35
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
xAxis: {
|
|
|
|
xAxis: {
|
|
|
|
type: "category",
|
|
|
|
type: "category",
|
|
|
|
data: e.chart5.x,
|
|
|
|
data: e.x,
|
|
|
|
axisLine: {
|
|
|
|
axisLine: {
|
|
|
|
lineStyle: {
|
|
|
|
lineStyle: {
|
|
|
|
color: "white",
|
|
|
|
color: "white",
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
axisLabel: {
|
|
|
|
axisLabel: {
|
|
|
|
// interval: 0,
|
|
|
|
interval: 0,
|
|
|
|
// rotate: 40,
|
|
|
|
// rotate: 40,
|
|
|
|
textStyle: {
|
|
|
|
textStyle: {
|
|
|
|
fontFamily: "Microsoft YaHei",
|
|
|
|
fontFamily: "Microsoft YaHei",
|
|
|
@ -254,38 +260,9 @@ export default {
|
|
|
|
},
|
|
|
|
},
|
|
|
|
series: [
|
|
|
|
series: [
|
|
|
|
{
|
|
|
|
{
|
|
|
|
name: e.chart5.y[0].name,
|
|
|
|
name: e.y.name,
|
|
|
|
type: "bar",
|
|
|
|
type: "bar",
|
|
|
|
barWidth: "30%",
|
|
|
|
barWidth: "40%",
|
|
|
|
label: {
|
|
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
|
|
position: "top",
|
|
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
|
|
color: "#49d9ff",
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
|
|
normal: {
|
|
|
|
|
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
offset: 0,
|
|
|
|
|
|
|
|
color: "#39ffff",
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
offset: 1,
|
|
|
|
|
|
|
|
color: "#f5804d",
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
]),
|
|
|
|
|
|
|
|
borderRadius: 2,
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
data: e.chart5.y[0].data,
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
name: e.chart5.y[1].name,
|
|
|
|
|
|
|
|
type: "bar",
|
|
|
|
|
|
|
|
barWidth: "30%",
|
|
|
|
|
|
|
|
barGap: '40%',
|
|
|
|
|
|
|
|
label: {
|
|
|
|
label: {
|
|
|
|
show: true,
|
|
|
|
show: true,
|
|
|
|
position: "top",
|
|
|
|
position: "top",
|
|
|
@ -305,14 +282,20 @@ export default {
|
|
|
|
color: "#3e8aff",
|
|
|
|
color: "#3e8aff",
|
|
|
|
},
|
|
|
|
},
|
|
|
|
]),
|
|
|
|
]),
|
|
|
|
borderRadius: 2,
|
|
|
|
borderRadius: 3,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
data: e.chart5.y[1].data,
|
|
|
|
data: e.y.data,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
],
|
|
|
|
],
|
|
|
|
})
|
|
|
|
})
|
|
|
|
this.$refs.chart2.setData({
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
e: 'xm-03',
|
|
|
|
|
|
|
|
i: "",
|
|
|
|
|
|
|
|
f: (e) => {
|
|
|
|
|
|
|
|
this.$refs.chart1.setData({
|
|
|
|
tooltip: {
|
|
|
|
tooltip: {
|
|
|
|
trigger: "axis",
|
|
|
|
trigger: "axis",
|
|
|
|
axisPointer: {
|
|
|
|
axisPointer: {
|
|
|
@ -323,20 +306,31 @@ export default {
|
|
|
|
grid: {
|
|
|
|
grid: {
|
|
|
|
left: "0",
|
|
|
|
left: "0",
|
|
|
|
right: "4%",
|
|
|
|
right: "4%",
|
|
|
|
bottom: 0,
|
|
|
|
bottom: "0",
|
|
|
|
top: 20,
|
|
|
|
top: 35,
|
|
|
|
containLabel: true,
|
|
|
|
containLabel: true,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
legend: {
|
|
|
|
|
|
|
|
data: e.y.map(val => val.name),
|
|
|
|
|
|
|
|
right: 'center',
|
|
|
|
|
|
|
|
top: 0,
|
|
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
|
|
color: "#fff",
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
itemWidth: 12,
|
|
|
|
|
|
|
|
itemHeight: 10,
|
|
|
|
|
|
|
|
// itemGap: 35
|
|
|
|
|
|
|
|
},
|
|
|
|
xAxis: {
|
|
|
|
xAxis: {
|
|
|
|
type: "category",
|
|
|
|
type: "category",
|
|
|
|
data: e.chart3.x,
|
|
|
|
data: e.x,
|
|
|
|
axisLine: {
|
|
|
|
axisLine: {
|
|
|
|
lineStyle: {
|
|
|
|
lineStyle: {
|
|
|
|
color: "white",
|
|
|
|
color: "white",
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
axisLabel: {
|
|
|
|
axisLabel: {
|
|
|
|
interval: 0,
|
|
|
|
// interval: 0,
|
|
|
|
// rotate: 40,
|
|
|
|
// rotate: 40,
|
|
|
|
textStyle: {
|
|
|
|
textStyle: {
|
|
|
|
fontFamily: "Microsoft YaHei",
|
|
|
|
fontFamily: "Microsoft YaHei",
|
|
|
@ -359,9 +353,38 @@ export default {
|
|
|
|
},
|
|
|
|
},
|
|
|
|
series: [
|
|
|
|
series: [
|
|
|
|
{
|
|
|
|
{
|
|
|
|
name: e.chart3.y.name,
|
|
|
|
name: e.y[0].name,
|
|
|
|
type: "bar",
|
|
|
|
type: "bar",
|
|
|
|
barWidth: "40%",
|
|
|
|
barWidth: "30%",
|
|
|
|
|
|
|
|
label: {
|
|
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
|
|
position: "top",
|
|
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
|
|
color: "#49d9ff",
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
|
|
normal: {
|
|
|
|
|
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
offset: 0,
|
|
|
|
|
|
|
|
color: "#39ffff",
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
offset: 1,
|
|
|
|
|
|
|
|
color: "#f5804d",
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
]),
|
|
|
|
|
|
|
|
borderRadius: 2,
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
data: e.y[0].data,
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
name: e.y[1].name,
|
|
|
|
|
|
|
|
type: "bar",
|
|
|
|
|
|
|
|
barWidth: "30%",
|
|
|
|
|
|
|
|
barGap: '40%',
|
|
|
|
label: {
|
|
|
|
label: {
|
|
|
|
show: true,
|
|
|
|
show: true,
|
|
|
|
position: "top",
|
|
|
|
position: "top",
|
|
|
@ -381,16 +404,22 @@ export default {
|
|
|
|
color: "#3e8aff",
|
|
|
|
color: "#3e8aff",
|
|
|
|
},
|
|
|
|
},
|
|
|
|
]),
|
|
|
|
]),
|
|
|
|
borderRadius: 3,
|
|
|
|
borderRadius: 2,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
data: e.chart3.y.data,
|
|
|
|
data: e.y[1].data,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
],
|
|
|
|
],
|
|
|
|
})
|
|
|
|
})
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
e: 'xm-04',
|
|
|
|
|
|
|
|
i: "",
|
|
|
|
|
|
|
|
f: (e) => {
|
|
|
|
this.$refs.chart3.setData({
|
|
|
|
this.$refs.chart3.setData({
|
|
|
|
legend: {
|
|
|
|
legend: {
|
|
|
|
data: e.chart6.y.map(val => val.name),
|
|
|
|
data: e.y.map(val => val.name),
|
|
|
|
right: 'center',
|
|
|
|
right: 'center',
|
|
|
|
top: 0,
|
|
|
|
top: 0,
|
|
|
|
textStyle: {
|
|
|
|
textStyle: {
|
|
|
@ -457,7 +486,7 @@ export default {
|
|
|
|
show: false,
|
|
|
|
show: false,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
boundaryGap: false,
|
|
|
|
boundaryGap: false,
|
|
|
|
data: e.chart6.x,
|
|
|
|
data: e.x,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
],
|
|
|
|
],
|
|
|
|
|
|
|
|
|
|
|
@ -490,7 +519,7 @@ export default {
|
|
|
|
],
|
|
|
|
],
|
|
|
|
series: [
|
|
|
|
series: [
|
|
|
|
{
|
|
|
|
{
|
|
|
|
name: e.chart6.y[0].name,
|
|
|
|
name: e.y[0].name,
|
|
|
|
type: "line",
|
|
|
|
type: "line",
|
|
|
|
showAllSymbol: true,
|
|
|
|
showAllSymbol: true,
|
|
|
|
symbol: "circle",
|
|
|
|
symbol: "circle",
|
|
|
@ -533,10 +562,10 @@ export default {
|
|
|
|
shadowBlur: 20,
|
|
|
|
shadowBlur: 20,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
data: e.chart6.y[0].data,
|
|
|
|
data: e.y[0].data,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
name: e.chart6.y[1].name,
|
|
|
|
name: e.y[1].name,
|
|
|
|
type: "line",
|
|
|
|
type: "line",
|
|
|
|
// smooth: true, //是否平滑
|
|
|
|
// smooth: true, //是否平滑
|
|
|
|
showAllSymbol: true,
|
|
|
|
showAllSymbol: true,
|
|
|
@ -582,10 +611,16 @@ export default {
|
|
|
|
shadowBlur: 20,
|
|
|
|
shadowBlur: 20,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
data: e.chart6.y[1].data,
|
|
|
|
data: e.y[1].data,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
],
|
|
|
|
],
|
|
|
|
})
|
|
|
|
})
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
e: 'xm-05',
|
|
|
|
|
|
|
|
i: "",
|
|
|
|
|
|
|
|
f: (e) => {
|
|
|
|
this.$refs.chart4.setData({
|
|
|
|
this.$refs.chart4.setData({
|
|
|
|
tooltip: {
|
|
|
|
tooltip: {
|
|
|
|
trigger: "axis",
|
|
|
|
trigger: "axis",
|
|
|
@ -603,7 +638,7 @@ export default {
|
|
|
|
},
|
|
|
|
},
|
|
|
|
xAxis: {
|
|
|
|
xAxis: {
|
|
|
|
type: "category",
|
|
|
|
type: "category",
|
|
|
|
data: e.chart3.x,
|
|
|
|
data: e.x,
|
|
|
|
axisLine: {
|
|
|
|
axisLine: {
|
|
|
|
lineStyle: {
|
|
|
|
lineStyle: {
|
|
|
|
color: "white",
|
|
|
|
color: "white",
|
|
|
@ -632,7 +667,7 @@ export default {
|
|
|
|
},
|
|
|
|
},
|
|
|
|
series: [
|
|
|
|
series: [
|
|
|
|
{
|
|
|
|
{
|
|
|
|
name: e.chart3.y.name,
|
|
|
|
name: e.y.name,
|
|
|
|
type: "bar",
|
|
|
|
type: "bar",
|
|
|
|
barWidth: "33%",
|
|
|
|
barWidth: "33%",
|
|
|
|
label: {
|
|
|
|
label: {
|
|
|
@ -657,13 +692,69 @@ export default {
|
|
|
|
borderRadius: 2,
|
|
|
|
borderRadius: 2,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
data: e.chart3.y.data,
|
|
|
|
data: e.y.data,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
],
|
|
|
|
],
|
|
|
|
})
|
|
|
|
})
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
e: 'xm-06',
|
|
|
|
|
|
|
|
i: "",
|
|
|
|
|
|
|
|
f: (e) => {
|
|
|
|
|
|
|
|
this.bottomTableData = e
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
e: 'xm-07',
|
|
|
|
|
|
|
|
i: "SCADA_INV_STATS_01('')",
|
|
|
|
|
|
|
|
f: (e) => {
|
|
|
|
|
|
|
|
this.planNum = e.db
|
|
|
|
|
|
|
|
this.practicalNum = e.sj
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
e: 'xm-08',
|
|
|
|
|
|
|
|
i: "SCADA_INV_STATS_SUM('')",
|
|
|
|
|
|
|
|
f: (e) => {
|
|
|
|
|
|
|
|
// this.linerNum = e
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
e: 'xm-09',
|
|
|
|
|
|
|
|
i: "",
|
|
|
|
|
|
|
|
f: (e) => {
|
|
|
|
|
|
|
|
// this.caseNum = e
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
]
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
mounted() {
|
|
|
|
|
|
|
|
let timeInter = setInterval(() => {
|
|
|
|
|
|
|
|
this.show = (this.show + 1) % 4
|
|
|
|
|
|
|
|
}, 10 * 1000)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
this.RequestDataSet.forEach(val => {
|
|
|
|
|
|
|
|
mixData(val)
|
|
|
|
})
|
|
|
|
})
|
|
|
|
},
|
|
|
|
},
|
|
|
|
methods: {}
|
|
|
|
methods: {
|
|
|
|
|
|
|
|
setColor: (e) => {
|
|
|
|
|
|
|
|
if (e === '0') {
|
|
|
|
|
|
|
|
return '#1be409'
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
if (e === '1') {
|
|
|
|
|
|
|
|
return '#bed4ce'
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
if (e === '2') {
|
|
|
|
|
|
|
|
return '#ff5959'
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
if (e === '3') {
|
|
|
|
|
|
|
|
return '#ffb769'
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
};
|
|
|
|
};
|
|
|
|
</script>
|
|
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
<style scoped>
|
|
|
@ -678,6 +769,7 @@ export default {
|
|
|
|
width: 36vw;
|
|
|
|
width: 36vw;
|
|
|
|
height: 12vw;
|
|
|
|
height: 12vw;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.app-container {
|
|
|
|
.app-container {
|
|
|
|
background-image: url("../../../assets/board/foaming1.jpg");
|
|
|
|
background-image: url("../../../assets/board/foaming1.jpg");
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
background-repeat: no-repeat;
|
|
|
@ -860,6 +952,7 @@ export default {
|
|
|
|
width: 16.8%;
|
|
|
|
width: 16.8%;
|
|
|
|
height: 29%;
|
|
|
|
height: 29%;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.title {
|
|
|
|
.title {
|
|
|
|
position: absolute;
|
|
|
|
position: absolute;
|
|
|
|
transform: translateY(-50%);
|
|
|
|
transform: translateY(-50%);
|
|
|
|