<template>
  <div class="background">
    <!--顶部-->
    <el-row style="box-shadow: inset 0 0 30px rgb(24, 78, 135);" >
      <div style="height: 80px; width: 100vw;">
        <el-col :span="5" style="font-size: 1.5rem;margin-top: 5px;margin-left: 15px">
            <!--左上角logo-->
            <img style="height: 70px;cursor: pointer" :src="titlePng"/>
        </el-col>
        <el-row :span="19" style="font-size: 1.8rem;color: white;text-align: center;margin-top: 5px">
          <span style="letter-spacing: 5px;font-weight: bolder">智能制造产线</span>
          <br>
          <span style="letter-spacing: 5px;font-weight: bolder">数字孪生系统</span>
        </el-row>
      </div>
    </el-row>
    <el-row>
      <el-button size="mini" style="background: #4871ab;color: white;border: 1px solid #103666;width: 120px" @click="showMachineInfo(1)">五轴加工中心</el-button>
      <el-button size="mini" style="background: #4871ab;color: white;border: 1px solid #103666;width: 120px" @click="showMachineInfo(2)">三轴加工中心</el-button>
      <el-button size="mini" style="background: #4871ab;color: white;border: 1px solid #103666;width: 120px" @click="showMachineInfo(3)">电火花设备</el-button>
      <br>
      <el-button size="mini" style="background: #4871ab;color: white;border: 1px solid #103666;width: 120px;" @click="showMachineInfo(4)">机器人设备</el-button>
      <el-button size="mini" style="background: #4871ab;color: white;border: 1px solid #103666;width: 120px;" @click="showMachineInfo(5)">三坐标测量设备</el-button>
      <el-button size="mini" style="background: #f56c6c;color: white;border: 1px solid #103666;" @click="showRemoteControl">远程控制</el-button>
      <!--WEBGL渲染位置-->
      <div style="height: 100%; width: 100%;">
        <div style="width: 100%;height:80vh;filter:blur(10);z-index: 999;">
          <d-m-t ref="dmtCom" v-on:changeCameraState="changeCameraState" :containerHeight="getContainerHeight()" containerWidth="1160px" style="" />
        </div>
      </div>
      <!--MILL E 700 U-->
      <div v-show="showInfo1" class="data-box data-box-hei" style="">
        <div style="width: 100%; height: 45px;">
          <div class="indicatorBlock"/>
          <div class="indicatorText">
            五轴加工中心
          </div>
        </div>
        <!--设备状态-->
        <div class="max-box">
          <div id="title">设备状态</div>
          <div class="main" style="margin-left: 20px;position: relative;top: -27px;height: 20px;overflow: hidden">
            <div style="margin-right: 20%;text-align: right;font-size: 1.2rem;overflow: hidden;">
              <div style="white-space: nowrap;">{{deviceList[0].Status}}</div>
            </div>
          </div>
        </div>
        <!-- 当前程序-->
        <div class="max-box" style="top: 90px">
          <div id="title">当前程序</div>
          <div class="main" style="margin-left: 20px;position: relative;top: -27px;height: 20px;overflow: hidden">
            <div style="margin-right: 20%;text-align: right;font-size: 1.2rem;overflow: hidden;">
              <div style="white-space: nowrap">{{deviceList[0].Program}}</div>
            </div>
          </div>
        </div>
        <!-- 当前订单-->
        <!--        <div class="max-box" style="top: 135px">-->
        <!--          <div id="title">当前订单</div>-->
        <!--          <div class="main" style="margin-left: 20px;position: relative;top: -27px;height: 20px;overflow: hidden">-->
        <!--            <div style="margin-right: 20%;text-align: right;font-size: 1.2rem;overflow: hidden;">-->
        <!--              <div style="white-space: nowrap">{{deviceList[0].order}}</div>-->
        <!--            </div>-->
        <!--          </div>-->
        <!--        </div>-->
        <!-- 刀具名称-->
        <!--        <div class="max-box" style="top: 90px">-->
        <!--          <div id="title">当前刀具</div>-->
        <!--          <div class="main" style="margin-left: 20px;position: relative;top: -27px;height: 20px;overflow: hidden">-->
        <!--            <div style="margin-right: 20%;text-align: right;font-size: 1.2rem;overflow: hidden;">-->
        <!--              <div style="white-space: nowrap">{{deviceList[0].Tool.Name}}</div>-->
        <!--            </div>-->
        <!--          </div>-->
        <!--        </div>-->
        <!-- 刀具使用时间-->
        <!--        <div class="max-box" style="top: 135px">-->
        <!--          <div id="title">使用时间</div>-->
        <!--          <div class="main" style="margin-left: 20px;position: relative;top: -27px;height: 20px;overflow: hidden">-->
        <!--            <div style="margin-right: 20%;text-align: right;font-size: 1.2rem;overflow: hidden;">-->
        <!--              <div style="white-space: nowrap">{{deviceList[0].Tool.TimeUsed}}</div>-->
        <!--            </div>-->
        <!--          </div>-->
        <!--        </div>-->
        <!--  设备参数 -->
        <div class="max-box" style="">
          <div id="title">设备参数</div>
        </div>
        <div class="main" style="margin-left: 20px;height: 150px">
          <table>
            <tr>
              <td style="font-size: 24px;width: 80px;">名称</td>
              <td style="font-size: 24px;width: 230px;">值</td>
            </tr>
            <tr style="font-size: 20px">
              <td >Feed</td>
              <td style="text-align: left;padding-left: 20px">{{deviceList[0].Feed}}</td>
            </tr>
            <tr style="font-size: 20px">
              <td >Speed</td>
              <td style="text-align: left;padding-left: 20px">{{deviceList[0].Speed}}</td>
            </tr>
            <tr style="font-size: 20px">
              <td >Rapid</td>
              <td style="text-align: left;padding-left: 20px">{{deviceList[0].Rapid}}</td>
            </tr>
          </table>
        </div>
        <!-- 报警信息-->
        <div class="max-box" style="">
          <div id="title">报警信息</div>
        </div>
        <div class="main" style="margin-left: 20px;">
          <div style="display: flex">
            <div
                style="font-weight: bolder;padding: 8px 0;text-align: center;border: 1px solid #b7b7b7;width: 60px">
              序号
            </div>
            <div
                style="font-weight: bolder;padding: 8px 0;text-align: center;border: 1px solid #b7b7b7;width: 260px">
              报警内容
            </div>
            <!--<div-->
            <!--    style="font-weight: bolder;padding: 8px 0;text-align: center;border: 1px solid #b7b7b7;width: 130px">-->
            <!--  报警时间-->
            <!--</div>-->
          </div>
          <vue-seamless-scroll
              ref="seamlessScroll"
              :class-option="alarmClassOption"
              :data="deviceList[0].Alarm"
              style="height: 100px;overflow: hidden;font-size: 1.1rem;border: 1px solid;border-top: 0px solid;width: 325px;margin: 0 -1px;">
            <div v-for="(item, index) in deviceList[0].Alarm" :key="index" style="display: flex">
              <div
                  style="width: 60px;padding: 8px 0;text-align: center;border: 1px solid #b7b7b7"
                  v-text="index +1"></div>
              <div
                  style="width: 260px;padding: 8px 0;text-align: center;border: 1px solid #b7b7b7;word-wrap: break-word;"
                  v-text="item.Alarm"></div>
              <!--<div-->
              <!--    style="width: 130px;padding: 8px 0;text-align: center;border: 1px solid #b7b7b7;word-wrap: break-word;"-->
              <!--    v-text="item.AlarmTime"></div>-->
            </div>
            <div v-if="deviceList[0].Alarm.length === 0" style="font-size: 24px;text-align: center;margin-top: 30px">无报警信息</div>
          </vue-seamless-scroll>
        </div>
        <!-- 轴名 -->
        <div class="max-box" style="">
          <div id="title">轴位置</div>
        </div>
        <div class="main" style="margin-left: 20px;height: 200px">
          <table>
            <tr>
              <td style="font-size: 24px;width: 80px;">轴名</td>
              <td style="font-size: 24px;width: 230px;">坐标位置</td>
            </tr>
            <tr v-for="(item, index) in deviceList[0].Axis" :key="index" style="font-size: 20px">
              <td >{{item.AxisName}}</td>
              <td style="text-align: left;padding-left: 20px">{{item.AxisValue}}</td>
            </tr>
          </table>
        </div>
        <!-- 设备其他参数-->
        <!--        <div class="max-box" style="bottom: 25px">-->
        <!--          <div id="title" >设备其他参数</div>-->
        <!--        </div>-->
        <!--        <div class="main" style="margin-left: 20px;">-->
        <!--          <div style="display: flex">-->
        <!--            <div-->
        <!--                style="font-weight: bolder;padding: 8px 0;text-align: center;border: 1px solid #b7b7b7;width: 60px">-->
        <!--              序号-->
        <!--            </div>-->
        <!--            <div-->
        <!--                style="font-weight: bolder;padding: 8px 0;text-align: center;border: 1px solid #b7b7b7;width: 130px">-->
        <!--              参数名称-->
        <!--            </div>-->
        <!--            <div-->
        <!--                style="font-weight: bolder;padding: 8px 0;text-align: center;border: 1px solid #b7b7b7;width: 130px">-->
        <!--              参数值-->
        <!--            </div>-->
        <!--          </div>-->
        <!--          <vue-seamless-scroll-->
        <!--              ref="seamlessScroll"-->
        <!--              :class-option="classOption"-->
        <!--              :data="deviceList[0].OtherParameter"-->
        <!--              style="height: 245px;overflow: hidden;font-size: 1.1rem;border: 1px solid;border-top: 0px solid;width: 325px;margin: 0 -1px;">-->
        <!--            <div v-for="(item, index) in deviceList[0].OtherParameter" :key="index" style="display: flex">-->
        <!--              <div-->
        <!--                  style="width: 60px;padding: 8px 0;text-align: center;border: 1px solid #b7b7b7"-->
        <!--                  v-text="index +1"></div>-->
        <!--              <div-->
        <!--                  style="width: 130px;padding: 8px 0;text-align: center;border: 1px solid #b7b7b7;word-wrap: break-word;"-->
        <!--                  v-text="item.ParameterName"></div>-->
        <!--              <div-->
        <!--                  style="width: 130px;padding: 8px 0;text-align: center;border: 1px solid #b7b7b7;word-wrap: break-word;"-->
        <!--                  v-text="item.ParameterValue"></div>-->
        <!--            </div>-->
        <!--          </vue-seamless-scroll>-->
        <!--        </div>-->
      </div>
      <!--HSM 500-->
      <div v-show="showInfo2" class="data-box data-box-hei" style="">
        <div style="width: 100%; height: 45px;">
          <div class="indicatorBlock"/>
          <div class="indicatorText">
            三轴加工中心
          </div>
        </div>
        <!--设备状态-->
        <div class="max-box">
          <div id="title">设备状态</div>
          <div class="main" style="margin-left: 20px;position: relative;top: -27px;height: 20px;overflow: hidden">
            <div style="margin-right: 20%;text-align: right;font-size: 1.2rem;overflow: hidden;">
              <div style="white-space: nowrap;">{{deviceList[1].Status}}</div>
            </div>
          </div>
        </div>
        <!-- 当前程序-->
        <div class="max-box" style="top: 90px">
          <div id="title">当前程序</div>
          <div class="main" style="margin-left: 20px;position: relative;top: -27px;height: 20px;overflow: hidden">
            <div style="margin-right: 20%;text-align: right;font-size: 1.2rem;overflow: hidden;">
              <div style="white-space: nowrap">{{deviceList[1].Program}}</div>
            </div>
          </div>
        </div>
        <!-- 当前订单-->
        <!--        <div class="max-box" style="top: 135px">-->
        <!--          <div id="title">当前订单</div>-->
        <!--          <div class="main" style="margin-left: 20px;position: relative;top: -27px;height: 20px;overflow: hidden">-->
        <!--            <div style="margin-right: 20%;text-align: right;font-size: 1.2rem;overflow: hidden;">-->
        <!--              <div style="white-space: nowrap">{{deviceList[1].order}}</div>-->
        <!--            </div>-->
        <!--          </div>-->
        <!--        </div>-->
        <!-- 刀具名称-->
        <!--        <div class="max-box" style="top: 90px">-->
        <!--          <div id="title">当前刀具</div>-->
        <!--          <div class="main" style="margin-left: 20px;position: relative;top: -27px;height: 20px;overflow: hidden">-->
        <!--            <div style="margin-right: 20%;text-align: right;font-size: 1.2rem;overflow: hidden;">-->
        <!--              <div style="white-space: nowrap">{{deviceList[1].Tool.Name}}</div>-->
        <!--            </div>-->
        <!--          </div>-->
        <!--        </div>-->
        <!-- 刀具使用时间-->
        <!--        <div class="max-box" style="top: 135px">-->
        <!--          <div id="title">使用时间</div>-->
        <!--          <div class="main" style="margin-left: 20px;position: relative;top: -27px;height: 20px;overflow: hidden">-->
        <!--            <div style="margin-right: 20%;text-align: right;font-size: 1.2rem;overflow: hidden;">-->
        <!--              <div style="white-space: nowrap">{{deviceList[1].Tool.TimeUsed}}</div>-->
        <!--            </div>-->
        <!--          </div>-->
        <!--        </div>-->
        <!--  设备参数 -->
        <div class="max-box" style="">
          <div id="title">设备参数</div>
        </div>
        <div class="main" style="margin-left: 20px;height: 150px">
          <table>
            <tr>
              <td style="font-size: 24px;width: 80px;">名称</td>
              <td style="font-size: 24px;width: 230px;">值</td>
            </tr>
            <tr style="font-size: 20px">
              <td >Feed</td>
              <td style="text-align: left;padding-left: 20px">{{deviceList[1].Feed}}</td>
            </tr>
            <tr style="font-size: 20px">
              <td >Speed</td>
              <td style="text-align: left;padding-left: 20px">{{deviceList[1].Speed}}</td>
            </tr>
            <tr style="font-size: 20px">
              <td >Rapid</td>
              <td style="text-align: left;padding-left: 20px">{{deviceList[1].Rapid}}</td>
            </tr>
          </table>
        </div>
        <!-- 报警信息-->
        <div class="max-box" style="">
          <div id="title">报警信息</div>
        </div>
        <div class="main" style="margin-left: 20px;">
          <div style="display: flex">
            <div
                style="font-weight: bolder;padding: 8px 0;text-align: center;border: 1px solid #b7b7b7;width: 60px">
              序号
            </div>
            <div
                style="font-weight: bolder;padding: 8px 0;text-align: center;border: 1px solid #b7b7b7;width: 260px">
              报警内容
            </div>
            <!--<div-->
            <!--    style="font-weight: bolder;padding: 8px 0;text-align: center;border: 1px solid #b7b7b7;width: 130px">-->
            <!--  报警时间-->
            <!--</div>-->
          </div>
          <vue-seamless-scroll
              ref="seamlessScroll"
              :class-option="alarmClassOption"
              :data="deviceList[1].Alarm"
              style="height: 100px;overflow: hidden;font-size: 1.1rem;border: 1px solid;border-top: 0px solid;width: 325px;margin: 0 -1px;">
            <div v-for="(item, index) in deviceList[1].Alarm" :key="index" style="display: flex">
              <div
                  style="width: 60px;padding: 8px 0;text-align: center;border: 1px solid #b7b7b7"
                  v-text="index +1"></div>
              <div
                  style="width: 260px;padding: 8px 0;text-align: center;border: 1px solid #b7b7b7;word-wrap: break-word;"
                  v-text="item.Alarm"></div>
              <!--<div-->
              <!--    style="width: 130px;padding: 8px 0;text-align: center;border: 1px solid #b7b7b7;word-wrap: break-word;"-->
              <!--    v-text="item.AlarmTime"></div>-->
            </div>
            <div v-if="deviceList[1].Alarm.length === 0" style="font-size: 24px;text-align: center;margin-top: 30px">无报警信息</div>
          </vue-seamless-scroll>
        </div>
        <!-- 轴名 -->
        <div class="max-box" style="">
          <div id="title">轴位置</div>
        </div>
        <div class="main" style="margin-left: 20px;height: 200px">
          <table>
            <tr>
              <td style="font-size: 24px;width: 80px;">轴名</td>
              <td style="font-size: 24px;width: 230px;">坐标位置</td>
            </tr>
            <tr v-for="(item, index) in deviceList[1].Axis" :key="index" style="font-size: 20px">
              <td >{{item.AxisName}}</td>
              <td style="text-align: left;padding-left: 20px">{{item.AxisValue}}</td>
            </tr>
          </table>
        </div>
        <!-- 设备其他参数-->
        <!--        <div class="max-box" style="bottom: 25px">-->
        <!--          <div id="title" >设备其他参数</div>-->
        <!--        </div>-->
        <!--        <div class="main" style="margin-left: 20px;">-->
        <!--          <div style="display: flex">-->
        <!--            <div-->
        <!--                style="font-weight: bolder;padding: 8px 0;text-align: center;border: 1px solid #b7b7b7;width: 60px">-->
        <!--              序号-->
        <!--            </div>-->
        <!--            <div-->
        <!--                style="font-weight: bolder;padding: 8px 0;text-align: center;border: 1px solid #b7b7b7;width: 130px">-->
        <!--              参数名称-->
        <!--            </div>-->
        <!--            <div-->
        <!--                style="font-weight: bolder;padding: 8px 0;text-align: center;border: 1px solid #b7b7b7;width: 130px">-->
        <!--              参数值-->
        <!--            </div>-->
        <!--          </div>-->
        <!--          <vue-seamless-scroll-->
        <!--              ref="seamlessScroll"-->
        <!--              :class-option="classOption"-->
        <!--              :data="deviceList[1].OtherParameter"-->
        <!--              style="height: 245px;overflow: hidden;font-size: 1.1rem;border: 1px solid;border-top: 0px solid;width: 325px;margin: 0 -1px;">-->
        <!--            <div v-for="(item, index) in deviceList[1].OtherParameter" :key="index" style="display: flex">-->
        <!--              <div-->
        <!--                  style="width: 60px;padding: 8px 0;text-align: center;border: 1px solid #b7b7b7"-->
        <!--                  v-text="index +1"></div>-->
        <!--              <div-->
        <!--                  style="width: 130px;padding: 8px 0;text-align: center;border: 1px solid #b7b7b7;word-wrap: break-word;"-->
        <!--                  v-text="item.ParameterName"></div>-->
        <!--              <div-->
        <!--                  style="width: 130px;padding: 8px 0;text-align: center;border: 1px solid #b7b7b7;word-wrap: break-word;"-->
        <!--                  v-text="item.ParameterValue"></div>-->
        <!--            </div>-->
        <!--          </vue-seamless-scroll>-->
        <!--        </div>-->
      </div>
      <!-- FORM P 450-->
      <div v-show="showInfo3" class="data-box data-box-hei" style="">
        <div style="width: 100%; height: 45px;">
          <div class="indicatorBlock"/>
          <div class="indicatorText">
            电火花设备
          </div>
        </div>
        <!--设备状态-->
        <div class="max-box">
          <div id="title">设备状态</div>
          <div class="main" style="margin-left: 20px;position: relative;top: -27px;height: 20px;overflow: hidden">
            <div style="margin-right: 20%;text-align: right;font-size: 1.2rem;overflow: hidden;">
              <div style="white-space: nowrap;">{{deviceList[2].Status}}</div>
            </div>
          </div>
        </div>
        <!-- 当前程序-->
        <div class="max-box" style="top: 90px">
          <div id="title">当前程序</div>
          <div class="main" style="margin-left: 20px;position: relative;top: -27px;height: 20px;overflow: hidden">
            <div style="margin-right: 20%;text-align: right;font-size: 1.2rem;overflow: hidden;">
              <div style="white-space: nowrap">{{deviceList[2].Program}}</div>
            </div>
          </div>
        </div>
        <!-- 当前订单-->
        <!--        <div class="max-box" style="top: 135px">-->
        <!--          <div id="title">当前订单</div>-->
        <!--          <div class="main" style="margin-left: 20px;position: relative;top: -27px;height: 20px;overflow: hidden">-->
        <!--            <div style="margin-right: 20%;text-align: right;font-size: 1.2rem;overflow: hidden;">-->
        <!--              <div style="white-space: nowrap">{{deviceList[2].order}}</div>-->
        <!--            </div>-->
        <!--          </div>-->
        <!--        </div>-->
        <!-- 报警信息-->
        <div class="max-box" style="">
          <div id="title">报警信息</div>
        </div>
        <div class="main" style="margin-left: 20px;">
          <div style="display: flex">
            <div
                style="font-weight: bolder;padding: 8px 0;text-align: center;border: 1px solid #b7b7b7;width: 60px">
              序号
            </div>
            <div
                style="font-weight: bolder;padding: 8px 0;text-align: center;border: 1px solid #b7b7b7;width: 260px">
              报警内容
            </div>
            <!--<div-->
            <!--    style="font-weight: bolder;padding: 8px 0;text-align: center;border: 1px solid #b7b7b7;width: 130px">-->
            <!--  报警时间-->
            <!--</div>-->
          </div>
          <vue-seamless-scroll
              ref="seamlessScroll"
              :class-option="alarmClassOption"
              :data="deviceList[2].Alarm"
              style="height: 100px;overflow: hidden;font-size: 1.1rem;border: 1px solid;border-top: 0px solid;width: 325px;margin: 0 -1px;">
            <div v-for="(item, index) in deviceList[2].Alarm" :key="index" style="display: flex">
              <div
                  style="width: 60px;padding: 8px 0;text-align: center;border: 1px solid #b7b7b7"
                  v-text="index +1"></div>
              <div
                  style="width: 260px;padding: 8px 0;text-align: center;border: 1px solid #b7b7b7;word-wrap: break-word;"
                  v-text="item.Alarm"></div>
              <!--<div-->
              <!--    style="width: 130px;padding: 8px 0;text-align: center;border: 1px solid #b7b7b7;word-wrap: break-word;"-->
              <!--    v-text="item.AlarmTime"></div>-->
            </div>
            <div v-if="deviceList[2].Alarm.length === 0" style="font-size: 24px;text-align: center;margin-top: 30px">无报警信息</div>
          </vue-seamless-scroll>
        </div>
        <!-- 轴名 -->
        <div class="max-box" style="">
          <div id="title">轴位置</div>
        </div>
        <div class="main" style="margin-left: 20px;height: 200px">
          <table>
            <tr>
              <td style="font-size: 24px;width: 80px;">轴名</td>
              <td style="font-size: 24px;width: 230px;">坐标位置</td>
            </tr>
            <tr v-for="(item, index) in deviceList[2].Axis" :key="index" style="font-size: 20px">
              <td >{{item.AxisName}}</td>
              <td style="text-align: left;padding-left: 20px">{{item.AxisValue}}</td>
            </tr>
          </table>
        </div>
        <!-- 设备其他参数-->
        <div class="max-box" style="bottom: 25px">
          <div id="title" >设备其他参数</div>
        </div>
        <div class="main" style="margin-left: 20px;height: 300px">
          <div style="display: flex">
            <div
                style="font-weight: bolder;padding: 8px 0;text-align: center;border: 1px solid #b7b7b7;width: 60px">
              序号
            </div>
            <div
                style="font-weight: bolder;padding: 8px 0;text-align: center;border: 1px solid #b7b7b7;width: 130px">
              参数名称
            </div>
            <div
                style="font-weight: bolder;padding: 8px 0;text-align: center;border: 1px solid #b7b7b7;width: 130px">
              参数值
            </div>
          </div>
          <vue-seamless-scroll
              ref="seamlessScroll"
              :class-option="classOption"
              :data="deviceList[2].OtherParameter"
              style="height: 245px;overflow: hidden;font-size: 1.1rem;border: 1px solid;border-top: 0px solid;width: 325px;margin: 0 -1px;">
            <div v-for="(item, index) in deviceList[2].OtherParameter" :key="index" style="display: flex">
              <div
                  style="width: 60px;padding: 8px 0;text-align: center;border: 1px solid #b7b7b7"
                  v-text="index +1"></div>
              <div
                  style="width: 130px;padding: 8px 0;text-align: center;border: 1px solid #b7b7b7;word-wrap: break-word;"
                  v-text="item.ParameterName"></div>
              <div
                  style="width: 130px;padding: 8px 0;text-align: center;border: 1px solid #b7b7b7;word-wrap: break-word;"
                  v-text="item.ParameterValue"></div>
            </div>
          </vue-seamless-scroll>
        </div>
      </div>
      <!--ROBOT-->
      <div v-show="showInfo4" class="data-box data-box-hei" style="height: 350px">
        <div style="width: 100%; height: 45px;">
          <div class="indicatorBlock"/>
          <div class="indicatorText">
            机器人设备
          </div>
        </div>
        <!-- 轴名 -->
        <div class="max-box" style="">
          <div id="title">轴位置</div>
        </div>
        <div class="main" style="margin-left: 20px;height: 200px">
          <table>
            <tr>
              <td style="font-size: 24px;width: 80px;">轴名</td>
              <td style="font-size: 24px;width: 230px;">坐标位置</td>
            </tr>
            <tr v-for="(item, index) in deviceList[3].Axis" :key="index" style="font-size: 20px">
              <td >{{item.AxisName}}</td>
              <td style="text-align: left;padding-left: 20px">{{item.AxisValue}}</td>
            </tr>
          </table>
        </div>
      </div>
      <!--CMM-->
      <div v-show="showInfo5" class="data-box data-box-hei" style="height: 450px">
        <div style="width: 100%; height: 45px;">
          <div class="indicatorBlock"/>
          <div class="indicatorText">
            三坐标测量设备
          </div>
        </div>
        <!--设备状态-->
        <div class="max-box">
          <div id="title">设备状态</div>
          <div class="main" style="margin-left: 20px;position: relative;top: -27px;height: 20px;overflow: hidden">
            <div style="margin-right: 20%;text-align: right;font-size: 1.2rem;overflow: hidden;">
              <div style="white-space: nowrap;">{{deviceList[4].Status}}</div>
            </div>
          </div>
        </div>
        <!-- 报警信息-->
        <div class="max-box" style="">
          <div id="title">报警信息</div>
        </div>
        <div class="main" style="margin-left: 20px;">
          <div style="display: flex">
            <div
                style="font-weight: bolder;padding: 8px 0;text-align: center;border: 1px solid #b7b7b7;width: 60px">
              序号
            </div>
            <div
                style="font-weight: bolder;padding: 8px 0;text-align: center;border: 1px solid #b7b7b7;width: 260px">
              报警内容
            </div>
            <!--<div-->
            <!--    style="font-weight: bolder;padding: 8px 0;text-align: center;border: 1px solid #b7b7b7;width: 130px">-->
            <!--  报警时间-->
            <!--</div>-->
          </div>
          <vue-seamless-scroll
              ref="seamlessScroll"
              :class-option="alarmClassOption"
              :data="deviceList[4].Alarm"
              style="height: 100px;overflow: hidden;font-size: 1.1rem;border: 1px solid;border-top: 0px solid;width: 325px;margin: 0 -1px;">
            <div v-for="(item, index) in deviceList[4].Alarm" :key="index" style="display: flex">
              <div
                  style="width: 60px;padding: 8px 0;text-align: center;border: 1px solid #b7b7b7"
                  v-text="index +1"></div>
              <div
                  style="width: 260px;padding: 8px 0;text-align: center;border: 1px solid #b7b7b7;word-wrap: break-word;"
                  v-text="item.Alarm"></div>
              <!--<div-->
              <!--    style="width: 130px;padding: 8px 0;text-align: center;border: 1px solid #b7b7b7;word-wrap: break-word;"-->
              <!--    v-text="item.AlarmTime"></div>-->
            </div>
            <div v-if="deviceList[4].Alarm.length === 0" style="font-size: 24px;text-align: center;margin-top: 30px">无报警信息</div>
          </vue-seamless-scroll>
        </div>
        <!-- 轴名 -->
        <div class="max-box" style="">
          <div id="title">轴位置</div>
        </div>
        <div class="main" style="margin-left: 20px;height: 200px">
          <table>
            <tr>
              <td style="font-size: 24px;width: 80px;">轴名</td>
              <td style="font-size: 24px;width: 230px;">坐标位置</td>
            </tr>
            <tr v-for="(item, index) in deviceList[4].Axis" :key="index" style="font-size: 20px">
              <td >{{item.AxisName}}</td>
              <td style="text-align: left;padding-left: 20px">{{item.AxisValue}}</td>
            </tr>
          </table>
        </div>
      </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>
    </el-row>
    <el-dialog :visible.sync="dialogFormVisible_remoteControl" title="远程控制" center width="420px">
      <div style="text-align: center;margin: 0 0 10px 0;font-size:20px;font-weight: bolder">
        请确认机床处于正确状态，确保安全！
      </div>
      <el-form ref="form" label-width="100px">
        <el-form-item label="机器人">
          <el-button type="danger" size="mini" @click="confirmRemoteControl_stopMachine('robot')">急停控制</el-button>
        </el-form-item>
        <el-form-item label="CMM三坐标">
          <el-button type="danger" size="mini" @click="confirmRemoteControl_stopMachine('cmm')">急停控制</el-button>
        </el-form-item>
        <el-form-item label="FORM P450">
          <el-button type="danger" size="mini" @click="confirmRemoteControl_stopMachine('form')">急停控制</el-button>
        </el-form-item>
        <el-form-item label="HSM500">
          <el-button type="danger" size="mini" @click="confirmRemoteControl_stopMachine('hsm500')">急停控制</el-button>
          <el-button type="primary" size="mini" @click="confirmRemoteControl_machineDoor('HSM500', 'open')">远程操作</el-button>
          <el-button type="warning" size="mini" @click="confirmRemoteControl_machineDoor('HSM500', 'close')">远程关门</el-button>
        </el-form-item>
        <el-form-item label="线内MILL700">
          <el-button type="danger" size="mini" @click="confirmRemoteControl_stopMachine('mill700a')">急停控制</el-button>
          <el-button type="primary" size="mini" @click="confirmRemoteControl_machineDoor('MILL700_A', 'open')">远程操作</el-button>
          <el-button type="warning" size="mini" @click="confirmRemoteControl_machineDoor('MILL700_A', 'close')">远程关门</el-button>
        </el-form-item>
        <el-form-item label="清洗设备">
          <el-button type="primary" size="mini" @click="confirmRemoteControl_machineDoor('CleaningMachine', 'open')">远程操作</el-button>
          <el-button type="warning" size="mini" @click="confirmRemoteControl_machineDoor('CleaningMachine', 'close')">远程关门</el-button>
        </el-form-item>
        <el-form-item label="料架(上料台)">
          <el-button type="primary" size="mini" @click="confirmRemoteControl_machineDoor('UpLoadMachine', 'open')">远程操作</el-button>
          <el-button type="warning" size="mini" @click="confirmRemoteControl_machineDoor('UpLoadMachine', 'close')">远程关门</el-button>
        </el-form-item>
        <el-form-item>
          <el-button @click="dialogFormVisible_remoteControl = false">关闭面板</el-button>
        </el-form-item>
      </el-form>
      <div style="text-align: center;margin: 20px 0 0 0;font-size:20px;font-weight: bolder;color: #409eff">
        控制结果：{{remoteControlResult}}
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { opname, mqttIp, mqttPort } from '@/utils/request'
import axios from 'axios'
import * as echarts from 'echarts'
import DMT from '../components/DMT/index'
import DMTT from '../components/DMT/index2'
import mqtt from 'mqtt'
import fa from 'element-ui/src/locale/lang/fa'
let dashboard1 = null
let dashboard2 = null
let dashboard3 = null
let dashboard4 = null
// let dashboard5 = null
// let dashboard6 = null
// let dashboard7 = null
// let dashboard8 = null
// let dashboard9 = null
// let dashboard11 = null
// let dashboard12 = null

// eslint-disable-next-line no-unused-vars
const delay = ms => new Promise((resolve, reject) => setTimeout(resolve, ms))
export default {
  name: 'MingLuo',
  components: {
    DMT,
    DMTT,
    'el-image-viewer': () => import('element-ui/packages/image/src/image-viewer')
  },
  data() {
    return {
      remoteControlResult: '',
      isSendOk: false,
      dialogFormVisible_remoteControl: false,
      showInfo1: false,
      showInfo2: false,
      showInfo3: false,
      showInfo4: false,
      showInfo5: false,
      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: [],
      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,
      timer: '',
      JPH: 50,
      OEE: 80,
      averData: 0,
      timer_1: null,
      timer_2: null,
      timer_3: null,
      timer_4: null,
      robotList: [
        {
          'J1': 999.99,
          'J2': 0,
          'J3': 0,
          'J4': 0,
          'J5': 0,
          'J6': 0
        },
        {
          'J1': 0,
          'J2': 0,
          'J3': 0,
          'J4': 0,
          'J5': 0,
          'J6': 0
        },
        {
          'J1': 0,
          'J2': 0,
          'J3': 0,
          'J4': 0,
          'J5': 0,
          'J6': 0
        },
        {
          'J1': 0,
          'J2': 0,
          'J3': 0,
          'J4': 0,
          'J5': 0,
          'J6': 0
        },
        {
          'J1': 0,
          'J2': 0,
          'J3': 0,
          'J4': 0,
          'J5': 0,
          'J6': 0
        },
        {
          'J1': 0,
          'J2': 0,
          'J3': 0,
          'J4': 0,
          'J5': 0,
          'J6': 0
        },
        {
          'J1': 0,
          'J2': 0,
          'J3': 0,
          'J4': 0,
          'J5': 0,
          'J6': 0
        }
      ],
      flag: 0,
      date: new Date(),
      year: '',
      month: '',
      day: '',
      minute: '',
      hour: '',
      second: '',
      week: '',
      PageCount: 0,
      total: 0, // 总条数
      pageSize: 5, // 每页显示条数
      PageCurrent: 1, // 后台获取页
      isShowOuterLayer: false, // 是否显示加工中心组件
      classOption: {
        step: 0.2,
        direction: 1,
        limitMoveNum: 6,
        openWatch: true,
        hoverStop: false
      },
      // 用于内层组件
      inClassOption: {
        step: 0.2,
        direction: 1,
        limitMoveNum: 3,
        openWatch: true,
        hoverStop: false
      },
      alarmClassOption: {
        step: 0.2,
        direction: 1,
        limitMoveNum: 2,
        openWatch: true,
        hoverStop: false
      },
      textClassOption: {
        step: 0.1,
        direction: 2,
        limitMoveNum: 0,
        openWatch: true,
        hoverStop: false
      },
      // 中间用
      classOption2: {
        step: 0.2,
        direction: 1,
        limitMoveNum: 4,
        openWatch: true,
        hoverStop: false
      },
      // 内部用
      classOption3: {
        step: 0.5,
        direction: 1,
        limitMoveNum: 12,
        openWatch: true,
        hoverStop: false
      },
      // 三色灯显示 1 显示 0 不显示
      lightForm: {
        red: '0',
        yellow: '0',
        green: '0'
      },
      runStatusList: ['上电', '运行', '关机', '报警'], // 运行状态列表
      deviceList: [
        // 左侧设备 MILL E 700 U
        {
          'Name': window.dt_Config.outerLeftDeviceName, // 设备名称
          'Id': '1', // 设备ID
          'Status': '', // 设备运行状态 需要明确有几个状态，具体的值
          'Program': '', // 设备运行的程序名称
          'ProgramStatus': '', // 设备运行的程序状态 需要明确有几个状态，具体的值
          'Feed': '0', // 设备进给速度 确认下单位
          'Speed': '0', // 设备主轴转速  确认下单位
          'Rapid': '0', // 设备移动速度 确认下单位  应该是  和高明确认下这个的含义
          'Axis': [],
          'Tool': {},
          'OtherParameter': [],
          'Alarm': [],
          'robotDataList': []
        },
        // 右侧设备 Mikron HSM 500
        {
          'Name': window.dt_Config.outerRightDeviceName, // 设备名称
          'Id': '1', // 设备ID
          'Status': '', // 设备运行状态 需要明确有几个状态，具体的值
          'Program': '', // 设备运行的程序名称
          'ProgramStatus': '', // 设备运行的程序状态 需要明确有几个状态，具体的值
          'Feed': '', // 设备进给速度 确认下单位
          'Speed': '', // 设备主轴转速  确认下单位
          'Rapid': '', // 设备移动速度 确认下单位  应该是  和高明确认下这个的含义
          'Axis': [],
          'Tool': {},
          'OtherParameter': [],
          'Alarm': [],
          'robotDataList': []
        },
        // FORM P 450
        {
          'Name': window.dt_Config.outerBottomLeftDeviceName, // 设备名称
          'Id': '1', // 设备ID
          'Status': '', // 设备运行状态 需要明确有几个状态，具体的值
          'Program': '', // 设备运行的程序名称
          'ProgramStatus': '', // 设备运行的程序状态 需要明确有几个状态，具体的值
          'Feed': '', // 设备进给速度 确认下单位
          'Speed': '', // 设备主轴转速  确认下单位
          'Rapid': '', // 设备移动速度 确认下单位  应该是  和高明确认下这个
          'Axis': [],
          'Tool': { },
          'OtherParameter': [],
          'Alarm': []
        },
        // ROBOT
        {
          'Name': window.dt_Config.outerBottomRightDeviceName1, // 设备名称
          'Id': '1', // 设备ID
          'Status': '', // 设备运行状态 需要明确有几个状态，具体的值
          'Program': '', // 设备运行的程序名称
          'ProgramStatus': '', // 设备运行的程序状态 需要明确有几个状态，具体的值
          'Feed': '', // 设备进给速度 确认下单位
          'Speed': '', // 设备主轴转速  确认下单位
          'Rapid': '', // 设备移动速度 确认下单位  应该是  和高明确认下这个的含义
          'Axis': [],
          'Tool': {},
          'OtherParameter': [],
          'Alarm': [],
          'robotDataList': []

        },
        // CMM
        {
          'Name': window.dt_Config.outerBottomRightDeviceName2, // 设备名称
          'Id': '1', // 设备ID
          'Status': '', // 设备运行状态 需要明确有几个状态，具体的值
          'Program': '', // 设备运行的程序名称
          'ProgramStatus': '', // 设备运行的程序状态 需要明确有几个状态，具体的值
          'Feed': '', // 设备进给速度 确认下单位
          'Speed': '', // 设备主轴转速  确认下单位
          'Rapid': '', // 设备移动速度 确认下单位  应该是  和高明确认下这个的含义
          'Axis': [],
          'Tool': {},
          'OtherParameter': [],
          'Alarm': [],
          'robotDataList': []

        }
      ],
      facilityStatus: {
        timeRated: 0,
        timeUsed: 0
      },
      mqttPortWeb: ''
    }
  },
  created() {
    this.mqttPortWeb = mqttPort
    this.getLogo()
    // window.updateRobotData = this.updateRobotData
    // delay = ms => new Promise((resolve, reject) => setTimeout(resolve, ms))
    // this.initData()

    // 根据配置切换速度来切换两个页面
    setInterval(() => {
      // console.log(this.isShowOuterLayer)
      if (window.dt_Config.isPageCut) {
        this.isShowOuterLayer = !this.isShowOuterLayer
      }
    }, window.dt_Config.pageCutSpeed * 1000)
  },
  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.init()
    // this.initLong()
    this.initMqtt()
    // setTimeout(() => {
    //   this.timer_3 = setInterval(this.init, 1000 * 20)
    //   this.timer_4 = setInterval(this.initLong, 1000 * 60)
    // }, 200)
  },
  beforeDestroy() {
    // clearInterval(this.timer_1)
    // clearInterval(this.timer_2)
    clearInterval(this.timer_3)
    clearInterval(this.timer_4)
  },
  methods: {
    showMachineInfo(type) {
      const scope = this
      setTimeout(() => {
        switch (type) {
          case 1:
            scope.showInfo1 = !scope.showInfo1
            scope.showInfo2 = false
            scope.showInfo3 = false
            scope.showInfo4 = false
            scope.showInfo5 = false
            break
          case 2:
            scope.showInfo1 = false
            scope.showInfo2 = !scope.showInfo2
            scope.showInfo3 = false
            scope.showInfo4 = false
            scope.showInfo5 = false
            break
          case 3:
            scope.showInfo1 = false
            scope.showInfo2 = false
            scope.showInfo3 = !scope.showInfo3
            scope.showInfo4 = false
            scope.showInfo5 = false
            break
          case 4:
            scope.showInfo1 = false
            scope.showInfo2 = false
            scope.showInfo3 = false
            scope.showInfo4 = !scope.showInfo4
            scope.showInfo5 = false
            break
          case 5:
            scope.showInfo1 = false
            scope.showInfo2 = false
            scope.showInfo3 = false
            scope.showInfo4 = false
            scope.showInfo5 = !scope.showInfo5
            break
        }
      }, 200)
    },
    showRemoteControl() {
      this.showInfo1 = false
      this.showInfo2 = false
      this.showInfo3 = false
      this.showInfo4 = false
      this.showInfo5 = false
      this.isSendOk = false
      this.dialogFormVisible_remoteControl = true
    },
    confirmRemoteControl_machineDoor(machineName, status) {
      this.remoteControlResult = ''
      const url = window.dt_Config.serviceDT_machineDoor
      axios.get(url,
        {
          params: {
            machineName: machineName,
            status: status
          }
        }).then(res => {
        this.isSendOk = true
        this.remoteControlResult = res.data.msg
        if (res.data.msg === 'ok') {
          this.$message({
            message: '远程操作成功',
            type: 'success'
          })
        } else {
          this.$message.error('远程操作失败！')
        }
      }).catch(err => {
        this.isSendOk = true
        this.remoteControlResult = err.message
        console.log(err)
      })
    },
    confirmRemoteControl_stopMachine(device) {
      this.remoteControlResult = ''
      const url = window.dt_Config.serviceDT_machineStop
      axios.get(url,
        {
          params: {
            device: device
          }
        }).then(res => {
        this.isSendOk = true
        this.remoteControlResult = res.data.msg
        if (res.data.msg === 'ok') {
          this.$message({
            message: '远程急停成功',
            type: 'success'
          })
        } else {
          this.$message.error('远程急停失败！')
        }
      }).catch(err => {
        this.isSendOk = true
        this.remoteControlResult = err.message
        console.log(err)
      })
    },
    async goToOp(list) {
      const routeData = this.$router.resolve({
        path: '/firstStation',
        query: {
          OP: list.工位号,
          工位号id: list.id
        }
      })
      window.open(routeData.href, '_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'))
      // 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.searchTable()
      this.searchChartData1()
      this.searchChartData2()
      this.searchChartData3()
      this.searchChartData4()
      // this.searchChartData5Range()
      // this.searchChartData7Range()
      // this.searchChartData11Range()
      // this.searchChartData12Range()
    },
    initLong() {
      this.searchChartData1()
    },
    initMqtt() {
      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())
        }
      })
      // 模拟接收消息
      // setInterval(() => {
      //   this.websocketonmessage({ data: 'DT|C_B_DeviceInfo|[{"Name":"CUT","order":"8c07b5fd8a3f","Id":"cfc74901-f68e-45e2-8735-8c07b5fd8a3f","Status":"中断","Program":"D:\\\\USER\\\\18126-P03-P10.MJB","Feed":null,"Speed":null,"Rapid":null,"ProgramStatus":null,"Tool":null,"Axis":[{"AxisName":"X","AxisValue":"0"},{"AxisName":"Y","AxisValue":"0"},{"AxisName":"Z","AxisValue":"60.7"},{"AxisName":"U","AxisValue":"0"},{"AxisName":"V","AxisValue":"0"}],"OtherParameter":[{"ParameterName":"当前钢丝架文件的名称","ParameterValue":"AC BRASS 900 0.250"},{"ParameterName":"当前选择的线径","ParameterValue":"0.25"},{"ParameterName":"电极丝特性","ParameterValue":"-841100"},{"ParameterName":"电极丝速度","ParameterValue":"8.2"},{"ParameterName":"发电机接通时间","ParameterValue":"697"},{"ParameterName":"总执行时间","ParameterValue":"817"},{"ParameterName":"机床接通的总时间","ParameterValue":"30704238"},{"ParameterName":"加工时电极丝速度","ParameterValue":"0"},{"ParameterName":"上喷射压力","ParameterValue":"0.2"},{"ParameterName":"下喷射压力","ParameterValue":"0.1"},{"ParameterName":"过滤器中的压力","ParameterValue":"1.1"}],"Alarm":[{"Alarm":"????dssaassaaa?","AlarmTime":"2023-06-08 09:12:39 851"}]}]' })
      //   this.websocketonmessage({ data: 'DT|C_B_DeviceInfo|[{"Name":"FORM","order":"45e2","Id":"cfc74901-f68e-45e2-8735-8c07b5fd8a3f","Status":"ACTIVE","Program":"wdawda46d65a","Feed":"22","Speed":"33","Rapid":"44","ProgramStatus":null,"Tool":null,"Axis":[{"AxisName":"Xact","AxisValue":"10.5231"},{"AxisName":"Yact","AxisValue":"12.1368"},{"AxisName":"Zact","AxisValue":"35.8"},{"AxisName":"Uact","AxisValue":"0"},{"AxisName":"Vact","AxisValue":"0.0008"}],"Alarm":[{"Alarm":"????dddddddddddd?","AlarmTime":"2023-06-08 09:12:39 851"}],"OtherParameter":[{"ParameterName":"programnumber","ParameterValue":"SHAPE_SKIMMINGUNTILREMNANT2_CUT2"},{"ParameterName":"wirename","ParameterValue":"AC BRASS 900 0.250"},{"ParameterName":"wirediam","ParameterValue":"0.25"},{"ParameterName":"wireleftlength","ParameterValue":"-824956"},{"ParameterName":"wirespeed","ParameterValue":"8"},{"ParameterName":"sequence","ParameterValue":"GEO 8"},{"ParameterName":"sequencepass","ParameterValue":"3"},{"ParameterName":"genontime","ParameterValue":"4095"},{"ParameterName":"executiontime","ParameterValue":"4313"},{"ParameterName":"machinecounter","ParameterValue":"30503331"},{"ParameterName":"machineerosioncounter","ParameterValue":"12426498"},{"ParameterName":"machiningspeedmax","ParameterValue":"2.99"},{"ParameterName":"machiningspeedmin","ParameterValue":"2.32"},{"ParameterName":"machiningspeed","ParameterValue":"2.62"},{"ParameterName":"deio","ParameterValue":"9.7"},{"ParameterName":"temperature","ParameterValue":"21.9"},{"ParameterName":"pressureupper","ParameterValue":"0.3"},{"ParameterName":"pressurelower","ParameterValue":"0.1"},{"ParameterName":"pressurefilter","ParameterValue":"1.3"},{"ParameterName":"cuttinglength","ParameterValue":"24.2675"},{"ParameterName":"meanmachvoltage","ParameterValue":"30.0"},{"ParameterName":"wiretension","ParameterValue":"4.9"},{"ParameterName":"good","ParameterValue":"0.831"},{"ParameterName":"shortcircuit","ParameterValue":"0.150"},{"ParameterName":"arckill","ParameterValue":"0.019"},{"ParameterName":"cold","ParameterValue":"0.000"},{"ParameterName":"frequency","ParameterValue":"34990"},{"ParameterName":"timeTD","ParameterValue":"0.014"},{"ParameterName":"shc_warningnumber","ParameterValue":"56"},{"ParameterName":"shc_warningtime","ParameterValue":"45592"},{"ParameterName":"shc_longnumber","ParameterValue":"52"},{"ParameterName":"shc_longtime","ParameterValue":"45316"},{"ParameterName":"shc_time","ParameterValue":"45528"}]}]' })
      //   this.websocketonmessage({ data: 'DT|C_B_DeviceInfo|[{"Name":"98","order":"8735","Id":"cfc74901-f68e-45e2-8735-8c07b5fd8a3f","Status":"ACTIVE","Program":null,"Feed":"22","Speed":"33","Rapid":"44","ProgramStatus":null,"Tool":null,"Axis":[{"AxisName":"Xact","AxisValue":"10.5231"},{"AxisName":"Yact","AxisValue":"12.1368"},{"AxisName":"Zact","AxisValue":"35.8"},{"AxisName":"Uact","AxisValue":"0"},{"AxisName":"Vact","AxisValue":"0.0008"}],"Alarm":[{"Alarm":"???sssssssssssssssssss??","AlarmTime":"2023-06-08 09:12:39 851"}],"OtherParameter":[{"ParameterName":"programnumber","ParameterValue":"SHAPE_SKIMMINGUNTILREMNANT2_CUT2"},{"ParameterName":"wirename","ParameterValue":"AC BRASS 900 0.250"},{"ParameterName":"wirediam","ParameterValue":"0.25"},{"ParameterName":"wireleftlength","ParameterValue":"-824956"},{"ParameterName":"wirespeed","ParameterValue":"8"},{"ParameterName":"sequence","ParameterValue":"GEO 8"},{"ParameterName":"sequencepass","ParameterValue":"3"},{"ParameterName":"genontime","ParameterValue":"4095"},{"ParameterName":"executiontime","ParameterValue":"4313"},{"ParameterName":"machinecounter","ParameterValue":"30503331"},{"ParameterName":"machineerosioncounter","ParameterValue":"12426498"},{"ParameterName":"machiningspeedmax","ParameterValue":"2.99"},{"ParameterName":"machiningspeedmin","ParameterValue":"2.32"},{"ParameterName":"machiningspeed","ParameterValue":"2.62"},{"ParameterName":"deio","ParameterValue":"9.7"},{"ParameterName":"temperature","ParameterValue":"21.9"},{"ParameterName":"pressureupper","ParameterValue":"0.3"},{"ParameterName":"pressurelower","ParameterValue":"0.1"},{"ParameterName":"pressurefilter","ParameterValue":"1.3"},{"ParameterName":"cuttinglength","ParameterValue":"24.2675"},{"ParameterName":"meanmachvoltage","ParameterValue":"30.0"},{"ParameterName":"wiretension","ParameterValue":"4.9"},{"ParameterName":"good","ParameterValue":"0.831"},{"ParameterName":"shortcircuit","ParameterValue":"0.150"},{"ParameterName":"arckill","ParameterValue":"0.019"},{"ParameterName":"cold","ParameterValue":"0.000"},{"ParameterName":"frequency","ParameterValue":"34990"},{"ParameterName":"timeTD","ParameterValue":"0.014"},{"ParameterName":"shc_warningnumber","ParameterValue":"56"},{"ParameterName":"shc_warningtime","ParameterValue":"45592"},{"ParameterName":"shc_longnumber","ParameterValue":"52"},{"ParameterName":"shc_longtime","ParameterValue":"45316"},{"ParameterName":"shc_time","ParameterValue":"45528"}]}]' })
      //   this.websocketonmessage({ data: 'DT|C_B_DeviceInfo|[{"Name":"TNC530","order":"d510","Id":"72e95caa-d510-4090-9dfa-9c55b8220999","Status":"运行","Program":"TNC:\\\\CNC\\\\_model1-2.H","Feed":"18","Speed":"120","Rapid":"18","ProgramStatus":"闲置","Tool":null,"Axis":[{"AxisName":"X","AxisValue":"-279.766"},{"AxisName":"Y","AxisValue":"224.906"},{"AxisName":"Z","AxisValue":"231.568"},{"AxisName":"C","AxisValue":"333.580"},{"AxisName":"B","AxisValue":"0.000"}],"OtherParameter":[{"ParameterName":"NC启动时间","ParameterValue":"4192:47"},{"ParameterName":"MACHINE启动时间","ParameterValue":"3015:41"},{"ParameterName":"MACHINE运行时间","ParameterValue":"428:58"},{"ParameterName":"SPINDLE运行时间","ParameterValue":"0:00"}],"Alarm":null}]' })
      //   this.websocketonmessage({ data: 'DT|C_B_DeviceInfo|[{"Name":"FANUC","order":"cfc74901","Id":"cfc74901-f68e-45e2-8735-8c07b5fd8a3f","Status":"ACTIVE","Program":null,"Feed":"22","Speed":"33","Rapid":"44","ProgramStatus":null,"Tool":null,"Axis":[{"AxisName":"Xact","AxisValue":"10.5231"},{"AxisName":"Yact","AxisValue":"12.1368"},{"AxisName":"Zact","AxisValue":"35.8"},{"AxisName":"Uact","AxisValue":"0"},{"AxisName":"Vact","AxisValue":"0.0008"}],"OtherParameter":[{"ParameterName":"programnumber","ParameterValue":"SHAPE_SKIMMINGUNTILREMNANT2_CUT2"},{"ParameterName":"wirename","ParameterValue":"AC BRASS 900 0.250"},{"ParameterName":"wirediam","ParameterValue":"0.25"},{"ParameterName":"wireleftlength","ParameterValue":"-824956"},{"ParameterName":"wirespeed","ParameterValue":"8"},{"ParameterName":"sequence","ParameterValue":"GEO 8"},{"ParameterName":"sequencepass","ParameterValue":"3"},{"ParameterName":"genontime","ParameterValue":"4095"},{"ParameterName":"executiontime","ParameterValue":"4313"},{"ParameterName":"machinecounter","ParameterValue":"30503331"},{"ParameterName":"machineerosioncounter","ParameterValue":"12426498"},{"ParameterName":"machiningspeedmax","ParameterValue":"2.99"},{"ParameterName":"machiningspeedmin","ParameterValue":"2.32"},{"ParameterName":"machiningspeed","ParameterValue":"2.62"},{"ParameterName":"deio","ParameterValue":"9.7"},{"ParameterName":"temperature","ParameterValue":"21.9"},{"ParameterName":"pressureupper","ParameterValue":"0.3"},{"ParameterName":"pressurelower","ParameterValue":"0.1"},{"ParameterName":"pressurefilter","ParameterValue":"1.3"},{"ParameterName":"cuttinglength","ParameterValue":"24.2675"},{"ParameterName":"meanmachvoltage","ParameterValue":"30.0"},{"ParameterName":"wiretension","ParameterValue":"4.9"},{"ParameterName":"good","ParameterValue":"0.831"},{"ParameterName":"shortcircuit","ParameterValue":"0.150"},{"ParameterName":"arckill","ParameterValue":"0.019"},{"ParameterName":"cold","ParameterValue":"0.000"},{"ParameterName":"frequency","ParameterValue":"34990"},{"ParameterName":"timeTD","ParameterValue":"0.014"},{"ParameterName":"shc_warningnumber","ParameterValue":"56"},{"ParameterName":"shc_warningtime","ParameterValue":"45592"},{"ParameterName":"shc_longnumber","ParameterValue":"52"},{"ParameterName":"shc_longtime","ParameterValue":"45316"},{"ParameterName":"shc_time","ParameterValue":"45528"}]}]' })
      //   console.log('mqtt发送了一条数据')
      // }, 5000)
    },
    getContainerHeight() {
      return this.isShowOuterLayer ? '980px' : '670px'
    },
    websocketonmessage(msg) { // 数据接收
      this.msg = msg
      // 返回的数据msg.data，包含了协议中的4部分9
      // TOBS??SCADADetailed?MES|Current|opName|电流^电压
      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 'DT':
          switch (dataType) {
            case 'C_B_DeviceInfo': {
              {
                // console.log('S_data0', m_data)
                const S_data = JSON.parse(m_data)[0]
                // console.log('S_data', S_data)
                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) {
                    // 2.对对象进行拷贝覆盖
                    item = { ...item, ...S_data }
                    if (item.hasOwnProperty('Alarm')) {
                      if (item.Alarm === null) item.Alarm = []
                      // 遍历报警信息 去除所有问号
                      if (item.Alarm !== null) {
                        if (item.Alarm.length > 0) {
                          for (const item of item.Alarm) {
                            item.Alarm = item.Alarm.replaceAll('?', '')
                            item.Alarm = item.Alarm.replaceAll('？', '')
                          }
                        }
                      }
                    }
                    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
                    // console.log('覆盖后的对象', this.deviceList[i])
                    console.log('此时数组对象', this.deviceList)
                    break
                  }
                }
              }
              break
            }
            case 'C_B_TagIDTrigger':
              {
                const tag = JSON.parse(m_data)
                switch (tag.TagID) {
                  case 'CB614A60-D0D2-4D76-96AA-FF433CAC0076': {
                  // 红
                    this.lightForm.red = tag.TagValue
                    break
                  }
                  case 'CB614A60-D0D2-4D76-96AA-FF433CAC0077': {
                  // 黄
                    this.lightForm.yellow = tag.TagValue
                    break
                  }
                  case 'CB614A60-D0D2-4D76-96AA-FF433CAC0078': {
                    this.lightForm.green = tag.TagValue
                    // 绿
                    break
                  }
                }
              }
              break
          }
          break
      }
    },
    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
    },
    // 获取工位号
    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
          }
        }
        console.log(this.machineInfo_state)
      })
    },
    // 初始化右侧图表
    initInRightChart() {
      const _this = this // 声明一个变量指向Vue实例this，保证作用域一致
      var dom3 = document.getElementById('facility-echart')
      var charts3 = echarts.init(dom3)
      var option3 = {
        title: {
          text: '',
          left: 'center',
          top: 'center'
        },
        legend: {
          // data: ['工作 | 9台 100%', '离线 | 0台 0%', '待机 | 0台 0%', '故障 | 0台 0%'],
          x: 'center', // 可设定图例在左、右、居中
          y: 'bottom', // 可设定图例在上、下、居中
          top: 250,
          padding: [0, 50, -20, 50],
          textStyle: {
            // 图例文字的样式
            color: '#fff',
            fontSize: 20
          }
        },
        graphic: [
          {
            // 环形图中间添加文字
            type: 'text', // 通过不同top值可以设置上下显示
            left: '35%',
            top: '32%',
            style: {
              text: _this.facilityStatus.timeRated,
              textAlign: 'right',
              fill: '#fff', // 文字的颜色
              fontSize: 40,
              fontWeight: 900,
              lineHeight: 16
            }
          },
          {
            // 环形图中间添加文字
            type: 'text', // 通过不同top值可以设置上下显示
            left: '53%',
            top: '34%',
            style: {
              text: '%',
              textAlign: 'center',
              fill: '#fff', // 文字的颜色
              fontSize: 30,
              fontWeight: 900,
              lineHeight: 16
            }
          }
        ],
        textStyle: {
          // 主标题样式
          fontSize: 35
        },
        series: [
          {
            type: 'pie',
            radius: ['50%', '70%'],
            center: ['50%', '40%'],
            top: -20,
            avoidLabelOverlap: false,
            color: ['rgb(0,233,255)', 'rgb(170,170,170)', 'rgb(246,194,126)', 'rgb(207,60,60)'],
            itemStyle: {
              // borderRadius: 20,
              borderColor: 'rgba(0,11,47,1)',
              borderWidth: 5
            },
            label: {
              show: false,
              position: 'center',
              emphasis: {
                // show: true
              }
            },
            labelLine: {
              show: false
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '40',
                fontWeight: 'bold'
              }
            },
            data: [
              { value: 5000, name: '额定寿命 | 5000次 62%' },
              { value: 3625, name: '使用次数 | 3625次 38%' }
            ]
          }
        ]
      }
      charts3.setOption(option3)

      // 设备状态 初始化
      let facilityStatus
      // 动态更新设备数据
      // console.log(_this.deviceList[2])
      facilityStatus = _this.deviceList[2].Tool
      // 具体回显数据对象
      _this.facilityStatus.timeRated = _this.getPercentWithPrecision([facilityStatus.TimeRated - facilityStatus.TimeUsed, facilityStatus.TimeUsed], 0, 0)
      _this.facilityStatus.timeUsed = _this.getPercentWithPrecision([facilityStatus.TimeRated - facilityStatus.TimeUsed, facilityStatus.TimeUsed], 1, 0)
      const statusEchartsData = [
        {
          value: facilityStatus.TimeRated,
          name: `额定寿命 | ${facilityStatus.TimeRated}次 ${_this.facilityStatus.timeRated}%`
        },
        {
          value: facilityStatus.TimeUsed,
          name: `使用寿命 | ${facilityStatus.TimeUsed}次 ${_this.facilityStatus.timeUsed}%`
        }
      ]
      var option = charts3.getOption()
      option.series[0].data = statusEchartsData
      option.graphic[0].elements[0].style.text = _this.facilityStatus.timeRated
      charts3.setOption(option)
    },
    /**
     *获取百分比数据方法
     * 获取给定精度的数据，确保valueList中的百分比之和为1
     * 采用最大余数法
     * @param {number[]} valueList 所有数据的列表
     * @param {number} idx 数据的索引
     * @param {number} precision 精度
     * @return {number} 百分数
     */
    getPercentWithPrecision(valueList, idx, precision) {
      for (const it in valueList) {
        valueList[it] = Number(valueList[it])
      }

      if (!valueList[idx]) {
        return 0
      }

      var sum = valueList.reduce(function(acc, val) {
        return acc + (isNaN(val) ? 0 : val)
      }, 0)
      if (sum === 0) {
        return 0
      }

      var digits = Math.pow(10, precision)
      var votesPerQuota = valueList.map((val) => {
        return ((isNaN(val) ? 0 : val) / sum) * digits * 100
      })
      var targetSeats = digits * 100

      var seats = votesPerQuota.map((votes) => Math.floor(votes))
      var currentSum = seats.reduce(function(acc, val) {
        return acc + val
      }, 0)

      var remainder = votesPerQuota.map((votes, idx) => votes - seats[idx])

      // Has remainding votes.
      while (currentSum < targetSeats) {
        // Find next largest remainder.
        var max = -Infinity // Number.NEGATIVE_INFINITY;
        var maxId = null
        for (var i = 0, len = remainder.length; i < len; ++i) {
          if (remainder[i] > max) {
            max = remainder[i]
            maxId = i
          }
        }

        // Add a vote to max remainder.
        ++seats[maxId]
        remainder[maxId] = 0
        ++currentSum
      }

      return seats[idx] / digits
    },
    // 查询开机率
    searchChartData1() {
      var param1 = []
      var Data1 = this.CreateData('11', '设备管理_设备每分钟状态_初始化', param1)
      this.ExecDatabase(Data1).then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.colors.push(response.data[i].颜色)
          this.state.push(response.data[i].状态)
        }
      })
      var param = []
      var Data = this.CreateData('11', '设备管理_设备每分钟状态_查询', param)
      this.ExecDatabase(Data).then(response => {
        this.table1 = response.data
      }).then(() => {
        this.drawDashboard1()
      })
    },
    // 开机率
    drawDashboard1() {
      const _this = this
      _this.data = []
      _this.index = 0
      _this.yAxisValue = []
      if (_this.table1.length === 1) {
        _this.data.push({
          itemStyle: { normal: { color: _this.table1[0].颜色 }}, // 条形颜色
          name: _this.table1[0].状态,
          value: [0, _this.table1[0].开始时间, _this.table1[0].结束时间]
        })
      } else {
        for (let i = 0; i < _this.table1.length; i++) {
          if (i < _this.table1.length) {
            if (i === 0) {
              _this.index = 0
              _this.yAxisValue.push(_this.table1[i].工位号)
            } else if (_this.table1[i].工位号 !== _this.table1[i - 1].工位号) {
              _this.index++ // y轴索引
              _this.yAxisValue.push(_this.table1[i].工位号)
            }
          }
          _this.data.push({
            itemStyle: { normal: { color: _this.table1[i].颜色 }}, // 条形颜色
            name: _this.table1[i].状态,
            value: [parseInt(_this.index), _this.table1[i].开始时间, _this.table1[i].结束时间]
          })
        }
      }
      dashboard1.setOption({
        // title: {
        //   left: 'center',
        //   text: '设备状态分布图',
        //   textStyle: {
        //     color: 'white'
        //   }
        // },
        color: _this.colors,
        tooltip: { // 提示框
          backgroundColor: 'rgba(50,50,50,0.7)',
          textStyle: {
            color: '#FFF', // 文字的颜色
            fontStyle: 'normal', // 文字字体的风格（'normal'，无样式；'italic'，斜体；'oblique'，倾斜字体）
            fontWeight: 'normal', // 文字字体的粗细（'normal'，无样式；'bold'，加粗；'bolder'，加粗的基础上再加粗；'lighter'，变细；数字定义粗细也可以，取值范围100至700）
            fontSize: '20' // 文字字体大小
          },
          formatter(params) {
            return params.value[1].substr(11, 5) + '~' + params.value[2].substr(11, 5)
          } // 数据的值
        },
        grid: { // 绘图网格
          left: '10px',
          right: '4%',
          top: '8%',
          bottom: '0',
          containLabel: true
        },
        legend: { // 图例
          selectedMode: false,
          top: '-5px',
          textStyle: {
            color: 'white'
          }
        },
        xAxis: {
          type: 'time',
          axisLine: {
            lineStyle: {
              color: 'white'
            },
            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: 'white'
            }
          },
          data: _this.yAxisValue
        },
        series: [
          // 用空bar来显示几个图例
          { name: _this.state[0], type: 'bar', data: [] },
          { name: _this.state[1], type: 'bar', data: [] },
          { name: _this.state[2], type: 'bar', data: [] },
          { name: _this.state[3], 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 = 10 // 柱体宽度

              return {
                type: 'rect', // 表示这个图形元素是矩形。还可以是 'circle', 'sector', 'polygon' 等等。
                shape: echarts.graphic.clipRectByRect({ // 矩形的位置和大小。
                  x: start[0],
                  y: start[1] - height / 1,
                  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: _this.data
          }
        ]
      })
    },
    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)
          }
          let num = 0
          let num1 = 0
          this.daliyOutPutData_Y.forEach(value => {
            num += parseInt(value)
          })
          this.daliyOutPutData_Y1.forEach(value => {
            num1 += parseInt(value)
          })
          this.daliyOutPutData_Average = num / this.daliyOutPutData_Y.length
          this.daliyOutPutData_Average1 = num1 / this.daliyOutPutData_Y1.length
          this.drawDashboard2()
        }
      })
    },
    // 近7日的产量
    drawDashboard2() {
      // 绘制图表
      dashboard2.setOption(
        {
          legend: {
            type: 'plain',
            show: true,
            data: ['上线', '下线'],
            textStyle: {
              color: '#fff'
            }
          },
          grid: [
            {
              left: '12%',
              top: '10%',
              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',
              color: '#ffc823',
              label: {
                show: true,
                position: 'top',
                color: 'white',
                fontSize: '14'
              }
              // markLine: {
              //   data: [{ yAxis: Math.trunc(this.daliyOutPutData_Average1), name: '平均值' }],
              //   lineStyle: {
              //     color: '#ffc823'
              //   },
              //   label: {
              //     position: 'end',
              //     color: 'white',
              //     distance: -80
              //   }
              // }
            },
            {
              name: '下线',
              data: this.daliyOutPutData_Y,
              type: 'bar',
              color: '#47cbff',
              label: {
                show: true,
                position: 'top',
                color: 'white',
                fontSize: '14'
              }
              // markLine: {
              //   data: [{ yAxis: Math.trunc(this.daliyOutPutData_Average), name: '平均值' }],
              //   lineStyle: {
              //     color: '#47cbff'
              //   },
              //   label: {
              //     position: 'end',
              //     color: 'white',
              //     distance: -80
              //   }
              // }
            }
          ]
        }
      )
    },
    // 查询7日单件能耗
    searchChartData3() {
      var param = []
      this.energyPartData_X = []
      this.energyPartData_Y = []
      var Data = this.CreateData('11', '能源管理_7日能耗查询', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.length > 0) {
          for (const info of response.data) {
            this.energyPartData_X.push(info.date.substring(info.date.length - 5, info.date.length))
            this.energyPartData_Y.push(info.num)
          }
          this.drawDashboard3()
        }
      })
    },
    // 日耗电量表
    drawDashboard3() {
      // 绘制图表
      dashboard3.setOption({
        grid: [
          {
            left: '10%',
            top: '10%',
            right: '5%',
            bottom: '20%'
          }
        ],
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: this.energyPartData_X,
          axisLine: {
            lineStyle: {
              color: 'white'
            }
          },
          axisLabel: {
            color: 'white',
            interval: 0,
            rotate: 45
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: 'white'
            }
          },
          axisLabel: {
            color: 'white'
          },
          splitLine: {
            show: false
          }
        },
        series: [
          {
            data: this.energyPartData_Y,
            type: 'line',
            barWidth: '50%',
            smooth: true,
            itemStyle: {
              color: '#fac858'
            },
            label: {
              show: true,
              color: '#fff',
              position: 'top',
              fontSize: '16'
            }
          }
        ]
      })
    },
    // 刀具管理_刀具信息查询TOP10
    searchChartData4() {
      var param = []
      this.toolListData_X = []
      this.toolListData_Y = []
      this.toolListData_Z = []
      var Data = this.CreateData('11', '刀具管理_刀具信息查询TOP10', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.length > 0) {
          for (const info of response.data) {
            this.toolListData_X.push(`${info.设备名称}-${info.刀具代码}`)
            const toolPer = Math.floor((info.已用寿命 / info.刀具额定寿命) * 100 * 10) / 10
            this.toolListData_Y.push(toolPer > 100 ? 100 : toolPer)
            this.toolListData_Z.push(info.刀具额定寿命)
          }
          this.drawDashboard4()
        }
      })
    },
    // 刀具管理_刀具信息查询TOP10
    drawDashboard4() {
      // 绘制图表
      dashboard4.setOption({
        grid: [
          {
            left: '12%',
            top: '8%',
            right: '5%',
            bottom: '20%'
          }
        ],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          data: this.toolListData_X,
          axisLine: {
            lineStyle: {
              color: 'white'
            }
          },
          axisLabel: {
            color: 'white',
            interval: 0,
            rotate: 45
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: 'white'
            }
          },
          axisLabel: {
            color: 'white'
          },
          splitLine: {
            show: false
          }
        },
        series: [
          {
            data: this.toolListData_Y,
            type: 'bar',
            barWidth: '50%',
            itemStyle: {
              color: function(res) {
                if (res.data >= 80) {
                  return '#ff2020'
                } else if (res.data <= 60) {
                  return '#009e1c'
                } else {
                  return '#ffc823'
                }
              }
            },
            label: {
              show: true,
              color: function(res) {
                if (res.data >= 80) {
                  return '#ff2020'
                } else if (res.data <= 60) {
                  return '#009e1c'
                } else {
                  return '#ffc823'
                }
              },
              position: 'top'
            }
          }
        ]
      })
    },
    // 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']
        }
      })
    },
    updateRobotData(ModelId, robotData) {
      new Promise((resolve) => {
        switch (ModelId) {
          case '7FCF9585-E565-45F0-BE07-5BAAB48F0410':
            for (const robotDatum of Object.keys(robotData)) {
              this.robotList[0][robotDatum] = robotData[robotDatum]
            }
            break
          case 'C453C0E0-98D2-4CCE-8D79-D48825C32DD5':
            for (const robotDatum of Object.keys(robotData)) {
              this.robotList[1][robotDatum] = robotData[robotDatum]
            }
            break
          case '23C4C8C2-4915-443D-8494-6DDDE3163792':
            for (const robotDatum of Object.keys(robotData)) {
              this.robotList[2][robotDatum] = robotData[robotDatum]
            }
            break
          case '0B54AD4E-DF98-40A4-AD83-937D7E06EAE6':
            for (const robotDatum of Object.keys(robotData)) {
              this.robotList[3][robotDatum] = robotData[robotDatum]
            }
            break
          case 'b7f00bc6-c6d4-4f20-8d26-d181b0aadaf9':
            for (const robotDatum of Object.keys(robotData)) {
              this.robotList[4][robotDatum] = robotData[robotDatum]
            }
            break
          case 'c50e2dd5-bcbe-4574-b0f9-55592ebfb0ba':
            for (const robotDatum of Object.keys(robotData)) {
              this.robotList[5][robotDatum] = robotData[robotDatum]
            }
            break
          case '8e6d5b0e-ab24-4eff-adc0-c0c655dedc13':
            for (const robotDatum of Object.keys(robotData)) {
              this.robotList[6][robotDatum] = robotData[robotDatum]
            }
            break
        }
      })
    },
    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('../../favicon.png', {
        responseType: 'arraybuffer'
      }).then(res => {
        this.titlePng = 'data:image/jpeg;base64,' + btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))
      })
      console.log('this.titlePng', this.titlePng)
      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('../../run.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>
@font-face {
  font-family: title-font;
  src: url("/public/庞门正道标题体.ttf");
}
.max-box{
  width: 95vw;
  height: 35px;
}
/* 标题部分 */
#title {
  font-family: title-font;
  font-size: 1.2rem;
  width: 90%;
  height: 30px;
  line-height: 30px;
  padding-left: 20px;
  background: url("~@/../public/标题框.png") no-repeat !important;
  background-size: 100% 100% !important;
}
/*三色灯图片*/
.tricolour-light{
  width: 40px;
  height: 200px;
  position: absolute;
  top: 50px;
  right: -60px;
  display: none;
}
.tricolour-light .bg-light{
  width: 100%;
  height: 100%;
  background: url("~@/../public/三色灯.png") no-repeat !important;
  background-size: 100% 100% !important;
}
/*红黄绿灯*/
.light{
  position: absolute;
  width: 100%;
  height: 20%;

}
.red-light{
  top: 6px;
  box-shadow:0px 0px 30px 10px rgb(203, 34, 34);
  background-color: rgb(175, 37, 37);
}
.yellow-light{
  top: 53px;
  box-shadow:0px 0px 30px 10px rgb(255, 164, 30);
  background-color: rgb(255, 166, 0);
}
.green-light{
  top: 99px;
  box-shadow:0px 0px 30px 10px rgb(0, 255, 0);
  background-color: rgb(0, 255, 0);
}

.station {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}
.station.RUN {
  background: #00ff00 !important;
}
.station.STOP {
  background: rgba(215, 222, 230, 0.15) !important;
}
/*上电*/
.station.electrify {
  background: #00ffff !important;
}
.station.Error {
  background: #ff0000 !important;
}

/** 动画进行时的class **/
.zoom-enter-active, .zoom-leave-active {
  transition: all .15s cubic-bezier(0.42, 0, 0.34, 1.55);
}

/** 设置进场开始的状态和离场结束的状态，都是缩放到0 **/
.zoom-enter, .zoom-leave-to {
  transform: scale(0);
}

/** 设置进场结束的状态和离场开始的状态, 都是缩放到1 **/
.zoom-enter-to, .zoom-leave {
  transform: scale(1);
}
.main .bg-img {
  width: 250px;
  height: 250px;
  position: absolute;
  left: 70px;
  top: 55px;
  background: url("~@/../public/环形图（右.png") no-repeat;
  background-size: 100% 100%;
}
#facility-echart {
  height: 300px;
  width: 90%;
  margin: 20px 0;
  position: relative;
  left: 15px;
}

.slogan{
  position: relative;
  color: white;
  text-align: left;
  font-size: 22px;
  font-weight: bolder;
  white-space: nowrap;
  min-width: 100px;
  overflow: hidden;
  /*animation-name: example;*/
  /*animation-duration: 2s;*/
  /*animation-duration: 20s;*/
  /*animation-iteration-count: infinite;*/
  width: 200px;
  height: 40px;
}

.slogan-1{
  position: absolute;
  animation-name: example;
  overflow: hidden;
  white-space: nowrap;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}
@keyframes example {
  0% {left:10%; top:0px;}
  50% {left:100%; top:0px;}
  100% {left:10%; top:0px;}

}

HTML{
  overflow: auto;
}

body{
  margin:0;
  padding:0;
  overflow: auto;
  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: rgb(14, 50, 97);
  /*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">
.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{
  height: 100vh;
  background-color: rgb(8, 31, 72);
  color: white;
  background-size: 100%;
}
.data-box {
  overflow: auto;
  margin-left: 2%;
  position: absolute;
  left: 5px;
  top: 60px;
  /*-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);*/
  background-color: rgb(2, 29, 59);
}
.data-box-hei{
  height: 700px;
}

.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: 12px 0 0 30px;
  width: 15px;
  height: 26px;
  background-color: #016eea
}
.indicatorText {
  margin: 16px 0 0 20px;
  float: left;
  font-size:20px
}
/*表格透明写法*/
/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;
}
</style>
