|
|
<template>
|
|
|
<div class="app-container">
|
|
|
<div class="headTitle">箱体发泡生产数据监控平台</div>
|
|
|
<div class="topNum planNum">{{
|
|
|
(['0', '0', '0', '0']).concat(planNum.toString().split('')).slice(-4).join('')
|
|
|
}}
|
|
|
</div>
|
|
|
<div class="topNum practicalNum">
|
|
|
{{
|
|
|
(['0', '0', '0', '0']).concat(practicalNum.toString().split('')).slice(-4).join('')
|
|
|
}}
|
|
|
</div>
|
|
|
<div class="topNum differenceValue">
|
|
|
{{
|
|
|
(['0', '0', '0', '0']).concat(differenceNum.toString().split('')).slice(-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 }}
|
|
|
</div>
|
|
|
<div style="position: absolute; top: 23%;left: 30%;width:10vw;color: #fff;font-size: 0.8vw;line-height: 1.5vw">
|
|
|
<div>发泡线 - 运行状态：</div>
|
|
|
</div>
|
|
|
<div class="info1">
|
|
|
A：
|
|
|
</div>
|
|
|
<div class="status1"
|
|
|
:style="'background-color:'+(statusArr.find(e=>e.X_VALUE === 'A1')&&statusArr.find(e=>e.X_VALUE === 'A1').Y_VALUE >0 ? '#00ff00':'#ff0000')"></div>
|
|
|
<div class="info2">
|
|
|
B：
|
|
|
</div>
|
|
|
<div class="status2"
|
|
|
:style="'background-color:'+(statusArr.find(e=>e.X_VALUE === 'B1')&&statusArr.find(e=>e.X_VALUE === 'B1').Y_VALUE >0 ? '#00ff00':'#ff0000')"></div>
|
|
|
<div class="info3" v-if="$route.query.id === '1' || id === '1'">
|
|
|
C：
|
|
|
</div>
|
|
|
<div class="status3" v-if="$route.query.id === '1' || id === '1'"
|
|
|
:style="'background-color:'+(statusArr.find(e=>e.X_VALUE === 'A2')&&statusArr.find(e=>e.X_VALUE === 'A2').Y_VALUE >0 ? '#00ff00':'#ff0000')"></div>
|
|
|
<div class="info4" v-if="$route.query.id === '1' || id === '1'">
|
|
|
D：
|
|
|
</div>
|
|
|
<div class="status4" v-if="$route.query.id === '1' || id === '1'"
|
|
|
:style="'background-color:'+(statusArr.find(e=>e.X_VALUE === 'B2')&&statusArr.find(e=>e.X_VALUE === 'B2').Y_VALUE >0 ? '#00ff00':'#ff0000')"></div>
|
|
|
|
|
|
<div class="info5">
|
|
|
1#系统：
|
|
|
</div>
|
|
|
<div class="status5"
|
|
|
:style="'background-color:'+(statusArr.find(e=>e.X_VALUE === 'A')&&statusArr.find(e=>e.X_VALUE === 'A').Y_VALUE >0 ? '#00ff00':'#ff0000')"></div>
|
|
|
<div class="info6">
|
|
|
2#系统：
|
|
|
</div>
|
|
|
<div class="status6"
|
|
|
:style="'background-color:'+(statusArr.find(e=>e.X_VALUE === 'B')&&statusArr.find(e=>e.X_VALUE === 'B').Y_VALUE >0 ? '#00ff00':'#ff0000')"></div>
|
|
|
|
|
|
<div style="position: absolute; top: 23%;left: 55%;width:10vw;color: #fff;font-size: 0.8vw;line-height: 1.5vw">
|
|
|
<div>发泡机 - 运行状态：</div>
|
|
|
</div>
|
|
|
<div class="foamingMachine"></div>
|
|
|
<div class="left1">
|
|
|
<span>A</span>
|
|
|
</div>
|
|
|
<div class="left2">
|
|
|
<span>B</span>
|
|
|
</div>
|
|
|
<div class="right1" v-if="$route.query.id === '1' || id === '1'">
|
|
|
<span>C</span>
|
|
|
</div>
|
|
|
<div class="right2" v-if="$route.query.id === '1' || id === '1'">
|
|
|
<span>D</span>
|
|
|
</div>
|
|
|
|
|
|
<div class="chartSpan1" v-if="$route.query.id === '1' || id === '1'">东线</div>
|
|
|
<div class="chartSpan2" v-if="$route.query.id === '1' || id === '1'">西线</div>
|
|
|
|
|
|
<div class="supplementInfo">注射压力标准范围：10.0-14.0Mpa A、B组份枪头压力差≤1Mpa</div>
|
|
|
<div class="supplementInfo1">发泡料温度标准范围:18.0-24.0℃</div>
|
|
|
|
|
|
<div class="scrollTable">
|
|
|
<div style="background-color: #094170">
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 20%">
|
|
|
型号
|
|
|
</div>
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 20%">
|
|
|
计划数
|
|
|
</div>
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 20%">
|
|
|
完成数
|
|
|
</div>
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 20%">
|
|
|
差异数
|
|
|
</div>
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 20%">
|
|
|
执行进度
|
|
|
</div>
|
|
|
</div>
|
|
|
<vue-seamless-scroll
|
|
|
:class-option="scrollTableOption"
|
|
|
:data="scrollTableData"
|
|
|
class="case-item"
|
|
|
style="height: 84%;overflow: hidden;"
|
|
|
>
|
|
|
<div
|
|
|
v-for="(item, index) in scrollTableData"
|
|
|
:key="index"
|
|
|
|
|
|
>
|
|
|
<div :style='"background-color:" + ((index % 2 === 0)? "#053460":"#032d57") '>
|
|
|
<div
|
|
|
class="scrollTableItem" style="width: 20%">
|
|
|
{{ item.COLUMN_A }}
|
|
|
</div>
|
|
|
<div
|
|
|
class="scrollTableItem" style="width: 20%">
|
|
|
{{ item.COLUMN_B }}
|
|
|
</div>
|
|
|
<div
|
|
|
class="scrollTableItem" style="width: 20%">
|
|
|
{{ item.COLUMN_C }}
|
|
|
</div>
|
|
|
<div
|
|
|
class="scrollTableItem" style="width: 20%">
|
|
|
{{ item.COLUMN_D }}
|
|
|
</div>
|
|
|
<div
|
|
|
class="scrollTableItem" style="width: 20%">
|
|
|
{{ item.COLUMN_E }}
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</vue-seamless-scroll>
|
|
|
</div>
|
|
|
<div class="chart1">
|
|
|
<Chart ref="chart1"></Chart>
|
|
|
</div>
|
|
|
<div class="chart2">
|
|
|
<Chart ref="chart2"></Chart>
|
|
|
</div>
|
|
|
<div class="chart3">
|
|
|
<Chart ref="chart3"></Chart>
|
|
|
</div>
|
|
|
<div class="chart4">
|
|
|
<Chart ref="chart4"></Chart>
|
|
|
</div>
|
|
|
<transition name="table1" v-for="(i,k) in Math.ceil(scrollTableData1.length)">
|
|
|
<div class="scrollTable1" v-if="show === k">
|
|
|
<div style="background-color: #094170; height: calc(25vh/7)">
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
|
|
|
工位
|
|
|
</div>
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 8%">
|
|
|
型号
|
|
|
</div>
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
|
|
|
状态
|
|
|
</div>
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
|
|
|
目标
|
|
|
</div>
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
|
|
|
计划
|
|
|
</div>
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
|
|
|
累计
|
|
|
</div>
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 7%">
|
|
|
达成率
|
|
|
</div>
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
|
|
|
{{ hourArr[0] }}
|
|
|
</div>
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
|
|
|
{{ hourArr[1] }}
|
|
|
</div>
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
|
|
|
{{ hourArr[2] }}
|
|
|
</div>
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
|
|
|
{{ hourArr[3] }}
|
|
|
</div>
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
|
|
|
{{ hourArr[4] }}
|
|
|
</div>
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
|
|
|
{{ hourArr[5] }}
|
|
|
</div>
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
|
|
|
{{ hourArr[6] }}
|
|
|
</div>
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
|
|
|
{{ hourArr[7] }}
|
|
|
</div>
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
|
|
|
{{ hourArr[8] }}
|
|
|
</div>
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
|
|
|
{{ hourArr[9] }}
|
|
|
</div>
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
|
|
|
{{ hourArr[10] }}
|
|
|
</div>
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
|
|
|
{{ hourArr[11] }}
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- <vue-seamless-scroll-->
|
|
|
<!-- :class-option="scrollTableOption"-->
|
|
|
<!-- :data="scrollTableData1"-->
|
|
|
<!-- class="case-item"-->
|
|
|
<!-- style="height: 84%;overflow: hidden;"-->
|
|
|
<!-- >-->
|
|
|
<div
|
|
|
v-for="(item, index) in scrollTableData1.slice(k*6,(k+1)*6)"
|
|
|
:key="index"
|
|
|
style="height: calc(25vh/7)"
|
|
|
>
|
|
|
<div :style='"background-color:" + ((index % 2 === 0)? "#053460":"#032d57") '>
|
|
|
<div
|
|
|
class="scrollTableItem" style="width: 5%">
|
|
|
{{ item.value1 }}
|
|
|
</div>
|
|
|
<div
|
|
|
class="scrollTableItem" style="width: 8%">
|
|
|
{{ item.value2 }}
|
|
|
</div>
|
|
|
<div
|
|
|
class="scrollTableItem" style="width: 5%">
|
|
|
{{ item.value3 }}
|
|
|
</div>
|
|
|
<div
|
|
|
class="scrollTableItem" style="width: 5%">
|
|
|
{{ item.value4 }}
|
|
|
</div>
|
|
|
<div
|
|
|
class="scrollTableItem" style="width: 5%">
|
|
|
{{ item.value5 }}
|
|
|
</div>
|
|
|
<div
|
|
|
class="scrollTableItem" style="width: 5%">
|
|
|
{{ item.value6 }}
|
|
|
</div>
|
|
|
<div
|
|
|
class="scrollTableItem" style="width: 7%">
|
|
|
{{ item.value7 }}
|
|
|
</div>
|
|
|
<div
|
|
|
class="scrollTableItem" style="width: 5%">
|
|
|
{{ item.value8 }}
|
|
|
</div>
|
|
|
<div
|
|
|
class="scrollTableItem" style="width: 5%">
|
|
|
{{ item.value9 }}
|
|
|
</div>
|
|
|
<div
|
|
|
class="scrollTableItem" style="width: 5%">
|
|
|
{{ item.value10 }}
|
|
|
</div>
|
|
|
<div
|
|
|
class="scrollTableItem" style="width: 5%">
|
|
|
{{ item.value11 }}
|
|
|
</div>
|
|
|
<div
|
|
|
class="scrollTableItem" style="width: 5%">
|
|
|
{{ item.value12 }}
|
|
|
</div>
|
|
|
<div
|
|
|
class="scrollTableItem" style="width: 5%">
|
|
|
{{ item.value13 }}
|
|
|
</div>
|
|
|
<div
|
|
|
class="scrollTableItem" style="width: 5%">
|
|
|
{{ item.value14 }}
|
|
|
</div>
|
|
|
<div
|
|
|
class="scrollTableItem" style="width: 5%">
|
|
|
{{ item.value15 }}
|
|
|
</div>
|
|
|
<div
|
|
|
class="scrollTableItem" style="width: 5%">
|
|
|
{{ item.value16 }}
|
|
|
</div>
|
|
|
<div
|
|
|
class="scrollTableItem" style="width: 5%">
|
|
|
{{ item.value17 }}
|
|
|
</div>
|
|
|
<div
|
|
|
class="scrollTableItem" style="width: 5%">
|
|
|
{{ item.value18 }}
|
|
|
</div>
|
|
|
<div
|
|
|
class="scrollTableItem" style="width: 5%">
|
|
|
{{ item.value19 }}
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- </vue-seamless-scroll>-->
|
|
|
</div>
|
|
|
</transition>
|
|
|
<div class="total">
|
|
|
<div style="background-color: #094170">
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
|
|
|
</div>
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 8%">
|
|
|
合计
|
|
|
</div>
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
|
|
|
{{ total.value1 }}%
|
|
|
</div>
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
|
|
|
|
|
|
</div>
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
|
|
|
{{ total.value2 }}
|
|
|
</div>
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
|
|
|
{{ total.value3 }}
|
|
|
</div>
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 7%">
|
|
|
{{ total.value4 }}%
|
|
|
</div>
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
|
|
|
{{ total.value5 }}
|
|
|
</div>
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
|
|
|
{{ total.value6 }}
|
|
|
</div>
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
|
|
|
{{ total.value7 }}
|
|
|
</div>
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
|
|
|
{{ total.value8 }}
|
|
|
</div>
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
|
|
|
{{ total.value9 }}
|
|
|
</div>
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
|
|
|
{{ total.value10 }}
|
|
|
</div>
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
|
|
|
{{ total.value11 }}
|
|
|
</div>
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
|
|
|
{{ total.value12 }}
|
|
|
</div>
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
|
|
|
{{ total.value13 }}
|
|
|
</div>
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
|
|
|
{{ total.value14 }}
|
|
|
</div>
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
|
|
|
{{ total.value15 }}
|
|
|
</div>
|
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 5%">
|
|
|
{{ total.value16 }}
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import vueSeamlessScroll from "vue-seamless-scroll";
|
|
|
import Chart from "../../../components/board/Chart";
|
|
|
import * as echarts from 'echarts'
|
|
|
import {getData, getFoamingData, getCurrentTeamTimeList} from "@/api/board/getData";
|
|
|
import {mixData} from "@/api/board/mixData";
|
|
|
|
|
|
let intervalFun = null
|
|
|
export default {
|
|
|
components: {
|
|
|
vueSeamlessScroll,
|
|
|
Chart
|
|
|
},
|
|
|
name: "Liner",
|
|
|
props: {
|
|
|
id: {
|
|
|
type: String,
|
|
|
default: ''
|
|
|
}
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
show: 0,
|
|
|
planNum: 0,
|
|
|
practicalNum: 0,
|
|
|
differenceNum: 0,
|
|
|
total: {},
|
|
|
title: [
|
|
|
'生产计划',
|
|
|
'生产统计',
|
|
|
'生产统计数据',
|
|
|
'发泡注射压力监控',
|
|
|
'发泡料温度监控',
|
|
|
'泡前库库存',
|
|
|
],
|
|
|
statusArr: [],
|
|
|
hourArr: [],
|
|
|
titlePosition: [
|
|
|
{
|
|
|
top: 11.5,
|
|
|
left: 5.5
|
|
|
},
|
|
|
{
|
|
|
top: 39.2,
|
|
|
left: 5.5
|
|
|
},
|
|
|
{
|
|
|
top: 62.8,
|
|
|
left: 5.5
|
|
|
},
|
|
|
{
|
|
|
top: 11.5,
|
|
|
left: 75
|
|
|
},
|
|
|
{
|
|
|
top: 39.3,
|
|
|
left: 75
|
|
|
},
|
|
|
{
|
|
|
top: 62.9,
|
|
|
left: 75
|
|
|
},
|
|
|
],
|
|
|
scrollTableOption: {
|
|
|
step: 0.5, // 数值越大速度滚动越快
|
|
|
limitMoveNum: 5, // 开始无缝滚动的数据量 this.dataList.length
|
|
|
hoverStop: true, // 是否开启鼠标悬停stop
|
|
|
direction: 1, // 0向下 1向上 2向左 3向右
|
|
|
openWatch: true, // 开启数据实时监控刷新dom
|
|
|
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
|
|
|
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
|
|
|
waitTime: 0,
|
|
|
},
|
|
|
scrollTableData: [],
|
|
|
scrollTableData1: [],
|
|
|
|
|
|
RequestDataSet: [
|
|
|
{
|
|
|
e: 'fp-1-01',
|
|
|
i: "scada_fp_cy_01('CX_01')",
|
|
|
f: (e) => {
|
|
|
this.planNum = e[0].X_VALUE
|
|
|
this.practicalNum = e[0].Y_VALUE_ONE
|
|
|
this.differenceNum = e[0].Y_VALUE_TWO
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
e: 'fp-1-03',
|
|
|
i: "scada_fp_plan_01('CX_01')",
|
|
|
f: (e) => {
|
|
|
this.scrollTableData = e
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
e: 'fp-1-04',
|
|
|
i: "scada_fp_pro_tj_01('CX_01')",
|
|
|
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.map(val => val.X_VALUE),
|
|
|
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: [
|
|
|
{
|
|
|
barMaxWidth: 40,
|
|
|
name: '数量',
|
|
|
type: "bar",
|
|
|
barWidth: "40%",
|
|
|
label: {
|
|
|
show: true,
|
|
|
formatter: (e) => {
|
|
|
if (e.data === 0) {
|
|
|
return ''
|
|
|
} else {
|
|
|
}
|
|
|
return e.data
|
|
|
},
|
|
|
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.map(val => val.Y_VALUE),
|
|
|
},
|
|
|
],
|
|
|
})
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
e: 'fp-1-05',
|
|
|
i: "SCADA_INV_STATS_01('')",
|
|
|
t: 2,
|
|
|
f: (e) => {
|
|
|
let table = e.map(val => {
|
|
|
return {
|
|
|
value1: val.EQUIPMENT_CODE,
|
|
|
value2: val.FIXTUREBOXTYPE,
|
|
|
value3: val.FIXTURESTATUS,
|
|
|
value4: val.TARGET,
|
|
|
value5: val.TARGET * 11,
|
|
|
value6: val.PRO_SUM,
|
|
|
value7: (val.TARGET === 0 ? 0 : ((val.PRO_SUM / (val.TARGET*11)) * 100).toFixed(2)) + '%',
|
|
|
value8: val.ANHOUR,
|
|
|
value9: val.TWOHOUR,
|
|
|
value10: val.THREEHOUR,
|
|
|
value11: val.FOURHOUR,
|
|
|
value12: val.FIVEHOUR,
|
|
|
value13: val.SIXHOUR,
|
|
|
value14: val.SEVENHOUR,
|
|
|
value15: val.EIGHTHOUR,
|
|
|
value16: val.NINEHOUR,
|
|
|
value17: val.TENHOUR,
|
|
|
value18: val.ELEVENHOUR,
|
|
|
value19: val.TWELVEHOUR,
|
|
|
}
|
|
|
})
|
|
|
this.scrollTableData1 = table
|
|
|
let totalArr = table.slice(this.show*6,(this.show+1)*6)
|
|
|
this.total = {
|
|
|
value1: ((totalArr.filter(val => val.value3 === '生产中').length / 6) * 100).toFixed(2),
|
|
|
value2: totalArr.map(val => val.value5).reduce((acc, curr) => acc + curr, 0),
|
|
|
value3: totalArr.map(val => val.value6).reduce((acc, curr) => acc + curr, 0),
|
|
|
value4: totalArr.map(val => val.value5).reduce((acc, curr) => acc + curr, 0) === 0 ? 0 : ((totalArr.map(val => val.value6).reduce((acc, curr) => acc + curr, 0) / totalArr.map(val => val.value5).reduce((acc, curr) => acc + curr, 0)) * 100).toFixed(2),
|
|
|
value5: totalArr.map(val => val.value8).reduce((acc, curr) => acc + curr, 0),
|
|
|
value6: totalArr.map(val => val.value9).reduce((acc, curr) => acc + curr, 0),
|
|
|
value7: totalArr.map(val => val.value10).reduce((acc, curr) => acc + curr, 0),
|
|
|
value8: totalArr.map(val => val.value11).reduce((acc, curr) => acc + curr, 0),
|
|
|
value9: totalArr.map(val => val.value12).reduce((acc, curr) => acc + curr, 0),
|
|
|
value10: totalArr.map(val => val.value13).reduce((acc, curr) => acc + curr, 0),
|
|
|
value11: totalArr.map(val => val.value14).reduce((acc, curr) => acc + curr, 0),
|
|
|
value12: totalArr.map(val => val.value15).reduce((acc, curr) => acc + curr, 0),
|
|
|
value13: totalArr.map(val => val.value16).reduce((acc, curr) => acc + curr, 0),
|
|
|
value14: totalArr.map(val => val.value17).reduce((acc, curr) => acc + curr, 0),
|
|
|
value15: totalArr.map(val => val.value18).reduce((acc, curr) => acc + curr, 0),
|
|
|
value16: totalArr.map(val => val.value19).reduce((acc, curr) => acc + curr, 0),
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
e: 'fp-1-06',
|
|
|
i: "scada_fp_yl_01('CX_01')",
|
|
|
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: ['POL压力', 'ISO压力'],
|
|
|
right: 'center',
|
|
|
top: 0,
|
|
|
textStyle: {
|
|
|
color: "#fff",
|
|
|
},
|
|
|
itemWidth: 12,
|
|
|
itemHeight: 10,
|
|
|
// itemGap: 35
|
|
|
},
|
|
|
xAxis: {
|
|
|
type: "category",
|
|
|
data: e.map(val => val.X_VALUE),
|
|
|
axisLine: {
|
|
|
lineStyle: {
|
|
|
color: "white",
|
|
|
},
|
|
|
},
|
|
|
axisLabel: {
|
|
|
// interval: 0,
|
|
|
// rotate: 40,
|
|
|
textStyle: {
|
|
|
fontFamily: "Microsoft YaHei",
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
|
|
|
yAxis: {
|
|
|
type: "value",
|
|
|
min: 10,
|
|
|
max: 14,
|
|
|
axisLine: {
|
|
|
show: false,
|
|
|
lineStyle: {
|
|
|
color: "white",
|
|
|
},
|
|
|
},
|
|
|
splitLine: {
|
|
|
show: false,
|
|
|
},
|
|
|
axisLabel: {},
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
name: 'POL压力',
|
|
|
type: "bar",
|
|
|
barWidth: "30%",
|
|
|
label: {
|
|
|
show: true,
|
|
|
formatter: (e) => {
|
|
|
if (e.data === 0) {
|
|
|
return ''
|
|
|
} else {
|
|
|
}
|
|
|
return e.data
|
|
|
},
|
|
|
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.map(val => {
|
|
|
if (val.Y_VALUE_ONE === 0) {
|
|
|
return null
|
|
|
} else {
|
|
|
return val.Y_VALUE_ONE
|
|
|
}
|
|
|
}),
|
|
|
},
|
|
|
{
|
|
|
name: 'ISO压力',
|
|
|
type: "bar",
|
|
|
barWidth: "30%",
|
|
|
barGap: '40%',
|
|
|
label: {
|
|
|
show: true,
|
|
|
formatter: (e) => {
|
|
|
if (e.data === 0) {
|
|
|
return ''
|
|
|
} else {
|
|
|
}
|
|
|
return e.data
|
|
|
},
|
|
|
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.map(val => {
|
|
|
if (val.Y_VALUE_TWO === 0) {
|
|
|
return null
|
|
|
} else {
|
|
|
return val.Y_VALUE_TWO
|
|
|
}
|
|
|
}),
|
|
|
},
|
|
|
],
|
|
|
})
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
e: 'fp-1-07',
|
|
|
i: "scada_fp_temp_01('CX_01')",
|
|
|
f: (e) => {
|
|
|
this.$refs.chart3.setData({
|
|
|
legend: {
|
|
|
data: ['POL温度', 'ISO温度'],
|
|
|
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: "30%",
|
|
|
// containLabel: true
|
|
|
},
|
|
|
xAxis: [
|
|
|
{
|
|
|
show: true,
|
|
|
type: "category",
|
|
|
axisLine: {
|
|
|
show: false,
|
|
|
},
|
|
|
splitArea: {
|
|
|
// show: true,
|
|
|
color: "#f00",
|
|
|
lineStyle: {
|
|
|
color: "#f00",
|
|
|
},
|
|
|
},
|
|
|
axisLabel: {
|
|
|
color: "#fff",
|
|
|
interval:0,
|
|
|
rotate:-30,
|
|
|
},
|
|
|
splitLine: {
|
|
|
show: false,
|
|
|
},
|
|
|
boundaryGap: false,
|
|
|
data: e.map(val => val.X_VALUE),
|
|
|
},
|
|
|
],
|
|
|
|
|
|
yAxis: [
|
|
|
{
|
|
|
type: "value",
|
|
|
min: 18,
|
|
|
max: 24,
|
|
|
splitNumber: 4,
|
|
|
splitLine: {
|
|
|
show: true,
|
|
|
lineStyle: {
|
|
|
color: ['#c20f0f',"rgba(255,255,255,0.1)","rgba(255,255,255,0.1)",'#c20f0f'],
|
|
|
},
|
|
|
},
|
|
|
axisLine: {
|
|
|
show: true,
|
|
|
},
|
|
|
axisLabel: {
|
|
|
show: true,
|
|
|
margin: 20,
|
|
|
textStyle: {
|
|
|
color: (e) => {
|
|
|
if (e === '18' || e === '24') {
|
|
|
return '#c20f0f'
|
|
|
} else {
|
|
|
return '#d1e6eb'
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
},
|
|
|
axisTick: {
|
|
|
show: true,
|
|
|
},
|
|
|
},
|
|
|
],
|
|
|
series: [
|
|
|
{
|
|
|
name: 'POL温度',
|
|
|
type: "line",
|
|
|
showAllSymbol: true,
|
|
|
symbol: "circle",
|
|
|
symbolSize: 5,
|
|
|
lineStyle: {
|
|
|
normal: {
|
|
|
color: "#49d9ff",
|
|
|
},
|
|
|
},
|
|
|
label: {
|
|
|
show: true,
|
|
|
position: "top",
|
|
|
formatter: (e) => {
|
|
|
if (e.data === 0) {
|
|
|
return ''
|
|
|
} else {
|
|
|
}
|
|
|
return e.data
|
|
|
},
|
|
|
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.map(val => val.Y_VALUE_ONE === 0 ? null : val.Y_VALUE_ONE),
|
|
|
},
|
|
|
{
|
|
|
name: 'ISO温度',
|
|
|
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",
|
|
|
formatter: (e) => {
|
|
|
if (e.data === 0) {
|
|
|
return ''
|
|
|
} else {
|
|
|
}
|
|
|
return e.data
|
|
|
},
|
|
|
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.map(val => val.Y_VALUE_TWO === 0 ? null : val.Y_VALUE_TWO),
|
|
|
},
|
|
|
],
|
|
|
})
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
e: 'fp-1-08',
|
|
|
i: "scada_inv_stats_02('CX_01')",
|
|
|
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.map(val => val.X_VALUE),
|
|
|
axisLine: {
|
|
|
lineStyle: {
|
|
|
color: "white",
|
|
|
},
|
|
|
},
|
|
|
axisLabel: {
|
|
|
interval: 0,
|
|
|
// rotate: 40,
|
|
|
textStyle: {
|
|
|
fontFamily: "Microsoft YaHei",
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
|
|
|
yAxis: {
|
|
|
interval: 0,
|
|
|
type: "value",
|
|
|
axisLine: {
|
|
|
show: false,
|
|
|
lineStyle: {
|
|
|
color: "white",
|
|
|
},
|
|
|
},
|
|
|
splitLine: {
|
|
|
show: false,
|
|
|
},
|
|
|
axisLabel: {},
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
name: '数量',
|
|
|
type: "bar",
|
|
|
barWidth: "33%",
|
|
|
label: {
|
|
|
formatter: (e) => {
|
|
|
if (e.data === 0) {
|
|
|
return ''
|
|
|
} else {
|
|
|
}
|
|
|
return e.data
|
|
|
},
|
|
|
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.map(val => val.Y_VALUE),
|
|
|
},
|
|
|
],
|
|
|
})
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
e: 'fp-1-09',
|
|
|
i: "scada_fp_zt_01('CX_01')",
|
|
|
f: (e) => {
|
|
|
this.statusArr = e
|
|
|
}
|
|
|
},
|
|
|
],
|
|
|
RequestDataSet1: [
|
|
|
{
|
|
|
e: 'fp-2-01',
|
|
|
i: "scada_fp_cy_01('CX_02')",
|
|
|
f: (e) => {
|
|
|
this.planNum = e[0].X_VALUE
|
|
|
this.practicalNum = e[0].Y_VALUE_ONE
|
|
|
this.differenceNum = e[0].Y_VALUE_TWO
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
e: 'fp-2-03',
|
|
|
i: "scada_fp_plan_01('CX_02')",
|
|
|
f: (e) => {
|
|
|
this.scrollTableData = e
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
e: 'fp-2-04',
|
|
|
i: "scada_fp_pro_tj_01('CX_02')",
|
|
|
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.map(val => val.X_VALUE),
|
|
|
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: '数量',
|
|
|
type: "bar",
|
|
|
barWidth: "40%",
|
|
|
barMaxWidth: 40,
|
|
|
label: {
|
|
|
show: true,
|
|
|
formatter: (e) => {
|
|
|
if (e.data === 0) {
|
|
|
return ''
|
|
|
} else {
|
|
|
}
|
|
|
return e.data
|
|
|
},
|
|
|
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.map(val => val.Y_VALUE),
|
|
|
},
|
|
|
],
|
|
|
})
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
e: 'fp-2-05',
|
|
|
i: "SCADA_INV_STATS_02('')",
|
|
|
t: 3,
|
|
|
f: (e) => {
|
|
|
let table = e.map(val => {
|
|
|
return {
|
|
|
value1: val.EQUIPMENT_CODE,
|
|
|
value2: val.FIXTUREBOXTYPE,
|
|
|
value3: val.FIXTURESTATUS,
|
|
|
value4: val.TARGET,
|
|
|
value5: val.PLAN_SUM,
|
|
|
value6: val.PRO_SUM,
|
|
|
value7: (val.TARGET === 0 ? 0 : ((val.PRO_SUM / (val.TARGET*11)) * 100).toFixed(2)) + '%',
|
|
|
value8: val.ANHOUR,
|
|
|
value9: val.TWOHOUR,
|
|
|
value10: val.THREEHOUR,
|
|
|
value11: val.FOURHOUR,
|
|
|
value12: val.FIVEHOUR,
|
|
|
value13: val.SIXHOUR,
|
|
|
value14: val.SEVENHOUR,
|
|
|
value15: val.EIGHTHOUR,
|
|
|
value16: val.NINEHOUR,
|
|
|
value17: val.TENHOUR,
|
|
|
value18: val.ELEVENHOUR,
|
|
|
value19: val.TWELVEHOUR,
|
|
|
}
|
|
|
})
|
|
|
this.scrollTableData1 = table
|
|
|
let totalArr = table.slice(this.show*6,(this.show+1)*6)
|
|
|
this.total = {
|
|
|
value1: ((totalArr.filter(val => val.value3 === '生产中').length / 6) * 100).toFixed(2),
|
|
|
value2: totalArr.map(val => val.value5).reduce((acc, curr) => acc + curr, 0),
|
|
|
value3: totalArr.map(val => val.value6).reduce((acc, curr) => acc + curr, 0),
|
|
|
value4: totalArr.map(val => val.value5).reduce((acc, curr) => acc + curr, 0) === 0 ? 0 : ((totalArr.map(val => val.value6).reduce((acc, curr) => acc + curr, 0) / totalArr.map(val => val.value5).reduce((acc, curr) => acc + curr, 0)) * 100).toFixed(2),
|
|
|
value5: totalArr.map(val => val.value8).reduce((acc, curr) => acc + curr, 0),
|
|
|
value6: totalArr.map(val => val.value9).reduce((acc, curr) => acc + curr, 0),
|
|
|
value7: totalArr.map(val => val.value10).reduce((acc, curr) => acc + curr, 0),
|
|
|
value8: totalArr.map(val => val.value11).reduce((acc, curr) => acc + curr, 0),
|
|
|
value9: totalArr.map(val => val.value12).reduce((acc, curr) => acc + curr, 0),
|
|
|
value10: totalArr.map(val => val.value13).reduce((acc, curr) => acc + curr, 0),
|
|
|
value11: totalArr.map(val => val.value14).reduce((acc, curr) => acc + curr, 0),
|
|
|
value12: totalArr.map(val => val.value15).reduce((acc, curr) => acc + curr, 0),
|
|
|
value13: totalArr.map(val => val.value16).reduce((acc, curr) => acc + curr, 0),
|
|
|
value14: totalArr.map(val => val.value17).reduce((acc, curr) => acc + curr, 0),
|
|
|
value15: totalArr.map(val => val.value18).reduce((acc, curr) => acc + curr, 0),
|
|
|
value16: totalArr.map(val => val.value19).reduce((acc, curr) => acc + curr, 0),
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
e: 'fp-2-06',
|
|
|
i: "scada_fp_yl_01('CX_02')",
|
|
|
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: ['POL压力', 'ISO压力'],
|
|
|
right: 'center',
|
|
|
top: 0,
|
|
|
textStyle: {
|
|
|
color: "#fff",
|
|
|
},
|
|
|
itemWidth: 12,
|
|
|
itemHeight: 10,
|
|
|
// itemGap: 35
|
|
|
},
|
|
|
xAxis: {
|
|
|
type: "category",
|
|
|
data: e.map(val => val.X_VALUE),
|
|
|
axisLine: {
|
|
|
lineStyle: {
|
|
|
color: "white",
|
|
|
},
|
|
|
},
|
|
|
axisLabel: {
|
|
|
// interval: 0,
|
|
|
// rotate: 40,
|
|
|
textStyle: {
|
|
|
fontFamily: "Microsoft YaHei",
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
|
|
|
yAxis: {
|
|
|
type: "value",
|
|
|
min: 10,
|
|
|
max: 14,
|
|
|
axisLine: {
|
|
|
show: false,
|
|
|
lineStyle: {
|
|
|
color: "white",
|
|
|
},
|
|
|
},
|
|
|
splitLine: {
|
|
|
show: false,
|
|
|
},
|
|
|
axisLabel: {},
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
name: 'POL压力',
|
|
|
type: "bar",
|
|
|
barWidth: "30%",
|
|
|
label: {
|
|
|
show: true,
|
|
|
position: "top",
|
|
|
formatter: (e) => {
|
|
|
if (e.data === 0) {
|
|
|
return ''
|
|
|
} else {
|
|
|
}
|
|
|
return e.data
|
|
|
},
|
|
|
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.map(val => {
|
|
|
if (val.Y_VALUE_ONE === 0) {
|
|
|
return null
|
|
|
} else {
|
|
|
return val.Y_VALUE_ONE
|
|
|
}
|
|
|
}),
|
|
|
},
|
|
|
{
|
|
|
name: 'ISO压力',
|
|
|
type: "bar",
|
|
|
barWidth: "30%",
|
|
|
barGap: '40%',
|
|
|
label: {
|
|
|
show: true,
|
|
|
formatter: (e) => {
|
|
|
if (e.data === 0) {
|
|
|
return ''
|
|
|
} else {
|
|
|
}
|
|
|
return e.data
|
|
|
},
|
|
|
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.map(val => {
|
|
|
if (val.Y_VALUE_TWO === 0) {
|
|
|
return null
|
|
|
} else {
|
|
|
return val.Y_VALUE_TWO
|
|
|
}
|
|
|
}),
|
|
|
},
|
|
|
],
|
|
|
})
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
e: 'fp-2-07',
|
|
|
i: "scada_fp_temp_01('CX_02')",
|
|
|
f: (e) => {
|
|
|
this.$refs.chart3.setData({
|
|
|
legend: {
|
|
|
data: ['POL温度', 'ISO温度'],
|
|
|
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: true,
|
|
|
type: "category",
|
|
|
axisLine: {
|
|
|
show: false,
|
|
|
},
|
|
|
splitArea: {
|
|
|
// show: true,
|
|
|
color: "#f00",
|
|
|
lineStyle: {
|
|
|
color: "#f00",
|
|
|
},
|
|
|
},
|
|
|
axisLabel: {
|
|
|
color: "#fff",
|
|
|
interval:0,
|
|
|
rotate:-30,
|
|
|
},
|
|
|
splitLine: {
|
|
|
show: false,
|
|
|
},
|
|
|
boundaryGap: false,
|
|
|
data: e.map(val => val.X_VALUE),
|
|
|
},
|
|
|
],
|
|
|
|
|
|
yAxis: [
|
|
|
{
|
|
|
type: "value",
|
|
|
min: 18,
|
|
|
max: 24,
|
|
|
splitNumber: 4,
|
|
|
splitLine: {
|
|
|
show: true,
|
|
|
lineStyle: {
|
|
|
color: ['#c20f0f',"rgba(255,255,255,0.1)","rgba(255,255,255,0.1)",'#c20f0f'],
|
|
|
},
|
|
|
},
|
|
|
axisLine: {
|
|
|
show: true,
|
|
|
},
|
|
|
axisLabel: {
|
|
|
show: true,
|
|
|
margin: 20,
|
|
|
textStyle: {
|
|
|
color: (e) => {
|
|
|
if (e === '18' || e === '24') {
|
|
|
return '#c20f0f'
|
|
|
} else {
|
|
|
return '#d1e6eb'
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
},
|
|
|
axisTick: {
|
|
|
show: true,
|
|
|
},
|
|
|
},
|
|
|
],
|
|
|
series: [
|
|
|
{
|
|
|
name: 'POL温度',
|
|
|
type: "line",
|
|
|
showAllSymbol: true,
|
|
|
symbol: "circle",
|
|
|
symbolSize: 5,
|
|
|
lineStyle: {
|
|
|
normal: {
|
|
|
color: "#49d9ff",
|
|
|
},
|
|
|
},
|
|
|
label: {
|
|
|
show: true,
|
|
|
formatter: (e) => {
|
|
|
if (e.data === 0) {
|
|
|
return ''
|
|
|
} else {
|
|
|
}
|
|
|
return e.data
|
|
|
},
|
|
|
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.map(val => val.Y_VALUE_ONE === 0 ? null : val.Y_VALUE_ONE),
|
|
|
},
|
|
|
{
|
|
|
name: 'ISO温度',
|
|
|
type: "line",
|
|
|
// smooth: true, //是否平滑
|
|
|
showAllSymbol: true,
|
|
|
// symbol: 'image://./static/images/guang-circle.png',
|
|
|
symbol: "circle",
|
|
|
symbolSize: 5,
|
|
|
lineStyle: {
|
|
|
normal: {
|
|
|
color: "#668e84",
|
|
|
},
|
|
|
},
|
|
|
label: {
|
|
|
show: true,
|
|
|
formatter: (e) => {
|
|
|
if (e.data === 0) {
|
|
|
return ''
|
|
|
} else {
|
|
|
}
|
|
|
return e.data
|
|
|
},
|
|
|
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.map(val => val.Y_VALUE_TWO === 0 ? null : val.Y_VALUE_TWO),
|
|
|
},
|
|
|
],
|
|
|
})
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
e: 'fp-2-08',
|
|
|
i: "scada_inv_stats_02('CX_02')",
|
|
|
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.map(val => val.X_VALUE),
|
|
|
axisLine: {
|
|
|
lineStyle: {
|
|
|
color: "white",
|
|
|
},
|
|
|
},
|
|
|
axisLabel: {
|
|
|
interval: 0,
|
|
|
// rotate: 40,
|
|
|
textStyle: {
|
|
|
fontFamily: "Microsoft YaHei",
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
|
|
|
yAxis: {
|
|
|
type: "value",
|
|
|
interval: 0,
|
|
|
axisLine: {
|
|
|
show: false,
|
|
|
lineStyle: {
|
|
|
color: "white",
|
|
|
},
|
|
|
},
|
|
|
splitLine: {
|
|
|
show: false,
|
|
|
},
|
|
|
axisLabel: {},
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
name: '数量',
|
|
|
type: "bar",
|
|
|
barWidth: "33%",
|
|
|
label: {
|
|
|
show: true,
|
|
|
formatter: (e) => {
|
|
|
if (e.data === 0) {
|
|
|
return ''
|
|
|
} else {
|
|
|
}
|
|
|
return e.data
|
|
|
},
|
|
|
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.map(val => val.Y_VALUE),
|
|
|
},
|
|
|
],
|
|
|
})
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
e: 'fp-2-09',
|
|
|
i: "scada_fp_zt_01('CX_02')",
|
|
|
f: (e) => {
|
|
|
this.statusArr = e
|
|
|
}
|
|
|
},
|
|
|
],
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
|
getCurrentTeamTimeList({'a': 'a'}).then(e => {
|
|
|
this.hourArr = e?.data.map(val => val.HOUR_TIME)
|
|
|
})
|
|
|
let timeInter = setInterval(() => {
|
|
|
let num1 = Math.ceil(this.scrollTableData1.length / 6)
|
|
|
let num = this.show
|
|
|
num += 1
|
|
|
num = num % num1
|
|
|
this.show = num
|
|
|
|
|
|
let totalArr = this.scrollTableData1.slice(num*6,(num+1)*6)
|
|
|
this.total = {
|
|
|
value1: ((totalArr.filter(val => val.value3 === '生产中').length / 6) * 100).toFixed(2),
|
|
|
value2: totalArr.map(val => val.value5).reduce((acc, curr) => acc + curr, 0),
|
|
|
value3: totalArr.map(val => val.value6).reduce((acc, curr) => acc + curr, 0),
|
|
|
value4: totalArr.map(val => val.value5).reduce((acc, curr) => acc + curr, 0) === 0 ? 0 : ((totalArr.map(val => val.value6).reduce((acc, curr) => acc + curr, 0) / totalArr.map(val => val.value5).reduce((acc, curr) => acc + curr, 0)) * 100).toFixed(2),
|
|
|
value5: totalArr.map(val => val.value8).reduce((acc, curr) => acc + curr, 0),
|
|
|
value6: totalArr.map(val => val.value9).reduce((acc, curr) => acc + curr, 0),
|
|
|
value7: totalArr.map(val => val.value10).reduce((acc, curr) => acc + curr, 0),
|
|
|
value8: totalArr.map(val => val.value11).reduce((acc, curr) => acc + curr, 0),
|
|
|
value9: totalArr.map(val => val.value12).reduce((acc, curr) => acc + curr, 0),
|
|
|
value10: totalArr.map(val => val.value13).reduce((acc, curr) => acc + curr, 0),
|
|
|
value11: totalArr.map(val => val.value14).reduce((acc, curr) => acc + curr, 0),
|
|
|
value12: totalArr.map(val => val.value15).reduce((acc, curr) => acc + curr, 0),
|
|
|
value13: totalArr.map(val => val.value16).reduce((acc, curr) => acc + curr, 0),
|
|
|
value14: totalArr.map(val => val.value17).reduce((acc, curr) => acc + curr, 0),
|
|
|
value15: totalArr.map(val => val.value18).reduce((acc, curr) => acc + curr, 0),
|
|
|
value16: totalArr.map(val => val.value19).reduce((acc, curr) => acc + curr, 0),
|
|
|
}
|
|
|
|
|
|
}, 30 * 1000)
|
|
|
if (this.$route.query.id === '1' || this.id === '1') {
|
|
|
this.RequestDataSet.forEach(val => {
|
|
|
mixData(val)
|
|
|
})
|
|
|
} else if (this.$route.query.id === '2' || this.id === '2') {
|
|
|
this.RequestDataSet1.forEach(val => {
|
|
|
mixData(val)
|
|
|
})
|
|
|
} else {
|
|
|
this.RequestDataSet.forEach(val => {
|
|
|
mixData(val)
|
|
|
})
|
|
|
}
|
|
|
|
|
|
intervalFun = setInterval(() => {
|
|
|
if (this.$route.query.id === '1' || this.id === '1') {
|
|
|
this.RequestDataSet.forEach(val => {
|
|
|
mixData(val)
|
|
|
})
|
|
|
} else if (this.$route.query.id === '2' || this.id === '2') {
|
|
|
this.RequestDataSet1.forEach(val => {
|
|
|
mixData(val)
|
|
|
})
|
|
|
} else {
|
|
|
this.RequestDataSet.forEach(val => {
|
|
|
mixData(val)
|
|
|
})
|
|
|
}
|
|
|
}, 1000 * 10)
|
|
|
|
|
|
},
|
|
|
methods: {},
|
|
|
beforeDestroy() {
|
|
|
if (intervalFun) {
|
|
|
clearInterval(intervalFun)
|
|
|
intervalFun = null
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
<style scoped lang="less">
|
|
|
.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;
|
|
|
background-size: 100% 100%;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
}
|
|
|
|
|
|
.headTitle {
|
|
|
position: absolute;
|
|
|
top: 5%;
|
|
|
left: 50%;
|
|
|
transform: translate(-50%, -100%);
|
|
|
font-size: 1.5vw;
|
|
|
color: #d6eaed;
|
|
|
letter-spacing: 10px;
|
|
|
}
|
|
|
|
|
|
|
|
|
.topNum {
|
|
|
position: absolute;
|
|
|
transform: translate(-50%, -50%);
|
|
|
color: #5db9e8;
|
|
|
top: 17.1%;
|
|
|
letter-spacing: 2vw;
|
|
|
}
|
|
|
|
|
|
.planNum {
|
|
|
font-size: 1.7vw;
|
|
|
left: 36.5%;
|
|
|
}
|
|
|
|
|
|
.practicalNum {
|
|
|
left: 50.9%;
|
|
|
font-size: 1.7vw;
|
|
|
color: #97febd;
|
|
|
}
|
|
|
|
|
|
.differenceValue {
|
|
|
font-size: 1.7vw;
|
|
|
left: 65.4%;
|
|
|
color: #b15462;
|
|
|
}
|
|
|
|
|
|
.scrollTable {
|
|
|
position: absolute;
|
|
|
top: 15%;
|
|
|
left: 4%;
|
|
|
width: 23%;
|
|
|
height: 20%;
|
|
|
}
|
|
|
|
|
|
.scrollTableItem {
|
|
|
color: rgb(185, 186, 192);
|
|
|
margin: auto 0px;
|
|
|
padding: 4px 0;
|
|
|
white-space: nowrap;
|
|
|
overflow: hidden;
|
|
|
text-overflow: ellipsis;
|
|
|
text-align: center;
|
|
|
display: inline-block;
|
|
|
width: 16.6%;
|
|
|
}
|
|
|
|
|
|
.chart1 {
|
|
|
position: absolute;
|
|
|
top: 14.5%;
|
|
|
left: 73%;
|
|
|
width: 23.5%;
|
|
|
height: 21%;
|
|
|
}
|
|
|
|
|
|
.chart2 {
|
|
|
position: absolute;
|
|
|
top: 43%;
|
|
|
left: 3.6%;
|
|
|
width: 23.3%;
|
|
|
height: 15.5%;
|
|
|
}
|
|
|
|
|
|
.chart3 {
|
|
|
position: absolute;
|
|
|
top: 42%;
|
|
|
left: 73%;
|
|
|
width: 23.5%;
|
|
|
height: 18.5%;
|
|
|
}
|
|
|
|
|
|
.chart4 {
|
|
|
position: absolute;
|
|
|
top: 66.2%;
|
|
|
left: 73%;
|
|
|
width: 23.5%;
|
|
|
height: 28.5%;
|
|
|
}
|
|
|
|
|
|
.scrollTable1 {
|
|
|
position: absolute;
|
|
|
top: 66%;
|
|
|
left: 3.5%;
|
|
|
width: 68%;
|
|
|
height: 25%;
|
|
|
}
|
|
|
|
|
|
.total {
|
|
|
position: absolute;
|
|
|
top: 91%;
|
|
|
left: 3.5%;
|
|
|
width: 68%;
|
|
|
height: 3%;
|
|
|
}
|
|
|
|
|
|
.table1-enter-active {
|
|
|
animation: table-in .5s;
|
|
|
}
|
|
|
|
|
|
.table1-leave-active {
|
|
|
animation: table-in .5s reverse;
|
|
|
}
|
|
|
|
|
|
|
|
|
@keyframes table-in {
|
|
|
0% {
|
|
|
opacity: 0;
|
|
|
transform: scale(0);
|
|
|
}
|
|
|
100% {
|
|
|
opacity: 1;
|
|
|
transform: scale(1);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.supplementInfo {
|
|
|
position: absolute;
|
|
|
top: 35.5%;
|
|
|
left: 73.6%;
|
|
|
font-size: 0.7vw;
|
|
|
color: #fff;
|
|
|
}
|
|
|
|
|
|
.supplementInfo1 {
|
|
|
position: absolute;
|
|
|
top: 59%;
|
|
|
left: 73.6%;
|
|
|
font-size: 0.7vw;
|
|
|
color: #fff;
|
|
|
}
|
|
|
|
|
|
.info1 {
|
|
|
position: absolute;
|
|
|
transform: translate(-50%, -50%);
|
|
|
top: 28%;
|
|
|
left: 31%;
|
|
|
font-size: 1vw;
|
|
|
color: #fff;
|
|
|
}
|
|
|
|
|
|
.status1 {
|
|
|
position: absolute;
|
|
|
transform: translate(-50%, -50%);
|
|
|
top: 28%;
|
|
|
left: 33%;
|
|
|
width: 1.5vw;
|
|
|
height: 1.5vw;
|
|
|
background: #00ff00;
|
|
|
border-radius: 50%;
|
|
|
}
|
|
|
|
|
|
.info2 {
|
|
|
position: absolute;
|
|
|
transform: translate(-50%, -50%);
|
|
|
top: 28%;
|
|
|
left: 35.5%;
|
|
|
font-size: 1vw;
|
|
|
color: #fff;
|
|
|
}
|
|
|
|
|
|
.status2 {
|
|
|
position: absolute;
|
|
|
transform: translate(-50%, -50%);
|
|
|
top: 28%;
|
|
|
left: 37.5%;
|
|
|
width: 1.5vw;
|
|
|
height: 1.5vw;
|
|
|
background: #00ff00;
|
|
|
border-radius: 50%;
|
|
|
}
|
|
|
|
|
|
.info3 {
|
|
|
position: absolute;
|
|
|
transform: translate(-50%, -50%);
|
|
|
top: 28%;
|
|
|
left: 40%;
|
|
|
font-size: 1vw;
|
|
|
color: #fff;
|
|
|
}
|
|
|
|
|
|
.status3 {
|
|
|
position: absolute;
|
|
|
transform: translate(-50%, -50%);
|
|
|
top: 28%;
|
|
|
left: 42%;
|
|
|
width: 1.5vw;
|
|
|
height: 1.5vw;
|
|
|
background: #00ff00;
|
|
|
border-radius: 50%;
|
|
|
}
|
|
|
|
|
|
.info4 {
|
|
|
position: absolute;
|
|
|
transform: translate(-50%, -50%);
|
|
|
top: 28%;
|
|
|
left: 44.5%;
|
|
|
font-size: 1vw;
|
|
|
color: #fff;
|
|
|
}
|
|
|
|
|
|
.status4 {
|
|
|
position: absolute;
|
|
|
transform: translate(-50%, -50%);
|
|
|
top: 28%;
|
|
|
left: 46.5%;
|
|
|
width: 1.5vw;
|
|
|
height: 1.5vw;
|
|
|
background: #00ff00;
|
|
|
border-radius: 50%;
|
|
|
}
|
|
|
|
|
|
.info5 {
|
|
|
position: absolute;
|
|
|
transform: translateY(-50%);
|
|
|
top: 28%;
|
|
|
left: 55%;
|
|
|
font-size: 1vw;
|
|
|
color: #fff;
|
|
|
}
|
|
|
|
|
|
.status5 {
|
|
|
position: absolute;
|
|
|
transform: translateY(-50%);
|
|
|
top: 28%;
|
|
|
left: 59.5%;
|
|
|
width: 1.5vw;
|
|
|
height: 1.5vw;
|
|
|
background: #00ff00;
|
|
|
border-radius: 50%;
|
|
|
}
|
|
|
|
|
|
.info6 {
|
|
|
position: absolute;
|
|
|
transform: translateY(-50%);
|
|
|
top: 28%;
|
|
|
left: 62%;
|
|
|
font-size: 1vw;
|
|
|
color: #fff;
|
|
|
}
|
|
|
|
|
|
.status6 {
|
|
|
position: absolute;
|
|
|
transform: translateY(-50%);
|
|
|
top: 28%;
|
|
|
left: 66.5%;
|
|
|
width: 1.5vw;
|
|
|
height: 1.5vw;
|
|
|
background: #00ff00;
|
|
|
border-radius: 50%;
|
|
|
}
|
|
|
|
|
|
.left1 {
|
|
|
background-image: url("../../../assets/board/left.png");
|
|
|
background-repeat: no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
position: absolute;
|
|
|
transform: translate(-50%, -50%);
|
|
|
top: 38%;
|
|
|
left: 32%;
|
|
|
width: 5vw;
|
|
|
height: 4.05vw;
|
|
|
|
|
|
span {
|
|
|
position: absolute;
|
|
|
transform: translate(-50%, -50%);
|
|
|
top: 28%;
|
|
|
left: 43%;
|
|
|
font-size: 1vw;
|
|
|
color: #fff;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.left2 {
|
|
|
background-image: url("../../../assets/board/right.png");
|
|
|
background-repeat: no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
position: absolute;
|
|
|
transform: translate(-50%, -50%);
|
|
|
top: 49%;
|
|
|
left: 55%;
|
|
|
width: 5vw;
|
|
|
height: 2.86vw;
|
|
|
|
|
|
span {
|
|
|
position: absolute;
|
|
|
transform: translate(-50%, -50%);
|
|
|
top: 37%;
|
|
|
left: 57%;
|
|
|
font-size: 1vw;
|
|
|
color: #fff;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.right1 {
|
|
|
background-image: url("../../../assets/board/right.png");
|
|
|
background-repeat: no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
position: absolute;
|
|
|
transform: translate(-50%, -50%);
|
|
|
top: 36%;
|
|
|
left: 57%;
|
|
|
width: 5vw;
|
|
|
height: 2.86vw;
|
|
|
|
|
|
span {
|
|
|
position: absolute;
|
|
|
transform: translate(-50%, -50%);
|
|
|
top: 37%;
|
|
|
left: 57%;
|
|
|
font-size: 1vw;
|
|
|
color: #fff;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.right2 {
|
|
|
background-image: url("../../../assets/board/right.png");
|
|
|
background-repeat: no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
position: absolute;
|
|
|
transform: translate(-50%, -50%);
|
|
|
top: 39%;
|
|
|
left: 68%;
|
|
|
width: 5vw;
|
|
|
height: 2.86vw;
|
|
|
|
|
|
span {
|
|
|
position: absolute;
|
|
|
transform: translate(-50%, -50%);
|
|
|
top: 37%;
|
|
|
left: 57%;
|
|
|
font-size: 1vw;
|
|
|
color: #fff;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.chartSpan1 {
|
|
|
position: absolute;
|
|
|
transform: translate(-50%, -50%);
|
|
|
top: 94.3%;
|
|
|
left: 73%;
|
|
|
font-size: 0.8vw;
|
|
|
color: #fff;
|
|
|
}
|
|
|
|
|
|
.chartSpan1 {
|
|
|
position: absolute;
|
|
|
transform: translate(-50%, -50%);
|
|
|
top: 94.3%;
|
|
|
left: 73%;
|
|
|
font-size: 0.8vw;
|
|
|
color: #fff;
|
|
|
}
|
|
|
|
|
|
.chartSpan2 {
|
|
|
position: absolute;
|
|
|
transform: translate(-50%, -50%);
|
|
|
top: 94.3%;
|
|
|
left: 96%;
|
|
|
font-size: 0.8vw;
|
|
|
color: #fff;
|
|
|
}
|
|
|
</style>
|