<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>
