<template>
<!--  <div class="background">-->
<!--    &lt;!&ndash;顶部&ndash;&gt;-->
<!--    <el-row style="box-shadow: inset 0 0 30px rgb(24, 78, 135);" >-->
<!--      <div style="height: 80px; width: 1918px;" >-->
<!--        <el-col :span="5">-->
<!--          <div style="font-size: 1.5rem;margin-top: 10px;margin-left: 40px">-->
<!--            <el-col :span="7">-->
<!--              &lt;!&ndash;左上角logo&ndash;&gt;-->
<!--              <img style="height: 60px;cursor: pointer" :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: 15px">-->
<!--            <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">-->
<!--&lt;!&ndash;                右上角logo&ndash;&gt;-->
<!--&lt;!&ndash;              <img style="height: 50px;margin-top: 5px" :src="titlePng1"/>&ndash;&gt;-->
<!--            </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;">-->
<!--            &lt;!&ndash;外层组件&ndash;&gt;-->
<!--            &lt;!&ndash;WEBGL渲染位置&ndash;&gt;-->
<!--            <div style="height: 100%; width: 100%;position: absolute;">-->
<!--              <div style="width: 100%;height:980px;filter:blur(10);z-index: 999;">-->
<!--                <d-m-t ref="dmtCom" v-on:changeCameraState="changeCameraState" containerHeight="980px" containerWidth="1160px" style="position:absolute;left:380px" />-->
<!--              </div>-->
<!--            </div>-->
<!--            &lt;!&ndash;复原按钮&ndash;&gt;-->
<!--            <div  style="position: absolute;left:390px; top:10px;width: 200px;height: 30px" @mouseover="isShowBtn='inline'" @mouseleave="isShowBtn='none'">-->
<!--              <div :style="{display: isShowBtn}">-->
<!--                <el-button size="mini" style="background: #103666;color: white;border: 1px solid #103666;" @click="restView">复原</el-button>-->
<!--              </div>-->
<!--            </div>-->
<!--        </div>-->
<!--    </el-row>-->
<!--  </div>-->
  <div id="body" ng-app="myApp" ng-controller="customersCtrl" :style="{ 'width': `${style.width}px`, 'height': `${style.height}px`, 'transform': `${style.transform}` }">
    <!-- banner start -->
    <div class="banner-caption clearfix">
      <div id="title">
        <img style="height: 60px;margin-top: 5px;float: left;margin: 20px" :src="titlePng1"/>
        <img style="height: 60px;margin-top: 5px;float: right;margin: 20px" :src="titlePng2"/>
        <div class="caption-title clearfix">
          <i class="title-left"><img :src="titleLeftPng"></i>
          <p class="title-left-title-font">数字孪生智能制造工厂平台</p>
          <i class="title-left"><img :src="titleRightPng"></i>
        </div>
        <div class="title-date" style="height: 30px;position: relative;top: -30px">
          <p id="DateTime" style="height: 40px;text-align: center;">实时数据</p>
        </div>
      </div>
      <div id="main">
        <div class="col-md-12">
          <div class="row">
            <!--左侧开始-->
            <div class="col-xs-12 col-sm-12 col-md-5" >
                <div class="data-box1 box1-back" id="box02" style="height: 939px;width: 870px">
                  <i class="topL"></i>
                  <i class="topR"></i>
                  <i class="bottomL"></i>
                  <i class="bottomR"></i>
                  <div class="data-title">
                    <b class="data-title-left"></b>
                    <span></span>
                    <b class="data-title-right"></b>
                  </div>
                  <div>
                    <div style="width: 865px;height:985px;filter:blur(10);z-index: 999;">
                      <d-m-t ref="dmtCom" v-on:changeCameraState="changeCameraState" containerHeight="933px" containerWidth="865px" style="position:absolute;top: 0px" />
                    </div>
                  </div>
                </div>
            </div>
            <!--右侧开始-->
            <div id="title01" class="col-xs-12 col-sm-12 col-md-7" style="height: 935px;left: 80px">
              <transition-group name="zoom" mode="out-in" style="position: relative" widt appear>
                <!--上部分 轮播图表-->
                <div class="CutBox data-box1" v-show="CutIndex == 1" key="view1">
                  <!--质量管理-->
                  <div class=" clearfix col-md-6" id="box01" style="height: 100%!important">
                    <i class="topL"></i>
                    <!--<i class="topR"></i>-->
                    <i class="bottomL"></i>
                    <!--<i class="bottomR"></i>-->
                    <div class="data-title" style="width: 140px">
                      <b class="data-title-left">[</b>
                      <span>质量管理</span>
                      <b class="data-title-right">]</b>
                    </div>
                    <div class="total-mn" id="total-mn1" style="display: none">
                      <span>SPC分析</span>
                    </div>
                    <div id="box1_top" style="height: 250px!important;">
                      <ul class="ym-menu1" id="ym-menu">
                        <li class="ym-active1">
                          <a>SPC控制图</a>
                        </li>
                        <li class="taba1">
                          <a>工序能力分析</a>
                        </li>
                        <li class="taba1">
                          <a>均值极差图</a>
                        </li>
                      </ul>
                      <div id="box2" class="box-echart box-bottom tabcontent1" style="height: 310px!important;top: 10px;width: 428px">
                      </div>
                      <div id="box4" class="box-echart box-bottom tabcontent1" style="height: 310px!important;top: 20px;display: none;width: 428px">
                      </div>
                      <div id="box6" class="box-echart box-bottom tabcontent1" style="height: 310px!important;top: 30px;display: none;width: 428px">
                      </div>
                    </div>
                  </div>
                  <!--生产看板显示-->
                  <div class="col-md-6" id="box8-box" style="height: 100%;">
                    <!--<i class="topL"></i>-->
                    <i class="topR"></i>
                    <!--<i class="bottomL"></i>-->
                    <i class="bottomR"></i>
                    <div class="data-title">
                      <b class="data-title-left">[</b>
                      <span>生产看板显示</span>
                      <b class="data-title-right">]</b>
                    </div>
                    <div id="box8" class="box-echart" style="display:none">
                    </div>
                    <div id="look" style="background-color: #000c3b;width: 97%;margin: auto;color: #38b3f1">
                      <div class="container-fluid" style="border: 1px solid #38b3f1;margin-top: 60px;height:210px">
                        <div class="row">
                          <span id="mytime"></span>
                        </div>
                        <div class="row" style="border-bottom: 1px solid #38b3f1">
                          <div class="col-lg-4 col-xs-4" style="border-right: 1px solid #38b3f1">
                            <span style="line-height: 41px">月计划产量</span>
                          </div>
                          <div class="col-lg-3 col-xs-3" style="border-right: 1px solid #38b3f1">
                            <span style="line-height: 41px">17780</span>
                          </div>
                          <div class="col-lg-3 col-xs-3">
                            <span>月实际产量</span>
                          </div>
                          <div class="col-lg-2 col-xs-2" style="border-left: 1px solid #38b3f1">
                            <span style="line-height: 41px">8299</span>
                          </div>
                        </div>
                        <div class="row" style="border-bottom: 1px solid #38b3f1">
                          <div class="col-lg-4 col-xs-4" style="border-right: 1px solid #38b3f1">
                            <span style="line-height: 41px">今日加工机型</span>
                          </div>
                          <div class="col-lg-3 col-xs-3">
                            <span>KPA：90</span><br>
                            <span>KE：800</span>
                          </div>
                          <div class="col-lg-3 col-xs-3" style="border-left: 1px solid #38b3f1;border-right: 1px solid #38b3f1">
                            <span style="line-height: 41px">班产量</span>
                          </div>
                          <div class="col-lg-2 col-xs-2" >
                            <span>345</span><br>
                            <span>345</span>
                          </div>
                        </div>
                        <div class="row">
                          <div class="col-lg-2 col-xs-2" style="padding: 20px 7px">
                            <div style="margin: 5px;background-color: #fc0000;color: #ffffff;text-align: center">
                              <span>OP10</span>
                              <span>故障</span>
                            </div>
                          </div>
                          <div class="col-lg-2 col-xs-2" style="padding: 20px 7px">
                            <div style="margin: 5px;background-color: #fc0000;color: #ffffff;text-align: center">
                              <span>OP20</span>
                              <span>故障</span>
                            </div>
                          </div>
                          <div class="col-lg-2 col-xs-2" style="padding: 20px 7px">
                            <div style="margin: 5px;background-color: #ffd100;color: #333333;text-align: center">
                              <span>OP30</span>
                              <span>缺料</span>
                            </div>
                          </div>
                          <div class="col-lg-2 col-xs-2" style="padding: 20px 7px">
                            <div style="margin: 5px;background-color: #ffd100;color: #333333;text-align: center">
                              <span>OP40</span>
                              <span>缺料</span>
                            </div>
                          </div>
                          <div class="col-lg-2 col-xs-2" style="padding: 20px 7px">
                            <div style="margin: 5px;background-color: #ffd100;color: #333333;text-align: center">
                              <span>OP50</span>
                              <span>缺料</span>
                            </div>
                          </div>
                          <div class="col-lg-2 col-xs-2" style="padding: 20px 7px">
                            <div style="margin: 5px;background-color: #fc0000;color: #ffffff;text-align: center">
                              <span>OP60</span>
                              <span>故障</span>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <!--上二-->
                <div class="CutBox data-box1" v-show="CutIndex == 2" key="view2">
                  <!--本月产量及生产计划-->
                  <div class=" col-md-6" id="box04" style="height: 100%;">
                    <i class="topL"></i>
                    <!--<i class="topR"></i>-->
                    <i class="bottomL"></i>
                    <!--<i class="bottomR"></i>-->
                    <div class="data-title" style="width: 238px">
                      <b class="data-title-left">[</b>
                      <span>本月产量及生产计划</span>
                      <b class="data-title-right">]</b>
                    </div>
                    <div style="height: 310px;width: 450px;margin-top: 20px" id="box5" class="box-echart">
                    </div>
                  </div>
                  <!--设备管理-->
                  <div class=" col-md-6" style="height: 100%;">
                    <!--<i class="topL"></i>-->
                    <i class="topR"></i>
                    <!--<i class="bottomL"></i>-->
                    <i class="bottomR"></i>
                    <div class="data-title" style="width: 140px">
                      <b class="data-title-left">[</b>
                      <span>设备管理</span>
                      <b class="data-title-right">]</b>
                    </div>
                    <div class="total-mn" id="total-mn2">
                      <br />
                      <br />
                      <br />
                      <ul class="machinery ym-menu clearfix" id="ym-menu" style="margin-top: -15px">
                        <li class="ym-active">
                          <a>刀具管理</a>
                        </li>
                        <li class="taba">
                          <a>机床数据</a>
                        </li>
                      </ul>
                    </div>
                    <div id="box1_bottom" class="tabcontent" style="margin-top:20px">
                      <table class="tool" style="margin: 0 auto">
                        <tr>
                          <th class="tg-lfnm">刀具名称</th>
                          <th class="tg-lfnm">刀具状态</th>
                          <th class="tg-lfnm">规格</th>
                          <th class="tg-lfnm">累计加工</th>
                          <th class="tg-lfnm">剩余寿命</th>
                        </tr>
                        <tr>
                          <td class="tg-lfnm">外圆车刀</td>
                          <td class="tg-tr94">良好</td>
                          <td class="tg-tr94">5</td>
                          <td class="tg-tr94">12265</td>
                          <td class="tg-tr94">32445</td>
                        </tr>
                        <tr>
                          <td class="tg-lfnm">螺纹刀</td>
                          <td class="tg-tr94">良好</td>
                          <td class="tg-tr94">2</td>
                          <td class="tg-tr94">45435</td>
                          <td class="tg-tr94">74646</td>
                        </tr>
                        <tr>
                          <td class="tg-lfnm">左右偏刀</td>
                          <td class="tg-tr94">良好</td>
                          <td class="tg-tr94">1</td>
                          <td class="tg-tr94">22122</td>
                          <td class="tg-tr94">46431</td>
                        </tr>
                        <tr>
                          <td class="tg-sh07">内圆刀</td>
                          <td class="tg-v8f3">极限</td>
                          <td class="tg-v8f3">3</td>
                          <td class="tg-v8f3">11231</td>
                          <td class="tg-v8f3">13411</td>
                        </tr>
                      </table>
                    </div>
                    <div id="box1_bottom_none" class="box-echart tabcontent" style="display: none;">
                      <table id="machineryData">
                        <tr>
                          <td>X轴坐标</td>
                          <td><span id="text1"/></td>
                          <td>Y轴坐标</td>
                          <td><span id="text2"/></td>
                          <td>Z轴坐标</td>
                          <td><span id="text3"/></td>
                        </tr>
                        <tr>
                        </tr>
                        <tr>
                          <td>进给速率</td>
                          <td><span id="text4"/></td>
                          <td>单位/分钟</td>
                          <td><span id="text5"/></td>
                          <td>单位/转</td>
                          <td><span id="text6"/></td>
                        </tr>
                        <tr>
                          <td>SRO%</td>
                          <td><span id="text7"/></td>
                          <td>主轴修调</td>
                          <td><span id="text8"/></td>
                          <td>主轴速度</td>
                          <td><span id="text9"/></td>
                        </tr>
                      </table>
                    </div>
                    <ul class="live-box" id="live-box">
                    </ul>
                  </div>
                </div>
                <!--上三-->
                <div class="CutBox" v-show="CutIndex == 3" key="view3">
                  <!--订单执行进度情况-->
                  <div class="data-box1" style="height: 100%" id="box9-box">
                    <i class="topL"></i>
                    <i class="topR"></i>
                    <i class="bottomL"></i>
                    <i class="bottomR"></i>
                    <div class="data-title" style="width: 227px">
                      <b class="data-title-left">[</b>
                      <span>订单执行进度情况</span>
                      <b class="data-title-right">]</b>
                    </div>
                    <div id="box9" class="box9-1">
                      <table class="panel-table">
                        <thead class="fixedThead">
                        <tr>
                          <th v-for="x in listHead">{{ x.categories }}</th>
                        </tr>
                        </thead>
                        <tbody class="scrollTbody" id="panel-table">
                        <tr v-for="y in listContent">
                          <td>{{ y.categories }}</td>
                          <td>{{ y.data1 }}</td>
                          <td>{{ y.data2 }}</td>
                          <td>{{ y.data3 }}</td>
                          <td>{{ y.data4 }}</td>
                          <td>{{ y.data5 }}</td>
                          <td>{{ y.data6 }}</td>
                        </tr>
                        </tbody>
                      </table>
                    </div>
                  </div>
                </div>
                <!--上四-->
                <div class="CutBox"  v-show="CutIndex == 4" key="view4">
                  <!--OEE分析-->
                  <div class="data-box1" id="box03" style="height: 358px">-->
                    <i class="topL"></i>
                    <i class="topR"></i>
                    <i class="bottomL"></i>
                    <i class="bottomR"></i>
                    <div class="data-title" style="width: 138px;position: relative;top: -13px">
                      <b class="data-title-left">[</b>
                      <span>OEE分析</span>
                      <b class="data-title-right">]</b>
                    </div>

                    <!-- <ul class="oee ym-menu clearfix" id="ym-menu">
                        <li class="ym-active">
                          <a href="">本年</a>
                        </li>
                        <li class="taba">
                          <a href="">本月</a>
                        </li>
                      </ul> -->
                    <!-- 隐藏的属性了******** -->
                    <div id="box3" class="box-echart tabcontent" style="display: none;width: 310px">
                    </div>
                    <div id="boxes3" class="box-echart tabcontent" style="display: none">
                    </div>
                    <!-- ******************* -->
                    <div id="allcharts">
                      <div class="charts-container">
                        <div style="width: 678px;height: 360px" class="appearance" id="chart1"></div>
                        <div style="width: 678px;height: 360px" class="appearance" id="chart2"></div>
                        <div style="width: 678px;height: 360px" class="appearance" id="chart3"></div>
                        <div style="width: 678px;height: 360px" class="appearance" id="chart4"></div>
                      </div>
                      <div class="charts-container" style="display: none">
                        <div style="width: 678px;height: 360px" class="appearance" id="chart5"></div>
                        <div style="width: 678px;height: 360px" class="appearance" id="chart6"></div>
                        <div style="width: 678px;height: 360px" class="appearance" id="chart7"></div>
                        <div style="width: 678px;height: 360px" class="appearance" id="chart8"></div>
                      </div>
                      <div class="charts-container" style="display: none">
                        <div style="width: 678px;height: 360px" class="appearance" id="chart9"></div>
                        <div style="width: 678px;height: 360px" class="appearance" id="chart10"></div>
                        <div style="width: 678px;height: 360px" class="appearance" id="chart11"></div>
                        <div style="width: 678px;height: 360px" class="appearance" id="chart12"></div>
                      </div>
                    </div>
                    <div id="OEEData">
                      <div class="chartOeeData">
                        <div class="chartData1">88%</div>
                        <div class="chartData2">90%</div>
                        <div class="chartData3">88%</div>
                        <div class="chartData4">92%</div>
                      </div>
                      <div class="chartOeeData" style="display: none">
                        <div class="chartData1">82%</div>
                        <div class="chartData2">92%</div>
                        <div class="chartData3">82%</div>
                        <div class="chartData4">93%</div>
                      </div>
                      <div class="chartOeeData" style="display: none">
                        <div class="chartData1">88%</div>
                        <div class="chartData2">94%</div>
                        <div class="chartData3">88%</div>
                        <div class="chartData4">89%</div>
                      </div>
                    </div>
                    <div class="table-container">
                      <table class="tg" style="margin: 0 auto;display: inline-block;opacity: 1;">
                        <tr>
                          <th class="tg-heq1" colspan="3">发动机装配线</th>
                        </tr>
                        <tr>
                          <td class="tg-gfc8" colspan="3">OEE:88%</td>
                        </tr>
                        <tr>
                          <td class="tg-gfc8" style="padding-top:10px;padding-bottom:10px">RF<br>100%</td>
                          <td class="tg-gfc8" style="padding-top:10px;padding-bottom:10px">RV<br>88%</td>
                          <td class="tg-gfc8" style="padding-top:10px;padding-bottom:10px">RQ<br>100%</td>
                        </tr>
                      </table>
                      <table class="tg" style="margin: 0 auto;display: inline-block;opacity: 0.5;">
                        <tr>
                          <th class="tg-b22m" colspan="3">活塞连杆装配线</th>
                        </tr>
                        <tr>
                          <td class="tg-6tv8" colspan="3">OEE:82%</td>
                        </tr>
                        <tr>
                          <td class="tg-gfc8" style="padding-top:10px;padding-bottom:10px">RF<br>100%</td>
                          <td class="tg-6tv8" style="padding-top:10px;padding-bottom:10px">RV<br>82%</td>
                          <td class="tg-gfc8" style="padding-top:10px;padding-bottom:10px">RQ<br>100%</td>
                        </tr>
                      </table>
                      <table class="tg" style="margin: 0 auto;display: inline-block;opacity: 0.5;">
                        <tr>
                          <th class="tg-b22m" colspan="3">缸盖加工线</th>
                        </tr>
                        <tr>
                          <td class="tg-h738" colspan="3">OEE:88%</td>
                        </tr>
                        <tr>
                          <td class="tg-gfc8" style="padding-top:10px;padding-bottom:10px">RF<br>100%</td>
                          <td class="tg-h738" style="padding-top:10px;padding-bottom:10px">RV<br>88%</td>
                          <td class="tg-gfc8" style="padding-top:10px;padding-bottom:10px">RQ<br>100%</td>
                        </tr>
                      </table>
                    </div>
                  </div>
                </div>
              </transition-group>
              <!--下部分 视频播放组件-->
              <div class="col-md-12" style="height: 555px;top: 370px;width: 1040px;left: -15px">
                <div class="data-box1 clearfix" id="box01" style="height: 568px!important">
                  <i class="topL"></i>
                  <i class="topR"></i>
                  <i class="bottomL"></i>
                  <i class="bottomR"></i>
                  <div style="z-index: 99999">
                    <video muted autoplay="autoplay" loop="loop" controls style="width: 99.5%;height: 565px">
                      <source src="@/../public/XX2.mp4" type="video/mp4" />
                    </video>
                  </div>
                </div>

              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </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 $ from 'jquery'
import '@/../public/css/animations.css'
import '@/../public/css/content1.0.css'
import '@/../public/css/mobile.css'
import '@/../public/bootstrap/css/bootstrap.css'
import '@/../public/js/times.js'
// import '@/../public/bootstrap/js/bootstrap.js'
// eslint-disable-next-line no-unused-vars
// import '@/../public/js/echarts-tooltip-carousel.js'
// import '@/../public/js/china.js'
// import '@/../public/js/angular.js'
// import '@/../public/js/mycharts.js'

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 {
      CutIndex : 1,
      isCut:true ,
      titlePng:'',
      titlePng1:'',
      titlePng2:'',
      titleLeftPng:'',
      titleRightPng:'',
      isShow1: true,
      isShow: 'inline',
      isShowBtn: 'none',
      src: localStorage.getItem('twinAddress'),
      state: [],
      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: '',
      option1:{},
      option2:{},
      option3:{},
      option4:{},
      option5:{},
      option6:{},
      option7:{},
      option8:{},
      option9:{},
      option10:{},
      option11:{},
      option12:{},
      myChart1:{},
      myChart2:{},
      myChart3:{},
      myChart4:{},
      myChart5:{},
      myChart6:{},
      myChart7:{},
      myChart8:{},
      myChart9:{},
      myChart10:{},
      myChart11:{},
      myChart12:{},
      x:0,
      y:0,
      z:0,
      a:0,
      b:0,
      c:0,
      d:0,
      e:0,
      f:0,
      style: {
        width: '1920',
        height: '1080',
        transform: 'scaleY(1) scaleX(1) translate(-50%, -50%)'
      },
      "listHead":[
        {"categories":"订单号"},
        {"categories":"生产编号"},
        {"categories":"发动机型号"},
        {"categories":"缸体号"},
        {"categories":"数量"},
        {"categories":"发动机功率"},
        {"categories":"发动机转速"}

      ],
      "listContent":[
        {"categories":"5025132","data1": "5011", "data2": "K71-28E5-B743","data3": "CA6DK1-28E5","data4": 114,"data5": 209,"data6": 2300},
        {"categories":"5025273","data1": "6011","data2": "K48-18E5-A802","data3": "CA4DK1-18E5","data4": 120,"data5": 139,"data6": 2300},
        {"categories":"7103202","data1": "7101","data2": "H57-24E6-C037","data3": "CA6DH1-24E6","data4": 200,"data5": 179,"data6": 2500},
        {"categories":"5025170","data1": "6021","data2": "K48-18E51-B395","data3": "K48-18E51-B395  ","data4": 220,"data5": 139,"data6":2300},
        {"categories":"5025274","data1": "5002","data2": "K71-32E51-B107","data3": "CA6DK1-32E51","data4": 163,"data5": 239,"data6":2300},
        {"categories":"5025132","data1": "5011", "data2": "K71-28E5-B743","data3": "CA6DK1-28E5","data4": 114,"data5": 209,"data6": 2300},
        {"categories":"5025273","data1": "6011","data2": "K48-18E5-A802","data3": "CA4DK1-18E5","data4": 120,"data5": 139,"data6": 2300},
        {"categories":"7103202","data1": "7101","data2": "H57-24E6-C037","data3": "CA6DH1-24E6","data4": 200,"data5": 179,"data6": 2500},
        {"categories":"5025170","data1": "6021","data2": "K48-18E51-B395","data3": "K48-18E51-B395  ","data4": 220,"data5": 139,"data6":2300},
        {"categories":"5025274","data1": "5002","data2": "K71-32E51-B107","data3": "CA6DK1-32E51","data4": 163,"data5": 239,"data6":2300},
        {"categories":"5025132","data1": "5011", "data2": "K71-28E5-B743","data3": "CA6DK1-28E5","data4": 114,"data5": 209,"data6": 2300},
        {"categories":"5025273","data1": "6011","data2": "K48-18E5-A802","data3": "CA4DK1-18E5","data4": 120,"data5": 139,"data6": 2300},
        {"categories":"7103202","data1": "7101","data2": "H57-24E6-C037","data3": "CA6DH1-24E6","data4": 200,"data5": 179,"data6": 2500},
        {"categories":"5025170","data1": "6021","data2": "K48-18E51-B395","data3": "K48-18E51-B395  ","data4": 220,"data5": 139,"data6":2300},
        {"categories":"5025274","data1": "5002","data2": "K71-32E51-B107","data3": "CA6DK1-32E51","data4": 163,"data5": 239,"data6":2300},
      ],
      "listData1":[
        {"categories":"今日总单量","data1": 20000, "data2": 3000,"data3": 1500,"data4": 1500,"data5": 1000},
        {"categories":"单期单量","data1": 15000, "data2": 2000,"data3": 1000,"data4": 300,"data5": 800},
        {"categories":"多期单量","data1": 5000, "data2": 1000,"data3": 500,"data4": 1200,"data5": 200},
        {"categories":"今日放款金额(万元)","data1": 15600.00, "data2": 500.00,"data3": 250.00,"data4": 250.00,"data5": 150.00},
        {"categories":"单期金额(万元)","data1": 11000.00, "data2": 350.00,"data3": 200.00,"data4": 50.00,"data5": 100.00},
        {"categories":"多期金额(万元)","data1": 4600.00, "data2": 150.00,"data3": 50.00,"data4": 20.00,"data5": 50.00}
      ],
      "todayData":[
        {"categories":"w001","data": 335},
        {"categories":"w002","data": 679},
        {"categories":"w003","data": 1548},
        {"categories":"w004","data": 1008},
        {"categories":"w005","data": 130},
        {"categories":"w006","data": 680},
        {"categories":"w007","data": 190}
      ],
      "PlannLoan":[
        {"categories":"w001","data1": 2.0,"data2": 2.6},
        {"categories":"w002","data1": 4.9,"data2": 5.9},
        {"categories":"w003","data1": 7.0,"data2": 9.0},
        {"categories":"w004","data1": 23.2,"data2": 26.4},
        {"categories":"w005","data1": 25.6,"data2": 28.7},
        {"categories":"w006","data1": 76.7,"data2": 70.7},
        {"categories":"w007","data1": 135.6,"data2": 175.6},
        {"categories":"w008","data1": 162.2,"data2": 182.2},
        {"categories":"w009","data1": 56.6,"data2": 48.7}
      ],

      "titleList":["14:00","14:30","15:00","15:30","16:00","16:30","17:00","17:30","18:00","18:30","19:00","19:30","20:00","20:30","21:00","21:30"],
      "dataList":["0.1","0.02","0.1","0.3","0","0.2","0","0.12","0.1","0.2","0.02","0.08","0.3","0.08","0.06","0.24"],
      "titleList06":["14:00","14:30","15:00","15:30","16:00","16:30","17:00","17:30","18:00","18:30","19:00","19:30","20:00","20:30","21:00","21:30"],
      "dataList06":["0.1","0.12","0.12","0.3","0","0.12","0","0.12","0.1","0.2","0.02","0.18","0.13","0.08","0.06","0.24"],
      "titleList2":["-3","-2","-1","0","1","2","3"],
      "dataList2":["0","1.1","11.6","34.1","11.6","1.1","0"],
      "titleList6":["用途1","用途2","用途3","用途4","用途5"],
      "dataList6":["60","40","20","80","100"],
      "legendList3":["专机","机加线","其他"],
      "titleList3":["专机","机加线","其他"],
      "dataList3":["3355","679","1548"],
      "dataList32":["954","179","1048"],
      "titleList4":["专机","机加线","其他"],
      "dataList4":["1548","1008","1300"],
      "dataList42":["148","108","330"],
      "legendList5":["累计产量","计划产量"],
      "titleList5":["0234B","0061W","4008B","0073B","0006W","1255B","2453A"],
      "dataList5":[ ["335","679","1548","1008","130","1548","1008"],
        ["130","1548","1008","130","680","335","679"]
      ],
      "titleList7":["北京","天津","上海","重庆","河北","河南","云南","辽宁","黑龙江","湖南","安徽","山东","新疆","江苏","浙江","江西","湖北","广西","甘肃","山西","内蒙古","陕西","吉林","福建","贵州","广东","青海","西藏","四川","宁夏","海南","台湾","香港","澳门"],
      "titleList8":["辽宁","黑龙江","湖南","安徽","山东","新疆","江苏","浙江","江西","湖北","广西","甘肃","山西","内蒙古","陕西","吉林","福建","贵州","广东","青海","西藏","四川","宁夏","海南","台湾"],
      "titleList9":["甘肃","山西","内蒙古","陕西","吉林","福建","贵州","广东","青海","西藏","四川","宁夏","海南","台湾","香港","澳门","北京","天津","上海"]
    }
  },
  created() {
    this.getLogo()
    // window.updateRobotData = this.updateRobotData
    // delay = ms => new Promise((resolve, reject) => setTimeout(resolve, ms))
    // this.initData()
    setTimeout(()=>{
      this.LowJs()
      this.InitMyCharts()
    },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)

    /* 窗口改变事件*/
    _this.setScale()
    window.addEventListener('resize', () => {
      _this.setScale()
    })


    // 根据配置切换速度来切换页面
    if(this.isCut){
      setInterval(() => {
        this.CutIndex = this.CutIndex + 1
        switch (this.CutIndex) {
          // 比实际位大一位 case 1 表示设的第二页的内容
          case 1:
            break
          case 2:
            // this.chartDom1.clear()
            // this.chartDom1.setOption(this.chartOption1);
            break
          case 3:
            // this.chartDom3.clear()
            // this.chartDom4.clear()
            // this.chartDom3.setOption(this.chartOption3);
            // this.chartDom4.setOption(this.chartOption4);
            break
          case 4:
            // this.chartDom5.clear()
            // this.chartDom6.clear()
            // this.chartDom5.setOption(this.chartOption5);
            // this.chartDom6.setOption(this.chartOption6);
            break
          case 5:
            // this.chartDom5.clear()
            // this.chartDom6.clear()
            // this.chartDom5.setOption(this.chartOption5);
            // this.chartDom6.setOption(this.chartOption6);
            this.CutIndex = 1
            break
          default:
            break
        }
      }, 5 * 1000)
    }
  },
  beforeDestroy() {
    // clearInterval(this.timer_1)
    // clearInterval(this.timer_2)
    clearInterval(this.timer_3)
    clearInterval(this.timer_4)
  },
  methods: {
    init() {
    },
    getScale() {
      const w = window.innerWidth / this.style.width
      const h = window.innerHeight / this.style.height
      return { x: w, y: h }
    },
    setScale() {
      const scale = this.getScale()
      this.style.transform = 'scaleY(' + scale.y + ') scaleX(' + scale.x + ') translate(-50%, -50%)'
    },
    InitMyCharts(){
      var scope = this
      if($(window).width() > 991) {
        var total = window.innerHeight;
        // document.getElementById("title").style.height = total * 0.1 + "px";
        // document.getElementById("main").style.height = total * 0.9 + "px";
        let title = document.getElementById("title");
        let main = document.getElementById("main");

        let box02 = document.getElementById("box02");
        let box03 = document.getElementById("box03");
        let box04 = document.getElementById("box04");
        let title_h = title.offsetHeight;
        let main_h = main.offsetHeight;

        let box02_h = box02.offsetHeight;
        let box03_h = box03.offsetHeight;
        let box04_h = box04.offsetHeight;
        // document.getElementById("box01").style.height = '400px';
        // document.getElementById("box8-box").style.height ='236px';
        // box02.style.height = main_h * 0.9 + "px";
        // document.getElementById("box9-box").style.height = main_h * 0.25 + "px";
        // box03.style.height = main_h * 0.425 + "px";
        // box04.style.height = main_h * 0.475 + "px";
        let box01 = document.getElementById("box01");
        let box01_h = box01.offsetHeight;
        // document.getElementById("live-box").style.height = box01_h * 0.05 + "px";
        // document.getElementById("ym-menu").style.height = box03_h * 0.1 + "px";
      };
      // var app = angular.module('myApp', []);
      // app.controller('customersCtrl', function($scope, $http) {
      //   $http({
      //     method: 'get',
      //     url: 'data/da.json'
      //   }).then(function(res) {
      //
      //   });
      // });
      // $scope.listHead = res.data.listHead; //数据列表-头
      // $scope.listContent = res.data.listContent; //数据列表
      // $scope.listData1 = res.data.listData1; //数据列表
      //日均额
      var worldMapContainer2 = document.getElementById('box2');
      var worldMapContainer6 = document.getElementById('box6');
      var box01 = document.getElementById("box01");
      var box01_h = box01.offsetHeight;
      var box01_w = box01.offsetWidth;
      //用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
      var resizeWorldMapContainer2 = function() {
        // worldMapContainer2.style.width = box01_w * 0.96 + 'px';
        // worldMapContainer2.style.height = '280px';
      };
      var resizeWorldMapContainer6 = function() {
        // worldMapContainer6.style.width = box01_w * 0.96 + 'px';
        // worldMapContainer6.style.height = '280px';
      };
      resizeWorldMapContainer6()
      //设置容器高宽
      resizeWorldMapContainer2();
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(worldMapContainer2);
      // worldMapContainer6.style.height = '280px';
      var myChart6 = echarts.init(worldMapContainer6);
      var option = {
        color: ['#38b3f1'],
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'line' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        textStyle: {
          color: '#ccc'
        },
        grid: {
          top: '10%',
          left: '3%',
          right: '3%',
          bottom: '6%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          data: scope.titleList,
          axisTick: {
            alignWithLabel: true
          }
        }],
        yAxis: [{
          type: 'value'
        }],
        series: [{
          name: 'SPC',
          type: 'line',
          barWidth: '60%',
          data: this.dataList,
          markLine: {
            data: [{
              name: 'UCL',
              yAxis: 0.275
            }, {
              name: 'CL',
              yAxis: 0.132
            }, {
              name: 'LCL',
              yAxis: 0
            }],
            label: {
              normal: {
                formatter: '{b} : {c}',
                position: 'middle'
              }
            }
          }
        }]
      };
      var option6 = {
        color:['#fc0000','#ff7d4e'],
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data:['极差控制图','均值控制图'],
          textStyle:{//图例文字的样式
            color:'#ccc',
            fontSize:16
          }
        },
        textStyle: {
          color: '#ccc'
        },
        xAxis:  {
          type: 'category',
          boundaryGap: false,
          data: ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24']
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            name:'极差控制图',
            type:'line',
            data:[14, 12, 12, 11, 13, 13, 14, 12, 13, 16, 11,14,13,12,12,13,15,12,11,15,16,14,12,14],
            itemStyle: {
              normal: {
                color: "#cccccc",
                lineStyle: {
                  color: "#fc0000"
                }
              }
            },
            markLine: {
              data: [
                {type: 'average', name: '平均值'}
              ]
            }
          },
          {
            name:'均值控制图',
            type:'line',
            data:[92, 90, 87,100,78, 72, 89, 75,88,74,89,91,92,89,78,84,82,83,81,92,94,91,92,80],
            itemStyle: {
              normal: {
                color: "#cccccc",
                lineStyle: {
                  color: "#ff7d4e"
                }
              }
            },
            markPoint: {
              data: [
                {name: '周最低', value: -2, xAxis: 1, yAxis: -1.5}
              ]
            },
            markLine: {
              data: [
                {type: 'average', name: '平均值'},

              ]
            }
          }
        ]
      };
      var a  = ['#c7353a', '#f5b91e', '#2455d0', '#ff7d4e', '#049cfa']
      myChart.setOption(option);
      myChart6.setOption(option6);
      //用于使chart自适应高度和宽度
      window.onresize = function() {
        //重置容器高宽
        resizeWorldMapContainer2();
        myChart.resize();
        // myChart6.resize();
      };

      //资产在贷余额
      var worldMapContainer4 = document.getElementById('box4');
      //用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
      var resizeWorldMapContainer4 = function() {
        // worldMapContainer4.style.width = box01_w * 0.96 + 'px';
        // worldMapContainer4.style.height = '280px';
      };
      //设置容器高宽
      resizeWorldMapContainer4();
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(worldMapContainer4);
      // 指定图表的配置项和数据

      var option = {
        title : {
          subtext: 'Cp=1.25,Cpk=1.68',
          x:'center',
          color: "#fff"
        },
        textStyle: {
          color: '#fff'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#fff'
            }
          }
        },
        xAxis: [
          {
            type: 'value',
            min:0,
            max:20,
            interval:2
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '',
            min: 0,
            max: 0.25,
            interval: 50,
            axisLabel: {
              formatter: '{value} '
            }
          },
          {
            type: 'value',
            name: '',
            min: 0,
            max: 0.25,
            interval: 50,
            axisLabel: {
              formatter: '{value} '
            }
          }
        ],
        series: [
          {
            type:'bar',
            barCategoryGap : "30%",
            markLine: {
              data: [
                {xAxis: '8', name: 'SL',seriesName: '95.65'},
                {xAxis: '8.9', name: 'LSL',seriesName: '108.25'},
                {xAxis: '9.3', name: 'USL',seriesName: '108.25'}
              ],
              symbol: 'pin',
              label: {
                normal: {
                  formatter: '{b}',
                  position: 'middle'
                }
              },
              itemStyle: {
                normal: {
                  color: '#fff'
                }
              }
            },
            data:[[0,0.001],[0.5,0.0001],[1,0.002],[1.5,0],[2,0.005],[2.5,0.007],[3,0.01],[3.5,0],[4,0.035],[4.5,0.055],[5,0.07],[5.5,0],[6,0.12],[6.5,0.15],[7,0.17],[7.5,0],[8,0.19],[8.5,0.175],[9,0.17],[10,0.12],[10.5,0.10],[11,0.07],[12,0.035],[12.5,0.02],[13,0.01],[14,0.005],[14.5,0.004],[15,0.004],[16,0.003],[17,0.002],[18,0.001]]
          },
          {
            type:'line',
            yAxisIndex: 1,
            markLine: {
              data: [
                {xAxis: '9.1', name: 'QU',seriesName: '108.25'},
                {xAxis: '3.1', name: 'QL',seriesName: '108.25'}
              ],
              symbol: 'pin',
              label: {
                normal: {
                  formatter: '{b}',
                  position: 'middle'
                }
              },
              lineStyle: {
                normal: {
                  type: 'dotted',
                  color: '#fff'
                }
              }
            },
            data:[[0,0.001],[1,0.002],[2,0.005],[3,0.01],[4,0.035],[5,0.07],[6,0.12],[7,0.17],[8,0.19],[9,0.17],[10,0.12],[11,0.07],[12,0.035],[13,0.01],[14,0.005],[15,0.004],[16,0.003],[17,0.002],[18,0.001]]
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);

      //用于使chart自适应高度和宽度
      window.onresize = function() {
        //重置容器高宽
        resizeWorldMapContainer4();
        myChart.resize();
      };
      //					所贷金额用途
      var worldMapContainer8 = document.getElementById('box8');
      let box8_box = document.getElementById("box8-box");
      let box8_box_h = box8_box.offsetHeight;
      let box8_box_w = box8_box.offsetWidth;
      //用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
      var resizeWorldMapContainer8 = function() {
        // worldMapContainer8.style.width = box8_box_w * 0.96 + 'px';
        // worldMapContainer8.style.height = box8_box_h * 0.87 + 'px';
        console.log(box8_box_h * 0.87)
      };
      //设置容器高宽
      resizeWorldMapContainer8();
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(worldMapContainer8);
      // 指定图表的配置项和数据
      var option = {

        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c}%"
        },

        legend: {
          data: scope.titleList6,
          x: 'center',
          y: 'bottom',
          textStyle: {
            color: '#ccc'
          }
        },
        calculable: true,
        series: [{
          name: '所贷金额用途',
          type: 'funnel',
          left: '10%',
          top: '5%',
          //x2: 80,
          bottom: '17%',
          width: '80%',
          // height: {totalHeight} - y - y2,
          min: 0,
          max: 100,
          minSize: '0%',
          maxSize: '100%',
          sort: 'descending',
          gap: 2,
          label: {
            normal: {
              show: true,
              position: 'inside'
            },
            emphasis: {
              textStyle: {
                fontSize: 24
              }
            }
          },
          labelLine: {
            normal: {
              length: 10,
              lineStyle: {
                width: 1,
                type: 'solid'
              }
            }
          },
          itemStyle: {
            normal: {
              borderColor: '#ccc',
              borderWidth: 1
            }
          },
          color: ['#c7353a', '#f5b91e', '#2455d0', '#ff7d4e', '#049cfa'],
          data: function() {
            var serie = [];
            for(var i = 0; i < scope.titleList6.length; i++) {
              var item = {
                name: scope.titleList6[i],
                value: scope.dataList6[i]
              };
              serie.push(item);
            }
            return serie;
          }()

        }]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);

      //用于使chart自适应高度和宽度
      window.onresize = function() {
        //重置容器高宽
        resizeWorldMapContainer8();
        myChart.resize();
      };

      var worldMapContainer5 = document.getElementById('box5');
      let box04 = document.getElementById("box04");
      let box04_h = box04.offsetHeight;
      let box04_w = box04.offsetWidth;
      //用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
      // var resizeWorldMapContainer5 = function() {
        // worldMapContainer5.style.width = box04_w * 0.96 + 'px';
        // worldMapContainer5.style.height = box04_h * 0.96 + 'px';
      // };
      //设置容器高宽
      // resizeWorldMapContainer5();
      // 基于准备好的dom，初始化echarts实例
      var myChart9 = echarts.init(worldMapContainer5);

      // 指定图表的配置项和数据

      var option9 = {
        //  title : {
        //      text: '某地区蒸发量和降水量',
        //      subtext: '纯属虚构'
        //  },
        color: ['#38b5f4', '#ff7d4e'],
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          data: scope.legendList5,
          textStyle: {
            color: '#ccc'
          }
        },
        grid: {
          top: '10%',
          left: '3%',
          right: '3%',
          bottom: '6%',
          containLabel: true
        },
        calculable: true,
        textStyle: {
          color: '#ccc'
        },
        xAxis: [{
          type: 'category',
          data: scope.titleList5,
        }],
        yAxis: [{
          type: 'value'
        }],
        series: function() {
          var serie = [];
          for(var i = 0; i < scope.legendList5.length; i++) {
            var item = {
              name: scope.legendList5[i],
              type: 'bar',
              data: function() {
                var list = []
                for(var i = 0; i < 7;i++) {
                  list.push(Math.floor(Math.random() * 1000))
                }
                return list
              }()
            };
            serie.push(item);
          }
          return serie;
        }()

      };

      // 使用刚指定的配置项和数据显示图表。
      myChart9.setOption(option9);
      setInterval(function () {
        option9.series = function() {
          var serie = [];
          for(var i = 0; i < scope.legendList5.length; i++) {
            var item = {
              name: scope.legendList5[i],
              type: 'bar',
              data: function() {
                var list = []
                for(var i = 0; i < 7;i++) {
                  list.push(Math.floor(Math.random() * 1000))
                }
                return list
              }()
            };
            serie.push(item);
          }
          return serie;
        }()
        myChart9.setOption(option9, true);
      },3000);

      //用于使chart自适应高度和宽度
      // window.onresize = function() {
      //   //重置容器高宽
      //   resizeWorldMapContainer5();
      //   myChart9.resize();
      // };
      // //              业务数据分布
      // var worldMapContainer1 = document.getElementById('box1');
      // let box02 = document.getElementById("box02");
      // let box02_h = box02.offsetHeight;
      // let box02_w = box02.offsetWidth;
      // //用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
      // var resizeWorldMapContainer1 = function() {
      //   console.log('worldMapContainer1',worldMapContainer1)
      //   worldMapContainer1.style.width = box02_w * 0.9 + 'px';
      //   worldMapContainer1.style.height = box02_h * 0.82 + 'px';
      // };
      // //设置容器高宽
      // resizeWorldMapContainer1();
      // // 基于准备好的dom，初始化echarts实例
      // var myChart = echarts.init(worldMapContainer1);
      // // 指定图表的配置项和数据
      // function randomData() {
      //   return Math.round(Math.random() * 2000);
      // }
      // var option = {
      //   tooltip: {
      //     trigger: 'item'
      //   },
      //   legend: {
      //     orient: 'vertical',
      //     x: 'left',
      //     y: 'bottom',
      //     data: [
      //       '专机',
      //       '机加线',
      //       '其他'
      //     ],
      //     textStyle: {
      //       color: '#ccc'
      //     }
      //   },
      //   visualMap: {
      //     min: 0,
      //     max: 2500,
      //     left: 'right',
      //     top: 'bottom',
      //     text: ['高', '低'], // 文本，默认为数值文本
      //     calculable: true,
      //     //		color: ['#26cfe4', '#f2b600', '#ec5845'],
      //     textStyle: {
      //       color: '#fff'
      //     }
      //   },
      //   series: [{
      //     name: '专机',
      //     type: 'map',
      //     aspectScale: 0.75,
      //     zoom: 1.2,
      //     mapType: 'china',
      //     roam: false,
      //     label: {
      //       normal: {
      //         show: false
      //       },
      //       emphasis: {
      //         show: false
      //       }
      //     },
      //     data: function() {
      //       var serie = [];
      //       for(var i = 0; i < scope.titleList7.length; i++) {
      //         var item = {
      //           name: scope.titleList7[i],
      //           value: randomData()
      //         };
      //         serie.push(item);
      //       }
      //       return serie;
      //     }()
      //
      //   },
      //     {
      //       name: '机加线',
      //       type: 'map',
      //       mapType: 'china',
      //       label: {
      //         normal: {
      //           show: true
      //         },
      //         emphasis: {
      //           show: true
      //         }
      //       },
      //       data: function() {
      //         var serie = [];
      //         for(var i = 0; i < scope.titleList8.length; i++) {
      //           var item = {
      //             name: scope.titleList8[i],
      //             value: randomData()
      //           };
      //           serie.push(item);
      //         }
      //         return serie;
      //       }()
      //
      //     },
      //     {
      //       name: '其他',
      //       type: 'map',
      //       mapType: 'china',
      //       label: {
      //         normal: {
      //           show: true
      //         },
      //         emphasis: {
      //           show: true
      //         }
      //       },
      //       data: function() {
      //         var serie = [];
      //         for(var i = 0; i < scope.titleList9.length; i++) {
      //           var item = {
      //             name: scope.titleList9[i],
      //             value: randomData()
      //           };
      //           serie.push(item);
      //         }
      //         return serie;
      //       }()
      //
      //     }
      //   ]
      // };

      // // 使用刚指定的配置项和数据显示图表。
      // myChart.setOption(option);
      // tools.loopShowTooltip(myChart, option, {
      //   loopSeries: true
      // } );

      //用于使chart自适应高度和宽度
      // window.onresize = function() {
      //   //重置容器高宽
      //   resizeWorldMapContainer1();
      //   myChart.resize();
      // };
    },
    LowJs(){
      // $(function () {
      //   connect();
      // })
      // $('.oee li').click(function() {
      // 	var index = $(this).index();
      // 	console.log(index)
      // 	$(this).attr('class', "ym-active").siblings('li').attr('class', 'taba');
      //     $('#box03 .tabcontent').eq(index).show(200).siblings('.tabcontent').hide();
      // });
      $('.machinery li').click(function () {
        var index = $(this).index();
        $(this).attr('class', "ym-active").siblings('li').attr('class', 'taba');
        $('.tabcontent').eq(index).show(200).siblings('.tabcontent').hide();
      });
      $('.ym-menu1 li').click(function () {
        var index1 = $(this).index();
        $(this).attr('class', "ym-active1").siblings('li').attr('class', 'taba1');
        $('.tabcontent1').eq(index1).show(200).siblings('.tabcontent1').hide();
      });
      var t = 0;
      var t1 = 0;
      var t2 = 0;
      var t3 = 0;
      var t4 = 0
      var timer = setInterval(function () {
        if (t == $('.ym-menu li').length) t = 0;
        $('.ym-menu li:eq(' + t + ')').click();
        t++;
        if (t1 == $('.ym-menu1 li').length) t1 = 0;
        $('.ym-menu1 li:eq(' + t1 + ')').click();
        t1++;
      }, 6000);
      var timer2 = setInterval(function () {
        $('.table-container table').css({ 'opacity': 0.5 })
        if (t2 == $('.table-container table').length) t2 = 0;
        $('.table-container table:eq(' + t2 + ')').css({ 'opacity': 1 })
        t2++

        $('#OEEData .chartOeeData').css({ 'display': 'none' })
        if (t3 == $('#OEEData .chartOeeData').length) t3 = 0;
        $('#OEEData .chartOeeData:eq(' + t3 + ')').css({ 'display': 'block' })
        t3++

        $('#allcharts .charts-container').css({ 'display': 'none' })
        if (t4 == $('#allcharts .charts-container').length) t4 = 0;
        $('#allcharts .charts-container:eq(' + t4 + ')').css({ 'display': 'block' })
        t4++
      }, 4000)

      this.InitEcharts()

      // function change(table) {
      //   var row = table.insertRow(table.rows.length);//在table的最后增加一行,table.rows.length是表格的总行数
      //   for (let j = 0; j < table.rows[0].cells.length; j++) {//循环第一行的所有单元格的数据，让其加到最后新加的一行数据中（注意下标是从0开始的）
      //     var cell = row.insertCell(j);//给新插入的行中添加单元格
      //     cell.height = "24px";//一个单元格的高度，跟css样式中的line-height高度一样
      //     // cell.innerHTML = table.rows[0].cells[j].innerHTML;//设置新单元格的内容，这个根据需要，自己设置
      //   }
      //   table.deleteRow(0);//删除table的第一行
      // };
      // function tableInterval() {
      //   var table = document.getElementById("panel-table");//获得表格
      //   change(table);//执行表格change函数，删除第一行，最后增加一行，类似行滚动
      // };
      // setInterval(, 800);//每隔2秒执行一次change函数，相当于table在向上滚动一样
      setInterval(()=>{
        this.tableInterval()
      },800)
      this.x = 120;
      this.y = 130;
      this.z = 0;
      this.a = 0;
      this.b = 0;
      this.c = 0;
      this.d = 0;
      this.e = 0;
      this.f = 0;
      document.getElementById("text1").innerHTML = this.x;
      document.getElementById("text2").innerHTML = this.y;
      document.getElementById("text3").innerHTML = this.z;
      document.getElementById("text4").innerHTML = this.a;
      document.getElementById("text5").innerHTML = this.b;
      document.getElementById("text6").innerHTML = this.c;
      document.getElementById("text7").innerHTML = this.d;
      document.getElementById("text8").innerHTML = this.e;
      document.getElementById("text9").innerHTML = this.f;
    },
    InitEcharts(){
      // 仪表盘**********************************************
      this.myChart1 = echarts.init(document.getElementById('chart1'));
      this.option1 = {
        series: [
          {
            name: 'OEE',
            type: 'gauge',
            detail: {
              formatter: '{value}%',
              textStyle: {
                fontSize: 70
              }
            },
            data: [{ value: 88, name: 'OEE' }]
          }
        ]
      };
      this.myChart1.setOption(this.option1);
      this.myChart2 = echarts.init(document.getElementById('chart2'));
      this.option2 = {
        series: [
          {
            name: 'OEE',
            type: 'gauge',
            detail: {
              formatter: '{value}%',
              textStyle: {
                fontSize: 70
              }
            },
            data: [{ value: 90, name: 'OEE' }]
          }
        ]
      };
      this.myChart2.setOption(this.option2);
      this.myChart3 = echarts.init(document.getElementById('chart3'));
      this.option3 = {
        series: [
          {
            name: 'OEE',
            type: 'gauge',
            detail: {
              formatter: '{value}%',
              textStyle: {
                fontSize: 70
              }
            },
            data: [{ value: 88, name: 'OEE' }]
          }
        ]
      };
      this.myChart3.setOption(this.option3);
      this.myChart4 = echarts.init(document.getElementById('chart4'));
      this.option4 = {
        series: [
          {
            name: 'OEE',
            type: 'gauge',
            detail: {
              formatter: '{value}%',
              textStyle: {
                fontSize: 70
              }
            },
            data: [{ value: 92, name: 'OEE' }]
          }
        ]
      };
      this.myChart4.setOption(this.option4);
      console.log($('#chart1'))
      console.log($('#chart1').width())
      let Chart1Width= $('#chart1').width()
      $('#chart5').css('width', Chart1Width)
      this.myChart5 = echarts.init(document.getElementById('chart5'));
      this.option5 = {
        series: [
          {
            name: 'OEE',
            type: 'gauge',
            detail: {
              formatter: '{value}%',
              textStyle: {
                fontSize: 70
              }
            },
            data: [{ value: 88, name: 'OEE' }]
          }
        ]
      };
      $('#chart6').css('width', Chart1Width)
      this.myChart5.setOption(this.option5);
      this.myChart6 = echarts.init(document.getElementById('chart6'));
      this.option6 = {
        series: [
          {
            name: 'OEE',
            type: 'gauge',
            detail: {
              formatter: '{value}%',
              textStyle: {
                fontSize: 70
              }
            },
            data: [{ value: 92, name: 'OEE' }]
          }
        ]
      };
      this.myChart6.setOption(this.option6);
      $('#chart7').css('width', Chart1Width)
      this.myChart7 = echarts.init(document.getElementById('chart7'));
      this.option7 = {
        series: [
          {
            name: 'OEE',
            type: 'gauge',
            detail: {
              formatter: '{value}%',
              textStyle: {
                fontSize: 70
              }
            },
            data: [{ value: 82, name: 'OEE' }]
          }
        ]
      };
      this.myChart7.setOption(this.option7);
      $('#chart8').css('width', Chart1Width)
      this.myChart8 = echarts.init(document.getElementById('chart8'));
      this.option8 = {
        series: [
          {
            name: 'OEE',
            type: 'gauge',
            detail: {
              formatter: '{value}%',
              textStyle: {
                fontSize: 70
              }
            },
            data: [{ value: 93, name: 'OEE' }]
          }
        ]
      };
      this.myChart8.setOption(this.option8);
      $('#chart9').css('width', Chart1Width)
      this.myChart9 = echarts.init(document.getElementById('chart9'));
      this.option9 = {
        series: [
          {
            name: 'OEE',
            type: 'gauge',
            detail: {
              formatter: '{value}%',
              textStyle: {
                fontSize: 70
              }
            },
            data: [{ value: 88, name: 'OEE' }]
          }
        ]
      };
      this.myChart9.setOption(this.option9);
      $('#chart10').css('width', Chart1Width)
      this.myChart10 = echarts.init(document.getElementById('chart10'));
      this.option10 = {
        series: [
          {
            name: 'OEE',
            type: 'gauge',
            detail: {
              formatter: '{value}%',
              textStyle: {
                fontSize: 70
              }
            },
            data: [{ value: 94, name: 'OEE' }]
          }
        ]
      };
      this.myChart10.setOption(this.option10);
      $('#chart11').css('width', Chart1Width)
      this.myChart11 = echarts.init(document.getElementById('chart11'));
      this.option11 = {
        series: [
          {
            name: 'OEE',
            type: 'gauge',
            detail: {
              formatter: '{value}%',
              textStyle: {
                fontSize: 70
              }
            },
            data: [{ value: 88, name: 'OEE' }]
          }
        ]
      };
      this.myChart11.setOption(this.option11);
      console.log($('#chart12').css('width',300),'#chart12')
      $('#chart12').css('width', Chart1Width)
      this.myChart12 = echarts.init(document.getElementById('chart12'));
      this.option12 = {
        series: [
          {
            name: 'OEE',
            type: 'gauge',
            detail: {
              formatter: '{value}%',
              textStyle: {
                fontSize: 70
              }
            },
            data: [{ value: 98, name: 'OEE' }]
          }
        ]
      };
      this.myChart12.setOption(this.option12);
    },
    tableInterval(){
      var table = document.getElementById("panel-table");//获得表格
      var row = table.insertRow(table.rows.length);//在table的最后增加一行,table.rows.length是表格的总行数
      for (let j = 0; j < table.rows[0].cells.length; j++) {//循环第一行的所有单元格的数据，让其加到最后新加的一行数据中（注意下标是从0开始的）
        var cell = row.insertCell(j);//给新插入的行中添加单元格
        cell.height = "24px";//一个单元格的高度，跟css样式中的line-height高度一样
        cell.innerHTML = table.rows[0].cells[j].innerHTML;//设置新单元格的内容，这个根据需要，自己设置
      }
      table.deleteRow(0);//删除table的第一行
    },

    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())
        }
      })
    },
    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': {
              break
            }
            case 'C_B_TagIDTrigger':
              break
          }
          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)
    },
    getLogo() {
      axios.get('../../logo.png', {
        responseType: 'arraybuffer'
      }).then(res => {
        this.titlePng = 'data:image/jpeg;base64,' + btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))
      })
      axios.get('../../title-left.png', {
        responseType: 'arraybuffer'
      }).then(res => {
        this.titleLeftPng = 'data:image/jpeg;base64,' + btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))
      })
      axios.get('../../title-right.png', {
        responseType: 'arraybuffer'
      }).then(res => {
        this.titleRightPng = '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('../../logo.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>
#machineryData{
  width: 90%;
  margin: 0 auto;
  border: 1px solid rgb(56,179,241);
  color: rgb(56,179,241);
  font-size: 1.2rem
}
#machineryData tr td{
  width: 10%;
  padding: 10px 5px;
}

.charts-container,
.chartOeeData {
  overflow: hidden;
  padding: 0 10px;
  margin-left: 5px;
}

.charts-container {
  position: relative;
}
.appearance{
  width: 25%;
  height: 200px;
}

#chart1,
#chart2,
#chart3,
#chart4,
#chart5,
#chart6,
#chart7,
#chart8,
#chart9,
#chart10,
#chart11,
#chart12 {
  width: 24%;
  height: 360px;
  margin-right: 2px;
  float: left;
  zoom: 0.35;
}

.chartOeeData {
  margin: 0
}

.chartData1,
.chartData2,
.chartData3,
.chartData4 {
  float: left;
  width: 24%;
  height: 20px;
  font-size: 2.5rem;
  line-height: 21px;
  margin-right: 2px;
  color: #fff;
  text-align: center
}

.table-container {
  margin: 15px 0px 15px 15px;
}

.tg {
  border-collapse: collapse;
  border-spacing: 0;
}

.tg td {
  font-family: Arial, sans-serif;
  font-size: 1.8rem;
  padding: 5px 5px;
  border-style: solid;
  border-width: 1px;
  overflow: hidden;
  word-break: normal;
  border-color: black;
}

.tg th {
  font-family: Arial, sans-serif;
  font-size: 18px;
  font-weight: normal;
  padding: 10px 5px;
  border-style: solid;
  border-width: 1px;
  overflow: hidden;
  word-break: normal;
  border-color: black;
  width: 325px;
}

.tg .tg-heq1 {
  background-color: #464650;
  color: #ffffff;
  border-color: #ffffff;
  text-align: center
}

.tg .tg-b22m {
  background-color: #464650;
  color: #ffffff;
  border-color: #ffffff;
  text-align: center;
  vertical-align: top
}

.tg .tg-gfc8 {
  background-color: #008100;
  color: #ffffff;
  border-color: #ffffff;
  text-align: center;
  vertical-align: top;
}

.tg .tg-6tv8 {
  background-color: #ffd100;
  color: #333333;
  border-color: #ffffff;
  text-align: center;
  vertical-align: top
}

.tg .tg-h738 {
  background-color: #008100;
  color: #ffffff;
  border-color: #ffffff;
  text-align: center;
  vertical-align: top
}

.tool {
  border-collapse: collapse;
  border-spacing: 0;
}

.tool td {
  font-family: Arial, sans-serif;
  font-size: 14px;
  padding: 5px 5px;
  border-style: solid;
  border-width: 1px;
  overflow: hidden;
  word-break: normal;
  border-color: #fff;
}

.tool th {
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: normal;
  padding: 5px 5px;
  border-style: solid;
  border-width: 1px;
  overflow: hidden;
  word-break: normal;
  border-color: #fff;
}

.tool .tg-v8f3 {
  background-color: #fc0000;
  color: #fff;
  text-align: center;
  vertical-align: top
}

.tool .tg-lfnm {
  background-color: #464650;
  text-align: center;
  color: #fff;
}

.tool .tg-tr94 {
  background-color: #008100;
  color: #fff;
  text-align: center
}

.tool .tg-sh07 {
  background-color: #464650;
  text-align: center;
  color: #fff;
  vertical-align: top
}

#body{
  z-index: 100;
  transform-origin: 0 0;
  position: fixed;
  left: 50%;
  top: 50%;
  transition: 0.3s;
}

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

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

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

.CutBox{
  position: fixed;
  /*flex: left;*/
  height: 358px;
  width: 52.6%!important;
}
.data-box1-border{
  border:0 !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}
.CutBox-border{
  border: 2px solid #032d60;
  -webkit-box-shadow: #07417a 0px 0px 10px;
  /*box-shadow: inset 0 0 30px #07417a;*/
}
</style>
