<template>
    <div class="background">
        <el-row>
            <el-col :span="8">
                <div style="width: 260px;height: 134px;padding-top: 30px;padding-left: 60px">
                    <img @click="toggleFullScreen" src="../img/companyIcon.png" alt="" style="width: 260px;height: 134px">
                </div>
            </el-col>
            <el-col :span="8">
                <div style="color: #0FDAE6;width: 100%;height: 100%;padding-top: 40px;text-align: center;font-size: 100px;font-weight: bold">
                    浦镇公司涂装产线数字化平台
                </div>
            </el-col>
            <el-col :span="8">
                <div style="color: white;margin-left: 30%;">
                    <div style="float: left;font-size: 60px;margin-top: 50px">
                        <span>{{(this.hour) + ':'+ (this.minute) + ':'+(this.second)}}</span>
                        <span style="padding-left: 40px">{{ `${this.year}年${this.month}月${this.day}日` }}</span>
                        <span style="padding-left: 40px">{{'星期'+ this.week.toString()}}</span>
                    </div>
                </div>
            </el-col>
        </el-row>
        <el-row>
          <div v-show="remoteControlDialogVisible" style="width: 400px;height: 310px;background-color: #fff;position: absolute;top: 1340px;border-radius: 10px;left: 300px;z-index: 99;box-shadow: 0 1px 3px rgba(0,0,0,.3)">
            <el-row style="font-size: 30px;text-align: center;margin-top: 10px">孪生反向控制</el-row>
            <el-row style="display: flex;margin-top: 10px;justify-content: center;align-items: baseline">
              <div style="width: 250px;margin: 0 0 0 10px;height: 45px">
                <el-select v-model="remoteControlValue" placeholder="请选择设备" style="width: 100%" @change="getRemoteControlCheckChange">
                  <el-option
                      v-for="item in remoteControlList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                  </el-option>
                </el-select>
              </div>
              <div style="margin-left: 20px;height: 45px">
                <el-tag v-if="remoteControlCheck" type="success" style="height: 40px;line-height: 40px;font-size: 18px">权限</el-tag>
                <el-tag v-else type="danger" style="height: 40px;line-height: 40px;font-size: 18px">权限</el-tag>
                <el-button type="text" icon="el-icon-refresh" style="font-size: 20px" @click="getRemoteControlCheckChange"></el-button>
              </div>
            </el-row>
            <div style="border: 1px solid #6c6c6c;padding: 0 5px;margin-top: 10px"></div>
            <el-row style="margin-top: 20px;text-align: center">
              <el-button :disabled="!remoteControlCheck" type="success" size="small" icon="el-icon-bangzhu" style="width: 145px;height: 51px;font-size: 20px;" @mousedown.native="LoopStart_Down" @mouseup.native="LoopStart_Up">循环启动</el-button>
              <el-button :disabled="!remoteControlCheck" size="small" icon="el-icon-refresh" style="width: 145px;height: 51px;font-size: 20px;margin-left: 30px" @mousedown.native="LoopStop_Down" @mouseup.native="LoopStop_Up">循环停止</el-button>
            </el-row>
            <el-row style="margin-top: 20px;text-align: center">
              <el-button :disabled="!remoteControlCheck" type="danger" size="small" icon="el-icon-bangzhu" style="width: 145px;height: 51px;font-size: 20px;" @mousedown.native="LoopReSet_Down" @mouseup.native="LoopReSet_Up">复位</el-button>
            </el-row>
            <el-row v-show="!remoteControlMsgCheck" style="margin-top: 20px;text-align: center;color: #ff0000">{{remoteControlMsg}}</el-row>
            <el-row v-show="remoteControlMsgCheck" style="margin-top: 20px;text-align: center;color: #00893d">{{remoteControlMsg}}</el-row>
          </div>
          <div style="color: white;float: left;width: 832px;">
              <div style="width: 746px;height: 452px;margin-left: 55px;margin-top: 60px;">
                  <div style="width: 100%;text-align: center;font-size: 43px;color: #0FDAE6;">
                      实时数据分析
                  </div>
                  <div style="width: 90%;height: 335px;margin: 10px auto 0">
                      <table style="table-layout:fixed;font-size: 30px;width: 100%;text-align: center;">
                          <tr style="height: 55px">
                              <td colspan="25"/>
                              <td colspan="25">今日计划</td>
                              <td colspan="25">当前完成</td>
                              <td colspan="25">完成率</td>
                          </tr>
                          <tr style="height: 55px">
                              <td colspan="25">
                                  <div class="tableStation" style="background-color: #AE4653">
                                      底 漆
                                  </div>
                              </td>
                              <td colspan="25">{{ tableDataTask[0].任务数 }}</td>
                              <td colspan="25">{{ tableDataTask[0].完成数 }}</td>
                              <td colspan="25">{{ tableDataTask[0].完成率 }}</td>
                          </tr>
                          <tr style="height: 55px">
                              <td colspan="25">
                                  <div class="tableStation" style="background-color: #50A770">
                                      腻 子
                                  </div>
                              </td>
                              <td colspan="25">{{ tableDataTask[1].任务数 }}</td>
                              <td colspan="25">{{ tableDataTask[1].完成数 }}</td>
                              <td colspan="25">{{ tableDataTask[1].完成率 }}</td>
                          </tr>
                          <!--<tr style="height: 57px">
                              <td colspan="25">
                                  <div class="tableStation" style="background-color: #097EC2">
                                      中 涂
                                  </div>
                              </td>
                              <td colspan="25">{{ tableDataTask[2].任务数 }}</td>
                              <td colspan="25">{{ tableDataTask[2].完成数 }}</td>
                              <td colspan="25">{{ tableDataTask[2].完成率 }}</td>
                          </tr>-->
                          <tr style="height: 55px">
                              <td colspan="25">
                                  <div class="tableStation" style="background-color: #7E44B3">
                                      中涂面漆
                                  </div>
                              </td>
                              <td colspan="25">{{ tableDataTask[3].任务数 }}</td>
                              <td colspan="25">{{ tableDataTask[3].完成数 }}</td>
                              <td colspan="25">{{ tableDataTask[3].完成率 }}</td>
                          </tr>
                          <tr style="height: 55px">
                              <td colspan="25">
                                  <div class="tableStation" style="background-color: rgb(217,157,57)">
                                      接 车
                                  </div>
                              </td>
                              <td colspan="25">{{ tableDataTask[4].任务数 }}</td>
                              <td colspan="25">{{ tableDataTask[4].完成数 }}</td>
                              <td colspan="25">{{ tableDataTask[4].完成率 }}</td>
                          </tr>
                          <tr style="height: 55px">
                              <td colspan="25">
                                  <div class="tableStation" style="background-color: rgb(237,125,49)">
                                      交 车
                                  </div>
                              </td>
                              <td colspan="25">{{ tableDataTask[5].任务数 }}</td>
                              <td colspan="25">{{ tableDataTask[5].完成数 }}</td>
                              <td colspan="25">{{ tableDataTask[5].完成率 }}</td>
                          </tr>
                      </table>
                  </div>
              </div>
              <div style="width: 746px;height: 582px;margin-left: 55px;margin-top: 50px;">
                  <div style="width: 100%;text-align: center;font-size: 43px;color: #0FDAE6;">
                      车体位置监控
                  </div>
                  <div style="float: right;margin-top: 15px;margin-right: 20px">总台位{{ allCarStation }}/在线车辆{{ CarStationOnline }}</div>
                  <div style="width: 100%;margin-left: 0px;margin-top: 50px;height: 510px;">
                      <div style="height: 100%;width: 231px;float: left;border-right:1px solid white;border-top:1px solid white;border-bottom:1px solid white;display: inline-block">
                          <div v-for="(item, index) in stationObjectLeft" :key = "index" class="station">
                              <div style="height: 50%;width: 100%;border-bottom:1px solid white;">
                                  <div style="width: 100%;margin: 5px auto 0;text-align: center; transform: scale(0.8);-webkit-transform: scale(0.8);">
                                      {{ item[0].stationNumber }}
                                  </div>
                                  <div v-if="item[0].state===1" style="width: 24px;height: 24px;border-radius: 50%;background-color: green;margin-left: 4px;margin-top: 5px"></div>
                                  <div v-else-if="item[0].state===2" style="width: 24px;height: 24px;border-radius: 50%;background-color: yellow;margin-left: 4px;margin-top: 5px"></div>
                                  <div v-else-if="item[0].state===3" style="width: 24px;height: 24px;border-radius: 50%;background-color: red;margin-left: 4px;margin-top: 5px"></div>
                                  <div v-else-if="item[0].state===4" style="width: 24px;height: 24px;border-radius: 50%;background-color: #c4c4c4;margin-left: 4px;margin-top: 5px"></div>
                                  <div v-else style="width: 24px;height: 24px;border-radius: 50%;background-color: transparent;margin-left: 4px;margin-top: 5px"></div>
                                  <el-popover
                                          popper-class="popoverBackB"
                                          placement="top-start"
                                          width="220"
                                          trigger="hover">
                                      <!--<span style="color: black;font-weight: bold">车体：{{ carNumber }}<br/>工序：{{ procedureName }}<br/>开始时间：{{ startTime }}<br/>标准节拍：{{ ratedBeat }}<br/>实时节拍：{{ realTimeBeat }}<br/>温度：{{ temperature }}<br/>湿度：{{ humidity }}</span>-->
                                      <span style="color: black;font-weight: bold">车体：{{ carNumber }}<br/>工序：{{ procedureName }}</span>
                                      <div v-show="item[0].show === 1" slot="reference" style="width: 24px;height: 107px;margin: 45px auto 20px;background-color: RGB(255,220,2)" @mouseover="divHover(item[0].stationNumber)"></div>
                                  </el-popover>
                              </div>
                              <div style="width: 100%;height: 107px;margin: 50px auto 12px;">
                                  <el-popover
                                          popper-class="popoverBackB"
                                          placement="top-start"
                                          class="popover"
                                          width="220"
                                          trigger="hover">
                                      <!--<span style="color: black;font-weight: bold">车体：{{ carNumber }}<br/>工序：{{ procedureName }}<br/>开始时间：{{ startTime }}<br/>标准节拍：{{ ratedBeat }}<br/>实时节拍：{{ realTimeBeat }}<br/>温度：{{ temperature }}<br/>湿度：{{ humidity }}</span>-->
                                      <span style="color: black;font-weight: bold">车体：{{ carNumber }}<br/>工序：{{ procedureName }}</span>
                                      <div v-show="item[1].show === 1" slot="reference" style="width: 24px;height: 107px;margin: auto;background-color: RGB(255,220,2)" @mouseover="divHover(item[1].stationNumber)"></div>
                                  </el-popover>
                              </div>
                              <div v-if="item[1].state===1" style="width: 24px;height: 24px;border-radius: 50%;background-color: green;margin-left: 4px;margin-top: 50px"></div>
                              <div v-else-if="item[1].state===2" style="width: 24px;height: 24px;border-radius: 50%;background-color: yellow;margin-left: 4px;margin-top: 50px"></div>
                              <div v-else-if="item[1].state===3" style="width: 24px;height: 24px;border-radius: 50%;background-color: red;margin-left: 4px;margin-top: 50px"></div>
                              <div v-else-if="item[1].state===4" style="width: 24px;height: 24px;border-radius: 50%;background-color: #c4c4c4;margin-left: 4px;margin-top: 50px"></div>
                              <div v-else style="width: 24px;height: 24px;border-radius: 50%;background-color: transparent;margin-left: 4px;margin-top: 50px"></div>
                              <div style="width: 100%;margin: 5px auto 0;text-align: center; transform: scale(0.8);-webkit-transform: scale(0.8);">
                                  {{ item[1].stationNumber }}
                              </div>
                          </div>
                      </div>
                      <div style="height: 100%;width: 495px;margin-left: 15px;float: left;border-right:1px solid white;border-top:1px solid white;border-bottom:1px solid white;display: inline-block">
                          <div v-for="(item, index) in stationObjectRight" :key = "index" class="station">
                              <div style="height: 50%;width: 100%;border-bottom:1px solid white;">
                                  <div style="width: 100%;margin: 5px auto 0;text-align: center; transform: scale(0.8);-webkit-transform: scale(0.8);">
                                      {{ item[0].stationNumber }}
                                  </div>
                                  <div v-if="item[0].state===1" style="width: 24px;height: 24px;border-radius: 50%;background-color: green;margin-left: 4px;margin-top: 5px"></div>
                                  <div v-else-if="item[0].state===2" style="width: 24px;height: 24px;border-radius: 50%;background-color: yellow;margin-left: 4px;margin-top: 5px"></div>
                                  <div v-else-if="item[0].state===3" style="width: 24px;height: 24px;border-radius: 50%;background-color: red;margin-left: 4px;margin-top: 5px"></div>
                                  <div v-else-if="item[0].state===4" style="width: 24px;height: 24px;border-radius: 50%;background-color: #c4c4c4;margin-left: 4px;margin-top: 5px"></div>
                                  <div v-else style="width: 24px;height: 24px;border-radius: 50%;background-color: transparent;margin-left: 4px;margin-top: 5px"></div>
                                  <el-popover
                                          popper-class="popoverBackB"
                                          placement="top-start"
                                          width="220"
                                          trigger="hover">
                                      <!--<span style="color: black;font-weight: bold">车体：{{ carNumber }}<br/>工序：{{ procedureName }}<br/>开始时间：{{ startTime }}<br/>标准节拍：{{ ratedBeat }}<br/>实时节拍：{{ realTimeBeat }}<br/>温度：{{ temperature }}<br/>湿度：{{ humidity }}</span>-->
                                      <span style="color: black;font-weight: bold">车体：{{ carNumber }}<br/>工序：{{ procedureName }}</span>
                                      <div v-show="item[0].show === 1" slot="reference" style="width: 24px;height: 107px;margin: 45px auto 20px;background-color: RGB(255,220,2)" @mouseover="divHover(item[0].stationNumber)"></div>
                                  </el-popover>
                              </div>
                              <div style="width: 100%;height: 107px;margin: 50px auto 12px;">
                                  <el-popover
                                          popper-class="popoverBackB"
                                          placement="top-start"
                                          class="popover"
                                          width="220"
                                          trigger="hover">
                                      <!--<span style="color: black;font-weight: bold">车体：{{ carNumber }}<br/>工序：{{ procedureName }}<br/>开始时间：{{ startTime }}<br/>标准节拍：{{ ratedBeat }}<br/>实时节拍：{{ realTimeBeat }}<br/>温度：{{ temperature }}<br/>湿度：{{ humidity }}</span>-->
                                      <span style="color: black;font-weight: bold">车体：{{ carNumber }}<br/>工序：{{ procedureName }}</span>
                                      <div v-show="item[1].show === 1" slot="reference" style="width: 24px;height: 107px;margin: auto;background-color: RGB(255,220,2)" @mouseover="divHover(item[1].stationNumber)"></div>
                                  </el-popover>
                              </div>
                              <div v-if="item[1].state===1" style="width: 24px;height: 24px;border-radius: 50%;background-color: green;margin-left: 4px;margin-top: 50px"></div>
                              <div v-else-if="item[1].state===2" style="width: 24px;height: 24px;border-radius: 50%;background-color: yellow;margin-left: 4px;margin-top: 50px"></div>
                              <div v-else-if="item[1].state===3" style="width: 24px;height: 24px;border-radius: 50%;background-color: red;margin-left: 4px;margin-top: 50px"></div>
                              <div v-else-if="item[1].state===4" style="width: 24px;height: 24px;border-radius: 50%;background-color: #c4c4c4;margin-left: 4px;margin-top: 50px"></div>
                              <div v-else style="width: 24px;height: 24px;border-radius: 50%;background-color: transparent;margin-left: 4px;margin-top: 50px"></div>
                              <div style="width: 100%;margin: 5px auto 0;text-align: center; transform: scale(0.8);-webkit-transform: scale(0.8);">
                                  {{ item[1].stationNumber }}
                              </div>
                          </div>
                      </div>
                  </div>
              </div>
              <div style="width: 746px;height: 632px;margin-left: 55px;margin-top: 115px;">
                  <div style="width: 100%;text-align: center;font-size: 43px;color: #0FDAE6;cursor: pointer;margin-top: 10px" @click="twinChange0('')">
                      数字孪生监控
                  </div>
                  <div style="width: 100%;height: 234px;position: relative;margin-top: 20px">
                    <div style="position: absolute;left: 25px;top: 172px;">
                      <el-button style="width: 190px;height: 65px;font-size: 25px;" type="warning" @click="showRemoteControl">孪生反向控制</el-button>
                    </div>
                      <div class="workingProcedure" style="left: 30px;top: 10px;color: green">
                          <span>喷砂</span>
                          <div class="workingProcedure1" style="height: 42px" @click="twinChange('B1023')">B1023</div>
                      </div>
                      <!--<div class="workingProcedure" style="left: 10px;top: 170px" @click="twinChange2('B1023')">-->
                      <!--喷砂2-->
                      <!--</div>-->
                      <!--<div class="workingProcedure" style="left: 10px;top: 310px" @click="twinChange3('B1023')">
                          底漆1
                      </div>-->
                      <!--<div class="workingProcedure" style="left: 10px;top: 450px" @click="twinChange4('B1023')">
                          底漆2
                      </div>-->
                      <img style="position: absolute;left: 110px;top: 15px;width: 40px;height: 40px" src="../img/rightArrow.png" alt="">
                      <img style="position: absolute;left: 250px;top: 15px;width: 40px;height: 40px" src="../img/rightArrow.png" alt="">
                      <img style="position: absolute;left: 400px;top: 15px;width: 40px;height: 40px" src="../img/rightArrow.png" alt="">
                      <img style="position: absolute;left: 560px;top: 15px;width: 40px;height: 40px" src="../img/rightArrow.png" alt="">
                      <div class="workingProcedure" style="left: 170px;top: 10px;color: green">
                          底漆
                          <div class="workingProcedure1" style="height: 40px" @click="twinChange3('B1034')">B1034</div>
                      </div>
                      <div class="workingProcedure" style="left: 305px;top: 10px;color: green">
                          打磨
                          <div class="workingProcedure1" style="height: 42px" @click="twinChange4('B1016')">B1016</div>
                      </div>
                      <div class="workingProcedure" style="left: 460px;top: 10px;color: green">
                          中涂
                          <div class="workingProcedure1" style="height: 42px" @click="twinChange5('B1021')">B1021</div>
                          <div class="workingProcedure1" style="height: 42px;margin-top: 2px" @click="twinChange2('B1033')">B1033</div>
                      </div>
                      <!--                        <div class="workingProcedure" style="left: 430px;top: 310px" @click="twinChange7">-->
                      <!--                            中涂2-->
                      <!--                        </div>-->
                      <div class="workingProcedure" style="left: 620px;top: 10px;color: green">
                          面漆
                          <div class="workingProcedure1" style="height: 42px;width: 70px">
                              <span @click="twinChange6('B1027')">B1027</span>
                          </div>
                          <div class="workingProcedure1" style="height: 42px;width: 70px;margin-top: 2px">
                              <span @click="twinChange7('B1029')">B1029</span>
                          </div>
                          <div class="workingProcedure1" style="height: 42px;width: 70px;margin-top: 2px">
                              <span @click="twinChange8('B1040')">B1040</span>
                          </div>
                          <div class="workingProcedure1" style="height: 42px;width: 70px;margin-top: 2px">
                              <span @click="twinChange9('B1041')">B1041</span>
                          </div>
                      </div>
                      <!--                        <div class="workingProcedure" style="left: 640px;top: 170px" @click="twinChange9">-->
                      <!--                            面漆2-->
                      <!--                        </div>-->
                      <!--                        <div class="workingProcedure" style="left: 640px;top: 310px" @click="twinChange10">-->
                      <!--                            面漆3-->
                      <!--                        </div>-->
                      <!--                        <div class="workingProcedure" style="left: 640px;top: 450px" @click="twinChange11">-->
                      <!--                            面漆4-->
                      <!--                        </div>-->
                  </div>
                  <div style="width: 100%;text-align: center;font-size: 43px;color: #0FDAE6;">
                  设备OEE
                  </div>
                  <div class="grid-content bg-purple" style="margin-right: 11px">
                      <div style="width: 100%;height: 250px;text-align: center;color:#fff;margin-top: 0px;margin-left: 10px">
                          <div id="myChart140" style="width: 100%;height: 250px;float: right;border: #5B9BD5 solid 0px;margin-bottom: 0px;top: 5px;left: 10px"/>
                      </div>
                  </div>
                  <!--<div style="width: 100%;text-align: center;font-size: 43px;color: #0FDAE6;">-->
                  <!--安防监控系统-->
                  <!--</div>-->
                  <!--<div class="jiankong"></div>-->
              </div>
          </div>
          <div style="float: left;width: 2444px;height: 1915px">
              <div v-if="showIframe" style="height: 1795px;width: 2401px;margin-left: 12px;margin-top: 120px;position: absolute">
                  <iframe v-if="digitalTwin === 1" frameborder=0 scrolling=no :src= "scrDt + '?B1023'" style="width: 100%;height:100%;"></iframe>
                  <iframe v-else-if="digitalTwin === 2" frameborder=0 scrolling=no :src= "scrDt + '?B1033'" style="width: 100%;height:100%;"></iframe>
                  <iframe v-else-if="digitalTwin === 3" frameborder=0 scrolling=no :src= "scrDt + '?B1034'" style="width: 100%;height:100%;"></iframe>
                  <iframe v-else-if="digitalTwin === 4" frameborder=0 scrolling=no :src= "scrDt + '?B1016'" style="width: 100%;height:100%;"></iframe>
                  <iframe v-else-if="digitalTwin === 5" frameborder=0 scrolling=no :src= "scrDt + '?B1021'" style="width: 100%;height:100%;"></iframe>
                  <iframe v-else-if="digitalTwin === 6" frameborder=0 scrolling=no :src= "scrDt + '?B1027'" style="width: 100%;height:100%;"></iframe>
                  <iframe v-else-if="digitalTwin === 7" frameborder=0 scrolling=no :src= "scrDt + '?B1029'" style="width: 100%;height:100%;"></iframe>
                  <iframe v-else-if="digitalTwin === 8" frameborder=0 scrolling=no :src= "scrDt + '?B1040'" style="width: 100%;height:100%;"></iframe>
                  <iframe v-else-if="digitalTwin === 9" frameborder=0 scrolling=no :src= "scrDt + '?B1041'" style="width: 100%;height:100%;"></iframe>
                  <iframe v-else frameborder=0 scrolling=no :src= "scrDt" style="width: 100%;height:100%;"></iframe>
              </div>
              <el-collapse-transition>
                <div v-if="showTwinData" style="z-index: 99;position: relative;float: right;right: 50px;top: 130px;width: 500px;background-color: #0f27568a">
                  <div style="border: 2px solid #cbcbcb;border-bottom-width:0px;text-align: center;color: #fff;font-size: 2rem;height: 70px;line-height: 70px;font-weight: bolder">
                    智能设备生产信息
                  </div>
                  <div style="border: 1px solid #cbcbcb;text-align: center;color: #fff;font-size: 1.5rem">
                    <div v-for="(item, index) in digitalTwinData" :key="index" style="display: flex">
                      <div style="border: 1px solid #cbcbcb;flex: 2;height: auto;display: flex;align-items: center;justify-content: center;">{{ item['参数名称'] }}</div>
                      <div style="border: 1px solid #cbcbcb;flex: 3;height: auto;display: flex;align-items: center;justify-content: center;">{{ item['参数值'] }}</div>
                      <div style="border: 1px solid #cbcbcb;flex: 1;height: auto;display: flex;align-items: center;justify-content: center;">{{ item['单位'] }}</div>
                    </div>
                  </div>
                </div>
              </el-collapse-transition>
          </div>
          <div style="color: white;float: left;width: 820px">
              <div style="width: 746px;height: 475px;margin-left: 25px;margin-top: 59px">
                  <div style="width: 100%;text-align: center;font-size: 43px;color: #0FDAE6;">
                      能耗监控
                  </div>
                  <div style="width: 95%;height: 335px;margin: 0 auto 0">
                      <div>
                          <el-select v-model="powerType" style="width: 100px" size="mini" @change="searchEnergy()">
                              <el-option
                                      v-for="item in power"
                                      :key="item.value"
                                      :label="item.label"
                                      :value="item.value"/>
                          </el-select>
                          <el-checkbox v-model="dayItem" style="margin-left: 20px" @change="changeItem(1)">日</el-checkbox>
                          <el-checkbox v-model="weekItem" @change="changeItem(2)">周</el-checkbox>
                          <el-checkbox v-model="monthItem" @change="changeItem(3)">月</el-checkbox>
                          <el-checkbox v-model="yearItem" @change="changeItem(4)">年</el-checkbox>
                      </div>
                      <div style="margin-top: 20px;display: flex;justify-content: center">
                          <div style="height: 57px;width: 350px;background-color: rgb(175,70,84);display: flex;justify-content: center;align-items: center">
                            <span style="font-size: 18px;">碳排放总量&nbsp;&nbsp;</span>
                            <span style="font-size: 32px;font-weight: bolder">{{ tanTotal }}</span>
                            <span style="font-size: 18px;">&nbsp;&nbsp;kg</span>
                          </div>
                          <!--<div style="height: 57px;width: 140px;background-color: rgb(80,167,112);float: left;margin-left: 70px">
                              <span style="font-size: 16px;margin-left: 21px;margin-top: 20px">生产车辆总数</span><br>
                              <span style="font-size: 30px;display: flex;flex-direction: column;align-items: center;">{{ carTotal }}</span>
                          </div>-->
                          <!--                          <div style="height: 57px;width: 140px;background-color: rgb(9,126,195);float: left;margin-left: 70px">-->
                          <!--                              <span style="font-size: 16px;margin-left: 15px;margin-top: 20px">单车碳排放量kg</span><br>-->
                          <!--                              <span style="font-size: 30px;display: flex;flex-direction: column;align-items: center;">{{ tanOne }}</span>-->
                          <!--                          </div>-->
                      </div>
                      <div id="myChart5" style="width: 700px; height: 89%;float: left;">
                      </div>
                  </div>
              </div>
              <div style="width: 746px;height: 662px;margin-left: 25px;margin-top: 18px;">
                  <div style="width: 100%;text-align: center;font-size: 43px;color: #0FDAE6;">
                      涂料消耗
                      <!--财务材料实时成本-->
                  </div>
                  <!--<table>
                      <colgroup>
                          <col style="width: 80px">
                          <col style="width: 200px">
                          <col style="width: 280px">
                          <col style="width: 150px">
                      </colgroup>
                      <thead>
                      <th style="font-size: 20px">序号</th>
                      <th style="font-size: 20px">项目名称</th>
                      <th style="font-size: 20px">成本对象名称</th>
                      <th style="font-size: 20px">原材料（万元）</th>
                      </thead>
                  </table>
                  <vue-seamless-scroll ref="seamlessScroll" :class-option="classOption" :data="tableData10" style="height: 570px;overflow: hidden">
                      <div v-for="(item, index) in tableData10" :key="index" style="display: flex">
                          <div style="width: 80px;padding: 12px 0;text-align: center" v-text="item.opName"></div>
                          <div style="width: 200px;padding: 12px 0;text-align: center" v-text="item.motorcycleType"></div>
                          <div style="width: 280px;padding: 12px 0;text-align: center" v-text="item.time"></div>
                          <div style="width: 150px;padding: 12px 0;text-align: center" v-text="item.startTime"></div>
                      </div>
                  </vue-seamless-scroll>-->
                  <div style="margin-left: 50px">
                      <el-checkbox v-model="isAuto" style="margin-left: 20px" @change="changeAuto()">自动</el-checkbox>
                      <el-select :disabled="isAuto" v-model="projectType" style="width: 130px" size="mini" @change="changeD">
                          <el-option
                                  v-for="item in project"
                                  :key="item.value"
                                  :label="item.label"
                                  :value="item.value"/>
                      </el-select>
                      <el-checkbox v-model="isBar" style="margin-left: 20px" @change="changeD()">柱状图</el-checkbox>
                  </div>
                  <!--<div id="myChart1" style="width: 50%; height: 44%;float: left;">-->
                  <!--</div>-->
                  <!--<div id="myChart2" style="width: 50%; height: 44%;float: left;">-->
                  <!--</div>-->
                  <el-popover placement="bottom" width="745" trigger="hover">
                      <el-table :data="number2" :header-cell-style="{background: '#19466E',color: 'white'}" border highlight-current-row size="mini">
                          <el-table-column width="90" align="center">
                              <template slot-scope="scope">
                                  {{ scope.row.油漆 }}
                              </template>
                          </el-table-column>
                          <el-table-column v-for="items in cars" :key="items.index" :label="items" width="55" :prop="items" align="center">
                              <template slot-scope="scope">
                                  {{ getDataName(scope.row, items) }}
                              </template>
                          </el-table-column>
                          <!--<el-table-column width="55" align="center" label="0101">
                              <template slot-scope="scope">
                                  {{ scope.row.数据1 }}
                              </template>
                          </el-table-column>
                          <el-table-column width="55" align="center" label="0102">
                              <template slot-scope="scope">
                                  {{ scope.row.数据2 }}
                              </template>
                          </el-table-column>
                          <el-table-column width="55" label="0103" align="center">
                              <template slot-scope="scope">
                                  {{ scope.row.数据3 }}
                              </template>
                          </el-table-column>
                          <el-table-column width="55" label="0104" align="center">
                              <template slot-scope="scope">
                                  {{ scope.row.数据4 }}
                              </template>
                          </el-table-column>
                          <el-table-column width="55" label="0105" align="center">
                              <template slot-scope="scope">
                                  {{ scope.row.数据5 }}
                              </template>
                          </el-table-column>
                          <el-table-column width="55" label="0106" align="center">
                              <template slot-scope="scope">
                                  {{ scope.row.数据6 }}
                              </template>
                          </el-table-column>
                          <el-table-column width="55" label="0201" align="center">
                              <template slot-scope="scope">
                                  {{ scope.row.数据7 }}
                              </template>
                          </el-table-column>
                          <el-table-column width="55" label="0202" align="center">
                              <template slot-scope="scope">
                                  {{ scope.row.数据8 }}
                              </template>
                          </el-table-column>
                          <el-table-column width="55" label="0203" align="center">
                              <template slot-scope="scope">
                                  {{ scope.row.数据9 }}
                              </template>
                          </el-table-column>
                          <el-table-column width="55" label="0204" align="center">
                              <template slot-scope="scope">
                                  {{ scope.row.数据10 }}
                              </template>
                          </el-table-column>
                          <el-table-column width="55" label="0205" align="center">
                              <template slot-scope="scope">
                                  {{ scope.row.数据11 }}
                              </template>
                          </el-table-column>
                          <el-table-column width="55" label="0206" align="center">
                              <template slot-scope="scope">
                                  {{ scope.row.数据12 }}
                              </template>
                          </el-table-column>-->
                      </el-table>
                      <div v-show="!isBar" slot="reference" id="myChart3" style="width: 100%; height: 83%;float: left;">
                      </div>
                  </el-popover>
                  <el-popover placement="bottom" width="745" trigger="hover">
                      <el-table :data="number4" :header-cell-style="{background: '#19466E',color: 'white'}" border highlight-current-row size="mini">
                          <el-table-column width="80" align="center">
                              <template slot-scope="scope">
                                  {{ scope.row.油漆 }}
                              </template>
                          </el-table-column>
                          <el-table-column v-for="items in cars1" :key="items.index" :label="items" width="55" :prop="items" align="center">
                              <template slot-scope="scope">
                                  {{ getDataName(scope.row, items) }}
                              </template>
                          </el-table-column>
                          <!--<el-table-column width="55" align="center" label="0101">
                              <template slot-scope="scope">
                                  {{ scope.row.数据1 }}
                              </template>
                          </el-table-column>
                          <el-table-column width="55" align="center" label="0102">
                              <template slot-scope="scope">
                                  {{ scope.row.数据2 }}
                              </template>
                          </el-table-column>
                          <el-table-column width="55" label="0103" align="center">
                              <template slot-scope="scope">
                                  {{ scope.row.数据3 }}
                              </template>
                          </el-table-column>
                          <el-table-column width="55" label="0104" align="center">
                              <template slot-scope="scope">
                                  {{ scope.row.数据4 }}
                              </template>
                          </el-table-column>
                          <el-table-column width="55" label="0105" align="center">
                              <template slot-scope="scope">
                                  {{ scope.row.数据5 }}
                              </template>
                          </el-table-column>
                          <el-table-column width="55" label="0106" align="center">
                              <template slot-scope="scope">
                                  {{ scope.row.数据6 }}
                              </template>
                          </el-table-column>
                          <el-table-column width="55" label="0201" align="center">
                              <template slot-scope="scope">
                                  {{ scope.row.数据7 }}
                              </template>
                          </el-table-column>
                          <el-table-column width="55" label="0202" align="center">
                              <template slot-scope="scope">
                                  {{ scope.row.数据8 }}
                              </template>
                          </el-table-column>
                          <el-table-column width="55" label="0203" align="center">
                              <template slot-scope="scope">
                                  {{ scope.row.数据9 }}
                              </template>
                          </el-table-column>
                          <el-table-column width="55" label="0204" align="center">
                              <template slot-scope="scope">
                                  {{ scope.row.数据10 }}
                              </template>
                          </el-table-column>
                          <el-table-column width="55" label="0205" align="center">
                              <template slot-scope="scope">
                                  {{ scope.row.数据11 }}
                              </template>
                          </el-table-column>
                          <el-table-column width="55" label="0206" align="center">
                              <template slot-scope="scope">
                                  {{ scope.row.数据12 }}
                              </template>
                          </el-table-column>-->
                      </el-table>
                      <div v-show="isBar" slot="reference" id="myChart6" style="width: 700px; height: 560px;float: left;">
                      </div>
                  </el-popover>
              </div>
              <div style="width: 746px;height: 682px;margin-left: 25px;margin-top: 30px;">
                  <div style="width: 100%;text-align: center;font-size: 43px;color: #0FDAE6;">
                      设备状态监控
                  </div>
                  <div id="myChart4" style="width: 100%; height: 54%;margin: auto;">
                  </div>
                  <div style="width: 100%;text-align: center;font-size: 43px;color: #0FDAE6;">
                      <span style="margin-left: -100px">视频监控</span>
                      <el-select v-model="stationNumberValue" :disabled="selectChangeDis" placeholder="台位" size="mini" filterable class="selectDiv" @change="searchTableVideo(stationNumberValue)">
                          <el-option
                                  v-for="item in stationNumber"
                                  :key="item.value"
                                  :label="item.label"
                                  :value="item.value"
                                  size="mini"/>
                      </el-select>
                  </div>
                  <div>
                  <el-col :span="8"  style="height:200px">
                    <iframe  v-if="isShowVideo1" id="void1" frameborder=0 scrolling=no :src="'./NJZZMonitoringDemo/index.html?ip=10.22.20.'+src+'&pos=1'" style="width: 100%;height:0px;z-index:999;position:relative;"></iframe>
                    <el-button @click="showPlugin(1)" icon="el-icon-video-camera-solid" type="warning" style="width:80%;margin:130px 0 0 40px;height:40px;font-size:20px;line-height:8px;">全屏查看</el-button>
                  </el-col>
                  <el-col :span="8" style="height:200px">
                    <iframe v-if="isShowVideo2" id="void2" frameborder=0 scrolling=no :src="'./NJZZMonitoringDemo/index.html?ip=10.22.20.'+src1+'&pos=2'" style="width: 100%;height:0px;z-index:999;position:relative;"></iframe>
                    <el-button @click="showPlugin(2)" icon="el-icon-video-camera-solid" type="warning" style="width:80%;margin:130px 0 0 10px;height:40px;font-size:20px;line-height:8px;">全屏查看</el-button>
                  </el-col>
                  <el-col :span="8"  style="height:200px">
                    <iframe  v-if="isShowVideo3" id="void3" frameborder=0 scrolling=no :src="'./NJZZMonitoringDemo/index.html?ip=10.22.20.'+src2+'&pos=3'" style="width: 100%;height:0px;z-index:999;position:relative;"></iframe>
                    <el-button @click="showPlugin(3)" icon="el-icon-video-camera-solid" type="warning" style="width:80%;margin:130px 0 0 -10px;height:40px;font-size:20px;line-height:8px;">全屏查看</el-button>
                  </el-col>
                  </div>
                  <!--                    <div class="jiankong"></div>-->
              </div>
          </div>
        </el-row>
        
        <div  style="height:95vh;width:100vw;position: fixed;top:0px;left:0px;background-color: #fff;z-index:-9999;overflow: hidden;">
          <div id="divPlugin2222" style="height:95vh;width:100vw;position: fixed;top:000px;left:000px;background-color: #fff;z-index:-99999;"></div>
        </div>
        <el-button v-if="isShowPluginDialog" :disabled="isEnableVideo" style="position: fixed;bottom:0px;left:0px;height:5vh;width:100vw;z-index:9999;font-size:1.5vw;" type="primary" @click="pluginDialogClose()">退出监控</el-button>
    </div>
  </template>
  
  <script>
  import * as echarts from 'echarts'
  // import { videoPlayer } from 'vue-video-player'
  import 'video.js/dist/video-js.css'
  import 'videojs-flash'
  let dashboard1 = null
  let dashboard2 = null
  let dashboard3 = null
  let dashboard4 = null
  let dashboard21 = null
  // const dashboard22 = null
  export default {
  data() {
    return {
      tableData10: [
        {
          opName: 1,
          motorcycleType: '南京5号线',
          time: '南京5号线第21列转向架',
          startTime: '267.21'
        }, {
          opName: 2,
          motorcycleType: '',
          time: '南京5号线第22列转向架',
          startTime: '101.38'
        }, {
          opName: 3,
          motorcycleType: '',
          time: '南京5号线第23列转向架',
          startTime: '70.10'
        }, {
          opName: 4,
          motorcycleType: '',
          time: '南京5号线第24列转向架',
          startTime: '65.99'
        }, {
          opName: 5,
          motorcycleType: '',
          time: '南京5号线第25列转向架',
          startTime: '11.47'
        }, {
          opName: 6,
          motorcycleType: '南京7号线',
          time: '南京7号线第46列转向架',
          startTime: '13.05'
        }, {
          opName: 7,
          motorcycleType: '',
          time: '南京7号线第47列转向架',
          startTime: '12.16'
        }, {
          opName: 8,
          motorcycleType: '',
          time: '南京7号线第48列转向架',
          startTime: '12.15'
        }, {
          opName: 9,
          motorcycleType: '',
          time: '南京7号线第49列转向架',
          startTime: '9.76'
        }, {
          opName: 10,
          motorcycleType: '',
          time: '南京7号线第50列转向架',
          startTime: '9.76'
        }, {
          opName: 11,
          motorcycleType: '',
          time: '南京7号线第51列转向架',
          startTime: '0.09'
        }, {
          opName: 12,
          motorcycleType: '',
          time: '南京7号线第52列转向架',
          startTime: '0.09'
        }, {
          opName: 13,
          motorcycleType: '徐州6号线一期',
          time: '徐州6号线一期项目第1列车',
          startTime: '242.33'
        }, {
          opName: 14,
          motorcycleType: '',
          time: '徐州6号线一期项目第2列车',
          startTime: '39.19'
        }, {
          opName: 15,
          motorcycleType: '苏州7号线',
          time: '苏州7号线升级项目第1列车',
          startTime: '392.41'
        }, {
          opName: 16,
          motorcycleType: '',
          time: '苏州7号线升级项目第3列车',
          startTime: '374.93'
        }, {
          opName: 17,
          motorcycleType: '',
          time: '苏州7号线升级项目第4列车',
          startTime: '386.34'
        }, {
          opName: 18,
          motorcycleType: '',
          time: '苏州7号线升级项目第5列车',
          startTime: '370.39'
        }, {
          opName: 19,
          motorcycleType: '',
          time: '苏州7号线升级项目第6列车',
          startTime: '76.00'
        }, {
          opName: 20,
          motorcycleType: '',
          time: '苏州7号线升级项目第7列车',
          startTime: '70.12'
        }, {
          opName: 21,
          motorcycleType: '',
          time: '苏州7号线升级项目第8列车',
          startTime: '61.52'
        }, {
          opName: 22,
          motorcycleType: '',
          time: '苏州7号线升级项目第9列车',
          startTime: '62.70'
        }, {
          opName: 23,
          motorcycleType: '',
          time: '苏州7号线升级项目第10列车',
          startTime: '62.25'
        }, {
          opName: 24,
          motorcycleType: '',
          time: '苏州7号线升级项目第11列车',
          startTime: '52.72'
        }, {
          opName: 25,
          motorcycleType: '',
          time: '苏州7号线升级项目第12列车',
          startTime: '52.27'
        }, {
          opName: 26,
          motorcycleType: '贵阳S1号线',
          time: '贵阳市轨道交通S1号线一期工程车辆采购项目第3列车',
          startTime: '420.07'
        }, {
          opName: 27,
          motorcycleType: '',
          time: '贵阳市轨道交通S1号线一期工程车辆采购项目第4列车',
          startTime: '414.28'
        }, {
          opName: 28,
          motorcycleType: '',
          time: '贵阳市轨道交通S1号线一期工程车辆采购项目第5列车',
          startTime: '417.83'
        }, {
          opName: 29,
          motorcycleType: '',
          time: '贵阳市轨道交通S1号线一期工程车辆采购项目第6列车',
          startTime: '421.43'
        }, {
          opName: 30,
          motorcycleType: '',
          time: '贵阳市轨道交通S1号线一期工程车辆采购项目第7列车',
          startTime: '190.56'
        }, {
          opName: 31,
          motorcycleType: '',
          time: '贵阳市轨道交通S1号线一期工程车辆采购项目第8列车',
          startTime: '69.22'
        }, {
          opName: 32,
          motorcycleType: '',
          time: '贵阳市轨道交通S1号线一期工程车辆采购项目第9列车',
          startTime: '68.12'
        }, {
          opName: 33,
          motorcycleType: '',
          time: '贵阳市轨道交通S1号线一期工程车辆采购项目第10列车',
          startTime: '67.61'
        }, {
          opName: 34,
          motorcycleType: '',
          time: '贵阳市轨道交通S1号线一期工程车辆采购项目第11列车',
          startTime: '67.60'
        }, {
          opName: 35,
          motorcycleType: '',
          time: '贵阳市轨道交通S1号线一期工程车辆采购项目第12列车',
          startTime: '67.60'
        }, {
          opName: 36,
          motorcycleType: '苏州8号线',
          time: '苏州8号线第22列车',
          startTime: '278.73'
        }, {
          opName: 37,
          motorcycleType: '',
          time: '苏州8号线第23列车',
          startTime: '247.37'
        }, {
          opName: 38,
          motorcycleType: '',
          time: '苏州8号线第24列车',
          startTime: '61.24'
        }, {
          opName: 39,
          motorcycleType: '',
          time: '苏州8号线第25列车',
          startTime: '62.17'
        }, {
          opName: 40,
          motorcycleType: '',
          time: '苏州8号线第26列车',
          startTime: '61.32'
        }, {
          opName: 41,
          motorcycleType: '',
          time: '苏州8号线第28列车',
          startTime: '54.15'
        }, {
          opName: 42,
          motorcycleType: '',
          time: '苏州8号线第29列车',
          startTime: '54.15'
        }, {
          opName: 43,
          motorcycleType: '',
          time: '苏州8号线第30列车',
          startTime: '54.20'
        }, {
          opName: 44,
          motorcycleType: '',
          time: '苏州8号线第31列车',
          startTime: '54.25'
        }, {
          opName: 45,
          motorcycleType: '',
          time: '苏州8号线第32列车',
          startTime: '54.15'
        }, {
          opName: 46,
          motorcycleType: '',
          time: '苏州8号线第33列车',
          startTime: '54.20'
        }, {
          opName: 47,
          motorcycleType: '',
          time: '苏州8号线第34 列车',
          startTime: '54.20'
        }],
      classOption: {
        step: 0.2,
        direction: 1,
        limitMoveNum: 5,
        hoverStop: false
      },
      selectType: 1,
      allCarStation: 0,
      CarStationOnline: 0,
      currentStation: '',
      showTwinData: false,
      scrDt: window.dt_Config.scrDt,
      src: '',
      src1: '',
      src2: '',
      isShowVideo1: false,
      isShowVideo2: false,
      isShowVideo3: false,
      stationNumberValue: 'B1016',
      stationNumber: [],
      playerOptions: {
        height: '520',
        sources: [
          {
            type: 'rtmp/mp4',
            src: 'rtmp://58.200.131.2:1935/livetv/cctv1'
          }
        ],
        techOrder: ['flash'],
        autoplay: true,
        controls: true,
        poster: ''
      },
      carNumber: '',
      procedureName: '',
      startTime: '',
      ratedBeat: '',
      realTimeBeat: '',
      temperature: '',
      humidity: '',
      dingeNumber: [],
      dingeNumber1: [],
      tableDataTask: [
        {
          任务数: 0,
          完成数: 0,
          完成率: '0%'
        }, {
          任务数: 0,
          完成数: 0,
          完成率: '0%'
        }, {
          任务数: 0,
          完成数: 0,
          完成率: '0%'
        }, {
          任务数: 0,
          完成数: 0,
          完成率: '0%'
        }, {
          任务数: 0,
          完成数: 0,
          完成率: '0%'
        }, {
          任务数: 0,
          完成数: 0,
          完成率: '0%'
        }],
      tableDataA: [
        {
          油漆名称: '蓝色面漆',
          数据1: 220,
          数据2: 212,
          数据3: 221,
          数据4: 234,
          数据5: 210,
          数据6: 230,
          数据7: 220,
          数据8: 211,
          数据9: 234,
          数据10: 210,
          数据11: 230,
          数据12: 220
        }, {
          油漆名称: '红色面漆',
          数据1: 210,
          数据2: 217,
          数据3: 211,
          数据4: 214,
          数据5: 208,
          数据6: 220,
          数据7: 210,
          数据8: 212,
          数据9: 224,
          数据10: 212,
          数据11: 210,
          数据12: 221
        }, {
          油漆名称: '白色面漆',
          数据1: 220,
          数据2: 212,
          数据3: 221,
          数据4: 234,
          数据5: 210,
          数据6: 214,
          数据7: 220,
          数据8: 211,
          数据9: 234,
          数据10: 210,
          数据11: 220,
          数据12: 230
        }, {
          油漆名称: '黑色面漆',
          数据1: 180,
          数据2: 182,
          数据3: 171,
          数据4: 174,
          数据5: 190,
          数据6: 180,
          数据7: 182,
          数据8: 181,
          数据9: 180,
          数据10: 180,
          数据11: 175,
          数据12: 178
        }, {
          油漆名称: '灰色面漆',
          数据1: 190,
          数据2: 192,
          数据3: 201,
          数据4: 194,
          数据5: 190,
          数据6: 200,
          数据7: 200,
          数据8: 201,
          数据9: 194,
          数据10: 190,
          数据11: 190,
          数据12: 200
        }, {
          油漆名称: '灰色中涂',
          数据1: 230,
          数据2: 232,
          数据3: 241,
          数据4: 234,
          数据5: 220,
          数据6: 240,
          数据7: 210,
          数据8: 211,
          数据9: 234,
          数据10: 220,
          数据11: 240,
          数据12: 210
        }, {
          油漆名称: '底漆',
          数据1: 240,
          数据2: 232,
          数据3: 231,
          数据4: 224,
          数据5: 220,
          数据6: 240,
          数据7: 230,
          数据8: 221,
          数据9: 234,
          数据10: 230,
          数据11: 234,
          数据12: 230
        }],
      tableDataB: [
        {
          油漆名称: '底漆',
          数据1: 240,
          数据2: 232,
          数据3: 231,
          数据4: 224,
          数据5: 220,
          数据6: 240,
          数据7: 230,
          数据8: 221,
          数据9: 234,
          数据10: 230,
          数据11: 234,
          数据12: 230
        }, {
          油漆名称: '中涂',
          数据1: 230,
          数据2: 232,
          数据3: 241,
          数据4: 234,
          数据5: 220,
          数据6: 240,
          数据7: 210,
          数据8: 211,
          数据9: 234,
          数据10: 220,
          数据11: 240,
          数据12: 210
        }, {
          油漆名称: '面漆',
          数据1: 1020,
          数据2: 1015,
          数据3: 1025,
          数据4: 1050,
          数据5: 1008,
          数据6: 1044,
          数据7: 1032,
          数据8: 1016,
          数据9: 1066,
          数据10: 1002,
          数据11: 1025,
          数据12: 1049
        }],
      powerType: '电耗',
      power: [
        {
          label: '电耗',
          value: '电耗'
        }, {
          label: '气耗',
          value: '气耗'
        }],
      projectType: '',
      project: [],
      config: {
        data: [],
        columnWidth: [650, 300],
        align: ['left', 'center'],
        waitTime: 2000,
        rowNum: 4
      },
      tanTotal: 0,
      tanTotal1: 0,
      carTotal: 0,
      carTotal1: 0,
      tanOne: 0,
      tanOne1: 0,
      energyLegend: ['昨日', '本日', '昨日涂装车辆', '本日涂装车辆'],
      energyX: [],
      energyData1: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      energyData2: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      energyData3: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      energyData4: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      energyName1: '昨日',
      energyName2: '本日',
      energyName3: '昨日涂装车辆',
      energyName4: '本日涂装车辆',
      isBar: false,
      isAuto: true,
      dayItem: true,
      weekItem: false,
      monthItem: false,
      yearItem: false,
      table1: [],
      colors: [],
      state: [],
      showIframe: true,
      digitalTwin: 0,
      digitalTwinData: [],
      timer: null,
      timer1: null,
      timer2: null,
      timer3: null,
      timer4: null,
      year: '',
      month: '',
      day: '',
      minute: '',
      hour: '',
      second: '',
      week: '',
      list: [1, 23, 4, 5, 3, 32, 4],
      stationObjectLeft: [
        [
          {
            stationNumber: 'B1039',
            show: 0,
            state: 0
          },
          {
            stationNumber: 'B1038',
            show: 0,
            state: 0
          }
        ],
        [
          {
            stationNumber: '',
            show: 0,
            state: 0
          },
          {
            stationNumber: 'B1037',
            show: 0,
            state: 0
          }
        ],
        [
          {
            stationNumber: 'B1041',
            show: 0,
            state: 0
          },
          {
            stationNumber: '',
            show: 0,
            state: 0
          }
        ],
        [
          {
            stationNumber: '',
            show: 0,
            state: 0
          },
          {
            stationNumber: 'B1040',
            show: 0,
            state: 0
          }
        ],
        [
          {
            stationNumber: 'B1034',
            show: 0,
            state: 0
          },
          {
            stationNumber: 'B1032',
            show: 0,
            state: 0
          }
        ],
        [
          {
            stationNumber: '',
            show: 0,
            state: 0
          },
          {
            stationNumber: 'B1031',
            show: 0,
            state: 0
          }
        ],
        [
          {
            stationNumber: 'B1033',
            show: 0,
            state: 0
          },
          {
            stationNumber: 'B1030',
            show: 0,
            state: 0
          }
        ]
      ],
      stationObjectRight: [
        [
          {
            stationNumber: 'B1029',
            show: 0,
            state: 0
          },
          {
            stationNumber: 'B1028',
            show: 0,
            state: 0
          }
        ],
        [
          {
            stationNumber: 'B1027',
            show: 0,
            state: 0
          },
          {
            stationNumber: 'B1026',
            show: 0,
            state: 0
          }
        ],
        [
          {
            stationNumber: 'B1025',
            show: 0,
            state: 0
          },
          {
            stationNumber: 'B1024',
            show: 0,
            state: 0
          }
        ],
        [
          {
            stationNumber: 'B1023',
            show: 0,
            state: 0
          },
          {
            stationNumber: '',
            show: 0,
            state: 0
          }
        ],
        [
          {
            stationNumber: '',
            show: 0,
            state: 0
          },
          {
            stationNumber: 'B1021',
            show: 0,
            state: 0
          }
        ],
        [
          {
            stationNumber: 'B1020',
            show: 0,
            state: 0
          },
          {
            stationNumber: 'B1019',
            show: 0,
            state: 0
          }
        ],
        [
          {
            stationNumber: 'B1018',
            show: 0,
            state: 0
          },
          {
            stationNumber: 'B1017',
            show: 0,
            state: 0
          }
        ],
        [
          {
            stationNumber: 'B1016',
            show: 0,
            state: 0
          },
          {
            stationNumber: 'B1015',
            show: 0,
            state: 0
          }
        ],
        [
          {
            stationNumber: 'B1014',
            show: 0,
            state: 0
          },
          {
            stationNumber: 'B1013',
            show: 0,
            state: 0
          }
        ],
        [
          {
            stationNumber: 'B1012',
            show: 0,
            state: 0
          },
          {
            stationNumber: 'B1011',
            show: 0,
            state: 0
          }
        ],
        [
          {
            stationNumber: 'B1010',
            show: 0,
            state: 0
          },
          {
            stationNumber: 'B1009',
            show: 0,
            state: 0
          }
        ],
        [
          {
            stationNumber: 'B1008',
            show: 0,
            state: 0
          },
          {
            stationNumber: 'B1007',
            show: 0,
            state: 0
          }
        ],
        [
          {
            stationNumber: 'B1006',
            show: 0,
            state: 0
          },
          {
            stationNumber: 'B1005',
            show: 0,
            state: 0
          }
        ],
        [
          {
            stationNumber: 'B1004',
            show: 0,
            state: 0
          },
          {
            stationNumber: 'B1003',
            show: 0,
            state: 0
          }
        ],
        [
          {
            stationNumber: 'B1002',
            show: 0,
            state: 0
          },
          {
            stationNumber: 'B1001',
            show: 0,
            state: 0
          }
        ]
      ],
      xdata: 96,
      zdata: 98,
      ydata: 80,
      tableData: [],
      cars: [],
      cars1: [],
      number100: 0,
      numberGroup: [],
      numberGroup1: [],
      typeValue: [],
      typeValue1: [],
      number1: [],
      number2: [],
      number3: [],
      number4: [],
      number5: [],
      number6: [],
      number7: [],
      number8: [],
      number9: [],
      number10: [],
      number11: [],
      number12: [],
      state1: 0,
      launchPlan: '7',
      launchCompletion: '15',
      onlinePlan: '3',
      onlineCompletion: '5',
      deliveryPlan: '5',
      deliveryCompletion: '6',
      remoteControlMsg: '',
      remoteControlMsgCheck: false,
      remoteControlDialogVisible: false,
      remoteControlValue: 'B1021',
      remoteControlCheck: false,
      selectChangeDis:false,
      remoteControlList: [
        {
          value: 'B1021',
          label: '中涂 B1021'
        },
        {
          value: 'B1033',
          label: '中涂 B1033'
        },
        {
          value: 'B1034',
          label: '底漆 B1034'
        }
      ],
      loginSzDeviceIdentify:'',
      isShowPluginDialog:false,
    }
  },
  created() {
    this.getProjectData()
    this.addFullscreenChangeEvent()
  },
  mounted() {
    this.toggleFullScreen()
    this.initEcharts()
    this.getProjectData().then(res => {
      this.initShow3()
      this.initShow()
      this.getTwinData()
    })
    this.timer1 = setInterval(() => {
      this.initShow()
    }, 1 * 60 * 1000)
    this.timer3 = setInterval(() => {
      this.initShow3()
    }, 1 * 20 * 1000)
    this.timer2 = setInterval(() => {
      this.initShow2()
    }, 20 * 1000)
    this.timer = setInterval(() => {
      this.year = 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.startTimer()
    setTimeout(()=>{
      // this.searchTableVideo('B1016')
    },500)
  
    // setInterval(()=>{
    //   this.searchTableVideo(this.stationNumberValue)
    // },1000 * 60 * 8)
  },
  beforeDestroy() {
    clearInterval(this.timer1)
    clearInterval(this.timer2)
    clearInterval(this.timer3)
    clearInterval(this.timer4)
    clearInterval(this.timer)
  },
  methods: {
    showPlugin(index){
      this.isEnableVideo = true
      this.isShowPluginDialog = true
      let url = '10.22.20.'
      if(index == 1) url += this.src
      if(index == 2) url += this.src1
      if(index == 3) url += this.src2
      this.src = ''
      this.src1 = ''
      this.src2 = ''
      this.I_InitPlugin(url)
      setTimeout(()=>{
        this.isEnableVideo = false
      },1000 * 3)
    },
    pluginDialogClose(){
      this.outPlugin()
    },
    outPlugin() {
      console.log("触发了关闭！")
      let that = this
      WebVideoCtrl.I_HidPlugin().then(() => {
        console.log('隐藏成功!')
      }).catch(() => {
        console.log('隐藏失败!')
      })
      let szDeviceIdentify  = this.loginSzDeviceIdentify
      WebVideoCtrl.I_DestroyPlugin(szDeviceIdentify)
      WebVideoCtrl.I_StopAllPlay();//停止全部播放
      if(szDeviceIdentify != ''){
        WebVideoCtrl.I_Logout(szDeviceIdentify).then(() => {
          console.log(szDeviceIdentify + " " + "退出成功！")
          that.loginSzDeviceIdentify = ''
        }, () => {
          console.log(szDeviceIdentify + " " + "退出失败！")
        });
      }
      this.isShowPluginDialog = false
      setTimeout(()=>{
        this.searchTableVideo(this.stationNumberValue)
      },1000)
    },
    I_InitPlugin(ip){
      console.log('开始初始化 ip' + this.ip)
      let that = this
      // 初始化插件参数及插入插件
      WebVideoCtrl.I_InitPlugin({
        bEmbed: true,
        bWndFull: false,     //是否支持单窗口双击全屏，默认支持 true:支持 false:不支持
        iWndowType: 1,
        cbInitPluginComplete: function () {
          WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin2222").then(() => {
            // 检查插件是否最新
            WebVideoCtrl.I_CheckPluginVersion().then((bFlag) => {
              if (bFlag) {
                alert("检测到新的插件版本，双击开发包目录里的HCWebSDKPlugin.exe升级！");
              }
            });
            console.log("divPlugin2222","插件初始化成功");
            that.I_Login(ip,80,'admin','abcd1234')
          }, (error) => {
            console.log(error);
            alert("插件初始化失败，请确认是否已安装插件；如果未安装，请双击开发包目录里的HCWebSDKPlugin.exe安装！");
          });
        }
      });
    },
    I_Login(I_IP,I_Port,I_UserName,I_Password){
      var that = this;
      var res = WebVideoCtrl.I_Login(
          I_IP,
          1,
          I_Port,
          I_UserName,
          I_Password,
          {
            // async: false,
            success: function (xmlDoc) {
              console.log(I_IP,I_Port,I_UserName,I_Password,"登录成功");
              // 记录登陆成功的IP用于退出登陆
              that.loginSzDeviceIdentify = I_IP+'_'+I_Port
              // var xmlDoc = WebVideoCtrl.I_GetLocalCfg();
              // console.info(xmlDoc);
              // that.loginNvrs.push(obj);
              setTimeout(() => {
                that.getChannelInfo(I_IP, I_Port);
              }, 30);
            },
            error: function (oError) {
              console.log(I_IP,I_Port,I_UserName,I_Password, " 登录失败！", oError.errorCode, oError.errorMsg)
            },
          }
      );
    },
    getChannelInfo(nvrIp, nvrPort) {
      var that = this;
      // var szIP = that.szIP;
      // 模拟通道
      WebVideoCtrl.I_GetAnalogChannelInfo(nvrIp, {
        // async: false,
        success: function (xmlDoc) {
          var oChannels = $(xmlDoc).find("VideoInputChannel");
          var nvrObj = { title: nvrIp, expand: false, children: [] };
          $.each(oChannels, function (i, val) {
            var id = $(this).find("id").eq(0).text(),
                name = $(this).find("name").eq(0).text(),
                online = $(this).find("online").eq(0).text(),
                port = $(this).find("managePortNo").eq(0).text(),
                ipAddress = $(this).find("ipAddress").eq(0).text();
            // console.info("id:" + id + " name:" + name + " online:" + online);
            if ("false" == online) {
              // 过滤禁用的数字通道
              return true;
            }
            nvrObj.children.push({
              title: name,
              id: id,
              channel: id,
              ip: ipAddress,
              nvrIp: nvrIp,
              port: port,
              nvrPort: nvrPort,
            });
            console.log(nvrObj)
          });
          // that.nvrTree.push(nvrObj);
          console.log("获取模拟通道成功！");
          that.I_startRealPlay(nvrIp,nvrPort,nvrObj.children[0].id,1)
        },
        error: function (error) {
          console.log(
              "获取模拟通道失败！" + error + WebVideoCtrl.I_GetLastError()
          );
        },
      });
    },
    // iStreamType = 视频码流 1 2 3 4  主码流 子码流 第三码流 转码码流
    I_startRealPlay(I_IP,I_Port,I_ChannelsID,iStreamType = 1){
      var oWndInfo = WebVideoCtrl.I_GetWindowStatus(),
          szDeviceIdentify = I_IP+'_'+I_Port,
          iRtspPort = 554,
          iChannelID = I_ChannelsID,
          bZeroChannel = false,
          szInfo = "";
      if (null == szDeviceIdentify) {
        return;
      }
      var startRealPlay = function () {
        console.log(szDeviceIdentify,{
          iStreamType: iStreamType,
          iChannelID: iChannelID,
          bZeroChannel: bZeroChannel,
          iPort: iRtspPort
        })
        WebVideoCtrl.I_StartRealPlay(szDeviceIdentify, {
          iStreamType: iStreamType,
          iChannelID: iChannelID,
          bZeroChannel: bZeroChannel,
          iPort: iRtspPort,
          success: function () {
            szInfo = szDeviceIdentify + "开始预览成功！";
            console.log(szInfo)
          },
          error: function (oError) {
            console.log(szDeviceIdentify + " 开始预览失败！", oError.errorCode, oError.errorMsg)
          }
        });
      };
      console.log(oWndInfo,oWndInfo.length > 0)
      if (oWndInfo.length > 0 ) {// 已经在播放了，先停止
        console.log('重新开始播放',oWndInfo)
        WebVideoCtrl.I_Stop({
          success: function () {
            console.log('重新开始播放')
            startRealPlay();
          },
          error: function (oError) {
            console.log(" 停止预览失败！", oError.errorCode, oError.errorMsg)
          }
        });
      } else {
        console.log('开始播放')
        startRealPlay();
      }
    },
    clickIframe(index){
      console.log('点击了iframe',index)
    },
    addFullscreenChangeEvent() {
      const fullscreenChange = 'fullscreenchange';
      const mozFullScreenChange = 'mozfullscreenchange';
      const fullscreenEventNames = [fullscreenChange, mozFullScreenChange];
  
      fullscreenEventNames.forEach(eventName => {
        document.addEventListener(eventName, this.searchTableVideo(this.stationNumberValue));
      });
    },
    // 全屏切换方法
    toggleFullScreen() {
      console.log('触发全屏')
      if (!document.fullscreenElement) {
        this.enterFullScreen();
      } else {
        this.exitFullScreen();
      }
      // setTimeout(()=>{
      //   this.searchTableVideo(this.stationNumberValue)
      // },2000)
    },
    enterFullScreen() {
      let element = document.documentElement;
      if (element.requestFullscreen) {
        element.requestFullscreen();
      } else if (element.mozRequestFullScreen) { /* Firefox */
        element.mozRequestFullScreen();
      } else if (element.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
        element.webkitRequestFullscreen();
      } else if (element.msRequestFullscreen) { /* IE/Edge */
        element.msRequestFullscreen();
      }
    },
    exitFullScreen() {
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.mozCancelFullScreen) { /* Firefox */
        document.mozCancelFullScreen();
      } else if (document.webkitExitFullscreen) { /* Chrome, Safari and Opera */
        document.webkitExitFullscreen();
      } else if (document.msExitFullscreen) { /* IE/Edge */
        document.msExitFullscreen();
      }
    },
    initEcharts() {
      dashboard1 = echarts.init(document.getElementById('myChart5'))
      dashboard2 = echarts.init(document.getElementById('myChart3'))
      dashboard3 = echarts.init(document.getElementById('myChart4'))
      dashboard4 = echarts.init(document.getElementById('myChart6'))
      dashboard21 = echarts.init(document.getElementById('myChart140'))
    },
    initShow() {
      this.getStationNumber()
      this.divShow()
      this.searchTableTask()
      this.getCarStationData()
      this.getStationAlarm()
      this.getMonthOee()
    },
    initShow2() {
      this.getTwinData()
    },
    initShow3() {
      this.searchEnergy()
      this.initCharts()
    },
    initCharts() {
      this.createChart3()
      this.createChart4()
      this.searchTable1()
      this.createChart6()
    },
  
    async getMonthOee() {
      var param = []
      var Data = this.CreateData('11', '大屏幕_设备OEE_查询数据', param)
      this.ExecDatabase(Data).then(res => {
        res.data.forEach((ele) => {
          ele.实际 = (parseFloat(ele.实际) * 100).toFixed(1)
        })
        if (res.data.length > 0) {
          const dataParamsX = []
          const dataParamsY1 = []
          const dataParamsY2 = []
          const dataParamsY3 = []
          for (const iterator of res.data) {
            dataParamsX.push(iterator['设备'])
            dataParamsY1.push(iterator['昨实际'])
            dataParamsY2.push(iterator['本实际'])
            dataParamsY3.push(iterator['额定'])
          }
          this.createChart21(dataParamsX, dataParamsY1, dataParamsY2, dataParamsY3)
        }
      })
    },
    createChart21(dataParamsX, dataParamsY1, dataParamsY2, dataParamsY3) {
      const option = {
        tooltip: {},
        legend: {
          bottom: -0,
          textStyle: {
            color: '#fff'
          }
        },
        grid: {
          top: '5%',
          bottom: '10%',
          left: '5%',
          width: '90%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: dataParamsX,
          axisLabel: {
            fontSize: 14,
            color: '#fff',
            interval: 0 // 使x轴横坐标全部显示
          },
          axisTick: {
            alignWithLabel: true
          }
        },
        yAxis: {
          type: 'value',
          splitLine: {
            show: false
          },
          axisLabel: {
            fontSize: 14,
            color: '#fff'
          }
        },
        series: [
          {
            name: '昨日OEE(%)',
            data: dataParamsY1,
            barMaxWidth: 30,
            type: 'bar',
            label: {
              show: true,
              position: 'inside',
              offset: [0, -10],
              color: '#fff',
              fontSize: 10,
              formatter: function(params) {
                if (params.value === '0') {
                  // 标签内容
                  return ''
                } else {
                  // 标签内容
                  return params.value + '%'
                }
              }
            },
            itemStyle: {
              color: '#e6a23c'
            }
          },
          {
            name: '今日OEE(%)',
            data: dataParamsY2,
            barMaxWidth: 30,
            type: 'bar',
            label: {
              show: true,
              position: 'inside',
              offset: [0, -10],
              color: '#fff',
              fontSize: 10,
              formatter: function(params) {
                if (params.value === '0') {
                  // 标签内容
                  return ''
                } else {
                  // 标签内容
                  return params.value + '%'
                }
              }
            },
            itemStyle: {
              color: '#2aba90'
            }
          },
          {
            name: '目标OEE(%)',
            data: dataParamsY3,
            type: 'line',
            itemStyle: {
              color: '#ffffff'
            }
          }
        ]
      }
      option && dashboard21.setOption(option)
      // })
    },
    // 获取权限
    getRemoteControlCheckChange() {
      this.remoteControlMsgCheck = true
      this.remoteControlMsg = ''
      this.remoteControlCheck = false
      if (this.remoteControlValue === '') {
        return
      }
      const url = '/Read_RemoteControl'
      const params = {
        opName: this.remoteControlValue
      }
      this.ExecPlc_1(url, params).then(res => {
        const result = res.data.TagValue.toLowerCase()
        switch (result) {
          case 'true':
          case '1':
          case 1:
            this.remoteControlCheck = true
            break
          default:
            this.remoteControlCheck = false
        }
      }).catch(res => {
        console.log('Read_RemoteControl', res)
        this.remoteControlCheck = false
      })
    },
    // 获取权限
    getRemoteControlCheck() {
      this.remoteControlCheck = false
      if (this.remoteControlValue === '') {
        return
      }
      const url = '/Read_RemoteControl'
      const params = {
        opName: this.remoteControlValue
      }
      this.ExecPlc_1(url, params).then(res => {
        const result = res.data.TagValue.toLowerCase()
        switch (result) {
          case 'true':
          case '1':
          case 1:
            this.remoteControlCheck = true
            break
          default:
            this.remoteControlCheck = false
        }
      }).catch(res => {
        console.log('Read_RemoteControl', res)
        this.remoteControlCheck = false
      })
    },
    // 循环开始 按下
    LoopStart_Down() {
      if (!this.remoteControlCheck) {
        this.remoteControlMsgCheck = false
        this.remoteControlMsg = '请先获取设备的权限！'
        return
      }
      const url = '/Write_LoopStart'
      const params = {
        opName: this.remoteControlValue,
        tagValue: 1
      }
      this.ExecPlc_1(url, params).then(res => {
        console.log('LoopStart_Down', res)
        if (res.data.Result) {
          this.remoteControlMsgCheck = true
          this.remoteControlMsg = '循环开始功能置位成功！'
        } else {
          this.remoteControlMsgCheck = false
          this.remoteControlMsg = '循环开始功能置位失败,请检查权限！'
        }
      }).catch(res => {
        console.log('LoopStart_Down_error', res)
        this.remoteControlMsgCheck = false
        this.remoteControlMsg = '循环开始功能置位失败！'
      })
    },
    // 循环开始 松开
    LoopStart_Up() {
      if (!this.remoteControlCheck) {
        this.remoteControlMsgCheck = false
        this.remoteControlMsg = '请先获取设备的权限！'
        return
      }
      const url = '/Write_LoopStart'
      const params = {
        opName: this.remoteControlValue,
        tagValue: 0
      }
      this.ExecPlc_1(url, params).then(res => {
        console.log('LoopStart_Up', res)
        if (res.data.Result) {
          this.remoteControlMsg = '循环开始功能复位成功！'
          this.remoteControlMsgCheck = true
        } else {
          this.remoteControlMsgCheck = false
          this.remoteControlMsg = '循环开始功能复位失败,请检查权限！'
        }
      }).catch(res => {
        this.remoteControlMsg = '循环开始功能复位失败！'
        this.remoteControlMsgCheck = false
        console.log('LoopStart_Up_error', res)
      })
    },
    // 循环停止 按下
    LoopStop_Down() {
      if (!this.remoteControlCheck) {
        this.remoteControlMsgCheck = false
        this.remoteControlMsg = '请先获取设备的权限！'
        return
      }
      const url = '/Write_LoopStop'
      const params = {
        opName: this.remoteControlValue,
        tagValue: 1
      }
      this.ExecPlc_1(url, params).then(res => {
        console.log('LoopStop_Down', res)
        if (res.data.Result) {
          this.remoteControlMsgCheck = true
          this.remoteControlMsg = '循环停止功能置位成功！'
        } else {
          this.remoteControlMsgCheck = false
          this.remoteControlMsg = '循环停止功能置位失败,请检查权限！'
        }
      }).catch(res => {
        this.remoteControlMsg = '循环停止功能置位失败！'
        this.remoteControlMsgCheck = false
        console.log('LoopStop_Down_error', res)
      })
    },
    // 循环停止 松开
    LoopStop_Up() {
      if (!this.remoteControlCheck) {
        this.remoteControlMsg = '请先获取设备的权限！'
        this.remoteControlMsgCheck = false
        return
      }
      const url = '/Write_LoopStop'
      const params = {
        opName: this.remoteControlValue,
        tagValue: 0
      }
      this.ExecPlc_1(url, params).then(res => {
        console.log('LoopStop_Up', res)
        if (res.data.Result) {
          this.remoteControlMsgCheck = true
          this.remoteControlMsg = '循环停止功能复位成功！'
        } else {
          this.remoteControlMsgCheck = false
          this.remoteControlMsg = '循环停止功能复位失败,请检查权限！'
        }
      }).catch(res => {
        this.remoteControlMsgCheck = false
        this.remoteControlMsg = '循环停止复位失败！'
        console.log('LoopStop_Up_error', res)
      })
    },
    // 复位 按下
    LoopReSet_Down() {
      if (!this.remoteControlCheck) {
        this.remoteControlMsgCheck = false
        this.remoteControlMsg = '请先获取设备的权限！'
        return
      }
      const url = '/Write_LoopReSet'
      const params = {
        opName: this.remoteControlValue,
        tagValue: 1
      }
      this.ExecPlc_1(url, params).then(res => {
        console.log('LoopReSet_Down', res)
        if (res.data.Result) {
          this.remoteControlMsgCheck = true
          this.remoteControlMsg = '复位功能置位成功！'
        } else {
          this.remoteControlMsgCheck = false
          this.remoteControlMsg = '复位功能置位失败,请检查权限！'
        }
      }).catch(res => {
        this.remoteControlMsgCheck = false
        this.remoteControlMsg = '复位置位失败！'
        console.log('LoopReSet_Down_error', res)
      })
    },
    // 复位 松开
    LoopReSet_Up() {
      if (!this.remoteControlCheck) {
        this.remoteControlMsgCheck = false
        this.remoteControlMsg = '请先获取设备的权限！'
        return
      }
      const url = '/Write_LoopReSet'
      const params = {
        opName: this.remoteControlValue,
        tagValue: 0
      }
      this.ExecPlc_1(url, params).then(res => {
        console.log('LoopReSet_Up', res)
        if (res.data.Result) {
          this.remoteControlMsgCheck = true
          this.remoteControlMsg = '复位功能复位成功！'
        } else {
          this.remoteControlMsgCheck = false
          this.remoteControlMsg = '复位功能复位失败,请检查权限！'
        }
      }).catch(res => {
        this.remoteControlMsgCheck = false
        this.remoteControlMsg = '复位功能复位失败！'
        console.log('LoopReSet_Up_error', res)
      })
    },
    // 显示控制界面
    showRemoteControl() {
      this.getRemoteControlCheck()
      this.remoteControlDialogVisible = !this.remoteControlDialogVisible
      if (this.remoteControlDialogVisible) {
        this.timer4 = setInterval(() => {
          this.getRemoteControlCheck()
        }, 2000)
      } else {
        clearInterval(this.timer4)
      }
    },
    changeD() {
      if (this.isBar) {
        this.createChart6()
      } else {
        this.createChart3()
      }
    },
    changeAuto() {
      const scope = this
      if (this.isAuto) {
        this.getProjectData().then(res => {
          if (scope.isBar) {
            scope.createChart6()
          } else {
            scope.createChart3()
          }
        })
      }
    },
    getProjectData() {
      return new Promise((resolve) => {
        var param = []
        var Data = this.CreateData('11', '大屏幕_项目名称_查询', param)
        this.ExecDatabase(Data).then(response => {
          if (response.data.length > 0) {
            this.project = []
            for (let i = 0; i < response.data.length; i++) {
              this.project.push({
                label: response.data[i]['项目名称'],
                value: response.data[i]['项目名称']
              })
            }
            this.projectType = response.data[0]['项目名称']
          }
          resolve(true)
        })
      })
    },
    // 能耗监控
    searchEnergy() {
      this.carTotal1 = 0
      this.tanTotal1 = 0
      this.energyData1 = []
      this.energyData2 = []
      this.energyData3 = []
      this.energyData4 = []
      this.energyX = []
      var param = []
      param[0] = ['周期', this.selectType]
      param[1] = ['类型', this.powerType]
      var Data = this.CreateData('11', '大屏幕_能耗监控_查询', param)
      this.ExecDatabase(Data).then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.energyData1[i] = response.data[i].昨数据
          this.energyData2[i] = response.data[i].本数据
          this.energyData3[i] = response.data[i].昨车辆数
          this.energyData4[i] = response.data[i].本车辆数
          this.energyX[i] = response.data[i].台位名称
          this.carTotal1 = this.carTotal1 + response.data[i].本车辆数
          this.tanTotal1 = this.tanTotal1 + response.data[i].本数据
        }
      }).then(() => {
        this.carTotal = this.carTotal1
        this.tanTotal = 0
        this.tanOne = 0
        if (this.powerType === '电耗') {
          this.tanTotal = Math.floor(this.tanTotal1 * 0.785 * 100) / 100
          this.tanTotal1 = 0
        } else {
          this.tanTotal = Math.floor(this.tanTotal1 * 1 * 44 / 12)
          this.tanTotal1 = 0
        }
        if (this.carTotal) {
          this.tanOne = Math.floor(this.tanTotal / this.carTotal * 100) / 100
        } else {
          this.tanOne = 0
        }
        this.createChart5()
      })
    },
    changeItem(val) {
      this.selectType = val
      this.searchEnergy()
      if (val === 1) {
        this.energyLegend = ['昨日', '本日', '昨日涂装车辆', '本日涂装车辆']
        this.energyName1 = '昨日'
        this.energyName2 = '本日'
        this.energyName3 = '昨日涂装车辆'
        this.energyName4 = '本日涂装车辆'
        if (this.dayItem) {
          this.weekItem = false
          this.monthItem = false
          this.yearItem = false
        }
      } else if (val === 2) {
        this.energyLegend = ['上周', '本周', '上周涂装车辆', '本周涂装车辆']
        this.energyName1 = '上周'
        this.energyName2 = '本周'
        this.energyName3 = '上周涂装车辆'
        this.energyName4 = '本周涂装车辆'
        if (this.weekItem) {
          this.dayItem = false
          this.monthItem = false
          this.yearItem = false
        }
      } else if (val === 3) {
        this.energyLegend = ['上月', '本月', '上月涂装车辆', '本月涂装车辆']
        this.energyName1 = '上月'
        this.energyName2 = '本月'
        this.energyName3 = '上月涂装车辆'
        this.energyName4 = '本月涂装车辆'
        if (this.monthItem) {
          this.dayItem = false
          this.weekItem = false
          this.yearItem = false
        }
      } else if (val === 4) {
        this.energyLegend = ['上年', '本年', '上年涂装车辆', '本年涂装车辆']
        this.energyName1 = '上年'
        this.energyName2 = '本年'
        this.energyName3 = '上年涂装车辆'
        this.energyName4 = '本年涂装车辆'
        if (this.yearItem) {
          this.dayItem = false
          this.weekItem = false
          this.monthItem = false
        }
      }
      this.createChart5()
    },
  
    getDataName(scope, items) {
      return scope[items] === null ? 0 : scope[items]
    },
    getStationNumber() {
      this.stationNumber = []
      var param = []
      var Data = this.CreateData('11', '大屏幕_台位名称_查询', param)
      this.ExecDatabase(Data).then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.stationNumber.push({
            label: response.data[i].台位名称,
            value: response.data[i].台位名称
          })
        }
      })
    },
    // 报警信息查询
    getStationAlarm() {
      // var param = []
      // var Data = this.CreateData('11', '大屏幕_报警信息_查询', param)
      // this.ExecDatabase(Data).then(response => {
      //   const newArrayFinal = []
      //   if (response.data.length > 0) {
      //     for (const iterator of response.data) {
      //       newArrayFinal.push(Object.values(iterator))
      //     }
      //     this.$refs.alarmInfoRef.updateRows(newArrayFinal)
      //   }
      // })
    },
    searchTableVideo(val) {
      const scope = this
      this.isShowVideo1 = false
      this.isShowVideo2 = false
      this.isShowVideo3 = false
  
      this.selectChangeDis = true;
      switch (val) {
        case 'B1016':
          this.src = '34'
          // this.src1 = 'http://localhost:8329'
          // this.src1 = '38'
          // this.src2 = '51'
          this.src1 = '38'
          this.src2 = '51'
          break
        case 'B1021':
          this.src = '42'
          this.src1 = '39'
          this.src2 = '30'
          // this.src1 = 'http://localhost:8330'
          break
        case 'B1027':
          this.src = '41'
          // this.src1 = 'http://localhost:8331'
          this.src1 = '53'
          this.src2 = '51'
          break
        case 'B1029':
          this.src = '52'
          // this.src1 = 'http://localhost:8328'
          this.src1 = '49'
          this.src2 = '47'
          break
        case 'B1031':
          this.src = '31'
          // this.src1 = 'http://localhost:8332'
          this.src1 = '45'
          this.src2 = '43'
          break
        case 'B1033':
          this.src = '50'
          // this.src1 = 'http://localhost:8333'
          this.src1 = '37'
          this.src2 = '46'
          break
        case 'B1034':
          this.src = '33'
          // this.src1 = 'http://localhost:8334'
          this.src1 = '32'
          this.src2 = '48'
          break
        case 'B1040':
          this.src = '29'
          // this.src1 = 'http://localhost:8335'
          this.src1 = '44'
          this.src2 = '28'
          break
        case 'B1041':
          this.src = '40'
          // this.src1 = 'http://localhost:8336'
          this.src1 = '27'
          this.src2 = '36'
          break
        default:
          break
      }
      setTimeout(() => {
        this.isShowVideo1 = true
        setTimeout(()=>{
          this.isShowVideo2 = true
          setTimeout(()=>{
            this.isShowVideo3 = true
            setTimeout(()=>{
            this.selectChangeDis= false
            },1000 * 3)
          },1500)
        },1500)
      }, 1500)
  
      // this.src = 'http://localhost:8303'
      // this.src1 = 'http://localhost:8304'
      // this.src2 = 'http://localhost:8300'
      // var param = []
      // param[0] = ['台位名称', this.stationNumberValue]
      // var Data = this.CreateData('11', '大屏幕_摄像头地址_查询', param)
      // this.ExecDatabase(Data).then(response => {
      //   this.src = response.data[0].IP
      //   this.src1 = response.data[1].IP
      //   this.src2 = response.data[2].IP
      // })
    },
    getCarStationData() {
      var param = []
      var Data = this.CreateData('11', '大屏幕_获取在线台位数量_查询', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.length > 0) {
          this.allCarStation = response.data[0]['总台位']
          this.CarStationOnline = response.data[0]['在线车辆']
        }
      })
    },
    searchTableTask() {
      var param = []
      var Data = this.CreateData('11', '大屏幕_工位任务及平准率_查询', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.length > 0) {
          this.tableDataTask = response.data
        }
      })
    },
    divHover(stationName) {
      // $('divHover').hover(function() { var id = $(this).attr('id'); alert(id) })
      var param = []
      param[0] = ['台位名称', stationName]
      var Data = this.CreateData('11', '大屏幕_车间位置_查询', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.length > 0) {
          this.carNumber = response.data[0].车号
          this.procedureName = response.data[0].工序名称
          this.startTime = response.data[0].实际开始
          this.ratedBeat = response.data[0].额定节拍
          this.realTimeBeat = response.data[0].实时节拍
          this.temperature = response.data[0].温度
          this.humidity = response.data[0].湿度
        } else {
          this.carNumber = ''
          this.procedureName = ''
          this.startTime = ''
          this.ratedBeat = ''
          this.realTimeBeat = ''
          this.temperature = ''
          this.humidity = ''
        }
      })
    },
    // 车体位置监控
    divShow() {
      var param = []
      var Data = this.CreateData('11', '大屏幕_车间位置显示_查询', param)
      this.ExecDatabase(Data).then(response => {
        for (let i = 0; i < response.data.length; i++) {
          for (let j = 0; j < this.stationObjectLeft.length; j++) {
            if (response.data[i].台位名称 === this.stationObjectLeft[j][0].stationNumber) {
              this.stationObjectLeft[j][0].show = Number(response.data[i].show)
              this.stationObjectLeft[j][0].state = Number(response.data[i].state)
            }
            if (response.data[i].台位名称 === this.stationObjectLeft[j][1].stationNumber) {
              this.stationObjectLeft[j][1].show = Number(response.data[i].show)
              this.stationObjectLeft[j][1].state = Number(response.data[i].state)
            }
          }
          for (let k = 0; k < this.stationObjectRight.length; k++) {
            if (response.data[i].台位名称 === this.stationObjectRight[k][0].stationNumber) {
              this.stationObjectRight[k][0].show = Number(response.data[i].show)
              this.stationObjectRight[k][0].state = Number(response.data[i].state)
            }
            if (response.data[i].台位名称 === this.stationObjectRight[k][1].stationNumber) {
              this.stationObjectRight[k][1].show = Number(response.data[i].show)
              this.stationObjectRight[k][1].state = Number(response.data[i].state)
            }
          }
        }
      })
    },
    searchTable1() {
      var param1 = []
      var Data1 = this.CreateData('11', 'MES_机加工MES_设备状态查询_初始化', 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.createChart4()
      })
    },
    twinChange0(currentStation) {
      this.stationNumberValue = currentStation
      this.searchTableVideo(this.stationNumberValue)
  
      this.showIframe = false
      this.showTwinData = false
      this.digitalTwin = 0
      setTimeout(() => {
        this.showIframe = true
      }, 200)
      this.currentStation = currentStation
      this.getTwinData()
    },
    twinChange(currentStation) {
      this.stationNumberValue = currentStation
      this.searchTableVideo(this.stationNumberValue)
  
      this.showIframe = false
      this.digitalTwin = 1
      this.showTwinData = false
      setTimeout(() => {
        this.showIframe = true
      }, 200)
      setTimeout(() => {
        this.showTwinData = true
      }, 1000)
      this.currentStation = currentStation
      this.getTwinData()
    },
    twinChange2(currentStation) {
      this.stationNumberValue = currentStation
      this.searchTableVideo(this.stationNumberValue)
  
      this.showIframe = false
      this.digitalTwin = 2
      this.showTwinData = false
      setTimeout(() => {
        this.showIframe = true
      }, 200)
      setTimeout(() => {
        this.showTwinData = true
      }, 1000)
      this.currentStation = currentStation
      this.getTwinData()
    },
    twinChange3(currentStation) {
      this.stationNumberValue = currentStation
      this.searchTableVideo(this.stationNumberValue)
  
      this.showIframe = false
      this.digitalTwin = 3
      setTimeout(() => {
        this.showIframe = true
      }, 200)
      this.showTwinData = false
      setTimeout(() => {
        this.showTwinData = true
      }, 1000)
      this.currentStation = currentStation
      this.getTwinData()
    },
    twinChange4(currentStation) {
      this.stationNumberValue = currentStation
      this.searchTableVideo(this.stationNumberValue)
      
      this.showIframe = false
      this.digitalTwin = 4
      setTimeout(() => {
        this.showIframe = true
      }, 200)
      this.showTwinData = false
      setTimeout(() => {
        this.showTwinData = true
      }, 1000)
      this.currentStation = currentStation
      this.getTwinData()
    },
    twinChange5(currentStation) {
      this.stationNumberValue = currentStation
      this.searchTableVideo(this.stationNumberValue)
  
      this.showIframe = false
      this.digitalTwin = 5
      setTimeout(() => {
        this.showIframe = true
      }, 200)
      this.showTwinData = false
      setTimeout(() => {
        this.showTwinData = true
      }, 1000)
      this.currentStation = currentStation
      this.getTwinData()
    },
    twinChange6(currentStation) {
      this.stationNumberValue = currentStation
      this.searchTableVideo(this.stationNumberValue)
  
      this.showIframe = false
      this.digitalTwin = 6
      setTimeout(() => {
        this.showIframe = true
      }, 200)
      this.showTwinData = false
      setTimeout(() => {
        this.showTwinData = true
      }, 1000)
      this.currentStation = currentStation
      this.getTwinData()
    },
    twinChange7(currentStation) {
      this.stationNumberValue = currentStation
      this.searchTableVideo(this.stationNumberValue)
  
      this.showIframe = false
      this.digitalTwin = 7
      setTimeout(() => {
        this.showIframe = true
      }, 200)
      this.showTwinData = false
      setTimeout(() => {
        this.showTwinData = true
      }, 1000)
      this.currentStation = currentStation
      this.getTwinData()
    },
    twinChange8(currentStation) {
      this.stationNumberValue = currentStation
      this.searchTableVideo(this.stationNumberValue)
  
      this.showIframe = false
      this.digitalTwin = 8
      setTimeout(() => {
        this.showIframe = true
      }, 200)
      this.showTwinData = false
      setTimeout(() => {
        this.showTwinData = true
      }, 1000)
      this.currentStation = currentStation
      this.getTwinData()
    },
    twinChange9(currentStation) {
      this.stationNumberValue = currentStation
      this.searchTableVideo(this.stationNumberValue)
  
      this.showIframe = false
      this.digitalTwin = 9
      setTimeout(() => {
        this.showIframe = true
      }, 200)
      this.showTwinData = false
      setTimeout(() => {
        this.showTwinData = true
      }, 1000)
      this.currentStation = currentStation
      this.getTwinData()
    },
    
    twinChange10(currentStation) {
      // this.showIframe = false
      // this.digitalTwin = 10
      // setTimeout(() => {
      //   this.showIframe = true
      // }, 200)
      // this.showTwinData = false
      // setTimeout(() => {
      //   this.showTwinData = true
      // }, 1000)
      // this.currentStation = currentStation
      // this.getTwinData()
    },
    twinChange11(currentStation) {
      // this.showIframe = false
      // this.digitalTwin = 11
      // setTimeout(() => {
      //   this.showIframe = true
      // }, 200)
      // this.showTwinData = false
      // setTimeout(() => {
      //   this.showTwinData = true
      // }, 1000)
      // this.currentStation = currentStation
      // this.getTwinData()
    },
    getTwinData() {
  
      var param = []
      param[0] = ['工位号', this.currentStation]
      var Data = this.CreateData('11', '大屏幕_数字孪生展示数据_查询', param)
      this.ExecDatabase(Data).then(response => {
        this.digitalTwinData = []
        if (response.data.length > 0) {
          this.digitalTwinData = response.data
        }
      })
    },
  
    createChart3() {
      this.cars = []
      var param = []
      param[0] = ['项目名称', this.projectType]
      var Data = this.CreateData('11', '大屏幕_涂装消耗_车号_查询', param)
      this.ExecDatabase(Data).then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.cars.push(response.data[i].订单编号)
        }
        var Data1 = this.CreateData('11', '大屏幕_涂料消耗_浪型图_查询', param)
        this.ExecDatabase(Data1).then(response => {
          this.number2 = response.data
          this.numberGroup = []
          this.typeValue = []
          this.number5 = []
          for (let i = 0; i < response.data.length; i++) {
            this.number100 = 0
            this.number1 = []
            for (let j = 0; j < this.cars.length; j++) {
              const num = isNaN(parseFloat(response.data[i][this.cars[j]])) ? 0 : parseFloat(response.data[i][this.cars[j]])
              this.number1.push(num)
              this.number100 = this.number100 + num
            }
            this.typeValue.push(response.data[i].油漆)
            this.number5.push(response.data[i].颜色代码)
            this.numberGroup.push({
              name: response.data[i].油漆,
              type: 'line',
              stack: 'Total',
              smooth: true,
              lineStyle: {
                width: 0
              },
              showSymbol: false,
              areaStyle: {
                opacity: 0.8,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: response.data[i].颜色代码
                  },
                  {
                    offset: 1,
                    color: response.data[i].颜色代码
                  }
                ])
              },
              emphasis: {
                focus: 'series'
              },
              data: this.number1
            })
          }
        }).then(() => {
          const option = {
            color: this.number5,
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross',
                label: {
                  backgroundColor: '#6a7985'
                }
              }
            },
            legend: {
              textStyle: {
                color: 'white'
              },
              type: 'scroll',
              orient: 'vertical',
              right: 10,
              top: 150,
              bottom: 20,
              data: this.typeValue
            },
            grid: {
              left: '2%',
              right: '13%',
              bottom: '1%',
              containLabel: true
            },
            xAxis: [
              {
                type: 'category',
                boundaryGap: false,
                data: this.cars,
                axisTick: {
                  show: false
                },
                axisLine: {
                  lineStyle: {
                    color: 'white'
                  }
                }
              }
            ],
            yAxis: [
              {
                type: 'value',
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: 'white'
                  }
                }
                // max: 130
              }
            ],
            series: this.numberGroup
          }
          setTimeout(() => {
            option && dashboard2.setOption(option, true)
          }, 50)
        })
      })
    },
    createChart4() {
      const _this = this
      _this.data = []
      _this.index = 0
      _this.yAxisValue = []
      // for (let i = 0; i < _this.table1.length; i++) { // 取开始结束时间HH-mm，取状态日期yyyy-MM-dd，持续时间
      //   _this.fixDate = _this.table1[0].日期.substr(0, 10)
      //   _this.table1[i].开始时间 = _this.fixDate + ' ' + _this.table1[i].开始时间.substr(11, 5)
      //   _this.table1[i].结束时间 = _this.fixDate + ' ' + _this.table1[i].结束时间.substr(11, 5)
      //   _this.table1[i].日期 = _this.table1[i].日期.substr(0, 10)
      // }
      if (_this.table1.length === 1) {
        _this.data.push({
          itemStyle: { normal: { color: _this.table1[0].颜色 }}, // 条形颜色
          name: _this.table1[0].状态,
          value: [0, _this.table1[0].开始时间, _this.table1[0].结束时间]
        })
      } else {
        for (let i = 0; i < _this.table1.length; i++) {
          if (i < _this.table1.length) {
            if (i === 0) {
              _this.index = 0
              _this.yAxisValue.push(_this.table1[i].工位号)
            } else if (_this.table1[i].工位号 !== _this.table1[i - 1].工位号) {
              _this.index++ // y轴索引
              _this.yAxisValue.push(_this.table1[i].工位号)
            }
          }
          _this.data.push({
            itemStyle: { normal: { color: _this.table1[i].颜色 }}, // 条形颜色
            name: _this.table1[i].状态,
            value: [parseInt(_this.index), _this.table1[i].开始时间, _this.table1[i].结束时间]
          })
        }
      }
      // const myChart = echarts.init(document.getElementById('myChart4'))
      // myChart.clear()
      dashboard3.setOption({
        // title: {
        //   left: 'center',
        //   text: '设备状态分布图',
        //   textStyle: {
        //     color: 'white'
        //   }
        // },
        color: _this.colors,
        tooltip: { // 提示框
          formatter(params) {
            return params.value[1].substr(11, 5) + '~' + params.value[2].substr(11, 5)
          } // 数据的值
        },
        // dataZoom: [
        //   {
        //   type: 'inside',
        //   start: 0,
        //   end: 100
        // },
        //   { // X轴可调
        //   xAxisIndex: 0,
        //   start: 0,
        //   end: 100,
        //   handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
        //   handleSize: '80%',
        //   handleStyle: {
        //     color: '#fff',
        //     shadowBlur: 3,
        //     shadowColor: 'rgba(0, 0, 0, 0.6)',
        //     shadowOffsetX: 2,
        //     shadowOffsetY: 2
        //   }
        // }],
        grid: { // 绘图网格
          left: '10px',
          right: '4%',
          top: '10%',
          bottom: '9%',
          containLabel: true
        },
        legend: { // 图例
          selectedMode: false,
          left: '30px',
          textStyle: {
            color: 'white'
          }
        },
        xAxis: {
          type: 'time',
          axisLine: {
            lineStyle: {
              color: 'white'
            },
            show: true
          },
          axisTick: {
            show: true
          },
          interval: 1000 * 60 * 60 * 2,
          axisLabel: {
            formatter(value) {
              var date = new Date(value)
              return getzf(date.getHours()) + ':' + getzf(date.getMinutes())
              function getzf(num) {
                if (parseInt(num) < 10) {
                  num = '0' + num
                }
                return num
              }
            }
          }
        },
        yAxis: {
          axisLine: {
            lineStyle: {
              color: 'white'
            }
          },
          data: _this.yAxisValue
        },
        series: [
          // 用空bar来显示几个图例
          { name: _this.state[0], type: 'bar', data: [] },
          { name: _this.state[1], type: 'bar', data: [] },
          { name: _this.state[2], type: 'bar', data: [] },
          { name: _this.state[3], type: 'bar', data: [] },
          {
            type: 'custom',
            renderItem(params, api) { // 开发者自定义的图形元素渲染逻辑，是通过书写 renderItem 函数实现的
              var categoryIndex = api.value(0) // 这里使用 api.value(0) 取出当前 dataItem 中第一个维度的数值。
              var start = api.coord([api.value(1), categoryIndex]) // 这里使用 api.coord(...) 将数值在当前坐标系中转换成为屏幕上的点的像素值。
              var end = api.coord([api.value(2), categoryIndex])
              var height = 18 // 柱体宽度
  
              return {
                type: 'rect', // 表示这个图形元素是矩形。还可以是 'circle', 'sector', 'polygon' 等等。
                shape: echarts.graphic.clipRectByRect({ // 矩形的位置和大小。
                  x: start[0],
                  y: start[1] - height / 1,
                  width: end[0] - start[0],
                  height: height * 1.2
                }, { // 当前坐标系的包围盒。
                  x: params.coordSys.x,
                  y: params.coordSys.y,
                  width: params.coordSys.width,
                  height: params.coordSys.height
                }),
                style: api.style()
              }
            },
            encode: {
              x: [1, 2], // data 中『维度1』和『维度2』对应到 X 轴
              y: 0 // data 中『维度0』对应到 Y 轴
            },
            data: _this.data
          }
        ]
      })
    },
    createChart5() {
      // const chartDom = document.getElementById('myChart5')
      // const myChart = echarts.init(chartDom)
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          bottom: -5,
          textStyle: {
            color: 'white'
          },
          data: this.energyLegend
        },
        color: ['#de9b32', '#7e44b3', '#de9b32', '#7e44b3'],
        grid: {
          left: '3%',
          right: '4%',
          bottom: '8%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: this.energyX,
          axisTick: {
            show: false
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: 'white'
            }
          }
        },
        yAxis: [
          {
            type: 'value',
            boundaryGap: [0, 0.01],
            axisTick: {
              show: false
            },
            name: '单位：kW',
            axisLine: {
              show: true,
              lineStyle: {
                color: 'white'
              }
            }
          },
          {
            type: 'value',
            boundaryGap: [0, 0.01],
            axisTick: {
              show: false
            },
            name: '单位：辆',
            axisLine: {
              show: true,
              lineStyle: {
                color: 'white'
              }
            }
          }
        ],
        series: [
          {
            name: this.energyName1,
            type: 'bar',
            barWidth: 18,
            data: this.energyData1
          },
          {
            name: this.energyName2,
            type: 'bar',
            barWidth: 18,
            data: this.energyData2
          },
          {
            name: this.energyName3,
            type: 'line',
            yAxisIndex: 1,
            data: this.energyData3
          },
          {
            name: this.energyName4,
            type: 'line',
            yAxisIndex: 1,
            data: this.energyData4
          }
        ]
      }
      option && dashboard1.setOption(option)
    },
    createChart6() {
      this.cars1 = []
      var param = []
      param[0] = ['项目名称', this.projectType]
      var Data = this.CreateData('11', '大屏幕_涂装消耗_车号_查询', param)
      this.ExecDatabase(Data).then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.cars1.push(response.data[i].订单编号)
        }
      })
      var Data1 = this.CreateData('11', '大屏幕_涂料消耗_柱状图_查询', param)
      this.ExecDatabase(Data1).then(response => {
        this.numberGroup1 = []
        this.typeValue1 = []
        this.number4 = response.data
        for (let i = 0; i < response.data.length; i++) {
          this.number3 = []
          for (let j = 0; j < this.cars1.length; j++) {
            this.number3.push(parseFloat(response.data[i][this.cars1[j]]))
          }
          this.typeValue1.push(response.data[i].油漆)
          this.numberGroup1.push({
            name: response.data[i].油漆,
            type: 'bar',
            barWidth: 14,
            data: this.number3
          })
        }
      }).then(() => {
        // const chartDom = document.getElementById('myChart6')
        // const myChart = echarts.init(chartDom)
        const option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            bottom: -5,
            textStyle: {
              color: 'white'
            },
            data: ['底漆', '中涂', '面漆']
          },
          color: ['RGB(112,173,71)', 'RGB(68,114,196)', 'RGB(255,192,0)'],
          grid: {
            left: '3%',
            right: '4%',
            bottom: '8%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: this.cars1,
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: 'white'
              }
            }
          },
          yAxis: {
            type: 'value',
            boundaryGap: [0, 0.01],
            axisTick: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: 'white'
              }
            }
          },
          series: this.numberGroup1
        }
        option && dashboard4.setOption(option)
      })
    }
  }
  }
  </script>
  
  <style>
    HTML{
        overflow: hidden;
    }
    body{
        margin:0;
        padding:0;
        width: 4096px;
        height: 2160px;
        overflow: hidden;
        position: relative;
    }
    .popoverBackB{
        background-color: rgb(113,184,218) !important;
        border-color: rgb(113,184,218) !important;
        opacity: 1;
    }
    .popoverBackB .popper__arrow{
        border-top-color: rgb(113,184,218) !important;
    }
    .popoverBackB .popper__arrow::after{
        border-top-color: rgb(113,184,218) !important;
    }
    .el-input--mini .el-input__inner{
        background-color: rgb(8,9,30);
        color: white;
    }
    .el-checkbox__input.is-checked+.el-checkbox__label{
        color: white;
    }
    .el-checkbox__label{
        color: white;
    }
    .el-checkbox__inner{
        background-color: rgb(8,9,30);
    }
    .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner{
        background-color: rgb(8,9,30);
        border-color: white;
    }
    .dv-scroll-board .rows .ceil{
        font-size: 22px!important;
    }
  </style>
  
  <style scoped>
    .background{
        width:4096px;
        height: 2160px;
        /*width:9600px;*/
        /*height: 3240px;*/
        background: url("../img/backgroundImg1.jpg");
        background-size: 100%;
    }
    .station{
        width: 33px;
        height: 100%;
        font-size: 12px;
        border-left:1px solid white !important;
        float: left;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        /*white-space:nowrap;*/
    }
    .workingProcedure{
        /*cursor: pointer;*/
        font-size: 20px;
        text-align: center;
        line-height: 48px;
        width: 70px;
        height: 48px;
        position: absolute;
        border-radius:14px;
    }
    .workingProcedure1{
        border: 1px solid gray;
        cursor: pointer;
    }
    .tableStation{
        width: 90%;
        height: 100%;
        margin: auto;
        border-radius: 15px;
    }
    .jiankong{
        margin: 20px 20px 0px 35px;
        width: 660px;
        height: 130px;
        background: url("../img/jinakong.jpg");
        background-size:contain;
    }
    /*.el-popover{*/
    /*background-color: red!important;*/
    /*}*/
    .selectDiv{
        z-index: 99999;
        display: inline-block;
        float: left;
        width: 100px;
        height: 40px!important;
        /*margin-left: 13px;*/
        margin-top: 15px;
        position:relative;
        top:10px;
        color: black;
        margin-left: 25px;
        /*background-color: rgb(8, 9, 30)!important;*/
    }
  </style>