<template>
  <div class="big-main" style="width: 100%; height: 100%; color: #d5e0ee; position: relative">
    <div v-show="!main2DShow" class="metadigiee-video-player" id="metadigiee-video-player"></div>
    <div style="
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        pointer-events: none;
      ">
      <div class="header" style="pointer-events: auto">
        <div style="height: 100%">
          <div style="
              float: left;
              width: 550px;
              height: 100%;
              margin-left: 500px;
              position: relative;
              z-index: 10;
            ">
            <el-row :gutter="20" style="width: 550px; margin-top: 25px">
              <el-col :span="8" v-for="item in areaList" :key="item.id">
                <div @click="tunnelClick(item.id)" :class="searchForm.area == item.id
                  ? 'tunnel-item-active tunnel-item'
                  : 'tunnel-item'
                  ">
                  {{ item.name }}
                </div>
              </el-col>
            </el-row>
          </div>
          <!--          <div style="height: 100%;float:right;">
            <div style="text-align: right;padding: 30px 20px 0 0;color: white">
              <span style="font-family: DINPro;font-weight: bold;font-size: 33px;margin-right: 10px">{{nowTime.split(' ')[1]}}</span>{{nowTime.split(' ')[0]}}
            </div>
          </div>-->
        </div>
      </div>
      <div class="main">
        <div style="width: 100%; height: 60px; pointer-events: auto">
          <div style="float: left; width: calc(100% - 250px); overflow-x: scroll">
            <div style="width: 800px; white-space: nowrap">
              <div @click="deviceTypeClick(item)" v-for="item in deviceBarTypeList" :key="item.id"
                class="main-type-item">
                <el-link v-if="item.id == '12' || item.id == '17'">{{
                  item.name
                }}</el-link>
                <span v-else>{{ item.name }}</span>
              </div>
            </div>
          </div>
          <div style="float: right; width: 250px; position: relative">
            <el-row style="width: 250px" class="input-box">
              <el-col :span="5" style="min-height: 1px">
                <img v-show="!main2DShow" @click="handlePatrol()" src="../../assets/images/icon/main-right5.png"
                  style="cursor: pointer; width: 100%" />
              </el-col>
              <el-col :span="5" @click.native="planDisposalClick(searchForm)">
                <img src="../../assets/images/icon/main-right1.png" style="cursor: pointer; width: 100%" />
              </el-col>
              <!-- <el-col :span="5">
                <img
                  @click="handle2D()"
                  src="../../assets/images/icon/main-right2.png"
                  style="cursor: pointer; width: 100%"
                />
              </el-col> -->
              <!-- <el-col :span="5">
                <img
                  @click="handle3D()"
                  src="../../assets/images/icon/main-right3.png"
                  style="cursor: pointer; width: 100%"
                />
              </el-col> -->
              <el-col :span="5">
                <el-popover :popper-append-to-body="false" popper-class="popper-dropdown" width="110" placement="bottom"
                  trigger="click">
                  <div @click="typeClick(item.id)" v-for="item in deviceTypeList1" :key="item.id">
                    <div :class="searchForm.deviceType == item.id
                      ? 'dropdown-item dropdown-item-active'
                      : 'dropdown-item'
                      ">
                      {{ item.name }}
                    </div>
                  </div>
                  <img slot="reference" src="../../assets/images/icon/main-right4.png"
                    style="cursor: pointer; width: 100%" />
                </el-popover>
              </el-col>
            </el-row>
            <div v-show="patrolShow && !main2DShow" style="
                position: relative;
                background-color: rgba(255, 255, 255, 0.7);
                border-radius: 4px;
                padding: 5px 10px;
                width: 300px;
                right: 320px;
                top: -50px;
                color: black;
              ">
              <el-row :gutter="30" class="input-box">
                <el-col :span="5" @click.native="patrolClick('pause')" style="cursor: pointer"><img
                    src="../../assets/images/icon/pause.png" style="width: 30px" />暂停</el-col>
                <el-col :span="5" @click.native="patrolClick('play')" style="cursor: pointer"><img
                    src="../../assets/images/icon/play.png" style="width: 30px" />继续</el-col>
                <el-col :span="5" @click.native="patrolClick('end')" style="cursor: pointer"><img
                    src="../../assets/images/icon/end.png" style="width: 32px" />结束</el-col>
                <el-col :span="5" @click.native="patrolClick('tunnelLeft')" style="cursor: pointer"><img
                    src="../../assets/images/icon/tunnel.png" style="width: 32px" />左洞</el-col>
                <el-col :span="5" @click.native="patrolClick('tunnelRight')" style="cursor: pointer"><img
                    src="../../assets/images/icon/tunnel.png" style="width: 32px" />右洞</el-col>
              </el-row>
            </div>
          </div>
        </div>
        <div style="
            width: 100%;
            height: calc(100% - 60px);
            pointer-events: none;
            position: relative;
          ">
          <div v-show="main2DShow" @click="scrollClick(1)" style="
              position: absolute;
              top: 45%;
              left: 160px;
              width: 30px;
              height: 30px;
              background-color: rgba(255, 255, 255, 0.2);
              text-align: center;
              line-height: 30px;
              cursor: pointer;
              z-index: 10;
              pointer-events: auto;
            ">
            <i class="el-icon-arrow-left"></i>
          </div>
          <div v-show="main2DShow" @click="scrollClick(2)" style="
              position: absolute;
              top: 45%;
              right: -10px;
              width: 30px;
              height: 30px;
              background-color: rgba(255, 255, 255, 0.2);
              text-align: center;
              line-height: 30px;
              cursor: pointer;
              z-index: 10;
              pointer-events: auto;
            ">
            <i class="el-icon-arrow-right"></i>
          </div>

          <div class="device-main" v-show="main2DShow" style="width: 98%; height: 100%; pointer-events: auto">
            <div style="width: 250px; height: 100%; float: left">
              <div style="height: 50%; text-align: center">
                <img src="../../assets/images/toLeft.png" style="padding-top: 60%" />
                <p class="main-item-p">下行</p>
                <p style="font-size: 18px">
                  {{ pileNumMap[searchForm.area].length2 }}米
                </p>
              </div>
              <div style="height: calc(50% - 30px); text-align: center">
                <img src="../../assets/images/toRight.png" style="padding-top: 25%" />
                <p class="main-item-p">上行</p>
                <p style="font-size: 18px">
                  {{ pileNumMap[searchForm.area].length1 }}米
                </p>
              </div>
            </div>
            <div ref="scrollContainer" style="width: calc(100% - 250px); height: 670px; overflow: auto">
              <div class="device-View" :style="{
                width: `${pileNumMap[searchForm.area].width}px`,
              }">
                <div style="width: 100%; height: 60px">
                  <div class="dot-container">
                    <div class="dot" v-for="(item, index) in pileNumList" :key="index">
                      <div class="dot-span">{{ item }}</div>
                      <div class="dot-circle"></div>
                    </div>
                  </div>
                </div>
                <div class="device-View-main" style="width: 100%">
                  <div style="width: 100%; height: 100%; position: absolute">
                    <template v-if="searchForm.area != '3'">
                      <img src="../../assets/images/icon/area1.2.png" style="margin-top: 30px; height: 225px" />
                      <img src="../../assets/images/icon/area2.2.png" style="margin-top: 30px; height: 225px" />
                    </template>
                    <template v-else>
                      <!--                  <img src="../../assets/images/icon/area3.png" style="margin-top: 30px;width: 100%">-->
                      <img src="../../assets/images/icon/area1.2.png" style="margin-top: 30px; height: 225px" />
                      <img src="../../assets/images/icon/area2.2.png" style="margin-top: 30px; height: 225px" />
                    </template>
                  </div>
                  <div style="
                      width: calc(100% - 304px);
                      height: 100%;
                      position: absolute;
                      z-index: 2;
                      left: 152px;
                    ">
                    <div class="drap-container" @dragover.prevent @mousedown="laryerMouseDown">
                      <div v-for="(item, index) in componentsList" class="drap-container-item" :class="{
                        'drap-container-item-active':
                          curControl && item.deviceId == curControl.deviceId,
                      }" :key="index" :style="{
                        top: `${item.position.y}px`,
                        left: `${item.position.x}px`,
                        'z-index': `${item.zIndex}`,
                      }" @click="handleClick(item, 1)">
                        <!--                    <div class="drap-container-name">{{ item.name }}</div>-->
                        <!--                        <template v-if="item.deviceType == '15' && item.content">
                          <div class="drap-container-div"
                               :style="{
                                width: `${item.position.w}px`,
                                height: `${item.position.h}px`,
                              }">
                            <div style="padding: 1px 3px">
                              {{ item.content }}
                            </div>
                          </div>

                        </template>-->
                        <template>
                          <img slot="reference" class="drap-container-img" :style="{
                            width: `${item.position.w}px`,
                            height: `${item.position.h}px`,
                            opacity: `${item.opacity}`,
                          }" :src="item.imgUrl" draggable="false" :alt="item.deviceName" />
                        </template>
                      </div>
                      <div class="wave" v-for="(item, index) in componentsWarnList" :style="{
                        width: `${item.position.w}px`,
                        height: `${item.position.h}px`,
                        top: `${item.position.y}px`,
                        left: `${item.position.x}px`,
                        position: 'absolute',
                        'z-index': '3',
                      }" :key="index">
                        <div class="circle" v-if="warnControl && item.id == warnControl.id"></div>
                        <div class="drap-container-item" :key="index">
                          <img slot="reference" class="drap-container-img" :style="{
                            width: `${item.position.w}px`,
                            height: `${item.position.h}px`,
                          }" :src="item.imgUrl" draggable="false" :alt="item.id" />
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div style="width: 100%; height: 60px">
                  <div class="dot-container2">
                    <div class="dot" v-for="(item, index) in pileNumList" :key="index">
                      <div class="dot-circle2"></div>
                      <div class="dot-span">{{ item }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="footer" style="pointer-events: auto">
        <el-row style="height: 100%">
          <el-col :span="6" style="height: 100%; padding: 0 30px">
            <div class="title_div">预警列表</div>
            <div class="footer-item">
              <el-row :gutter="30" style="height: 100%">
                <el-col :span="12" style="height: 100%">
                  <div class="device-bg" @click="handleWarnClick('3,8')">
                    <div style="text-align: center">
                      <p style="color: #5dd5c8; font-size: 38px">
                        {{ statsticInfo.warn_count_done }}
                      </p>
                      <p style="font-size: 14px; margin-top: 10px">已处理</p>
                    </div>
                  </div>
                </el-col>
                <el-col :span="12" style="height: 100%">
                  <div class="device-bg device-bg2" @click="handleWarnClick('2')">
                    <div style="text-align: center">
                      <p style="color: #dfb756; font-size: 38px">
                        {{ statsticInfo.warn_count_todo }}
                      </p>
                      <p style="font-size: 14px; margin-top: 10px">
                        待处理<img src="../../assets/images/daiqueren.png" height="14px" style="margin-left: 10px" />
                      </p>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-col>
          <el-col :span="6" style="height: 100%; padding: 0 30px">
            <div class="title_div">事件</div>
            <div class="footer-item" style="cursor: pointer">
              <el-row :gutter="30" style="height: 100%">
                <el-col :span="12" style="height: 100%">
                  <div class="device-bg">
                    <div style="text-align: center">
                      <p style="color: #5dd5c8; font-size: 38px">0</p>
                    </div>
                  </div>
                </el-col>
                <el-col :span="12" style="height: 100%">
                  <div class="device-bg device-bg3">
                    <div style="text-align: center">
                      <p style="color: #df565a; font-size: 38px">0</p>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-col>
          <el-col :span="12" style="height: 100%; padding: 0 30px">
            <div style="width: 50%">
              <div class="title_div">交通流量</div>
            </div>
            <div class="footer-item" id="liuliangLineId"></div>
          </el-col>
          <!--          <el-col :span="6" style="height: 100%;padding: 0 30px">
            <div class="title_div">视频画面</div>
            <div class="footer-item">
              <video autoplay controls loop muted width="100%" height="100%" style="background: black">
                <source src="../../assets/maoliling.mp4" type="video/mp4">
              </video>
            </div>
          </el-col>-->
        </el-row>
      </div>

      <transition name="el-zoom-in-top">
        <div class="warn-item" v-show="warnShow && false">
          <div class="title">预警信息</div>
          <div @click="warnClose()" style="
              position: absolute;
              right: 29px;
              top: 26px;
              width: 30px;
              height: 30px;
              cursor: pointer;
            "></div>
          <div style="
              width: 340px;
              height: 580px;
              margin: 25px auto 20px;
              overflow: auto;
            ">
            <div style="width: 335px">
              <div @click="warnClick(item)" :class="warnForm.id == item.id
                ? 'item-one-block item-one-block2'
                : 'item-one-block'
                " style="
                  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
                  padding: 20px;
                " v-for="item in warnList" :key="item.id">
                <el-row>
                  <el-col :span="2">
                    <div style="height: 25px; line-height: 36px">
                      <img v-show="item.status == 2" :src="require('../../assets/images/icon/warn1.png')" />
                      <img v-show="item.status == 1" :src="require('../../assets/images/icon/warn2.png')" />
                    </div>
                  </el-col>
                  <el-col :span="6">
                    <div style="font-size: 18px; font-weight: bold">
                      <span v-if="item.status == 1">疑似火灾</span>
                      <span v-else-if="item.status == 2">火灾</span>
                      <span v-else>{{
                        filedFomatter(item.type, warnTypeList)
                      }}</span>
                    </div>
                  </el-col>
                  <el-col :span="16" style="text-align: right">
                    <div class="warnBtu" v-show="item.status == 1 || item.status == 2" @click="verifyClick(item)">
                      人工确认
                    </div>
                    <div class="warnBtu" v-show="item.status == 2" @click="warnPlanClick(item)"
                      style="margin-left: 14px">
                      预案处置
                    </div>
                  </el-col>
                  <el-col :span="16" v-show="item.status == 3 || item.status == 8">
                    <p style="text-align: right; margin-top: 5px; color: #cccccc">
                      {{ filedFomatter(item.status, warnStatusList) }}
                    </p>
                  </el-col>
                </el-row>
                <el-row style="margin-top: 20px">
                  <el-col :span="10">
                    {{ filedFomatter(item.area, areaList) }}
                  </el-col>
                  <el-col :span="8">
                    {{ filedFomatter(item.direction, directionList) }}
                  </el-col>
                  <el-col :span="6" style="text-align: right">
                    {{ item.pileNum }}
                  </el-col>
                </el-row>
                <el-row style="margin-top: 10px">
                  <el-col :span="24" style="text-align: right">
                    {{ dateTimeFormat(item.warnTime) }}
                  </el-col>
                </el-row>
              </div>
            </div>
          </div>
        </div>
      </transition>
      <transition name="el-zoom-in-top">
        <div class="plan-item" v-show="warnDetailShow">
          <div style="
              padding: 15px 20px 0px;
              height: 25px;
              line-height: 35px;
              font-size: 16px;
            ">
            <div style="float: left">
              <span style="
                  float: left;
                  width: 10px;
                  height: 10px;
                  background: #2b6bb6;
                  margin: 14px 5px 0 0;
                "></span>预案详情
            </div>
            <div v-show="planSuccess" style="
                float: left;
                margin-left: 100px;
                font-size: 14px;
                margin-top: 5px;
              ">
              状态同步中
            </div>
            <div @click="warnDetailClose()" style="
                float: right;
                width: 20px;
                text-align: center;
                cursor: pointer;
              ">
              X
            </div>
            <div style="float: right; margin-right: 10px; width: 105px">
              <div style="float: left; margin-top: 17px">
                <div v-loading="planLoading" element-loading-spinner="el-icon-loading"></div>
              </div>
              <el-button type="primary" @click="handleCommitPlanClick(2)" size="mini"
                style="float: right">一键发送</el-button>
            </div>
          </div>
          <div style="margin: 10px 20px; border-bottom: 1px solid #4694ff33"></div>
          <div style="
              padding: 0 20px 20px;
              width: calc(100% - 40px);
              height: calc(100% - 80px);
            ">
            <div style="width: 100%; height: 100%; overflow: auto">
              <div v-for="item1 in planDeviceType" :key="item1" style="margin-bottom: 10px">
                <div v-if="item1 == '13'">
                  <p style="font-size: 16px; font-weight: bold; color: #b3ddef">
                    {{ filedFomatter(item1, deviceTypeList) }}控制
                  </p>
                  <p style="margin-top: 5px">上游</p>
                  <div style="
                      padding-left: 10px;
                      line-height: 25px;
                      margin-top: 5px;
                    ">
                    <p v-for="item in planDetailMap[item1]" v-if="item.stream == '1'" :key="item.id">
                      {{ filedFomatter(item.direction, directionList) }}
                      {{ item.id }}（{{ item.pileNum }}） 指令:{{ item.stream }}
                      <span style="color: #ee9837">{{
                        filedFomatter(item.cmd, taskEnum[item1].taskList)
                      }}</span>
                      <span style="margin-left: 10px" v-show="item.ret != undefined">
                        状态:
                        <span v-if="item.ret == -1 || item.ret == null">执行中</span>
                        <span style="color: #12b76d" v-else>{{
                          filedFomatter(item.ret, taskEnum[item1].taskList)
                        }}</span>
                      </span>
                    </p>
                  </div>
                  <p style="margin-top: 5px">下游</p>
                  <div style="
                      padding-left: 10px;
                      line-height: 25px;
                      margin-top: 5px;
                    ">
                    <p v-for="item in planDetailMap[item1]" v-if="item.stream == '2'">
                      {{ filedFomatter(item.direction, directionList) }}
                      {{ item.id }}（{{ item.pileNum }}） 指令:{{ item.stream }}
                      <span style="color: #ee9837">{{
                        filedFomatter(item.cmd, taskEnum[item1].taskList)
                      }}</span>
                      <span style="margin-left: 10px" v-show="item.ret != undefined">
                        状态:
                        <span v-if="item.ret == -1 || item.ret == null">执行中</span>
                        <span style="color: #12b76d" v-else>{{
                          filedFomatter(item.ret, taskEnum[item1].taskList)
                        }}</span>
                      </span>
                    </p>
                  </div>
                </div>
                <div v-else-if="item1 == '15'">
                  <p style="font-size: 16px; font-weight: bold; color: #b3ddef">
                    {{ filedFomatter(item1, deviceTypeList) }}控制
                  </p>
                  <!-- <div
                    style="
                      padding-left: 10px;
                      line-height: 25px;
                      margin-top: 5px;
                    "
                    v-show="planDetailMap[item1].length > 0"
                  >
                    <p v-for="item in planDetailMap[item1]" :key="item.id">
                      {{ filedFomatter(item.direction, directionList) }}
                      {{ item.id }}（{{ item.pileNum }}）
                    </p>

                    <el-select
                      v-model="templateObj"
                      clearable
                      placeholder="请选择"
                      size="small"
                      style="width: 80%"
                      :popper-append-to-body="false"
                    >
                      <el-option
                        v-for="item in infoBoardTemplateList"
                        :key="item.id"
                        :label="item.textInfo"
                        :value="item.id"
                      >
                      </el-option>
                    </el-select>
                  </div> -->
                  <!-- <el-tree
            class="filter-tree"
            :data="treeData"
            :props="defaultProps"
            default-expand-all
            :filter-node-method="filterNode"
            ref="tree"
            show-checkbox
            @check-change="handleCheckChange"
              v-model="textInfoList"
          >
            <span class="custom-tree-node" slot-scope="{ node, data }">
              <el-tooltip :content="node.label" placement="top">
                <span class="label">{{ node.label }}</span>  
              </el-tooltip>
                 <span style="color: #a8a8a8; font-size: 12px"
                                  v-if="node.displaySize">宽高:{{ node.displaySize }} 
                                  字体大小:{{ node.fontSize }} 
                                  字体颜色:{{node.fontColor}}</span>
              <div class="icon">
                <i
                  class="el-icon-plus node-actions"
                  :style="node.level == 1 ? 'display:none' : ''"
                  @click.self="handleAddToTable(node, data)"
                ></i>
              </div>
      
            </span>
          </el-tree> -->
                </div>
                <div v-else>
                  <p style="font-size: 16px; font-weight: bold; color: #b3ddef">
                    {{ filedFomatter(item1, deviceTypeList) }}控制
                  </p>
                  <div style="
                      padding-left: 10px;
                      line-height: 25px;
                      margin-top: 5px;
                    ">
                    <p v-for="item in planDetailMap[item1]" :key="item.id">
                      {{ filedFomatter(item.direction, directionList) }}
                      {{ item.id }}（{{ item.pileNum }}） 指令:
                      <span style="color: #ee9837">{{
                        filedFomatter(item.cmd, taskEnum[item1].taskList)
                      }}</span>
                      <span style="margin-left: 10px" v-show="item.ret != undefined">
                        状态:
                        <span v-if="item.ret == -1 || item.ret == null">执行中</span>
                        <span style="color: #12b76d" v-else>
                          <template v-if="item1 == '19'">
                            {{
                              filedFomatter(item.ret, taskEnum[item1].taskList2)
                            }}
                          </template>
                          <template v-else>
                            {{
                              filedFomatter(item.ret, taskEnum[item1].taskList)
                            }}
                          </template>
                        </span>
                      </span>
                    </p>
                  </div>
                </div>
              </div>
              <div style="min-height: 200px">
                <p style="
                    font-size: 16px;
                    font-weight: bold;
                    color: #b3ddef;
                    margin-bottom: 10px;
                  ">
                  广播控制
                </p>
                <div style="padding-left: 10px; line-height: 25px; margin-top: 5px">
                  <el-select v-model="mediaObj" clearable value-key="id" placeholder="请选择" size="small"
                    style="width: 80%" :popper-append-to-body="false" disabled>
                    <el-option v-for="item in listMedia" :key="item.id" :label="item.name" :value="item">
                    </el-option>
                  </el-select>
                </div>
              </div>
            </div>
          </div>
        </div>
      </transition>

      <transition name="el-zoom-in-top">
        <div class="warn-item" v-show="planShow">
          <div class="title">事件预案处置</div>
          <div @click="planClose()" style="
              position: absolute;
              right: 29px;
              top: 26px;
              width: 30px;
              height: 30px;
              cursor: pointer;
            "></div>
          <div style="
              width: 340px;
              height: 580px;
              margin: 25px auto 20px;
              overflow: auto;
            ">
            <div style="width: 335px">
              <div @click="planClick(item)" :class="planForm.planId == item.planId
                ? 'item-one-block item-one-block2'
                : 'item-one-block'
                " style="
                  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
                  padding: 20px;
                  cursor: pointer;
                " v-for="(item, index) in planList" :key="index">
                <el-row>
                  <el-col :span="12">
                    <div style="font-size: 18px; font-weight: bold">
                      {{ item.planName }}
                    </div>
                  </el-col>
                  <el-col :span="12" style="text-align: right">{{
                    filedFomatter(item.planType, warnTypeList)
                  }}</el-col>
                </el-row>
                <p>{{ item.desp }}</p>
                <el-row style="margin-top: 10px">
                  <el-col :span="12">
                    {{ filedFomatter(item.area, areaList) }}
                  </el-col>
                  <el-col :span="12" style="text-align: right">
                    {{ dateTimeFormat(item.createTime) }}
                  </el-col>
                </el-row>
              </div>
            </div>
          </div>
        </div>
      </transition>
      <transition name="el-zoom-in-top">
        <div class="plan-item" v-show="planDetailShow">
          <div style="
              padding: 15px 20px 0px;
              height: 25px;
              line-height: 35px;
              font-size: 16px;
            ">
            <div style="float: left">
              <span style="
                  float: left;
                  width: 10px;
                  height: 10px;
                  background: #2b6bb6;
                  margin: 14px 5px 0 0;
                "></span>预案详情
            </div>
            <div v-show="planSuccess" style="
                float: left;
                margin-left: 100px;
                font-size: 14px;
                margin-top: 5px;
              ">
              状态同步中
            </div>
            <div @click="planDetailClose()" style="
                float: right;
                width: 20px;
                text-align: center;
                cursor: pointer;
              ">
              X
            </div>
            <div style="float: right; margin-right: 20px; width: 105px">
              <div style="float: left; margin-top: 17px">
                <div v-loading="planLoading" element-loading-spinner="el-icon-loading"></div>
              </div>
              <el-button type="primary" @click="handleCommitPlanClick(1)" size="mini"
                style="float: right">一键发送</el-button>
            </div>
          </div>
          <div style="margin: 10px 20px; border-bottom: 1px solid #4694ff33"></div>
          <div style="
              padding: 0 20px 20px;
              width: calc(100% - 40px);
              height: calc(100% - 80px);
            ">
            <div style="width: 100%; height: 100%; overflow: auto">
              <div v-for="(item1, index1) in planDetailData" :key="index1" v-show="item1.data.length > 0"
                style="margin-bottom: 10px">
                <p style="font-size: 16px; font-weight: bold; color: #b3ddef">
                  {{ filedFomatter(item1.type, deviceTypeList) }}控制
                </p>
                <div style="padding-left: 10px; line-height: 25px; margin-top: 5px">
                  <p v-for="item in item1.data" :key="item.id">
                    {{ filedFomatter(item.direction, directionList) }}
                    {{ item.id }}（{{ item.pileNum }}） 指令:
                    <span style="color: #12b7b2">{{
                      filedFomatter(item.cmd, taskEnum[item1.type].taskList)
                    }}</span>
                    <span style="margin-left: 10px" v-show="item.ret != undefined">
                      状态:
                      <span v-if="item.ret == -1 || item.ret == null">执行中</span>
                      <span style="color: #12b76d" v-else>{{
                        filedFomatter(item.ret, taskEnum[item1.type].taskList)
                      }}</span>
                    </span>
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </transition>

      <transition name="el-fade-in-linear">
        <div v-show="deviceRunShow" class="deviceRun-item">
          <div class="title">设备运行情况</div>
          <div @click="deviceRunShow = false" style="
              position: absolute;
              right: 25px;
              top: 25px;
              width: 30px;
              height: 30px;
              cursor: pointer;
            "></div>
          <div style="height: 150px">
            <div class="select-down" style="
                width: 430px;
                margin: 0 auto;
                font-size: 16px;
                padding-top: 50px;
              ">
              类型<el-select v-model="deviceType" @change="loadDevice" clearable placeholder="请选择"
                :popper-append-to-body="false">
                <el-option v-for="item in deviceTypeList" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </div>
          </div>
          <div style="
              width: calc(100% - 50px);
              margin: 0px auto 20px;
              height: calc(100% - 270px);
            ">
            <el-row :gutter="30" style="
                text-align: center;
                width: calc(100% - 20px);
                margin: 0 auto 20px;
              ">
              <el-col :span="7">
                <div class="runColBg">设备类型</div>
              </el-col>
              <el-col :span="7">
                <div class="runColBg">设备编号</div>
              </el-col>
              <el-col :span="5">
                <div class="runColBg">桩号</div>
              </el-col>
              <el-col :span="5">
                <div class="runColBg">状态</div>
              </el-col>
            </el-row>

            <div style="width: 100%; height: calc(100% - 30px); overflow: auto">
              <div style="width: calc(100% - 20px); margin: 0 auto">
                <el-row @click.native="deviceRunClick(item)" class="runRowBg" v-for="item in deviceData"
                  :key="item.deviceId">
                  <el-col :span="7" style="min-height: 1px">{{
                    filedFomatter(item.deviceType, deviceTypeList)
                  }}</el-col>
                  <el-col :span="7" style="min-height: 1px">{{
                    item.deviceId
                  }}</el-col>
                  <el-col :span="5" style="min-height: 1px">{{
                    item.pileNum
                  }}</el-col>
                  <el-col :span="5" style="min-height: 1px; color: #5dd5c8">{{
                    filedFomatter(item.status, statusList)
                  }}</el-col>
                </el-row>
              </div>
            </div>
          </div>
        </div>
      </transition>

      <el-dialog style="pointer-events: auto" :title="addOrUpdateTitle" :visible.sync="deviceDialogVisible"
        width="1000px" :close-on-click-modal="false" v-if="deviceDialogVisible" @close="deviceClose">
        <div v-show="deviceLoading" style="
            position: absolute;
            z-index: 9999;
            left: calc(50% - 60px);
            top: 48%;
            background: #ce811b;
            padding: 10px 20px;
            border-radius: 5px;
          ">
          正在发送指令...
        </div>

        <div v-loading="deviceLoading" element-loading-text="" element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.5)">
          <div v-show="dataForm.deviceType != 22" style="min-height: 70px; color: #1afff7">
            <div style="
                display: inline-block;
                vertical-align: top;
                padding: 10px;
                border-right: 2px solid rgb(20 164 180);
                height: 50px;
              ">
              <img src="../../assets/images/device.png" />
            </div>
            <!--            <div style="display: inline-block;vertical-align: top;padding: 0 30px;border-right: 2px solid rgb(20 164 180);min-width: 130px;height: 70px">
&lt;!&ndash;              <p style="font-size: 23px;color: #1AFFF7;margin-bottom: 10px">
                {{ filedFomatter(dataForm.status,statusList) }}
                <span v-show="!dataForm.status">暂无状态</span>
              </p>&ndash;&gt;
              <p style="font-size: 22px;color: #1AFFF7;">
                状态：在线&lt;!&ndash;<span v-if="dataForm.taskName == -1">离线</span>
                         <span v-else>{{ filedFomatter(dataForm.taskName,taskList) }}</span>&ndash;&gt;

              </p>
            </div>-->
            <div style="
                display: inline-block;
                vertical-align: top;
                width: calc(100% - 300px);
              ">
              <template v-if="dataForm.deviceType == '15'">
                <div style="height: 60px; padding: 10px 0 0 10px; overflow: auto">
                  <div style="display: inline-block; vertical-align: top" v-html="templateInfoHtml"></div>
                </div>
              </template>
              <template v-else-if="dataForm.deviceType == '26'">
                <el-row style="
                    min-height: 30px;
                    font-size: 16px;
                    padding: 20px 0 0 10px;
                  ">
                  <el-col :span="10">风向：{{ dataForm.direction26 }}</el-col>
                  <el-col :span="11">风速：{{ dataForm.speed26
                  }}<span v-show="dataForm.speed26">(m/s)</span></el-col>
                </el-row>
              </template>
              <template v-else-if="dataForm.deviceType == '27'">
                <el-row style="
                    min-height: 30px;
                    font-size: 16px;
                    padding: 20px 0 0 10px;
                  ">
                  <el-col :span="15">co 浓度值：{{ dataForm.co27
                  }}<span v-show="dataForm.co27">(PPM)</span></el-col>
                  <el-col :span="9">vi 能见度：{{ dataForm.vi27
                  }}<span v-show="dataForm.vi27"></span></el-col>
                </el-row>
              </template>
              <template v-else-if="dataForm.deviceType == '28'">
                <el-row style="
                    min-height: 30px;
                    font-size: 16px;
                    padding: 20px 0 0 10px;
                  ">
                  <el-col :span="15">光强：{{ dataForm.light28 }}</el-col>
                </el-row>
              </template>
              <template v-else-if="dataForm.deviceType == '43'">
                <div style="min-height: 30px; font-size: 16px; padding: 20px">
                  <p>
                    水位高度：{{ dataForm.height43
                    }}<span v-show="dataForm.height43">(m)</span>
                  </p>
                </div>
              </template>
              <template v-else-if="
                dataForm.deviceType == '40' ||
                dataForm.deviceType == '41' ||
                dataForm.deviceType == '42'
              ">
                <div style="min-height: 30px; font-size: 16px; padding: 0px 20px">
                  <p v-for="(item, index) in iotKeyData" :key="index">
                    <span style="display: inline-block; width: 100px">
                      {{ item.name }}
                    </span>
                    <span v-for="(item1, index1) in item.data" :key="index1"
                      style="display: inline-block; width: 100px">
                      {{ item1.name }}
                    </span>
                  </p>
                </div>
              </template>
              <template v-else>
                <div v-show="dataForm.taskName != -1" style="
                    min-height: 30px;
                    font-size: 16px;
                    padding: 20px 0 0 10px;
                  ">
                  <template v-if="dataForm.deviceType == '19'">{{
                    filedFomatter(dataForm.taskName, taskEnum['19'].taskList2)
                  }}</template>
                  <template v-else>{{
                    filedFomatter(dataForm.taskName, taskList)
                  }}</template>
                </div>
                <!--                <div v-show="dataForm.taskName == -1" style="min-height: 30px;font-size: 16px;padding: 20px 0 0 10px;font-size: 22px;color: #1AFFF7;">
                  暂无反馈
                </div>-->
              </template>
            </div>
          </div>
          <el-divider></el-divider>
          <el-row style="min-height: 280px">
            <el-col :span="8">
              <p style="margin-bottom: 10px; font-size: 16px">
                <span style="
                    float: left;
                    width: 10px;
                    height: 10px;
                    background: #2b6bb6;
                    margin: 7px 5px 0 0;
                  "></span>设备基本信息
              </p>
              <el-descriptions title="" :column="1" :labelStyle="{
                width: '80px',
                'text-align': 'right',
                display: 'block',
                color: '#D5E0EE',
              }" :contentStyle="{ width: '95%' }">
                <el-descriptions-item label="设备类型">{{
                  filedFomatter(dataForm.deviceType, deviceTypeList)
                }}</el-descriptions-item>
                <el-descriptions-item label="所属隧道">{{
                  filedFomatter(dataForm.area, areaList)
                }}</el-descriptions-item>
                <el-descriptions-item label="设备编号">{{
                  dataForm.deviceId
                }}</el-descriptions-item>
                <el-descriptions-item label="物联key">{{
                  dataForm.iotKey
                }}</el-descriptions-item>
                <el-descriptions-item label="modelId">{{
                  dataForm.modelId
                }}</el-descriptions-item>
                <el-descriptions-item label="所属方向">{{
                  filedFomatter(dataForm.direction, directionList)
                }}</el-descriptions-item>
                <el-descriptions-item label="桩号">{{
                  dataForm.pileNumShow
                }}</el-descriptions-item>
                <el-descriptions-item label="桩号">{{
                  dataForm.pileNum
                }}</el-descriptions-item>
                <el-descriptions-item label="断面位置">{{
                  filedFomatter(dataForm.lane, laneList)
                }}</el-descriptions-item>
              </el-descriptions>
            </el-col>
            <el-col :span="16">
              <div style="
                  width: calc(100% - 20px);
                  border-left: 2px solid rgba(70, 148, 255, 0.42);
                  padding: 0 10px;
                ">
                <!-- 电伴热设备 -->
                <div v-if="dataForm.deviceType == '47'">
                  <p style="margin-bottom: 10px; font-size: 16px">
                    <span style="
                        float: left;
                        width: 10px;
                        height: 10px;
                        background: #2b6bb6;
                        margin: 7px 5px 0 0;
                      "></span>设备控制
                    <el-button type="primary" style="float: right; margin-right: 20px" size="mini" @click="ChangeDBRdevocte()">
                      发送
                    </el-button>
                  </p>
                  <div style="padding-left: 20px">
                    <div v-if="iotDBRInfo.status !== '异常'"></div>
                    <el-row  style="margin-bottom: 10px;">
                      <el-col :span="4">电伴热设备:</el-col>
                      <el-col :span="8" >
                        <el-switch v-model="iotDBRInfo.online" active-color="#20488F" active-text="开" inactive-text="关">
                        </el-switch>
                      </el-col>
                     
                    </el-row>
                  </div>
                </div>



                <div v-else-if="dataForm.deviceType == 22" style="
                    width: 75%;
                    height: 340px;
                    background: black;
                    margin-left: 5%;
                  ">
                  <flv-player :videoUrl="videoUrl"></flv-player>
                </div>
                <div v-else-if="
                  dataForm.deviceType == 26 ||
                  dataForm.deviceType == 27 ||
                  dataForm.deviceType == 28 ||
                  dataForm.deviceType == 39 ||
                  dataForm.deviceType == 43
                ">
                  <p style="margin-bottom: 10px; font-size: 16px">
                    <span style="
                        float: left;
                        width: 10px;
                        height: 10px;
                        background: #2b6bb6;
                        margin: 7px 5px 0 0;
                      "></span>设备控制
                  </p>
                  <div style="
                      min-height: 200px;
                      padding-bottom: 20px;
                      padding-top: 10px;
                    ">
                    无
                  </div>
                </div>
                <div v-else>
                  <p style="margin-bottom: 10px; font-size: 16px">
                    <span style="
                        float: left;
                        width: 10px;
                        height: 10px;
                        background: #2b6bb6;
                        margin: 7px 5px 0 0;
                      "></span>设备控制
                    <el-button type="primary" @click="handleCommitClick(0)" size="mini"
                      style="float: right; margin-right: 20px">发送</el-button>
                  </p>
                  <div style="
                      min-height: 200px;
                      padding-bottom: 20px;
                      padding-top: 10px;
                    ">
                    <div v-if="dataForm.deviceType == '12'" style="padding-left: 20px">
                      <el-row>
                        <el-col :span="3">控制：</el-col>
                        <el-col :span="21">
                          <el-radio-group v-model="dataForm.command" style="padding-top: 3px">
                            <el-radio :label="item.id" v-for="item in taskList" :key="item.id">{{ item.name
                            }}</el-radio>
                          </el-radio-group>
                        </el-col>
                      </el-row>
                      <el-row style="margin-top: 5px">
                        <el-col :span="3" style="line-height: 36px">亮度：</el-col>
                        <el-col :span="21">
                          <el-slider style="width: calc(100% - 100px)" v-model="dataFormBody.light"></el-slider>
                        </el-col>
                      </el-row>
                    </div>
                    <div v-else-if="dataForm.deviceType == '15'" style="padding-left: 20px">
                      <el-row>
                        <el-col :span="3">控制：</el-col>
                        <el-col :span="21" class="temlCheckClass">
                          <!--                          <div v-for="item in infoBoardTemplateList">
                            <div style="height: 30px">
                              <p style="float: left"><el-radio v-model="dataFormBody.templateId" :label="item.id"><span></span></el-radio></p><p style="float: left" @input="addComment($event,item)" v-html="item.templateHtml"></p>
                            </div>
                          </div>-->
                          <!-- <el-checkbox-group v-model="textInfoList">
                            <div
                              v-for="item in infoBoardTemplateList"
                              :key="item.programId"
                              style="margin-bottom: 5px"
                            >
                              <el-checkbox :label="item.programId">
                                <span
                                  @input="addComment($event, item)"
                                  v-html="item.templateHtml"
                                ></span
                                ><br />
                                <span style="color: #a8a8a8; font-size: 12px"
                                  >宽高:{{ item.displaySize }} 
                                  字体大小:{{ item.fontSize }} 字体颜色:{{
                                    item.fontColor
                                  }}</span
                                >
                              </el-checkbox>
                            </div>
                          </el-checkbox-group> -->
                          <el-tree class="filter-tree" :data="treeData" :props="defaultProps"
                            :filter-node-method="filterNode" ref="tree" show-checkbox @check-change="handleCheckChange"
                            v-model="textInfoList" @check="handleCheck">
                            <div class="custom-tree-node" slot-scope="{ node, data }">
                              <el-tooltip :content="node.label" placement="top">
                                <span class="label" v-if="node.level === 1">{{ data.name }}</span>
                                <span class="label" v-if="node.level !== 1">{{ data.content }}</span>

                              </el-tooltip>
                              <br />
                              <span style="color: #a8a8a8; font-size: 12px" v-if="node.level !== 1">高宽:{{
                                data.displaySize }}
                                字体大小:{{ data.fontSize }} 字体颜色:{{ getColor(data.fontColor) }}</span>

                            </div>
                          </el-tree>
                        </el-col>
                      </el-row>
                    </div>
                    <div v-else-if="
                      dataForm.deviceType == '40' ||
                      dataForm.deviceType == '41' ||
                      dataForm.deviceType == '42'
                    " style="padding-left: 20px">
                      <div style="float: left; width: 35%">
                        <el-row>
                          <el-col :span="5">设备：</el-col>
                          <el-col :span="19">
                            <el-checkbox-group v-model="dataForm.iotKeys">
                              <el-checkbox v-for="item in iotKeyList" v-show="item.show" :label="item.id"
                                :key="item.id">{{
                                  item.name }}</el-checkbox>
                            </el-checkbox-group>
                          </el-col>
                        </el-row>
                      </div>
                      <div style="float: left; width: 55%">
                        <el-row>
                          <el-col :span="5">控制：</el-col>
                          <el-col :span="19">
                            <el-radio-group v-model="dataForm.command" style="padding-top: 3px">
                              <el-radio :label="item.id" v-for="item in taskList" :key="item.id">{{ item.name
                              }}</el-radio>
                            </el-radio-group>
                          </el-col>
                        </el-row>
                      </div>
                    </div>
                    <div v-else-if="13" style="padding-left: 20px">
                      <el-row>
                        <el-col :span="3">控制：</el-col>
                        <el-col :span="21">
                          <el-radio-group v-model="dataForm.command" style="padding-top: 3px">
                            <el-radio :label="item.id" v-for="item in taskList" :key="item.id">{{ item.name
                            }}</el-radio>
                          </el-radio-group>
                        </el-col>
                      </el-row>
                    </div>



                    <div v-else style="padding-left: 20px">
                      <el-row>
                        <el-col :span="3">控制2：</el-col>
                        <el-col :span="21">
                          <el-radio-group v-model="dataForm.command" style="padding-top: 3px">
                            <el-radio :label="item.id" v-for="item in taskList" :key="item.id">{{ item.name
                            }}</el-radio>
                          </el-radio-group>
                        </el-col>
                      </el-row>
                    </div>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>

        <!--        <span slot="footer" class="dialog-footer">
          <el-button @click="deviceDialogVisible = false" size="small">取 消</el-button>
          <el-button type="primary" @click="addOrUpdateSub" size="small">确 定</el-button>
        </span>-->
      </el-dialog>

      <transition name="el-zoom-in-top">
        <div class="control-item" v-show="deviceControlShow && !main2DShow">
          <div style="
              padding: 15px 20px 0px;
              height: 25px;
              line-height: 35px;
              font-size: 16px;
            ">
            <div style="float: left">
              <span style="
                  float: left;
                  width: 10px;
                  height: 10px;
                  background: #2b6bb6;
                  margin: 14px 5px 0 0;
                "></span>{{ addOrUpdateTitle }}
            </div>
            <div @click="deviceClose" style="
                float: right;
                width: 20px;
                text-align: center;
                cursor: pointer;
              ">
              X
            </div>
          </div>
          <div style="margin: 10px 20px; border-bottom: 1px solid #4694ff33"></div>
          <div style="
              padding: 0 20px 20px;
              width: calc(100% - 40px);
              height: calc(100% - 80px);
            ">
            <div style="width: 100%; height: 100%; overflow: auto">
              <div v-show="deviceLoading" style="
                  position: absolute;
                  z-index: 9999;
                  left: calc(50% - 60px);
                  top: 48%;
                  background: #ce811b;
                  padding: 10px 20px;
                  border-radius: 5px;
                ">
                正在发送指令...
              </div>
              <div v-loading="deviceLoading" element-loading-text="" element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.5)">
                <div v-show="dataForm.deviceType != 22" style="min-height: 60px; color: #1afff7">
                  <div style="
                      display: inline-block;
                      vertical-align: top;
                      width: 100%;
                    ">
                    <template v-if="dataForm.deviceType == '15'">
                      <div style="height: 60px; padding-left: 10px; overflow: auto">
                        <div style="display: inline-block; vertical-align: top" v-html="templateInfoHtml"></div>
                      </div>
                    </template>
                    <template v-else-if="dataForm.deviceType == '26'">
                      <el-row style="
                          min-height: 30px;
                          font-size: 16px;
                          padding-left: 10px;
                        ">
                        <el-col :span="10">风向：{{ dataForm.direction26 }}</el-col>
                        <el-col :span="11">风速：{{ dataForm.speed26
                        }}<span v-show="dataForm.speed26">(m/s)</span></el-col>
                      </el-row>
                    </template>
                    <template v-else-if="dataForm.deviceType == '27'">
                      <el-row style="
                          min-height: 30px;
                          font-size: 16px;
                          padding-left: 10px;
                        ">
                        <el-col :span="15">co 浓度值：{{ dataForm.co27
                        }}<span v-show="dataForm.co27">(PPM)</span></el-col>
                        <el-col :span="9">vi 能见度：{{ dataForm.vi27
                        }}<span v-show="dataForm.vi27"></span></el-col>
                      </el-row>
                    </template>
                    <template v-else-if="dataForm.deviceType == '28'">
                      <el-row style="
                          min-height: 30px;
                          font-size: 16px;
                          padding-left: 10px;
                        ">
                        <el-col :span="15">光强：{{ dataForm.light28 }}</el-col>
                      </el-row>
                    </template>
                    <template v-else-if="dataForm.deviceType == '43'">
                      <div style="
                          min-height: 30px;
                          font-size: 16px;
                          padding-left: 10px;
                        ">
                        <p>
                          水位高度：{{ dataForm.height43
                          }}<span v-show="dataForm.height43">(m)</span>
                        </p>
                      </div>
                    </template>
                    <template v-else-if="
                      dataForm.deviceType == '40' ||
                      dataForm.deviceType == '41' ||
                      dataForm.deviceType == '42'
                    ">
                      <div style="
                          min-height: 30px;
                          font-size: 16px;
                          padding-left: 10px;
                        ">
                        <p v-for="(item, index) in iotKeyData" :key="index">
                          <span style="display: inline-block; width: 100px">
                            {{ item.name }}
                          </span>
                          <span v-for="(item1, index1) in item.data" :key="index1"
                            style="display: inline-block; width: 100px">
                            {{ item1.name }}
                          </span>
                        </p>
                      </div>
                    </template>
                    <template v-else>
                      <div v-show="dataForm.taskName != -1" style="
                          min-height: 30px;
                          font-size: 16px;
                          padding-left: 10px;
                        ">
                        <template v-if="dataForm.deviceType == '19'">{{
                          filedFomatter(
                            dataForm.taskName,
                            taskEnum['19'].taskList2
                          )
                        }}</template>
                        <template v-else>{{
                          filedFomatter(dataForm.taskName, taskList)
                        }}</template>
                      </div>
                      <!--                <div v-show="dataForm.taskName == -1" style="min-height: 30px;font-size: 16px;padding: 20px 0 0 10px;font-size: 22px;color: #1AFFF7;">
                                        暂无反馈
                                      </div>-->
                    </template>
                  </div>
                </div>

                <div class="item-frame">
                  <div class="item-frame-title">设备基本信息</div>
                  <div style="padding: 20px">
                    <el-descriptions title="" :column="1" :labelStyle="{
                      width: '60px',
                      'text-align': 'right',
                      display: 'block',
                      color: '#D5E0EE',
                    }" :contentStyle="{ width: '95%' }">
                      <el-descriptions-item label="设备类型">{{
                        filedFomatter(dataForm.deviceType, deviceTypeList)
                      }}</el-descriptions-item>
                      <el-descriptions-item label="所属隧道">{{
                        filedFomatter(dataForm.area, areaList)
                      }}</el-descriptions-item>
                      <el-descriptions-item label="设备编号">{{
                        dataForm.deviceId
                      }}</el-descriptions-item>
                      <el-descriptions-item label="物联key">{{
                        dataForm.iotKey
                      }}</el-descriptions-item>
                      <el-descriptions-item label="modelId">{{
                        dataForm.modelId
                      }}</el-descriptions-item>
                      <el-descriptions-item label="所属方向">{{
                        filedFomatter(dataForm.direction, directionList)
                      }}</el-descriptions-item>
                      <el-descriptions-item label="桩号">{{
                        dataForm.pileNumShow
                      }}</el-descriptions-item>
                      <el-descriptions-item label="断面位置">{{
                        filedFomatter(dataForm.lane, laneList)
                      }}</el-descriptions-item>
                    </el-descriptions>
                  </div>
                </div>
                <div class="item-frame" style="margin-top: 20px">
                  <div class="item-frame-title">设备控制</div>
                  <div style="padding: 20px">
                    <div v-if="dataForm.deviceType == 22" style="
                        width: 75%;
                        height: 340px;
                        background: black;
                        margin-left: 5%;
                      ">
                      <flv-player :videoUrl="videoUrl"></flv-player>
                    </div>
                    <div v-else-if="
                      dataForm.deviceType == 26 ||
                      dataForm.deviceType == 27 ||
                      dataForm.deviceType == 28 ||
                      dataForm.deviceType == 39 ||
                      dataForm.deviceType == 43
                    ">
                      <div style="
                          min-height: 200px;
                          padding-bottom: 20px;
                          padding-top: 10px;
                        ">
                        无
                      </div>
                    </div>
                    <div v-else style="position: relative">
                      <el-button type="primary" @click="handleCommitClick(0)" size="mini"
                        style="position: absolute; right: 0px; top: -20px">发送</el-button>
                      <div style="
                          min-height: 100px;
                          padding-bottom: 20px;
                          padding-top: 10px;
                        ">
                        <div v-if="dataForm.deviceType == '12'">
                          <el-row>
                            <el-col :span="4">控制：</el-col>
                            <el-col :span="20">
                              <el-radio-group v-model="dataForm.command" style="padding-top: 3px">
                                <el-radio :label="item.id" v-for="item in taskList" :key="item.id">{{ item.name
                                }}</el-radio>
                              </el-radio-group>
                            </el-col>
                          </el-row>
                          <el-row style="margin-top: 5px">
                            <el-col :span="4" style="line-height: 36px">亮度：</el-col>
                            <el-col :span="20">
                              <el-slider style="width: calc(100% - 100px)" v-model="dataFormBody.light"></el-slider>
                            </el-col>
                          </el-row>
                        </div>
                        <div v-else-if="dataForm.deviceType == '15'">
                          <el-row>
                            <el-col :span="4">控制：</el-col>
                            <el-col :span="20" class="temlCheckClass">
                              <!--                          <div v-for="item in infoBoardTemplateList">
                                                          <div style="height: 30px">
                                                            <p style="float: left"><el-radio v-model="dataFormBody.templateId" :label="item.id"><span></span></el-radio></p><p style="float: left" @input="addComment($event,item)" v-html="item.templateHtml"></p>
                                                          </div>
                                                        </div>-->
                              <!-- <el-checkbox-group v-model="textInfoList">
                                <div
                                  v-for="item in infoBoardTemplateList"
                                  :key="item.id"
                                  style="margin-bottom: 5px"
                                >
                                  <el-checkbox :label="item.id">
                                    <span
                                      @input="addComment($event, item)"
                                      v-html="item.templateHtml"
                                    ></span
                                    ><br />
                                    <span
                                      style="color: #a8a8a8; font-size: 12px"
                                      >宽:{{ item.cmsWidth }} 高:{{
                                        item.cmsHeight
                                      }}
                                      字体大小:{{ item.fontSize }} 字体颜色:{{
                                        item.fontColor
                                      }}</span>
                                  </el-checkbox>
                                </div>
                              </el-checkbox-group> -->
                            </el-col>
                          </el-row>
                        </div>
                        <div v-else-if="
                          dataForm.deviceType == '40' ||
                          dataForm.deviceType == '41' ||
                          dataForm.deviceType == '42'
                        ">
                          <div style="float: left; width: 35%">
                            <el-row>
                              <el-col :span="4">设备：</el-col>
                              <el-col :span="20">
                                <el-checkbox-group v-model="dataForm.iotKeys">
                                  <el-checkbox v-for="item in iotKeyList" v-show="item.show" :label="item.id"
                                    :key="item.id">{{
                                      item.name }}</el-checkbox>
                                </el-checkbox-group>
                              </el-col>
                            </el-row>
                          </div>
                          <div style="float: left; width: 55%">
                            <el-row>
                              <el-col :span="4">控制：</el-col>
                              <el-col :span="20">
                                <el-radio-group v-model="dataForm.command" style="padding-top: 3px">
                                  <el-radio :label="item.id" v-for="item in taskList" :key="item.id">{{ item.name
                                  }}</el-radio>
                                </el-radio-group>
                              </el-col>
                            </el-row>
                          </div>
                        </div>

                        <div v-else>
                          <el-row>
                            <el-col :span="4">控制：</el-col>
                            <el-col :span="20">
                              <el-radio-group v-model="dataForm.command" style="padding-top: 3px">
                                <el-radio :label="item.id" v-for="item in taskList" :key="item.id">{{ item.name
                                }}</el-radio>
                              </el-radio-group>
                            </el-col>
                          </el-row>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </transition>

      <el-dialog top="8vh" style="pointer-events: auto" title="设备" :visible.sync="deviceDialogVisible2" width="1000px"
        :close-on-click-modal="false" v-if="deviceDialogVisible2" @close="deviceClose">
        <el-row>
          <el-col :span="14" style="border-right: 1px solid #cccccc">
            <el-table size="small" :data="deviceData2" height="500px" @selection-change="handleSelectionChange"
              style="width: 100%">
              <el-table-column type="selection" width="55"> </el-table-column>
              <el-table-column prop="deviceType" label="设备类型" :formatter="(row) => filedFomatter(row.deviceType, deviceTypeList)
                ">
              </el-table-column>
              <el-table-column prop="deviceId" label="设备编号" show-overflow-tooltip>
              </el-table-column>
              <el-table-column prop="pileNumShow" label="桩号" show-overflow-tooltip>
              </el-table-column>
              <el-table-column prop="direction" label="方向" :formatter="(row) => filedFomatter(row.direction, directionList)
                " show-overflow-tooltip>
              </el-table-column>
              <el-table-column prop="task" label="状态" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span v-if="scope.row.task">
                    <span v-if="JSON.parse(scope.row.task).command != -1">
                      <template v-if="scope.row.deviceType == '19'">{{
                        filedFomatter(
                          JSON.parse(scope.row.task).command,
                          taskEnum['19'].taskList2
                        )
                      }}</template>
                      <template v-else>{{
                        filedFomatter(
                          JSON.parse(scope.row.task).command,
                          taskList
                        )
                      }}</template>
                    </span>
                  </span>
                </template>
              </el-table-column>
              <!--              <el-table-column
                  fixed="right"
                  label="操作"
                  width="80">
                <template slot-scope="scope">

                  <el-button @click="handleClick(scope.row)" type="text">控制</el-button>

                </template>
              </el-table-column>-->
            </el-table>
          </el-col>
          <el-col :span="10" v-show="controlShow" style="padding-left: 5px">
            <p style="margin-bottom: 10px; font-size: 16px">
              <span style="
                  float: left;
                  width: 10px;
                  height: 10px;
                  background: #2b6bb6;
                  margin: 7px 5px 0 0;
                "></span>批量控制
              <el-button type="primary" @click="handleCommitClick(1)" size="mini"
                style="float: right; margin-right: 20px">发送</el-button>
            </p>
            <div v-loading="deviceLoading" element-loading-text="正在发送指令..." element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(0, 0, 0, 0.5)"
              style="padding-bottom: 20px; margin-top: 15px; min-height: 100px">
              <div v-if="dataForm.deviceType == '12'" style="padding-left: 20px">
                <el-row>
                  <el-col :span="3">控制：</el-col>
                  <el-col :span="21">
                    <el-radio-group v-model="dataForm.command">
                      <el-radio :label="item.id" v-for="item in taskList" :key="item.id">{{ item.name }}</el-radio>
                    </el-radio-group>
                  </el-col>
                </el-row>
                <el-row style="margin-top: 5px">
                  <el-col :span="3" style="line-height: 36px">亮度：</el-col>
                  <el-col :span="21">
                    <el-slider style="width: calc(100% - 100px)" v-model="dataFormBody.light"></el-slider>
                  </el-col>
                </el-row>
              </div>
              <div v-else-if="dataForm.deviceType == '15'" style="padding-left: 20px">
                <el-row>
                  <el-col :span="3">控制：</el-col>
                  <el-col :span="21" class="temlCheckClass">
                    <!--                          <div v-for="item in infoBoardTemplateList">
                                                <div style="height: 30px">
                                                  <p style="float: left"><el-radio v-model="dataFormBody.templateId" :label="item.id"><span></span></el-radio></p><p style="float: left" @input="addComment($event,item)" v-html="item.templateHtml"></p>
                                                </div>
                                              </div>-->
                    <!-- <el-checkbox-group v-model="textInfoList">
                      <div
                        v-for="item in infoBoardTemplateList"
                        :key="item.id"
                        style="margin-bottom: 5px"
                      >
                        <el-checkbox :label="item.id">
                          <span
                            @input="addComment($event, item)"
                            v-html="item.templateHtml"
                          ></span
                          ><br />
                          <span style="color: #a8a8a8; font-size: 12px"
                            >宽:{{ item.cmsWidth }} 高:{{
                              item.cmsHeight
                            }}
                            字体大小:{{ item.fontSize }} 字体颜色:{{
                              item.fontColor
                            }}</span
                          >
                        </el-checkbox>
                      </div>
                    </el-checkbox-group> -->
                    <el-tree class="filter-tree" :data="treeData" :props="defaultProps" :filter-node-method="filterNode"
                      ref="tree" show-checkbox @check-change="handleCheckChange" v-model="textInfoList"
                      @check="handleCheck">
                      <div class="custom-tree-node" slot-scope="{ node, data }">
                        <el-tooltip :content="node.label" placement="top">
                          <span class="label" v-if="node.level === 1">{{ data.name }}</span>
                          <span class="label" v-if="node.level !== 1">{{ data.content }}</span>

                        </el-tooltip>
                        <br />
                        <span style="color: #a8a8a8; font-size: 12px;" v-if="node.level !== 1">高宽:{{ data.displaySize }}
                        </span>
                        <span style="color: #a8a8a8; font-size: 12px;" v-if="node.level !== 1">
                          大小:{{ data.fontSize }} 颜色:{{ getColor(data.fontColor) }}</span>

                      </div>
                    </el-tree>
                  </el-col>
                </el-row>
              </div>

              <div v-else style="padding-left: 20px">
                <el-row>
                  <el-col :span="3">控制：</el-col>
                  <el-col :span="21">
                    <el-radio-group v-model="dataForm.command">
                      <el-radio :label="item.id" v-for="item in taskList" :key="item.id">{{ item.name }}</el-radio>
                    </el-radio-group>
                  </el-col>
                </el-row>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import cookies from 'js-cookie'
var dataList = {}
import {
  addOrModDevice,
  iotControl,
  newIotControl,
  newIotControlS,
  playManuallyTriggered,
  getIotDeviceStatus,
  getDbrIotDeviceList,
  deviceList,
  deviceList1,
  batchControl,
  deviceStatus,
  infoBoardTemplateList,
  warnList,
  statsticWhole,
  getPlayAddressByPid,
  deviceStatusBatch,
  changeDbrIotDeviceStatus,
  planList,
} from '@/api'
import { dateTimeFormat, filedFomatter } from '../../utils/utils'
import FlvPlayer from '@/components/FlvPlayer.vue'
import { connectWebsocket } from '@/utils/websocket'
import {
  addBroadcast,
  flowStatistic,
  getEmployeeList,
  getMediaList,
  latestWarnList,
  planDetail,
  planExecute,
  verify,
  getProgramTree
} from '../../api'
import { tunnelLeftList, tunnelRightList } from '../../utils/pathJson'

export default {
  name: 'index',
  components: {
    FlvPlayer,
  },
  data() {
    return {
      // 电伴热设备列表
      iotDBRInfo: {},
      nowTime: '',
      searchForm: {
        area: '2',
        editable: '2',
      },
      treeData: [],
      filterText: "",
      areaList: window.config.areaList,
      deviceTypeList: window.config.deivceTypeList,
      deviceTypeList1: [
        { id: '11', name: '风机' },
        { id: '13', name: '车道指示灯' },
        { id: '14', name: '交通信号灯' },
        { id: '15', name: '情报板' },
        { id: '19', name: '卷帘门' },
        { id: '21', name: '消防水池' },
        { id: '25', name: '微波车辆检测器' },
        { id: '26', name: '风速风向' },
        { id: '27', name: '一氧化碳能见度' },
        { id: '28', name: '光强传感器' },
        { id: '39', name: '配电房' },
        { id: '40', name: '消防泵房' },
        { id: '41', name: '污水泵房' },
        { id: '42', name: '雨水泵房' },
        { id: '45', name: '可变限速标志' },
      ],
      laneList: window.config.laneList,
      directionList: window.config.directionList,
      statusList: window.config.statusList,
      colorList: [
        { id: 'c255000000000', name: '红' },
        { id: 'c255255000000', name: '黄' },
        { id: 'c000255000000', name: '绿' },
      ],
      warnTypeList: window.config.warnTypeList,
      warnStatusList: window.config.warnStatusList,
      deviceBarTypeList: [
        { id: '15', name: '情报板' },
        { id: '11', name: '风机' },
        { id: '13', name: '车道指示灯' },
        { id: '14', name: '交通信号灯' },
        { id: '19', name: '卷帘门' },
        { id: '40', name: '消防泵房' },
        { id: '41', name: '污水泵房' },
        /*{id: '16', name: '报警器'},*/
        // {
        //   id: '17',
        //   name: '广播电话系统',
        //   url: window.config.typeUrlLink['17'],
        // },
        // { id: '12', name: '照明系统', url: window.config.typeUrlLink['12'] }
        // ,
      ],
      taskEnum: window.config.taskEnum,
      totalWidth: 1562,
      totalHeight: 560,
      // 保存拖拽的元素的列表
      componentsList: [],
      componentsOldList: [],
      deviceId: '', // 当前项的 唯一标识
      curControl: null, //
      warnControl: null,
      flag: '',
      containerMoveObj: {
        type: '',
        x: '',
        y: '',
      },
      scale: 1,

      dataForm: {},
      dataFormBody: {},
      deviceDialogVisible: false,
      addOrUpdateTitle: '',
      rules: {
        deviceId: [{ required: true, message: '请输入', trigger: 'blur' }],
        deviceType: [{ required: true, message: '请选择', trigger: 'change' }],
      },
      pileNumMap: {
        1: {
          left: 'K30+600',
          right: 'K34+800',
          //   length1: '4000',
          //   length2: '2616',
          length1: '2616',
          length2: '2606',
          width: 5000,
          pileNumData: ['K31+294', 'K33+916'],
          n: 10,
        },
        2: {
          left: 'K58+176',
          right: 'K60+976',
          //   length1: '2800',
          length1: '2200',
          length2: '2200',
          width: 5000,
          pileNumData: ['K58+476', 'K60+676'],
          n: 10,
        },
        // 1: {
        //   left: 'K9+720',
        //   right: 'K11+076',
        //   length1: '960',
        //   length2: '624',
        //   width: 1893,
        //   pileNumData: ['K9+933', 'K10+595'],
        //   n: 5,
        // },
        // 2: {
        //   left: 'K16+650',
        //   right: 'K18+150',
        //   length1: '965.647',
        //   length2: '965.647',
        //   width: 1993,
        //   pileNumData: ['K17+015', 'K17+935'],
        //   n: 5,
        // },
        // 3: {
        //   left: 'K18+220',
        //   right: 'K21+250',
        //   length1: '2897.232',
        //   length2: '2897.232',
        //   width: 6000,
        //   pileNumData: ['K18+302', 'K20+990'],
        //   n: 19,
        // },
      },
      pileNumList: [],
      deviceForm: {},

      warnShow: true,
      planShow: false,
      planList: [],
      planDetailShow: false,
      warnDetailShow: false,
      planForm: {},
      planDetailData: [],
      planDetailMap: {
        11: [],
        13: [],
        14: [],
        15: [],
        19: [],
      },
      deviceRunShow: false,
      main2DShow: true,
      deviceType: '',

      marks: 10, // 刻度的数量
      markWidth: 100, // 每个刻度的宽度

      deviceData: [],
      taskList: [],
      deviceData2: [],
      deviceDialogVisible2: false,
      infoBoardTemplateList: [],
      textInfoList: [],
      tempMap: {},
      controlShow: false,
      multipleSelection: [],
      warnList: [{
        id: '1',
        status: 1,
        type: ''
      }, {
        id: '2',
        status: 2,
        type: ''
      }],
      componentsWarnList: [],
      statusTimer: null,
      deviceLoading: false,
      warnMap: {},
      templateHtmlList: [],
      templateInfoHtml: '',
      statsticInfo: {
        warn_count_done: 0,
        device_error: 0,
        warn_count_todo: 0,
        device_count: 0,
      },
      videoForm: window.config.videoForm,
      videoUrl: '',
      iotKeyList: [],
      iotKeyData: [],
      warnForm: {},
      planLoading: false,
      planSuccess: false,
      planDeviceType: ['14', '13', '11', '15', '19'],
      defaultProps: {
        children: "children",
        label: "name",
        name: "name",
        content: "content",
        // displaySize: "displaySize",
      },
      listMedia: [
        /*{
          id:20,
          "name":"1前方隧道施工，请按车道指示灯行驶",
          "path":"/soft/upload/audio/e5ccbd29-3788-4480-9d83-8ad0a5d5a320.mp3",
          "type":1
        },
        {
          id:4,
          "name":"1前方隧道施工",
          "path":"/soft/upload/audio/36ebd0f5-4c3a-4585-8d25-3afa9f3dc7ca.mp3",
          "type":1
        }*/
      ],
      mediaObj: null,
      templateObj: '',
      deviceControlShow: false,
      deviceIds15: [],
      deviceIds: [],
      deviceDataId: [],
      patrolShow: false,
    }
  },
  mounted() {
    console.log(this.$route.params.area, this.$route, 'xxxxxxx');
    if (this.$route.params.area) {

      this.searchForm.area = this.$route.params.area
    }
    this.init()
    this.handleLinkClient()
  },
  methods: {
    //  改变电伴热设备状态
    async ChangeDBRdevocte() {
      if (this.iotDBRInfo.status == '异常' || !this.iotDBRInfo.device_id) {
        this.$message.warning('设备异常，不能操作')
        return
      }
      console.log(this.iotDBRInfo.online, '开关状态');
      let res = await changeDbrIotDeviceStatus({
        device_id: this.iotDBRInfo.device_id,
        action: this.iotDBRInfo.online ? 'open' : 'close',
      })
      if (res?.data?.message) {
        this.$message.success(res.data.message)
      }
    },


    dateTimeFormat,
    init() {
      var that = this
      //sessionStorage.setItem("indexBreadcrumbList", JSON.stringify(["/control","/"]))
      setInterval(() => {
        that.nowTime = that.getNowTime()
      }, 1000)

      that.loadWarnList()
      that.warnTimer = setInterval(() => {
        that.loadWarnList()
      }, 15000)

      setTimeout(() => {
        if (that.warnList.length > 0) {
          that.warnShow = true
        } else {
          that.warnShow = false
        }
        that.tunnelClick(this.searchForm.area)
      }, 400)
      that.statsticWhole()
    },
    scrollClick(index) {
      var that = this
      if (index == 1) {
        that.$refs.scrollContainer.scrollLeft =
          that.$refs.scrollContainer.scrollLeft - 800
      } else {
        that.$refs.scrollContainer.scrollLeft =
          that.$refs.scrollContainer.scrollLeft + 800
      }
    },
    statsticWhole() {
      var that = this
      statsticWhole().then((res) => {
        if (res.status == 200) {
          if (res.data.retCode == 0) {
            that.statsticInfo['warn_count_done'] =
              res.data.result.warn_count_done
            that.statsticInfo['device_count'] = res.data.result.device_count
            that.statsticInfo['device_error'] = res.data.result.device_error
          } else {
            that.$message.warning(res.data.message)
          }
        }
      })
    },
    tunnelClick(id) {
      var that = this
      /*if(that.searchForm.area == id){
        return;
      }*/
      that.searchForm.area = id
      that.loadWarnMarker(that.warnMap[that.searchForm.area])
      if (!that.main2DShow) {
        that.main2DShow = true
        that.deviceClose()
      }

      var form = that.pileNumMap[that.searchForm.area]
      var km1 = form.left.replace('K', '').replace('+', '.')
      var km2 = form.right.replace('K', '').replace('+', '.')
      console.log('form', form)
      var num = that.pileNumMap[that.searchForm.area].n
      var average = (Number(km2) - Number(km1)) / num
      that.pileNumList = []
      for (var i = 0; i < num; i++) {
        let a = (Number(km1) + i * average).toFixed(3)
        that.pileNumList.push('K' + a.replace('.', '+'))
      }
      that.pileNumList.push(form.right)
      /*var a = (Number(km1) + average).toFixed(3)
      that.pileNumList = [form.left,'K'+a.replace(".", "+"),form.right]*/
      console.log('that.pileNumList', that.pileNumList)
      that.scale = (form.width - 304) / 1000 / (Number(km2) - Number(km1))
      that.loadTable()

      flowStatistic({ area: that.searchForm.area }).then((res) => {
        if (res.status == 200) {
          if (res.data.retCode == 0) {
            that.liuliangLine(res.data.result)
          } else {
            that.$message.warning(res.data.message)
          }
        }
      })
    },
    loadTable() {
      var that = this
      deviceList1(that.searchForm).then((res) => {
        console.log(res, 'reeessss')
        if (res.status == 200) {
          // if (res.data.retCode == 0) {
          that.tableData = res.data.data
          console.log(that.tableData, 'ttttttttttttttt')
          that.loadMarker()

          that.deviceDataId = []
          that.tableData.forEach((item) => {
            if (
              item.deviceType == '11' ||
              item.deviceType == '13' ||
              item.deviceType == '14'
            ) {
              that.deviceDataId.push(item.deviceId)
            }
          })
          that.dataForm.deviceId = that.deviceDataId.toString()
          if (that.warnShow) {
            clearTimeout(that.statusTimer)
            that.statusTimer = null
          } else {
            that.deviceStatusBatch()
          }
        } else {
          that.$message.warning(res.data.message)
        }
        // }
      })
    },
    loadMarker() {
      var that = this
      that.componentsList = []
      that.componentsOldList = []
      that.deviceIdOptions = []
      that.tableData.forEach((item, index) => {
        // console.log(item, 'iiittteeemmm')
        if (item.pileNum) {
          var json = item
          let imgForm = window.config.drapLeftElMap[item.deviceType]
          if (!imgForm) {
            return
          }
          that.deviceIdOptions.push(item.deviceId)
          json.imgUrl =
            item.deviceType == 13
              ? imgForm['url' + item.direction]
              : imgForm.url
          var x = 0,
            y = 0
          if (item.deviceType == 13) {   //车道指示灯 根据状态 展示不同方向的图片  direction  2是下行左箭头 1是上行右箭头
            console.log(item, item.direction, 'xxxxxxxxxx')
            if (item.direction == 2) { //下行
              if (item.rotationDirection == null || item.rotationDirection == '正向通行') {
                json.imgUrl = './lib/icon/132.png'
              } else if (item.rotationDirection == '反向通行') {
                json.imgUrl = './lib/icon/131.png'
              } else if (item.rotationDirection == '封道') {
                json.imgUrl = './lib/icon/133.png'
              } else if (item.rotationDirection == '正向左转') {
                json.imgUrl = './lib/icon/135.png'
              }
              //   else if(item.rotationDirection == '反向左转'){
              //     json.imgUrl = './lib/icon/135.png'
              //   }
            } else if (item.direction == 1) { //上行
              if (item.rotationDirection == null || item.rotationDirection == '正向通行') {
                json.imgUrl = './lib/icon/131.png'
              } else if (item.rotationDirection == '反向通行') {
                json.imgUrl = './lib/icon/132.png'
              } else if (item.rotationDirection == '封道') {
                json.imgUrl = './lib/icon/133.png'
              } else if (item.rotationDirection == '正向左转') {
                json.imgUrl = './lib/icon/134.png'
              }
              //   else if(item.rotationDirection == '反向左转'){
              //     json.imgUrl = './lib/icon/134.png'
              //   }
            }
          }
          //风机
          if (item.deviceType == 11) {   //车道指示灯 根据状态 展示不同方向的图片  direction  2是下行左箭头 1是上行右箭头
            // console.log(item,item.direction,'xxxxxxxxxx')
            if (item.direction == 2) { //下行
              if (item.rotationDirection == null || item.rotationDirection == '正转') {
                json.imgUrl = './lib/icon/111.gif'
              } else if (item.rotationDirection == '反转') {
                json.imgUrl = './lib/icon/112.gif'
              } else if (item.rotationDirection == '停止') {
                json.imgUrl = './lib/icon/11.png'
              }
              console.log("json.imgUrl", json.imgUrl)

            } else if (item.direction == 1) { //上行
              if (item.rotationDirection == null || item.rotationDirection == '正转') {
                json.imgUrl = './lib/icon/111.gif'
              } else if (item.rotationDirection == '反转') {
                json.imgUrl = './lib/icon/112.gif'
              } else if (item.rotationDirection == '停止') {
                json.imgUrl = './lib/icon/11.png'
              }
              console.log("json.imgUrl", json.imgUrl)
            }
          }
          //交通信号灯
          if (item.deviceType == 14) {   //车道指示灯 根据状态 展示不同方向的图片  direction  2是下行左箭头 1是上行右箭头
            // console.log(item,item.direction,'xxxxxxxxxx')
            if (item.direction == 2) { //下行
              if (item.rotationDirection == null || item.rotationDirection == '变绿灯') {
                json.imgUrl = './lib/icon/143.png'
              } else if (item.rotationDirection == '变黄灯') {
                json.imgUrl = './lib/icon/142.png'
              } else if (item.rotationDirection == '变红灯') {
                json.imgUrl = './lib/icon/141.png'
              }

            } else if (item.direction == 1) { //上行
              if (item.rotationDirection == null || item.rotationDirection == '变绿灯') {
                json.imgUrl = './lib/icon/143.png'
              } else if (item.rotationDirection == '变黄灯') {
                json.imgUrl = './lib/icon/142.png'
              } else if (item.rotationDirection == '变红灯') {
                json.imgUrl = './lib/icon/141.png'
              }
            }
          }
          json.position = {
            x: 0,
            y: 0,
            w: imgForm.w,
            h: imgForm.h,
            bg: '#fff',
          }
          let km = item.pileNum.replace('K', '').replace('+', '.')
          let km1 = that.pileNumMap[that.searchForm.area].left
            .replace('K', '')
            .replace('+', '.')
          let subtract = Number(km) - Number(km1)
          json.position.x = subtract * 1000 * that.scale - imgForm.w / 2
          x = subtract * 1000 * that.scale - imgForm.w / 2
          if (item.lane == 0) {
            json.position.y = 265 - imgForm.h / 2
            y = 265 - imgForm.h / 2
          } else {
            if (item.direction == '2') {
              let newLane = that.distanceFromNine(Number(item.lane))
              json.position.y = newLane * 24 + 13 - imgForm.h / 2
              y = newLane * 24 + 13 - imgForm.h / 2
            } else {
              json.position.y = item.lane * 24 + 271 - imgForm.h / 2
              y = item.lane * 24 + 271 - imgForm.h / 2
            }
          }
          json.temp = {
            position: {
              x: x,
              y: y,
            },
          }

          json.opacity = 1

          json.zIndex = 4
          if (item.deviceType == '15' || item.deviceType == '51') {
            json.zIndex = 3
          } else if (item.deviceType == '55' || item.deviceType == '56') {
            json.zIndex = 2
          }
          // console.log(json, 'ooooooooooooooooooooooooooooooooooooooo')
          if (item.task) {
            var j = JSON.parse(item.task)
            if (item.deviceType == '11') {
              if (j.command != -1) {
                json.imgUrl = imgForm['url' + j.command]
              }
            } else if (item.deviceType == '13') {
              if (j.command != -1) {
                json.imgUrl =
                  imgForm['url' + item.direction + '' + item.direction][
                  j.command
                  ]
              }
            } else if (item.deviceType == '14') {
              if (j.command != -1) {
                json.imgUrl = imgForm['urls'][j.command]
              }
            }
            console.log(json, 'jjjjjjjjjjjjjjjjjjjjjjjjjj')
            if (j.body) {
              var b = JSON.parse(j.body)
              if (item.deviceType == '12') {
                //that.$set(that.dataForm, 'light', b.light)
                json.opacity = b.light / 100
              } /*else if (item.deviceType == '15') {
                infoBoardTemplateList().then(res => {
                  if (res.status == 200) {
                    if (res.data.retCode == 0) {

                      res.data.result.forEach((item,i)=>{
                        if(item.id == b.templateId){
                          json.content = that.domRender(item.textInfo,b.value,item.id,1)
                        }
                      })
                    } else {
                      that.$message.warning(res.data.message);
                    }
                  }
                })
              }*/
            }
          }
          that.componentsOldList.push(json)
        }
      })
      setTimeout(() => {
        that.componentsList = JSON.parse(JSON.stringify(that.componentsOldList))
        console.log(that.componentsList, 'that.componentsList')
      }, 1000)
    },

    deviceTypeClick(item) {
      console.log('pppppppppppppppppppp', item)
      var that = this
      that.deviceClose()
      if (item.id == '12' || item.id == '17') {
        window.open(item.url)
        return
      }
      that.controlShow = false
      that.dataForm = {
        deviceType: item.id,
      }
      that.dataFormBody = {}
      if (that.dataForm.deviceType == '15') {
        that.loadinfoBoardTemplate(0)
        /*infoBoardTemplateList().then(res => {
          if (res.status == 200) {
            if (res.data.retCode == 0) {
              res.data.result.forEach((item,i)=>{
                var form = {
                  ...item,
                  templateHtml:that.domRender(item.textInfo),
                }
                that.infoBoardTemplateList.push(form)
              })
            } else {
              that.$message.warning(res.data.message);
            }
          }
        })*/
      }
      that.taskList = that.taskEnum[item.id].taskList
      that.loadDevice2(item.id)
      that.deviceDialogVisible2 = true
    },
    handleSelectionChange(val) {
      this.$set(this.dataForm, 'command', '')
      this.multipleSelection = val
      if (this.multipleSelection.length > 0) {
        this.controlShow = true
      } else {
        this.controlShow = false
      }
    },
    loadDevice2(deviceType) {
      var that = this
      deviceList({
        deviceType: deviceType,
        area: that.searchForm.area,
        editable: '2',
      }).then((res) => {
        if (res.status == 200) {
          if (res.data.retCode == 0) {
            that.deviceData2 = res.data.result
            if (deviceType != '15') {
              var ids = []
              that.deviceData2.forEach((item) => {
                ids.push(item.deviceId)
              })
              that.dataForm.deviceId = ids.toString()
              that.deviceStatusBatch()
            }
          } else {
            that.$message.warning(res.data.message)
          }
        }
      })
    },
    typeClick(id) {
      var that = this
      if (that.searchForm.deviceType == id) {
        id = ''
      }
      that.searchForm.deviceType = id
      that.loadTable()
    },
    handle2D() {
      var that = this
      that.main2DShow = true
      that.patrolShow = false
      that.deviceClose()
    },
    handle3D() {
      var that = this
      if (that.searchForm.area == '2') {
        that.main2DShow = false
        deviceList({ area: that.searchForm.area, editable: '2' }).then(
          (res) => {
            if (res.status == 200) {
              if (res.data.retCode == 0) {
                var data = res.data.result
                var model13 = []
                data.forEach((item) => {
                  if (item.task) {
                    var j = JSON.parse(item.task)
                    if (j.command != -1) {
                      if (item.deviceType == '13' && item.modelId) {
                        let model13 = {}
                        if (j.command == 0) {
                          model13 = {
                            modelId: [item.modelId],
                            frontType: 2,
                            backType: 3,
                          }
                        } else if (j.command == 1) {
                          model13 = {
                            modelId: [item.modelId],
                            frontType: 3,
                            backType: 2,
                          }
                        } else if (j.command == 2) {
                          model13 = {
                            modelId: [item.modelId],
                            frontType: 3,
                            backType: 3,
                          }
                        }
                        that.setLaneStatusIndicator(model13)
                      } else if (item.deviceType == '14' && item.modelId) {
                        let a = {
                          id: '304',
                          status: 'N',
                          isFlash: false,
                          remainTime: 55,
                        }
                        let b = {
                          id: '305',
                          status: 'N',
                          isFlash: false,
                          remainTime: 55,
                        }
                        if (j.command == 1) {
                          a.status = 'R'
                        } else if (j.command == 2) {
                          a.status = 'Y'
                        } else if (j.command == 3) {
                          a.status = 'G'
                        } else if (j.command == 4) {
                          b.status = 'G'
                        }
                        that.updateTrafficSignal([a, b])
                      } else if (item.deviceType == '15' && item.modelId) {
                        if (j.body) {
                          j.dataFormBody = JSON.parse(j.body)
                          console.log("j.dataFormBody", j.dataFormBody)
                          that.loadinfoBoardTemplate(
                            3,
                            j.dataFormBody.textInfoList,
                            item.modelId
                          )
                        }
                      }
                    }
                  }
                })
              } else {
                that.$message.warning(res.data.message)
              }
            }
          }
        )
      }
    },
    handlePatrol() {
      var that = this
      that.patrolShow = !that.patrolShow
      //that.setCameraRoaming(tunnelRightList)
    },
    setCameraRoaming(data) {
      let params = {
        coordType: 0,
        coordTypeZ: 1,
        loopMode: false,
        visualMode: 1,
        pitch: 1,
        speed: 50,
        pointDistance: 0,
        point: data,
      }

      // js 形式
      try {
        window.MetaDigieeApi.Camera.setCameraRoaming(params)
        //成功返回
      } catch (err) {
        //异常处理
      }
    },
    patrolClick(val) {
      var that = this
      var params = {
        movingState: 'pause',
      }
      switch (val) {
        case 'pause':
          params = {
            movingState: 'pause',
          }
          window.MetaDigieeApi.Camera.setCameraRoamingState(params)

          break
        case 'play':
          params = {
            movingState: 'continue',
          }
          window.MetaDigieeApi.Camera.setCameraRoamingState(params)
          break
        case 'end':
          params = {
            movingState: 'stop',
          }
          window.MetaDigieeApi.Camera.setCameraRoamingState(params)
          break
        case 'tunnelLeft':
          that.setCameraRoaming(tunnelLeftList)
          break
        case 'tunnelRight':
          that.setCameraRoaming(tunnelRightList)
          break
      }
    },
    async handleLinkClient() {
      var that = this
      that.passrecordList = []
      const params = window.config.mapParams
      try {
        let res = await window.MetaDigieeApi.Service.openService(params)
        console.log(res)
        if (res.code == 200) {
          let params2 = {
            pitchRotSpeed: 10,
            yawRotSpeed: 10,
            scaleSpeed: 10,
            translateSpeed: 10,
          }
          window.MetaDigieeApi.Camera.setCameraSpeedInfo(params2)

          let params3 = {
            intersectionId: ['Cross01'],
            state: true,
          }
          window.MetaDigieeApi.TrafficSignal.setTrafficSignalState(params3)

          setTimeout(() => {
            that.setVehicleTrackState() //开启车辆实时轨迹
          }, 1000)

          let res = await window.MetaDigieeApi.Event.addMouseEventListener(
            (event) => {
              if (event.data.modelId && event.data.eventType === 'click') {
                that.dataForm = {}
                that.addOrUpdateTitle = ''
                deviceList({ modelId: event.data.modelId }).then((res) => {
                  if (res.status == 200) {
                    if (res.data.retCode == 0) {
                      if (res.data.result.length > 0) {
                        that.handleClick(res.data.result[0], 0)
                        //that.addInfoWindow(event.data.modelId,`./iframe/event.html?deviceId=${item.deviceId}&deviceType=${item.deviceType}&pileNumShow=${item.pileNumShow}&direction=${item.direction}`,[540,360],[20,-330])

                        /*setTimeout(()=>{
                        that.addInfoWindow(event.data.modelId,item)
                      },400)*/
                      } else {
                        that.deviceClose()
                      }
                    } else {
                      that.$message.warning(res.data.message)
                    }
                  }
                })
              }
            }
          )
        } else {
          that.$message.warning(res.message)
        }
      } catch (err) {
        that.$message.warning(err)
      }
    },
    async addInfoWindow(modelId, item) {
      var that = this
      var taskName = ''
      if (item.task) {
        var j = JSON.parse(item.task)
        taskName = that.filedFomatter(
          j.command,
          that.taskEnum[item.deviceType].taskList
        )
      }
      console.log(taskName)
      try {
        let params = {
          modelId: modelId,
          windowDoc:
            '<div style="border: 1px solid #27bebe;background: rgba(19,110,206,0.5);padding: 0 20px;font-size: 14px;line-height: 25px;color: white">' +
            '<div><span style="font-weight: 300;">设备类型：' +
            filedFomatter(item.deviceType, that.deviceTypeList) +
            '</span></div>' +
            '<div><span style="font-weight: 300;;word-wrap: break-word">modelId：' +
            item.modelId +
            '</span></div>' +
            '<div><span style="font-weight: 300;;word-wrap: break-word">物联key：' +
            item.iotKey +
            item.modelId +
            item.modelId +
            '</span></div>' +
            '<div><span style="font-weight: 300;">桩号：' +
            item.pileNumShow +
            '</span></div>' +
            '<div><span style="font-weight: 300;">运行状态：' +
            taskName +
            '</span></div>' +
            '</div>',
          infoWindowId: 'infoWindow01',
          windowSize: [400, 200],
          windowOffset: [0, 0],
          dismissible: true,
        }
        window.MetaDigieeApi.InfoWindow.addInfoWindow(params)
        //成功返回
      } catch (err) {
        //异常处理
      }
    },
    async setLaneStatusIndicator(model13) {
      var that = this
      try {
        let params = model13
        //成功返回
        let res = await window.MetaDigieeApi.LSIS.setLaneStatusIndicator(params)
      } catch (e) { }
    },
    async updateTrafficSignal(phase) {
      var that = this
      const params = {
        effectSignalVisible: false,
      }
      const res =
        await window.MetaDigieeApi.TrafficSignal.setEffectTrafficSignalVisibility(
          params
        )
      try {
        let params = [
          {
            intersectionId: 'Cross01',
            changeTime: '2023-02-16 12:00:00',
            phase: phase,
          },
        ]
        //成功返回
        let res = await window.MetaDigieeApi.TrafficSignal.updateTrafficSignal(
          params
        )
      } catch (e) { }
    },
    async updateVMSInfo(data) {
      var that = this
      try {
        let params = data
        let res = await window.MetaDigieeApi.VMS.updateVMSInfo(params)
        //成功返回
      } catch (err) {
        //异常处理
        console.log(err)
      }
    },
    async setVehicleTrackState() {
      var that = this
      try {
        const params = {
          modelId: ['mec0'],
          isAdsorbed: true,
          mode: 0,
          state: true,
        }
        let res123 =
          await window.MetaDigieeApi.VehicleTrack.setVehicleTrackState(params)

        let params1 = {
          plateVisible: true,
        }
        window.MetaDigieeApi.VehicleTrack.setVehiclePlateVisibility(params1) //显示车牌
        let params2 = {
          speedVisible: true,
        }
        window.MetaDigieeApi.VehicleTrack.setVehicleSpeedVisibility(params2) //显示车速

        if (res123.code == 200) {
          setTimeout(() => {
            that.loadData()
          }, 200)
        }
      } catch (err) {
        //异常处理
        console.log(err)
      }
    },
    loadData() {
      var that = this
      connectWebsocket(
        // 测试地址
        window.config.wsUrl,
        // 传递给后台的数据
        '',
        // { openexe: 'openexe' },
        // 成功拿到后台返回的数据的回调函数
        (data) => {
          if (data) {
            dataList = JSON.parse(data)
            console.log(dataList)
            if (dataList.facilityId) {
              that.updateVehicleTrack(dataList)
            }
          }
        },
        // websocket连接失败的回调函数
        (err) => {
          console.log('失败的回调函数', err)
          dataList = {}
        }
      )
    },
    async updateVehicleTrack(vehicleList) {
      try {
        let params = vehicleList
        let res = await window.MetaDigieeApi.VehicleTrack.updateVehicleTrack(
          params
        )
        //成功返回
        console.log(res)
      } catch (err) {
        //异常处理
        console.log(err)
      }
    },
    handleWarnClick(index) {
      console.log(index, 'xxxxxxxxxxxxxxxxxxx')
      var that = this
      clearTimeout(that.statusTimer)
      that.statusTimer = null

      that.planClose()
      that.warnList = []
      if (index == '2') {
        latestWarnList().then((res) => {
          if (res.status == 200) {
            if (res.data.retCode == 0) {
              that.warnList = res.data.result
              that.statsticInfo.warn_count_todo = res.data.total
            } else {
              //that.$message.warning(res.data.message);
            }
          }
        })
      } else {
        warnList({ status: index }).then((res) => {
          if (res.status == 200) {
            if (res.data.retCode == 0) {
              that.warnList = res.data.result
            } else {
              that.$message.warning(res.data.message)
            }
          }
        })
      }
      that.warnShow = true
    },
    loadWarnList() {
      var that = this
      latestWarnList().then((res) => {
        if (res.status == 200) {
          if (res.data.retCode == 0) {
            that.warnList = res.data.result
            that.statsticInfo.warn_count_todo = res.data.total

            var warnList = res.data.result
            that.warnMap = {}
            var arr1 = []
            var arr2 = []
            var arr3 = []
            warnList.forEach((item) => {
              if (item.area == 1) {
                arr1.push(item)
              } else if (item.area == 2) {
                arr2.push(item)
              } else if (item.area == 3) {
                arr3.push(item)
              }
            })
            that.warnMap = {
              1: arr1,
              2: arr2,
              3: arr3,
            }
            that.loadWarnMarker(that.warnMap[that.searchForm.area])  ////加载报警图标
          } else {
            //that.$message.warning(res.data.message);
          }
        }
      }) /*
      warnList({status:'1,2'}).then(res=>{
        if (res.status == 200) {
          if (res.data.retCode == 0) {
            that.warnList = res.data.result
            if(that.warnList.length > 0){
              that.warnShow = true;
            }
            var warnList = res.data.result
            that.warnMap = {}
            var arr1 = []
            var arr2 = []
            var arr3 = []
            warnList.forEach(item=>{
              if(item.area == 1){
                arr1.push(item)
              }else if(item.area == 2){
                arr2.push(item)
              }else if(item.area == 3){
                arr3.push(item)
              }
            })
            that.warnMap = {
              '1':arr1,
              '2':arr2,
              '3':arr3
            }
            //that.loadWarnMarker(that.warnMap[that.searchForm.area])
          } else {
            that.$message.warning(res.data.message);
          }
        }
      })*/
    },
    handleCheckChange(data, checked, indeterminate) {
      console.log(data, checked, indeterminate);
      // this.addComment(data,data.programId)

    },
    handleCheck(checkedNodes) {
      console.log(checkedNodes, "cscscscs");
      // 这里可以处理选中项的逻辑，比如更新checkedKeys等。
      //   this.textInfoList = checkedNodes.push() // 根据需要更新checkedKeys数组，例如只保留id等。
      this.textInfoList.push(checkedNodes.programId)
      console.log(this.textInfoList, "cscscscs");
    },
    loadWarnMarker(data) {
      var that = this
      that.componentsWarnList = []
      that.componentsOldWarnList = []
      that.warnIdOptions = []
      if (!data) {
        return
      }
      data.forEach((item, index) => {
        if (item.pileNum) {
          that.warnIdOptions.push(item.id)
          let imgForm = window.config.drapWarnElMap[item.type]
          var json = item
          json.imgUrl = imgForm.url
          var x = 0,
            y = 0

          json.position = {
            x: 0,
            y: 0,
            w: imgForm.w,
            h: imgForm.h,
            bg: '#fff',
          }
          let km = item.pileNum.replace('K', '').replace('+', '.')
          let km1 = that.pileNumMap[that.searchForm.area].left
            .replace('K', '')
            .replace('+', '.')
          let subtract = Number(km) - Number(km1)
          json.position.x = subtract * 1000 * that.scale - imgForm.w / 2
          x = subtract * 1000 * that.scale - imgForm.w / 2
          if (item.lane == 0) {
            json.position.y = 265 - imgForm.h / 2
            y = 265 - imgForm.h / 2
          } else {
            if (item.direction == '2') {
              let newLane = that.distanceFromNine(Number(item.lane))
              json.position.y = newLane * 24 + 13 - imgForm.h / 2
              y = newLane * 24 + 13 - imgForm.h / 2
            } else {
              json.position.y = item.lane * 24 + 271 - imgForm.h / 2
              y = item.lane * 24 + 271 - imgForm.h / 2
            }
          }
          json.temp = {
            position: {
              x: x,
              y: y,
            },
          }

          that.componentsOldWarnList.push(json)
        }
      })
      setTimeout(() => {
        that.componentsWarnList = JSON.parse(
          JSON.stringify(that.componentsOldWarnList)
        )
      }, 1000)
    },
    warnClose() {
      this.warnShow = false
      this.warnForm = {}
      this.warnControl = null
      this.warnDetailClose()
    },
    warnDetailClose() {
      this.warnDetailShow = false
      if (this.statusTimer) {
        clearTimeout(this.statusTimer)
        this.statusTimer = null
      }
      this.dataForm.deviceId = this.deviceDataId.toString()
      this.deviceStatusBatch()
    },
    planDetailClose() {
      this.planDetailShow = false
      if (this.statusTimer) {
        clearTimeout(this.statusTimer)
        this.statusTimer = null
      }
      this.dataForm.deviceId = this.deviceDataId.toString()
      this.deviceStatusBatch()
    },
    planClose() {
      this.planShow = false
      this.planDetailClose()
    },
    warnClick(row) {
      var that = this
      that.warnForm = JSON.parse(JSON.stringify(row))
      if (that.warnForm.area != that.searchForm.area) {
        that.tunnelClick(that.warnForm.area)
      }
      that.warnControl = that.warnForm
    },
    planDisposalClick(item) {
      var that = this
      that.warnDetailClose()
      that.planShow = true
      planList({ status: '1', area: item.area, planType: item.type }).then(
        (res) => {
          if (res.status == 200) {
            if (res.data.retCode == 0) {
              that.planList = res.data.result
            } else {
              that.$message.warning(res.data.message)
            }
          }
        }
      )
    },
    warnPlanClick(row) {
      var that = this
      if (that.statusTimer) {
        clearTimeout(that.statusTimer)
        that.statusTimer = null
      }

      that.dataForm = {}
      that.planLoading = false
      that.planSuccess = false
      that.warnDetailShow = true
      that.planDetailMap = {
        11: [],
        13: [],
        14: [],
        15: [],
        19: [],
      }
      that.planForm = JSON.parse(JSON.stringify(row))
      that.deviceIds = []
      that.deviceIds15 = []
      that.templateObj = ''
      that.mediaObj = null
      that.listMedia = []

      deviceList({
        area: that.planForm.area,
        editable: '2',
        deviceType: that.planDeviceType.toString(),
        direction: that.planForm.direction,
      }).then((res) => {
        that.loading = false
        if (res.status == 200) {
          if (res.data.retCode == 0) {
            that.planDetailMap = {
              11: [],
              13: [],
              14: [],
              15: [],
              19: [],
            }
            var km1 = that.planForm.pileNum.replace('K', '').replace('+', '.')
            res.data.result.forEach((item) => {
              var km2 = item.pileNum.replace('K', '').replace('+', '.')
              var obj = {
                id: item.deviceId,
                pileNum: item.pileNum,
                stream: '0',
              }

              if (item.deviceType == '11') {
                if (Math.abs(km1 - km2) < 0.05) {
                  //小于50米
                  obj.cmd = '0'
                } else {
                  obj.cmd = '1'
                }
              } else if (item.deviceType == '14') {
                obj.cmd = '1'
              } else if (item.deviceType == '13') {
                if (item.direction == 1) {
                  if (km1 < km2) {
                    obj.stream = '2'
                  } else {
                    obj.stream = '1'
                  }
                } else {
                  if (km1 < km2) {
                    obj.stream = '1'
                  } else {
                    obj.stream = '2'
                  }
                }
                if (obj.stream == '1') {
                  obj.cmd = '2'
                } else {
                  obj.cmd = '0'
                }
              } else if (item.deviceType == '15') {
                that.deviceIds15.push(item.deviceId)
              } else if (item.deviceType == '19') {
                obj.cmd = '1'
              }
              that.planDetailMap[item.deviceType].push(obj)
              that.deviceIds.push(item.deviceId)
              /*that.planDetailData.push({
                type:item.deviceType,
                data:p[key]
              })*/
            })
            that.loadinfoBoardTemplate(2)
            console.log(that.planDetailMap)
          } else {
            that.$message.warning(res.data.message)
          }
        }
      })
      // 预案处置中广播的下拉列表暂时屏蔽
      // getMediaList().then((res) => {
      //   if (res.status == 200) {
      //     if (res.data.code == 200) {
      //       that.listMedia = res.data.data.listMedia
      //       that.mediaObj = that.listMedia[0]
      //     } else {
      //       that.$message.warning(res.data.message)
      //     }
      //   }
      // })
    },
    handleCommitPlanClick(index) {
      var that = this
      console.log(index, that.planForm, ' ///////////////////')
      var json = {}
      if (that.deviceIds15.length > 0) {
        var obj = {
          deviceType: '15',
          command: '15_01',
          deviceId: that.deviceIds15.toString(),
          body: JSON.stringify({
            textInfoList: [{ id: that.templateObj, fillInfo: '' }],
          }),
        }
        var url = '/json/iot/iotControlBatch'
        iotControl(obj, url).then((res) => { })
      }
      if (index == 2) {
        // json = {
        //   planType: '2',
        //   warnType: that.planForm.type,
        //   area: that.planForm.area,
        //   direction: that.planForm.direction,
        //   plan: JSON.stringify(that.planDetailMap),
        // }
        json = {
          plc: [],
        }
        console.log(that.planDeviceType, that.planDetailMap[13], '13车道指示灯', that.planDetailMap[14], '14', 'planDeviceTypeplanDeviceType')
        that.planDetailMap[13].forEach((item) => { // 车道指示灯
          let operationInstructions = filedFomatter(item.cmd, that.taskEnum[13].taskList)
          json.plc.push({
            deviceId: item.id,
            operationInstructions: operationInstructions,
            writeOrRead: 'W'
          })
        })
        that.planDetailMap[14].forEach((item) => { //交通信号控制灯
          let operationInstructions = filedFomatter(item.cmd, that.taskEnum[14].taskList)
          console.log(operationInstructions, '141414')
          json.plc.push({
            deviceId: item.id,
            operationInstructions: operationInstructions,
            writeOrRead: 'W'
          })
        })

        that.planSuccess = false
        that.planLoading = true
        batchControl(json).then((res) => {
          that.planLoading = false
          that.planSuccess = true
          console.log(res)
          if (res.data.code == 200) {
            that.$message.success('操作成功')
            that.warnDetailShow = false
            verify({ id: that.planForm.id, status: '8' }).then((res) => {
              if (res.status == 200) {
                if (res.data.retCode == 0) {
                  that.loadWarnList()
                  that.statsticWhole()
                }
              }
            })
          } else {
            that.$message.success(res.data.msg)
          }
        })
      } else if (index == 1) {
        json = {
          planType: '1',
          warnType: that.planForm.warnType,
          planId: that.planForm.planId,
          area: that.planForm.area,
        }
        that.planSuccess = false
        that.planLoading = true
        planExecute(json).then((res) => {
          that.planLoading = false
          if (res.status == 200) {
            if (res.data.retCode == 0) {
              that.$message.success('成功')
              that.planSuccess = true
              setTimeout(() => {
                that.dataForm.deviceId = that.deviceIds.toString()
                that.deviceStatusBatch(index)
              }, 2000)
            } else {
              that.$message.warning(res.data.message)
            }
          }
        })
      }
      if (that.mediaObj.id) {
        var extens = []
        getEmployeeList().then((res) => {
          if (res.status == 200) {
            if (res.data.code == 200) {
              res.data.data.employeeList.forEach((item) => {
                extens.push(item.exten)
              })
              var obj = {
                name: that.mediaObj.name,
                extenNums: extens.toString(),
                AudioSourceType: that.mediaObj.type,
              }
              if (that.mediaObj.type == '1') {
                obj.audioStr = that.mediaObj.id
              } else {
                obj.textContent = ''
              }

              addBroadcast(obj).then((res) => {
                if (res.status == 200) {
                  if (res.data.code == 200) {
                  } else {
                    that.$message.warning(res.data.message)
                  }
                }
              })
            } else {
              that.$message.warning(res.data.message)
            }
          }
        })
      }
    },
    planClick(row) {
      var that = this
      that.dataForm = {}
      that.planLoading = false
      that.planSuccess = false
      that.planDetailShow = true
      that.planDetailData = []
      that.planForm = JSON.parse(JSON.stringify(row))
      that.deviceIds = []
      if (that.statusTimer) {
        clearTimeout(that.statusTimer)
        that.statusTimer = null
      }
      planDetail({ planId: row.planId }).then((res) => {
        if (res.status == 200) {
          if (res.data.retCode == 0) {
            var p = JSON.parse(res.data.result.plan)
            for (let key in p) {
              that.planDetailData.push({
                type: key,
                data: p[key],
              })
              p[key].forEach((item) => {
                that.deviceIds.push(item.id)
              })
            }
          } else {
            that.$message.warning(res.data.message)
          }
        }
      })
    },
    verifyClick(row) {
      var that = this
      that
        .$confirm('已确认?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
        .then(() => {
          verify({ id: row.id, status: '3' }).then((res) => {
            if (res.status == 200) {
              if (res.data.retCode == 0) {
                that.$message.success('成功')
                that.loadWarnList()
                that.statsticWhole()
              } else {
                that.$message.warning(res.data.message)
              }
            }
          })
        })
        .catch(() => {
          that.$message.info('已取消删除')
        })
    },
    handleDeviceRunClick() {
      var that = this
      that.loadDevice()
      that.deviceRunShow = true
    },
    loadDevice() {
      var that = this
      deviceList({
        deviceType: that.deviceType,
        area: that.searchForm.area,
        editable: '2',
      }).then((res) => {
        if (res.status == 200) {
          if (res.data.retCode == 0) {
            that.deviceData = res.data.result
          } else {
            that.$message.warning(res.data.message)
          }
        }
      })
    },
    deviceRunClick(row) {
      var that = this

      that.curControl = row
    },
    async handleClick(row, i) {
      var that = this
      if (row.deviceType == '55' || row.deviceType == '56') {
        return ''
      }
      that.dataForm = {}
      that.textInfoList = []
      that.dataFormBody = {}
      that.dataForm = JSON.parse(JSON.stringify(row))
      that.addOrUpdateTitle =
        that.filedFomatter(that.dataForm.area, that.areaList) +
        ' / ' +
        that.filedFomatter(that.dataForm.deviceType, that.deviceTypeList) +
        ' / ' +
        that.dataForm.deviceId
      that.tempMap = {}
      that.templateInfoHtml = ''
      that.iotKeyList = []
      console.log(that.taskEnum, '点击事件', that.dataForm)
      that.taskList = that.taskEnum[that.dataForm.deviceType].taskList
      if (that.dataForm.refresh == '1') {
        that.deviceStatus()
      }
      // 13 车道指示灯 
      console.log('1111111111111111111111111', that.dataForm.deviceType)
      if (that.dataForm.deviceType == '15') {
        console.log("that.dataFormBody", that.dataFormBody)
        if (that.dataForm.task) {
          var j = JSON.parse(that.dataForm.task)
          console.log("j.dataFormBody", j.dataFormBody)
          that.$set(that.dataForm, 'taskName', j.command)
          if (j.body) {
            j.dataFormBody = JSON.parse(j.body)
            that.loadinfoBoardTemplate(1, j.dataFormBody.textInfoList)
          }
        }
        that.loadinfoBoardTemplate(0)
      } else if (that.dataForm.deviceType == '22') {
        if (that.dataForm.iotKey) {
          that.videoForm.pid = that.dataForm.iotKey
          that.videoUrl = ''
          getPlayAddressByPid(that.videoForm).then((res) => {
            if (res.status == 200) {
              if (res.data.ret == 0) {
                that.videoUrl = res.data.data.flv
              } else {
                that.$message.warning(res.data.message)
              }
            }
          })
        }
      } else if (
        that.dataForm.deviceType == '40' ||
        that.dataForm.deviceType == '41' ||
        that.dataForm.deviceType == '42'
      ) {
        that.$set(that.dataForm, 'iotKeys', [])
        var arr = that.dataForm.iotKey.split('|')
        arr.forEach((item) => {
          var arr1 = item.split(':')
          var name = window.config.pumpMap[arr1[0]]
          var arr2 = arr1[1].split(',')
          arr2.forEach((item2, i) => {
            var json = {}
            if (arr1[0] == 'ps' || arr1[0] == 'hs') {
              json.show = false
            } else {
              json.show = true
            }
            json.name = name + (i + 1)
            json.id = arr1[0] + ':' + item2
            that.iotKeyList.push(json)
          })
        })
      }
      if (that.dataForm.deviceType == '13') {
        // 获取 lane 对应的显示文本
        const laneText = filedFomatter(that.dataForm.lane, that.laneList)
        const directionText = filedFomatter(that.dataForm.direction, that.directionList)
        const deviceTypeText = filedFomatter(that.dataForm.deviceType, that.deviceTypeList)
        const areaText = filedFomatter(that.dataForm.area, that.areaList)
        console.log(laneText, directionText, deviceTypeText, that.textInfoList, 'sssssssssssssssssssssssss')
        // 如果 laneText 是 "车道一" 并且 directionText 是 "上行"，则在 taskList 尾部添加一个选项
        if (areaText === '五一隧道') {
          if (laneText === "车道一" && deviceTypeText === "车道指示灯" && that.dataForm.deviceName != 'YLS1' && (directionText === "上行" || directionText === "下行")) {
            that.taskList = [
              { id: '0', name: '正向通行' },
              { id: '1', name: '反向通行' },
              {
                id: '2',
                name: '封道',
              }, { id: '3', name: '正向左转' }
              // ,{id: '4', name: '反向左转'},
              // { id: '3', name: '左转' },
            ]
          } else {
            that.taskList = [
              { id: '0', name: '正向通行' },
              { id: '1', name: '反向通行' },
              {
                id: '2',
                name: '封道',
              } /*{id: '3', name: '正向转向'},{id: '4', name: '反向转向'}*/,
            ]
          }
        } else if (areaText === '西山隧道') {
          if (laneText === "车道一" && deviceTypeText === "车道指示灯" && (directionText === "上行" || directionText === "下行")) {
            that.taskList = [
              { id: '0', name: '正向通行' },
              { id: '1', name: '反向通行' },
              {
                id: '2',
                name: '封道',
              },
              //  {id: '3', name: '正向左转'},{id: '4', name: '反向左转'},
              { id: '3', name: '左转' },
            ]
          } else {
            that.taskList = [
              { id: '0', name: '正向通行' },
              { id: '1', name: '反向通行' },
              {
                id: '2',
                name: '封道',
              } /*{id: '3', name: '正向转向'},{id: '4', name: '反向转向'}*/,
            ]
          }
        }
        console.log('//////////////')
        // 获取设备状态
        getIotDeviceStatus({
          deviceId: that.dataForm.deviceId,
          deviceType: that.dataForm.deviceType
        })
          .then(res => {
            const { code, data } = res?.data || {};
            if (code === 200) {
              // that.dataForm.command = data?.status || '';
              let command = data?.status || '';
              that.$set(that.dataForm, 'command', command)
            }
            // this.$forceUpdate();
            console.log(that.dataForm.command)
          })
          .catch(error => {
            console.error('Error fetching device status:', error);
          });
      } else if (that.dataForm.deviceType == '26' || that.dataForm.deviceType == '27' || that.dataForm.deviceType == '28') {
        //风速风向和covi展示的
        getIotDeviceStatus({
          deviceId: that.dataForm.deviceId,
          deviceType: that.dataForm.deviceType
        })
          .then(res => {
            const { code, data } = res?.data || {};
            if (code === 200) {
              console.log(data, that.dataForm, 'ddddddddddddd')
              if (data.statusJson) {
                const json = JSON.parse(data.statusJson);
                if (json.covi && that.dataForm.deviceType == '27') { // covi
                  that.$set(that.dataForm, 'vi27', json.covi.vi)
                  that.$set(that.dataForm, 'co27', json.covi.co)
                } else if (json.covi && that.dataForm.deviceType == '26') { // 风速风向
                  that.$set(that.dataForm, 'speed26', json.covi.fs)
                  that.$set(that.dataForm, 'direction26', json.covi.fx)
                } else if (json.covi && that.dataForm.deviceType == '28') { // 光强
                  that.$set(that.dataForm, 'light28', json.covi.BD)
                  //   that.$set(that.dataForm, 'direction26', json.covi.BD)
                }
              }
            }
          })
          .catch(error => {
            console.error('Error fetching device status:', error);
          });
      } else if (that.dataForm.deviceType == '14' || that.dataForm.deviceType == '19') { // 获取回显状态
        // 获取设备状态
        getIotDeviceStatus({
          deviceId: that.dataForm.deviceId,
          deviceType: that.dataForm.deviceType
        })
          .then(res => {
            const { code, data } = res?.data || {};
            if (code === 200) {
              let command = data?.status || '';
              that.$set(that.dataForm, 'command', command)
            }
            // this.$forceUpdate();
            console.log(that.dataForm.command)
          })
          .catch(error => {
            console.error('Error fetching device status:', error);
          });
      } else if (that.dataForm.deviceType == '11') {  //风机
        // 获取设备状态
        getIotDeviceStatus({
          deviceId: that.dataForm.deviceId,
          deviceType: that.dataForm.deviceType
        })
          .then(res => {
            const { code, data } = res?.data || {};
            if (code === 200) {
              let command = data?.status || '';
              that.$set(that.dataForm, 'command', command)
            }
            // this.$forceUpdate();
            console.log(that.dataForm.command)
          })
          .catch(error => {
            console.error('Error fetching device status:', error);
          });
      } else if (that.dataForm.deviceType == '47') { // 电伴热
        that.$set(that.dataForm, 'iotKeys', [])
        console.log("电伴热", that.dataForm)
        // 获取电伴热设备状态
        let dev_id = that.dataForm.iotKey.split(':')[1]
        let res = await getDbrIotDeviceList(dev_id)
        console.log("电伴热2", res)
        if (res?.status == 200) {
          console.log("电伴热3", res.data)
          this.iotDBRInfo = res.data
        }

      }
      if (i) {
        that.deviceDialogVisible = true
      } else {
        that.deviceControlShow = true
      }
    },
    /*initTimer(){
      var that = this
      that.statusTimer = setInterval(_ => {
        that.deviceStatus()
      }, 2000)
    },*/
    deviceClose() {
      var that = this
      console.log('clear')
      if (that.statusTimer) {
        clearTimeout(that.statusTimer)
        that.statusTimer = null
      }
      that.deviceControlShow = false
      that.deviceDialogVisible = false
      that.deviceDialogVisible2 = false

      that.dataForm.deviceId = that.deviceDataId.toString()
      that.deviceStatusBatch()
    },
    deviceStatus() {
      var that = this
      deviceStatus({
        deviceId: that.dataForm.deviceId,
        deviceType: that.dataForm.deviceType,
      }).then((res) => {
        if (res.status == 200) {
          if (res.data.retCode == 0) {
            that.$set(that.dataForm, 'status', res.data.result.status)

            if (res.data.result.task) {
              that.$set(that.dataForm, 'task', res.data.result.task)
              var j = JSON.parse(that.dataForm.task)

              that.$set(that.dataForm, 'taskName', j.command)

              if (j.command != -1) {
                let imgForm =
                  window.config.drapLeftElMap[that.dataForm.deviceType]
                if (that.dataForm.deviceType == '11') {
                  that.componentsList.forEach((item) => {
                    if (item.deviceId == that.dataForm.deviceId) {
                      item.imgUrl = imgForm['url' + j.command]
                    }
                  })
                } else if (that.dataForm.deviceType == '13') {
                  that.componentsList.forEach((item) => {
                    if (item.deviceId == that.dataForm.deviceId) {
                      item.imgUrl =
                        imgForm['url' + item.direction + '' + item.direction][
                        j.command
                        ]
                    }
                  })
                } else if (that.dataForm.deviceType == '14') {
                  that.componentsList.forEach((item) => {
                    if (item.deviceId == that.dataForm.deviceId) {
                      item.imgUrl = imgForm['urls'][j.command]
                    }
                  })
                } else if (
                  that.dataForm.deviceType == '40' ||
                  that.dataForm.deviceType == '41' ||
                  that.dataForm.deviceType == '42'
                ) {
                  that.iotKeyData = []
                  const str1 = that.dataForm.iotKey.split('|')
                  const str2 = that.dataForm.taskName.split('|')
                  str1.forEach((item, i) => {
                    const [name, values] = item.split(':')
                    const name1 = window.config.pumpMap[name]
                    const [name2, values2] = str2[i].split(':')
                    var arr = values.split(',')
                    var arr2 = values2.split(',')

                    var arr3 = []

                    arr.forEach((item2, i2) => {
                      if (name == 'ps' || name == 'hs') {
                        arr3.push({
                          id: `${name}:${item2}`,
                          name: i2 + 1 + '#：' + arr2[i2],
                        })
                      } else {
                        arr3.push({
                          id: `${name}:${item2}`,
                          name:
                            i2 +
                            1 +
                            '#：' +
                            that.filedFomatter(arr2[i2], that.taskList),
                        })
                      }
                    })
                    that.iotKeyData.push({
                      name: name1,
                      data: arr3,
                    })
                  })
                }
              }

              //that.$set(that.dataForm,'command',j.command)
              if (j.body) {
                j.dataFormBody = JSON.parse(j.body)
              }

              if (that.dataForm.deviceType == '15') {
                // that.loadinfoBoardTemplate(1,j.dataFormBody.textInfoList);
              } else if (that.dataForm.deviceType == '26') {
                that.dataForm.speed26 = j.speed
                that.dataForm.direction26 = j.direction == '0' ? '正向' : '反向'
              } else if (that.dataForm.deviceType == '27') {
                that.dataForm.co27 = j.co
                that.dataForm.vi27 = j.vi
              } else if (that.dataForm.deviceType == '28') {
                that.dataForm.light28 = j.light
              } else if (that.dataForm.deviceType == '43') {
                that.dataForm.height43 = j.height
              }
            }
            if (that.statusTimer) {
              clearTimeout(that.statusTimer)
              that.statusTimer = null
            }
            if (that.deviceDialogVisible || that.deviceControlShow) {
              console.log('deviceStatus2')
              that.statusTimer = setTimeout(() => {
                that.deviceStatus()
              }, 2000)
            }
          } else {
            that.$message.warning(res.data.message)
          }
        }
      })
    },
    deviceStatusBatch(index) {
      var that = this
      deviceStatusBatch({
        deviceId: that.dataForm.deviceId,
        deviceType: that.dataForm.deviceType,
      }).then((res) => {
        if (res.status == 200) {
          if (res.data.retCode == 0) {
            res.data.result.forEach((item) => {
              that.deviceData2.forEach((item1) => {
                if (item.deviceId == item1.deviceId) {
                  item1.task = item.task
                }
              })

              if (item.task) {
                that.$set(that.dataForm, 'task', item.task)
                var j = JSON.parse(item.task)

                if (index == 2) {
                  that.planDeviceType.forEach((p1) => {
                    that.planDetailMap[p1].forEach((p2) => {
                      if (p2.id == item.deviceId) {
                        p2.ret = j.command
                      }
                    })
                  })
                  that.planDetailMap = JSON.parse(
                    JSON.stringify(that.planDetailMap)
                  )
                } else if (index == 1) {
                  that.planDetailData.forEach((p1) => {
                    if (p1.type == item.deviceType) {
                      p1.data.forEach((p2) => {
                        if (p2.id == item.deviceId) {
                          p2.ret = j.command
                        }
                      })
                    }
                  })
                  that.planDetailData = JSON.parse(
                    JSON.stringify(that.planDetailData)
                  )
                }
                //that.$set(that.dataForm,'taskName',j.command)

                if (j.command != -1) {
                  let imgForm = window.config.drapLeftElMap[item.deviceType]
                  if (item.deviceType == '11') {
                    that.componentsList.forEach((item2) => {
                      if (item2.deviceId == item.deviceId) {
                        item2.imgUrl = imgForm['url' + j.command]
                      }
                    })
                  } else if (item.deviceType == '13') {
                    that.componentsList.forEach((item2) => {
                      if (item2.deviceId == item.deviceId) {
                        item2.imgUrl =
                          imgForm[
                          'url' + item2.direction + '' + item2.direction
                          ][j.command]
                      }
                    })
                  } else if (item.deviceType == '14') {
                    that.componentsList.forEach((item2) => {
                      if (item2.deviceId == item.deviceId) {
                        item2.imgUrl = imgForm['urls'][j.command]
                      }
                    })
                  }
                }

                //that.$set(that.dataForm,'command',j.command)
                if (j.body) {
                  j.dataFormBody = JSON.parse(j.body)
                }
              }
            })

            if (that.statusTimer) {
              clearTimeout(that.statusTimer)
              that.statusTimer = null
            }
            if (
              that.deviceDialogVisible2 ||
              that.planDetailShow ||
              that.warnDetailShow
            ) {
              console.log('deviceStatusBatch2')
              that.statusTimer = setTimeout(() => {
                that.deviceStatusBatch(index)
              }, 2000)
            } else {
              console.log('deviceStatusBatch15')
              that.statusTimer = setTimeout(() => {
                that.deviceStatusBatch()
              }, 15000)
            }
          } else {
            //that.$message.warning(res.data.message);
          }
        }
      })
    },
    loadinfoBoardTemplate(index, list, modelId) {
      console.log("index", index)
      var that = this
      getProgramTree({ name: this.filterText }).then((res) => {
        console.log("this.treeData", res.data.data)
        console.log("res.code", res.data.code)
        if (res.data.code == 200) {
          console.log("this.treeData", res.data.data)
          res.data.data.forEach((item) => {
            // this.count += item.children.length;
            if (item.children) {
              item.children.forEach((child) => {
                if (child.dynamicValueNum > 0) {
                  console.log("大于0");
                  for (let i = 0; i < child.dynamicValueNum; i++) {
                    child["contentValue" + (i + 1)] =
                      child.dynamicValueList.length > 0
                        ? child.dynamicValueList[i]
                        : "";
                  }
                }
              });
            }
          });

          //   this.treeData = res.data;
          this.treeData = res.data.data;
          //   this.infoBoardTemplateList = res.data.data
          console.log("this.treeData", this.treeData)
          this.infoBoardTemplateList = []
          const newArray = res.data.data.flatMap(item => item.children);
          console.log("newArray", newArray)
          this.infoBoardTemplateList = newArray
          //  res.data.data.forEach((item, i) => {
          //  
          //     var form = {
          //       ...item,
          //       templateHtml: that.domRender(item.textInfo),
          //     }
          //     that.infoBoardTemplateList.push(form)
          //   })

        }
      });
      infoBoardTemplateList().then((res) => {
        if (res.status == 200) {
          if (res.data.retCode == 0) {
            if (index == 1) {
              that.templateHtmlList = []
              console.log("res.data.result111111111111", res.data.result)
              res.data.result.forEach((item, i) => {
                list.forEach((item1) => {
                  if (item.id == item1.id) {
                    var str = that.domRender(
                      item.textInfo,
                      item1.fillInfo,
                      item.id,
                      1
                    )
                    var html = ''
                    var backColor = ''
                    var fontColor = ''
                    var fontFormat = ''
                    var fontFormatUpDown = ''
                    let fontSize = item.fontSize.split('*')[0]
                    switch (item.backColor) {
                      case '红色':
                        backColor = 'red'
                        break
                      case '黄色':
                        backColor = 'yellow'
                        break
                      case '绿色':
                        backColor = 'green'
                        break
                      case '黑色':
                        backColor = 'black'
                        break
                    }
                    switch (item.fontColor) {
                      case '红色':
                        fontColor = 'red'
                        break
                      case '黄色':
                        fontColor = 'yellow'
                        break
                      case '绿色':
                        fontColor = 'green'
                        break
                      case '黑色':
                        fontColor = 'black'
                        break
                    }
                    switch (item.fontFormat) {
                      case '居中':
                        fontFormat = 'center'
                        break
                      case '居左':
                        fontFormat = 'left'
                        break
                      case '居右':
                        fontFormat = 'right'
                        break
                    }
                    switch (item.fontFormatUpDown) {
                      case '居中':
                        fontFormatUpDown = 'center'
                        break
                      case '居左':
                        fontFormatUpDown = 'left'
                        break
                      case '居右':
                        fontFormatUpDown = 'right'
                        break
                    }
                    html += `<div style="background-color: ${backColor};color: ${fontColor};width: ${item.cmsWidth
                      }px;height: ${item.cmsHeight
                      }px;display: flex;justify-content: ${fontFormat};align-items: ${fontFormatUpDown};font-size: ${Number(
                        fontSize
                      )}px;font-family: ${item.fontName}">${str}</div>`
                    that.templateHtmlList.push({
                      html: html,
                      intervaly: item.intervaly,
                    })
                  }
                })
              })
              if (that.templateHtmlList.length > 0) {
                if (that.tempTimer) {
                  clearTimeout(that.tempTimer)
                  that.tempTimer = null
                }
                that.templateDisplay(0) // 递归调用显示函数
              }
            } else if (index == 2) {
              //   that.infoBoardTemplateList = res.data.result
            } else if (index == 3) {
              that.templateHtmlList = []
              res.data.result.forEach((item, i) => {
                list.forEach((item1) => {
                  if (item.id == item1.id) {
                    var str = that.domRender(
                      item.textInfo,
                      item1.fillInfo,
                      item.id,
                      1
                    )
                    var fontColor = ''
                    let fontSize = Number(item.fontSize.split('*')[0])
                    switch (item.fontColor) {
                      case '红色':
                        fontColor = 'ff0000'
                        break
                      case '黄色':
                        fontColor = 'ffff00'
                        break
                      case '绿色':
                        fontColor = '008000'
                        break
                      case '黑色':
                        fontColor = '000000'
                        break
                    }

                    that.templateHtmlList.push({
                      VMSId: [modelId],
                      infoType: 'text',
                      imageUrl: '',
                      text: str,
                      textColor: fontColor,
                      textSize: fontSize,
                      rollingDirection: 'horizontal',
                      rollingSpeed: 20,
                      intervaly: item.intervaly,
                    })
                  }
                })
              })
              if (that.templateHtmlList.length > 0) {
                if (that.tempTimer) {
                  clearTimeout(that.tempTimer)
                  that.tempTimer = null
                }
                that.templateDisplay(0, 3) // 递归调用显示函数
              }
            } else {
              //   that.infoBoardTemplateList = []
              //   res.data.result.forEach((item, i) => {
              //     var form = {
              //       ...item,
              //       templateHtml: that.domRender(item.textInfo),
              //     }
              //     that.infoBoardTemplateList.push(form)
              //   })
            }
          } else {
            that.$message.warning(res.data.message)
          }
        }
      })
    },
    templateDisplay(index, m) {
      var that = this
      if (m == 3) {
        that.updateVMSInfo(that.templateHtmlList[index])
      } else {
        that.templateInfoHtml = that.templateHtmlList[index].html // 显示当前索引的名称
      }
      let nextIndex = (index + 1) % that.templateHtmlList.length // 计算下一个索引
      let nextTime = parseInt(that.templateHtmlList[nextIndex].intervaly) * 1000 // 下一个元素的显示时间
      that.tempTimer = setTimeout(() => {
        that.templateDisplay(nextIndex, m) // 递归调用显示函数
      }, nextTime)
    },
    handleAddToTable(node, data) {
      console.log("添加至表格", node, data);
      //   let exists = this.tableData.find(
      //     (obj) => obj.programId === node.data.programId
      //   );
      //   if (exists) return this.$message("该项已添加，请勿重复添加！");
      //   this.tableData.push(data);
      //   console.log("添加至表格", this.tableData);
    },
    filterNode(value, data) {
      console.log(value, data);
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    getColor(value) {
      if (value == "#7b5ba1") {
        return '红'
      } else if (value == "#008000") {
        return '绿'
      } else if (value == "#FFFF00") {
        return '黄'
      }
    },
    addComment(event, row) {
      this.tempMap[row.id] = {
        ...this.tempMap[row.id],
        [event.target.attributes.idData.value]: event.target.value,
      }
      console.log(this.tempMap, 'this.tempMap')
    },
    handleCommitClick(index) {
      var that = this
      var url = ''
      that.deviceLoading = true
      /*if(that.statusTimer){
        clearTimeout(that.statusTimer)
        that.statusTimer = null
      }*/
      console.log(that.dataForm.command, 'cccccccccccccc')
      var json = {
        //deviceId: that.dataForm.deviceId,
        deviceType: that.dataForm.deviceType,
        command: that.dataForm.command,
      }
      console.log(json, index, 'wwwwww')
      if (index) {
        console.log('111')
        //批量控制
        if (that.multipleSelection.length > 0) {
          var deviceIds = []
          that.multipleSelection.forEach((item) => {
            deviceIds.push(item.deviceId)
          })
          json.deviceId = deviceIds.toString()
        } else {
          that.$message.info('请选择')
          return ''
        }
        //that.dataForm.deviceId = json.deviceId
        url = '/json/iot/iotControlBatch'
      } else {
        console.log('222')
        json.deviceId = that.dataForm.deviceId
        url = '/xjIotApi/iotServiceCommon/ServiceApiCommon'
      }
      console.log('333', url, that.dataForm.deviceType)
      if (that.dataForm.deviceType == '12') {
        json.body = JSON.stringify(that.dataFormBody)
      } else if (that.dataForm.deviceType == '15') {
        json.command = '15_01'
        var ids = Object.keys(this.tempMap)
        var arr = []
        that.textInfoList.forEach((item1) => {
          var a = {
            id: item1,
            fillInfo: '',
          }
          ids.forEach((item) => {
            if (item == item1) {
              var fillInfos = Object.values(this.tempMap[item])
              a.fillInfo = fillInfos.join(';')
            }
          })
          arr.push(a)
        })
        json.body = JSON.stringify({ textInfoList: arr })
      } else if (
        that.dataForm.deviceType == '40' ||
        that.dataForm.deviceType == '41' ||
        that.dataForm.deviceType == '42'
      ) {
        const convertedArray = that.dataForm.iotKeys.reduce((acc, curr) => {
          const [key, value] = curr.split(':')
          const existing = acc.find((item) => item.startsWith(key))

          if (existing) {
            const index = acc.indexOf(existing)
            acc[index] = `${existing},${value}`
          } else {
            acc.push(`${key}:${value}`)
          }

          return acc
        }, [])
        json.iotKey = convertedArray.join('|')
      }
      console.log(json, url, 'urlurl')
      if (that.dataForm.deviceType == '13' || that.dataForm.deviceType == '14' || that.dataForm.deviceType == '15' || that.dataForm.deviceType == '19' || that.dataForm.deviceType == '11') {  //单独走的控制接口
        if (index) { //批量控制
          console.log(json, that.multipleSelection, '批量')
          let data = []
          if (that.multipleSelection.length > 0) {
            that.multipleSelection.forEach((item) => {
              let operationInstruction = ""
              if (that.dataForm.deviceType == '13') {
                // operationInstruction = json.command==0 ? '正向通行' : json.command==1 ? '反向通行' : json.command==2 ? '封道' : json.command==3 ? '正向左转' : json.command==4 ? '反向左转': ''
                operationInstruction = json.command == 0 ? '正向通行' : json.command == 1 ? '反向通行' : json.command == 2 ? '封道' : json.command == 3 ? '正向左转' : ''
              } else if (that.dataForm.deviceType == '14') {
                operationInstruction = json.command == 1 ? '变红' : json.command == 2 ? '变黄' : json.command == 3 ? '变绿' : ''
              } else if (that.dataForm.deviceType == '11') {
                operationInstruction = json.command == 0 ? '停止' : json.command == 1 ? '正转' : json.command == 2 ? '反转' : ''
              } else if (that.dataForm.deviceType == '19') { // 卷帘门
                operationInstruction = json.command == 0 ? '停止' : json.command == 1 ? '开' : json.command == 2 ? '关' : ''
              }
              data.push({
                deviceId: item.deviceId,
                writeOrRead: 'W',
                operationInstructions: operationInstruction
              })
            })
            // json.deviceId
            console.log(deviceIds)
          } else {
            that.$message.info('请选择')
            return ''
          }
          newIotControlS(data, '/xjIotApi/iotServiceCommon/ServiceApiCommonList').then((res) => {
            that.deviceLoading = false
            if (res.data.code == 200) {
              that.$message.success('成功')
              that.componentsList.forEach((item) => {
                if (item.deviceId == that.dataForm.deviceId) {
                  item.imgUrl =
                    imgForm['url' + item.direction + '' + item.direction][
                    j.command
                    ]
                }
              })
            } else {
              that.$message.error(res.data.msg)
            }
          })
        } else { //单个控制
          if (that.dataForm.deviceType == '13' || that.dataForm.deviceType == '14' || that.dataForm.deviceType == '11' || that.dataForm.deviceType == '19') {
            let operationInstruction = ''
            if (that.dataForm.deviceType == '13') {
              //   operationInstruction = json.command==0 ? '正向通行' : json.command==1 ? '反向通行' : json.command==2 ? '封道' : json.command==3 ? '正向左转' :json.command==4 ? '反向左转' : ''
              operationInstruction = json.command == 0 ? '正向通行' : json.command == 1 ? '反向通行' : json.command == 2 ? '封道' : json.command == 3 ? '正向左转' : ''
            } else if (that.dataForm.deviceType == '14') {
              operationInstruction = json.command == 1 ? '变红' : json.command == 2 ? '变黄' : json.command == 3 ? '变绿' : ''
            } else if (that.dataForm.deviceType == '11') { // 风机
              operationInstruction = json.command == 0 ? '停止' : json.command == 1 ? '正转' : json.command == 2 ? '反转' : ''
            } else if (that.dataForm.deviceType == '19') { // 卷帘门
              operationInstruction = json.command == 0 ? '停止' : json.command == 1 ? '开' : json.command == 2 ? '关' : ''
            }
            let data = {
              deviceId: json.deviceId,
              writeOrRead: 'W',
              operationInstructions: operationInstruction
            }
            console.log('走这里了  11 风机', data)
            newIotControl(data, '/xjIotApi/iotServiceCommon/ServiceApiCommon').then((res) => {
              console.log(res)
              that.deviceLoading = false
              if (res.data.code == 200) {
                that.$message.success('成功')
                that.componentsList.forEach((item) => {
                  if (item.deviceId == that.dataForm.deviceId) {
                    item.imgUrl =
                      imgForm['url' + item.direction + '' + item.direction][
                      j.command
                      ]
                  }
                })
              } else {
                that.$message.error(res.data.msg)
              }
            })
          } else if (that.dataForm.deviceType == '15') {
            console.log(that.textInfoList, that.infoBoardTemplateList, that.dataForm, that.dataForm.extraJson, 'xxxxxxxxxxxxxxxxxxxxxx')
            let checkArr = [] //选中的情报板
            if (that.textInfoList.length > 0) {
              that.textInfoList.forEach((item1) => {
                that.infoBoardTemplateList.forEach((item) => {
                  if (item1 == item.programId) {
                    checkArr.push(item)
                  }
                })
              })
            }
            console.log(checkArr, '555555555555')
            // let arr = [
            //     { id: 1, textInfo: '隧道火灾，禁止驶入' },
            //     { id: 2, textInfo: '隧道限速{}Km/h' },
            //     { id: 3, textInfo: '隧道火灾，禁止驶入2' },
            //     { id: 4, textInfo: '隧道火灾，禁止驶入3' },
            //     { id: 5, textInfo: '隧道限速{}Km/h,最高速{}Km/h,最低速{}Km/h' },
            // ];
            let temp = this.tempMap

            // 遍历 checkArr 数组
            checkArr.forEach(item => {
              let text = item.content;

              // 如果 temp 中存在该 id 的数据
              if (temp[item.programId]) {
                let replacements = temp[item.programId];
                let matchCount = 0;

                // 替换每个 {} 占位符
                text = text.replace(/{}/g, () => {
                  // 获取当前替换的值（按照顺序）
                  let replacementKey = `temp${matchCount}`;
                  matchCount++;

                  // 如果该替换值存在，进行替换
                  if (replacements[replacementKey]) {
                    return replacements[replacementKey];
                  }

                  return '{}'; // 如果没有找到对应的值，保持原样
                });
              }

              // 更新 checkArr 中的 textInfo
              item.content = text;
            });

            let company = ''
            if (that.dataForm.extraJson) {
              let extr = JSON.parse(that.dataForm.extraJson);
              company = extr.belongs_company
            }
            let data = {
              iotDeviceList: [
                { deviceId: json.deviceId, manufacturer: company }
              ],
              playProgramlist: []
            }
            if (checkArr) {
              checkArr.forEach((val) => {
                let Size = (val.cmsWidth == 384 && val.cmsHeight == 288) ? '1' : (val.cmsWidth == 128 && val.cmsHeight == 80) ? '2' : (val.cmsWidth == 576 && val.cmsHeight == 48) ? '3' : (val.cmsWidth == 624 && val.cmsHeight == 48) ? '4' : (val.cmsWidth == 128 && val.cmsHeight == 64) ? '5' : ''
                data.playProgramlist.push(
                  {
                    programId: val.programId,
                    name: val.name,
                    programType: val.programType,
                    type: val.type,
                    displaySize: val.displaySize,
                    displayMode: val.displayMode,
                    displaySpeed: val.displaySpeed,
                    fontFamily: val.fontFamily,
                    // fontSize: this.convertFontSize(val.fontSize),
                    // fontColor: this.getHexColor(val.fontColor),
                    fontSize: val.fontSize,
                    fontColor: val.fontColor,
                    alignment: val.alignment,
                    content: val.content
                  }
                )
                console.log("data.playProgramlist", data.playProgramlist)
              })
            }
            playManuallyTriggered(data, '/xjIotApi/iotServiceCommon/playManuallyTriggered').then((res) => {
              console.log(res, 'rrrr')
              that.deviceLoading = false
            })
          }
        }
        // that.deviceLoading = false
      }
      else {
        iotControl(json, url).then((res) => {
          that.deviceLoading = false
          if (res.status == 200) {
            if (res.data.retCode == 0) {
              that.$message.success('成功')
              if (!res.data.result) {
                return
              }
              that.dataForm.status = res.data.result.status
              that.dataForm.task = res.data.result.task
              if (that.dataForm.task) {
                var j = JSON.parse(that.dataForm.task)
                that.$set(that.dataForm, 'taskName', j.command)
                //that.$set(that.dataForm,'command',j.command)

                if (j.command != -1) {
                  let imgForm =
                    window.config.drapLeftElMap[that.dataForm.deviceType]
                  if (that.dataForm.deviceType == '11') {
                    that.componentsList.forEach((item) => {
                      if (item.deviceId == that.dataForm.deviceId) {
                        item.imgUrl = imgForm['url' + j.command]
                      }
                    })
                  } else if (that.dataForm.deviceType == '13') {
                    that.componentsList.forEach((item) => {
                      if (item.deviceId == that.dataForm.deviceId) {
                        item.imgUrl =
                          imgForm['url' + item.direction + '' + item.direction][
                          j.command
                          ]
                      }
                    })
                  } else if (that.dataForm.deviceType == '14') {
                    that.componentsList.forEach((item) => {
                      if (item.deviceId == that.dataForm.deviceId) {
                        item.imgUrl = imgForm['urls'][j.command]
                      }
                    })
                  } else if (
                    that.dataForm.deviceType == '40' ||
                    that.dataForm.deviceType == '41' ||
                    that.dataForm.deviceType == '42'
                  ) {
                    that.iotKeyData = []
                    const str1 = that.dataForm.iotKey.split('|')
                    const str2 = that.dataForm.taskName.split('|')
                    str1.forEach((item, i) => {
                      const [name, values] = item.split(':')
                      const name1 = window.config.pumpMap[name]
                      const [name2, values2] = str2[i].split(':')
                      var arr = values.split(',')
                      var arr2 = values2.split(',')

                      var arr3 = []

                      arr.forEach((item2, i2) => {
                        if (name == 'ps' || name == 'hs') {
                          arr3.push({
                            id: `${name}:${item2}`,
                            name: i2 + 1 + '#：' + arr2[i2],
                          })
                        } else {
                          arr3.push({
                            id: `${name}:${item2}`,
                            name:
                              i2 +
                              1 +
                              '#：' +
                              that.filedFomatter(arr2[i2], that.taskList),
                          })
                        }
                      })
                      that.iotKeyData.push({
                        name: name1,
                        data: arr3,
                      })
                    })
                  }
                }

                if (j.body) {
                  var b = JSON.parse(j.body)
                  if (that.dataForm.deviceType == '12') {
                    that.$set(that.dataForm, 'light', b.light)
                  } else if (that.dataForm.deviceType == '15') {
                    console.log("b.textInfoList", b.textInfoList)
                    that.loadinfoBoardTemplate(1, b.textInfoList)
                  }
                }
              }
              //that.loadTable()
              //that.loadDevice2(that.dataForm.deviceType)
            } else {
              that.$message.warning(res.data.message)
            }
          }
        })
      }
    },
    // 转换fontsize字段
    convertFontSize(fontSize) {
      const parts = fontSize.split('*');
      let size = ''
      if (parts.length > 1) {
        size = parts[0];  // 取 * 前面的部分
      } else {
        size = '';  // 如果没有 * 号，返回空
      }
      return size + 'px'
    },
    getHexColor(fontColor) {
      const colorMapping = {
        '红色': '#FF0000',
        '黄色': '#FFFF00',
        '绿色': '#008000'
      };
      // 如果 colorMapping 中存在 fontColor 对应的值，返回其对应的 hex
      let hexColor = '';
      if (colorMapping[fontColor]) {
        hexColor = colorMapping[fontColor];
      } else {
        hexColor = '';  // 如果没有匹配的颜色
      }
      return hexColor
    },
    // 点击画布的时候, 取消选择组件
    laryerMouseDown() {
      var that = this
      that.curControl = null
    },
    distanceFromNine(num) {
      let distance = 0
      while (num !== 10) {
        if (num < 10) {
          num++
        } else {
          num--
        }
        distance++
      }
      return distance
    },
    liuliangLine(data) {
      var that = this
      var myChart1 = echarts.init(document.getElementById('liuliangLineId'))
      var sdata = []
      data.x.forEach((item) => {
        sdata.push(item.substring(6, 8) + '日' + item.substring(8, 10) + '时')
      })
      myChart1.setOption({
        grid: {
          left: '0%',
          right: '0%',
          top: '10%',
          bottom: '0%',
          containLabel: true,
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line',
            lineStyle: {
              color: 'rgba(50, 216, 205, 1)',
            },
          },
        },
        /*legend: {
          icon: 'circle',
          right: '5%',
          itemWidth: 10,
          itemGap: 5,
          textStyle: {
            color: '#fff',
            padding: [3, 0, 0, 0],
          },
        },*/
        xAxis: [
          {
            type: 'category',
            boundaryGap: 1,
            axisLine: {
              show: false,
            },
            axisLabel: {
              color: 'rgba(255,255,255,0.7)',
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },

            data: sdata,
          },
        ],
        yAxis: [
          {
            // max: 1000,
            minInterval: 1,
            splitLine: {
              show: true,
              lineStyle: {
                color: 'rgba(255, 255, 255, 0.2)',
                type: 'dashed',
              },
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              show: true,
              margin: 10,
              textStyle: {
                color: 'rgba(255,255,255,0.7)',
              },
            },
            axisTick: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: '深圳方向',
            type: 'line',
            smooth: true,
            stack: '深圳方向',
            symbolSize: 5,
            showSymbol: false,
            itemStyle: {
              normal: {
                color: '#bc7f39',
                lineStyle: {
                  color: '#bc7f39',
                  width: 2,
                },
              },
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: 'rgba(188,127,57,0.8)',
                    },
                    {
                      offset: 0.5,
                      color: 'rgba(188,127,57,0)',
                    },
                  ],
                  false
                ),
              },
            },
            data: data.y2,
          },
          {
            name: '开平方向',
            type: 'line',
            smooth: true,
            stack: '开平方向',
            symbolSize: 5,
            showSymbol: false,
            itemStyle: {
              normal: {
                color: '#7CD6CA',
                lineStyle: {
                  color: '#7CD6CA',
                  width: 2,
                },
              },
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: 'rgba(124, 214, 202, 0.8)',
                    },
                    {
                      offset: 0.5,
                      color: 'rgba(124, 214, 202,0)',
                    },
                  ],
                  false
                ),
              },
            },
            data: data.y1,
          },
        ],
      })
    },
    getNowTime() {
      let dateTime
      let yy = new Date().getFullYear()
      let mm =
        new Date().getMonth() + 1 < 10
          ? '0' + (new Date().getMonth() + 1)
          : new Date().getMonth() + 1
      let dd =
        new Date().getDate() < 10
          ? '0' + new Date().getDate()
          : new Date().getDate()
      let hh =
        new Date().getHours() < 10
          ? '0' + new Date().getHours()
          : new Date().getHours()
      let mf =
        new Date().getMinutes() < 10
          ? '0' + new Date().getMinutes()
          : new Date().getMinutes()
      let ss =
        new Date().getSeconds() < 10
          ? '0' + new Date().getSeconds()
          : new Date().getSeconds()

      var days = new Date().getDay()
      switch (days) {
        case 1:
          days = '星期一'
          break
        case 2:
          days = '星期二'
          break
        case 3:
          days = '星期三'
          break
        case 4:
          days = '星期四'
          break
        case 5:
          days = '星期五'
          break
        case 6:
          days = '星期六'
          break
        case 0:
          days = '星期日'
          break
      }
      //dateTime = yy + '/' + mm + '/' + dd + ' ' + hh + ':' + mf + ':' + ss + ' ' + days
      dateTime = yy + '-' + mm + '-' + dd + ' ' + hh + ':' + mf
      return dateTime
    },
    filedFomatter(value, list) {
      if (value === '' || value == undefined) return ''
      const item = list.find((item) => item.id == value)
      return item ? item.name : value
    },
    domRender(str, fillInfo, id, index) {
      var that = this
      let strData = str
      //var reg = /\{.*?\}/g
      let charCount = str.split('{}').length - 1
      var arr = []
      if (fillInfo) {
        arr = fillInfo.split(';')
      }
      for (var i = 0; i < charCount; i++) {
        if (arr.length > 0) {
          if (index) {
            strData = strData.replace('{}', arr[i])
          } else {
            strData = strData.replace(
              '{}',
              '<input idData=temp' +
              i +
              ' value="' +
              arr[i] +
              '" class="emptyOut" type="number" />'
            )
          }
          that.tempMap[id] = {
            ...this.tempMap[id],
            ['temp' + i]: arr[i],
          }
        } else {
          strData = strData.replace(
            '{}',
            '<input idData=temp' + i + ' class="emptyOut" type="number" />'
          )
        }
      }
      return strData
    },
  },
  beforeDestroy() {
    var that = this
    if (that.warnTimer) {
      clearInterval(that.warnTimer)
      that.warnTimer = null
    }
  },

}
</script>

<style scoped lang="less">
.input-box {
  .el-col-5 {
    max-width: 20%;
    flex: 0 0 20%;
  }
}

.big-main {}

.metadigiee-video-player {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#VideoPlayer {
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.infowindow {
  position: absolute;
}

.el-tree {
  padding: 10px;
}

::v-deep .el-tree-node__expand-icon {
  //   display: none !important;
  //   display: none !important;
}

.custom-tree-node {
  //  flex: 1;
  // display: flex;
  // align-items: center;
  // justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
  //   line-height: 55px;
  // display: inline-block;
  position: relative;

  .label {
    flex: 1;
    max-width: 200px !important;
    display: inline-block;
    white-space: nowrap;
    /* 防止文本换行 */
    overflow: hidden;
    /* 隐藏溢出的文本 */
    text-overflow: ellipsis;
    /* 显示省略号 */
    // background: saddlebrown;
  }

  .icon {
    height: 100%;
    position: absolute;
    right: 10px;
    z-index: 9999 !important;
  }
}

.custom-tree-node:hover .node-actions {
  display: block;
  position: absolute;
  right: 0px;
  top: 3px;
  z-index: 9999 !important;
}

.node-actions {
  display: none;
}

.header {
  width: 100%;
  height: 65px;
  /*background: url("~@/assets/images/headerBg.png");
  background-size: auto 100%;*/

  .tunnel-item {
    width: 170px;
    height: 42px;
    font-size: 18px;
    display: flex;
    justify-content: center;
    cursor: pointer;
    background: url('~@/assets/images/herder_menuBg.png');
    background-size: 100% 100%;
    line-height: 42px;
  }

  .tunnel-item-active {
    text-align: center;
    color: #5dd5c8;
    cursor: pointer;
    background: url('~@/assets/images/herder_menuBg_c.png');
    background-size: 100% 100%;
  }
}

/*.titleSpan{
  letter-spacing: 2px;
  font-size: 26px;
  color: #FFFFFF;
  font-weight: 600;
  background: linear-gradient(0deg, #9AD3FA,  #EFFBFF);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}*/

.main {
  height: 600px;
  margin-top: 20px;
  padding: 0 20px;

  .main-type-item {
    height: 41px;
    text-align: center;
    cursor: pointer;
    float: left;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    padding: 0 20px;
    background: url('~@/assets/images/main_typeBg.png');
    background-size: 100% 100%;
  }

  .main-type-item-active {
    color: #5dd5c8;
    cursor: pointer;
  }

  .main-device-item {
    border: 1px solid #ffffff;
    text-align: center;
    padding: 6px 20px;
    float: left;
  }

  .main-item-p {
    font-size: 16px;
    margin: 10px 0;
  }

  .drap-container {
    flex: 1;
    width: 100%;
    height: 100%;
    position: relative;
    float: left;
    text-align: center;

    .drap-container-item {
      -webkit-user-select: none;
      -moz-user-select: none;
      -o-user-select: none;
      user-select: none;
      position: absolute;
      user-select: none;
      cursor: pointer;
      border: 1px solid transparent;

      .drap-item-img {
        display: block;
        width: 100%;
        // height: 80px;
        user-select: none;
      }

      .drap-item-name {
        text-align: center;
      }
    }

    .drap-container-item-active {
      border: 1px solid skyblue;
    }

    .drap-container-img {
      vertical-align: middle;
      /*width: 28px;
      height: 28px;*/
    }

    .drap-container-div {
      background: #09253f;
      border-radius: 10px;
      border: 2px solid #969da2;
      font-size: 12px;
      display: flex;
      text-align: center;
      align-items: center;
      /*color: #cc3232;*/
      color: #ccc032;
      /*color: #25bd2d;*/
    }

    .drap-container-name {
      text-align: center;
    }
  }

  .dot-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50px;
    /* 控制横线高度 */
    border-bottom: 1px solid #a5afc2;
  }

  .dot {
    width: 104px;
    height: 40px;
    font-size: 12px;
    background: url('~@/assets/images/main_typeBg.png');
    background-size: 100% 100%;
    margin: 0 100px;
  }

  .dot-span {
    width: 100%;
    height: 100%;
    display: flex;
    line-height: 23px;
    align-items: center;
    justify-content: center;
  }

  .dot-circle {
    width: 13px;
    height: 13px;
    background: url('~@/assets/images/dotCircle.png');
    background-size: 100% 100%;
    margin: 0 auto;
  }

  .dot:first-child:before {
    margin-left: 0;
  }

  .dot:last-child:before {
    margin-right: 0;
  }

  .dot-container2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50px;
    /* 控制横线高度 */
    border-top: 1px solid #a5afc2;
  }

  .dot-circle2 {
    width: 13px;
    height: 13px;
    background: url('~@/assets/images/dotCircle.png');
    background-size: 100% 100%;
    margin: -13px auto 0;
  }
}

.footer {
  height: calc(100% - 700px);

  .title_div {
    width: calc(100% - 35px);
    height: 40px;
    background: url('~@/assets/images/titleBg.png');
    background-size: 100% 100%;
    line-height: 40px;
    padding-left: 35px;
    font-size: 16px;
    color: #aed6ff;
    font-weight: bold;
    letter-spacing: 1px;
  }

  .footer-item {
    width: 100%;
    height: calc(100% - 60px);
    margin-top: 20px;
  }

  .device-bg {
    width: 100%;
    height: 100%;
    background: url('~@/assets/images/device1.png');
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }

  .device-bg2 {
    background: url('~@/assets/images/device2.png');
    background-size: 100% 100%;
  }

  .device-bg3 {
    background: url('~@/assets/images/device3.png');
    background-size: 100% 100%;
  }
}

.full-screen-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5); // 设置遮罩层的背景颜色和透明度
  z-index: 98; // 设置遮罩层的层级
  pointer-events: auto;
}

.plan-item {
  width: 480px;
  height: 683px;
  position: absolute;
  left: 384px;
  top: 130px;
  z-index: 99;
  background-color: rgba(13, 35, 76, 0.95);
  box-shadow: inset 0px 0px 15px #0fcff1;
  border-radius: 15px;
  pointer-events: auto;
}

.control-item {
  width: 380px;
  height: 683px;
  position: absolute;
  right: 40px;
  top: 130px;
  z-index: 99;
  background-color: rgba(13, 35, 76, 0.95);
  box-shadow: inset 0px 0px 15px #0fcff1;
  border-radius: 15px;
  pointer-events: auto;
}

.item-frame {
  border: 1px solid #487ef7;
  border-radius: 2px;
  position: relative;
}

.item-frame-title {
  margin-top: -12px;
  background-color: rgb(13, 36, 86);
  position: absolute;
  padding: 0 6px;
  margin-left: 10px;
  font-size: 16px;
}

.item-frame-p {
  color: #cccccc;
  margin-bottom: 10px;
}

.warn-item {
  width: 364px;
  height: 683px;
  position: absolute;
  left: 20px;
  top: 130px;
  font-family: SourceHanSansCN;
  background: url('~@/assets/images/warnBg.png');
  background-size: 100% 100%;
  z-index: 99;
  pointer-events: auto;

  .title {
    width: 200px;
    height: 55px;
    margin: -20px auto 0;
    background: url('~@/assets/images/warnTitleBg.png');
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    font-weight: bold;
    color: #ffffff;
  }

  .warnBtu {
    width: 86px;
    height: 28px;
    text-align: center;
    line-height: 25px;
    font-size: 16px;
    font-family: SourceHanSansCN;
    background: url('~@/assets/images/warnBut.png');
    background-size: 100% 100%;
    display: inline-block;
    cursor: pointer;
  }
}

.deviceRun-item {
  width: 544px;
  height: 683px;
  position: absolute;
  left: 25px;
  top: 130px;
  font-family: SourceHanSansCN;
  background: url('~@/assets/images/deviceRunBg.png');
  background-size: 100% 100%;
  z-index: 99;
  pointer-events: auto;

  .title {
    width: 227px;
    height: 58px;
    margin: -20px auto 0;
    background: url('~@/assets/images/deviceRunTitle.png');
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    font-weight: bold;
    color: #ffffff;
  }

  .runColBg {
    width: 100%;
    background-image: url('~@/assets/images/runColBg.png');
    background-size: 100% 40%;
    background-position: bottom;
    background-repeat: no-repeat, repeat;
    padding: 5px 0;
    font-family: SourceHanSansCN;
  }

  .runRowBg {
    width: 100%;
    height: 43px;
    line-height: 45px;
    background-image: url('~@/assets/images/runRowBg.png');
    background-size: 100% 100%;
    text-align: center;
    color: #ffffff;
    cursor: pointer;
    font-size: 14px;
    font-family: SourceHanSansCN;
    margin-bottom: 18px;
  }
}

.device-View {
  height: 100%;
}

.device-View-main {
  height: calc(100% - 120px);
  position: relative;
  margin: 0 auto;
}

/* 波动效果 */
.wave {
  position: relative;
  text-align: center;
}

.wave .circle {
  width: 100%;
  height: 100%;
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  background: #f36710;
}

.wave .circle:first-child {
  animation: circle-opacity 1s infinite;
}

@keyframes circle-opacity {
  from {
    opacity: 1;
    transform: scale(1);
  }

  to {
    opacity: 0;
    transform: scale(1.5);
  }
}

// 选择框样式
/deep/.select-down .el-select {
  margin-left: 30px !important;
}

/deep/.select-down .el-input__inner {
  background: url('~@/assets/images/selectBg.png');
  width: 365px;
  height: 45px;
  border: none;
  color: #1afff7;
  padding-left: 30px;
  font-size: 16px;
}

/deep/.select-down .el-select .el-select-dropdown {
  background: RGBA(28, 51, 91, 0.9);
  border: 1px solid rgba(26, 255, 247, 0.4);
}

/deep/.select-down .el-popper .popper__arrow::after {
  border-bottom-color: rgba(26, 255, 247, 0.4);
}

/deep/.select-down .el-popper .popper__arrow {
  border-bottom-color: #1c335b;
}

/deep/.select-down .el-select-dropdown__item {
  color: #ffffff;
}

/deep/.select-down .el-select-dropdown__item.selected,
/deep/.select-down .el-select .el-input .el-select__caret {
  color: #1afff7;
}

/deep/.select-down .el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
  background-color: #3865a9;
}

/deep/.temlCheckClass .el-checkbox__input {
  vertical-align: top;
  padding-top: 2px;
}

.popper-dropdown {
  min-width: 80px !important;
  padding: 0 !important;
}

.dropdown-item {
  height: 30px;
  line-height: 30px;
  padding-left: 5px;
  cursor: pointer;
}

.dropdown-item-active {
  color: #5dd5c8;
}

.dropdown-item:hover {
  background-color: rgba(26, 167, 255, 0.2);
}

.item-one-block:hover {
  background-color: rgba(47, 174, 255, 0.2);
}

.item-one-block2 {
  background-color: rgba(47, 174, 255, 0.2);
}
</style>
<style>
.emptyOut {
  width: 60px;
  margin: 0 5px;
}

@media (max-height: 1079px) {
  .big-main {
    zoom: 1;
  }

  .device-main {
    zoom: 0.8;
  }
}

@media (min-height: 1080px) {
  .big-main {
    zoom: 1.2;
  }

  .device-main {
    zoom: 0.8;
  }

  #liuliangLineId {
    zoom: 0.8;
  }
}

.el-tree-node__content {
  display: flex;
  align-items: center;
  height: 40px;
  cursor: pointer;
}
</style>
