<template>
  <div class="app-container">
    <div class="headTitle">综合安全生产平台</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 class="manpowerAttendance" id="manpowerAttendance">
      <Chart ref="manpowerAttendance"></Chart>
    </div>
    <div class="classSelect">
      <el-select v-model="selectValue" placeholder="请选择">
        <el-option
          v-for="item in selectOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </div>

    <!--IQC-->
    <div class="IQC" id="IQC">
      <div style="background-color: #094170">
        <div class="scrollTableItem" style="font-weight: bold;">
          编号
        </div>
        <div class="scrollTableItem" style="font-weight: bold;width: 33.3%">
          型号
        </div>
        <div class="scrollTableItem" style="font-weight: bold;">
          计划数量
        </div>
        <div class="scrollTableItem" style="font-weight: bold;">
          完成数量
        </div>
        <div class="scrollTableItem" style="font-weight: bold;">
          差异值
        </div>
      </div>
      <vue-seamless-scroll
        :class-option="scrollTableOption"
        :data="scrollTableData"
        class="case-item"
        style="height: calc(100% - 35px);overflow: hidden;"
      >
        <div
          v-for="(item, index) in scrollTableData"
          :key="index"

        >
          <div :style='"background-color:" + ((index % 2 === 0)? "#053460":"#032d57") '>
            <div
              class="scrollTableItem">
              {{ item.value1 }}
            </div>
            <div
              class="scrollTableItem" style="width: 33.3%">
              A-{{ item.value2 }}
            </div>
            <div
              class="scrollTableItem">
              {{ item.value3 }}
            </div>
            <div
              class="scrollTableItem">
              {{ item.value4 }}
            </div>
            <div
              class="scrollTableItem">
              {{ item.value5 }}
            </div>
          </div>
        </div>
      </vue-seamless-scroll>
    </div>

    <!--生产效率-->
    <div class="productionEfficiency" id="productionEfficiency">
      <Chart ref="productionEfficiency"></Chart>
    </div>


    <!--周质量分析-->
    <div class="equipmentPowerOne" id="equipmentPowerOne">
      <Chart ref="equipmentPowerOne"></Chart>
    </div>
    <div class="equipmentPowerTwo" id="equipmentPowerTwo">
      <Chart ref="equipmentPowerTwo"></Chart>
    </div>
    <div class="equipmentPowerThree" id="equipmentPowerThree">
      <Chart ref="equipmentPowerThree"></Chart>
    </div>
    <div class="equipmentPowerFour" id="equipmentPowerFour">
      <Chart ref="equipmentPowerFour"></Chart>
    </div>
    <div class="equipmentPowerFive" id="equipmentPowerFive">
      <Chart ref="equipmentPowerFive"></Chart>
    </div>
    <div class="equipmentPowerSix" id="equipmentPowerSix">
      <Chart ref="equipmentPowerSix"></Chart>
    </div>


    <div class="topLeft" id="topLeft">
      <Chart ref="topLeft"></Chart>
    </div>

    <div v-html="safeDayHtml"></div>
    <div class="totalNum">总数：{{ totalNum }}</div>
  </div>
</template>

<script>
import vueSeamlessScroll from "vue-seamless-scroll";
import Chart from "../../../components/board/Chart";
import * as echarts from 'echarts'
import {getData} from "@/api/board/getData";

export default {
  components: {
    vueSeamlessScroll,
    Chart
  },
  name: "Liner",
  data() {
    return {
      selectOptions: [
        {
          value: '1',
          label: '老线'
        },
        {
          value: '2',
          label: '新线'
        },
        {
          value: '3',
          label: '合计'
        },
      ],
      selectValue: '1',
      title: [
        '产量统计',
        '三日订单执行情况',
        '班组 6s 排行榜',
        '周生产型号统计',
        '重点工序监控',
        '安全生产',
      ],
      totalNum: 10000,
      titlePosition: [
        {
          top: 11.5,
          left: 5.5
        },
        {
          top: 11.5,
          left: 32
        },
        {
          top: 11.5,
          left: 73.5
        },
        {
          top: 55.4,
          left: 5.5
        },
        {
          top: 55.4,
          left: 32
        },
        {
          top: 55.4,
          left: 73.6
        },
      ],
      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: [],
      safeDayHtml: null
    }
  },
  mounted() {
    getData().then(e => {
      this.scrollTableData = e.table8
    })
    let min = Math.ceil(Math.min(...[61, 25, 57, 83, 87, 73, 17, 25, 57, 83, 87, 73],))
    let max = Math.ceil(Math.max(...[61, 25, 57, 83, 87, 73, 17, 25, 57, 83, 87, 73],))
    const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100

    this.$refs.manpowerAttendance.setData({
      color: ['#33a2fe', '#33a2fe', '#33a2fe', '#33a2fe', '#33a2fe'],
      grid: {
        top: "20%",
        bottom: "15%",
        right: "5%"
      },
      dataZoom: [],
      xAxis: {
        margin: 10,
        nameTextStyle: {
          color: '#c0c3cd',
          padding: [0, 0, -10, 0],
          fontSize: 14,
        },
        axisLabel: {
          color: '#c0c3cd', //X轴文字
          fontSize: 14,
          interval: 0,
          margin: 20,
          rotate: -20,
        },
        axisTick: {
          lineStyle: {
            color: '#0B1535',
            width: 1,
          },
          show: false,
        },
        splitLine: {
          show: false,
        },
        axisLine: {
          lineStyle: {
            color: '#384267',
            width: 1,
            type: 'dashed',
          },
          show: true,
        },
        data: ['人A', '人B', '人C', '人D', '人E', '人F', '人G', '人H'],
        type: 'category',
      },
      yAxis: {
        type: 'value',
        nameTextStyle: {
          color: '#c0c3cd',
          padding: [0, 0, -10, 0],
          fontSize: 14,
        },
        axisLabel: {
          color: '#c0c3cd', //Y轴文字
          fontSize: 14,
        },
        axisTick: {
          lineStyle: {
            color: '#384267',
            width: 1,
          },
          show: true,
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: '#384267',
            type: 'line',
          },
        },
        axisLine: {
          lineStyle: {
            color: '#fff',
            width: 1,
            type: 'line',
          },
          show: false,
        },
      },
      series: [
        {
          data: [60, 55, 45, 42, 40, 40, 39, 38],
          type: 'pictorialBar',
          barMaxWidth: 'auto',
          barWidth: 1.5 * vw,
          symbol: 'rect',
          itemStyle: {
            color: function (val) {
              if ([60, 55, 45, 42, 40, 40, 39, 38].length - val.dataIndex === 1) {
                return 'red'
              } else if ([60, 55, 45, 42, 40, 40, 39, 38].length - val.dataIndex === 2) {
                return 'yellow'

              } else {
                return '#35AAFE'
              }
            }
          },
          label: {
            normal: {
              show: true,
              position: "top",
              textStyle: {
                color: "#a8aab0",
                fontStyle: "normal",
                fontFamily: "微软雅黑",
                fontSize: 0.75 * vw,
              },
            },
          }
        },
        {
          data: [60, 55, 45, 42, 40, 40, 39, 38],
          type: 'pictorialBar',
          barWidth: 1.5 * vw,
          symbolPosition: 'end',
          symbol: 'diamond',
          itemStyle: {
            color: function (val) {
              if ([60, 55, 45, 42, 40, 40, 39, 38].length - val.dataIndex === 1) {
                return 'red'
              } else if ([60, 55, 45, 42, 40, 40, 39, 38].length - val.dataIndex === 2) {
                return 'yellow'
              } else {
                return '#66c8ff'
              }
            }
          },
          symbolOffset: ['0%', '-50%'],
          symbolSize: [1.5 * vw, 10],
          zlevel: 4,
        },
        {
          data: [60, 55, 45, 42, 40, 40, 39, 38].map(val => 1),
          type: 'pictorialBar',
          barWidth: 1.5 * vw,
          symbolPosition: 'end',
          symbol: 'diamond',
          itemStyle: {
            color: function (val) {
              if ([60, 55, 45, 42, 40, 40, 39, 38].length - val.dataIndex === 1) {
                return 'red'
              } else if ([60, 55, 45, 42, 40, 40, 39, 38].length - val.dataIndex === 2) {
                return 'yellow'

              } else {
                return '#66c8ff'
              }
            }
          },
          symbolOffset: ['0%', '-20%'],
          symbolSize: [1.5 * vw, 10],
          zlevel: 4,
        },
        // {
        //   type: 'pictorialBar',
        //   name: 'pictorial element',
        //   symbol: function (val, index) {
        //     // return 'image://' + 'http://10.100.70.5:9090/' + data.yImg[index.dataIndex]
        //   },
        //   symbolSize: [40, 40],
        //   z: 10,
        //   data: [60, 55, 45, 42, 40, 40, 39, 38].map(val => {
        //     return {
        //       value: val,
        //       symbolPosition: 'end',
        //       symbolOffset: [0, '-190%']
        //     }
        //   })
        // },
      ]
    })
    this.$refs.topLeft.setData({
      grid: {
        top: "20%",
        left: "1%",
        right: "5%",
        bottom: "1%",
        containLabel: true,
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {
        right: '0',
        data: ['计划', '实际'],
        textStyle: {
          fontSize: 0.75 * vw,
          color: "#F1F1F3",
        },
      },
      xAxis: [
        {
          type: 'category',
          axisTick: {show: false},
          axisLabel: {
            rotate: -20,
            margin: 20,
            textStyle: {
              fontSize: 0.75 * vw,
              color: "#F1F1F3",
            },
          },
          data: ['1日', '2日', '3日', '4日', '5日', '6日', '7日']
        }
      ],
      yAxis: [
        {
          axisLabel: {
            textStyle: {
              fontSize: 0.75 * vw,
              color: "#F1F1F3",
            },
          },
          splitLine: {
            lineStyle: {
              color: "rgba(255,255,255,0.1)",
            },
          },
          type: 'value'
        }
      ],
      series: [
        {
          name: '计划',
          type: 'bar',
          barGap: 0,
          emphasis: {
            focus: 'series'
          },
          barWidth: '30%',
          barMaxWidth: '50px',
          itemStyle: {
            //图形样式
            normal: {
              color: true ? '#db8151' : "#64BCEC",
            },
          },
          label: {
            show: true,
            position: "top",
            formatter: `{c}${''}`,
            textStyle: {
              color: "rgba(255,255,255,0.5)",
              fontSize: 0.75 * vw
            },
          },
          data: [22, 52, 55, 12, 35, 44, 66],
        },
        {
          name: '实际',
          type: 'bar',
          emphasis: {
            focus: 'series'
          },
          barWidth: '30%',
          barMaxWidth: '50px',
          barGap: '40%',
          label: {
            show: true,
            position: "top",
            formatter: `{c}${''}`,
            textStyle: {
              color: "rgba(255,255,255,0.5)",
              fontSize: 0.75 * vw
            },
          },
          itemStyle: {
            //图形样式
            normal: {
              color: true ? '#9ce375' : "#4FD3B9",
            },
          },
          data: [32, 42, 50, 22, 30, 40, 52],
        },
      ]
    })
    this.$refs.productionEfficiency.setData({
      grid: {
        top: "10%",
        left: '10%',
        right: "5%",
        bottom: '15%',
        // containLabel: true
      },
      dataZoom: [],
      xAxis: {
        data: ["A-1", "A-2", "A-3", "A-4", "A-5", "A-6", "A-7"],
        axisLine: {
          lineStyle: {
            color: "#0177d4",
          },
        },
        axisLabel: {
          color: "#fff",
          fontSize: 0.5 * vw,
          interval: 0,
          rotate: -20,
        },
      },
      yAxis: {
        nameTextStyle: {
          color: "#fff",
          fontSize: 16,
        },
        axisLine: {
          lineStyle: {
            color: "#0177d4",
          },
        },
        axisLabel: {
          color: "#fff",
          fontSize: 16,
        },
        splitLine: {
          show: false,
          lineStyle: {
            color: "#0177d4",
          },
        },
      },
      series: [
        {
          type: "bar",
          barWidth: 1 * vw,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "#00b0ff",
                  },
                  {
                    offset: 0.8,
                    color: "#7052f4",
                  },
                ],
                false
              ),
            },
          },
          label: {
            show: true,
            position: "top",
            textStyle: {
              color: "#fff",
              fontSize: 0.75 * vw
            },
          },
          data: [12, 20, 11, 30, 14, 80, 50].sort().reverse(),
        },
      ],
    })


    this.$refs.equipmentPowerOne.setData({
      series: [
        {
          type: "pie",
          clockWise: false,
          radius: ['60%', '75%'],
          itemStyle: {
            normal: {
              label: {
                show: false,
              },
              labelLine: {
                show: false,
              },
              shadowBlur: 0,
              shadowColor: "#389af4",
            },
          },
          hoverAnimation: false,
          center: ["50%", "50%"],
          data: [
            {
              value: 50,
              label: {
                normal: {
                  rich: {
                    a: {
                      color: "#389af4",
                      align: "center",
                      fontSize: 1.1 * vw,
                      fontWeight: "bold",
                    },
                    b: {
                      color: "#fff",
                      align: "center",
                      fontSize: 0.5 * vw,
                    },
                  },
                  formatter: function (params) {
                    return (
                      "{a|" +
                      params.value +
                      "%}" +
                      "\n{b|内胆检漏}"
                    );
                  },
                  position: "center",
                  show: true,
                  textStyle: {
                    fontSize: "14",
                    fontWeight: "normal",
                    color: "#fff",
                  },
                },
              },
              itemStyle: {
                normal: {
                  color: "#389af4",
                  shadowColor: "#389af4",
                  shadowBlur: 0,
                },
              },
            },
            {
              value: 50,
              name: "invisible",
              itemStyle: {
                normal: {
                  color: "#412a4e",
                },
                emphasis: {
                  color: "#412a4e",
                },
              },
            },
          ],
        },
      ],
    })
    this.$refs.equipmentPowerTwo.setData({
      series: [
        {
          type: "pie",
          clockWise: false,
          radius: ['60%', '75%'],
          itemStyle: {
            normal: {
              label: {
                show: false,
              },
              labelLine: {
                show: false,
              },
              shadowBlur: 0,
              shadowColor: "#ff8c37",
            },
          },
          hoverAnimation: false,
          center: ["50%", "50%"],
          data: [
            {
              value: 50,
              label: {
                normal: {
                  rich: {
                    a: {
                      color: "#ff8c37",
                      align: "center",
                      fontSize: 1.1 * vw,
                      fontWeight: "bold",
                    },
                    b: {
                      color: "#fff",
                      align: "center",
                      fontSize: 0.5 * vw,
                    },
                  },
                  formatter: function (params) {
                    return (
                      "{a|" +
                      params.value +
                      "%}" +
                      "\n{b|灌注}"
                    );
                  },
                  position: "center",
                  show: true,
                  textStyle: {
                    fontSize: "14",
                    fontWeight: "normal",
                    color: "#fff",
                  },
                },
              },
              itemStyle: {
                normal: {
                  color: "#ff8c37",
                  shadowColor: "#ff8c37",
                  shadowBlur: 0,
                },
              },
            },
            {
              value: 50,
              name: "invisible",
              itemStyle: {
                normal: {
                  color: "#412a4e",
                },
                emphasis: {
                  color: "#412a4e",
                },
              },
            },
          ],
        },
      ],
    })
    this.$refs.equipmentPowerThree.setData({
      series: [
        {
          type: "pie",
          clockWise: false,
          radius: ['60%', '75%'],
          itemStyle: {
            normal: {
              label: {
                show: false,
              },
              labelLine: {
                show: false,
              },
              shadowBlur: 0,
              shadowColor: "#ffc257",
            },
          },
          hoverAnimation: false,
          center: ["50%", "50%"],
          data: [
            {
              value: 50,
              label: {
                normal: {
                  rich: {
                    a: {
                      color: "#ffc257",
                      align: "center",
                      fontSize: 1.1 * vw,
                      fontWeight: "bold",
                    },
                    b: {
                      color: "#fff",
                      align: "center",
                      fontSize: 0.5 * vw,
                    },
                  },
                  formatter: function (params) {
                    return (
                      "{a|" +
                      params.value +
                      "%}" +
                      "\n{b|低压检漏}"
                    );
                  },
                  position: "center",
                  show: true,
                  textStyle: {
                    fontSize: "14",
                    fontWeight: "normal",
                    color: "#fff",
                  },
                },
              },
              itemStyle: {
                normal: {
                  color: "#ffc257",
                  shadowColor: "#ffc257",
                  shadowBlur: 0,
                },
              },
            },
            {
              value: 50,
              name: "invisible",
              itemStyle: {
                normal: {
                  color: "#412a4e",
                },
                emphasis: {
                  color: "#412a4e",
                },
              },
            },
          ],
        },
      ],
    })
    this.$refs.equipmentPowerFour.setData({
      series: [
        {
          type: "pie",
          clockWise: false,
          radius: ['60%', '75%'],
          itemStyle: {
            normal: {
              label: {
                show: false,
              },
              labelLine: {
                show: false,
              },
              shadowBlur: 0,
              shadowColor: "#fd6f97",
            },
          },
          hoverAnimation: false,
          center: ["50%", "50%"],
          data: [
            {
              value: 50,
              label: {
                normal: {
                  rich: {
                    a: {
                      color: "#fd6f97",
                      align: "center",
                      fontSize: 1.1 * vw,
                      fontWeight: "bold",
                    },
                    b: {
                      color: "#fff",
                      align: "center",
                      fontSize: 0.5 * vw,
                    },
                  },
                  formatter: function (params) {
                    return (
                      "{a|" +
                      params.value +
                      "%}" +
                      "\n{b|安规检}"
                    );
                  },
                  position: "center",
                  show: true,
                  textStyle: {
                    fontSize: "14",
                    fontWeight: "normal",
                    color: "#fff",
                  },
                },
              },
              itemStyle: {
                normal: {
                  color: "#fd6f97",
                  shadowColor: "#fd6f97",
                  shadowBlur: 0,
                },
              },
            },
            {
              value: 50,
              name: "invisible",
              itemStyle: {
                normal: {
                  color: "#412a4e",
                },
                emphasis: {
                  color: "#412a4e",
                },
              },
            },
          ],
        },
      ],
    })
    this.$refs.equipmentPowerFive.setData({
      series: [
        {
          type: "pie",
          clockWise: false,
          radius: ['60%', '75%'],
          itemStyle: {
            normal: {
              label: {
                show: false,
              },
              labelLine: {
                show: false,
              },
              shadowBlur: 0,
              shadowColor: "#a181fc",
            },
          },
          hoverAnimation: false,
          center: ["50%", "50%"],
          data: [
            {
              value: 50,
              label: {
                normal: {
                  rich: {
                    a: {
                      color: "#a181fc",
                      align: "center",
                      fontSize: 1.1 * vw,
                      fontWeight: "bold",
                    },
                    b: {
                      color: "#fff",
                      align: "center",
                      fontSize: 0.5 * vw,
                    },
                  },
                  formatter: function (params) {
                    return (
                      "{a|" +
                      params.value +
                      "%}" +
                      "\n{b|测温}"
                    );
                  },
                  position: "center",
                  show: true,
                  textStyle: {
                    fontSize: "14",
                    fontWeight: "normal",
                    color: "#fff",
                  },
                },
              },
              itemStyle: {
                normal: {
                  color: "#a181fc",
                  shadowColor: "#a181fc",
                  shadowBlur: 0,
                },
              },
            },
            {
              value: 50,
              name: "invisible",
              itemStyle: {
                normal: {
                  color: "#412a4e",
                },
                emphasis: {
                  color: "#412a4e",
                },
              },
            },
          ],
        },
      ],
    })
    this.$refs.equipmentPowerSix.setData({
      series: [
        {
          type: "pie",
          clockWise: false,
          radius: ['60%', '75%'],
          itemStyle: {
            normal: {
              label: {
                show: false,
              },
              labelLine: {
                show: false,
              },
              shadowBlur: 0,
              shadowColor: "#5d73ff",
            },
          },
          hoverAnimation: false,
          center: ["50%", "50%"],
          data: [
            {
              value: 50,
              label: {
                normal: {
                  rich: {
                    a: {
                      color: "#5d73ff",
                      align: "center",
                      fontSize: 1.1 * vw,
                      fontWeight: "bold",
                    },
                    b: {
                      color: "#fff",
                      align: "center",
                      fontSize: 0.5 * vw,
                    },
                  },
                  formatter: function (params) {
                    return (
                      "{a|" +
                      params.value +
                      "%}" +
                      "\n{b|终检}"
                    );
                  },
                  position: "center",
                  show: true,
                  textStyle: {
                    fontSize: "14",
                    fontWeight: "normal",
                    color: "#fff",
                  },
                },
              },
              itemStyle: {
                normal: {
                  color: "#5d73ff",
                  shadowColor: "#5d73ff",
                  shadowBlur: 0,
                },
              },
            },
            {
              value: 50,
              name: "invisible",
              itemStyle: {
                normal: {
                  color: "#412a4e",
                },
                emphasis: {
                  color: "#412a4e",
                },
              },
            },
          ],
        },
      ],
    })
    this.day()
  },
  methods: {

    day() {
      const today = () => {
        const currentYear = new Date().getFullYear().toString();
        const hasTimestamp = new Date() - new Date(currentYear) + (8 * 60 * 60 * 1000);
        const hasDays = Math.ceil(hasTimestamp / 86400000);
        return hasDays
      }
      this.safeDayHtml = `
    <span style="position: absolute;top: 66%;left: 84%;white-space:nowrap;color: #CBE6F7;font-size: 1.3vw;font-weight:600;transform: translateX(-50%);letter-spacing: 0.3vw">${new Date().getFullYear().toString()}年连续安全生产天数</span>
    <span style="position: absolute;top: 74%;left: 84%;color: #08F580;font-size: 2.5vw;transform: translateX(-50%);letter-spacing: 0.3vw">${today()}<span style="font-size: 0.5vw">天</span> </span>
    <span style="position: absolute;top: 89%;left: 84%;color: #CBE6F7;font-size: 1vw;transform: translateX(-50%);letter-spacing: 0.3vw">智能互联工厂</span>
    `
    }
  }
}
</script>
<style scoped>
.app-container {
  background-image: url("../../../assets/board/week.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;
}

.title {
  position: absolute;
  transform: translateY(-50%);
  color: #dddddd;
  font-size: 1vw;
  letter-spacing: 2px;
}

.manpowerAttendance {
  position: absolute;
  width: 25%;
  height: 35%;
  top: 15%;
  left: 71.5%;
}

.IQC {
  position: absolute;
  width: 40%;
  height: 35%;
  top: 15%;
  left: 30%;
}

.productionEfficiency {
  position: absolute;
  width: 25%;
  height: 35%;
  top: 60%;
  left: 3%;
}

.topLeft {
  position: absolute;
  width: 25%;
  height: 34%;
  top: 15.5%;
  left: 3.5%;
}

.equipmentPowerOne {
  position: absolute;
  width: 13%;
  height: 16%;
  top: 60%;
  left: 30.5%;
}

.equipmentPowerTwo {
  position: absolute;
  width: 13%;
  height: 16%;
  top: 60%;
  left: 43.5%;
}

.equipmentPowerThree {
  position: absolute;
  width: 13%;
  height: 16%;
  top: 60%;
  left: 56.5%;
}

.equipmentPowerFour {
  position: absolute;
  width: 13%;
  height: 16%;
  top: 76%;
  left: 30.5%;
}

.equipmentPowerFive {
  position: absolute;
  width: 13%;
  height: 16%;
  top: 76%;
  left: 43.5%;
}

.equipmentPowerSix {
  position: absolute;
  width: 13%;
  height: 16%;
  top: 76%;
  left: 56.5%;
}

.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%;
}

.totalNum {
  position: absolute;
  top: 11.5%;
  left: 18%;
  transform: translateY(-50%);
  color: #fff;
  font-size: 0.8vw;
}

.classSelect {
  position: absolute;
  top: 6%;
  left: 4%;
  width: 5vw;
}
</style>
