<template>
  <div id="screen" class="allShow" :style="{ 'width': `${style.width}px`, 'height': `${style.height}px`, 'transform': `${style.transform}` }">
    <el-row style="box-shadow: inset 0 0 30px rgb(24, 78, 135);">
      <div style="height: 65px; width: 1918px;">
        <el-col :span="6" style="height: 100%;display: flex;align-items: center">
          <div style=";background-color: #fff;margin-left: 15px">
            <img style="height: 40px;cursor: pointer;background-color: #fff" :src="titlePng"/>
            <img style="height: 40px;cursor: pointer;background-color: #fff;margin-left: 3px" :src="titlePng2"/>
          </div>
        </el-col>
        <el-col :span="12" style="height: 100%">
          <div style="font-size: 2.8rem;color: white;text-align: center">
            <span style="letter-spacing: 5px;font-weight: bolder">航空发动机叶片制孔数字化柔性生产线</span>
          </div>
        </el-col>
        <el-col :span="6" style="height: 100%;display: flex;align-items: center;justify-content: flex-end">
          <el-col :span="7">
<!--            <img style="height: 40px;" :src="titlePng1"/>-->
          </el-col>
          <el-col :span="7" style="display: flex;flex-direction: column;font-size: 1.3rem">
            <span>{{this.year + '/'+ this.month + '/'+ this.day}}</span>
            <span style="font-weight: bolder">{{(this.hour) + ':'+ (this.minute) + ':'+(this.second)}}</span>
          </el-col>
        </el-col>
      </div>
    </el-row>
    <el-row>
      <div style="position: relative;">
        <div style="height: 100%; width: 100%;position: absolute;">
          <div style="width: 100%;height:1000px;filter:blur(10);z-index: 999;">
<!--            1-->
            <d-m-t ref="dmtCom" v-on:changeCameraState="changeCameraState" containerHeight="1000px" containerWidth="100%" />
          </div>
        </div>
        <div :style="{display: isShow}" class="data-box" style="left:10px; top:10px;">
          <span class="borderLeft1 boxBorder"></span>
          <span class="borderLeft2 boxBorder"></span>
          <span class="borderRight1 boxBorder"></span>
          <span class="borderRight2 boxBorder"></span>
          <div style="width: 100%; height: 30px;">
            <div class="indicatorBlock"/>
            <div class="indicatorText">
              HS600小孔机1
            </div>
          </div>
          <div class="max-box">
            <div id="title">设备状态</div>
            <div class="main">
              <div>
                <div style="margin: 0 80px" :style="{backgroundColor:getStatusBgc(deviceList[0].Status)}">{{deviceStatus[deviceList[0].Status]}}</div>
              </div>
            </div>
          </div>
          <div class="max-box">
            <div id="title">机械坐标</div>
            <div class="main">
            </div>
          </div>
          <div style="margin-bottom: 0px;height: 145px;">
            <div class="main" style="margin-left: 1px">
              <el-col :span="14">
                <table>
                  <tr>
                    <td style="font-weight: bolder;font-size: 15px;width: 50px;">轴</td>
                    <td style="font-weight: bolder;font-size: 15px;width: 120px;">坐标</td>
                  </tr>
                  <tr v-for="(item, index) in deviceList[0].Axis" :key="index" style="font-size: 13px">
                    <td style="width: 80px">{{item.AxisName}}</td>
                    <td>{{item.AxisValue}}</td>
                  </tr>
                </table>
              </el-col>
              <el-col :span="10">
                <div style="width: 99%;height: 143px;">
                  <el-row>
                    <div style="display: flex;align-items: center;justify-content: center">
                      <img style="width: 32px" src="@/img/Aimg.png">
                      <div>
                        <div class="device_va_name">机床电流</div>
                        <div class="device_va_value">{{deviceList[0].Current }} A</div>
                      </div>
                    </div>
                  </el-row>
                  <el-row>
                    <div style="display: flex;align-items: center;justify-content: center">
                      <img style="width: 32px" src="@/img/Vimg.png">
                      <div>
                        <div class="device_va_name">机床电压</div>
                        <div class="device_va_value">{{ deviceList[0].Voltage }} V</div>
                      </div>
                    </div>
                  </el-row>
                </div>
              </el-col>
          </div>
        </div>
          <div class="max-box" style="margin: 0">
            <div id="title">当前报警</div>
          </div>
          <div style="margin-bottom: 0px;">
            <div style="margin-left: 1px;border: 1px solid #9f9f9f;height: 25px;">
              <div v-for="(item, index) in deviceList[0].Alarm" :key="index" style="display: flex;align-items: center;height: 25px">
                <div style="border-right: 1px solid #9f9f9f;height: 25px;width: 80px;text-align: center">{{ item.AlarmCode }}</div>
                <div style="height: 25px;width: 100%">{{ item.Alarm }}</div>
              </div>
            </div>
          </div>
          <div class="max-box" style="margin: 0">
            <div id="title">机床提示</div>
          </div>
          <div style="margin-bottom: 0px;height: 20px;">
            <div style="margin-left: 1px;border: 1px solid #9f9f9f;height: 25px;">
              <div v-for="(item, index) in deviceList[0].Tip" :key="index" style="display: flex;align-items: center;height: 25px">
                <div style="border-right: 1px solid #9f9f9f;height: 25px;width: 80px;text-align: center">{{ item.TipCode }}</div>
                <div style="height: 25px;width: 100%">{{ item.Tip }}</div>
              </div>
            </div>
          </div>
        </div>
        <div :style="{display: isShow}" class="data-box" style="left:10px; top:370px;">
          <span class="borderLeft1 boxBorder"></span>
          <span class="borderLeft2 boxBorder"></span>
          <span class="borderRight1 boxBorder"></span>
          <span class="borderRight2 boxBorder"></span>
          <div style="width: 100%; height: 30px;">
            <div class="indicatorBlock"/>
            <div class="indicatorText">
              HS600小孔机2
            </div>
          </div>
          <div class="max-box">
            <div id="title">设备状态</div>
            <div class="main">
              <div style="">
                <div style="margin: 0 80px" :style="{backgroundColor:getStatusBgc(deviceList[1].Status)}">{{deviceStatus[deviceList[1].Status]}}</div>
              </div>
            </div>
          </div>
          <div class="max-box">
            <div id="title">机械坐标</div>
            <div class="main">
            </div>
          </div>
          <div style="margin-bottom: 0px;height: 145px;">
            <div class="main" style="margin-left: 1px">
              <el-col :span="14">
                <table>
                  <tr>
                    <td style="font-weight: bolder;font-size: 15px;width: 50px;">轴</td>
                    <td style="font-weight: bolder;font-size: 15px;width: 120px;">坐标</td>
                  </tr>
                  <tr v-for="(item, index) in deviceList[1].Axis" :key="index" style="font-size: 13px">
                    <td style="width: 80px">{{item.AxisName}}</td>
                    <td>{{item.AxisValue}}</td>
                  </tr>
                </table>
              </el-col>
              <el-col :span="10">
                <div style="width: 99%;height: 143px;">
                  <el-row>
                    <div style="display: flex;align-items: center;justify-content: center">
                      <img style="width: 32px" src="@/img/Aimg.png">
                      <div>
                        <div class="device_va_name">机床电流</div>
                        <div class="device_va_value">{{deviceList[1].Current }} A</div>
                      </div>
                    </div>
                  </el-row>
                  <el-row>
                    <div style="display: flex;align-items: center;justify-content: center">
                      <img style="width: 32px" src="@/img/Vimg.png">
                      <div>
                        <div class="device_va_name">机床电压</div>
                        <div class="device_va_value">{{ deviceList[1].Voltage }} V</div>
                      </div>
                    </div>
                  </el-row>
                </div>
              </el-col>
            </div>
          </div>
          <div class="max-box" style="margin: 0">
            <div id="title">当前报警</div>
          </div>
          <div style="margin-bottom: 0px;">
            <div style="margin-left: 1px;border: 1px solid #9f9f9f;height: 25px;">
              <div v-for="(item, index) in deviceList[1].Alarm" :key="index" style="display: flex;align-items: center;height: 25px">
                <div style="border-right: 1px solid #9f9f9f;height: 25px;width: 80px;text-align: center">{{ item.AlarmCode }}</div>
                <div style="height: 25px;width: 100%">{{ item.Alarm }}</div>
              </div>
            </div>
          </div>
          <div class="max-box" style="margin: 0">
            <div id="title">机床提示</div>
          </div>
          <div style="margin-bottom: 0px;height: 20px;">
            <div style="margin-left: 1px;border: 1px solid #9f9f9f;height: 25px;">
              <div v-for="(item, index) in deviceList[1].Tip" :key="index" style="display: flex;align-items: center;height: 25px">
                <div style="border-right: 1px solid #9f9f9f;height: 25px;width: 80px;text-align: center">{{ item.TipCode }}</div>
                <div style="height: 25px;width: 100%">{{ item.Tip }}</div>
              </div>
            </div>
          </div>
        </div>
        <div :style="{display: isShow}" class="data-box" style="left:10px; top:730px;height: 270px">
          <span class="borderLeft1 boxBorder"></span>
          <span class="borderLeft2 boxBorder"></span>
          <span class="borderRight1 boxBorder"></span>
          <span class="borderRight2 boxBorder"></span>
          <div style="width: 100%; height: 30px;">
            <div class="indicatorBlock"/>
            <div class="indicatorText">
              设备开机率
            </div>
          </div>
          <div id="dashboard3" style="height: 240px; width: 100%"/>
        </div>

        <div :style="{display: isShow}" class="data-box" style="right:10px; top:10px;">
          <span class="borderLeft1 boxBorder"></span>
          <span class="borderLeft2 boxBorder"></span>
          <span class="borderRight1 boxBorder"></span>
          <span class="borderRight2 boxBorder"></span>
          <div style="width: 100%; height: 30px;">
            <div class="indicatorBlock"/>
            <div class="indicatorText">
              HS600小孔机3
            </div>
          </div>
          <div class="max-box">
            <div id="title">设备状态</div>
            <div class="main">
              <div style="">
                <div style="margin: 0 80px" :style="{backgroundColor:getStatusBgc(deviceList[2].Status)}">{{deviceStatus[deviceList[2].Status]}}</div>
              </div>
            </div>
          </div>
          <div class="max-box">
            <div id="title">机械坐标</div>
            <div class="main">
            </div>
          </div>
          <div style="margin-bottom: 0px;height: 145px;">
            <div class="main" style="margin-left: 1px">
              <el-col :span="14">
                <table>
                  <tr>
                    <td style="font-weight: bolder;font-size: 15px;width: 50px;">轴</td>
                    <td style="font-weight: bolder;font-size: 15px;width: 120px;">坐标</td>
                  </tr>
                  <tr v-for="(item, index) in deviceList[2].Axis" :key="index" style="font-size: 13px">
                    <td style="width: 80px">{{item.AxisName}}</td>
                    <td>{{item.AxisValue}}</td>
                  </tr>
                </table>
              </el-col>
              <el-col :span="10">
                <div style="width: 99%;height: 143px;">
                  <el-row>
                    <div style="display: flex;align-items: center;justify-content: center">
                      <img style="width: 32px" src="@/img/Aimg.png">
                      <div>
                        <div class="device_va_name">机床电流</div>
                        <div class="device_va_value">{{deviceList[2].Current }} A</div>
                      </div>
                    </div>
                  </el-row>
                  <el-row>
                    <div style="display: flex;align-items: center;justify-content: center">
                      <img style="width: 32px" src="@/img/Vimg.png">
                      <div>
                        <div class="device_va_name">机床电压</div>
                        <div class="device_va_value">{{ deviceList[2].Voltage }} V</div>
                      </div>
                    </div>
                  </el-row>
                </div>
              </el-col>
            </div>
          </div>
          <div class="max-box" style="margin: 0">
            <div id="title">当前报警</div>
          </div>
          <div style="margin-bottom: 0px;">
            <div style="margin-left: 1px;border: 1px solid #9f9f9f;height: 25px;">
              <div v-for="(item, index) in deviceList[2].Alarm" :key="index" style="display: flex;align-items: center;height: 25px">
                <div style="border-right: 1px solid #9f9f9f;height: 25px;width: 80px;text-align: center">{{ item.AlarmCode }}</div>
                <div style="height: 25px;width: 100%">{{ item.Alarm }}</div>
              </div>
            </div>
          </div>
          <div class="max-box" style="margin: 0">
            <div id="title">机床提示</div>
          </div>
          <div style="margin-bottom: 0px;height: 20px;">
            <div style="margin-left: 1px;border: 1px solid #9f9f9f;height: 25px;">
              <div v-for="(item, index) in deviceList[2].Tip" :key="index" style="display: flex;align-items: center;height: 25px">
                <div style="border-right: 1px solid #9f9f9f;height: 25px;width: 80px;text-align: center">{{ item.TipCode }}</div>
                <div style="height: 25px;width: 100%">{{ item.Tip }}</div>
              </div>
            </div>
          </div>
        </div>
        <div :style="{display: isShow}" class="data-box" style="right:10px; top:370px;">
          <span class="borderLeft1 boxBorder"></span>
          <span class="borderLeft2 boxBorder"></span>
          <span class="borderRight1 boxBorder"></span>
          <span class="borderRight2 boxBorder"></span>
          <div style="width: 100%; height: 30px;">
            <div class="indicatorBlock"/>
            <div class="indicatorText">
              ADV600成形机
            </div>
          </div>
          <div class="max-box">
            <div id="title">设备状态</div>
            <div class="main">
              <div style="">
                <div style="margin: 0 80px" :style="{backgroundColor:getStatusBgc(deviceList[3].Status)}">{{deviceStatus[deviceList[3].Status]}}</div>
              </div>
            </div>
          </div>
          <div class="max-box">
            <div id="title">机械坐标</div>
            <div class="main">
            </div>
          </div>
          <div style="margin-bottom: 0px;height: 145px;">
            <div class="main" style="margin-left: 1px">
              <el-col :span="14">
                <table>
                  <tr>
                    <td style="font-weight: bolder;font-size: 15px;width: 50px;">轴</td>
                    <td style="font-weight: bolder;font-size: 15px;width: 120px;">坐标</td>
                  </tr>
                  <tr v-for="(item, index) in deviceList[3].Axis" :key="index" style="font-size: 13px">
                    <td style="width: 80px">{{item.AxisName}}</td>
                    <td>{{item.AxisValue}}</td>
                  </tr>
                </table>
              </el-col>
              <el-col :span="10">
                <div style="width: 99%;height: 143px;">
                  <el-row>
                    <div style="display: flex;align-items: center;justify-content: center">
                      <img style="width: 32px" src="@/img/Aimg.png">
                      <div>
                        <div class="device_va_name">机床电流</div>
                        <div class="device_va_value">{{deviceList[3].Current }} A</div>
                      </div>
                    </div>
                  </el-row>
                  <el-row>
                    <div style="display: flex;align-items: center;justify-content: center">
                      <img style="width: 32px" src="@/img/Vimg.png">
                      <div>
                        <div class="device_va_name">机床电压</div>
                        <div class="device_va_value">{{ deviceList[3].Voltage }} V</div>
                      </div>
                    </div>
                  </el-row>
                </div>
              </el-col>
            </div>
          </div>
          <div class="max-box" style="margin: 0">
            <div id="title">当前报警</div>
          </div>
          <div style="margin-bottom: 0px;">
            <div style="margin-left: 1px;border: 1px solid #9f9f9f;height: 25px;">
              <div v-for="(item, index) in deviceList[3].Alarm" :key="index" style="display: flex;align-items: center;height: 25px">
                <div style="border-right: 1px solid #9f9f9f;height: 25px;width: 80px;text-align: center">{{ item.AlarmCode }}</div>
                <div style="height: 25px;width: 100%">{{ item.Alarm }}</div>
              </div>
            </div>
          </div>
          <div class="max-box" style="margin: 0">
            <div id="title">机床提示</div>
          </div>
          <div style="margin-bottom: 0px;height: 20px;">
            <div style="margin-left: 1px;border: 1px solid #9f9f9f;height: 25px;">
              <div v-for="(item, index) in deviceList[3].Tip" :key="index" style="display: flex;align-items: center;height: 25px">
                <div style="border-right: 1px solid #9f9f9f;height: 25px;width: 80px;text-align: center">{{ item.TipCode }}</div>
                <div style="height: 25px;width: 100%">{{ item.Tip }}</div>
              </div>
            </div>
          </div>
        </div>
        <div :style="{display: isShow}" class="data-box" style="right:10px; top:730px;height: 270px">
          <span class="borderLeft1 boxBorder"></span>
          <span class="borderLeft2 boxBorder"></span>
          <span class="borderRight1 boxBorder"></span>
          <span class="borderRight2 boxBorder"></span>
          <div style="width: 100%; height: 30px;">
            <div class="indicatorBlock"/>
            <div class="indicatorText">
              当日故障次数统计
            </div>
          </div>
          <div id="dashboard444" style="height: 240px; width: 100%"/>
        </div>

        <div :style="{display: isShow}" class="data-box" style="left:320px; top:730px;height: 270px;width: 635px">
          <span class="borderLeft1 boxBorder"></span>
          <span class="borderLeft2 boxBorder"></span>
          <span class="borderRight1 boxBorder"></span>
          <span class="borderRight2 boxBorder"></span>
          <div style="width: 100%; height: 30px;">
            <div class="indicatorBlock"/>
            <div class="indicatorText">
              设备运行履历
            </div>
          </div>
          <div id="dashboard44" style="height: 240px; width: 100%"/>
        </div>4
        <div :style="{display: isShow}" class="data-box" style="left:965px; top:730px;height: 270px;width: 635px">
          <span class="borderLeft1 boxBorder"></span>
          <span class="borderLeft2 boxBorder"></span>
          <span class="borderRight1 boxBorder"></span>
          <span class="borderRight2 boxBorder"></span>
          <div style="width: 100%; height: 30px;">
            <div class="indicatorBlock"/>
            <div class="indicatorText">
              月度生产计数统计
            </div>
          </div>
          <div id="dashboard4" style="height: 240px; width: 100%"/>
        </div>
        <div style="position: absolute;left:390px; top:10px;width: 200px;height: 30px" @mouseover="isShowBtn='inline'" @mouseleave="isShowBtn='none'">
          <div :style="{display: isShowBtn}">
            <el-button size="mini" style="background: #103666;color: white;border: 1px solid #103666;" @click="restView">复原</el-button>
          </div>
        </div>
      </div>
    </el-row>
  </div>
</template>

<script>
import axios from 'axios'
import * as echarts from 'echarts'
import DMT from '../components/DMT/index'
import $ from 'jquery'
import { mqttIp, mqttPort, opname } from '@/utils/request'
import mqtt from 'mqtt'
const dashboard1 = null
const dashboard2 = null
let dashboard3 = null
let dashboard4 = null
let dashboard44 = null
let dashboard444 = null
// let dashboard5 = null
// let dashboard6 = null
// let dashboard7 = null
// let dashboard8 = null
// let dashboard9 = null
// let dashboard11 = null
// let dashboard12 = null

export default {
  name: 'MingLuo',
  components: { DMT },
  data() {
    return {
      deviceStatus: {
        '-1': '关机',
        '0': '开机',
        '1': '运行',
        '2': '报警',
        '3': '暂停'
      },
      deviceList: [
        // 左上
        {
          'Name': window.dt_Config.outerLeftDeviceName, // 设备名称
          'Id': '1', // 设备ID
          'Status': '-1', // 设备运行状态 需要明确有几个状态，具体的值
          'Program': '', // 设备运行的程序名称
          'ProgramStatus': '', // 设备运行的程序状态 需要明确有几个状态，具体的值
          'Feed': '0', // 设备进给速度 确认下单位
          'Speed': '', // 设备主轴转速  确认下单位
          'Rapid': '0', // 设备移动速度 确认下单位  应该是  和高明确认下这个的含义
          'Axis': [], // [{ AxisName: 'X', AxisValue: '100' }, { AxisName: 'Y', AxisValue: '100' }, { AxisName: 'Z', AxisValue: '100' }, { AxisName: 'U', AxisValue: '100' }, { AxisName: 'V', AxisValue: '100' }, { AxisName: 'W', AxisValue: '100' }],
          'Tool': {},
          'OtherParameter': [],
          'Alarm': [], // [{ AlarmCode: 'xxx4', Alarm: 'xxx4', AlarmTime: 'xxx4' }],
          'Tip': [], // [{ TipCode: 'xxx4', Tip: 'xxx4', TipTime: 'xxx4' }], // 提示
          'robotDataList': [],
          'servoLoadData': [],
          'order': '21314',
          'Voltage': '0', // 电压
          'Current': '0' // 电流
        },
        // 左下
        {
          'Name': window.dt_Config.outerRightDeviceName, // 设备名称
          'Id': '2', // 设备ID
          'Status': '-1', // 设备运行状态 需要明确有几个状态，具体的值
          'Program': '', // 设备运行的程序名称
          'ProgramStatus': '', // 设备运行的程序状态 需要明确有几个状态，具体的值
          'Feed': '0', // 设备进给速度 确认下单位
          'Speed': '', // 设备主轴转速  确认下单位
          'Rapid': '0', // 设备移动速度 确认下单位  应该是  和高明确认下这个的含义
          'Axis': [], // [{ AxisName: 'X', AxisValue: '100' }, { AxisName: 'Y', AxisValue: '100' }, { AxisName: 'Z', AxisValue: '100' }, { AxisName: 'U', AxisValue: '100' }, { AxisName: 'V', AxisValue: '100' }, { AxisName: 'W', AxisValue: '100' }],
          'Tool': {},
          'OtherParameter': [],
          'Alarm': [], // [{ AlarmCode: 'xxx4', Alarm: 'xxx4', AlarmTime: 'xxx4' }],
          'Tip': [], // [{ TipCode: 'xxx4', Tip: 'xxx4', TipTime: 'xxx4' }], // 提示
          'robotDataList': [],
          'servoLoadData': [],
          'order': '21314',
          'Voltage': '0', // 电压
          'Current': '0' // 电流
        },
        // 右上
        {
          'Name': window.dt_Config.outerBottomLeftDeviceName, // 设备名称
          'Id': '1', // 设备ID
          'Status': '-1', // 设备运行状态 需要明确有几个状态，具体的值
          'Program': '', // 设备运行的程序名称
          'ProgramStatus': '', // 设备运行的程序状态 需要明确有几个状态，具体的值
          'Feed': '', // 设备进给速度 确认下单位
          'Speed': '', // 设备主轴转速  确认下单位
          'Rapid': '', // 设备移动速度 确认下单位  应该是  和高明确认下这个的含义
          'Axis': [], // [{ AxisName: 'X', AxisValue: '100' }, { AxisName: 'Y', AxisValue: '100' }, { AxisName: 'Z', AxisValue: '100' }, { AxisName: 'U', AxisValue: '100' }, { AxisName: 'V', AxisValue: '100' }, { AxisName: 'W', AxisValue: '100' }],
          'Tool': {},
          'OtherParameter': [],
          'Alarm': [], // [{ AlarmCode: 'xxx4', Alarm: 'xxx4', AlarmTime: 'xxx4' }],
          'Tip': [], // [{ TipCode: 'xxx4', Tip: 'xxx4', TipTime: 'xxx4' }], // 提示
          'robotDataList': [],
          'servoLoadData': [],
          'order': '21314',
          'Voltage': '0', // 电压
          'Current': '0' // 电流
        },
        // 右下
        {
          'Name': window.dt_Config.outerBottomRightDeviceName1, // 设备名称
          'Id': '1', // 设备ID
          'Status': '-1', // 设备运行状态 需要明确有几个状态，具体的值
          'Program': '', // 设备运行的程序名称
          'ProgramStatus': '', // 设备运行的程序状态 需要明确有几个状态，具体的值
          'Feed': '', // 设备进给速度 确认下单位
          'Speed': '', // 设备主轴转速  确认下单位
          'Rapid': '', // 设备移动速度 确认下单位  应该是  和高明确认下这个的含义
          'Axis': [], // [{ AxisName: 'X', AxisValue: '100' }, { AxisName: 'Y', AxisValue: '100' }, { AxisName: 'Z', AxisValue: '100' }, { AxisName: 'U', AxisValue: '100' }, { AxisName: 'V', AxisValue: '100' }, { AxisName: 'W', AxisValue: '100' }],
          'Tool': {},
          'OtherParameter': [],
          'Alarm': [], // [{ AlarmCode: 'xxx4', Alarm: 'xxx4', AlarmTime: 'xxx4' }],
          'Tip': [], // [{ TipCode: 'xxx4', Tip: 'xxx4', TipTime: 'xxx4' }], // 提示
          'robotDataList': [],
          'servoLoadData': [],
          'order': '21314',
          'Voltage': '0', // 电压
          'Current': '0' // 电流
        }
      ],
      style: {
        width: '1920',
        height: '1080',
        transform: 'scaleY(1) scaleX(1) translate(-50%, -50%)'
      },
      // 中间用
      classOption2: {
        step: 0.2,
        direction: 1,
        limitMoveNum: 2,
        openWatch: true,
        hoverStop: false
      },
      tellInfo: [],
      topInfo: {
        orderNumber: '10BK10|20230809-001-001',
        productNumber: '2401016-A5F/A',
        productName: '后桥半壳',
        planCount_beat: '0',
        realCount_beat: '0',
        persentCount_beat: 0,
        planCount_day: '0',
        realCount_day: '0',
        persentCount_day: 0,
        planCount_Week: '0',
        realCount_Week: '0',
        persentCount_Week: 0,
        planStart: '2023-08-09',
        planEnd: '2023-08-09'
      },
      lightStatusFinal: {},
      lightStatusFinal1: {
        status: 5 // 1运行 3报警 2开机 4急停 5掉线
      },
      dialogFormVisible1: false,
      isShow1: true,
      isShow: 'inline',
      isShowBtn1: false,
      isShowBtn: 'none',
      src: localStorage.getItem('twinAddress'),
      titlePng: '',
      titlePng1: '',
      titlePng2: '',
      listOP: [], // 工位号
      machineInfo_state: {},
      list: [{
        上电: '',
        运行: '',
        关机: '',
        报警: ''
      }], // 工位号
      energyPartData_Y: [],
      energyPartData_X: [],
      daliyOutPutData_X: [],
      daliyOutPutData_Y1: [],
      daliyOutPutData_Y: [],
      daliyOutPutData_Average: 0,
      daliyOutPutData_Average1: 0,
      toolListData_X: [],
      toolListData_Y: [],
      toolListData_Z: [],
      JPH_Xlist: [],
      JPH_Ylist: [],
      JPH_Y1list: [],
      MachienStatus: [],
      myChart4Alarm1: [],
      deviceStatus_colors: ['grey', 'orange', 'green', 'green', 'blue'],
      deviceStatus_state: ['关机', '待机', '运行', '报警', '暂停'],
      deviceStatus_table: [],
      productionType: '',
      table1: [],
      colors: [],
      state: [],
      myChart1X: [],
      myChart1Y: [],
      myChart2X: [],
      myChart2Y: [],
      myChart3X: [],
      myChart3Y: [],
      myChart4X: [],
      myChart4min: 0,
      myChart4max: 500,
      myChart4Y: [],
      myChart5X: [],
      myChart5Y: [],
      myChart4X1: [],
      myChart4Y1: [],
      myChart41min: 0,
      myChart41max: 500,
      myChart5X1: [],
      myChart5Y1: [],
      myChart6X: [],
      myChart6Y: [],
      myChart7X: [],
      myChart7Y: [],
      myChart7min: 0,
      myChart7max: 500,
      myChart8X: [],
      myChart8Y: [],
      myChart11X: [],
      myChart11Y: [],
      myChart11min: 0,
      myChart11max: 500,
      myChart12X: [],
      myChart12Y: [],
      myChart12min: 0,
      myChart12max: 500,
      otherParams: [],
      planData: [],
      gaugeData: [0, 0, 0, 0],
      gaugeDataRange: [0.2, 0.8, 0.2, 0.8, 0.2, 0.8, 0.2, 0.8],
      planProcess: 70,
      timeRate: 50,
      performanceRate: 54,
      performanceRate1: 54,
      JPH: 50,
      OEE: 80,
      averData: 0,
      timer: null,
      timer_1: null,
      timer_2: null,
      timer_3: null,
      timer_4: null,
      flag: 0,
      date: new Date(),
      year: '',
      month: '',
      day: '',
      minute: '',
      hour: '',
      second: '',
      week: '',
      PageCount: 0,
      total: 0, // 总条数
      pageSize: 5, // 每页显示条数
      PageCurrent: 1 // 后台获取页
    }
  },
  created() {
    this.getLogo()
    // window.updateRobotData = this.updateRobotData
    // delay = ms => new Promise((resolve, reject) => setTimeout(resolve, ms))
    // this.initData()
  },
  mounted() {
    const _this = this // 声明一个变量指向Vue实例this，保证作用域一致
    this.timer = setInterval(() => {
      _this.date = new Date() // 修改数据date
      this.year = new Date().getFullYear() + 1 < 10 ? '0' + (new Date().getFullYear() + 1) : new Date().getFullYear()
      this.month = new Date().getMonth() + 1 < 10 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1
      this.day = new Date().getDate() < 10 ? '0' + new Date().getDate() : new Date().getDate()
      this.hour = new Date().getHours() < 10 ? '0' + new Date().getHours() : new Date().getHours()
      this.minute = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes()
      this.second = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds()
      this.week = '日一二三四五六'.charAt(new Date().getDay())
    }, 1000)
    this.initEcharts()
    this.drawDashboard3()
    this.drawDashboard4()
    this.drawDashboard44()
    this.drawDashboard444()
    this.init()
    this.initLong()
    // this.initFast()
    this.initMqtt()

    setTimeout(() => {
      // this.timer_1 = setInterval(this.initFast, 1000 * 5)
      this.timer_3 = setInterval(this.init, 1000 * 5)
      // this.timer_4 = setInterval(this.initLong, 1000 * 60)
    }, 200)
    this.setScale()
    /* 窗口改变事件*/
    $(window).resize(() => {
      this.setScale()
    })
  },
  beforeDestroy() {
    clearInterval(this.timer_1)
    // clearInterval(this.timer_2)
    clearInterval(this.timer_3)
    clearInterval(this.timer_4)
  },
  methods: {
    getScale() {
      const w = window.innerWidth / this.style.width
      const h = window.innerHeight / this.style.height
      return { x: w, y: h }
    },
    setScale() {
      const scale = this.getScale()
      this.style.transform = 'scaleY(' + scale.y + ') scaleX(' + scale.x + ') translate(-50%, -50%)'
    },
    async goToOp(list) {
      // const routeData = this.$router.resolve({
      //   path: '/firstStation',
      //   query: {
      //     OP: list.工位号,
      //     工位号id: list.id
      //   }
      // })
      window.open(window.dt_Config.managerPage, '_blank')
    },
    initEcharts() {
      // dashboard1 = echarts.init(document.getElementById('dashboard1'))
      // dashboard2 = echarts.init(document.getElementById('dashboard2'))
      dashboard3 = echarts.init(document.getElementById('dashboard3'))
      dashboard4 = echarts.init(document.getElementById('dashboard4'))
      dashboard44 = echarts.init(document.getElementById('dashboard44'))
      dashboard444 = echarts.init(document.getElementById('dashboard444'))
      // dashboard5 = echarts.init(document.getElementById('dashboardFive'))
      // dashboard6 = echarts.init(document.getElementById('dashboardSix'))
      // dashboard7 = echarts.init(document.getElementById('dashboardSeven'))
      // dashboard8 = echarts.init(document.getElementById('dashboardEight'))
      // dashboard9 = echarts.init(document.getElementById('dashboardNine'))
      // dashboard11 = echarts.init(document.getElementById('dashboard11'))
      // dashboard12 = echarts.init(document.getElementById('dashboard12'))
    },
    init() {
      // this.searchTellInfoTable()
      // this.searchTable()
      // this.searchPlanData()
      // this.searchChartData1()
      // this.searchChartData2()
      this.searchChartData3()
      this.searchChartData4()
      this.searchChartData44()
      this.searchChartData444()
      // this.searchChartData5Range()
      // this.searchChartData7Range()
      // this.searchChartData11Range()
      // this.searchChartData12Range()
    },
    initLong() {
      // this.searchChartData1()
    },
    initFast() {
      this.searchDevicePartType()
    },
    initMqtt() {
      window.websocketonmessageWeb = this.websocketonmessage
      const scope = this
      const connection = {
        host: mqttIp,
        port: mqttPort,
        endpoint: '/mqtt',
        clean: true, // 保留会话
        connectTimeout: 4000, // 超时时间
        reconnectPeriod: 4000, // 重连时间间隔
        // 认证信息
        clientId: 'mqttjs_3be2c321' + new Date().getTime(), // 同一个ID 无法二次连接
        username: 'DT_WEB1',
        password: ''
      }
      const subscription = {
        topic: opname,
        qos: 0
      }
      const { host, port, endpoint, ...options } = connection
      const connectUrl = `ws://${host}:${port}${endpoint}`
      try {
        this.mqttClient = mqtt.connect(connectUrl, options)
      } catch (error) {
        console.log('MQTT connect error', error)
      }

      this.mqttClient.on('connect', () => {
        this.$message.success('加载完成，连接MQTT服务器成功！')
        console.log('MQTT Connection succeeded!')
        const { topic, qos } = subscription
        this.mqttClient.subscribe(topic, { qos }, (error, res) => {
          if (error) {
            console.log('Subscribe to topics error', error)
          }
        })
      })
      this.mqttClient.on('error', error => {
        console.log('MQTT Connection failed', error)
        try {
          scope.$message.error('MQTT服务器连接失败')
          if (scope.IsAllowConnect) {
            // 显示一下
            scope.$message.warning('重新连接MQTT服务器')
            console.log('重新连接MQTT服务器')
            // 重新连接,打开计时器
            setTimeout(function() {
              scope.initMqtt()
            }, 5000)
          }
        } catch (exception) {
          const error = exception.toString()
          scope.$message.error('MQTT服务器出现错误,关闭连接' + error)
        }
      })
      // 接收消息
      this.mqttClient.on('message', (topic, message) => {
        try {
          scope.websocketonmessage({ data: message.toString() })
        } catch (exception) {
          console.log(exception.toString())
        }
      })
    },
    websocketonmessage(msg) { // 数据接收
      this.msg = msg
      try {
        var arrays_signal = msg.data.split('|')
        var interFaceType = arrays_signal[0]
        var dataType = arrays_signal[1]
        var m_data = arrays_signal[2]
        switch (interFaceType) {
          case 'MES':
            switch (dataType) {
              case 'C_B_DeviceInfo': {
                {
                  const S_data = JSON.parse(m_data)[0]
                  // this.machineInfo_state[m_Opname].status = parseInt(S_data.statusFinal)
                  for (let i = 0; i < this.deviceList.length; i++) {
                    let item = this.deviceList[i]
                    // console.log('item.name', item.Name, 'S_data.Name', S_data.Name)
                    if (S_data.Name === item.Name) {
                      // console.log('有匹配上的数据')
                      // 2.对对象进行拷贝覆盖
                      item = { ...item, ...S_data }
                      // if (item.hasOwnProperty('Alarm')) {
                      //   if (item.Alarm === []) item.Alarm = [{ AlarmCode: '', Alarm: '', AlarmTime: '' }]
                      // }
                      // if (item.hasOwnProperty('Tip')) {
                      //   if (item.Tip === []) item.Tip = [{ TipCode: '', Tip: '', TipTime: '' }]
                      // }
                      // if (item.hasOwnProperty('Axis')) {
                      //   if (item.Axis === null) item.Axis = []
                      // }
                      if (item.hasOwnProperty('OtherParameter')) {
                        if (item.OtherParameter === null) item.OtherParameter = []
                      }
                      if (item.hasOwnProperty('Program')) {
                        // 将设备程序只使用最后一个文件名 \ 分割
                        if (item.Program !== null) {
                          item.Program = item.Program.split('\\')[item.Program.split('\\').length - 1]
                        } else {
                          item.Program = ''
                        }
                      }
                      if (item.hasOwnProperty('Tool')) {
                        if (item.Tool === null) item.Tool = {}
                      }

                      // 4.重新赋值给原对象
                      this.deviceList[i] = item
                      // this.drawLine501()
                      // this.drawLine502()
                      break
                    }
                  }
                }
                break
              }
            }
            break
        }
      } catch (exception) {
        var error = exception.toString()
        console.log(error)
      }
    },
    toolInfoColor(opName, status) {
      const opDom = document.getElementById('OP_status_' + opName)
      let backgroundColor = '#808080'
      if (status === 1) {
        backgroundColor = '#009e1c'
      }
      if (status === 3) {
        backgroundColor = '#ff2020'
      }
      if (status === 2) {
        backgroundColor = '#ffc823'
      }
      if (status === 4) {
        backgroundColor = '#ff2020'
      }
      opDom.style.backgroundColor = backgroundColor
    },
    getStatusBgc(status) {
      // 0 1 2 -1
      let backgroundColor = ''
      if (status === '1') {
        backgroundColor = '#009e1c'
      }
      if (status === '2') {
        backgroundColor = '#ff2020'
      }
      if (status === '0') {
        backgroundColor = '#ffc823'
      }
      if (status === '-1') {
        backgroundColor = '#666666'
      }
      if (status === '3') {
        backgroundColor = '#00b2ff'
      }
      return backgroundColor
    },
    searchPlanData() {
      var param = []
      var Data = this.CreateData('11', '产量管理_今日计划_查询', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.length > 0) {
          this.topInfo.orderNumber = response.data[0].工单号
          this.topInfo.productNumber = response.data[0].产品型号

          this.topInfo.planCount_beat = response.data[0].班计划数量
          this.topInfo.realCount_beat = response.data[0].当班总产出
          this.topInfo.persentCount_beat = response.data[0].班完成率

          this.topInfo.planCount_day = response.data[0].日计划数量
          this.topInfo.realCount_day = response.data[0].今日总产出
          this.topInfo.persentCount_day = response.data[0].日完成率

          this.topInfo.planCount_Week = response.data[0].周计划数量
          this.topInfo.realCount_Week = response.data[0].本周总产出
          this.topInfo.persentCount_Week = response.data[0].周完成率
        }
      })
    },
    // 获取工位号
    searchTable() {
      var param = []
      var Data = this.CreateData('11', '工位管理_工位基础信息_查询', param)
      this.ExecDatabase(Data).then(response => {
        this.listOP = response.data
        for (const datum of response.data) {
          this.machineInfo_state[datum.工位号] = {}
          if (datum.状态代码 === 5) {
            this.machineInfo_state[datum.工位号]['work'] = 0
            this.machineInfo_state[datum.工位号]['ready'] = 0
            this.machineInfo_state[datum.工位号]['off'] = 1
            this.machineInfo_state[datum.工位号]['alarm'] = 0
            this.machineInfo_state[datum.工位号]['status'] = 5
          }
          if (datum.状态代码 === 0) {
            this.machineInfo_state[datum.工位号]['work'] = 0
            this.machineInfo_state[datum.工位号]['ready'] = 0
            this.machineInfo_state[datum.工位号]['off'] = 1
            this.machineInfo_state[datum.工位号]['alarm'] = 0
            this.machineInfo_state[datum.工位号]['status'] = 5
          }
          if (datum.状态代码 === -1) {
            this.machineInfo_state[datum.工位号]['work'] = 0
            this.machineInfo_state[datum.工位号]['ready'] = 0
            this.machineInfo_state[datum.工位号]['off'] = 1
            this.machineInfo_state[datum.工位号]['alarm'] = 0
            this.machineInfo_state[datum.工位号]['status'] = 5
          }
          if (datum.状态代码 === -2) {
            this.machineInfo_state[datum.工位号]['work'] = 0
            this.machineInfo_state[datum.工位号]['ready'] = 0
            this.machineInfo_state[datum.工位号]['off'] = 1
            this.machineInfo_state[datum.工位号]['alarm'] = 0
            this.machineInfo_state[datum.工位号]['status'] = 5
          }
          if (datum.状态代码 === 3) {
            this.machineInfo_state[datum.工位号]['work'] = 0
            this.machineInfo_state[datum.工位号]['ready'] = 1
            this.machineInfo_state[datum.工位号]['off'] = 0
            this.machineInfo_state[datum.工位号]['alarm'] = 1
            this.machineInfo_state[datum.工位号]['status'] = 3
          }
          if (datum.状态代码 === 1) {
            this.machineInfo_state[datum.工位号]['work'] = 1
            this.machineInfo_state[datum.工位号]['ready'] = 1
            this.machineInfo_state[datum.工位号]['off'] = 0
            this.machineInfo_state[datum.工位号]['alarm'] = 0
            this.machineInfo_state[datum.工位号]['status'] = 1
          }
          if (datum.状态代码 === 2) {
            this.machineInfo_state[datum.工位号]['work'] = 0
            this.machineInfo_state[datum.工位号]['ready'] = 1
            this.machineInfo_state[datum.工位号]['off'] = 0
            this.machineInfo_state[datum.工位号]['alarm'] = 0
            this.machineInfo_state[datum.工位号]['status'] = 2
          }
          if (datum.状态代码 === 4) {
            this.machineInfo_state[datum.工位号]['work'] = 0
            this.machineInfo_state[datum.工位号]['ready'] = 1
            this.machineInfo_state[datum.工位号]['off'] = 0
            this.machineInfo_state[datum.工位号]['alarm'] = 1
            this.machineInfo_state[datum.工位号]['status'] = 4
          }
        }
      })
    },
    // 获取工位号
    searchTellInfoTable() {
      var param = []
      var Data = this.CreateData('11', '公告管理_公告内容_查询', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.length > 0) {
          this.tellInfo = response.data
        }
      })
    },
    // 查询开机率
    searchChartData1() {
      var param1 = []
      this.MachienStatus = []
      var Data1 = this.CreateData('11', '设备管理_设备状态占比_查询', param1)
      this.ExecDatabase(Data1).then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.MachienStatus.push({
            name: response.data[i]['设备状态名称'],
            value: response.data[i]['CountTime'],
            color: response.data[i]['颜色']
          })
        }
        this.drawDashboard1()
      })
    },
    // 开机率
    drawDashboard1() {
      dashboard1.setOption({
        grid: { // 绘图网格
          left: '10px',
          right: '4%',
          top: '8%',
          bottom: '0',
          containLabel: true
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          icon: 'circle',
          textStyle: {
            color: '#fff',
            fontSize: 16
          }
        },
        series: [
          // 用空bar来显示几个图例
          {
            type: 'pie',
            data: this.MachienStatus,
            itemStyle: {
              normal: {
                color: function(colors) {
                  return colors.data.color
                },
                label: {
                  textStyle: {
                    color: '#fff',
                    fontSize: 16,
                    fontWeight: 'bolder'
                  }
                }
              }
            }
          }
        ]
      })
    },
    searchChartData2() {
      var param = []
      this.daliyOutPutData_X = []
      this.daliyOutPutData_Y = []
      this.daliyOutPutData_Y1 = []
      var Data = this.CreateData('11', '产量管理_7日产出曲线', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.length > 0) {
          for (const info of response.data) {
            this.daliyOutPutData_X.push(info.date.substring(info.date.length - 5, info.date.length))
            this.daliyOutPutData_Y.push(info.num)
            this.daliyOutPutData_Y1.push(info.num1)
          }
          this.drawDashboard2()
        }
      })
    },
    // 近7日的产量
    drawDashboard2() {
      // 绘制图表
      dashboard2.setOption(
        {
          legend: {
            type: 'plain',
            show: true,
            data: ['下线', '合格数'],
            textStyle: {
              color: '#fff'
            }
          },
          grid: [
            {
              left: '12%',
              top: '15%',
              right: '5%',
              bottom: '18%'
            }
          ],
          tooltip: {
            trigger: 'axis'
          },
          xAxis: {
            type: 'category',
            data: this.daliyOutPutData_X,
            axisLine: {
              lineStyle: {
                color: 'white'
              }
            },
            axisLabel: {
              color: 'white',
              interval: 0,
              rotate: 45
            }
          },
          yAxis: {
            style: 'white',
            type: 'value',
            axisLine: {
              lineStyle: {
                color: 'white'
              }
            },
            axisLabel: {
              color: 'white'
            },
            splitLine: {
              show: false
            }
          },
          series: [
            {
              name: '下线',
              data: this.daliyOutPutData_Y1,
              type: 'bar',
              barWidth: '50%',
              color: '#ffc823',
              label: {
                show: true,
                position: 'top',
                color: 'white',
                fontSize: '14'
              }
            },
            {
              name: '合格数',
              data: this.daliyOutPutData_Y,
              type: 'line',
              barWidth: '50%',
              smooth: true,
              itemStyle: {
                color: '#00beff'
              },
              label: {
                show: false,
                color: '#fff',
                position: 'top',
                fontSize: '16'
              }
            }
          ]
        }
      )
    },
    // 查询7日开机率
    searchChartData3() {
      var param = []
      this.energyPartData_X = []
      this.energyPartData_Y = []
      var Data = this.CreateData('11', '设备管理_设备开机率_查询', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.length > 0) {
          for (const info of response.data) {
            this.energyPartData_X.push(info.工位号)
            this.energyPartData_Y.push(info.num)
          }
          this.drawDashboard3()
        }
      })
    },
    // 7日开机率
    drawDashboard3() {
      // 绘制图表
      dashboard3.setOption({
        grid: [
          {
            left: '10%',
            top: '12%',
            right: '5%',
            bottom: '12%'
          }
        ],
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: this.energyPartData_X,
          axisLine: {
            lineStyle: {
              color: 'white'
            }
          },
          axisLabel: {
            color: 'white',
            interval: 0,
            rotate: 0,
            fontFamily: 'Microsoft YaHei'
          }
        },
        yAxis: {
          name: '%',
          type: 'value',
          axisLine: {
            show: true,
            lineStyle: {
              color: 'white'
            }
          },
          axisLabel: {
            color: 'white'
          },
          splitLine: {
            show: false
          }
        },
        series: [
          {
            data: this.energyPartData_Y,
            type: 'bar',
            barWidth: '50%',
            smooth: true,
            itemStyle: {
              color: '#ffb700'
            },
            label: {
              show: true,
              color: '#fff',
              position: 'top',
              fontSize: '16',
              font: 'Microsoft YaHei'
            }
          }
        ]
      })
    },
    // jph
    searchChartData4() {
      var param = []
      this.JPH_Xlist = []
      this.JPH_Ylist = []
      this.JPH_Y1list = []
      var Data = this.CreateData('11', '产量管理_JPH_查询', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.length > 0) {
          for (const info of response.data) {
            this.JPH_Xlist.push(info.HH)
            this.JPH_Ylist.push(info.DataCountOK)
            this.JPH_Y1list.push(info.DataCountNG)
          }
          this.drawDashboard4()
        }
      })
    },
    // jph
    drawDashboard4() {
      // 绘制图表
      dashboard4.setOption({
        title: {
          show: true,
          left: 'center',
          textStyle: {
            color: '#f79646'
          }
        },
        legend: {
          type: 'plain',
          show: false,
          textStyle: {
            color: '#fff'
          }
        },
        grid: [
          {
            top: '15%',
            left: '3%',
            right: '4%',
            bottom: '4%',
            containLabel: true
          }
        ],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          name: '月',
          type: 'category',
          data: this.JPH_Xlist,
          axisLine: {
            lineStyle: {
              color: 'white'
            }
          },
          splitLine: {
            show: false
          },
          axisLabel: {
            color: 'white'
          }
        },
        yAxis: {
          name: '台',
          type: 'value',
          axisLine: {
            show: true,
            lineStyle: {
              color: 'white'
            }
          },
          splitLine: {
            show: false
          }
        },
        series: [
          {
            name: '下线台数',
            data: this.JPH_Ylist,
            type: 'bar',
            // barWidth: '60%',
            itemStyle: {
              color: '#198800'
            },
            label: {
              show: true,
              color: '#fff',
              position: 'top'
            }
          }
          // {
          //   name: '不合格台数',
          //   data: this.JPH_Y1list,
          //   type: 'bar',
          //   // barWidth: '60%',
          //   itemStyle: {
          //     color: '#ffb700'
          //   },
          //   label: {
          //     show: true,
          //     color: '#fff',
          //     position: 'top'
          //   }
          // }
        ]
      })
    },
    // 查询设备运行履历
    searchChartData44() {
      this.deviceStatus_table = []
      var param1 = []
      var Data1 = this.CreateData('11', '设备管理_设备每分钟状态_查询', param1)
      this.ExecDatabase(Data1).then(response => {
        this.deviceStatus_table = response.data
      }).then(() => {
        this.drawDashboard44()
      })
    },
    // 设备运行履历
    drawDashboard44() {
      const deviceStatus_data = []
      const deviceStatus_yAxisValue = []
      let deviceStatus_index = 0
      if (this.deviceStatus_table.length === 1) {
        deviceStatus_data.push({
          itemStyle: { normal: { color: this.deviceStatus_table[0].颜色 }}, // 条形颜色
          name: this.deviceStatus_table[0].设备状态名称,
          value: [0, this.deviceStatus_table[0].开始时间, this.deviceStatus_table[0].结束时间]
        })
      } else {
        for (let i = 0; i < this.deviceStatus_table.length; i++) {
          if (i < this.deviceStatus_table.length) {
            if (i === 0) {
              deviceStatus_index = 0
              deviceStatus_yAxisValue.push(this.deviceStatus_table[i].工位号)
            } else if (this.deviceStatus_table[i].工位号 !== this.deviceStatus_table[i - 1].工位号) {
              deviceStatus_index++ // y轴索引
              deviceStatus_yAxisValue.push(this.deviceStatus_table[i].工位号)
            }
          }
          deviceStatus_data.push({
            itemStyle: { normal: { color: this.deviceStatus_table[i].颜色 }}, // 条形颜色
            name: this.deviceStatus_table[i].设备状态名称,
            value: [parseInt(deviceStatus_index), this.deviceStatus_table[i].开始时间, this.deviceStatus_table[i].结束时间]
          })
        }
      }
      // const myChart = echarts.init(document.getElementById('myChart4'))
      dashboard44.clear()
      dashboard44.setOption({
        // title: {
        //   left: 'center',
        //   text: '设备状态分布图(分钟)',
        //   textStyle: {
        //     color: '#ffffff'
        //   }
        // },
        color: this.deviceStatus_colors,
        tooltip: { // 提示框
          formatter(params) {
            return params.value[1].substr(11, 5) + '~' + params.value[2].substr(11, 5)
          } // 数据的值
        },
        grid: { // 绘图网格
          left: '10px',
          right: '4%',
          top: '10%',
          bottom: '2%',
          containLabel: true
        },
        legend: { // 图例
          data: ['关机', '待机', '运行', '暂停', '报警'],
          selectedMode: false,
          textStyle: {
            color: '#ffffff'
          }
        },
        xAxis: {
          type: 'time',
          axisLine: {
            lineStyle: {
              color: '#ffffff'
            },
            show: true
          },
          axisTick: {
            show: true
          },
          interval: 1000 * 60 * 60 * 2,
          axisLabel: {
            formatter(value) {
              var date = new Date(value)
              return getzf(date.getHours()) + ':' + getzf(date.getMinutes())
              function getzf(num) {
                if (parseInt(num) < 10) {
                  num = '0' + num
                }
                return num
              }
            }
          }
        },
        yAxis: {
          axisLine: {
            lineStyle: {
              color: '#ffffff'
            }
          },
          data: deviceStatus_yAxisValue
        },
        series: [
          // 用空bar来显示几个图例
          { name: this.deviceStatus_state[0], type: 'bar', data: [] },
          { name: this.deviceStatus_state[1], type: 'bar', data: [] },
          { name: this.deviceStatus_state[2], type: 'bar', data: [] },
          { name: this.deviceStatus_state[3], type: 'bar', data: [] },
          { name: this.deviceStatus_state[4], type: 'bar', data: [] },
          {
            type: 'custom',
            renderItem(params, api) { // 开发者自定义的图形元素渲染逻辑，是通过书写 renderItem 函数实现的
              var categoryIndex = api.value(0) // 这里使用 api.value(0) 取出当前 dataItem 中第一个维度的数值。
              var start = api.coord([api.value(1), categoryIndex]) // 这里使用 api.coord(...) 将数值在当前坐标系中转换成为屏幕上的点的像素值。
              var end = api.coord([api.value(2), categoryIndex])
              var height = 18 // 柱体宽度

              return {
                type: 'rect', // 表示这个图形元素是矩形。还可以是 'circle', 'sector', 'polygon' 等等。
                shape: echarts.graphic.clipRectByRect({ // 矩形的位置和大小。
                  x: start[0],
                  y: start[1] - height,
                  width: end[0] - start[0],
                  height: height * 1.2
                }, { // 当前坐标系的包围盒。
                  x: params.coordSys.x,
                  y: params.coordSys.y,
                  width: params.coordSys.width,
                  height: params.coordSys.height
                }),
                style: api.style()
              }
            },
            encode: {
              x: [1, 2], // data 中『维度1』和『维度2』对应到 X 轴
              y: 0 // data 中『维度0』对应到 Y 轴
            },
            data: deviceStatus_data
          }
        ]
      })
    },
    // 查询设备报警信息
    searchChartData444() {
      this.myChart4Alarm1 = []
      var param1 = []
      var Data1 = this.CreateData('11', '设备管理_设备报警_查询', param1)
      this.ExecDatabase(Data1).then(response => {
        this.myChart4Alarm1 = response.data
      }).then(() => {
        this.drawDashboard444()
      })
    },
    // 设备报警信息
    drawDashboard444() {
      dashboard444.setOption({
        tooltip: {
          trigger: 'item'
        },
        legend: {
          type: 'plain',
          show: true,
          textStyle: {
            color: '#fff',
            fontSize: '10px'
          }
        },
        series: [
          {
            name: '机床报警计数统计',
            type: 'pie',
            avoidLabelOverlap: true,
            radius: '60%',
            // radius: ['40%', '60%'],
            center: ['50%', '55%'],
            label: {
              normal: {
                // 各分区的提示内容
                // params: 即下面传入的data数组,通过自定义函数，展示你想要的内容和格式
                formatter: function(params) {
                  return params.name + '\n' + params.value + '次'
                },
                textStyle: {
                  color: '#ffffff',
                  fontSize: 14
                }
              }
            },
            labelLine: {
              normal: {
                length: 4, // 第一条线
                length2: 8 // 第二条线
              }
            },
            data: this.myChart4Alarm1
          }
        ]
      })
    },
    searchDevicePartType() {
      var param = []
      var Data = this.CreateData('11', '基础数据_产品型号_机床当前_查询', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.length > 0) {
          this.productionType = response.data[0]['产品型号']
        }
      })
    },
    // searchChartData3() {
    //   var param4 = []
    //   var Data4 = this.CreateData('11', '生产看板_生产可动率_查询', param4)
    //   this.ExecDatabase(Data4).then(response => {
    //     this.drawDashboard3()
    //   })
    // },
    // drawDashboard3() {
    //   dashboard3.setOption({
    //     series: [
    //       {
    //         min: 0,
    //         max: 100,
    //         startAngle: 200,
    //         endAngle: -20,
    //         center: ['50%', '60%'],
    //         type: 'gauge',
    //         axisLine: {
    //           lineStyle: {
    //             width: 5,
    //             color: [
    //               [this.gaugeDataRange[4], '#ffa94d'],
    //               [this.gaugeDataRange[5], '#69db7c'],
    //               [1, '#ffa94d']
    //             ]
    //           }
    //         },
    //         pointer: {
    //           itemStyle: {
    //             color: 'auto'
    //           }
    //         },
    //         radius: '120%',
    //         axisTick: {
    //           show: false
    //         },
    //         splitLine: {
    //           distance: 0,
    //           length: 3,
    //           lineStyle: {
    //             width: 1,
    //             color: 'white'
    //           }
    //         },
    //         axisLabel: {
    //           distance: 10,
    //           color: 'white',
    //           fontSize: 7
    //         },
    //         anchor: {
    //           show: true,
    //           showAbove: true,
    //           size: 5,
    //           itemStyle: {
    //             borderWidth: 3
    //           }
    //         },
    //         title: {
    //           show: false
    //         },
    //         detail: {
    //           valueAnimation: true,
    //           fontSize: 16,
    //           color: 'white',
    //           offsetCenter: [0, '50%']
    //         },
    //         data: [
    //           {
    //             value: this.gaugeData[2],
    //             detail: {
    //               formatter: function(value) {
    //                 return value + ' cm'
    //               }
    //             }
    //           }
    //         ]
    //       }
    //     ]
    //   })
    // },
    // searchChartData4Range() {
    //   var param4 = []
    //   var Data4 = this.CreateData('11', 'AA_小端面清洗压力_折线图Range_查询', param4)
    //   this.ExecDatabase(Data4).then(response => {
    //     if (response.data.length > 0) {
    //       this.myChart4min = response.data[0]['minValue']
    //       this.myChart4max = response.data[0]['maxValue']
    //     }
    //     this.searchChartData4()
    //   })
    // },
    // searchChartData4() {
    //   var param4 = []
    //   this.myChart4X = []
    //   this.myChart4Y = []
    //   var Data4 = this.CreateData('11', 'AA_小端面清洗压力_折线图_查询', param4)
    //   this.ExecDatabase(Data4).then(response => {
    //     if (response.data.length > 0) {
    //       for (let i = 0; i < response.data.length; i++) {
    //         // this.myChart4X.push(i + 1)
    //         this.myChart4X.push(response.data[i]['采集时间'])
    //         this.myChart4Y.push(response.data[i].Value)
    //       }
    //     }
    //     this.drawDashboard4()
    //   })
    // },
    // drawDashboard4() {
    //   dashboard4.setOption({
    //     grid: [
    //       {
    //         left: '10%',
    //         top: '10%',
    //         right: '8%',
    //         bottom: '10%'
    //       }
    //     ],
    //     // legend: {
    //     //   textStyle: {
    //     //     color: '#fff'
    //     //   }
    //     // },
    //     tooltip: {
    //       trigger: 'axis',
    //       axisPointer: {
    //         type: 'shadow'
    //       }
    //     },
    //     xAxis: {
    //       type: 'category',
    //       data: this.myChart4X,
    //       axisLine: {
    //         lineStyle: {
    //           color: 'white'
    //         }
    //       },
    //       axisLabel: {
    //         color: 'white'
    //       }
    //     },
    //     yAxis: {
    //       type: 'value',
    //       min: 0,
    //       max: this.myChart4max + 5,
    //       axisLabel: {
    //         color: 'white'
    //       },
    //       axisLine: {
    //         show: true,
    //         lineStyle: {
    //           color: '#fff'
    //         }
    //       },
    //       axisTick: {
    //         show: true,
    //         lineStyle: {
    //           color: '#fff'
    //         }
    //       },
    //       splitLine: {
    //         show: false
    //       }
    //     },
    //     series: [
    //       {
    //         name: '小端面清洗压力',
    //         data: this.myChart4Y,
    //         type: 'line',
    //         color: '#83ffff',
    //         markLine: {
    //           data: [{ yAxis: this.myChart4min }, { yAxis: this.myChart4max }],
    //           lineStyle: {
    //             color: '#efb300'
    //           },
    //           label: {
    //             position: 'end',
    //             color: 'white',
    //             distance: -0
    //           }
    //         }
    //       }
    //       // {
    //       //   name: 'B仓供水泵压力',
    //       //   data: this.myChart5Y,
    //       //   type: 'line',
    //       //   color: '#efb300'
    //       //   // markLine: {
    //       //   //   data: [{ yAxis: 420 }, { yAxis: 460 }],
    //       //   //   lineStyle: {
    //       //   //     color: '#efb300'
    //       //   //   },
    //       //   //   label: {
    //       //   //     position: 'end',
    //       //   //     color: 'white',
    //       //   //     distance: -0
    //       //   //   }
    //       //   // }
    //       // }
    //     ]
    //   })
    // },
    searchChartData5Range() {
      var param4 = []
      var Data4 = this.CreateData('11', 'AA_顶面清洗压力_折线图Range_查询', param4)
      this.ExecDatabase(Data4).then(response => {
        if (response.data.length > 0) {
          this.myChart41min = response.data[0]['minValue']
          this.myChart41max = response.data[0]['maxValue']
        }
        this.searchChartData5()
      })
    },
    searchChartData5() {
      var param4 = []
      this.myChart4X1 = []
      this.myChart4Y1 = []
      var Data4 = this.CreateData('11', 'AA_顶面清洗压力_折线图_查询', param4)
      this.ExecDatabase(Data4).then(response => {
        if (response.data.length > 0) {
          for (let i = 0; i < response.data.length; i++) {
            // this.myChart4X1.push(i + 1)
            this.myChart4X1.push(response.data[i]['采集时间'])
            this.myChart4Y1.push(response.data[i].Value)
          }
        }
        this.drawDashboard5()
      })
    },
    drawDashboard5() {
      // dashboard5.setOption({
      //   grid: [
      //     {
      //       left: '10%',
      //       top: '10%',
      //       right: '8%',
      //       bottom: '10%'
      //     }
      //   ],
      //   // legend: {
      //   //   textStyle: {
      //   //     color: '#fff'
      //   //   }
      //   // },
      //   tooltip: {
      //     trigger: 'axis',
      //     axisPointer: {
      //       type: 'shadow'
      //     }
      //   },
      //   xAxis: {
      //     type: 'category',
      //     data: this.myChart4X1,
      //     axisLine: {
      //       lineStyle: {
      //         color: 'white'
      //       }
      //     },
      //     axisLabel: {
      //       color: 'white'
      //     }
      //   },
      //   yAxis: {
      //     type: 'value',
      //     min: 0,
      //     max: this.myChart41max + 5,
      //     axisLabel: {
      //       color: 'white'
      //     },
      //     axisLine: {
      //       show: true,
      //       lineStyle: {
      //         color: '#fff'
      //       }
      //     },
      //     axisTick: {
      //       show: true,
      //       lineStyle: {
      //         color: '#fff'
      //       }
      //     },
      //     splitLine: {
      //       show: false
      //     }
      //   },
      //   series: [
      //     {
      //       name: '顶面清洗压力',
      //       data: this.myChart4Y1,
      //       type: 'line',
      //       color: '#83ffff',
      //       markLine: {
      //         data: [{ yAxis: this.myChart41min }, { yAxis: this.myChart41max }],
      //         lineStyle: {
      //           color: '#efb300'
      //         },
      //         label: {
      //           position: 'end',
      //           color: 'white',
      //           distance: -0
      //         }
      //       }
      //     }
      //     // {
      //     //   name: 'B仓清洗泵压力',
      //     //   data: this.myChart5Y1,
      //     //   type: 'line',
      //     //   color: '#efb300'
      //     //   // markLine: {
      //     //   //   data: [{ yAxis: 120 }, { yAxis: 180 }],
      //     //   //   lineStyle: {
      //     //   //     color: '#efb300'
      //     //   //   },
      //     //   //   label: {
      //     //   //     position: 'end',
      //     //   //     color: 'white',
      //     //   //     distance: -0
      //     //   //   }
      //     //   // }
      //     // }
      //   ]
      // })
    },
    // drawDashboard6() {
    //   dashboard6.setOption({
    //     grid: [
    //       {
    //         left: '10%',
    //         top: '10%',
    //         right: '8%',
    //         bottom: '10%'
    //       }
    //     ],
    //     tooltip: {
    //       trigger: 'axis',
    //       axisPointer: {
    //         type: 'shadow'
    //       }
    //     },
    //     xAxis: {
    //       type: 'category',
    //       data: this.myChart6X,
    //       axisLine: {
    //         lineStyle: {
    //           color: 'white'
    //         }
    //       },
    //       axisLabel: {
    //         color: 'white'
    //       }
    //     },
    //     yAxis: {
    //       type: 'value',
    //       min: 210,
    //       max: 90,
    //       axisLabel: {
    //         color: 'white'
    //       },
    //       axisLine: {
    //         show: true,
    //         lineStyle: {
    //           color: '#fff'
    //         }
    //       },
    //       axisTick: {
    //         show: true,
    //         lineStyle: {
    //           color: '#fff'
    //         }
    //       },
    //       splitLine: {
    //         show: false
    //       }
    //     },
    //     series: [
    //       {
    //         data: this.myChart6Y,
    //         type: 'line',
    //         color: '#83ffff',
    //         markLine: {
    //           data: [{ yAxis: 120 }, { yAxis: 180 }],
    //           lineStyle: {
    //             color: '#efb300'
    //           },
    //           label: {
    //             position: 'end',
    //             color: 'white',
    //             distance: -0
    //           }
    //         }
    //       }
    //     ]
    //   })
    // },
    searchChartData7Range() {
      var param4 = []
      var Data4 = this.CreateData('11', 'AA_高压油道盲孔去毛刺压力_折线图Range_查询', param4)
      this.ExecDatabase(Data4).then(response => {
        if (response.data.length > 0) {
          this.myChart7min = response.data[0]['minValue']
          this.myChart7max = response.data[0]['maxValue']
        }
        this.searchChartData7()
      })
    },
    searchChartData7() {
      var param4 = []
      this.myChart7X = []
      this.myChart7Y = []
      var Data4 = this.CreateData('11', 'AA_高压油道盲孔去毛刺压力_折线图_查询', param4)
      this.ExecDatabase(Data4).then(response => {
        if (response.data.length > 0) {
          for (let i = 0; i < response.data.length; i++) {
            // this.myChart7X.push(i + 1)
            this.myChart7X.push(response.data[i]['采集时间'])
            this.myChart7Y.push(response.data[i].Value)
          }
        }
        this.drawDashboard7()
      })
    },
    drawDashboard7() {
      // dashboard7.setOption({
      //   grid: [
      //     {
      //       left: '10%',
      //       top: '10%',
      //       right: '8%',
      //       bottom: '10%'
      //     }
      //   ],
      //   tooltip: {
      //     trigger: 'axis',
      //     axisPointer: {
      //       type: 'shadow'
      //     }
      //   },
      //   xAxis: {
      //     type: 'category',
      //     data: this.myChart7X,
      //     axisLine: {
      //       lineStyle: {
      //         color: 'white'
      //       }
      //     },
      //     axisLabel: {
      //       color: 'white'
      //     }
      //   },
      //   yAxis: {
      //     type: 'value',
      //     min: 0,
      //     max: this.myChart7max + 5,
      //     axisLabel: {
      //       color: 'white'
      //     },
      //     axisLine: {
      //       show: true,
      //       lineStyle: {
      //         color: '#fff'
      //       }
      //     },
      //     axisTick: {
      //       show: true,
      //       lineStyle: {
      //         color: '#fff'
      //       }
      //     },
      //     splitLine: {
      //       show: false
      //     }
      //   },
      //   series: [
      //     {
      //       name: '高压油道盲孔去毛刺压力',
      //       data: this.myChart7Y,
      //       type: 'line',
      //       color: '#83ffff',
      //       markLine: {
      //         data: [{ yAxis: this.myChart7min }, { yAxis: this.myChart7max }],
      //         lineStyle: {
      //           color: '#efb300'
      //         },
      //         label: {
      //           position: 'end',
      //           color: 'white',
      //           distance: -0
      //         }
      //       }
      //     }
      //   ]
      // })
    },
    searchChartData11Range() {
      var param4 = []
      var Data4 = this.CreateData('11', 'AA_高压油道通孔去毛刺压力_折线图Range_查询', param4)
      this.ExecDatabase(Data4).then(response => {
        if (response.data.length > 0) {
          this.myChart11min = response.data[0]['minValue']
          this.myChart11max = response.data[0]['maxValue']
        }
        this.searchChartData11()
      })
    },
    searchChartData11() {
      var param4 = []
      this.myChart11X = []
      this.myChart11Y = []
      var Data4 = this.CreateData('11', 'AA_高压油道通孔去毛刺压力_折线图_查询', param4)
      this.ExecDatabase(Data4).then(response => {
        if (response.data.length > 0) {
          for (let i = 0; i < response.data.length; i++) {
            // this.myChart11X.push(i + 1)
            this.myChart11X.push(response.data[i]['采集时间'])
            this.myChart11Y.push(response.data[i].Value)
          }
        }
        this.drawDashboard11()
      })
    },
    drawDashboard11() {
      // dashboard11.setOption({
      //   grid: [
      //     {
      //       left: '10%',
      //       top: '10%',
      //       right: '8%',
      //       bottom: '10%'
      //     }
      //   ],
      //   tooltip: {
      //     trigger: 'axis',
      //     axisPointer: {
      //       type: 'shadow'
      //     }
      //   },
      //   xAxis: {
      //     type: 'category',
      //     data: this.myChart11X,
      //     axisLine: {
      //       lineStyle: {
      //         color: 'white'
      //       }
      //     },
      //     axisLabel: {
      //       color: 'white'
      //     }
      //   },
      //   yAxis: {
      //     type: 'value',
      //     min: 0,
      //     max: this.myChart11max + 5,
      //     axisLabel: {
      //       color: 'white'
      //     },
      //     axisLine: {
      //       show: true,
      //       lineStyle: {
      //         color: '#fff'
      //       }
      //     },
      //     axisTick: {
      //       show: true,
      //       lineStyle: {
      //         color: '#fff'
      //       }
      //     },
      //     splitLine: {
      //       show: false
      //     }
      //   },
      //   series: [
      //     {
      //       name: '高压油道通孔去毛刺压力',
      //       data: this.myChart11Y,
      //       type: 'line',
      //       color: '#83ffff',
      //       markLine: {
      //         data: [{ yAxis: this.myChart11min }, { yAxis: this.myChart11max }],
      //         lineStyle: {
      //           color: '#efb300'
      //         },
      //         label: {
      //           position: 'end',
      //           color: 'white',
      //           distance: -0
      //         }
      //       }
      //     }
      //   ]
      // })
    },
    // searchChartData12Range() {
    //   var param4 = []
    //   var Data4 = this.CreateData('11', 'AA_大端面清洗压力_折线图Range_查询', param4)
    //   this.ExecDatabase(Data4).then(response => {
    //     if (response.data.length > 0) {
    //       this.myChart12min = response.data[0]['minValue']
    //       this.myChart12max = response.data[0]['maxValue']
    //     }
    //     this.searchChartData12()
    //   })
    // },
    // searchChartData12() {
    //   var param4 = []
    //   this.myChart12X = []
    //   this.myChart12Y = []
    //   var Data4 = this.CreateData('11', 'AA_大端面清洗压力_折线图_查询', param4)
    //   this.ExecDatabase(Data4).then(response => {
    //     if (response.data.length > 0) {
    //       for (let i = 0; i < response.data.length; i++) {
    //         // this.myChart12X.push(i + 1)
    //         this.myChart12X.push(response.data[i]['采集时间'])
    //         this.myChart12Y.push(response.data[i].Value)
    //       }
    //     }
    //     this.drawDashboard12()
    //   })
    // },
    // drawDashboard12() {
    //   dashboard12.setOption({
    //     grid: [
    //       {
    //         left: '10%',
    //         top: '10%',
    //         right: '8%',
    //         bottom: '10%'
    //       }
    //     ],
    //     tooltip: {
    //       trigger: 'axis',
    //       axisPointer: {
    //         type: 'shadow'
    //       }
    //     },
    //     xAxis: {
    //       type: 'category',
    //       data: this.myChart12X,
    //       axisLine: {
    //         lineStyle: {
    //           color: 'white'
    //         }
    //       },
    //       axisLabel: {
    //         color: 'white'
    //       }
    //     },
    //     yAxis: {
    //       type: 'value',
    //       min: 0,
    //       max: this.myChart12max + 5,
    //       axisLabel: {
    //         color: 'white'
    //       },
    //       axisLine: {
    //         show: true,
    //         lineStyle: {
    //           color: '#fff'
    //         }
    //       },
    //       axisTick: {
    //         show: true,
    //         lineStyle: {
    //           color: '#fff'
    //         }
    //       },
    //       splitLine: {
    //         show: false
    //       }
    //     },
    //     series: [
    //       {
    //         name: '大端面清洗压力',
    //         data: this.myChart12Y,
    //         type: 'line',
    //         color: '#83ffff',
    //         markLine: {
    //           data: [{ yAxis: this.myChart12min }, { yAxis: this.myChart12max }],
    //           lineStyle: {
    //             color: '#efb300'
    //           },
    //           label: {
    //             position: 'end',
    //             color: 'white',
    //             distance: -0
    //           }
    //         }
    //       }
    //     ]
    //   })
    // },
    // searchChartData8() {
    //   var param4 = []
    //   this.myChart8X = []
    //   this.myChart8Y = []
    //   var Data4 = this.CreateData('11', 'JPH_查询', param4)
    //   this.ExecDatabase(Data4).then(response => {
    //     if (response.data.length > 0) {
    //       for (let i = 0; i < response.data.length; i++) {
    //         this.myChart8X.push(response.data[i]['date'])
    //         this.myChart8Y.push(response.data[i]['num'])
    //       }
    //     }
    //     this.drawDashboard8()
    //   })
    // },
    // drawDashboard8() {
    //   dashboard8.setOption({
    //     grid: [
    //       {
    //         z: 0,
    //         left: '5%',
    //         top: '22%',
    //         right: '5%',
    //         bottom: '7%'
    //       }
    //     ],
    //     tooltip: {
    //       trigger: 'axis',
    //       axisPointer: {
    //         type: 'shadow'
    //       }
    //     },
    //     xAxis: {
    //       type: 'category',
    //       data: this.myChart8X,
    //       axisLine: {
    //         lineStyle: {
    //           color: 'white'
    //         }
    //       },
    //       axisLabel: {
    //         color: 'white'
    //       }
    //     },
    //     yAxis: {
    //       type: 'value',
    //       axisLabel: {
    //         color: 'white'
    //       }
    //     },
    //     series: [
    //       {
    //         name: '上线',
    //         data: this.myChart8Y,
    //         type: 'bar',
    //         itemStyle: {
    //           color: '#209de2'
    //         }
    //       }
    //     ]
    //   })
    // },
    drawDashboard9() {
      // dashboard9.setOption({
      //   series: [
      //     {
      //       min: 0,
      //       max: 100,
      //       startAngle: 200,
      //       endAngle: -20,
      //       center: ['50%', '60%'],
      //       type: 'gauge',
      //       axisLine: {
      //         lineStyle: {
      //           width: 5,
      //           color: [
      //             [this.gaugeDataRange[6], '#ffa94d'],
      //             [this.gaugeDataRange[7], '#69db7c'],
      //             [1, '#ffa94d']
      //           ]
      //         }
      //       },
      //       pointer: {
      //         itemStyle: {
      //           color: 'auto'
      //         }
      //       },
      //       radius: '120%',
      //       axisTick: {
      //         show: false
      //       },
      //       splitLine: {
      //         distance: 0,
      //         length: 3,
      //         lineStyle: {
      //           width: 1,
      //           color: 'white'
      //         }
      //       },
      //       axisLabel: {
      //         distance: 10,
      //         color: 'white',
      //         fontSize: 7
      //       },
      //       anchor: {
      //         show: true,
      //         showAbove: true,
      //         size: 5,
      //         itemStyle: {
      //           borderWidth: 3
      //         }
      //       },
      //       title: {
      //         show: false
      //       },
      //       detail: {
      //         valueAnimation: true,
      //         fontSize: 16,
      //         color: 'white',
      //         offsetCenter: [0, '50%']
      //       },
      //       data: [
      //         {
      //           value: this.gaugeData[3],
      //           detail: {
      //             formatter: function(value) {
      //               return value + ' ℃'
      //             }
      //           }
      //         }
      //       ]
      //     }
      //   ]
      // })
    },
    searchChartDataParams() {
      var param4 = []
      var Data4 = this.CreateData('11', 'AB文字展示信息查询_查询', param4)
      this.ExecDatabase(Data4).then(response => {
        if (response.data.length > 0) {
          this.otherParams[0] = response.data[0]['paramsValue1']
          this.otherParams[1] = response.data[0]['paramsValue2']
          this.otherParams[2] = response.data[0]['paramsValue3']
          this.otherParams[3] = response.data[0]['paramsValue4']
          this.otherParams[4] = response.data[0]['paramsValue5']
          this.otherParams[5] = response.data[0]['paramsValue6']
          this.otherParams[6] = response.data[0]['paramsValue7']
          this.otherParams[7] = response.data[0]['paramsValue8']
        }
      })
    },
    searchChartDataParams1() {
      var param4 = []
      var Data4 = this.CreateData('11', '定量_查询', param4)
      this.ExecDatabase(Data4).then(response => {
        if (response.data.length > 0) {
          this.planData[0] = response.data[0]['paramsValue1']
          this.planData[1] = response.data[0]['paramsValue2']
          this.planData[2] = response.data[0]['paramsValue3']
          this.planData[3] = response.data[0]['paramsValue4']
          this.planData[4] = response.data[0]['paramsValue5']
          this.planData[5] = response.data[0]['paramsValue6']
          this.planData[6] = response.data[0]['paramsValue7']
          this.planData[7] = response.data[0]['paramsValue8']
        }
      })
    },

    changeCameraState(state) {
      if (this.isShow1 === state) return
      this.isShow = state ? 'inline' : 'none'
      this.isShow1 = state
    },
    restView() {
      window.editor.cameraControls.resetState(window.editor.cameraState.target, window.editor.cameraState.position, window.editor.cameraState.zoom0)
    },
    // // 编辑生产计划
    // showPlanPage() {
    //   this.dialogFormVisible1 = true
    //   this.form.planData = this.planData[5]
    // },
    // // 确认编辑生产计划
    // submitAdd1() {
    //   var param = []
    //   param[0] = ['月计划产量', this.form.planData]
    //   var Data = this.CreateData('12', '定量_修改', param)
    //   this.ExecDatabase(Data).then(response => {
    //     console.log(response.data)
    //     if (response.data[0].result === '1') {
    //       this.$message.success('编辑成功')
    //       this.searchChartDataParams1()
    //       this.dialogFormVisible1 = false
    //     } else {
    //       this.$message.error('编辑失败')
    //     }
    //   })
    // },
    callOff1() {
      this.dialogFormVisible1 = false
    },
    getLogo() {
      axios.get('../../logo.png', {
        responseType: 'arraybuffer'
      }).then(res => {
        this.titlePng = 'data:image/jpeg;base64,' + btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))
      })
      axios.get('../../MESlogo.png', {
        responseType: 'arraybuffer'
      }).then(res => {
        this.titlePng1 = 'data:image/jpeg;base64,' + btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))
      })
      axios.get('../../logo1.png', {
        responseType: 'arraybuffer'
      }).then(res => {
        this.titlePng2 = 'data:image/jpeg;base64,' + btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))
      })
    }
  }
}
</script>
<style>
HTML{
  overflow: auto;
}
body{
  margin:0;
  padding:0;
  width: 1920px;
  height: 1080px;
  overflow: hidden;
  position: relative;
  font-family: MiSans Bold, serif;
}
/*css主要部分的样式*/
/*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
  width: 5px; /*对垂直流动条有效*/
  height: 5px; /*对水平流动条有效*/
}

/*定义滚动条的轨道颜色、内阴影及圆角*/
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
  background-color: #0E3261FF;
  /*background-color: #ffffff;*/
  border-radius: 2px;
}

/*定义滑块颜色、内阴影及圆角*/
::-webkit-scrollbar-thumb {
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
  background-color: rgb(10, 35, 82);
}

/*定义两端按钮的样式*/
::-webkit-scrollbar-button {
  display: none;
}

/*定义右下角汇合处的样式*/
::-webkit-scrollbar-corner {
  background: #dedede;
}
</style>
<style scoped="scoped">
.device_va_name{
  font-size: 16px;
  padding: 5px 0;
}
.device_va_value{
  font-size: 25px;
  padding: 8px 10px;
  color: #ffb700;
}
.allShow {
  overflow-y: hidden;
  z-index: 100;
  transform-origin: 0 0;
  position: fixed;
  left: 50%;
  top: 50%;
  transition: 0.3s;
  background-color: rgb(8, 31, 72);
  color: white;
}
.warningLight{
  width: 20px;
  height: 20px;
  border-radius: 15px;
  background: #ffc800;
  text-align: center;
  margin-top: 4px;
  margin-left: 10px
}
.warningLight1{
  width: 20px;
  height: 20px;
  border-radius: 15px;
  background:green;
  text-align: center;
  margin-top: 4px;
  margin-left: 10px
}
.warningLight2{
  width: 20px;
  height: 20px;
  border-radius: 15px;
  background: #808080;
  text-align: center;
  margin-top: 4px;
  margin-left: 10px
}
.warningLight3{
  width: 20px;
  height: 20px;
  border-radius: 15px;
  background:red;
  text-align: center;
  margin-top: 4px;
  margin-left: 10px
}
.warningLight4{
  width: 20px;
  height: 20px;
  border-radius: 15px;
  background: #b6b6b6;
  text-align: center;
  margin-top: 4px;
  margin-left: 10px
}
.planParams {
  text-align: center;
  width: 75px;
  height: 45px;
  font-size: 18px;
}
.other-params-label {
  padding: 10px 0;
}
.other-params-value {
  color: #ffcb6f;
  font-size: 22px;
  text-align: center
}
.background{
  width:1920px;
  height: 1080px;
  background-color: rgb(8, 31, 72);
  color: white;
  background-size: 100%;
}
.data-box {
  position: absolute;
  width: 300px;
  height: 350px;
  -webkit-box-shadow: rgb(24, 78, 135) 0 0 10px;
  -moz-box-shadow: rgb(24, 78, 135) 0 0 10px;
  box-shadow: inset 0 0 30px rgb(24, 78, 135);
}
.data-box1 {
  position: absolute;
  bottom:10px;
  width:1910px;
  height: 50px;
}
.boxBorder{
  position:absolute;
  padding:10px;
  border-style: solid;
  border-color: rgb(71, 209, 226);
}
.borderLeft1{border-width: 2px 0 0 2px;top:-2px;left:-2px;}
.borderLeft2{border-width: 2px 2px 0 0;top:-2px;right:-2px;}
.borderRight1{border-width: 0 0 2px 2px;bottom:-2px;left:-2px;}
.borderRight2{border-width: 0 2px 2px 0;bottom:-2px;right:-2px;}
.indicatorBlock {
  float: left;
  margin: 5px 0 0 20px;
  width: 15px;
  height: 20px;
  background-color: #016eea
}
.indicatorText {
  margin: 3px 0 0 15px;
  float: left;
  font-size: 18px
}
/deep/ .el-divider--vertical{
  height: 200px;
}
/deep/ .el-progress-bar__innerText{
  font-size: 22px;
  margin-bottom: 6px;
}
/*表格透明写法*/
/deep/ .el-table,.el-table__expanded-cell {
  background-color: transparent;
}
/deep/ .el-table th {
  background-color: transparent !important;
  color: #fefefe;
}
/deep/ .el-table tr {
  background-color: transparent !important;
}
/deep/ .el-table--enable-row-transition .el-table__body td,
/deep/.el-table .cell {
  background-color: transparent;
  color: white;
  border: none;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/deep/.el-table th>.cell {
  color:rgba(254,254,254,1);
  font-weight: 700;
}
/deep/ .el-table td, .el-table th{
  padding: 8px 0;
}
.el-table__body-wrapper::-webkit-scrollbar {
  /*width: 0;宽度为0隐藏*/
  width: 0;
}
.el-table::before {
  /*left: 0;*/
  /*bottom: 0;*/
  width: 100%;
  height: 0;
}
/* 表格前的圆点 */

/*/deep/.el-table td:nth-child(1):before {*/
/*    content: "";*/
/*    display: block;*/
/*    position: absolute;*/
/*    width: 7px;*/
/*    height: 7px;*/
/*    background: #5078fc;*/
/*    top: 20px;*/
/*    border-radius: 100%;*/
/*}*/
/*/deep/.el-table tr:nth-child(1) td:nth-child(1):before {*/
/*    content: "";*/
/*    display: block;*/
/*    position: absolute;*/
/*    width: 7px;*/
/*    height: 7px;*/
/*    background: #fe3548;*/
/*    top: 20px;*/
/*    border-radius: 100%;*/
/*}*/
/*/deep/.el-table tr:nth-child(2) td:nth-child(1):before {*/
/*    content: "";*/
/*    display: block;*/
/*    position: absolute;*/
/*    width: 7px;*/
/*    height: 7px;*/
/*    background: #ffb343;*/
/*    top: 20px;*/
/*    border-radius: 100%;*/
/*}*/
/*/deep/.el-table tr:nth-child(3) td:nth-child(1):before {*/
/*    content: "";*/
/*    display: block;*/
/*    position: absolute;*/
/*    width: 7px;*/
/*    height: 7px;*/
/*    background: #03a9f4;*/
/*    top: 20px;*/
/*    border-radius: 100%;*/
/*}*/
table {
  border-right: 1px solid #d7d7d7;
  border-bottom: 1px solid #d7d7d7;
  text-align: center;
}

table th {
  border-left: 1px solid #d7d7d7;
  border-top: 1px solid #d7d7d7;
}

table td {
  border-left: 1px solid #d7d7d7;
  border-top: 1px solid #d7d7d7;
}
.max-box{
  margin: 2px 0;
  width: 99.5%;
  display: flex;
  align-items: center;
  background: url("~@/../public/标题框.png") no-repeat !important;
  background-size: 100% 100% !important;
}
/* 标题部分 */
#title {
  flex: 1;
  font-family: "Microsoft YaHei";
  font-size: 14px;
  width: 95%;
  height: 25px;
  line-height: 25px;
  margin: 0;
  padding-left: 15px;
}
.main {
  flex: 3;
  text-align: center;
}
</style>
