<template>
  <div class="app-container">
    <div class="headTitle">数字化注塑车间管控中心</div>
    <div class="text1" style="top: 11.8%;left: 4.5%;letter-spacing: 0.3vw">
      <span>工单总数:</span>
      <span style="color: #fff;letter-spacing: 0.2vw"> {{
          form.isSimulate ? form.text1 : orderWorkStatisticsData.totalCount
        }}</span>
      <span style="color: #fff;letter-spacing: 0.2vw">个</span>
    </div>
    <div class="text1" style="top: 11.8%;left: 19%;letter-spacing: 0.5vw">
      <span>已完成:</span>
      <span style="color: #43FC36;letter-spacing: 0.2vw"> {{
          form.isSimulate ? form.text2 : orderWorkStatisticsData.completeCount
        }}</span>
      <span style="color: #fff;letter-spacing: 0.2vw">个</span>
    </div>
    <div class="text1" style="top: 11.8%;left: 33.8%;letter-spacing: 0.5vw">
      <span>完成率:</span>
      <span style="color: #43FC35;letter-spacing: 0.2vw"> {{
          form.isSimulate ? form.text3 : orderWorkStatisticsData.completeRate
        }}</span>
      <span style="color: #fff;letter-spacing: 0.2vw">%</span>
    </div>
    <div class="text1" style="top: 11.8%;left: 48.2%;letter-spacing: 0.3vw">
      <span>停机工单:</span>
      <span style="color: #EF0506;letter-spacing: 0.2vw"> {{
          form.isSimulate ? form.text4 : orderWorkStatisticsData.stopCount
        }}</span>
      <span style="color: #fff;letter-spacing: 0.2vw">个</span>
    </div>
    <div class="text1" style="top: 11.8%;left: 62.9%;letter-spacing: 0.1vw">
      <span>平均响应时间:</span>
      <span style="color: #ECB808;letter-spacing: 0.2vw"> {{
          form.isSimulate ? form.text5 : (parseFloat(repairTimeStatisticsData.avgResponseTime) > 1000 ? '无响应' : repairTimeStatisticsData.avgResponseTime)
        }}</span>
      <span style="color: #fff;letter-spacing: 0.2vw">min</span>
    </div>
    <div class="text1" style="top: 11.8%;left: 84%;letter-spacing: 0.1vw">
      <span>平均维修时间:</span>
      <span style="color: #E10806;letter-spacing: 0.2vw"> {{
          form.isSimulate ? form.text6 : repairTimeStatisticsData.avgRepairTime
        }}</span>
      <span style="color: #fff;letter-spacing: 0.2vw">H</span>
    </div>
    <div class="text2" style="top: 19.7%;left: 11%;">设备保养执行情况</div>
    <div class="text2" style="top: 19.7%;left: 42.5%;">设备巡检执行情况</div>
    <div class="text2" style="top: 19.7%;left: 74.5%;">故障原因统计TOP5</div>
    <div class="text2" style="top: 59.7%;left: 13%;">报警数量曲线(最近30天)</div>
    <div class="text2" style="top: 59.7%;left: 74.5%;">机台产量TOP5</div>
    <div class="text3" style="top: 31%;left: 20.9%;">计划保养</div>
    <div class="text3" style="top: 31%;left: 27.5%">已保养</div>
    <div class="text3" style="top: 42.5%;left: 18.8%;">待保养</div>
    <div class="text3" style="top: 42.5%;left: 24.6%;">保养中</div>
    <div class="text3" style="top: 42.5%;left: 30.3%;">待验证</div>
    <div class="text4" style="top: 34.3%;left: 20.9%;font-size: 1vw">
      {{ form.isSimulate ? form.text7 : maintStatisticsData.planCount }}单
    </div>
    <div class="text4" style="top: 34.3%;left: 27.5%;font-size: 1vw">
      {{ form.isSimulate ? form.text8 : maintStatisticsData.completeCount }}单
    </div>
    <div class="text4" style="top: 45.6%;left: 18.8%;">
      {{ form.isSimulate ? form.text9 : maintStatisticsData.waitingCount }}% / <span style="font-size: 0.6vw">{{
        form.isSimulate ? form.text10 : maintStatisticsData.waitingRate
      }}单</span></div>
    <div class="text4" style="top: 45.6%;left: 24.6%;">{{
        form.isSimulate ? form.text11 : maintStatisticsData.doingCount
      }}% / <span
          style="font-size: 0.6vw">{{ form.isSimulate ? form.text12 : maintStatisticsData.doingRate }}单</span></div>
    <div class="text4" style="top: 45.6%;left: 30.3%;">
      {{ form.isSimulate ? form.text13 : maintStatisticsData.verifyCount }}% / <span
        style="font-size: 0.6vw">{{ form.isSimulate ? form.text14 : maintStatisticsData.verifyRate }}单</span></div>
    <div class="chart1">
      <div class="title"><span style="font-size: 1.5vw;font-weight: 800">{{
          form.isSimulate ? form.text15 : maintStatisticsData.completeRate
        }}</span>%
      </div>
      <div class="subTitle">完成率</div>
      <Chart ref="chart1"></Chart>
    </div>
    <div class="chart2">
      <div class="deviceNum">应检设备<span style="color: #56BDFF;font-weight: 800;margin-left: 1vw">{{
          form.isSimulate ? form.text16 : inspectStatisticsData.deviceCount
        }}台</span></div>
      <div class="title"><span style="font-size: 1.5vw;font-weight: 800">{{
          form.isSimulate ? form.text17 : inspectStatisticsData.completeRate
        }}</span>%
      </div>
      <div class="subTitle">完成率</div>
      <Chart ref="chart2"></Chart>
    </div>
    <div class="chart3">
      <Chart ref="chart3"></Chart>
    </div>
    <div class="chart4">
      <Chart ref="chart4"></Chart>
    </div>
    <div class="toggle">
      <div class="btn">
        <el-button type="primary" @click="toggle = !toggle">切换显示</el-button>
      </div>
    </div>
    <div class="repairTimes">
      <div class="expendImg" v-if="toggle"></div>
      <div class="item" v-for="(i,k) in form.isSimulate ? form.chart2 :productionTop5Data " v-else>
        <div class="num">{{ k + 1 }}</div>
        <div class="deviceName">{{ form.isSimulate ? i.value1 : i.deviceName }}</div>
        <div class="schedule">
          <div class="progressBar" :style="{width: (form.isSimulate ?  i.value2 :i.percent ) + '%'}"></div>
        </div>
        <div class="times">{{ form.isSimulate ? i.value3 : i.production }}个</div>
      </div>
    </div>
    <div class="config">
      <el-button class="btn" @click="configDialogVisible = true">配置</el-button>
    </div>
    <el-dialog
        v-if="isData"
        title="提示"
        :visible.sync="configDialogVisible"
        width="70%">
      <el-form :inline="true" :model="form" label-width="120px">
        <el-form-item label="是否使用模拟数据">
          <el-switch
              v-model="form.isSimulate"
              active-color="#13ce66"
              inactive-color="#ff4949">
          </el-switch>
        </el-form-item>
        <el-form-item label="工单总数">
          <el-input v-model="form.text1" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="已完成">
          <el-input v-model="form.text2" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="完成率">
          <el-input v-model="form.text3" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="停机工单">
          <el-input v-model="form.text4" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="平均响应时间">
          <el-input v-model="form.text5" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="平均维修时间">
          <el-input v-model="form.text6" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="计划保养数量">
          <el-input v-model="form.text7" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="已保养数量">
          <el-input v-model="form.text8" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="待保养比例">
          <el-input v-model="form.text9" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="待保养数量">
          <el-input v-model="form.text10" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="保养中比例">
          <el-input v-model="form.text11" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="保养中数量">
          <el-input v-model="form.text12" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="待验证比例">
          <el-input v-model="form.text13" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="待验证数量">
          <el-input v-model="form.text14" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="设备保养完成率">
          <el-input @change="chartInit" v-model="form.text15" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="应检设备">
          <el-input v-model="form.text16" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="设备巡检完成率">
          <el-input v-model="form.text17" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="实验设备数量">
          <el-input-number @change="chartInit" :controls="false" v-model="form.value1"
                           autocomplete="off"></el-input-number>
        </el-form-item>
        <el-form-item label="未检设备数量">
          <el-input-number @change="chartInit" :controls="false" v-model="form.value2"
                           autocomplete="off"></el-input-number>
        </el-form-item>
        <el-form-item label="正常设备数量">
          <el-input-number @change="chartInit" :controls="false" v-model="form.value3"
                           autocomplete="off"></el-input-number>
        </el-form-item>
        <el-form-item label="异常设备数量">
          <el-input-number @change="chartInit" :controls="false" v-model="form.value4"
                           autocomplete="off"></el-input-number>
        </el-form-item>
        <el-form-item label="维护故障占比">
          <el-input-number @change="chartInit" :controls="false" v-model="form.value5"
                           autocomplete="off"></el-input-number>
        </el-form-item>
        <el-form-item label="运行故障占比">
          <el-input-number @change="chartInit" :controls="false" v-model="form.value6"
                           autocomplete="off"></el-input-number>
        </el-form-item>
        <el-form-item label="自然故障占比">
          <el-input-number @change="chartInit" :controls="false" v-model="form.value7"
                           autocomplete="off"></el-input-number>
        </el-form-item>

        <el-form-item label="故障数量" class="fullLine">
          <el-table
              :data="form.chart1"
              style="width: 100%">
            <el-table-column
                prop="date"
                label="日期">
              <template slot-scope="scope">
                <el-input @change="chartInit" v-model="form.chart1[scope.$index].value1" autocomplete="off"></el-input>
              </template>
            </el-table-column>
            <el-table-column
                prop="name"
                label="数量"
            >
              <template slot-scope="scope">
                <el-input @change="chartInit" v-model="form.chart1[scope.$index].value2" autocomplete="off"></el-input>
              </template>
            </el-table-column>
          </el-table>
          <div>
            <i class="el-icon-circle-plus-outline" @click="chartInit(); form.chart1.push({
            value1: '1',
            value2: 1})" style="font-size: 24px"></i>
          </div>
        </el-form-item>
        <el-form-item label="备件消耗费用" class="fullLine">
          <el-table
              :data="form.chart2"
              style="width: 100%">
            <el-table-column
                prop="date"
                label="设备名称">
              <template slot-scope="scope">
                <el-input @change="chartInit" v-model="form.chart2[scope.$index].value1" autocomplete="off"></el-input>
              </template>
            </el-table-column>
            <el-table-column
                prop="name"
                label="百分比"
            >
              <template slot-scope="scope">
                <el-input @change="chartInit" v-model="form.chart2[scope.$index].value2" autocomplete="off"></el-input>
              </template>
            </el-table-column>
            <el-table-column
                prop="name"
                label="次数"
            >
              <template slot-scope="scope">
                <el-input @change="chartInit" v-model="form.chart2[scope.$index].value3" autocomplete="off"></el-input>
              </template>
            </el-table-column>
          </el-table>
          <div>
            <i class="el-icon-circle-plus-outline" @click="chartInit(); form.chart2.push({
            value1: '1',
            value2: 1,
            value3: 1,})" style="font-size: 24px"></i>
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="configDialogVisible = false">预 览</el-button>
    <el-button type="primary" @click="save">保 存</el-button>
  </span>
    </el-dialog>
  </div>
</template>
<script>

import Chart from "@/components/board/Chart.vue";
import * as echarts from "echarts";
import {getSimulateData} from "@/api/board/getData";
import {updateCustomData} from "@/api/base/customData";
import {Message} from "element-ui";
import {getDeviceStatusStatistics} from "@/api/baseDeviceParamVal/val";
import {
  getDeviceStatusDistribution, getFaultSourceDistribution, getFaultTrendList,
  getInspectStatistics,
  getMaintStatistics,
  getOrderWorkStatistics, getProductionTop5,
  getRepairTimeStatistics
} from "@/api/board/board5";
import Log from "@/views/monitor/job/log.vue";

const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
export default {
  components: {
    Chart
  },
  name: "Liner",
  data() {
    return {
      // form: {
      //   text1: '08',
      //   text2: '07',
      //   text3: '90',
      //   text4: '00',
      //   text5: '123.45',
      //   text6: '0.25',
      //   text7: '3',
      //   text8: '2',
      //   text9: '0',
      //   text10: '0',
      //   text11: '0',
      //   text12: '0',
      //   text13: '33.33',
      //   text14: '1',
      //   text15: '66.6',
      //   text16: '20',
      //   text17: '66',
      //   value1: 37,
      //   value2: 24,
      //   value3: 22,
      //   value4: 10,
      //   value5: 36,
      //   value6: 30,
      //   value7: 34,
      //   chart1: Array(20).fill(0).map((i, k) => {
      //     return {
      //       value1: '' + k,
      //       value2: Math.ceil(Math.floor(Math.random() * 5)),
      //     }
      //   }),
      //   chart2: Array(5).fill(0).map((i, k) => {
      //     return {
      //       value1: 'SC-228NE',
      //       value2: Math.ceil(Math.floor(Math.random() * 100)),
      //       value3: Math.ceil(Math.floor(Math.random() * 10)),
      //     }
      //   }),
      // },
      form: {},
      configDialogVisible: false,
      toggle: false,
      isData: false,
      row: {},
      orderWorkStatisticsData: {},
      repairTimeStatisticsData: {},
      maintStatisticsData: {},
      inspectStatisticsData: {},
      deviceStatusDistributionData: {},
      faultSourceDistributionData: {},
      faultTrendList: [],
      productionTop5Data: []
    }
  },
  async mounted() {
    getSimulateData({customCode: 'board-2' || '', customType: 1}).then(val => {
      this.row = val.rows[0]
      this.form = JSON.parse(val.rows[0].customData);
      this.isData = true
    })
    await this.getData()
    setInterval(async () => {
      await this.getData()
    }, 1000 * 60 * 10)
  },
  methods: {
    async getData() {
      await getOrderWorkStatistics().then(res => {
        this.orderWorkStatisticsData = res.data
      })
      await getRepairTimeStatistics().then(res => {
        this.repairTimeStatisticsData = res.data
      })
      await getMaintStatistics().then(res => {
        this.maintStatisticsData = res.data
      })
      await getInspectStatistics().then(res => {
        this.inspectStatisticsData = res.data
      })
      await getDeviceStatusDistribution().then(res => {
        this.deviceStatusDistributionData = res.data
      })
      await getFaultSourceDistribution().then(res => {
        this.faultSourceDistributionData = res.data
      })
      await getFaultTrendList().then(res => {
        this.faultTrendList = res.data
      })
      await getProductionTop5().then(res => {
        this.productionTop5Data = res.data
      })
      this.chartInit()
    },
    chartInit() {
      let data = [
        {
          value: this.form.isSimulate ? this.form.value1 : this.deviceStatusDistributionData.experimentPercent,
          name: '实验设备',
          index: 0,
          itemStyle: {
            color: '#24ACFF',
            borderColor: '#000',
            borderWidth: 2
          },
        },
        {
          value: this.form.isSimulate ? this.form.value2 : this.deviceStatusDistributionData.uncheckedPercent,
          name: '未检设备',
          index: 1,
          itemStyle: {
            color: '#3CFD96',
            borderColor: '#000',
            borderWidth: 2
          },
        },
        {
          value: this.form.isSimulate ? this.form.value3 : this.deviceStatusDistributionData.normalPercent,
          name: '正常设备',
          index: 2,
          itemStyle: {
            color: '#FEE924',
            borderColor: '#000',
            borderWidth: 2
          },
        },
        {
          value: this.form.isSimulate ? this.form.value4 : this.deviceStatusDistributionData.abnormalPercent,
          index: 3,
          name: '异常设备',
          itemStyle: {
            color: '#FE6624',
            borderColor: '#000',
            borderWidth: 2
          },
        },
      ]
      let chartData = [
        {
          value: this.form.isSimulate ? this.form.value5 : this.faultSourceDistributionData.maintainPercent,
          name: '维护故障',
          index: 0,
          itemStyle: {
            color: '#35DF7C',
            borderColor: '#000',
            borderWidth: 2
          },
        },
        {
          value: this.form.isSimulate ? this.form.value6 : this.faultSourceDistributionData.runningPercent,
          name: '运行故障',
          index: 1,
          itemStyle: {
            color: '#24ACFF',
            borderColor: '#000',
            borderWidth: 2
          },
        },
        {
          value: this.form.isSimulate ? this.form.value7 : this.faultSourceDistributionData.naturalPercent,
          name: '自然故障',
          index: 2,
          itemStyle: {
            color: '#EDE943',
            borderColor: '#000',
            borderWidth: 2
          },
        },
      ]
      this.$refs.chart1.setData({
        series: [
          {
            type: "pie",
            label: {
              show: false,
            },
            center: ["50%", "50%"],
            radius: ['75%', '81%'],
            clockwise: false,
            labelLine: {
              show: false
            },
            data: [
              {
                value: Math.min(parseFloat(this.form.isSimulate ? this.form.text15 : (this.maintStatisticsData.completeCount)), 100),
                name: '合格数',
                itemStyle: {
                  color: '#00AFFF'
                },
              },
              {
                value: Math.max((100 - parseFloat((this.form.isSimulate ? this.form.text15 : this.maintStatisticsData.completeCount))), 0),
                name: '不合格数',
                itemStyle: {
                  color: '#0000'
                },
              },
            ]
          },
        ]
      })
      const rich1 = {};
      data.forEach(item => {
        rich1[`val_${item.index}`] = {color: item.itemStyle.color, fontWeight: 'bold', fontSize: 1.2 * vw};
      });
      this.$refs.chart2.setData({
        legend: {
          type: 'scroll',
          orient: 'vertical',
          y: 'center',
          x: '55%',
          icon: 'circle',
          textStyle: {
            color: '#fff',
            fontSize: 0.9 * vw,
            lineHeight: 1.5 * vw,
            rich: {
              ...rich1
            }
          },
          data: data.map((item) => item.name),
          formatter: (params) => {
            let itemData = data.find(item => item.name === params)
            return `${params}   {val_${itemData.index}|${itemData.value}%}`
          }
        },
        series: [
          {
            type: "pie",
            label: {
              show: false,
            },
            center: ["23%", "50%"],
            radius: ['75%', '85%'],
            labelLine: {
              show: false
            },
            data: data
          },
          {
            type: "pie",
            label: {
              show: false,
            },
            center: ["23%", "50%"],
            radius: ['55%', '75%'],
            labelLine: {
              show: false
            },
            data: data.map(item => {
              return {
                ...item,
                name: '',
                itemStyle: {
                  ...item.itemStyle,
                  color: item.itemStyle.color + '44',
                }
              }
            })
          },
        ]
      })
      this.$refs.chart2.on(['legendselectchanged', (params) => {
        this.$refs.chart2.chart.dispatchAction({
          type: 'legendSelect',
          name: params.name
        })
      }])
      this.$refs.chart2.on(['mousemove', (params) => {
        if (params.seriesType !== 'pie') return
        this.$refs.chart2.chart.dispatchAction({
          type: 'downplay'
        })
        this.$refs.chart2.chart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: params.dataIndex
        })
      }])
      this.$refs.chart2.on(['mouseout', (params) => {
        if (params.seriesType !== 'pie') return

        this.$refs.chart2.chart.dispatchAction({
          type: 'downplay',
        })
      }])
      const rich = {};
      chartData.forEach(item => {
        rich[`val_${item.index}`] = {color: item.itemStyle.color, fontWeight: 'bold', fontSize: 1.2 * vw};
      });
      this.$refs.chart3.setData({
        legend: {
          type: 'scroll',
          orient: 'vertical',
          y: 'center',
          x: '60%',
          icon: 'circle',
          textStyle: {
            color: '#fff',
            fontSize: 0.9 * vw,
            lineHeight: 1.8 * vw,
            rich: {
              ...rich,
            }
          },
          data: chartData.map((item) => item.name),
          formatter: (params) => {
            let itemData = chartData.find(item => item.name === params)
            let str = `${params}   {val_${itemData.index}|${itemData.value}%}`
            return str
          }
        },
        series: [
          {
            type: "pie",
            label: {
              show: false,
            },
            roseType: 'radius',
            center: ["27%", "50%"],
            radius: ['60%', '85%'],
            labelLine: {
              show: false
            },
            data: chartData
          },
        ]
      })

      this.$refs.chart4.setData({
        xAxis: {
          data: this.form.isSimulate ? this.form.chart1.map(e => e.value1) : this.faultTrendList.map(e => e.dateValue),
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              color: '#377097',
            }
          },
          axisLabel: {
            fontSize: 14,
            color: '#4C95C1',
          },
          axisTick: {
            alignWithLabel: true,
            lineStyle: {
              color: '#37709799',
            }
          },
          splitLine: {
            show: true,
            alignWithLabel: true,
            lineStyle: {
              color: '#37709799',
              type: 'dashed',
            }
          }
        },
        yAxis: {
          axisLine: {
            show: true,
            lineStyle: {
              color: '#377097',
            }
          },
          axisLabel: {
            fontSize: 14,
            color: '#4C95C1',
          },
          axisTick: {
            show: true,
            alignWithLabel: true,
            lineStyle: {
              color: '#37709799',
            }
          },
          splitLine: {
            show: true,
            alignWithLabel: true,
            lineStyle: {
              color: '#37709799',
              type: 'dashed',
            }
          }
        },
        grid: {
          top: 20,
          right: 20,
          bottom: 40,
          left: 50
        },
        series: [
          {
            type: "line",
            symbolSize: 6,
            symbol: 'circle',
            itemStyle: {
              color: '#68CCFE',      // 点填充颜色
              borderColor: '#FBFFFA',   // 点边框颜色
              borderWidth: 2         // 边框宽度
            },
            lineStyle: {
              color: '#66C0F2',      // 折线颜色
              width: 2
            },
            label: {
              show: false,
            },
            data: this.form.isSimulate ? this.form.chart1.map(e => e.value2) : this.faultTrendList.map(e => e.faultCount),
          },
        ]
      })
    },
    save() {
      updateCustomData({
        ...this.row,
        customData: JSON.stringify(this.form)
      }).then(res => {
        Message({message: '保存成功', type: 'success'})
        this.configDialogVisible = false
      })
    }
  },
};
</script>
<style scoped lang="less">
.headTitle {
  position: absolute;
  top: 5%;
  left: 50%;
  transform: translate(-50%, -100%);
  font-size: 1.5vw;
  color: #d6eaed;
  letter-spacing: 0.3vw;
}

.app-container {
  position: absolute;
  top: 0;
  left: 0;
  background-image: url("../../../assets/board/boardBg4.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
}

.text1 {
  position: absolute;
  transform: translateY(-50%);
  letter-spacing: 0.2vw;
  font-size: 1.25vw;
  color: #69CBFF;
}

.text2 {
  position: absolute;
  transform: translate(-50%, -50%);
  letter-spacing: 0.2vw;
  font-size: 1.2vw;
  color: #fff;
}

.text3 {
  position: absolute;
  transform: translate(-50%, -50%);
  letter-spacing: 0.1vw;
  font-size: 0.8vw;
  color: #fff;
}

.text4 {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 0.9vw;
  color: #FEFEFD;
}

.chart1 {
  position: absolute;
  top: 28.4%;
  left: 4.85%;
  width: 10.4%;
  height: 18.5%;

  .title {
    position: absolute;
    top: 51%;
    left: 50%;
    transform: translate(-50%, calc(-100% - 0.4vw));
    color: #55BCFE;
    font-size: 1.1vw;
    letter-spacing: 0.2vw;
  }

  .subTitle {
    position: absolute;
    top: 51%;
    left: 50%;
    transform: translateX(-50%);
    color: #55BCFE;
    font-size: 0.8vw;
  }
}

.chart2 {
  position: absolute;
  top: 27.6%;
  left: 37.75%;
  width: 27%;
  height: 22.1%;

  .deviceNum {
    position: absolute;
    top: 0%;
    left: 55%;
    color: #fff;
    font-size: 1vw;
    letter-spacing: 0.1vw;
    white-space: nowrap;
  }

  .title {
    position: absolute;
    top: 51%;
    left: 23%;
    transform: translate(-50%, calc(-100% - 0.4vw));
    color: #55BCFE;
    font-size: 1.1vw;
    letter-spacing: 0.2vw;
  }

  .subTitle {
    position: absolute;
    top: 51%;
    left: 23%;
    transform: translateX(-50%);
    color: #55BCFE;
    font-size: 0.8vw;
  }
}

.chart3 {
  position: absolute;
  top: 27.6%;
  left: 68.05%;
  width: 27%;
  height: 22.1%;

}

.chart4 {
  position: absolute;
  top: 62.5%;
  left: 3.35%;
  width: 62%;
  height: 32.6%;
}

.repairTimes {
  position: absolute;
  top: 62.7%;
  left: 66.3%;
  width: 30.4%;
  height: 32.5%;

  .expendImg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 15.2vw;
    height: 9.55vw;
    transform: translate(-50%, -50%);
    background-image: url("../../../assets/board/expendImg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }

  .item {
    width: 100%;
    height: 20%;
    position: relative;

    .num {
      position: absolute;
      top: 50%;
      left: 8%;
      width: 1vw;
      height: 1vw;
      font-size: 0.8vw;
      text-align: center;
      transform: translate(-50%, -50%);
      line-height: calc(1vw - 2px);
      color: #1B61D8;
      background-color: #092C52;
      border: 1px solid #0D598F;
    }

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

    .schedule {
      position: absolute;
      top: 50%;
      left: 35%;
      transform: translateY(-50%);
      width: 50%;
      height: 8px;
      border-radius: 4px;
      background-color: #172B47;
      overflow: hidden;

      .progressBar {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        background: linear-gradient(to right, #1068E4, #4E99FF);
      }
    }

    .times {
      position: absolute;
      top: 50%;
      left: 87%;
      font-size: 0.8vw;
      transform: translateY(-50%);
      color: #60BAEA;
    }
  }
}

.toggle {
  position: absolute;
  top: 55.2%;
  left: 80.2%;
  width: 10vw;
  height: 5vw;

  .btn {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  &:hover {
    .btn {
      display: inline-block;
    }
  }

}

.config {
  position: absolute;
  top: 3%;
  right: 3%;
  width: 10%;
  height: 5vw;

  .btn {
    display: none;

  }

  &:hover {
    .btn {
      display: inline-block;
    }
  }
}

.fullLine {
  width: 100%;

  /deep/ .el-form-item__content {
    width: calc(100% - 120px);
  }
}
</style>