<template>
  <div class="background">
    <!--顶部-->
    <el-row style="box-shadow: inset 0 0 30px rgb(24, 78, 135);" >
      <div style="height: 80px; width: 1918px;" @click="isShowOuterLayer = !isShowOuterLayer">
        <el-col :span="5">
          <div style="font-size: 1.5rem;margin-top: 10px;margin-left: 40px">
            <el-col :span="7">
              <!--左上角logo-->
              <img style="height: 60px;" :src="titlePng"/>
            </el-col>
            <el-col :span="17">
              <div style="font-weight: bolder;line-height: 50px"></div>
            </el-col>
          </div>
        </el-col>
        <el-col :span="13">
          <div style="font-size: 3.7rem;color: white;text-align: center;margin-top: 10px">
            <span style="letter-spacing: 5px;font-weight: bolder" >智能制造产线数字孪生系统</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div style="color: white;float: right;font-size: 1.7rem;margin-top: 10px;margin-right: 5%">
            <el-col :span="13">
<!--                右上角logo-->
<!--              <img style="height: 50px;margin-top: 5px" :src="titlePng1"/>-->
            </el-col>
            <el-col :span="11">
              <span>{{this.year + '/'+ this.month + '/'+ this.day}}</span>
              <br>
              <span style="font-weight: bolder">{{(this.hour) + ':'+ (this.minute) + ':'+(this.second)}}</span>
            </el-col>
          </div>
        </el-col>
      </div>
    </el-row>
    <el-row>
        <div style="position: relative;height: 980px;">
            <!--外层组件-->
            <!--WEBGL渲染位置-->
            <div style="height: 100%; width: 100%;position: absolute;">
              <div style="width: 100%;height:740px;filter:blur(10);z-index: 999;">
                <d-m-t ref="dmtCom" v-on:changeCameraState="changeCameraState" containerHeight="740px" containerWidth="1340px" style="position:absolute;left:290px" />
              </div>
            </div>
            <!--左侧设备-->
            <div :style="{display: isShow}" class="data-box data-box-hei" style="left:5px; top:5px;">
              <span class="borderLeft1 boxBorder"></span>
              <span class="borderLeft2 boxBorder"></span>
              <span class="borderRight1 boxBorder"></span>
              <span class="borderRight2 boxBorder"></span>
              <div style="width: 100%; height: 45px;">
                <div class="indicatorBlock"/>
                <div class="indicatorText">
<!--                  {{deviceList[0].Name}}-->
                  五轴加工中心
                </div>
              </div>
              <!--设备状态-->
              <div class="max-box">
                <div id="title">设备状态</div>
                <div class="main" style="margin-left: 20px;position: relative;top: -30px;height: 20px;overflow: hidden">
                  <div style="margin-left:35%;width: 50%;text-align: right;font-size: 20px;overflow: hidden;">
                    <vue-seamless-scroll
                        ref="seamlessScroll"
                        :class-option="textClassOption"
                        style="height: 130px;overflow: hidden;border-top: 0px solid;width: 345px;margin: 0 -1px;">
                      <div style="white-space: nowrap;padding-left: 100px">{{deviceList[0].Status}}</div>
                    </vue-seamless-scroll>
                  </div>
                </div>
              </div>
              <!-- 当前程序-->
              <div class="max-box" style="top: 80px">
                <div id="title">当前程序</div>
                <div class="main" style="margin-left: 20px;position: relative;top: -30px;height: 20px;overflow: hidden">
                  <div style="margin-left:35%;width: 50%;text-align: right;font-size: 20px;overflow: hidden;">
                    <vue-seamless-scroll
                        ref="seamlessScroll"
                        :class-option="textClassOption"
                        style="height: 130px;overflow: hidden;border-top: 0px solid;width: 345px;margin: 0 -1px;">
                      <div style="white-space: nowrap;padding-left: 100px">{{deviceList[0].Program}}</div>
                    </vue-seamless-scroll>
                  </div>
                </div>
              </div>
              <!--刀具名称-->
              <!--              <div class="max-box" style="top: 115px;">-->
              <!--                <div id="title">刀具名称</div>-->
              <!--                <div class="main" style="margin-left: 20px;position: relative;top: -30px;display: flex">-->
              <!--                  <div style="margin-left:35%;width: 50%;text-align: right;font-size: 20px;overflow: hidden;">-->
              <!--                    <vue-seamless-scroll-->
              <!--                        ref="seamlessScroll"-->
              <!--                        :class-option="textClassOption"-->
              <!--                        style="overflow: hidden;border-top: 0px solid;width: 345px;margin: 0 -1px;">-->
              <!--                      <div style="white-space: nowrap;padding-left: 100px">{{deviceList[0].Tool.Name}}</div>-->
              <!--                    </vue-seamless-scroll>-->
              <!--                  </div>-->
              <!--                </div>-->
              <!--              </div>-->
              <!--刀具使用时间-->
              <!--              <div class="max-box" style="top: 150px;">-->
              <!--                <div id="title">刀具时间</div>-->
              <!--                <div class="main" style="margin-left: 20px;position: relative;top: -30px;display: flex">-->
              <!--                  <div style="margin-left:35%;width: 50%;text-align: right;font-size: 20px;overflow: hidden;">-->
              <!--                    <vue-seamless-scroll-->
              <!--                        ref="seamlessScroll"-->
              <!--                        :class-option="textClassOption"-->
              <!--                        style="overflow: hidden;border-top: 0px solid;width: 345px;margin: 0 -1px;">-->
              <!--                      <div style="white-space: nowrap;padding-left: 100px">{{deviceList[0].Tool.TimeUsed}}</div>-->
              <!--                    </vue-seamless-scroll>-->
              <!--                  </div>-->
              <!--                </div>-->
              <!--              </div>-->
              <!-- 轴名 -->
              <div class="max-box" style="top: 115px">
                <div id="title">轴位置</div>
                <div class="main" style="margin-left: 20px">
                  <table>
                    <tr>
                      <td style="font-weight: bolder;font-size: 20px;width: 80px;">轴名</td>
                      <td style="font-weight: bolder;font-size: 20px;width: 150px;">坐标位置</td>
                    </tr>
                    <tr v-for="(item, index) in deviceList[0].Axis" :key="index" style="font-size: 18px">
                      <td >{{item.AxisName}}</td>
                      <td style="text-align: left;padding-left: 20px">{{item.AxisValue}}</td>
                    </tr>
                  </table>
                </div>
              </div>
              <!-- 报警信息-->
              <div class="max-box" style="top: 340px">
                <div id="title">报警信息</div>
                <div class="main" style="margin-left: 20px;">
                  <div style="display: flex;font-size: 20px">
                    <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: 180px">
                      报警内容
                    </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: 120px;overflow: hidden;border: 1px solid;border-top: 0px solid;width: 243px;margin: 0;">
                    <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: 20px;text-align: center;margin-top: 23px">无报警信息</div>
                  </vue-seamless-scroll>
                </div>
              </div>
              <!--设备参数-->
              <div class="max-box" style="top: 550px">
                <div id="title">设备参数</div>
                <div class="main" style="margin-left: 20px">
                  <!--                  <div style="height: 150px;">-->
                  <!--                    <el-col :span="12">-->
                  <!--                      <div id="myChart6395AArrr1" style="width: 100%;height: 150px"/>-->
                  <!--                    </el-col>-->
                  <!--                    <el-col :span="12">-->
                  <!--                      <div id="myChart6395dadadsAArrr1" style="width: 100%;height: 150px"/>-->
                  <!--                    </el-col>-->
                  <!--                  </div>-->
                  <div style="height: 200px;margin-top: 20px">
                    <div id="myChart6395AArrr1" style="width: 100%;height: 180px"/>
                  </div>
                  <div style="height: 200px;">
                    <div id="myChart6395dadadsAArrr1" style="width: 100%;height: 180px"/>
                  </div>
                  <!--                  <table>-->
                  <!--                    <tr>-->
                  <!--                      <td style="font-weight: bolder;font-size: 20px;width: 80px;">名称</td>-->
                  <!--                      <td style="font-weight: bolder;font-size: 20px;width: 150px;">值</td>-->
                  <!--                    </tr>-->
                  <!--                    <tr style="font-size: 18px">-->
                  <!--                      <td >Feed</td>-->
                  <!--                      <td style="text-align: left;padding-left: 20px">{{deviceList[0].Feed}}</td>-->
                  <!--                    </tr>-->
                  <!--                    <tr style="font-size: 18px">-->
                  <!--                      <td >Speed</td>-->
                  <!--                      <td style="text-align: left;padding-left: 20px">{{deviceList[0].Speed}}</td>-->
                  <!--                    </tr>-->
                  <!--                    <tr style="font-size: 18px">-->
                  <!--                      <td >Rapid</td>-->
                  <!--                      <td style="text-align: left;padding-left: 20px">{{deviceList[0].Rapid}}</td>-->
                  <!--                    </tr>-->
                  <!--                  </table>-->
                </div>
              </div>
              <!-- 设备其他参数-->
              <!--              <div class="max-box" style="top: 750px">-->
              <!--                <div id="title" >设备其他参数</div>-->
              <!--                <div class="main" style="margin-left: 20px;">-->
              <!--                  <div style="display: flex;font-size: 20px">-->
              <!--                    <div style="font-weight: bolder;padding: 8px 0;text-align: center;border: 1px solid #b7b7b7;width: 50px">-->
              <!--                      序号-->
              <!--                    </div>-->
              <!--                    <div style="font-weight: bolder;padding: 8px 0;text-align: center;border: 1px solid #b7b7b7;width: 98px">-->
              <!--                      参数名称-->
              <!--                    </div>-->
              <!--                    <div style="font-weight: bolder;padding: 8px 0;text-align: center;border: 1px solid #b7b7b7;width: 90px">-->
              <!--                      参数值-->
              <!--                    </div>-->
              <!--                  </div>-->
              <!--                  <vue-seamless-scroll-->
              <!--                      ref="seamlessScroll"-->
              <!--                      :class-option="classOption"-->
              <!--                      :data="deviceList[0].OtherParameter"-->
              <!--                      style="height: 150px;overflow: hidden;font-size: 1.1rem;border: 1px solid;border-top: 0px solid;width: 245px;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>-->
            </div>
            <!--右侧设备-->
            <div :style="{display: isShow}" class="data-box data-box-hei" style="right:5px; top:5px;">
              <span class="borderLeft1 boxBorder"></span>
              <span class="borderLeft2 boxBorder"></span>
              <span class="borderRight1 boxBorder"></span>
              <span class="borderRight2 boxBorder"></span>
              <div style="width: 100%; height: 45px;">
                <div class="indicatorBlock"/>
                <div class="indicatorText">
<!--                  {{deviceList[1].Name}}-->
                  三轴加工中心
                </div>
              </div>
              <!--设备状态-->
              <div class="max-box">
                <div id="title">设备状态</div>
                <div class="main" style="margin-left: 20px;position: relative;top: -30px;height: 20px;overflow: hidden">
                  <div style="margin-left:35%;width: 50%;text-align: right;font-size: 20px;overflow: hidden;">
                    <vue-seamless-scroll
                        ref="seamlessScroll"
                        :class-option="textClassOption"
                        style="height: 130px;overflow: hidden;border-top: 0px solid;width: 345px;margin: 0 -1px;">
                      <div style="white-space: nowrap;padding-left: 100px">{{deviceList[1].Status}}</div>
                    </vue-seamless-scroll>
                  </div>
                </div>
              </div>
              <!-- 当前程序-->
              <div class="max-box" style="top: 80px">
                <div id="title">当前程序</div>
                <div class="main" style="margin-left: 20px;position: relative;top: -30px;height: 20px;overflow: hidden">
                  <div style="margin-left:35%;width: 50%;text-align: right;font-size: 20px;overflow: hidden;">
                    <vue-seamless-scroll
                        ref="seamlessScroll"
                        :class-option="textClassOption"
                        style="height: 130px;overflow: hidden;border-top: 0px solid;width: 345px;margin: 0 -1px;">
                      <div style="white-space: nowrap;padding-left: 100px">{{deviceList[1].Program}}</div>
                    </vue-seamless-scroll>
                  </div>
                </div>
              </div>
              <!--刀具名称-->
              <!--              <div class="max-box" style="top: 115px;">-->
              <!--                <div id="title">刀具名称</div>-->
              <!--                <div class="main" style="margin-left: 20px;position: relative;top: -30px;display: flex">-->
              <!--                  <div style="margin-left:35%;width: 50%;text-align: right;font-size: 20px;overflow: hidden;">-->
              <!--                    <vue-seamless-scroll-->
              <!--                        ref="seamlessScroll"-->
              <!--                        :class-option="textClassOption"-->
              <!--                        style="overflow: hidden;border-top: 0px solid;width: 345px;margin: 0 -1px;">-->
              <!--                      <div style="white-space: nowrap;padding-left: 100px">{{deviceList[1].Tool.Name}}</div>-->
              <!--                    </vue-seamless-scroll>-->
              <!--                  </div>-->
              <!--                </div>-->
              <!--              </div>-->
              <!--刀具使用时间-->
              <!--              <div class="max-box" style="top: 150px;">-->
              <!--                <div id="title">刀具时间</div>-->
              <!--                <div class="main" style="margin-left: 20px;position: relative;top: -30px;display: flex">-->
              <!--                  <div style="margin-left:35%;width: 50%;text-align: right;font-size: 20px;overflow: hidden;">-->
              <!--                    <vue-seamless-scroll-->
              <!--                        ref="seamlessScroll"-->
              <!--                        :class-option="textClassOption"-->
              <!--                        style="overflow: hidden;border-top: 0px solid;width: 345px;margin: 0 -1px;">-->
              <!--                      <div style="white-space: nowrap;padding-left: 100px">{{deviceList[1].Tool.TimeUsed}}</div>-->
              <!--                    </vue-seamless-scroll>-->
              <!--                  </div>-->
              <!--                </div>-->
              <!--              </div>-->
              <!-- 轴名 -->
              <div class="max-box" style="top: 115px">
                <div id="title">轴位置</div>
                <div class="main" style="margin-left: 20px">
                  <table>
                    <tr>
                      <td style="font-weight: bolder;font-size: 20px;width: 80px;">轴名</td>
                      <td style="font-weight: bolder;font-size: 20px;width: 150px;">坐标位置</td>
                    </tr>
                    <tr v-for="(item, index) in deviceList[1].Axis" :key="index" style="font-size: 18px">
                      <td >{{item.AxisName}}</td>
                      <td style="text-align: left;padding-left: 20px">{{item.AxisValue}}</td>
                    </tr>
                  </table>
                </div>
              </div>
              <!-- 报警信息-->
              <div class="max-box" style="top: 350px">
                <div id="title">报警信息</div>
                <div class="main" style="margin-left: 20px;">
                  <div style="display: flex;font-size: 20px">
                    <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: 180px">
                      报警内容
                    </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: 120px;overflow: hidden;font-size: 1.1rem;border: 1px solid;border-top: 0px solid;width: 243px;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: 20px;text-align: center;margin-top: 23px">无报警信息</div>
                  </vue-seamless-scroll>
                </div>
              </div>
              <div class="max-box" style="top: 550px">
                <div id="title">设备参数</div>
                <div class="main" style="margin-left: 20px">
                  <!--                  <div style="height: 150px;">-->
                  <!--                    <el-col :span="12">-->
                  <!--                      <div id="myChart6395AArrr1" style="width: 100%;height: 150px"/>-->
                  <!--                    </el-col>-->
                  <!--                    <el-col :span="12">-->
                  <!--                      <div id="myChart6395dadadsAArrr1" style="width: 100%;height: 150px"/>-->
                  <!--                    </el-col>-->
                  <!--                  </div>-->
                  <div style="height: 200px;margin-top: 20px">
                    <div id="myChart2222" style="width: 100%;height: 180px"/>
                  </div>
                  <div style="height: 200px;">
                    <div id="myChart3333" style="width: 100%;height: 180px"/>
                  </div>
                  <!--                  <table>-->
                  <!--                    <tr>-->
                  <!--                      <td style="font-weight: bolder;font-size: 20px;width: 80px;">名称</td>-->
                  <!--                      <td style="font-weight: bolder;font-size: 20px;width: 150px;">值</td>-->
                  <!--                    </tr>-->
                  <!--                    <tr style="font-size: 18px">-->
                  <!--                      <td >Feed</td>-->
                  <!--                      <td style="text-align: left;padding-left: 20px">{{deviceList[0].Feed}}</td>-->
                  <!--                    </tr>-->
                  <!--                    <tr style="font-size: 18px">-->
                  <!--                      <td >Speed</td>-->
                  <!--                      <td style="text-align: left;padding-left: 20px">{{deviceList[0].Speed}}</td>-->
                  <!--                    </tr>-->
                  <!--                    <tr style="font-size: 18px">-->
                  <!--                      <td >Rapid</td>-->
                  <!--                      <td style="text-align: left;padding-left: 20px">{{deviceList[0].Rapid}}</td>-->
                  <!--                    </tr>-->
                  <!--                  </table>-->
                </div>
              </div>
              <!-- 设备其他参数-->
              <!--              <div class="max-box" style="top: 750px">-->
              <!--                <div id="title" >设备其他参数</div>-->
              <!--                <div class="main" style="margin-left: 20px;">-->
              <!--                  <div style="display: flex;font-size: 20px">-->
              <!--                    <div style="font-weight: bolder;padding: 8px 0;text-align: center;border: 1px solid #b7b7b7;width: 50px">-->
              <!--                      序号-->
              <!--                    </div>-->
              <!--                    <div style="font-weight: bolder;padding: 8px 0;text-align: center;border: 1px solid #b7b7b7;width: 98px">-->
              <!--                      参数名称-->
              <!--                    </div>-->
              <!--                    <div style="font-weight: bolder;padding: 8px 0;text-align: center;border: 1px solid #b7b7b7;width: 90px">-->
              <!--                      参数值-->
              <!--                    </div>-->
              <!--                  </div>-->
              <!--                  <vue-seamless-scroll-->
              <!--                      ref="seamlessScroll"-->
              <!--                      :class-option="classOption"-->
              <!--                      :data="deviceList[1].OtherParameter"-->
              <!--                      style="height: 150px;overflow: hidden;font-size: 1.1rem;border: 1px solid;border-top: 0px solid;width: 245px;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>-->
            </div>
            <!--加工中心 左-->
            <div :style="{display: isShow}" class="data-box" style="left:295px; bottom:-5px;width: 835px;height: 245px">
              <span class="borderLeft1 boxBorder"></span>
              <span class="borderLeft2 boxBorder"></span>
              <span class="borderRight1 boxBorder"></span>
              <span class="borderRight2 boxBorder"></span>
              <div style="width: 100%; height: 50px;">
                <div class="indicatorBlock"/>
                <div class="indicatorText">
<!--                  {{deviceList[2].Name}}-->
                  电火花设备
                </div>
              </div>
              <!--设备状态-->
              <div class="max-box" style="top: 45px;width: 272px">
                <div id="title">设备状态</div>
                <div class="main" style="margin-left: 20px;position: relative;top: -28px;height: 20px;overflow: hidden">
                  <div style="margin-left:35%;width: 50%;text-align: right;font-size: 22px;overflow: hidden;">
                    <vue-seamless-scroll
                        ref="seamlessScroll"
                        :class-option="textClassOption"
                        style="height: 130px;overflow: hidden;font-size: 1.1rem;width: 345px;margin: 0 -1px;">
                      <div style="white-space: nowrap;padding-left: 100px">{{deviceList[2].Status+ '    '}}</div>
                    </vue-seamless-scroll>
                  </div>
                </div>
              </div>
              <!--设备参数-->
              <div class="max-box" style="top: 80px;width: 272px">
                <div id="title">设备参数</div>
                <div class="main" style="margin-left: 10px">
                  <table style="width: 96%">
                    <tr>
                      <td style="font-weight: bolder;font-size: 20px;width: 80px;">名称</td>
                      <td style="font-weight: bolder;font-size: 20px;width: 150px;">值</td>
                    </tr>
                    <tr style="font-size: 18px;height:28px">
                      <td >Feed</td>
                      <td style="text-align: left;padding-left: 20px">{{deviceList[2].Feed}}</td>
                    </tr>
                    <tr style="font-size: 18px;height:28px">
                      <td >Speed</td>
                      <td style="text-align: left;padding-left: 20px">{{deviceList[2].Speed}}</td>
                    </tr>
                    <tr style="font-size: 18px;height:28px">
                      <td >Rapid</td>
                      <td style="text-align: left;padding-left: 20px">{{deviceList[2].Rapid}}</td>
                    </tr>
                  </table>
                </div>
              </div>
              <!-- 当前程序-->
              <div class="max-box" style="top: 45px;left: 270px;width: 272px">
                <div id="title">当前程序</div>
                <div class="main" style="margin-left: 20px;position: relative;top: -28px;height: 20px;overflow: hidden">
                  <div style="margin-left:35%;width: 50%;text-align: right;font-size: 22px;overflow: hidden;">
                    <vue-seamless-scroll
                        ref="seamlessScroll"
                        :class-option="textClassOption"
                        style="height: 130px;overflow: hidden;font-size: 1.1rem;width: 345px;margin: 0 -1px;">
                      <div style="white-space: nowrap;padding-left: 100px">{{deviceList[2].Program+ '    '}}</div>
                    </vue-seamless-scroll>
                  </div>
                </div>
              </div>
              <!-- 轴名 -->
              <div class="max-box" style="top: 80px;left: 270px;width: 272px">
                <div id="title">轴位置</div>
                <div class="main" style="margin-left: 10px;width: 100%">
                  <table style="width: 96%">
                    <tr>
                      <td style="font-weight: bolder;font-size: 20px;width: 100px;">轴名</td>
                      <td style="font-weight: bolder;font-size: 20px;width: 240px;">坐标位置</td>
                    </tr>
                    <tr v-for="(item, index) in deviceList[2].Axis" :key="index" style="font-size: 18px;height:28px">
                      <td >{{item.AxisName}}</td>
                      <td style="text-align: left;padding-left: 20px">{{item.AxisValue}}</td>
                    </tr>
                  </table>
                </div>
              </div>
              <!-- 设备其他参数-->
              <div class="max-box" style="top: 45px;left: 550px;width: 272px">
                <div id="title" >设备其他参数</div>
                <div class="main" style="margin-left: 10px;width: 100%">
                  <div style="display: flex;font-size: 20px;height: 30px;line-height: 5px">
                    <div style="font-weight: bolder;padding: 12px 0;text-align: center;border: 1px solid #b7b7b7;width: 60px">
                      序号
                    </div>
                    <div style="font-weight: bolder;padding: 12px 0;text-align: center;border: 1px solid #b7b7b7;width: 152px">
                      参数名称
                    </div>
                    <div style="font-weight: bolder;padding: 12px 0;text-align: center;border: 1px solid #b7b7b7;width: 130px">
                      参数值
                    </div>
                  </div>
                  <vue-seamless-scroll
                      ref="seamlessScroll"
                      :class-option="classOption2"
                      :data="deviceList[2].OtherParameter"
                      style="height: 125px;overflow: hidden">
                    <div v-for="(item, index) in deviceList[2].OtherParameter" :key="index" style="display: flex">
                      <div style="width: 45.6px;padding: 5px 0;text-align: center;border: 1px solid #b7b7b7" v-text="index +1"></div>
                      <div style="width: 120px;padding: 5px 0;text-align: center;border: 1px solid #b7b7b7;word-wrap: break-word" v-text="item.ParameterName"></div>
                      <div style="width: 103.11px;padding: 5px 0;text-align: center;border: 1px solid #b7b7b7;word-wrap: break-word" v-text="item.ParameterValue"></div>
                    </div>
                  </vue-seamless-scroll>
                </div>
              </div>
            </div>
            <!--加工中心 右 机器人-->
            <div :style="{display: isShow}" class="data-box" style="left:1140px; bottom:-5px;width: 243px;height: 245px">
              <span class="borderLeft1 boxBorder"></span>
              <span class="borderRight1 boxBorder"></span>
              <div style="width: 100%; height: 50px;">
                <div class="indicatorBlock"/>
                <div class="indicatorText">
<!--                  {{deviceList[3].Name}}-->
                  机器人
                </div>
              </div>
              <!-- 轴名 -->
              <div class="max-box" style="top: 45px;width: 240px">
                <div id="title">轴位置</div>
                <div class="main" style="margin-left: 10px;width: 100%">
                  <div style="display: flex;font-size: 20px;font-weight: bolder;height: 30px;line-height: 5px">
                    <div style="padding: 12px 0;text-align: center;border: 1px solid #b7b7b7;width: 90px">
                      轴名
                    </div>
                    <div style="padding: 12px 0;text-align: center;border: 1px solid #b7b7b7;width: 130px">
                      轴值
                    </div>
                  </div>
                  <vue-seamless-scroll
                      ref="seamlessScroll"
                      :class-option="classOption2"
                      :data="deviceList[3].Axis"
                      style="height: 125px;overflow: hidden">
                    <div v-for="(item, index) in deviceList[3].Axis" :key="index" style="display: flex">
                      <div style="width: 90px;padding: 5px 0;text-align: center;border: 1px solid #b7b7b7;word-wrap: break-word" v-text="item.AxisName"></div>
                      <div style="width: 130px;padding: 5px 0;text-align: center;border: 1px solid #b7b7b7;word-wrap: break-word" v-text="item.AxisValue"></div>
                    </div>
                  </vue-seamless-scroll>
                </div>
              </div>
            </div>
            <!--加工中心 右 CMM三坐标-->
            <div :style="{display: isShow}" class="data-box" style="left:1380px; bottom:-5px;width: 243px;height: 245px">
              <span class="borderLeft2 boxBorder"></span>
              <span class="borderRight2 boxBorder"></span>
              <div style="width: 100%; height: 50px;">
                <div class="indicatorBlock"/>
                <div class="indicatorText">
<!--                  {{deviceList[4].Name}}-->
                  三坐标测量设备
                </div>
              </div>
              <!--设备状态-->
              <div class="max-box" style="top: 45px;left: 0px;width: 240px">
                <div id="title">设备状态</div>
                <div class="main" style="margin-left: 20px;position: relative;top: -28px;height: 20px;overflow: hidden">
                  <div style="margin-left:35%;width: 50%;text-align: right;font-size: 22px;overflow: hidden;">
                    <vue-seamless-scroll
                        ref="seamlessScroll"
                        :class-option="textClassOption"
                        style="height: 130px;overflow: hidden;font-size: 1.1rem;width: 345px;margin: 0 -1px;">
                      <div style="white-space: nowrap;padding-left: 100px">{{deviceList[4].Status+ '    '}}</div>
                    </vue-seamless-scroll>
                  </div>
                </div>
              </div>
              <!-- 轴名 -->
              <div class="max-box" style="top: 80px;left: 0px;width: 240px">
                <div id="title">轴位置</div>
                <div class="main" style="margin-left: 10px;width: 100%">
                  <table style="width: 96%">
                    <tr>
                      <td style="font-weight: bolder;font-size: 20px;width: 80px;">轴名</td>
                      <td style="font-weight: bolder;font-size: 20px;width: 155px;">坐标位置</td>
                    </tr>
                    <tr v-for="(item, index) in deviceList[4].Axis" :key="index" style="font-size: 18px;height:28px">
                      <td >{{item.AxisName}}</td>
                      <td style="text-align: left;padding-left: 20px">{{item.AxisValue}}</td>
                    </tr>
                  </table>
                </div>
              </div>
            </div>
            <!--复原按钮-->
            <div style="position: absolute;left:290px; top:10px;width: 100px;height: 30px">
              <el-button size="mini" style="background: #103666;color: white;border: 1px solid #103666;" @click="showRemoteControl">远程控制</el-button>
            </div>
            <div  style="position: absolute;left:390px; top:10px;width: 100px;height: 30px" @mouseover="isShowBtn='inline'" @mouseleave="isShowBtn='none'">
              <div :style="{display: isShowBtn}">
                <el-button size="mini" style="background: #103666;color: white;border: 1px solid #103666;" @click="restView">复原</el-button>
              </div>
            </div>
        </div>
    </el-row>
    <el-dialog :visible.sync="dialogFormVisible_remoteControl" title="远程控制" center width="500px">
      <div style="text-align: center;margin: 0 0 10px 0;font-size:20px;font-weight: bolder">
        请确认产线设备处于正确状态，确保安全！
      </div>
      <el-form ref="form" label-width="120px">
        <el-form-item label="机器人">
          <el-button type="danger" size="small" @click="confirmRemoteControl_stopMachine('robot')">急停控制</el-button>
        </el-form-item>
        <el-form-item label="CMM三坐标">
          <el-button type="danger" size="small" @click="confirmRemoteControl_stopMachine('cmm')">急停控制</el-button>
        </el-form-item>
        <el-form-item label="FORM P450">
          <el-button type="danger" size="small" @click="confirmRemoteControl_stopMachine('form')">急停控制</el-button>
        </el-form-item>
        <el-form-item label="HSM500">
          <el-button type="danger" size="small" @click="confirmRemoteControl_stopMachine('hsm500')">急停控制</el-button>
          <el-divider direction="vertical"></el-divider>
          <el-button type="primary" size="small" @click="confirmRemoteControl_machineDoor('HSM500', 'open')">远程开门</el-button>
          <el-button type="warning" size="small" @click="confirmRemoteControl_machineDoor('HSM500', 'close')">远程关门</el-button>
        </el-form-item>
        <el-form-item label="线内MILL700">
          <el-button type="danger" size="small" @click="confirmRemoteControl_stopMachine('mill700a')">急停控制</el-button>
          <el-divider direction="vertical"></el-divider>
          <el-button type="primary" size="small" @click="confirmRemoteControl_machineDoor('MILL700_A', 'open')">远程开门</el-button>
          <el-button type="warning" size="small" @click="confirmRemoteControl_machineDoor('MILL700_A', 'close')">远程关门</el-button>
        </el-form-item>
        <el-form-item label="清洗设备">
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&ensp;
          <el-button type="primary" size="small" @click="confirmRemoteControl_machineDoor('CleaningMachine', 'open')">远程开门</el-button>
          <el-button type="warning" size="small" @click="confirmRemoteControl_machineDoor('CleaningMachine', 'close')">远程关门</el-button>
        </el-form-item>
        <el-form-item label="料架(上料台)">
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&ensp;
          <el-button type="primary" size="small" @click="confirmRemoteControl_machineDoor('UpLoadMachine', 'open')">远程开门</el-button>
          <el-button type="warning" size="small" @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'
const dashboard1 = null
const dashboard2 = null
const dashboard3 = null
const dashboard4 = null
let myChart6395AArrr1 = null
let myChart6395dadadsAArrr1 = null
let myChart2222 = null
let myChart3333 = 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,
      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,
      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'
      },
      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': '2', // 设备ID
          'Status': '', // 设备运行状态 需要明确有几个状态，具体的值
          'Program': '', // 设备运行的程序名称
          'ProgramStatus': '', // 设备运行的程序状态 需要明确有几个状态，具体的值
          'Feed': '0', // 设备进给速度 确认下单位
          'Speed': '0', // 设备主轴转速  确认下单位
          'Rapid': '0', // 设备移动速度 确认下单位  应该是  和高明确认下这个的含义
          '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': [],
          'robotDataList': []
        },
        // 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
      }
    }
  },
  created() {
    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()

    setInterval(()=>{
      this.init()
    },1000)

    // setTimeout(()=> {
    //   console.log(111111111111)
    //   this.deviceList[0].Speed = '44 %'
    //   // this.init()
    // },2000)
    // 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: {
    showRemoteControl() {
      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'))
      myChart6395AArrr1 = echarts.init(document.getElementById('myChart6395AArrr1'))
      myChart6395dadadsAArrr1 = echarts.init(document.getElementById('myChart6395dadadsAArrr1'))
      myChart2222 = echarts.init(document.getElementById('myChart2222'))
      myChart3333 = echarts.init(document.getElementById('myChart3333'))
      // 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.drawLine501()
      this.drawLine502()
      // this.searchTable()
      // this.searchChartData1()
    },
    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","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":"?????","AlarmTime":"2023-06-08 09:12:39 851"}]}]' })
      //   // this.websocketonmessage({ data: 'DT|C_B_DeviceInfo|[{"Name":"FORM","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"}],"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","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"}]}]' })
      //   this.websocketonmessage({ data: 'DT|C_B_DeviceInfo|[{"Name":"TNC530","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","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.Name)
                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) {
                    // console.log('有匹配上的数据')
                    // 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
                    this.drawLine501()
                    this.drawLine502()
                    break
                  }
                }
              }
              break
            }
          }
          break
      }
    },
    // OEE图形
    drawLine501() {
      myChart6395AArrr1.setOption(
        {
          tooltip: {
            formatter: '{a} <br/>{c} {b}'
          },
          series: [
            {
              center: ['50%', '55%'],
              name: '进给倍率',
              type: 'gauge',
              min: 0,
              max: 150,
              startAngle: 200,
              endAngle: -20,
              splitNumber: 6,
              radius: '110%',
              axisLine: { // 坐标轴线
                lineStyle: { // 属性lineStyle控制线条样式
                  color: [[0.20, '#ff4500'], [0.80, '#27d500'], [1, '#ff4500']],
                  width: 3
                }
              },
              axisLabel: { // 坐标轴小标记
                textStyle: { // 属性lineStyle控制线条样式
                  fontWeight: 'bolder',
                  color: '#fff',
                  shadowColor: '#fff', // 默认透明
                  shadowBlur: 1
                }
              },
              axisTick: { // 坐标轴小标记
                length: 5, // 属性length控制线长
                lineStyle: { // 属性lineStyle控制线条样式
                  color: 'auto',
                  shadowColor: '#fff', // 默认透���
                  shadowBlur: 1
                }
              },
              splitLine: { // 分隔线
                length: 10, // 属性length控制线长
                lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
                  width: 1,
                  color: '#fff',
                  shadowColor: '#fff', // 默认透明
                  shadowBlur: 1
                }
              },
              title: {
                textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                  fontWeight: 'bolder',
                  fontSize: 16,
                  color: '#fff',
                  shadowColor: '#fff', // 默认透明
                  shadowBlur: 5
                },
                offsetCenter: [0, '40%']
              },
              detail: {
                formatter: Number(this.deviceList[0].Feed.replace(' %','')) + '%',
                shadowBlur: 3,
                offsetCenter: [0, '70%'], // x, y，单位px
                textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                  fontWeight: 'bolder',
                  color: '#fff',
                  fontSize: 18
                }
              },
              data: [{ name: '进给倍率', value: Number(this.deviceList[0].Feed.replace(' %','')) }]
            }
          ]
        }
      )
      myChart6395dadadsAArrr1.setOption(
        {
          tooltip: {
            formatter: '{a} <br/>{c} {b}%'
          },
          series: [
            {
              center: ['50%', '55%'],
              name: '主轴倍率',
              type: 'gauge',
              min: 0,
              max: 150,
              startAngle: 200,
              endAngle: -20,
              splitNumber: 6,
              radius: '110%',
              axisLine: { // 坐标轴线
                lineStyle: { // 属性lineStyle控制线条样式
                  color: [[0.20, '#ff4500'], [0.80, '#27d500'], [1, '#ff4500']],
                  width: 3
                }
              },
              axisLabel: { // 坐标轴小标记
                textStyle: { // 属性lineStyle控制线条样式
                  fontWeight: 'bolder',
                  color: '#fff',
                  shadowColor: '#fff', // 默认透明
                  shadowBlur: 1
                }
              },
              axisTick: { // 坐标轴小标记
                length: 5, // 属性length控制线长
                lineStyle: { // 属性lineStyle控制线条样式
                  color: 'auto',
                  shadowColor: '#fff', // 默认透���
                  shadowBlur: 1
                }
              },
              splitLine: { // 分隔线
                length: 10, // 属性length控制线长
                lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
                  width: 1,
                  color: '#fff',
                  shadowColor: '#fff', // 默认透明
                  shadowBlur: 1
                }
              },
              title: {
                textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                  fontWeight: 'bolder',
                  fontSize: 16,
                  color: '#fff',
                  shadowColor: '#fff', // 默认透明
                  shadowBlur: 5
                },
                offsetCenter: [0, '40%']
              },
              detail: {
                formatter: Number(this.deviceList[0].Speed.replace(' %','')) + '%',
                shadowBlur: 3,
                offsetCenter: [0, '70%'], // x, y，单位px
                textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                  fontWeight: 'bolder',
                  color: '#fff',
                  fontSize: 18
                }
              },
              data: [{ name: '主轴倍率', value: Number(this.deviceList[0].Speed.replace(' %','')) }]
            }
          ]
        }
      )
    },
    // OEE图形
    drawLine502() {
      myChart2222.setOption(
        {
          tooltip: {
            formatter: '{a} <br/>{c} {b}'
          },
          series: [
            {
              center: ['50%', '55%'],
              name: '进给倍率',
              type: 'gauge',
              min: 0,
              max: 150,
              startAngle: 200,
              endAngle: -20,
              splitNumber: 6,
              radius: '110%',
              axisLine: { // 坐标轴线
                lineStyle: { // 属性lineStyle控制线条样式
                  color: [[0.20, '#ff4500'], [0.80, '#27d500'], [1, '#ff4500']],
                  width: 3
                }
              },
              axisLabel: { // 坐标轴小标记
                textStyle: { // 属性lineStyle控制线条样式
                  fontWeight: 'bolder',
                  color: '#fff',
                  shadowColor: '#fff', // 默认透明
                  shadowBlur: 1
                }
              },
              axisTick: { // 坐标轴小标记
                length: 5, // 属性length控制线长
                lineStyle: { // 属性lineStyle控制线条样式
                  color: 'auto',
                  shadowColor: '#fff', // 默认透���
                  shadowBlur: 1
                }
              },
              splitLine: { // 分隔线
                length: 10, // 属性length控制线长
                lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
                  width: 1,
                  color: '#fff',
                  shadowColor: '#fff', // 默认透明
                  shadowBlur: 1
                }
              },
              title: {
                textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                  fontWeight: 'bolder',
                  fontSize: 16,
                  color: '#fff',
                  shadowColor: '#fff', // 默认透明
                  shadowBlur: 5
                },
                offsetCenter: [0, '40%']
              },
              detail: {
                formatter: Number(this.deviceList[1].Feed.replace(' %','')) + '%',
                shadowBlur: 3,
                offsetCenter: [0, '70%'], // x, y，单位px
                textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                  fontWeight: 'bolder',
                  color: '#fff',
                  fontSize: 18
                }
              },
              data: [{ name: '进给倍率', value: Number(this.deviceList[1].Feed.replace(' %','')) }]
            }
          ]
        }
      )
      myChart3333.setOption(
        {
          tooltip: {
            formatter: '{a} <br/>{c} {b}%'
          },
          series: [
            {
              center: ['50%', '55%'],
              name: '主轴倍率',
              type: 'gauge',
              min: 0,
              max: 150,
              startAngle: 200,
              endAngle: -20,
              splitNumber: 6,
              radius: '110%',
              axisLine: { // 坐标轴线
                lineStyle: { // 属性lineStyle控制线条样式
                  color: [[0.20, '#ff4500'], [0.80, '#27d500'], [1, '#ff4500']],
                  width: 3
                }
              },
              axisLabel: { // 坐标轴小标记
                textStyle: { // 属性lineStyle控制线条样式
                  fontWeight: 'bolder',
                  color: '#fff',
                  shadowColor: '#fff', // 默认透明
                  shadowBlur: 1
                }
              },
              axisTick: { // 坐标轴小标记
                length: 5, // 属性length控制线长
                lineStyle: { // 属性lineStyle控制线条样式
                  color: 'auto',
                  shadowColor: '#fff', // 默认透���
                  shadowBlur: 1
                }
              },
              splitLine: { // 分隔线
                length: 10, // 属性length控制线长
                lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
                  width: 1,
                  color: '#fff',
                  shadowColor: '#fff', // 默认透明
                  shadowBlur: 1
                }
              },
              title: {
                textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                  fontWeight: 'bolder',
                  fontSize: 14,
                  color: '#fff',
                  shadowColor: '#fff', // 默认透明
                  shadowBlur: 5
                },
                offsetCenter: [0, '40%']
              },
              detail: {
                formatter: Number(this.deviceList[1].Speed.replace(' %','')) + '%',
                shadowBlur: 3,
                offsetCenter: [0, '70%'], // x, y，单位px
                textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                  fontWeight: 'bolder',
                  color: '#fff',
                  fontSize: 16
                }
              },
              data: [{ name: '主轴倍率', value: Number(this.deviceList[1].Speed.replace(' %','')) }]
            }
          ]
        }
      )
    },
    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
    },
    // 查询开机率
    searchChartData1() {
      const param1 = []
      const 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()
      })
    },
    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)
    },
    callOff1() {
      this.dialogFormVisible1 = false
    },
    getLogo() {
      axios.get('../../logo.png', {
        responseType: 'arraybuffer'
      }).then(res => {
        this.titlePng = 'data:image/jpeg;base64,' + btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))
      })
      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");
}
/* 标题部分 */
#title {
  font-family: title-font;
  font-size: 15px;
  width: 90%;
  height: 30px;
  line-height: 30px;
  margin: 5px 4%;
  padding-left: 20px;
  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;
}
.max-box{
  position: absolute;
  width: 100%;
}
/** 动画进行时的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;
  width: 1920px;
  height: 1080px;
  overflow: hidden;
  position: relative;
  font-family: MiSans Bold, serif;
}
/*css主要部分的样式*/
/*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
  width: 5px; /*对垂直流动条有效*/
  height: 5px; /*对水平流动条有效*/
}

/*定义滚动条的轨道颜色、内阴影及圆角*/
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
  background-color: 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{
  width:1920px;
  height: 1080px;
  background-color: rgb(8, 31, 72);
  color: white;
  background-size: 100%;
}
.data-box {
  position: absolute;
  width: 280px;
  height: 315px;
  /*-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: 980px;
}

.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>
