zs_aucma-mes-ui/src/views/model/equipment.vue

<template>
  <div class="app-container">
    <div class="headTitle">设备运营中心</div>
    <div class="exit" @click="exitFun"></div>


    <div class="box1">
      <div class="boxTitle">点检统计分析</div>
      <div class="chart1">
        <Chart ref="chart1"></Chart>
      </div>
    </div>
    <div class="box2">
      <div class="boxTitle">保养统计分析</div>
      <div class="chart2">
        <Chart ref="chart2"></Chart>
      </div>
    </div>
    <div class="box3">
      <div class="boxTitle">设备状态</div>
    </div>
    <div class="box4">
      <div class="boxTitle">故障类型统计</div>
      <div class="chart4">
        <Chart ref="chart4"></Chart>
      </div>
    </div>
    <div class="box5">
      <div class="boxTitle">单台能耗</div>
      <div class="chart5">
        <Chart ref="chart5"></Chart>
      </div>
    </div>
    <div class="box6">
      <div class="boxTitle">故障统计分析</div>
      <div class="chart6">
        <Chart ref="chart6"></Chart>
      </div>
    </div>
    <div class="box7">
      <div class="boxTitle">保养看板</div>
      <div class="scrollTable">
        <div style="background-color: #09417066">
          <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 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: 84%;overflow: hidden;"
        >
          <div
            v-for="(item, index) in scrollTableData"
            :key="index"
          >
            <div :style='"background-color:" + ((index % 2 === 0)? "#05346066":"#032d5766") '>
              <div
                class="scrollTableItem">
                {{ item.value1 }}
              </div>
              <div
                class="scrollTableItem">
                {{ item.value1 }}
              </div>
              <div
                class="scrollTableItem">
                {{ 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>
    <div class="box8">
      <div class="boxTitle">异常看板</div>
      <div class="scrollTable">
        <div style="background-color: #09417066">
          <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 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: 84%;overflow: hidden;"
        >
          <div
            v-for="(item, index) in scrollTableData"
            :key="index"
          >
            <div :style='"background-color:" + ((index % 2 === 0)? "#05346066":"#032d5766") '>
              <div
                class="scrollTableItem">
                {{ item.value1 }}
              </div>
              <div
                class="scrollTableItem">
                {{ item.value1 }}
              </div>
              <div
                class="scrollTableItem">
                {{ item.value2 }}
              </div>
              <div
                class="scrollTableItem">
                {{ item.value3 }}
              </div>
              <div
                class="scrollTableItem">
                {{ item.value4 }}
              </div>
            </div>
          </div>
        </vue-seamless-scroll>
      </div>
    </div>

    <div class="chart11">
      <Chart ref="chart11"></Chart>
    </div>
    <div class="chart12">
      <Chart ref="chart12"></Chart>
    </div>
    <div class="chart13">
      <Chart ref="chart13"></Chart>
    </div>
    <div class="chart14">
      <Chart ref="chart14"></Chart>
    </div>
    <div class="chart15">
      <Chart ref="chart15"></Chart>
    </div>
    <div class="chart16">
      <Chart ref="chart16"></Chart>
    </div>
    <div class="electricity">
      <div class="span1">用电消耗</div>
      <div class="span2">11111kw·h</div>
      <div class="span3">当日总耗电量</div>
      <div class="span4">环比：
        <div class="span5">57.00% ↑</div>
      </div>
    </div>

  </div>
</template>

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

export default {
  name: "Liner",
  components: {
    Chart,
    vueSeamlessScroll,
  },
  props: {
    exit: {
      type: Function,
      default: null
    }
  },
  data() {
    return {}
  },
  mounted() {
    const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
    this.$refs.chart1.setData({
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
          textStyle: {
            color: "#fff",
          },
        },
      },
      grid: {
        borderWidth: 0,
        top: 2 * vw,
        bottom: 1.5 * vw,
        left: 2.5 * vw,
        right: 2.5 * vw,
        textStyle: {
          color: "#fff",
        },
      },
      legend: {
        x: "center",
        top: "0",
        textStyle: {
          fontSize: 0.6 * vw,
          color: "#90979c",
        },
      },
      xAxis: [
        {
          type: "category",
          axisLine: {
            lineStyle: {
              color: "#90979c",
            },
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitArea: {
            show: false,
          },
          axisLabel: {
            interval: 0,
            fontSize: 0.5 * vw,
          },
          data: [1, 2, 3, 4, 5, 6, 7, 8, 9],
        },
      ],
      yAxis: [
        {
          type: "value",
          splitLine: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: "#90979c",
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            interval: 0,
            fontSize: 0.5 * vw,
          },
          splitArea: {
            show: false,
          },
        },
        {
          type: "value",
          splitLine: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: "#90979c",
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            interval: 0,
            fontSize: 0.5 * vw,
            formatter: "{value}%"
          },
          splitArea: {
            show: false,
          },
        },
      ],
      series: [
        {
          name: "需点检",
          type: "bar",
          borderWidth: '15%',
          itemStyle: {
            normal: {
              color: "#3fd498",
            },
          },
          data: [
            709, 1917, 2455, 2610, 1719, 1433, 1544, 3285, 5208
          ],
        },

        {
          name: "已点检",
          type: "bar",
          borderWidth: '15%',
          barGap: "-100%",
          itemStyle: {
            normal: {
              color: "#78b4fe",
              barBorderRadius: 0,
            },
          },
          data: [327, 1776, 507, 1200, 800, 482, 204, 1390, 1001],
        },
        {
          name: "点检率",
          type: "line",
          symbolSize: 10,
          symbol: "circle",
          yAxisIndex: 1,
          itemStyle: {
            normal: {
              color: "#885576",
              barBorderRadius: 0,
              label: {
                show: true,
                position: "top",
                color: "#fff",
                fontSize: 0.6 * vw,
                formatter: function (p) {
                  return (p.value > 0 ? p.value : "") + '%';
                },
              },
            },
          },
          data: [
            96, 91, 96, 65, 86, 96, 91, 94, 100
          ],
        },
      ],
    })
    this.$refs.chart2.setData({
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
          textStyle: {
            color: "#fff",
          },
        },
      },
      grid: {
        borderWidth: 0,
        top: 2 * vw,
        bottom: 1.5 * vw,
        left: 2.5 * vw,
        right: 2.5 * vw,
        textStyle: {
          color: "#fff",
        },
      },
      legend: {
        x: "center",
        top: "0",
        textStyle: {
          fontSize: 0.6 * vw,
          color: "#90979c",
        },
      },
      xAxis: [
        {
          type: "category",
          axisLine: {
            lineStyle: {
              color: "#90979c",
            },
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitArea: {
            show: false,
          },
          axisLabel: {
            interval: 0,
            fontSize: 0.5 * vw,
          },
          data: [1, 2, 3, 4, 5, 6, 7, 8, 9],
        },
      ],
      yAxis: [
        {
          type: "value",
          splitLine: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: "#90979c",
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            interval: 0,
            fontSize: 0.5 * vw,
          },
          splitArea: {
            show: false,
          },
        },
        {
          type: "value",
          splitLine: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: "#90979c",
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            interval: 0,
            fontSize: 0.5 * vw,
            formatter: "{value}%"
          },
          splitArea: {
            show: false,
          },
        },
      ],
      series: [
        {
          name: "需保养",
          type: "bar",
          borderWidth: '15%',
          itemStyle: {
            normal: {
              color: "#f27f2b",
            },
          },
          data: [
            709, 1917, 2455, 2610, 1719, 1433, 1544, 3285, 5208
          ],
        },

        {
          name: "已保养",
          type: "bar",
          borderWidth: '15%',
          barGap: "-100%",
          itemStyle: {
            normal: {
              color: "#78b4fe",
              barBorderRadius: 0,
            },
          },
          data: [327, 1776, 507, 1200, 800, 482, 204, 1390, 1001],
        },
        {
          name: "点检率",
          type: "line",
          symbolSize: 10,
          symbol: "circle",
          yAxisIndex: 1,
          itemStyle: {
            normal: {
              color: "#885576",
              barBorderRadius: 0,
              label: {
                show: true,
                position: "top",
                color: "#fff",
                fontSize: 0.6 * vw,
                formatter: function (p) {
                  return (p.value > 0 ? p.value : "") + '%';
                },
              },
            },
          },
          data: [
            96, 91, 96, 65, 86, 96, 91, 94, 100
          ],
        },
      ],
    })
    this.$refs.chart4.setData({
      grid: {
        top: "15%",
        bottom: "10%", //也可设置left和right设置距离来控制图表的大小
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
          label: {
            show: true,
          },
        },
      },
      legend: {
        data: ["占比"],
        top: "3%",
        textStyle: {
          color: "#ffffff",
        },
      },
      xAxis: {
        data: [
          "测温",
          "捡漏",
          "后板",
          "系统件",
        ],
        axisLine: {
          show: true, //隐藏X轴轴线
          lineStyle: {
            color: "#ffffff66",
          },
        },
        axisTick: {
          show: true, //隐藏X轴刻度
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: "#ffffff66", //X轴文字颜色
          },
        },
      },
      yAxis: [
        {
          type: "value",
          name: "缺陷占比",
          nameTextStyle: {
            color: "#ffffff66",
          },
          position: "left",
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#ffffff66",
            },
          },
        },
      ],
      series: [
        {
          name: "占比",
          type: "line",
          label: {
            normal: {
              show: true,
              position: "bottom",
              textStyle: {
                color: "#a8aab0",
                fontStyle: "normal",
                fontFamily: "微软雅黑",
                fontSize: 0.75 * vw,
              },
            },
          },
          showAllSymbol: true, //显示所有图形。
          symbol: "circle", //标记的图形为实心圆
          symbolSize: 5, //标记的大小
          itemStyle: {
            //折线拐点标志的样式
            color: "#ffffff",
          },
          lineStyle: {
            color: "#ffffff",
          },
          data: [94.7, 93.2, 94.7, 93.4],
        },
      ],
    })
    this.$refs.chart5.setData({
      grid: {
        top: "15%",
        bottom: "10%", //也可设置left和right设置距离来控制图表的大小
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
          label: {
            show: true,
          },
        },
      },
      legend: {
        data: ["能耗"],
        top: "3%",
        textStyle: {
          color: "#ffffff",
        },
      },
      xAxis: {
        data: [
          "01",
          "02",
          "03",
          "04",
        ],
        axisLine: {
          show: true, //隐藏X轴轴线
          lineStyle: {
            color: "#ffffff66",
          },
        },
        axisTick: {
          show: true, //隐藏X轴刻度
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: "#ffffff66", //X轴文字颜色
          },
        },
      },
      yAxis: [
        {
          type: "value",
          name: "能耗/kw·h",
          nameTextStyle: {
            color: "#ffffff66",
          },
          position: "left",
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#ffffff66",
            },
          },
        },
      ],
      series: [
        {
          name: "能耗",
          type: "line",
          label: {
            normal: {
              show: true,
              position: "bottom",
              formatter: '{c}kw·h',
              textStyle: {
                color: "#a8aab0",
                fontStyle: "normal",
                fontFamily: "微软雅黑",
                fontSize: 0.75 * vw,
              },
            },
          },
          showAllSymbol: true, //显示所有图形。
          symbol: "circle", //标记的图形为实心圆
          symbolSize: 5, //标记的大小
          itemStyle: {
            //折线拐点标志的样式
            color: "#ffffff",
          },
          lineStyle: {
            color: "#ffffff",
          },
          data: [94.7, 93.2, 94.7, 93.4],
        },
      ],
    })
    this.$refs.chart6.setData({
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
          textStyle: {
            color: "#fff",
          },
        },
      },
      grid: {
        borderWidth: 0,
        top: 2 * vw,
        bottom: 1.5 * vw,
        left: 2.5 * vw,
        right: 2.5 * vw,
        textStyle: {
          color: "#fff",
        },
      },
      legend: {
        x: "center",
        top: "0",
        textStyle: {
          fontSize: 0.6 * vw,
          color: "#90979c",
        },
      },
      xAxis: [
        {
          type: "category",
          axisLine: {
            lineStyle: {
              color: "#90979c",
            },
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitArea: {
            show: false,
          },
          axisLabel: {
            interval: 0,
            fontSize: 0.5 * vw,
          },
          data: [1, 2, 3, 4, 5, 6, 7, 8, 9],
        },
      ],
      yAxis: [
        {
          name: '故障数',
          type: "value",
          splitLine: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: "#90979c",
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            interval: 0,
            fontSize: 0.5 * vw,
          },
          splitArea: {
            show: false,
          },
        },
      ],
      series: [
        {
          name: "故障数",
          type: "bar",
          borderWidth: '15%',
          itemStyle: {
            normal: {
              color: "#62aafe",
            },
          },
          data: [
            709, 1917, 2455, 2610, 1719, 1433, 1544, 3285, 5208
          ],
        },
      ],
    })

    this.$refs.chart11.setData({
      tooltip: {
        trigger: "item",
        formatter: "{a} <br/>{b} : {c} ({d}%)",
      },
      series: [
        {
          name: "",
          type: "pie",
          center: ["50%", "50%"],
          radius: ["85%", "100%"],
          data: [
            {value: 280, name: "设备总数"},
          ],
          label: {
            normal: {
              rich: {
                a: {
                  color: "#fff",
                  align: "center",
                  fontSize: 1.5 * vw,
                  fontWeight: "bold",
                },
                b: {
                  color: "#fff",
                  align: "center",
                  fontSize: 0.8 * vw,
                },
              },
              formatter: function (params) {
                return (
                  "{a|" +
                  params.value +
                  "}" +
                  "\n{b|" +
                  params.name +
                  "}"
                );
              },
              position: "center",
              show: true,
              textStyle: {
                fontSize: "14",
                fontWeight: "normal",
                color: "#fff",
              },
            },
          },
          itemStyle: {
            normal: {
              color: "#fa2f5a",
              label: {
                show: false,
                formatter: "{b} : {c} ({d}%)",
                color: "#fff"
              },
            },
            labelLine: {show: true},
          },
        },
      ],
    })
    this.$refs.chart12.setData({
      tooltip: {
        trigger: "item",
      },
      color: ['#5470c6', '#0000'],
      series: [
        {
          name: "在线设备数",
          type: "pie",
          center: ["50%", "50%"],
          radius: ["85%", "100%"],
          data: [
            {value: 254, name: "在线设备数"},
            {value: 26, name: "0"},
          ],
          label: {
            normal: {
              rich: {
                a: {
                  color: "#fff",
                  align: "center",
                  fontSize: 1.5 * vw,
                  fontWeight: "bold",
                },
                b: {
                  color: "#fff",
                  align: "center",
                  fontSize: 0.8 * vw,
                },
              },
              formatter: function (params) {
                return (
                  "{a|" +
                  params.value +
                  "}" +
                  "\n{b|" +
                  params.name +
                  "}"
                );
              },
              position: "center",
              show: true,
              textStyle: {
                fontSize: "14",
                fontWeight: "normal",
                color: "#fff",
              },
            },
          },
          itemStyle: {
            normal: {
              // color: "#62aafe",
              label: {
                show: false,
                formatter: "{b} : {c} ({d}%)",
                color: "#fff"
              },
            },
            labelLine: {show: true},
          },
        },
      ],
    })
    this.$refs.chart13.setData({
      tooltip: {
        trigger: "item",
      },
      color: ['#fae92f', '#0000'],
      series: [
        {
          name: "",
          type: "pie",
          center: ["50%", "50%"],
          radius: ["85%", "100%"],
          data: [
            {value: 26, name: "离线设备数"},
            {value: 254, name: "0"},
          ],
          label: {
            normal: {
              rich: {
                a: {
                  color: "#fff",
                  align: "center",
                  fontSize: 1.5 * vw,
                  fontWeight: "bold",
                },
                b: {
                  color: "#fff",
                  align: "center",
                  fontSize: 0.8 * vw,
                },
              },
              formatter: function (params) {
                return (
                  "{a|" +
                  26 +
                  "}" +
                  "\n{b|" +
                  '离线设备数' +
                  "}"
                );
              },
              position: "center",
              show: true,
              textStyle: {
                fontSize: "14",
                fontWeight: "normal",
                color: "#fff",
              },
            },
          },
          itemStyle: {
            normal: {
              label: {
                show: false,
                formatter: "{b} : {c} ({d}%)",
                color: "#fff"
              },
            },
            labelLine: {show: true},
          },
        },
      ],
    })
    this.$refs.chart14.setData({
      tooltip: {
        trigger: "item",
      },
      color: ['#2ffae0', '#0000'],
      series: [
        {
          name: "",
          type: "pie",
          center: ["50%", "50%"],
          radius: ["85%", "100%"],
          data: [
            {value: 4, name: "吸附设备OEE"},
            {value: 96, name: "0"},
          ],
          label: {
            normal: {
              rich: {
                a: {
                  color: "#fff",
                  align: "center",
                  fontSize: 1.5 * vw,
                  fontWeight: "bold",
                },
                b: {
                  color: "#fff",
                  align: "center",
                  fontSize: 0.8 * vw,
                },
              },
              formatter: function (params) {
                return (
                  "{a|" +
                  4 +
                  "%}" +
                  "\n{b|" +
                  '吸附设备OEE' +
                  "}"
                );
              },
              position: "center",
              show: true,
              textStyle: {
                fontSize: "14",
                fontWeight: "normal",
                color: "#fff",
              },
            },
          },
          itemStyle: {
            normal: {},
            labelLine: {show: true},
          },
        },
      ],
    })
    this.$refs.chart15.setData({
      tooltip: {
        trigger: "item",
      },
      color: ['#2ffae0', '#0000'],
      series: [
        {
          name: "",
          type: "pie",
          center: ["50%", "50%"],
          radius: ["85%", "100%"],
          data: [
            {value: 0, name: "箱壳设备OEE"},
            {value: 100, name: "0"},
          ],
          label: {
            normal: {
              rich: {
                a: {
                  color: "#fff",
                  align: "center",
                  fontSize: 1.5 * vw,
                  fontWeight: "bold",
                },
                b: {
                  color: "#fff",
                  align: "center",
                  fontSize: 0.8 * vw,
                },
              },
              formatter: function (params) {
                return (
                  "{a|" +
                  0 +
                  "%}" +
                  "\n{b|" +
                  '箱壳设备OEE' +
                  "}"
                );
              },
              position: "center",
              show: true,
              textStyle: {
                fontSize: "14",
                fontWeight: "normal",
                color: "#fff",
              },
            },
          },
          itemStyle: {
            normal: {},
            labelLine: {show: true},
          },
        },
      ],
    })
    this.$refs.chart16.setData({
      tooltip: {
        trigger: "item",
      },
      color: ['#2ffae0', '#0000'],
      series: [
        {
          name: "",
          type: "pie",
          center: ["50%", "50%"],
          radius: ["85%", "100%"],
          data: [
            {value: 0, name: "铝侧板设备OEE"},
            {value: 96, name: "0"},
          ],
          label: {
            normal: {
              rich: {
                a: {
                  color: "#fff",
                  align: "center",
                  fontSize: 1.5 * vw,
                  fontWeight: "bold",
                },
                b: {
                  color: "#fff",
                  align: "center",
                  fontSize: 0.8 * vw,
                },
              },
              formatter: function (params) {
                return (
                  "{a|" +
                  0 +
                  "%}" +
                  "\n{b|" +
                  '铝侧板设备OEE' +
                  "}"
                );
              },
              position: "center",
              show: true,
              textStyle: {
                fontSize: "14",
                fontWeight: "normal",
                color: "#fff",
              },
            },
          },
          itemStyle: {
            normal: {},
            labelLine: {show: true},
          },
        },
      ],
    })
  },
  methods: {
    exitFun() {
      this.exit()
    }
  }
}
</script>
<style lang="less" scoped>
.app-container {
  background-image: url("~@/assets/model/quality/bg.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-color: #021e31;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.exit {
  background-image: url("~@/assets/model/factoryIntroduction/exit.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: 1%;
  right: 1%;
  font-weight: bold;
  width: 2vw;
  height: 2vw;
  color: #e7b219;
}


.headTitle {
  position: absolute;
  top: 5%;
  left: 50%;
  transform: translate(-50%, -100%);
  font-size: 1.5vw;
  color: #d6eaed;
  letter-spacing: 10px;
}

.boxTitle {
  position: absolute;
  top: 0;
  width: 100%;
  height: 2vw;
  line-height: 2vw;
  background: linear-gradient(to right, #152049, #184680);
  color: #fff;
  font-size: 1vw;
  text-align: center;
}

.box1 {
  position: absolute;
  top: 7%;
  left: 1%;
  width: 29%;
  height: 35%;
  border: 1px solid #123061;

  .chart1 {
    position: absolute;
    top: 2vw;
    width: 100%;
    height: calc(100% - 2vw);
  }
}

.box2 {
  position: absolute;
  top: 43%;
  left: 1%;
  width: 29%;
  height: 35%;
  border: 1px solid #123061;

  .chart2 {
    position: absolute;
    top: 2vw;
    width: 100%;
    height: calc(100% - 2vw);
  }
}

.box3 {
  position: absolute;
  top: 7%;
  left: 31%;
  width: 38%;
  height: 40%;
  border: 1px solid #123061;

  .chart3 {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
  }
}

.box4 {
  position: absolute;
  top: 48%;
  left: 31%;
  width: 38%;
  height: 30%;
  border: 1px solid #123061;

  .chart4 {
    position: absolute;
    top: 2vw;
    width: 100%;
    height: calc(100% - 2vw);
  }
}

.box5 {
  position: absolute;
  top: 7%;
  left: 70%;
  width: 29%;
  height: 35%;
  border: 1px solid #123061;

  .chart5 {
    position: absolute;
    top: 2vw;
    width: 100%;
    height: calc(100% - 2vw);
  }
}

.box6 {
  position: absolute;
  top: 43%;
  left: 70%;
  width: 29%;
  height: 35%;
  border: 1px solid #123061;

  .chart6 {
    position: absolute;
    top: 2vw;
    width: 100%;
    height: calc(100% - 2vw);
  }
}

.box7 {
  position: absolute;
  top: 79%;
  left: 1%;
  width: 37%;
  height: 20%;
  border: 1px solid #123061;

  .scrollTable {
    position: absolute;
    top: 2vw;
    width: 100%;
    height: calc(100% - 2vw);
  }

  .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: calc(100% / 6);
  }
}

.box8 {
  position: absolute;
  top: 79%;
  left: 62%;
  width: 37%;
  height: 20%;
  border: 1px solid #123061;


  .scrollTable {
    position: absolute;
    top: 2vw;
    width: 100%;
    height: calc(100% - 2vw);
  }

  .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: calc(100% / 5);
  }
}

.chart11 {
  position: absolute;
  top: 20%;
  left: 37%;
  width: 9%;
  height: 15%;
  transform: translate(-50%, -50%);
}

.chart12 {
  position: absolute;
  top: 20%;
  left: 50%;
  width: 9%;
  height: 15%;
  transform: translate(-50%, -50%);
}

.chart13 {
  position: absolute;
  top: 20%;
  left: 64%;
  width: 9%;
  height: 15%;
  transform: translate(-50%, -50%);
}

.chart14 {
  position: absolute;
  top: 38%;
  left: 37%;
  width: 9%;
  height: 15%;
  transform: translate(-50%, -50%);
}

.chart15 {
  position: absolute;
  top: 38%;
  left: 50%;
  width: 9%;
  height: 15%;
  transform: translate(-50%, -50%);
}

.chart16 {
  position: absolute;
  top: 38%;
  left: 64%;
  width: 9%;
  height: 15%;
  transform: translate(-50%, -50%);
}

.centerTitle {
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 1.4vw;
}

.electricity {
  position: absolute;
  bottom: 1%;
  left: 50%;
  width: 40vh;
  height: 20vh;
  transform: translateX(-50%);
  background-image: url("~@/assets/model/equipment/bg2.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;

  .span1 {
    position: absolute;
    top: 2%;
    left: 50%;
    transform: translateX(-50%);
    color:#FFF;
    font-size: 1vw;
  }

  .span2 {
    position: absolute;
    bottom: 52%;
    left: 50%;
    transform: translateX(-50%);
    color:#FFF;
    font-size: 2vw;
  }

  .span3 {
    position: absolute;
    top: 52%;
    left: 50%;
    transform: translateX(-50%);
    color:#2ffae0;
    font-size: 0.8vw;
  }

  .span4 {
    position: absolute;
    bottom: 2%;
    left: 50%;
    transform: translateX(-50%);
    color:#fff;
    font-size: 1vw;
    display: inline-block;
    .span5 {
      display: inline-block;
      font-size: 1.5vw;
      color:#edbc37;
    }
  }
}
</style>