|
|
|
|
@ -1,9 +1,16 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div class="app-container">
|
|
|
|
|
<div class="headTitle">箱体发泡生产数据监控平台</div>
|
|
|
|
|
<div class="topNum planNum">{{ planNum }}</div>
|
|
|
|
|
<div class="topNum practicalNum">{{ practicalNum }}</div>
|
|
|
|
|
<div class="topNum differenceValue">{{ differenceValue }}</div>
|
|
|
|
|
<div class="topNum planNum">{{
|
|
|
|
|
planNum.toString().split('').concat(['0', '0', '0', '0']).slice(0, 4).join('')
|
|
|
|
|
}}
|
|
|
|
|
</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"
|
|
|
|
|
:style="'top:'+(titlePosition[k]&&titlePosition[k].top||0)+'%;left:'+(titlePosition[k]&&titlePosition[k].left||0)+'%'">
|
|
|
|
|
{{ i }}
|
|
|
|
|
@ -461,6 +468,7 @@ import vueSeamlessScroll from "vue-seamless-scroll";
|
|
|
|
|
import Chart from "../../../components/board/Chart";
|
|
|
|
|
import * as echarts from 'echarts'
|
|
|
|
|
import {getData} from "@/api/board/getData";
|
|
|
|
|
import {mixData} from "@/api/board/mixData";
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
components: {
|
|
|
|
|
@ -471,9 +479,8 @@ export default {
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
show: true,
|
|
|
|
|
planNum: 1000,
|
|
|
|
|
practicalNum: 1000,
|
|
|
|
|
differenceValue: 1000,
|
|
|
|
|
planNum: 0,
|
|
|
|
|
practicalNum: 0,
|
|
|
|
|
title: [
|
|
|
|
|
'生产计划',
|
|
|
|
|
'生产统计',
|
|
|
|
|
@ -521,17 +528,34 @@ export default {
|
|
|
|
|
scrollTableData: [],
|
|
|
|
|
scrollTableData1: [],
|
|
|
|
|
scrollTableData2: [],
|
|
|
|
|
|
|
|
|
|
RequestDataSet: [
|
|
|
|
|
{
|
|
|
|
|
e: 'fp-1-01',
|
|
|
|
|
i: "",
|
|
|
|
|
f: (e) => {
|
|
|
|
|
this.planNum = e
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
let timeInter = setInterval(() => {
|
|
|
|
|
this.show = !this.show
|
|
|
|
|
}, 30 * 1000)
|
|
|
|
|
getData().then(e => {
|
|
|
|
|
this.scrollTableData = e.table2
|
|
|
|
|
this.scrollTableData1 = e.table3.slice(0,6)
|
|
|
|
|
this.scrollTableData2 = e.table32.slice(0,6)
|
|
|
|
|
this.$refs.chart1.setData({
|
|
|
|
|
{
|
|
|
|
|
e: 'fp-1-02',
|
|
|
|
|
i: "",
|
|
|
|
|
f: (e) => {
|
|
|
|
|
this.practicalNum = e
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
e: 'fp-1-03',
|
|
|
|
|
i: "",
|
|
|
|
|
f: (e) => {
|
|
|
|
|
this.scrollTableData = e
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
e: 'fp-1-04',
|
|
|
|
|
i: "",
|
|
|
|
|
f: (e) => {
|
|
|
|
|
this.$refs.chart2.setData({
|
|
|
|
|
tooltip: {
|
|
|
|
|
trigger: "axis",
|
|
|
|
|
axisPointer: {
|
|
|
|
|
@ -542,31 +566,20 @@ export default {
|
|
|
|
|
grid: {
|
|
|
|
|
left: "0",
|
|
|
|
|
right: "4%",
|
|
|
|
|
bottom: "0",
|
|
|
|
|
top: 35,
|
|
|
|
|
bottom: 0,
|
|
|
|
|
top: 20,
|
|
|
|
|
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: {
|
|
|
|
|
type: "category",
|
|
|
|
|
data: e.chart5.x,
|
|
|
|
|
data: e.x,
|
|
|
|
|
axisLine: {
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: "white",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
axisLabel: {
|
|
|
|
|
// interval: 0,
|
|
|
|
|
interval: 0,
|
|
|
|
|
// rotate: 40,
|
|
|
|
|
textStyle: {
|
|
|
|
|
fontFamily: "Microsoft YaHei",
|
|
|
|
|
@ -589,38 +602,9 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
name: e.chart5.y[0].name,
|
|
|
|
|
type: "bar",
|
|
|
|
|
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.chart5.y[0].data,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: e.chart5.y[1].name,
|
|
|
|
|
name: e.y.name,
|
|
|
|
|
type: "bar",
|
|
|
|
|
barWidth: "30%",
|
|
|
|
|
barGap: '40%',
|
|
|
|
|
barWidth: "40%",
|
|
|
|
|
label: {
|
|
|
|
|
show: true,
|
|
|
|
|
position: "top",
|
|
|
|
|
@ -640,14 +624,30 @@ export default {
|
|
|
|
|
color: "#3e8aff",
|
|
|
|
|
},
|
|
|
|
|
]),
|
|
|
|
|
borderRadius: 2,
|
|
|
|
|
borderRadius: 3,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
data: e.chart5.y[1].data,
|
|
|
|
|
data: e.y.data,
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
})
|
|
|
|
|
this.$refs.chart2.setData({
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
e: 'fp-1-05',
|
|
|
|
|
i: "SCADA_INV_STATS_01('')",
|
|
|
|
|
f: (e) => {
|
|
|
|
|
getData().then(val => {
|
|
|
|
|
this.scrollTableData1 = val.table3.slice(0, 6)
|
|
|
|
|
this.scrollTableData2 = val.table3.slice(6, 12)
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
e: 'fp-1-06',
|
|
|
|
|
i: "",
|
|
|
|
|
f: (e) => {
|
|
|
|
|
this.$refs.chart1.setData({
|
|
|
|
|
tooltip: {
|
|
|
|
|
trigger: "axis",
|
|
|
|
|
axisPointer: {
|
|
|
|
|
@ -658,20 +658,31 @@ export default {
|
|
|
|
|
grid: {
|
|
|
|
|
left: "0",
|
|
|
|
|
right: "4%",
|
|
|
|
|
bottom: 0,
|
|
|
|
|
top: 20,
|
|
|
|
|
bottom: "0",
|
|
|
|
|
top: 35,
|
|
|
|
|
containLabel: true,
|
|
|
|
|
},
|
|
|
|
|
legend: {
|
|
|
|
|
data: e.y.map(val => val.name),
|
|
|
|
|
right: 'center',
|
|
|
|
|
top: 0,
|
|
|
|
|
textStyle: {
|
|
|
|
|
color: "#fff",
|
|
|
|
|
},
|
|
|
|
|
itemWidth: 12,
|
|
|
|
|
itemHeight: 10,
|
|
|
|
|
// itemGap: 35
|
|
|
|
|
},
|
|
|
|
|
xAxis: {
|
|
|
|
|
type: "category",
|
|
|
|
|
data: e.chart3.x,
|
|
|
|
|
data: e.x,
|
|
|
|
|
axisLine: {
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: "white",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
axisLabel: {
|
|
|
|
|
interval: 0,
|
|
|
|
|
// interval: 0,
|
|
|
|
|
// rotate: 40,
|
|
|
|
|
textStyle: {
|
|
|
|
|
fontFamily: "Microsoft YaHei",
|
|
|
|
|
@ -694,9 +705,38 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
name: e.chart3.y.name,
|
|
|
|
|
name: e.y[0].name,
|
|
|
|
|
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: {
|
|
|
|
|
show: true,
|
|
|
|
|
position: "top",
|
|
|
|
|
@ -716,16 +756,22 @@ export default {
|
|
|
|
|
color: "#3e8aff",
|
|
|
|
|
},
|
|
|
|
|
]),
|
|
|
|
|
borderRadius: 3,
|
|
|
|
|
borderRadius: 2,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
data: e.chart3.y.data,
|
|
|
|
|
data: e.y[1].data,
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
e: 'fp-1-07',
|
|
|
|
|
i: "",
|
|
|
|
|
f: (e) => {
|
|
|
|
|
this.$refs.chart3.setData({
|
|
|
|
|
legend: {
|
|
|
|
|
data: e.chart6.y.map(val => val.name),
|
|
|
|
|
data: e.y.map(val => val.name),
|
|
|
|
|
right: 'center',
|
|
|
|
|
top: 0,
|
|
|
|
|
textStyle: {
|
|
|
|
|
@ -792,7 +838,7 @@ export default {
|
|
|
|
|
show: false,
|
|
|
|
|
},
|
|
|
|
|
boundaryGap: false,
|
|
|
|
|
data: e.chart6.x,
|
|
|
|
|
data: e.x,
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
|
|
|
|
|
@ -825,7 +871,7 @@ export default {
|
|
|
|
|
],
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
name: e.chart6.y[0].name,
|
|
|
|
|
name: e.y[0].name,
|
|
|
|
|
type: "line",
|
|
|
|
|
showAllSymbol: true,
|
|
|
|
|
symbol: "circle",
|
|
|
|
|
@ -868,10 +914,10 @@ export default {
|
|
|
|
|
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",
|
|
|
|
|
// smooth: true, //是否平滑
|
|
|
|
|
showAllSymbol: true,
|
|
|
|
|
@ -917,10 +963,16 @@ export default {
|
|
|
|
|
shadowBlur: 20,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
data: e.chart6.y[1].data,
|
|
|
|
|
data: e.y[1].data,
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
e: 'fp-1-08',
|
|
|
|
|
i: "",
|
|
|
|
|
f: (e) => {
|
|
|
|
|
this.$refs.chart4.setData({
|
|
|
|
|
tooltip: {
|
|
|
|
|
trigger: "axis",
|
|
|
|
|
@ -938,7 +990,7 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
xAxis: {
|
|
|
|
|
type: "category",
|
|
|
|
|
data: e.chart3.x,
|
|
|
|
|
data: e.x,
|
|
|
|
|
axisLine: {
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: "white",
|
|
|
|
|
@ -968,7 +1020,7 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
name: e.chart3.y.name,
|
|
|
|
|
name: e.y.name,
|
|
|
|
|
type: "bar",
|
|
|
|
|
barWidth: "33%",
|
|
|
|
|
label: {
|
|
|
|
|
@ -993,34 +1045,582 @@ export default {
|
|
|
|
|
borderRadius: 2,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
data: e.chart3.y.data,
|
|
|
|
|
data: e.y.data,
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
methods: {}
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
<style scoped>
|
|
|
|
|
.title {
|
|
|
|
|
position: absolute;
|
|
|
|
|
transform: translateY(-50%);
|
|
|
|
|
color: #dddddd;
|
|
|
|
|
font-size: 1vw;
|
|
|
|
|
letter-spacing: 2px;
|
|
|
|
|
],
|
|
|
|
|
RequestDataSet1: [
|
|
|
|
|
{
|
|
|
|
|
e: 'fp-2-01',
|
|
|
|
|
i: "",
|
|
|
|
|
f: (e) => {
|
|
|
|
|
this.planNum = e
|
|
|
|
|
}
|
|
|
|
|
.foamingMachine{
|
|
|
|
|
background-image: url("../../../assets/board/foamingMachine.png");
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
position: absolute;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
top: 35%;
|
|
|
|
|
left: 50%;
|
|
|
|
|
width: 36vw;
|
|
|
|
|
height: 12vw;
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
e: 'fp-2-02',
|
|
|
|
|
i: "",
|
|
|
|
|
f: (e) => {
|
|
|
|
|
this.practicalNum = e
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
e: 'fp-2-03',
|
|
|
|
|
i: "",
|
|
|
|
|
f: (e) => {
|
|
|
|
|
this.scrollTableData = e
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
e: 'fp-2-04',
|
|
|
|
|
i: "",
|
|
|
|
|
f: (e) => {
|
|
|
|
|
this.$refs.chart2.setData({
|
|
|
|
|
tooltip: {
|
|
|
|
|
trigger: "axis",
|
|
|
|
|
axisPointer: {
|
|
|
|
|
// 坐标轴指示器，坐标轴触发有效
|
|
|
|
|
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
grid: {
|
|
|
|
|
left: "0",
|
|
|
|
|
right: "4%",
|
|
|
|
|
bottom: 0,
|
|
|
|
|
top: 20,
|
|
|
|
|
containLabel: true,
|
|
|
|
|
},
|
|
|
|
|
xAxis: {
|
|
|
|
|
type: "category",
|
|
|
|
|
data: e.x,
|
|
|
|
|
axisLine: {
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: "white",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
axisLabel: {
|
|
|
|
|
interval: 0,
|
|
|
|
|
// rotate: 40,
|
|
|
|
|
textStyle: {
|
|
|
|
|
fontFamily: "Microsoft YaHei",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
yAxis: {
|
|
|
|
|
type: "value",
|
|
|
|
|
axisLine: {
|
|
|
|
|
show: false,
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: "white",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
splitLine: {
|
|
|
|
|
show: false,
|
|
|
|
|
},
|
|
|
|
|
axisLabel: {},
|
|
|
|
|
},
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
name: e.y.name,
|
|
|
|
|
type: "bar",
|
|
|
|
|
barWidth: "40%",
|
|
|
|
|
label: {
|
|
|
|
|
show: true,
|
|
|
|
|
position: "top",
|
|
|
|
|
textStyle: {
|
|
|
|
|
color: "#49d9ff",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
itemStyle: {
|
|
|
|
|
normal: {
|
|
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
|
|
{
|
|
|
|
|
offset: 0,
|
|
|
|
|
color: "#47cbfd",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
offset: 1,
|
|
|
|
|
color: "#3e8aff",
|
|
|
|
|
},
|
|
|
|
|
]),
|
|
|
|
|
borderRadius: 3,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
data: e.y.data,
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
e: 'fp-2-05',
|
|
|
|
|
i: "SCADA_INV_STATS_01('')",
|
|
|
|
|
f: (e) => {
|
|
|
|
|
getData().then(val => {
|
|
|
|
|
this.scrollTableData1 = val.table3.slice(0, 6)
|
|
|
|
|
this.scrollTableData2 = val.table3.slice(6, 12)
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
e: 'fp-2-06',
|
|
|
|
|
i: "",
|
|
|
|
|
f: (e) => {
|
|
|
|
|
this.$refs.chart1.setData({
|
|
|
|
|
tooltip: {
|
|
|
|
|
trigger: "axis",
|
|
|
|
|
axisPointer: {
|
|
|
|
|
// 坐标轴指示器，坐标轴触发有效
|
|
|
|
|
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
grid: {
|
|
|
|
|
left: "0",
|
|
|
|
|
right: "4%",
|
|
|
|
|
bottom: "0",
|
|
|
|
|
top: 35,
|
|
|
|
|
containLabel: true,
|
|
|
|
|
},
|
|
|
|
|
legend: {
|
|
|
|
|
data: e.y.map(val => val.name),
|
|
|
|
|
right: 'center',
|
|
|
|
|
top: 0,
|
|
|
|
|
textStyle: {
|
|
|
|
|
color: "#fff",
|
|
|
|
|
},
|
|
|
|
|
itemWidth: 12,
|
|
|
|
|
itemHeight: 10,
|
|
|
|
|
// itemGap: 35
|
|
|
|
|
},
|
|
|
|
|
xAxis: {
|
|
|
|
|
type: "category",
|
|
|
|
|
data: e.x,
|
|
|
|
|
axisLine: {
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: "white",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
axisLabel: {
|
|
|
|
|
// interval: 0,
|
|
|
|
|
// rotate: 40,
|
|
|
|
|
textStyle: {
|
|
|
|
|
fontFamily: "Microsoft YaHei",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
yAxis: {
|
|
|
|
|
type: "value",
|
|
|
|
|
axisLine: {
|
|
|
|
|
show: false,
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: "white",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
splitLine: {
|
|
|
|
|
show: false,
|
|
|
|
|
},
|
|
|
|
|
axisLabel: {},
|
|
|
|
|
},
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
name: e.y[0].name,
|
|
|
|
|
type: "bar",
|
|
|
|
|
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: {
|
|
|
|
|
show: true,
|
|
|
|
|
position: "top",
|
|
|
|
|
textStyle: {
|
|
|
|
|
color: "#49d9ff",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
itemStyle: {
|
|
|
|
|
normal: {
|
|
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
|
|
{
|
|
|
|
|
offset: 0,
|
|
|
|
|
color: "#47cbfd",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
offset: 1,
|
|
|
|
|
color: "#3e8aff",
|
|
|
|
|
},
|
|
|
|
|
]),
|
|
|
|
|
borderRadius: 2,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
data: e.y[1].data,
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
e: 'fp-2-07',
|
|
|
|
|
i: "",
|
|
|
|
|
f: (e) => {
|
|
|
|
|
this.$refs.chart3.setData({
|
|
|
|
|
legend: {
|
|
|
|
|
data: e.y.map(val => val.name),
|
|
|
|
|
right: 'center',
|
|
|
|
|
top: 0,
|
|
|
|
|
textStyle: {
|
|
|
|
|
color: "#fff",
|
|
|
|
|
},
|
|
|
|
|
itemWidth: 12,
|
|
|
|
|
itemHeight: 10,
|
|
|
|
|
// itemGap: 35
|
|
|
|
|
},
|
|
|
|
|
tooltip: {
|
|
|
|
|
trigger: "axis",
|
|
|
|
|
axisPointer: {
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: {
|
|
|
|
|
type: "linear",
|
|
|
|
|
x: 0,
|
|
|
|
|
y: 0,
|
|
|
|
|
x2: 0,
|
|
|
|
|
y2: 1,
|
|
|
|
|
colorStops: [
|
|
|
|
|
{
|
|
|
|
|
offset: 0,
|
|
|
|
|
color: "rgba(0, 255, 233,0)",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
offset: 0.5,
|
|
|
|
|
color: "rgba(255, 255, 255,1)",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
offset: 1,
|
|
|
|
|
color: "rgba(0, 255, 233,0)",
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
global: false,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
grid: {
|
|
|
|
|
top: "15%",
|
|
|
|
|
left: 40,
|
|
|
|
|
right: "5%",
|
|
|
|
|
bottom: "15%",
|
|
|
|
|
// containLabel: true
|
|
|
|
|
},
|
|
|
|
|
xAxis: [
|
|
|
|
|
{
|
|
|
|
|
show: false,
|
|
|
|
|
type: "category",
|
|
|
|
|
axisLine: {
|
|
|
|
|
show: true,
|
|
|
|
|
},
|
|
|
|
|
splitArea: {
|
|
|
|
|
// show: true,
|
|
|
|
|
color: "#f00",
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: "#f00",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
axisLabel: {
|
|
|
|
|
color: "#fff",
|
|
|
|
|
},
|
|
|
|
|
splitLine: {
|
|
|
|
|
show: false,
|
|
|
|
|
},
|
|
|
|
|
boundaryGap: false,
|
|
|
|
|
data: e.x,
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
|
|
|
|
|
yAxis: [
|
|
|
|
|
{
|
|
|
|
|
type: "value",
|
|
|
|
|
min: 18,
|
|
|
|
|
max: 24,
|
|
|
|
|
splitNumber: 4,
|
|
|
|
|
splitLine: {
|
|
|
|
|
show: true,
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: "rgba(255,255,255,0.1)",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
axisLine: {
|
|
|
|
|
show: true,
|
|
|
|
|
},
|
|
|
|
|
axisLabel: {
|
|
|
|
|
show: true,
|
|
|
|
|
margin: 20,
|
|
|
|
|
textStyle: {
|
|
|
|
|
color: "#d1e6eb",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
axisTick: {
|
|
|
|
|
show: true,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
name: e.y[0].name,
|
|
|
|
|
type: "line",
|
|
|
|
|
showAllSymbol: true,
|
|
|
|
|
symbol: "circle",
|
|
|
|
|
symbolSize: 5,
|
|
|
|
|
lineStyle: {
|
|
|
|
|
normal: {
|
|
|
|
|
color: "#49d9ff",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
label: {
|
|
|
|
|
show: true,
|
|
|
|
|
position: "top",
|
|
|
|
|
textStyle: {
|
|
|
|
|
color: "#49d9ff",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
itemStyle: {
|
|
|
|
|
color: "#49d9ff",
|
|
|
|
|
},
|
|
|
|
|
areaStyle: {
|
|
|
|
|
normal: {
|
|
|
|
|
color: new echarts.graphic.LinearGradient(
|
|
|
|
|
0,
|
|
|
|
|
0,
|
|
|
|
|
0,
|
|
|
|
|
1,
|
|
|
|
|
[
|
|
|
|
|
{
|
|
|
|
|
offset: 0,
|
|
|
|
|
color: "rgba(108,80,243,0.3)",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
offset: 1,
|
|
|
|
|
color: "rgba(108,80,243,0)",
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
false
|
|
|
|
|
),
|
|
|
|
|
shadowColor: "rgba(108,80,243, 0.9)",
|
|
|
|
|
shadowBlur: 20,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
data: e.y[0].data,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: e.y[1].name,
|
|
|
|
|
type: "line",
|
|
|
|
|
// smooth: true, //是否平滑
|
|
|
|
|
showAllSymbol: true,
|
|
|
|
|
// symbol: 'image://./static/images/guang-circle.png',
|
|
|
|
|
symbol: "circle",
|
|
|
|
|
symbolSize: 5,
|
|
|
|
|
lineStyle: {
|
|
|
|
|
normal: {
|
|
|
|
|
color: "#668e84",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
label: {
|
|
|
|
|
show: true,
|
|
|
|
|
position: "top",
|
|
|
|
|
textStyle: {
|
|
|
|
|
color: "#668e84",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
color: "#00ca95",
|
|
|
|
|
},
|
|
|
|
|
areaStyle: {
|
|
|
|
|
normal: {
|
|
|
|
|
color: new echarts.graphic.LinearGradient(
|
|
|
|
|
0,
|
|
|
|
|
0,
|
|
|
|
|
0,
|
|
|
|
|
1,
|
|
|
|
|
[
|
|
|
|
|
{
|
|
|
|
|
offset: 0,
|
|
|
|
|
color: "rgba(0,202,149,0.3)",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
offset: 1,
|
|
|
|
|
color: "rgba(0,202,149,0)",
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
false
|
|
|
|
|
),
|
|
|
|
|
shadowColor: "rgba(0,202,149, 0.9)",
|
|
|
|
|
shadowBlur: 20,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
data: e.y[1].data,
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
e: 'fp-2-08',
|
|
|
|
|
i: "",
|
|
|
|
|
f: (e) => {
|
|
|
|
|
this.$refs.chart4.setData({
|
|
|
|
|
tooltip: {
|
|
|
|
|
trigger: "axis",
|
|
|
|
|
axisPointer: {
|
|
|
|
|
// 坐标轴指示器，坐标轴触发有效
|
|
|
|
|
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
grid: {
|
|
|
|
|
left: "0",
|
|
|
|
|
right: "4%",
|
|
|
|
|
bottom: "0",
|
|
|
|
|
top: "10%",
|
|
|
|
|
containLabel: true,
|
|
|
|
|
},
|
|
|
|
|
xAxis: {
|
|
|
|
|
type: "category",
|
|
|
|
|
data: e.x,
|
|
|
|
|
axisLine: {
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: "white",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
axisLabel: {
|
|
|
|
|
// interval: 0,
|
|
|
|
|
// rotate: 40,
|
|
|
|
|
textStyle: {
|
|
|
|
|
fontFamily: "Microsoft YaHei",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
yAxis: {
|
|
|
|
|
type: "value",
|
|
|
|
|
axisLine: {
|
|
|
|
|
show: false,
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: "white",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
splitLine: {
|
|
|
|
|
show: false,
|
|
|
|
|
},
|
|
|
|
|
axisLabel: {},
|
|
|
|
|
},
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
name: e.y.name,
|
|
|
|
|
type: "bar",
|
|
|
|
|
barWidth: "33%",
|
|
|
|
|
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.data,
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
let timeInter = setInterval(() => {
|
|
|
|
|
this.show = !this.show
|
|
|
|
|
}, 30 * 1000)
|
|
|
|
|
console.log(this.$route.query.id)
|
|
|
|
|
if (this.$route.query.id === '1') {
|
|
|
|
|
this.RequestDataSet.forEach(val => {
|
|
|
|
|
mixData(val)
|
|
|
|
|
})
|
|
|
|
|
} else if (this.$route.query.id === '2') {
|
|
|
|
|
this.RequestDataSet1.forEach(val => {
|
|
|
|
|
mixData(val)
|
|
|
|
|
})
|
|
|
|
|
} else {
|
|
|
|
|
this.RequestDataSet.forEach(val => {
|
|
|
|
|
mixData(val)
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
methods: {}
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
<style scoped>
|
|
|
|
|
.title {
|
|
|
|
|
position: absolute;
|
|
|
|
|
transform: translateY(-50%);
|
|
|
|
|
color: #dddddd;
|
|
|
|
|
font-size: 1vw;
|
|
|
|
|
letter-spacing: 2px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.foamingMachine {
|
|
|
|
|
background-image: url("../../../assets/board/foamingMachine.png");
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
position: absolute;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
top: 35%;
|
|
|
|
|
left: 50%;
|
|
|
|
|
width: 36vw;
|
|
|
|
|
height: 12vw;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.app-container {
|
|
|
|
|
background-image: url("../../../assets/board/foaming1.jpg");
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
|
yinq
9 months ago
