<template>
  <!-- 三维画布 -->
  <div style="width:100%;height:calc(100vh - 90px);position:relative;top: 0;left: 0;">
    <div id="three_div" ref="draw" class="draw" />
    <div v-if="loadSuccess" class="loadingBox">
      <div class="progress">
        <div class="progress-bar progress-bar-danger progress-bar-striped active" :style="{ width: progress }">
          <div class="progress-value">{{ progress }}</div>
        </div>
      </div>
      <div class="loadingBox1">变电站三维模型加载中... 请稍候！</div>
    </div>
    <div class="three-top">
      <span class="screenHomepage">
        <el-select v-show="isdrop == false && lineDrap != true && isUAVdrop != true" v-model="selType" placeholder="请选择"
          :teleported="false" :popper-append-to-body="false" @change="selTypeChange" class="selType back"
          style="margin-right: 10px;">
          <el-option label="摄像机设置" value="01"></el-option>
          <el-option label="巡视点设置" value="02"></el-option>
          <el-option label="设备/部件设置" value="05"></el-option>
          <el-option label="无人车设置" value="04"></el-option>
          <el-option label="无人车巡视路线设置" value="03"></el-option>
          <el-option label="无人机设置" value="06"></el-option>
          <el-option label="无人机巡视路线设置" value="07"></el-option>
        </el-select>
      </span>
      <!-- 操作按钮 -->
      <span v-show="selType == '01'">
        <el-button class="three-button" :disabled="data.length == 0" @click.stop="show">
          <span style="color:#ffbd00;padding-right:3px;">{{ isCamera ? '隐藏' : '显示' }}</span>
          全部摄像机</el-button>
        <el-button class="three-button" :disabled="data.length == 0" @click.stop="del">删除全部摄像机</el-button>
        <el-button class="three-button" @click.stop="showList">
          <span style="color:#ffbd00;padding-right:3px;">{{ isRightList ? '隐藏' : '显示' }}</span>摄像机列表</el-button>
      </span>
      <span v-show="selType == '02'">
        <el-button class="three-button" :disabled="data.length == 0" @click.stop="show">
          <span style="color:#ffbd00;padding-right:3px;">{{ isDevicePoint ? '隐藏' : '显示' }}</span>
          全部点位</el-button>
        <el-button class="three-button" :disabled="data.length == 0" @click.stop="del">删除全部点位</el-button>
        <el-button class="three-button" @click.stop="showList"><span style="color:#ffbd00;padding-right:3px;">{{
          isRightList ? '隐藏' : '显示' }}</span>点位列表</el-button>
      </span>
      <span v-show="selType == '03'">
        <el-button v-show="lineDrap" class="three-button" @click="closeSet">{{ lineDrap ? '结束设置' : '开始设置' }}</el-button>
        <div v-show="!lineDrap" style="display: inline-block;">
          <el-button class="three-button" @click="addLine">{{ isdrop ? '结束绘制' : '开始绘制' }}</el-button>
          <span v-show="isdrop == false" style="margin-left: 10px;">
            <el-button class="three-button" :disabled="data.length == 0" @click.stop="show">
              <span style="color:#ffbd00;padding-right:3px;">{{ isPatrolLine ? '隐藏' : '显示' }}</span>巡视路线</el-button>
            <el-button class="three-button" :disabled="data.length == 0" @click.stop="del">清空巡视路线</el-button>
          </span>
          <el-button style="margin-left: 10px;" class="three-button" @click.stop="showList">
            <span style="color:#ffbd00;padding-right:3px;">{{ isRightList ? '隐藏' : '显示' }}</span>巡视路线列表</el-button>
        </div>
      </span>
      <span v-show="selType == '04'">
        <el-button class="three-button" :disabled="data.length == 0" @click.stop="show">
          <span style="color:#ffbd00;padding-right:3px;">{{ isUV ? '隐藏' : '显示' }}</span>全部无人车</el-button>
        <el-button class="three-button" :disabled="data.length == 0" @click.stop="del">清空无人车</el-button>
        <el-button class="three-button" @click.stop="showList">
          <span style="color:#ffbd00;padding-right:3px;">{{ isRightList ? '隐藏' : '显示' }}</span>无人车列表</el-button>
      </span>
      <span v-show="selType == '05'">
        <el-button class="three-button" @click.stop="del">清空模型对象关联</el-button>
        <el-button class="three-button" @click.stop="showList"><span style="color:#ffbd00;padding-right:3px;">{{
          isRightList ? '隐藏' : '显示' }}</span>模型对象列表</el-button>
      </span>
      <span v-show="selType == '06'">
        <el-button class="three-button" :disabled="data.length == 0" @click.stop="show">
          <span style="color:#ffbd00;padding-right:3px;">{{ isUAV ? '隐藏' : '显示' }}</span>全部无人机</el-button>
        <el-button class="three-button" :disabled="data.length == 0" @click.stop="del">清空无人机</el-button>
        <el-button class="three-button" @click.stop="showList">
          <span style="color:#ffbd00;padding-right:3px;">{{ isRightList ? '隐藏' : '显示' }}</span>无人机列表</el-button>
      </span>
      <span v-show="selType == '07'">
        <el-button class="three-button" @click="addUAVLine">{{ isUAVdrop ? '结束绘制' : '开始绘制' }}</el-button>
        <span v-show="isUAVdrop == false" style="margin-left: 10px;">
          <el-button class="three-button" :disabled="data.length == 0" @click.stop="show">
            <span style="color:#ffbd00;padding-right:3px;">{{ isUAVLine ? '隐藏' : '显示' }}</span>巡视路线</el-button>
          <el-button class="three-button" :disabled="data.length == 0" @click.stop="del">清空巡视路线</el-button>
        </span>
        <el-button style="margin-left: 10px;" class="three-button" @click.stop="showList">
          <span style="color:#ffbd00;padding-right:3px;">{{ isRightList ? '隐藏' : '显示' }}</span>巡视路线列表</el-button>
      </span>
      <span v-show="isdrop == false && lineDrap != true && isUAVdrop != true">
        <el-button style="margin-left: 10px;" class="three-button" @click.stop="save">保存数据</el-button>
        <el-button style="margin-left: 10px;" @click="reset" class="three-button">恢复初始态</el-button>
      </span>
      <div v-show="isdrop == true" class="context-operate">
        <div :class="isdropLine ? 'context-operate-hov' : ''" @click="initLine">
          <span v-show="isdropLine"><img src="@/assets/3d/zt.png" alt=""></span>
          <span v-show="!isdropLine"><img src="@/assets/3d/sssp.png" alt=""></span>
          <span>{{ isdropLine == false ? '开始' : '结束' }}</span>
        </div>
        <div v-show="!isWithdraw" @click="withdraw">
          <span><img src="@/assets/3d/syb.png" alt=""></span>
          <span>撤回</span>
        </div>
      </div>
      <div v-show="isUAVdrop == true" class="context-operate">
        <div :class="isUAVdropLine ? 'context-operate-hov' : ''" @click="initUAVLine">
          <span v-show="isUAVdropLine"><img src="@/assets/3d/zt.png" alt=""></span>
          <span v-show="!isUAVdropLine"><img src="@/assets/3d/sssp.png" alt=""></span>
          <span>{{ isUAVdropLine == false ? '开始' : '结束' }}</span>
        </div>
      </div>
      <div v-show="lineDrap == true" class="context-operate" @click.stop>
        <div :class="lineDrapStart ? 'context-operate-hov' : ''" @click.stop="lineDrapStartClick">
          <span v-show="lineDrapStart"><img src="@/assets/3d/zt.png" alt=""></span>
          <span v-show="!lineDrapStart"><img src="@/assets/3d/sssp.png" alt=""></span>
          <span>{{ lineDrapStart == false ? '开始' : '结束' }}</span>
        </div>
      </div>
    </div>

    <div v-show="isRightList" class="three-right-list" @click.stop>
      <div class="three-right-list-title">
        <span>
          <span v-show="selType == '01'">摄像机列表</span>
          <span v-show="selType == '02'">点位列表</span>
          <span v-show="selType == '03'">无人车巡视路线列表</span>
          <span v-show="selType == '04'">无人车列表</span>
          <span v-show="selType == '05'">模型对象列表</span>
          <span v-show="selType == '06'">无人机列表</span>
          <span v-show="selType == '07'">无人机巡视路线列表</span>
        </span>
        <img src="@/assets/3d/u523.png" style="cursor: pointer;margin:0" alt="" @click.stop="isRightList = false">
      </div>
      <div class="three-right-list-main">
        <el-input v-if="selType != '04' && selType != '03' && selType != '07'" placeholder="请输入内容" v-model="search"
          @keyup.enter="searchNmae" clearable @input="searchNmae">
          <template #suffix>
            <img src="@/assets/3d/spjk_ss.png" style="cursor:pointer ;">
          </template>
        </el-input>
        <div v-if="selType == '01'" class="three-right-list-main-tab">
          <div :class="isOnLine == '01' ? 'three-right-list-main-tab-hov' : ''" @click.stop="rightTabClik('01')">全部</div>
          <div :class="isOnLine == '02' ? 'three-right-list-main-tab-hov' : ''" @click.stop="rightTabClik('02')">在线</div>
          <div :class="isOnLine == '03' ? 'three-right-list-main-tab-hov' : ''" @click.stop="rightTabClik('03')">离线</div>
        </div>
      </div>
      <ul v-show="selType != '04' && selType != '03' && selType != '07'"
        :style="{ height: selType == '01' ? 'calc(100% - 190px)' : 'calc(100% - 150px)' }">
        <li v-for="(i, index) in searchdata" :class="dataIndex == index ? 'three-right-list-main-li-hov' : ''"
          @click.stop="listClick(i, index), information = false">
          <span v-if="selType == '05'" style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
            {{ i.name }} {{ i.objinfo.componentId == null ? '(主设备)' : '(部件)' }}
          </span>
          <span v-if="selType != '05'" style="display:flex;">
            <span v-if="selType == '01'">
              <span v-if="i.type == 'Camera'">
                <span v-if="i.objinfo != undefined">
                  <img v-show="i.objinfo.online == 1" src="@/assets/3d/zx.png" alt="">
                  <img v-show="i.objinfo.online == 0" src="@/assets/3d/lx.png" alt="">
                  <img v-show="i.objinfo.online == null" src="@/assets/3d/lx.png" alt="">
                </span>
                <span v-if="i.objinfo == undefined">
                  <img src="@/assets/3d/lx.png" alt="">
                </span>
              </span>
              <span v-if="i.type == 'Camera1'">
                <span v-if="i.objinfo != undefined">
                  <img v-show="i.objinfo.online == 1" src="@/assets/3d/zx1.png" alt="">
                  <img v-show="i.objinfo.online == 0" src="@/assets/3d/lx1.png" alt="">
                  <img v-show="i.objinfo.online == null" src="@/assets/3d/lx1.png" alt="">
                </span>
                <span v-if="i.objinfo == undefined">
                  <img src="@/assets/3d/lx1.png" alt="">
                </span>
              </span>
            </span>
            <span
              style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis; display:inline-block;width:135px;">{{
                i.objname }}</span>
          </span>
          <div v-show="selType == '01'" class="three-right-list-main-icon">
            <img src="@/assets/3d/gl.png" title="关联摄像机" alt="关联摄像机" @click.stop="associationClick(i)">
            <img v-show="i.objinfo != undefined" src="@/assets/3d/xq.png" title="摄像机信息" alt="摄像机信息"
              @click.stop="informationClick(i), listClick(i, index)">
            <img v-show="i.objinfo == undefined" @click.stop src="@/assets/3d/xq_dis.png" title="摄像机信息" alt="摄像机信息">
            <img v-if="i.objinfo == undefined || i.objinfo.channelList == undefined || i.objinfo.online == 0"
              src="@/assets/3d/sc_dis.png" title="实时视频" alt="实时视频">
            <img v-if="i.objinfo != undefined && i.objinfo.channelList != undefined && i.objinfo.online == 1"
              src="@/assets/3d/ks.png" title="实时视频-1" alt="实时视频-1" @click.stop="realTimeVideo(i, 0)">
            <img v-if="i.objinfo != undefined && i.objinfo.channelList != undefined && i.objinfo.channelList.length == 2"
              src="@/assets/3d/ks.png" title="实时视频-2" alt="实时视频-2" @click.stop="realTimeVideo(i, 1)">
            <img src="@/assets/newimg/ht_sc.png" title="删除摄像机" alt="删除摄像机" @click.stop="listDel(i)">
            <img v-show="i.type == 'Camera' && !i.start" src="@/assets/3d/ange.png" title="摄像机范围" alt="摄像机范围"
              @click.stop="listange(i)">
            <img v-show="i.type == 'Camera' && i.start" src="@/assets/3d/ange1.png" title="摄像机范围" alt="摄像机范围"
              @click.stop="listange(i)">
          </div>
          <div v-show="selType == '02'" class="three-right-list-main-icon">
            <img src="@/assets/3d/gl.png" title="关联巡视点位" alt="关联巡视点位" @click.stop="associationClick(i)">
            <img v-show="i.objinfo != undefined" src="@/assets/3d/xq.png" title="巡视点位信息" alt="巡视点位信息"
              @click.stop="informationClick(i), listClick(i, index)">
            <img v-show="i.objinfo == undefined" @click.stop src="@/assets/3d/xq_dis.png" title="巡视点位信息" alt="巡视点位信息">
            <img src="@/assets/newimg/ht_sc.png" title="删除巡视点位" alt="删除巡视点位" @click.stop="listDel(i)">
          </div>
          <div v-show="selType == '05'" class="three-right-list-main-icon">
            <img v-show="i.objinfo != undefined" src="@/assets/3d/xq.png" title="设备/部件信息" alt="设备/部件信息"
              @click.stop="informationClick(i), listClick(i, index)">
            <img src="@/assets/3d/qxgl.png" title="取消关联" alt="取消关联" @click.stop="listDel(i)">
          </div>
          <div v-show="selType == '06'" class="three-right-list-main-icon">
            <img src="@/assets/3d/gl.png" title="关联无人机" alt="关联无人机" @click.stop="associationClick(i)">
            <img v-show="i.objinfo != undefined" src="@/assets/3d/xq.png" title="无人机信息" alt="无人机信息"
              @click.stop="informationClick(i), listClick(i, index)">
            <img v-show="i.objinfo == undefined" @click.stop src="@/assets/3d/xq_dis.png" title="无人机信息" alt="无人机信息">
            <img src="@/assets/newimg/ht_sc.png" title="删除无人机" alt="删除无人机" @click.stop="listDel(i)">
          </div>
        </li>
      </ul>
      <el-input v-if="selType == '03' || selType == '04' || selType == '07'" v-model="filterText" placeholder="请输入内容"
        style="width:90.4%;margin-left:15px;">
        <template #suffix>
          <img src="@/assets/3d/spjk_ss.png" style="cursor:pointer ;">
        </template>
      </el-input>
      <el-tree ref="treeRef" v-show="selType == '03' || selType == '04' || selType == '07'" :expand-on-click-node="false"
        default-expand-all node-key="id" :data="searchdata" :props="defaultProps" :filter-node-method="filterNode"
        @node-click="handleNodeClick" style="margin-top:10px;">
        <template #default="{ node, data }">
          <div v-show="selType == '03'" class="w-full">
            <div v-show="node.level == 1" style="display:flex;justify-content:space-between;width:100%">
              <span v-if="data.isRename">{{ data.name }}</span>
              <span v-if="!data.isRename" style="display:inline-block;width:180px;">
                <el-input @click.stop v-model="renameNmae" placeholder="请输入巡视路线名称" clearable @change="Rename(data)" />
              </span>
              <span class="three-right-list-main-icon" style="display:flex;margin-right:10px">
                <img src="@/assets/3d/gl.png" title="关联巡视点" alt="关联巡视点" @click.stop="lineAssociationDrop(data)">
                <img src="@/assets/3d/cmm.png" title="重命名" alt="重命名" @click.stop="renameClick(data)">
                <img src="@/assets/newimg/ht_sc.png" title="删除路线" alt="删除路线" @click.stop="listDel(data)">
              </span>
            </div>
            <div v-show="node.level == 2" style="display:flex;justify-content:space-between;width:100%">
              <span
                style="overflow: hidden;width: 220px;display: inline-block;white-space: nowrap;text-overflow: ellipsis;">{{
                  data.deviceName }}</span>
              <span class="three-right-list-main-icon" style="display:flex;margin-right:10px">
                <img src="@/assets/3d/qxgl.png" title="取消关联" alt="取消关联"
                  @click.stop="disassociationPointClick(data, node)"></span>
            </div>
          </div>
          <div v-show="selType == '07'" class="w-full">
            <div v-show="node.level == 1" style="display:flex;justify-content:space-between;width:100%">
              <span v-if="data.isRename">{{ data.name }}</span>
              <span v-if="!data.isRename" style="display:inline-block;width:180px;">
                <el-input @click.stop v-model="renameNmae" placeholder="请输入巡视路线名称" clearable @change="Rename(data)" />
              </span>
              <span class="three-right-list-main-icon" style="display:flex;margin-right:10px">
                <img v-if="data.task" src="@/assets/3d/u242.png" title="创建任务" alt="创建任务"
                  @click.stop="createTask(data, node)">
                <img v-else src="@/assets/3d/u242_1.png" title="创建任务" alt="创建任务">
                <img src="@/assets/3d/cmm.png" title="重命名" alt="重命名" @click.stop="renameClick(data)">
                <img src="@/assets/newimg/ht_sc.png" title="删除路线" alt="删除路线" @click.stop="listDel(data)">
              </span>
            </div>
            <div v-show="node.level == 2" style="display:flex;justify-content:space-between;width:100%">
              <span
                style="overflow: hidden;width: 220px;display: inline-block;white-space: nowrap;text-overflow: ellipsis;">{{
                  data.deviceName }}</span>
              <span class="three-right-list-main-icon" style="display:flex;margin-right:10px">
                <img src="@/assets/3d/qxgl.png" title="取消关联" alt="取消关联"
                  @click.stop="disassociationPointClick(data, node)">
              </span>
            </div>
          </div>
          <div v-show="selType == '04'" class="w-full">
            <div v-show="node.level == 1" style="display:flex;justify-content:space-between;width:100%">
              <span>{{ data.objname }}</span>
              <span class="three-right-list-main-icon" style="display:flex;margin-right:10px">
                <img src="@/assets/3d/gl.png" title="关联无人车" alt="关联无人车" @click.stop="associationClick(data)">
                <img src="@/assets/3d/u254.png" title="关联线路" alt="关联线路" @click.stop="associationLineTreeClick(data)">
                <img v-show="data.objinfo != undefined" src="@/assets/3d/xq.png" title="无人车信息" alt="无人车信息"
                  @click.stop="informationClick(data), handleNodeClick(data, node)">
                <img v-show="data.objinfo == undefined" @click.stop src="@/assets/3d/xq_dis.png" title="无人车信息"
                  alt="无人车信息">
                <img v-if="data.objinfo == undefined || data.objinfo.channelList == undefined || data.objinfo.online == 0"
                  src="@/assets/3d/sc_dis.png" title="实时视频" alt="实时视频">
                <img v-if="data.objinfo != undefined && data.objinfo.channelList != undefined" src="@/assets/3d/ks.png"
                  title="实时视频-1" alt="实时视频-1" @click.stop="realTimeVideo(data, 0)">
                <img
                  v-if="data.objinfo != undefined && data.objinfo.channelList != undefined && data.objinfo.channelList.length == 2"
                  src="@/assets/3d/ks.png" title="实时视频-2" alt="实时视频-2" @click.stop="realTimeVideo(data, 1)">
                <img src="@/assets/newimg/ht_sc.png" title="删除无人车" alt="删除无人车" @click.stop="listDel(data)"></span>
            </div>
            <div v-show="node.level == 2" style="display:flex;justify-content:space-between;width:100%">
              <span>{{ data.name }}</span>
              <span class="three-right-list-main-icon" style="display:flex;margin-right:10px">
                <img v-if="data.task" src="@/assets/3d/u242.png" title="创建任务" alt="创建任务"
                  @click.stop="createTask(data, node)">
                <img v-else src="@/assets/3d/u242_1.png" title="创建任务" alt="创建任务">
                <img src="@/assets/3d/qxgl.png" title="取消关联" alt="取消关联"
                  @click.stop="disassociationClick(data, node)"></span>
            </div>
          </div>
        </template>
      </el-tree>
    </div>
    <div id="contextimg">
      <img src="@/assets/3d/luminescence.svg" alt="">
    </div>
    <div v-show="isTranslateRotate" id="context-operate" @click.stop>
      <div :class="translateRotate == '01' ? 'context-operate-hov' : ''" @click="initTransFormControls('01')">
        <span v-show="translateRotate == '01'"><img src="@/assets/3d/yd.png" alt=""></span>
        <span v-show="translateRotate != '01'"><img src="@/assets/3d/yd_1.png" alt=""></span>
        <span>移动</span>
      </div>
      <div :class="translateRotate == '02' ? 'context-operate-hov' : ''" @click="initTransFormControls('02')">
        <span v-show="translateRotate == '02'"><img src="@/assets/3d/xz.png" alt=""></span>
        <span v-show="translateRotate != '02'"><img src="@/assets/3d/xz_1.png" alt=""></span>
        <span>旋转</span>
      </div>
      <div :class="translateRotate == '03' ? 'context-operate-hov' : ''" @click="initTransFormControls('03')">
        <span v-show="translateRotate == '03'"><img src="@/assets/3d/sj.png" alt=""></span>
        <span v-show="translateRotate != '03'"><img src="@/assets/3d/sj_1.png" alt=""></span>
        <span>视角调整</span>
      </div>
      <div @click="DeleteTransFormControls">
        <span><img src="@/assets/3d/wc.png" alt=""></span>
        <span>确定</span>
      </div>
    </div>
    <div id="contextmenu">
      <ul v-if="selType == '01'">
        <li :class="isCameraMenu ? 'contextmenu-disabled' : ''" @click.stop="adddrop(1)">添加枪形摄像机</li>
        <li :class="isCameraMenu ? 'contextmenu-disabled' : ''" @click.stop="adddrop(2)">添加球形摄像机</li>
        <li :class="!isCameraMenu ? 'contextmenu-disabled' : ''" @click.stop="deldrop">删除摄像机</li>
        <li :class="!isCameraMenu ? 'contextmenu-disabled' : ''" @click.stop="associatedCamera('01')">关联摄像机</li>
        <li :class="!isInfo ? 'contextmenu-disabled' : ''" @click.stop="CameraInformation">摄像机信息</li>
        <li v-if="!isVideo" class="contextmenu-disabled">实时视频</li>
        <li
          v-if="isVideo && dataSel.userData != undefined && dataSel.userData.objinfo != undefined && dataSel.userData.objinfo.channelList != undefined && dataSel.userData.objinfo.online == 1"
          :class="!isCameraMenu ? 'contextmenu-disabled' : ''" @click.stop="realTimeVideo(1, 0)">实时视频-1</li>
        <li
          v-if="isVideo && dataSel.userData != undefined && dataSel.userData.objinfo != undefined && dataSel.userData.objinfo.channelList != undefined && dataSel.userData.objinfo.channelList.length == 2 && dataSel.userData.objinfo.online == 1"
          :class="!isCameraMenu ? 'contextmenu-disabled' : ''" @click.stop="realTimeVideo(1, 1)">实时视频-2</li>
      </ul>
      <ul v-show="selType == '02'">
        <li :class="isCameraMenu ? 'contextmenu-disabled' : ''" @click.stop="adddrop">添加巡视点位</li>
        <li :class="!isCameraMenu ? 'contextmenu-disabled' : ''" @click.stop="deldrop">删除巡视点位</li>
        <li :class="!isCameraMenu ? 'contextmenu-disabled' : ''" @click.stop="associatedCamera('02')">关联巡视点位</li>
        <li :class="!isInfo ? 'contextmenu-disabled' : ''" @click.stop="CameraInformation">巡视点位信息</li>
      </ul>
      <ul v-show="selType == '04'">
        <li :class="isCameraMenu ? 'contextmenu-disabled' : ''" @click.stop="adddrop">添加无人车</li>
        <li :class="!isCameraMenu ? 'contextmenu-disabled' : ''" @click.stop="deldrop">删除无人车</li>
        <li :class="!isCameraMenu ? 'contextmenu-disabled' : ''" @click.stop="associatedCamera('04')">关联无人车</li>
        <li :class="!isCameraMenu ? 'contextmenu-disabled' : ''" @click.stop="associationLineClick">关联巡视路线</li>
        <li :class="!isInfo ? 'contextmenu-disabled' : ''" @click.stop="CameraInformation">无人车信息</li>
        <li
          v-if="!isVideo || dataSel == undefined || dataSel.userData == undefined || dataSel.userData.objinfo == undefined || dataSel.userData.objinfo.channelList == undefined || dataSel.userData.objinfo.online == 0"
          class="contextmenu-disabled">实时视频</li>
        <li
          v-if="isVideo && dataSel.userData != undefined && dataSel.userData.objinfo != undefined && dataSel.userData.objinfo.channelList != undefined && dataSel.userData.objinfo.online == 1"
          :class="!isCameraMenu ? 'contextmenu-disabled' : ''" @click.stop="realTimeVideo(1, 0)">实时视频-1</li>
        <li
          v-if="isVideo && dataSel.userData != undefined && dataSel.userData.objinfo != undefined && dataSel.userData.objinfo.channelList != undefined && dataSel.userData.objinfo.channelList.length == 2 && dataSel.userData.objinfo.online == 1"
          :class="!isCameraMenu ? 'contextmenu-disabled' : ''" @click.stop="realTimeVideo(1, 1)">实时视频-2</li>
      </ul>
      <ul v-show="selType == '05'">
        <li :class="!isdevice ? 'contextmenu-disabled' : ''" @click.stop="associatedCamera('关联设备')">关联设备</li>
        <li :class="!isdevice ? 'contextmenu-disabled' : ''" @click.stop="associatedCamera('关联部件')">关联部件</li>
        <li :class="isdevice ? 'contextmenu-disabled' : ''" @click.stop="CameraInformation">设备/部件详情</li>
      </ul>
      <ul v-if="selType == '06'">
        <li :class="isCameraMenu ? 'contextmenu-disabled' : ''" @click.stop="adddrop">添加无人机</li>
        <li :class="!isCameraMenu ? 'contextmenu-disabled' : ''" @click.stop="deldrop">删除无人机</li>
        <li :class="!isCameraMenu ? 'contextmenu-disabled' : ''" @click.stop="associatedCamera('06')">关联无人机</li>
        <li :class="!isInfo ? 'contextmenu-disabled' : ''" @click.stop="CameraInformation">摄像机信息</li>
      </ul>
    </div>
    <Eldialog v-if="disassociationDia" title="提示" :zIndex="2000" :width="'400px'"
      @before-close="disassociationDia = false">
      <template v-slot:PopFrameContent>
        <div style="height:100px;padding:0 30px;display:flex;align-items: center;">
          <div class="details-title">确定取消关联巡视路线吗？</div>
        </div>
        <div style="display:flex;justify-content:center;">
          <div class="details-button" @click.stop="disassociationDia = false">取消</div>
          <div class="details-button" @click.stop="disassociationDiaConfirmClick">确定</div>
        </div>
      </template>
    </Eldialog>
    <Eldialog v-if="removePointDia" title="提示" :zIndex="2000" :width="'400px'" @before-close="removePointDia = false">
      <template v-slot:PopFrameContent>
        <div style="height:100px;padding:0 30px;display:flex;align-items: center;">
          <div class="details-title">确定取消关联巡视点吗？</div>
        </div>
        <div style="display:flex;justify-content:center;">
          <div class="details-button" @click.stop="removePointDia = false">取消</div>
          <div class="details-button" @click.stop="removePointDiaConfirmClick">确定</div>
        </div>
      </template>
    </Eldialog>
    <!-- 公共删除弹框 -->
    <Eldialog v-if="Explicit" title="提示" :zIndex="2000" :width="'400px'" @before-close="Explicit = false">
      <template v-slot:PopFrameContent>
        <div style="height:100px;padding:0 30px;display:flex;align-items: center;">
          <div class="details-title">{{ ExplicitTitle }}</div>
        </div>
        <div style="display:flex;justify-content:center;">
          <div class="details-button" @click.stop="Explicit = false">取消</div>
          <div class="details-button" @click.stop="confirmClick">确定</div>
        </div>
      </template>
    </Eldialog>
    <!-- 关联弹框 -->
    <Eldialog v-if="association" :title="associationTitle" :zIndex="2000" :width="'1200px'" :height="'800px'"
      @before-close="association = false">
      <template v-slot:PopFrameContent>
        <div class="mt-[15px]" style="display: flex;align-items: center; justify-content: space-between;">
          <div style="display: flex;align-items: center;" v-if="selType == '01'">
            <el-input class="!w-[170px] mr-2" style="width:177px " v-model="taskName" placeholder="请输入摄像机名称" clearable
              @clear="getData()" @keyup.enter="getData()" />
            <el-select v-model="getinfo.areaId" class="mr-2 selType" placeholder="区域" @change="getData" clearable
              :teleported="false" :popper-append-to-body="false">
              <el-option v-for="item in areaIdType" :key="item.id" :label="item.areaName" :value="item.areaId" />
            </el-select>
            <el-select v-model="getinfo.type" class="mr-2 selType" placeholder="设备类型" @change="getData" clearable
              :teleported="false" :popper-append-to-body="false">
              <el-option v-for="item in PatrolEquipmentType" :key="item.id" :label="item.dictname"
                :value="item.itemcode" />
            </el-select>
            <el-button class="searchButton" @click="getData">搜索</el-button>
            <el-button class="searchButton" @click="resetting">重置</el-button>
          </div>
          <div style="display: flex;align-items: center;"
            v-if="selType == '02' || lineDrapStart == true || isUAVdropLine == true">
            <el-input class="!w-[170px] mr-2" v-model="deviceName" clearable placeholder="请输入点位名称" @clear="getDevice()"
              @keyup.enter="getDevice()" />
            <el-select v-model="deviceInfo.mainDeviceId" class="mr-2 selType" placeholder="主设备" clearable
              @change="getDevice" :teleported="false" :popper-append-to-body="false">
              <el-option v-for="item in deviceMain" :key="item.mainDeviceId" :label="item.mainDeviceName"
                :value="item.mainDeviceId" />
            </el-select>
            <el-select v-model="deviceInfo.componentId" class="mr-2 selType" placeholder="部件" clearable
              @change="getDevice" :teleported="false" :popper-append-to-body="false">
              <el-option v-for="item in deviceComponent" :key="item.componentId" :label="item.componentName"
                :value="item.componentId" />
            </el-select>
            <el-button class="searchButton" @click="getDevice">搜索</el-button>
            <el-button class="searchButton" @click="resettingDevice">重置</el-button>
          </div>
          <div style="display: flex;align-items: center;" v-if="selType == '04'">
            <el-input class="!w-[170px] mr-2" clearable v-model="patrolDeviceName" placeholder="请输入无人车名称"
              @clear="getRobot()" @keyup.enter="getRobot()" />
            <el-button class="searchButton" @click="getRobot">搜索</el-button>
          </div>
          <div style="display: flex;align-items: center;" v-if="selType == '05'">
            <el-input class="!w-[170px] mr-2" v-if="associationTitle == '关联设备'" clearable v-model="mainDeviceName"
              placeholder="请输入名称" @clear="getmainDevicePage()" @keyup.enter="getmainDevicePage()" />
            <el-input class="!w-[170px] mr-2" v-if="associationTitle == '关联部件'" v-model="componentName" clearable
              placeholder="请输入名称" @clear="getComponentPage()" @keyup.enter="getComponentPage()" />
            <el-select v-if="associationTitle == '关联设备'" v-model="pageInfo.areaId" class="mr-2 selType" placeholder="区域"
              :teleported="false" :popper-append-to-body="false" @change="getmainDevicePage()" clearable>
              <el-option v-for="item in areaIdType" :key="item.id" :label="item.areaName" :value="item.areaId" />
            </el-select>
            <el-select v-if="associationTitle == '关联部件'" v-model="pageInfo.areaId" class="mr-2 selType" placeholder="区域"
              :teleported="false" :popper-append-to-body="false" @change="getComponentPage()" clearable>
              <el-option v-for="item in areaIdType" :key="item.id" :label="item.areaName" :value="item.areaId" />
            </el-select>
            <el-select v-if="associationTitle == '关联设备'" v-model="pageInfo.bayId" class="mr-2 selType" placeholder="间隔"
              :teleported="false" :popper-append-to-body="false" clearable @change="getmainDevicePage()">
              <el-option v-for="item in bayIdType" :key="item.bayId" :label="item.bayName" :value="item.bayId" />
            </el-select>
            <el-select v-if="associationTitle == '关联部件'" v-model="pageInfo.bayId" class="mr-2 selType" placeholder="间隔"
              :teleported="false" :popper-append-to-body="false" clearable @change="getComponentPage()">
              <el-option v-for="item in bayIdType" :key="item.bayId" :label="item.bayName" :value="item.bayId" />
            </el-select>
            <el-button v-if="associationTitle == '关联设备'" class="searchButton" @click="getmainDevicePage">搜索</el-button>
            <el-button v-if="associationTitle == '关联部件'" class="searchButton" @click="getComponentPage">搜索</el-button>
          </div>
          <div style="display: flex;align-items: center;" v-if="selType == '06'">
            <el-input class="!w-[170px] mr-2" clearable v-model="patrolDeviceName" placeholder="请输入无人机名称"
              @clear="getUAV()" @keyup.enter="getUAV()" />
            <el-button class="searchButton" @click="getUAV">搜索</el-button>
          </div>
          <el-button class="searchButton" @click="associationConfirm">确定</el-button>
        </div>
        <el-table v-if="selType == '01'" :data="tableData" :row-class-name="tableRowClassName" class="PatrolMonitoring"
          v-loading="loading" highlight-current-row
          style="width: 100%;margin:auto;position: relative;height:570px;overflow: auto;margin:10px 0"
          :header-cell-style="{ background: '#253b51', color: '#b5d7ff', height: '50px' }" @row-click="rowClick">
          <el-table-column type="index" align="center" label="序号" width="60" />
          <el-table-column prop="areaName" label="区域" align="center" width="100" />
          <el-table-column prop="patroldeviceCode" label="设备编码" align="center" width="200" />
          <el-table-column prop="patroldeviceName" label="设备名称" />
          <el-table-column prop="type" label="设备类型" align="center" width="120">
            <template #default="scope">
              <span v-for="i in PatrolEquipmentType" v-show="i.itemcode == scope.row.type">{{ i.dictname }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="manufacturer" label="生产厂家" align="center" />
          <el-table-column prop="place" label="安装位置" />
          <el-table-column label="实时状态" width="80" align="center">
            <template #default="scope">
              <span v-if="scope.row.typeName == '硬盘录像机'">
                ----
              </span>
              <span v-else-if="scope.row.channelList == undefined">
                ----
              </span>
              <span v-if="scope.row.type == 10 && scope.row.useMode == 10">
                <span v-if="scope.row.channelList != undefined && scope.row.channelList.length == 1">
                  <img v-if="scope.row.online == 1" src="@/assets/3d/zx.png" alt="" title="查看通道1"
                    @click="getVideoUrl(scope.row, 0)"
                    style="cursor: pointer;margin:auto;display: inline-block;margin-left:15px;">
                  <img v-else src="@/assets/3d/lx.png" alt="" title="离线通道1"
                    style="margin:auto;display: inline-block;margin-left:15px;">
                </span>

                <span v-if="scope.row.channelList != undefined && scope.row.channelList.length == 2">
                  <img v-if="scope.row.online == 1" src="@/assets/3d/zx.png" alt="" title="查看通道1"
                    @click="getVideoUrl(scope.row, 0)" style="cursor: pointer;margin:auto;display: inline-block;">
                  <img v-if="scope.row.online == 1" src="@/assets/3d/zx.png" alt="" title="查看通道2"
                    @click="getVideoUrl(scope.row, 1)"
                    style="cursor: pointer;margin:auto;display: inline-block;margin-left:15px;">
                  <img v-if="scope.row.online != 1" src="@/assets/3d/lx.png" alt="" title="离线通道1"
                    style="margin:auto;display: inline-block;">
                  <img v-if="scope.row.online != 1" src="@/assets/3d/lx.png" alt="" title="离线通道2"
                    style="margin:auto;display: inline-block;margin-left:15px;">
                </span>
              </span>
              <span v-if="scope.row.type == 10 && scope.row.useMode == 11">
                <span v-if="scope.row.channelList != undefined && scope.row.channelList.length == 1">
                  <img v-if="scope.row.online == 1" src="@/assets/3d/zx1.png" alt="" title="查看通道1"
                    @click="getVideoUrl(scope.row, 0)"
                    style="cursor: pointer;margin:auto;display: inline-block;margin-left:15px;">
                  <img v-else src="@/assets/3d/lx1.png" alt="" title="离线通道1" @click="getVideoUrl(scope.row, 0)"
                    style="margin:auto;display: inline-block;margin-left:15px;">
                </span>

                <span v-if="scope.row.channelList != undefined && scope.row.channelList.length == 2">
                  <img v-if="scope.row.online == 1" src="@/assets/3d/zx1.png" alt="" title="查看通道1"
                    @click="getVideoUrl(scope.row, 0)" style="cursor: pointer;margin:auto;display: inline-block;">
                  <img v-if="scope.row.online == 1" src="@/assets/3d/zx1.png" alt="" title="查看通道2"
                    @click="getVideoUrl(scope.row, 1)"
                    style="cursor: pointer;margin:auto;display: inline-block;margin-left:15px;">
                  <img v-if="scope.row.online != 1" src="@/assets/3d/lx1.png" alt="" title="离线通道1"
                    style="margin:auto;display: inline-block;">
                  <img v-if="scope.row.online != 1" src="@/assets/3d/lx1.png" alt="" title="离线通道2"
                    style="margin:auto;display: inline-block;margin-left:15px;">
                </span>
              </span>
            </template>
          </el-table-column>
        </el-table>
        <el-table v-if="selType == '02' || lineDrapStart == true || isUAVdropLine == true" class="PatrolMonitoring"
          :data="daviceData" :row-class-name="tableRowClassName" v-loading="loading" highlight-current-row
          style="width: 100%;margin:auto;position: relative;height:570px;overflow: auto;margin:10px 0"
          :header-cell-style="{ background: '#253b51', color: '#b5d7ff', height: '50px' }" @row-click="rowClick">
          <el-table-column type="index" align="center" label="序号" width="60" />
          <el-table-column prop="deviceName" label="点位名称" width="140" />
          <el-table-column prop="mainDeviceName" label="所属主设备" width="160" />
          <el-table-column prop="componentName" label="所属部件" />
          <el-table-column label="关联摄像机/预置位" width="200px">
            <template #default="scope">
              <span>{{ scope.row.device_code }}/{{ scope.row.device_name }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="recognitionTypeList" label="识别类型">
            <template #default="scope">
              <span v-if="scope.row.recognitionTypeList == 1">表计读取</span>
              <span v-if="scope.row.recognitionTypeList == 2">位置状态识别</span>
              <span v-if="scope.row.recognitionTypeList == 3">设备外观查看</span>
              <span v-if="scope.row.recognitionTypeList == 4">红外测温</span>
              <span v-if="scope.row.recognitionTypeList == 5">声音检测</span>
              <span v-if="scope.row.recognitionTypeList == 6">闪烁检测</span>
              <span v-if="scope.row.recognitionTypeList == 13">局放特高频检测</span>
              <span v-if="scope.row.recognitionTypeList == 12">局放地电压检测</span>
              <span v-if="scope.row.recognitionTypeList == 11">局放超声波检测</span>
              <span v-if="scope.row.recognitionTypeList == 101">环境温度检测</span>
              <span v-if="scope.row.recognitionTypeList == 102">环境湿度检测</span>
              <span v-if="scope.row.recognitionTypeList == 103">氧气浓度检测</span>
              <span v-if="scope.row.recognitionTypeList == 104">SF6浓度检测</span>
            </template>
          </el-table-column>
          <el-table-column prop="meterType" label="表计类型">
            <template #default="scope">
              <span>{{ currency(Metertype, scope.row.meterType) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="pictureAnalysisTypeList.PictureAnalysisType" label="分析类型" width="80">
            <template #default="scope">
              <span v-if="scope.row.pictureAnalysisTypeList">
                <span v-if="scope.row.pictureAnalysisTypeList.PictureAnalysisType == 'isolator'">刀闸状态</span>
                <span v-if="scope.row.pictureAnalysisTypeList.PictureAnalysisType == 'switch'">开关/压板状态</span>
                <span v-if="scope.row.pictureAnalysisTypeList.PictureAnalysisType == 'meter'">仪表读数</span>
                <span v-if="scope.row.pictureAnalysisTypeList.PictureAnalysisType == 'infrared'">红外温度</span>
                <span v-if="scope.row.pictureAnalysisTypeList.PictureAnalysisType == 'sound'">声音</span>
                <span v-if="scope.row.pictureAnalysisTypeList.PictureAnalysisType == 'light'">指示灯</span>
                <span v-if="scope.row.pictureAnalysisTypeList.PictureAnalysisType == 'qrcode'">实物ID</span>
              </span>
            </template>
          </el-table-column>
        </el-table>
        <el-table v-if="selType == '04' || selType == '06'" :data="robotData" :row-class-name="tableRowClassName"
          class="PatrolMonitoring" v-loading="loading" highlight-current-row
          style="width: 100%;margin:auto;position: relative;height:570px;overflow: auto;margin:10px 0"
          :header-cell-style="{ background: '#253b51', color: '#b5d7ff', height: '50px' }" @row-click="rowClick">
          <el-table-column type="index" align="center" label="序号" width="60" />
          <el-table-column prop="patroldeviceCode" label="设备编码" width="140" />
          <el-table-column prop="patroldeviceName" label="设备名称" width="160" />
          <el-table-column prop="deviceModel" label="设备型号" />
          <el-table-column prop="manufacturer" label="生产厂家" width="200px">
          </el-table-column>
          <el-table-column prop="productionCountry" label="生产国家">
          </el-table-column>
          <el-table-column prop="place" label="安装位置" />
        </el-table>
        <el-table v-if="selType == '05' && associationTitle == '关联部件'" :data="componentData" class="PatrolMonitoring"
          :row-class-name="tableRowClassName" v-loading="loading" highlight-current-row
          style="width: 100%;margin:auto;position: relative;height:570px;overflow: auto;margin:10px 0"
          :header-cell-style="{ background: '#253b51', color: '#b5d7ff', height: '50px' }" @row-click="rowClick">
          <el-table-column type="index" align="center" label="序号" width="60" />
          <el-table-column prop="areaName" label="所属区域" width="140" />
          <el-table-column prop="bayName" label="所属间隔" width="160" />
          <el-table-column prop="mainDeviceName" label="主设备名称" />
          <el-table-column prop="deviceType" label="主设备类型" width="200px">
            <template #default="scope">
              <span v-if="scope.row.deviceType == 1">油浸式变压器(电抗器)</span>
              <span v-if="scope.row.deviceType == 2">断路器</span>
              <span v-if="scope.row.deviceType == 3">组合电器</span>
              <span v-if="scope.row.deviceType == 4">隔离开关</span>
              <span v-if="scope.row.deviceType == 5">开关柜</span>
              <span v-if="scope.row.deviceType == 6">电流互感</span>
              <span v-if="scope.row.deviceType == 7">电压互感器</span>
              <span v-if="scope.row.deviceType == 8">避雷器</span>
              <span v-if="scope.row.deviceType == 9">并联电容器组</span>
              <span v-if="scope.row.deviceType == 10">干式电抗器</span>
              <span v-if="scope.row.deviceType == 11">串联补偿装置</span>
              <span v-if="scope.row.deviceType == 12">母线及绝缘子</span>
              <span v-if="scope.row.deviceType == 13">穿墙套管</span>
              <span v-if="scope.row.deviceType == 14">消弧线圈</span>
              <span v-if="scope.row.deviceType == 15">高频阻波器</span>
              <span v-if="scope.row.deviceType == 16">耦合电容器</span>
              <span v-if="scope.row.deviceType == 17">高压熔断器</span>
              <span v-if="scope.row.deviceType == 18">中性点隔直(限直)装置</span>
              <span v-if="scope.row.deviceType == 19">接地装置</span>
              <span v-if="scope.row.deviceType == 20">端子箱及检修电源箱</span>
              <span v-if="scope.row.deviceType == 21">站用变压器</span>
              <span v-if="scope.row.deviceType == 22">站用交流电源系统</span>
              <span v-if="scope.row.deviceType == 23">站用直流电源系统</span>
              <span v-if="scope.row.deviceType == 24">设备构架</span>
              <span v-if="scope.row.deviceType == 25">辅助设施</span>
              <span v-if="scope.row.deviceType == 26">土建设施</span>
              <span v-if="scope.row.deviceType == 27">独立避雷针</span>
              <span v-if="scope.row.deviceType == 28">避雷器动作次数表</span>
              <span v-if="scope.row.deviceType == 29">二次屏柜</span>
              <span v-if="scope.row.deviceType == 30">消防系统</span>
            </template>
          </el-table-column>
          <el-table-column prop="componentName" label="部件名称"></el-table-column>
        </el-table>
        <el-table v-if="selType == '05' && associationTitle == '关联设备'" :data="mainDeviceData" class="PatrolMonitoring"
          :row-class-name="tableRowClassName" v-loading="loading" highlight-current-row
          style="width: 100%;margin:auto;position: relative;height:570px;overflow: auto;margin:10px 0"
          :header-cell-style="{ background: '#253b51', color: '#b5d7ff', height: '50px' }" @row-click="rowClick">
          <el-table-column type="index" align="center" label="序号" width="60" />
          <el-table-column prop="areaName" label="所属区域" width="140" />
          <el-table-column prop="bayName" label="所属间隔" width="160" />
          <el-table-column prop="mainDeviceName" label="主设备名称" />
          <el-table-column prop="deviceType" label="主设备类型" width="200px">
            <template #default="scope">
              <span v-if="scope.row.deviceType == 1">油浸式变压器(电抗器)</span>
              <span v-if="scope.row.deviceType == 2">断路器</span>
              <span v-if="scope.row.deviceType == 3">组合电器</span>
              <span v-if="scope.row.deviceType == 4">隔离开关</span>
              <span v-if="scope.row.deviceType == 5">开关柜</span>
              <span v-if="scope.row.deviceType == 6">电流互感</span>
              <span v-if="scope.row.deviceType == 7">电压互感器</span>
              <span v-if="scope.row.deviceType == 8">避雷器</span>
              <span v-if="scope.row.deviceType == 9">并联电容器组</span>
              <span v-if="scope.row.deviceType == 10">干式电抗器</span>
              <span v-if="scope.row.deviceType == 11">串联补偿装置</span>
              <span v-if="scope.row.deviceType == 12">母线及绝缘子</span>
              <span v-if="scope.row.deviceType == 13">穿墙套管</span>
              <span v-if="scope.row.deviceType == 14">消弧线圈</span>
              <span v-if="scope.row.deviceType == 15">高频阻波器</span>
              <span v-if="scope.row.deviceType == 16">耦合电容器</span>
              <span v-if="scope.row.deviceType == 17">高压熔断器</span>
              <span v-if="scope.row.deviceType == 18">中性点隔直(限直)装置</span>
              <span v-if="scope.row.deviceType == 19">接地装置</span>
              <span v-if="scope.row.deviceType == 20">端子箱及检修电源箱</span>
              <span v-if="scope.row.deviceType == 21">站用变压器</span>
              <span v-if="scope.row.deviceType == 22">站用交流电源系统</span>
              <span v-if="scope.row.deviceType == 23">站用直流电源系统</span>
              <span v-if="scope.row.deviceType == 24">设备构架</span>
              <span v-if="scope.row.deviceType == 25">辅助设施</span>
              <span v-if="scope.row.deviceType == 26">土建设施</span>
              <span v-if="scope.row.deviceType == 27">独立避雷针</span>
              <span v-if="scope.row.deviceType == 28">避雷器动作次数表</span>
              <span v-if="scope.row.deviceType == 29">二次屏柜</span>
              <span v-if="scope.row.deviceType == 30">消防系统</span>
            </template>
          </el-table-column>
        </el-table>
        <div style="display: flex;justify-content: center;">
          <Page v-show="selType == '01'" style="position: relative;z-index: 100;" :total="total"
            v-model:size="getinfo.size" :jumper="'hide'" v-model:current="getinfo.current" @pagination="getData()">
          </Page>
          <Page v-show="selType == '02'" style="position: relative;z-index: 100;" :total="total"
            v-model:size="deviceInfo.size" :jumper="'hide'" v-model:current="deviceInfo.current"
            @pagination="getDevice()"></Page>
          <Page v-show="selType == '04'" style="position: relative;z-index: 100;" :total="total"
            v-model:size="robotInfo.size" :jumper="'hide'" v-model:current="robotInfo.current" @pagination="getRobot()">
          </Page>
          <Page v-show="selType == '06'" style="position: relative;z-index: 100;" :total="total"
            v-model:size="robotInfo.size" :jumper="'hide'" v-model:current="robotInfo.current" @pagination="getUAV()">
          </Page>
          <Page v-show="selType == '05' && associationTitle == '关联设备'" style="position: relative;z-index: 100;"
            :total="total" v-model:size="pageInfo.size" :jumper="'hide'" v-model:current="pageInfo.current"
            @pagination="getmainDevicePage()"></Page>
          <Page v-show="selType == '05' && associationTitle == '关联部件'" style="position: relative;z-index: 100;"
            :total="total" v-model:size="pageInfo.size" :jumper="'hide'" v-model:current="pageInfo.current"
            @pagination="getComponentPage()"></Page>
        </div>
      </template>
    </Eldialog>
    <!-- 关联巡视路线 -->
    <Eldialog v-if="associationLine" title="关联巡视路线" :zIndex="2000" :width="'700px'" :height="'500px'"
      @before-close="associationLine = false">
      <template v-slot:PopFrameContent>
        <div class="mt-[15px]" style="display: flex;align-items: center; justify-content: space-between;">
          <div class="flex">
            <el-input class="!w-[170px] mr-2" v-model="patrolDeviceName" placeholder="请输入巡视路线名称" @clear="searchNmaeLine()"
              @keyup.enter="searchNmaeLine()" />
            <el-button class="searchButton" @click="searchNmaeLine">搜索</el-button>
          </div>
          <el-button class="searchButton" @click="associationLineConfirm">确定</el-button>
        </div>
        <el-table ref="multipleTable" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" row-key="id"
          :data="associationLineData" class="PatrolMonitoring" :row-class-name="tableRowClassName" highlight-current-row
          style="width: 100%;margin:auto;position: relative;height:400px;overflow: auto;margin:10px 0"
          :header-cell-style="{ background: '#253b51', color: '#b5d7ff', height: '50px' }"
          @selection-change="associationTableChange">
          <el-table-column type="selection" align="center" width="60" />
          <el-table-column type="index" align="center" label="序号" width="60" />
          <el-table-column prop="name" label="路线名称" align="left" />
        </el-table>
      </template>
    </Eldialog>
    <!-- 详细信息弹窗 -->
    <div class="detailed-information" v-if="information">
      <div id="detailed-information" v-drag class="examination">
        <div class="examination-title">{{ objRow.name }}</div>
        <div class="examination-close" @click.stop="information = false"><img src="@/assets/3d/u523.png" /></div>
        <div class="examination-contont" v-if="selType == '01'">
          <div class="examination-contont-text">设备编码：{{ objRow.userData.objinfo.patroldeviceCode }}</div>
          <div class="examination-contont-text">设备名称：{{ objRow.userData.objinfo.patroldeviceName }}</div>
          <div class="examination-contont-text">设备类型：{{ objRow.userData.objinfo.typeName }}</div>
          <div class="examination-contont-text">视频类型：
            <span v-if="objRow.userData.objinfo.videoMode == 1">可见光</span>
            <span v-if="objRow.userData.objinfo.videoMode == 2">红外</span>
            <span v-if="objRow.userData.objinfo.videoMode == 3">可见光与红外</span>
          </div>
          <div class="examination-contont-text">使用类型：
            <span v-if="objRow.userData.objinfo.useMode == 10">枪机</span>
            <span v-if="objRow.userData.objinfo.useMode == 11">球机</span>
            <span v-if="objRow.userData.objinfo.useMode == 12">云台</span>
          </div>
          <div class="examination-contont-text">设备型号：{{ objRow.userData.objinfo.deviceModel }}</div>
          <div class="examination-contont-text">生产厂家：{{ objRow.userData.objinfo.manufacturer }}</div>
          <div class="examination-contont-text">安装位置：{{ objRow.userData.objinfo.place }}</div>
        </div>
        <div class="examination-contont" v-if="selType == '02'">
          <div class="examination-contont-text">点位名称：{{ objRow.userData.objinfo.deviceName }}</div>
          <div class="examination-contont-text">所属主设备：{{ objRow.userData.objinfo.mainDeviceName }}</div>
          <div class="examination-contont-text">所属部件：{{ objRow.userData.objinfo.componentName }}</div>
          <div class="examination-contont-text">关联摄像机/预置位：
            <!-- {{ objRow.userData.objinfo.patroldeviceJson.device_code }}/ {{ objRow.userData.objinfo.patroldeviceJson.device_pos }} -->
          </div>
          <div class="examination-contont-text">识别类型：
            <span v-if="objRow.userData.objinfo.recognitionTypeList == 1">表计读取</span>
            <span v-if="objRow.userData.objinfo.recognitionTypeList == 2">位置状态识别</span>
            <span v-if="objRow.userData.objinfo.recognitionTypeList == 3">设备外观查看</span>
            <span v-if="objRow.userData.objinfo.recognitionTypeList == 4">红外测温</span>
            <span v-if="objRow.userData.objinfo.recognitionTypeList == 5">声音检测</span>
            <span v-if="objRow.userData.objinfo.recognitionTypeList == 6">闪烁检测</span>
            <span v-if="objRow.userData.objinfo.recognitionTypeList == 13">局放特高频检测</span>
            <span v-if="objRow.userData.objinfo.recognitionTypeList == 12">局放地电压检测</span>
            <span v-if="objRow.userData.objinfo.recognitionTypeList == 11">局放超声波检测</span>
            <span v-if="objRow.userData.objinfo.recognitionTypeList == 101">环境温度检测</span>
            <span v-if="objRow.userData.objinfo.recognitionTypeList == 102">环境湿度检测</span>
            <span v-if="objRow.userData.objinfo.recognitionTypeList == 103">氧气浓度检测</span>
            <span v-if="objRow.userData.objinfo.recognitionTypeList == 104">SF6浓度检测</span>
          </div>
          <div class="examination-contont-text">表计类型：{{ objRow.userData.objinfo.meterType }}</div>
          <div class="examination-contont-text">分析类型：{{ objRow.userData.objinfo.manufacturer }}
            <span v-if="objRow.userData.objinfo.pictureAnalysisTypeList.PictureAnalysisType == 'isolator'">刀闸状态</span>
            <span v-if="objRow.userData.objinfo.pictureAnalysisTypeList.PictureAnalysisType == 'switch'">开关/压板状态</span>
            <span v-if="objRow.userData.objinfo.pictureAnalysisTypeList.PictureAnalysisType == 'meter'">仪表读数</span>
            <span v-if="objRow.userData.objinfo.pictureAnalysisTypeList.PictureAnalysisType == 'infrared'">红外温度</span>
            <span v-if="objRow.userData.objinfo.pictureAnalysisTypeList.PictureAnalysisType == 'sound'">声音</span>
            <span v-if="objRow.userData.objinfo.pictureAnalysisTypeList.PictureAnalysisType == 'light'">指示灯</span>
            <span v-if="objRow.userData.objinfo.pictureAnalysisTypeList.PictureAnalysisType == 'qrcode'">实物ID</span>
          </div>
        </div>
        <div class="examination-contont" v-if="selType == '04' || selType == '06'">
          <div class="examination-contont-text">设备编码：{{ objRow.userData.objinfo.patroldeviceCode }}</div>
          <div class="examination-contont-text">设备名称：{{ objRow.userData.objinfo.patroldeviceName }}</div>
          <div class="examination-contont-text" v-if="selType == '04'">是否轮转：{{ objRow.userData.objinfo.istransport }}
            <span v-if="objRow.userData.objinfo.istransport == '0'">轮转</span>
            <span v-if="objRow.userData.objinfo.istransport == '1'">不论转</span>
          </div>
          <div class="examination-contont-text">设备型号：{{ objRow.userData.objinfo.deviceModel }}</div>
          <div class="examination-contont-text">生产厂家： {{ objRow.userData.objinfo.manufacturer }}</div>
          <div class="examination-contont-text">生产国家：{{ objRow.userData.objinfo.productionCountry }}</div>
          <div class="examination-contont-text">安装位置：{{ objRow.userData.objinfo.place }}
          </div>
        </div>
        <div class="examination-contont " v-if="selType == '05'">
          <div v-if="objRow.userData.objinfo.componentName != undefined" class="examination-contont-text">部件名称：{{
            objRow.userData.objinfo.componentName }}</div>
          <div v-if="objRow.userData.objinfo.componentName == undefined" class="examination-contont-text">设备名称：{{
            objRow.userData.objinfo.mainDeviceName }}</div>
          <div class="examination-contont-text">所属区域：{{ objRow.userData.objinfo.areaName }}</div>
          <div class="examination-contont-text">所属间隔：{{ objRow.userData.objinfo.bayName }}</div>
          <div v-if="associationTitle == '关联部件'" class="examination-contont-text">所属主设备： {{
            objRow.userData.objinfo.mainDeviceName }}</div>
        </div>
        <!-- </div> -->
      </div>
    </div>
    <!-- 视频弹窗 -->
    <div v-drag class="videoPopup" style="text-align: right;" v-if="videoShow">
      <img src="@/assets/3d/u523.png" style="cursor:pointer;position:absolute;right:20px;top:10px;z-index:99"
        @click="videoShow = false" />
      <JessibucaPlayer ref="recordVideoPlayer" :_uid="101" :devicechannelInfo="devicechannelInfo" :visible.sync="true"
        :videoUrl="videoUrl" :hasAudio="false" fluent autoplay live @closeVideo="closeVideo"></JessibucaPlayer>
    </div>
    <!-- 创建巡视任务弹窗 -->
    <Eldialog v-if="explicitImplicit" title="创建巡视任务" :zIndex="2000" :width="'900px'"
      @before-close="explicitImplicit = false">
      <template v-slot:PopFrameContent>
        <el-form ref="infoForm" :model="info" label-width="100px"
          style="display: flex; flex-wrap: wrap; margin: 20px 30px 10px 10px;" :rules="rules">
          <el-form-item label="任务编码" style="width:50%" prop="taskCode" class="screenHomepage ">
            <el-input v-model="info.taskCode" style="width: 100%;" placeholder="请输入任务编码"></el-input>
          </el-form-item>
          <el-form-item label="任务名称" style="width:50%" prop="taskName" class="screenHomepage ">
            <el-input v-model="info.taskName" style="width: 100%;" placeholder="请输入任务名称"></el-input>
          </el-form-item>
          <el-form-item label="任务类型" style="width:50%" class="screenHomepage ">
            <el-select class="selType" :teleported="false" :popper-append-to-body="false" v-model="info.taskType"
              placeholder="请选择任务类型" style="width: 100%">
              <el-option v-for="item in TaskType" :key="item.id" :label="item.dictname" :value="item.itemcode" />
            </el-select>
          </el-form-item>
          <el-form-item label="任务优先级" style="width:50%" class="screenHomepage ">
            <el-select class="selType" :teleported="false" :popper-append-to-body="false" :disabled="info.taskType == ''"
              v-model="info.priority" placeholder="请选择任务优先级" style="width: 100%">
              <el-option v-for="item in priority" :key="item.id" :label="item.dictname" :value="item.itemcode" />
            </el-select>
          </el-form-item>
          <el-form-item label="执行方式" style="width:50%" class="screenHomepage ">
            <el-select class="selType" :teleported="false" :popper-append-to-body="false" v-model="info.taskTodoType"
              placeholder="请选择执行方式" style="width: 100%">
              <el-option v-for="item in ExecutionMethod" :key="item.label" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="开始时间" style="width:50%;" class="screenHomepage">
            <el-date-picker v-model="info.fixedStartTime" type="datetime" placeholder="请选择" style="width: 100%;"
              popper-class="elDatePicker"
              :disabled="info.taskTodoType == 1 || info.taskTodoType == '' || info.taskTodoType == undefined" />
          </el-form-item>
          <el-form-item label="cron表达式" style="width:50%" class="screenHomepage">
            <div class="w-full flex justify-between">
              <el-input v-model="info.cronValue" style="width: calc(100% - 70px);" disabled
                placeholder="请输入任务编码"></el-input>
              <el-button style="background: transparent;border:1px solid #225b7e;color:#fff;height:36px;color:#009bff;"
                @click="cycleCron"
                :disabled="info.taskTodoType == 1 || info.taskTodoType == 2 || info.taskTodoType == '' || info.taskTodoType == undefined">
                设置</el-button>
            </div>
          </el-form-item>
          <el-form-item label="不可用时间" style="width:50%" class="screenHomepage">
            <el-date-picker popper-class="elDatePicker" v-model="timeData" type="datetimerange" range-separator="至"
              start-placeholder="开始日期" end-placeholder="结束日期" style="width: 100%;"
              :disabled="info.taskTodoType == 1 || info.taskTodoType == 2 || info.taskTodoType == '' || info.taskTodoType == undefined" />
          </el-form-item>
          <el-form-item label="备注信息" class="screenHomepage "
            style="width:100%;display:flex;align-items:flex-start !important;">
            <el-input type="textarea" v-model="info.custom1" :rows="4" style="width: 100% ;"
              placeholder="请输入备注信息"></el-input>
          </el-form-item>
        </el-form>
        <div style="width: 100%;display: flex;justify-content:center;">
          <el-button class="three-button1" @click="taskConfirmClick(infoForm)"
            style="border: none;z-index:100;position: relative; color: #009bff;width: 110px;height: 34px;margin-right:30px;">确定</el-button>
          <el-button class="three-button1"
            style="border: none;z-index:100;position: relative; color: #009bff;width: 110px;height: 34px;margin-left:30px;"
            @click="explicitImplicit = false">取消</el-button>
        </div>
      </template>
    </Eldialog>
    <!-- cron表达式弹窗 -->
    <Eldialog v-if="cronExpressions" title="时间周期表达式设置" :zIndex="2000" :width="'1050px'"
      @before-close="cronExpressions = false">
      <template v-slot:PopFrameContent>
        <div class="tabs">
          <div @click="index = 1" :class="index == 1 ? 'tabsTitle' : ''">秒</div>
          <div @click="index = 2" :class="index == 2 ? 'tabsTitle' : ''">分</div>
          <div @click="index = 3" :class="index == 3 ? 'tabsTitle' : ''">时</div>
          <div @click="index = 4" :class="index == 4 ? 'tabsTitle' : ''">日</div>
          <div @click="index = 5" :class="index == 5 ? 'tabsTitle' : ''">月</div>
          <div @click="index = 6" :class="index == 6 ? 'tabsTitle' : ''">周</div>
          <div style="width: 80%;"></div>
        </div>
        <div class="tabsContent">
          <div v-show="index == 1" style="height:230px" class="miao">
            <el-radio-group v-model="second" @change="rediosecond">
              <el-radio :label="4" style="height: 230px; ">
                <div style="display: flex;">
                  <div style="margin-top:-3px ;">指定</div>
                  <el-checkbox-group v-model="checkListsecond" @change="ahangesecond">
                    <div
                      style="margin-left: 15px; display: flex;flex-wrap: wrap ;align-items: center;justify-content: flex-start;">
                      <el-checkbox style="display: block;" v-for="item in appointsecond" :key="index" :label="item"
                        size="large" />
                    </div>
                  </el-checkbox-group>
                </div>
              </el-radio>
            </el-radio-group>
          </div>
          <div v-show="index == 2" style="height:230px" class="miao">
            <el-radio-group v-model="divide" @change="rediodivide">
              <el-radio :label="4" style="height: 230px; ">
                <div style="display: flex;">
                  <div style="margin-top: -3px;">指定</div>
                  <el-checkbox-group v-model="checkListdivide" @change="rediodivide(4)">
                    <div
                      style="margin-left: 15px; display: flex;flex-wrap: wrap ;align-items: center;justify-content: flex-start;">
                      <el-checkbox style="display: block;" v-for="item in appointdivide" :label="item" size="large" />
                    </div>
                  </el-checkbox-group>
                </div>
              </el-radio>
            </el-radio-group>
          </div>
          <div v-show="index == 3" style="height:230px">
            <el-radio-group v-model="time" @change="rediodtime">
              <el-radio :label="3" style="margin-top:30px;" :disabled="sun == 4"><span>
                  <span style="color: #FFF;">从</span>
                  <el-input class="spanmarg" @change="rediodtime(3)" v-model="periodtime.periodInput3"
                    style="width:80px" />
                  <span class="spanmarg">小时开始，每</span>
                  <el-input class="spanmarg" @change="rediodtime(3)" v-model="periodtime.periodInput4"
                    style="width:80px" />
                  <span class="spanmarg">小时执行一次</span>
                </span></el-radio>
              <el-radio :label="4" style="height: 200px; " class="shi">
                <div style="display: flex;">
                  <div style="margin-top: -3px;">指定</div>
                  <div style="width:1000px; color: #ffffff;">
                    <div style="display: flex; margin-left: 15px; ">
                      <div style="margin-top: -3px;">上午：</div>
                      <el-checkbox-group v-model="checkListtime" @change="rediodtime(4)">
                        <div style=" display: flex;flex-wrap: wrap ;align-items: center;justify-content: flex-start;">
                          <el-checkbox style="display: block;" v-for="item in appointtime1" :label="item" size="large" />
                        </div>
                      </el-checkbox-group>
                    </div>
                    <div style="display: flex; margin-left: 15px;">
                      <div style="margin-top: -3px;">下午：</div>
                      <el-checkbox-group v-model="checkListtime" @change="rediodtime(4)">
                        <div style=" display: flex;flex-wrap: wrap ;align-items: center;justify-content: flex-start;">
                          <el-checkbox style="display: block;" v-for="item in appointtime2" :label="item" size="large" />
                        </div>
                      </el-checkbox-group>
                    </div>
                  </div>
                </div>
              </el-radio>
            </el-radio-group>
          </div>
          <div v-show="index == 4" style="height:230px">
            <el-radio-group v-model="sun" @change="rediodsun">
              <el-radio :label="2" style="margin-top:20px;width:100%;">不指定</el-radio>
              <el-radio :label="4" :disabled="week == 6 || time == 3" id="dayRadio" style="margin-top:20px;"><span>
                  <span style="color: #fff;">从</span>
                  <el-input class="spanmarg" @change="rediodsun(4)" v-model="periodsun.periodInput3" style="width:80px"
                    :disabled="week == 6" />
                  <span class="spanmarg">日开始，每</span>
                  <el-input class="spanmarg" @change="rediodsun(4)" v-model="periodsun.periodInput4" style="width:80px"
                    :disabled="week == 6" />
                  <span class="spanmarg">天执行一次</span>
                </span></el-radio>
            </el-radio-group>
          </div>
          <div v-show="index == 5" style="height:230px" class="yue">
            <el-radio-group v-model="moon" @change="rediodmoon">
              <el-radio :label="4" style="height: 140px; ">
                <div style="display: flex;">
                  <div style="margin-top: -3px;">指定</div>
                  <el-checkbox-group v-model="checkListmoon" @change="rediodmoon(4)">
                    <div
                      style="margin-left: 15px; display: flex;flex-wrap: wrap ;align-items: center;justify-content: flex-start;width: 1000px;">
                      <el-checkbox style="display: block;" v-for="item in appointmoon" :label="item" size="large" />
                    </div>
                  </el-checkbox-group>
                </div>
              </el-radio>
            </el-radio-group>
          </div>
          <div v-show="index == 6" style="height:230px">
            <el-radio-group v-model="week" @change="rediodweek">
              <el-radio :label="2" style="margin-top: 20px;width:100%;">不指定</el-radio>
              <div></div>
              <el-radio :label="6" style="height: 120px; " :disabled="sun == 4" class="yue">
                <div style="display: flex;">
                  <div style="margin-top: -3px;">指定</div>
                  <el-checkbox-group v-model="checkListweek" @change="rediodweek(6)">
                    <div
                      style="margin-left: 15px; display: flex;flex-wrap: wrap ;align-items: center;justify-content: flex-start;width: 600px;">
                      <el-checkbox style="display: block;" v-for="item in appointweek" :label="item" size="large"
                        :disabled="sun == 4" />
                    </div>
                  </el-checkbox-group>
                </div>
              </el-radio>
            </el-radio-group>
          </div>
        </div>
        <!-- <div class="disMakeUse" v-if="sun == 4 && week ==6">不支持同时使用日和周</div> -->
        <div style="display: flex;align-items: center; justify-content: space-between; width: 65px; margin-top: 20px;">
          <div style="width: 5px;height: 15px;background-color: rgba(255, 189, 0, 1);"></div>
          <div style="color:#009bff;font-size: 16px;font-weight: 700;">表达式</div>
        </div>
        <div style="margin-top: 20px;margin-bottom:10px;color:#fff;font-size: 14px;">表达式字段</div>
        <div style="display: flex; justify-content: space-between;">
          <div class="field"><el-input class="fieldInput" v-model="field.fieldsecond" disabled />
            <div class="fieldText">秒</div>
          </div>
          <div class="field"><el-input class="fieldInput" v-model="field.fielddivide" disabled />
            <div class="fieldText">分</div>
          </div>
          <div class="field"><el-input class="fieldInput" v-model="field.fieldtime" disabled />
            <div class="fieldText">时</div>
          </div>
          <div class="field"><el-input class="fieldInput" v-model="field.fieldsun" disabled />
            <div class="fieldText">日</div>
          </div>
          <div class="field"><el-input class="fieldInput" v-model="field.fieldmoon" disabled />
            <div class="fieldText">月</div>
          </div>
          <div class="field"><el-input class="fieldInput" v-model="field.fieldweek" disabled />
            <div class="fieldText">周</div>
          </div>
        </div>
        <div style="margin-top: 20px;margin-bottom:10px;color:#fff;font-size: 14px;">表达式</div>
        <div class="zuihou"> <el-input v-model="resentation" style="height: 40px;" disabled /></div>
        <div style="width: 100%;display: flex;justify-content:center;margin-top:20px;">
          <el-button class="three-button1" style="margin-right:40px;"
            @click="cronExpressions = false">取消</el-button>
          <el-button class="three-button1" @click="assignment"
           >确定</el-button>
        </div>
      </template>
    </Eldialog>
  </div>
</template>
<script setup>
import { getdata, getArea } from '@/api/monitordevice'
import { getPatrolDeviceStatus, getDeviceByType } from '@/api/device'
import { getSubstationBayByArea } from "@/api/task";
import { addTask } from "@/api/makeTask";
import { getdevicedata, getBayType, getMainEquipment, getComponentByBayPage, getMainDevicePage } from '@/api/device'
import Page from '@/components/Pagination/page.vue'
import JessibucaPlayer from '@/components/jessibuca/index1.vue' // 视频
import { useUserStore } from '@/store/modules/user'
import axios from 'axios'
import { getSubstationById, updateSubstation_bak, getrobotdata, getPatrolDeviceList } from '@/api/substation'
import { onMounted, ref, reactive, onBeforeUnmount, nextTick, watch } from 'vue'
import * as THREE from 'three'
import TWEEN from 'tween'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls' // 控制器
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js' // 控制器
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js' // 控制器
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js' // 控制器
import { ElMessage, ElMessageBox, ElTree } from 'element-plus'

import { TransformControls } from 'three/examples/jsm/controls/TransformControls'
import jt from '@/assets/3d/jt.png'
import { PathPointList } from '@/utils/PathPointList.js'
import { PathGeometry } from '@/utils/PathGeometry.js'
import position from './index.json'
import Eldialog from '@/components/seccmsdialog/eldialog.vue'

import pointImg from '@/assets/3d/u46.svg'

const userStore = useUserStore()

const taskName = ref()
const tableData = ref([])
const daviceData = ref([])
const robotData = ref([])
const componentData = ref([])
const mainDeviceData = ref([])
const deviceMain = ref([])
const deviceComponent = ref([])
const getinfo = ref({
  size: 10,
  current: 1,
  type: '',
  areaId: ''
})
const deviceInfo = ref({
  size: 10,
  current: 1,
  deviceName: '',
  mainDeviceId: '',
  componentId: ''
})
const robotInfo = ref({
  size: 10,
  current: 1,
  stationId: '',
  type: '1',
})
const pageInfo = ref({
  size: 10,
  current: 1,
  stationCode: '',
  areaId: '',
  bayId: '',
  mainDeviceName: '',
  componentName: ''
})
const patrolDeviceName = ref()//无人车搜索
const mainDeviceName = ref()//主设备
const componentName = ref()//部件
const PatrolEquipmentType = ref([]) // 设备类型
const areaIdType = ref([])// 区域
const bayIdType = ref([])// 间隔
const total = ref()
const loading = ref(false)
const renameNmae = ref()
let renderer = reactive(null) // 渲染器
let transformControls = reactive(null) // 模型 平移 缩放
const draw = ref() // 场景div
let scene = reactive(null) // 场景
const progress = ref(0) // 场景 - 加载进度条
const loadSuccess = ref(true) // 场景 - 加载进度条 显示
const clientWidth = ref()
const clientHeight = ref()
let defaultCamera = reactive(null) // 相机
let activeCamera = reactive(null)
let controls = reactive(null) // 相机控制器

const selModel = ref() // 选中的模型
let _animate = null // 动画
let gridHelper = null // 网格地面
let axesHelper = null // 坐标系
let state = {
  wireframe: false, // 显示线框
  grid: false, // 显示坐标轴

  addLights: true,
  exposure: 2.0,
  textureEncoding: 'sRGB',
  ambientIntensity: 1,
  ambientColor: 0xcccccc,
  directIntensity: 0.8 * Math.PI,
  directColor: 0xcccccc,
  bgColor1: '#008157',
  bgColor2: '#040F11'
}

let lights = []
let content = null
const videoShow = ref(false)
const isClick = ref(false)

// 初始化
onMounted(() => {
  initRenderer()
  setupWebSocket()
  
  //取消选中并且取消右键操作
  document.body.onselectstart = document.body.oncontextmenu = function () {
    return false
  }
})
// 页面退出
onBeforeUnmount(() => {
  window.removeEventListener('resize', resize)
  window.removeEventListener('click', portClick)
  window.removeEventListener('dblclick', portClick)
  window.removeEventListener('contextmenu', portDBClick)
  window.removeEventListener('wheel', handleMouseWheel)
  //取消选中并且取消右键操作
  document.body.onselectstart = document.body.oncontextmenu = null
  removeObj(scene)
  renderer && renderer.dispose()
  renderer.forceContextLoss()
  renderer.domElement = null
  renderer.content = null
  renderer = null
  cancelAnimationFrame(_animate)
  THREE.Cache.clear()
  if (ws1 != null) {
        ws1.close()
    }
})
// 初始化渲染器
function initRenderer() {
  // 初始化场景
  clientWidth.value = draw.value.clientWidth
  clientHeight.value = draw.value.clientHeight
  // 初始化场景
  scene = new THREE.Scene()
  // 初始化相机
  defaultCamera = new THREE.PerspectiveCamera(60, clientWidth.value / clientHeight.value, 0.01, 1000)
  activeCamera = defaultCamera
  scene.add(defaultCamera)
  // 实例化渲染器
  renderer = window.renderer = new THREE.WebGLRenderer({ antialias: true })
  // renderer.physicallyCorrectLights = true
  renderer.useLegacyLights = true
  renderer.gammaOutput = true
  renderer.gammaFactor = 2.2
  renderer.setClearColor(0x131a25)
  // 设置设备像素比
  renderer.setPixelRatio(window.devicePixelRatio)
  // 设置渲染区域尺寸
  renderer.setSize(draw.value.clientWidth, draw.value.clientHeight)
  // 初始化相机控制器
  controls = new OrbitControls(defaultCamera, renderer.domElement)
  controls.enableRotate = true //禁止旋转
  controls.enablePan = true //禁止平移
  controls.enableZoom = true //禁止缩放
  controls.autoRotate = false // 是否自动旋转
  controls.autoRotateSpeed = -1 // 旋转速度
  controls.screenSpacePanning = true
  // controls.enableDamping = true // 开启控制器的阻尼效果
  // AxesHelper：辅助观察的坐标系
  // const axesHelper = new THREE.AxesHelper(150)
  // scene.add(axesHelper)
  draw.value.appendChild(renderer.domElement)
  // 运行动画
  animate()
  // 添加事件
  addmeth()
  // 加载场景模型
  initgltfLoader()
}
// 运行动画
function animate() {
  TWEEN.update()
  _animate = requestAnimationFrame(animate) // 循环调用函数
  controls.update()
  renderer.render(scene, activeCamera)
}
// 添加事件
function addmeth() {
  window.addEventListener('resize', resize, false)
  window.addEventListener('click', portClick, false)
  window.addEventListener('dblclick', portClick, false)
  window.addEventListener('contextmenu', portDBClick, false)
  window.addEventListener('wheel', handleMouseWheel, false)
}
// 加载场景模型 gltf
function initgltfLoader() {
  const manager = new THREE.LoadingManager()
  manager.setURLModifier((url, path) => {
    return (path || '') + url
  })
  const gltfLoader = new GLTFLoader(manager)
  const dracoLoader = new DRACOLoader()
  dracoLoader.setDecoderPath('./static/js/')
  dracoLoader.setDecoderConfig({ type: 'js' })
  gltfLoader.setDRACOLoader(dracoLoader)
  gltfLoader.load('./static/3DModel/scene.glb', (gltf) => {
    const model = gltf.scene || gltf.scenes[0]
    const clips = gltf.animations || []
    setContent(model, clips)
    // 加载JSON 数据
    initData()
    loadSuccess.value = false
  }, (xhr) => {
    const percentage = Math.floor(xhr.loaded / xhr.total * 100)
    progress.value = percentage + '%'
  })
}
// 模型属性设置
function setContent(object, clips) {
  clear()
  object.updateMatrixWorld()
  const box = new THREE.Box3().setFromObject(object)
  const size = box.getSize(new THREE.Vector3()).length()
  const center = box.getCenter(new THREE.Vector3())
  // 相机控制器重置
  controls.reset()

  object.position.x += (object.position.x - center.x)
  object.position.y = 17
  object.position.z += (object.position.z - center.z)

  controls.maxDistance = size * 10
  defaultCamera.near = size / 100
  defaultCamera.far = size * 100

  // 更新相机
  defaultCamera.updateProjectionMatrix()
  // 相机视角设置

  defaultCamera.position.copy(center)
  defaultCamera.position.x = 0.1653268513339453
  defaultCamera.position.y = 108.83794927572215
  defaultCamera.position.z = 71.85528617360808
  defaultCamera.lookAt(center)
  content = object
  controls.saveState()
  // 添加模型
  scene.add(object)

  state.addLights = true
  content.traverse((node) => {
    if (node.isLight) {
      state.addLights = false
    }
  })
  // 添加光照
  updateLights()
  updateTextureEncoding()
  updateDisplay()

}
function updateDisplay() {
  traverseMaterials(content, (material) => {
    material.wireframe = state.wireframe
  })
  if (state.grid !== Boolean(gridHelper)) {
    if (state.grid) {
      gridHelper = new THREE.GridHelper()
      axesHelper = new THREE.AxesHelper(100)
      axesHelper.renderOrder = 99
      axesHelper.onBeforeRender = (renderer) => renderer.clearDepth()
      scene.add(gridHelper)
      scene.add(axesHelper)
    } else {
      scene.remove(gridHelper)
      scene.remove(axesHelper)
      gridHelper = null
      axesHelper = null
    }
  }
}
function updateTextureEncoding() {
  const encoding = state.textureEncoding === 'sRGB'
    ? THREE.sRGBEncoding
    : THREE.LinearEncoding
  traverseMaterials(content, (material) => {
    if (material.map) material.map.encoding = encoding
    if (material.emissiveMap) material.emissiveMap.encoding = encoding
    if (material.map || material.emissiveMap) material.needsUpdate = true
  })
}
// 添加光照
function updateLights() {
  if (state.addLights && !lights.length) {
    addLights()
  } else if (!state.addLights && lights.length) {
    removeLights()
  }
  renderer.toneMappingExposure = state.exposure

  if (lights.length === 2) {
    lights[0].intensity = state.ambientIntensity
    lights[0].color.setHex(state.ambientColor)
    lights[1].intensity = state.directIntensity
    lights[1].color.setHex(state.directColor)
  }
}
// 添加光照
function addLights() {
  const light1 = new THREE.AmbientLight(state.ambientColor, state.ambientIntensity)
  light1.name = 'ambient_light'
  defaultCamera.add(light1)

  const light2 = new THREE.DirectionalLight(state.directColor, state.directIntensity)
  light2.position.set(0.5, 0, 0.866)
  light2.name = 'main_light'
  defaultCamera.add(light2)

  lights.push(light1, light2)
}
// 删除光照
function removeLights() {
  lights.forEach((light) => light.parent.remove(light))
  lights.length = 0
}
var textures = ''
var testmesh = ''
// 单击模型事件
function portClick(event) {
  // 保持原事件
  // event.preventDefault()
  if (translateRotate.value == '01' || translateRotate.value == '02' || translateRotate.value == '03') return
  // 清除右键弹框
  const contextmenu = document.getElementById('contextmenu')
  contextmenu.style.display = 'none'
  const contextimg = document.getElementById('contextimg')
  contextimg.style.display = 'none'
  isTranslateRotate.value = false
  // 建立射线
  const vector = new THREE.Vector3()
  vector.set((event.layerX / clientWidth.value) * 2 - 1, -(event.layerY / clientHeight.value) * 2 + 1)
  const raycaster = new THREE.Raycaster()
  // // 建立一个空物体
  raycaster.setFromCamera(vector, activeCamera)
  raycaster.params.Line.threshold = 0.01
  const intersections = raycaster.intersectObjects(scene.children)
  let selectedObject = null
  if (isdrop.value == true) {
    if (isdropLine.value == true) {
      for (var i = 0; i < intersections.length; i++) {
        if (drawline.value.length > 0) isWithdraw.value = false
        // 遍历线相交模型
        if (intersections[i].object instanceof THREE.Mesh) {
          // 取第一个（距离最近）的相交Mesh类型模型
          // 如果要排除地面等参照模型，也可在此处添加判断条件
          if (intersections[i].object.type == 'TransformControlsPlane') continue
          drawline.value.push({x: intersections[i].point.x,y: 17.05,z: intersections[i].point.z})

          let gltfLoader = new OBJLoader() //obj加载器
          // 引入默认纹理
          gltfLoader.load('./static/3DModel/XiaoSanJiao.obj', (gltf1) => {
            let model = gltf1
            model.position.set(intersections[i].point.x + 0.2, intersections[i].point.y, intersections[i].point.z)
            model.name = '添加路线点'
            model.scale.set(3, 3, 3)
            scene.add(model)
          })
          if (drawline.value.length > 1) {
            var ponst = []
            for (let i = 0; i < drawline.value.length; i++) {
              ponst.push(new THREE.Vector3(drawline.value[i].x, drawline.value[i].y + 0.05, drawline.value[i].z))
            }
            let curve = new THREE.CatmullRomCurve3(ponst, false)
            var up = new THREE.Vector3(0, 1, 0)
            // 创建路线点列表
            var pathPointLists = new PathPointList()
            pathPointLists.set(curve.points, 0.5, 10, up, false)
            var geometry = new PathGeometry()
            geometry.update(pathPointLists, {
              width: 1,
              arrow: false
            })
            textures = new THREE.TextureLoader().load(jt, function (texture) {
              texture.wrapS = texture.wrapT = THREE.RepeatWrapping
              texture.anisotropy = renderer.capabilities.getMaxAnisotropy()
            })

            // 创建材质
            var material = new THREE.MeshPhongMaterial({
              color: 0xFFFFFF,
              depthWrite: true,
              transparent: true,
              opacity: 1,
              side: THREE.DoubleSide,
              map: textures,
            })
            testmesh = new THREE.Mesh(geometry, material)
            testmesh.name = 'testmesh'
            testmesh.userData.points = drawline.value
            for (let i = 0; i < scene.children.length; i++) {
              if (scene.children[i].name == 'testmesh') {
                scene.remove(scene.children[i])
              }
            }
            scene.add(testmesh)
          }
          break
        }
      }
    }
    return
  } else if (lineDrap.value == true) {
    if (lineDrapStart.value == true) {
      for (var i = 0; i < intersections.length; i++) {
        // 遍历线相交模型
        if (intersections[i].object instanceof THREE.Mesh) {
          // 取第一个（距离最近）的相交Mesh类型模型
          // 如果要排除地面等参照模型，也可在此处添加判断条件
          if (intersections[i].object.userData.type != 'PatrolLine') continue
          selModel.value = intersections[i]
          association.value = true

          associationTitle.value = '关联无人车巡视点位'
          getDevice()
          break
        }
      }
    }
  } else if (isUAVdrop.value == true) {
    if (isUAVdropLine.value == true) {
      for (var i = 0; i < intersections.length; i++) {
        if (intersections[i].object instanceof THREE.Mesh) {
          selModel.value = intersections[i]
          association.value = true
          associationTitle.value = '关联无人机巡视点位'
          getDevice()
          break
        }
      }
    }
  } else {
    // 清除所有选中框
    for (let i = 0; i < scene.children.length; i++) {
      if (scene.children[i].type == 'BoxHelper') {
        scene.children[i].traverse(function (obj) {
          if (obj.type === 'Mesh') {
            obj.geometry.dispose()
            obj.material.dispose()
          }
        })
        scene.remove(scene.children[i])
        i--
      }
    }
    if (intersections.length > 0) {
      for (var i = 0; i < intersections.length; i++) {
        // 遍历线相交模型
        if (intersections[i].object instanceof THREE.Mesh) {
          // 取第一个（距离最近）的相交Mesh类型模型
          // 如果要排除地面等参照模型，也可在此处添加判断条件
          if (intersections[i].object.name.indexOf('不动') != -1) continue
          if (intersections[i].object.type == 'TransformControlsPlane') continue
          if (intersections[i].object.parent.userData.type == 'Projection') continue
          selModel.value = intersections[i]
          selectedObject = intersections[i].object
          break
        }
      }
    }
    if (selectedObject) {
      let model = BoxHelper(selectedObject)

      const box = new THREE.Box3().setFromObject(model)
      if (model.name.indexOf('不动') != -1) return
      // 清除右键弹出框
      if (selType.value == '05') {
        if (event.type == 'click') {
          isClick.value = true
          model = BoxHelper(selectedObject)
        } else if (event.type == 'dblclick') {
          isClick.value = false
          model = BoxHelpers(selectedObject)
        }
      }
      dataSel.value = model
      if (selType.value == '01') {
        if (model.userData.type == 'DevicePoint' || model.userData.type == 'UV' || model.userData.type == 'UAV') {
          return
        }
      } else if (selType.value == '02') {
        if (model.userData.type == 'Camera' || model.userData.type == 'Camera1' || model.userData.type == 'UV' || model.userData.type == 'UAV') {
          return
        }
      } else if (selType.value == '04') {
        if (model.userData.type == 'DevicePoint' || model.userData.type == 'Camera' || model.userData.type == 'Camera1' || model.userData.type == 'UAV') {
          return
        }
      } else if (selType.value == '06') {
        if (model.userData.type == 'UV' || model.userData.type == 'DevicePoint' || model.userData.type == 'Camera' || model.userData.type == 'Camera1') {
          return
        }
      }
      if (model) {
        // 清除右侧选中
        dataIndex.value = null
        treeRef.value.setCurrentKey(null)
        //清除右侧摄像机选中
        if (selType.value == '04') {
          treeRef.value.setCurrentKey(model.uuid)
        } else {
          data.value.forEach((element, index) => {
            if (element.id == model.uuid) {
              dataIndex.value = index
            }
          })
        }
        model.userData.type == 'Camera' || model.userData.type == 'Camera1' || model.userData.type == 'DevicePoint' || model.userData.type == 'UV' || model.userData.type == 'UAV' ? isTranslateRotate.value = true : isTranslateRotate.value = false
        let isModel = true
        for (let i = 0; i < scene.children.length; i++) {
          if (scene.children[i].type == 'BoxHelper') {
            if (model.uuid == element.userData.uuid) {
              scene.children[i].traverse(function (obj) {
                if (obj.type === 'Mesh') {
                  obj.geometry.dispose()
                  obj.material.dispose()
                }
              })
              scene.remove(scene.children[i])
              i--
            }
          }
        }
        if (isModel) {
          if (model.userData.type != 'PatrolLine') {
            const box = new THREE.BoxHelper(model, '#fff000')
            box.userData.uuid = model.uuid
            scene.add(box)
          } else {
            isTranslateRotate.value = false
          }
        }
      }
    }
  }
}
function BoxHelper(selectedObject) {
  if (selectedObject.type == 'Mesh') {
    if (selectedObject.parent.name == 'Scene' && selectedObject.parent.type == 'Group' || selectedObject.parent.type == 'Scene') {
      return selectedObject
    }
    // if (selectedObject.parent.name == selectedObject.parent.userData.name) {
    //   return selectedObject.parent
    // }
    return BoxHelper(selectedObject.parent)
  } else if (selectedObject.type == 'Object3D') {
    if (selectedObject.parent.name == 'Scene' && selectedObject.parent.type == 'Group' || selectedObject.parent.type == 'Scene') {
      return selectedObject
    } else {
      return BoxHelper(selectedObject.parent)
    }
  } else if (selectedObject.type == 'Group') {
    if (selectedObject.userData.type == 'Camera' || selectedObject.userData.type == 'Camera1' || selectedObject.userData.type == 'DevicePoint' || selectedObject.userData.type == 'UV') {
      return selectedObject
    } else if (selectedObject.parent.name == 'Scene' && selectedObject.parent.type == 'Group' || selectedObject.parent.type == 'Scene') {
      return selectedObject
    } else {
      return BoxHelper(selectedObject.parent)
    }
  }
}
function BoxHelpers(selectedObject) {
  if (selectedObject.type == 'Mesh') {
    if (selectedObject.parent.name == 'Scene' && selectedObject.parent.type == 'Group' || selectedObject.parent.type == 'Scene') {
      return selectedObject
    }
    return BoxHelpers(selectedObject.parent)
  } else if (selectedObject.type == 'Group') {
    if (selectedObject.userData.type == 'Camera' || selectedObject.userData.type == 'Camera1' || selectedObject.userData.type == 'DevicePoint' || selectedObject.userData.type == 'UV') {
      return selectedObject
    } else if (selectedObject.parent.name == 'Scene' && selectedObject.parent.type == 'Group' || selectedObject.parent.type == 'Scene') {
      return selectedObject
    } else {
      return selectedObject
    }
  }
}
// 右击模型事件
function portDBClick(event) {
  if (selType.value == '03') return
  if (transformControls != null) {
    return
  }
  isTranslateRotate.value = false
  // 建立射线
  const layerX = event.x
  const layerY = event.y - 70
  // 建立射线
  const vector = new THREE.Vector3()
  vector.set((event.layerX / clientWidth.value) * 2 - 1, -(event.layerY / clientHeight.value) * 2 + 1)
  const raycaster = new THREE.Raycaster()
  // // 建立一个空物体
  raycaster.setFromCamera(vector, activeCamera)
  raycaster.params.Line.threshold = 0.01
  const intersections = raycaster.intersectObjects(scene.children)
  let selectedObject = null
  if (intersections.length > 0) {
    for (var i = 0; i < intersections.length; i++) {
      // 遍历线相交模型
      if (intersections[i].object.userData.type == 'PatrolLine') continue
      if (intersections[i].object instanceof THREE.Mesh) {
        if (intersections[i].object.name.indexOf('不动') != -1) {
          if (isLineUV.value == true) {
            selModel.value = intersections[i]
            selectedObject = intersections[i].object
          }
          break
        }
        selModel.value = intersections[i]
        selectedObject = intersections[i].object
        break
      }
    }
  }
  if (selectedObject) {
    let model = BoxHelper(selectedObject)
    if (selType.value == '05') {
      if (isClick.value == true) {
        model = BoxHelper(selectedObject)
      } else {
        model = BoxHelpers(selectedObject)
      }
    }
    dataSel.value = model
    if (model.userData.type == 'Camera' || model.userData.type == 'Camera1' || model.userData.type == 'UV') {
      model.userData.objinfo == undefined || model.userData.objinfo == null ? isVideo.value = false : isVideo.value = true
    }
    model.userData.type == 'Camera' || model.userData.type == 'Camera1' || model.userData.type == 'DevicePoint' || model.userData.type == 'UV' || model.userData.type == 'UAV' ? isCameraMenu.value = true : isCameraMenu.value = false
    model.userData.objinfo != null && model.userData.objinfo != undefined && model.userData.type != 'EquipmentComponentSettings' ? isInfo.value = true : isInfo.value = false
    model.userData.type == 'EquipmentComponentSettings' ? isdevice.value = false : isdevice.value = true

    if (isLineUV.value == true) {
      let ismenu = false
      const contextmenu = document.getElementById('contextmenu')
      const contextimg = document.getElementById('contextimg')
      contextmenu.style.display = 'none'
      contextimg.style.display = 'none'
      if (model.userData.type == 'UV' || model.userData.type == 'UAV') {
        scene.children.forEach(element => {
          if (element.type == 'BoxHelper') element.userData.uuid == model.uuid ? ismenu = true : ismenu = false
        })
      } else if (model.name.indexOf('不动') != -1) {
        ismenu = true
        scene.children.forEach(element => {
          if (element.type == 'BoxHelper') {
            element.userData.uuid == model.uuid ? ismenu = true : ismenu = false
          }
        })
      }
      if (ismenu) {
        const contextmenu = document.getElementById('contextmenu')
        const contextimg = document.getElementById('contextimg')
        contextmenu.style.display = 'block'
        contextimg.style.display = 'block'
        if (layerY + 200 > window.innerHeight) {
          contextmenu.style.top = Number(window.innerHeight - contextmenu.offsetHeight - 70) + 'px'
        } else {
          contextmenu.style.top = layerY - 70 + 'px'
        }
        if (layerX + 180 > window.innerWidth) {
          contextmenu.style.left = window.innerWidth - 250 + 'px'
        } else {
          contextmenu.style.left = layerX + 20 + 'px'
        }
        contextimg.style.left = layerX - 20 + 'px'
        contextimg.style.top = layerY - 40 + 'px'
      }
      return
    }
    scene.children.forEach(element => {
      if (element.type == 'BoxHelper') {
        if (element.userData.uuid == model.uuid) {
          const contextmenu = document.getElementById('contextmenu')
          const contextimg = document.getElementById('contextimg')
          contextmenu.style.display = 'block'
          contextimg.style.display = 'block'
          if (layerY + 200 > window.innerHeight) {
            contextmenu.style.top = Number(window.innerHeight - contextmenu.offsetHeight - 70) + 'px'
          } else {
            contextmenu.style.top = layerY - 70 + 'px'
          }
          if (layerX + 180 > window.innerWidth) {
            contextmenu.style.left = window.innerWidth - 250 + 'px'
          } else {
            contextmenu.style.left = layerX + 20 + 'px'
          }
          contextmenu.style.display = 'block'
          contextimg.style.display = 'block'
          contextimg.style.left = layerX - 20 + 'px'
          contextimg.style.top = layerY - 40 + 'px'
        } else {
          const contextmenu = document.getElementById('contextmenu')
          const contextimg = document.getElementById('contextimg')
          contextmenu.style.display = 'none'
          contextimg.style.display = 'none'
        }
      }
    })
  }

}
function clear() {
  if (!content) return
  scene.remove(content)
  content.traverse((node) => {
    if (!node.isMesh) return
    node.geometry.dispose()

  })
  traverseMaterials(content, (material) => {
    MAP_NAMES.forEach((map) => {
      if (material[map]) material[map].dispose()
    })
  })
}
function removeObj(obj) {
  let arr = obj.children.filter(x => x)
  arr.forEach(item => {
    if (item.children.length) {
      removeObj(item)
    } else {
      item.clear()
    }
  })
  obj.clear()
  arr = null
}
function traverseMaterials(object, callback) {
  object.traverse((node) => {
    if (!node.isMesh) return
    const materials = Array.isArray(node.material)
      ? node.material
      : [node.material]
    materials.forEach(callback)
  })
}

// 监听尺寸变化
function resize() {
  // 重置渲染器输出画布canvas尺寸
  clientWidth.value = draw.value.clientWidth
  clientHeight.value = window.innerHeight - 70
  const k = draw.value.clientWidth / (window.innerHeight - 70) // 窗口宽高比
  defaultCamera.aspect = k
  defaultCamera.updateProjectionMatrix()
  renderer.setSize(draw.value.clientWidth, window.innerHeight - 70)
}
function handleMouseWheel(event) {
  if (event.target.localName == 'canvas') {
    // 设置相机缩放比数值越大缩放越明显
    const factor = 2
    // 从鼠标位置转化为webgl屏幕坐标位置
    const glScreenX = (event.clientX / controls.domElement.width) * 2 - 1
    const glScreenY = -(event.clientY / controls.domElement.height) * 2 + 1
    const vector = new THREE.Vector3(glScreenX, glScreenY, 0)
    // 从屏幕向量转为3d空间向量
    vector.unproject(controls.object)
    // 相机偏移量
    vector.sub(controls.object.position).setLength(factor)
    if (event.deltaY < 0) {
      controls.object.position.add(vector)
      controls.target.add(vector)
    } else {
      controls.object.position.sub(vector)
      controls.target.sub(vector)
    }
    controls.update()
  }
}









const dataJson = ref() // Json数据
const dataIndex = ref() // 列表选中
const dataSel = ref() // 列表选中数据
const selType = ref('01') // 选中类型
const isCamera = ref(true) // 是否显示摄像机
const isPatrolLine = ref(true) // 是否显示路线
const isUV = ref(true) // 是否显示无人车
const isLineUV = ref(false) // 路面绘制无人车
const isRightList = ref(true) // 是否显示右侧列表
const data = ref([]) // 右侧列表数据
const isCameraMenu = ref(false) // 右键是否显示删除摄像机
const isInfo = ref(false) // 是否显示信息
const isdevice = ref(true) // 是否是设备

const isUAV = ref(true) // 是否显示无人机

const isUAVLine = ref(true) // 是否显示wurj路线

const isDevicePoint = ref(true)// 是否显示巡视点
const Explicit = ref(false) // 弹框显示
const ExplicitTitle = ref() // 弹框标题
const ExplicitAll = ref(false) // 是否全部删除

const search = ref('') // 右侧搜索框
const searchdata = ref([])
const isOnLine = ref('01') // 右侧摄像头显示 在线/离线

const translateRotate = ref() // 是否是移动 01 / 旋转02
const isTranslateRotate = ref(false) // 是否显示操作

const association = ref(false) // 关联弹框
const associationTitle = ref() // 关联弹框

let drawline = ref([])
const isdrop = ref(false) // 是否画线
const isdropLine = ref(false)
const isWithdraw = ref(true) // 撤回
const onjId = ref() //点击关联图标，保存摄像头名字进行判断
const objRow = ref({}) //获取详细信息
const information = ref(false) // 详细信息弹框
const deviceName = ref()
const associationLine = ref(false) // 无人车关联弹框
const associationLineData = ref([]) // 无人车关联弹框数据
const associationLineDataSel = ref([])

const defaultProps = ref({
  children: 'children',
  label: 'objname',
})
const disassociationDia = ref(false) //无人车关联路线 取消弹框

const isVideo = ref(false)
const treeRef = ref()
const treeId = ref()
const multipleTable = ref() // 关联路线表格
const filterText = ref('') //无人车搜索
watch(filterText, (val) => {
  treeRef.value.filter(val)
})
function filterNode(value, data) {
  if (!value) return true
  if (data.objname == null) {
    return data.name.indexOf(value) !== -1;
  } else {
    return data.objname.indexOf(value) !== -1;
  }
}

// 加载JSON数据
function initData() {
  const params = {
    stationId: userStore.stationId
  }
  getSubstationById(params).then((item) => {
    if (item.code == 0) {
      if (item.data.custom2) {
        dataJson.value = JSON.parse(item.data.custom2)
        if (dataJson.value.Camera != '') {
          let is = false
          if (selType.value == '01') {
            data.value = dataJson.value.Camera
            let id = []
            data.value.forEach(element => {
              if (element.objinfo) {
                id.push(element.objinfo.patroldeviceId)
              }
              element.start = false
            })
            searchdata.value = JSON.parse(JSON.stringify(data.value))
            const params = {
              patrolDeviceId: String(id)
            }
            getPatrolDeviceStatus(params).then((result) => {
              data.value.forEach(element => {
                if (element.objinfo) {
                  for (let i = 0; i < result.data.length; i++) {
                    if (result.data[i].patroldeviceId == element.objinfo.patroldeviceId) {
                      element.objinfo.online = result.data[i].online
                    }
                  }
                }
              })
              searchdata.value = JSON.parse(JSON.stringify(data.value))
            }).catch((err) => {

            })
            is = true
          }
          loadModel('Camera', dataJson.value.Camera, is)
        }
        if (dataJson.value.DevicePoint != '') {
          let is = false
          if (selType.value == '02') {
            data.value = dataJson.value.DevicePoint
            searchdata.value = JSON.parse(JSON.stringify(data.value))
            is = true
          }
          loadModel('DevicePoint', dataJson.value.DevicePoint, is)
        }
        if (dataJson.value.PatrolLine != '') {
          let is = false
          if (selType.value == '03') {
            data.value = dataJson.value.PatrolLine
            searchdata.value = JSON.parse(JSON.stringify(data.value))
            for (let i = 0; i < searchdata.value.length; i++) {
              if (data.value[i].linePonit) data.value[i].children = JSON.parse(data.value[i].linePonit)
              if (searchdata.value[i].linePonit) searchdata.value[i].children = JSON.parse(searchdata.value[i].linePonit)
            }
            is = true
          }
          loadModelLine(dataJson.value.PatrolLine, is)
        }
        if (dataJson.value.UV != '') {
          let is = false
          if (selType.value == '04') {
            data.value = dataJson.value.UV
            searchdata.value = JSON.parse(JSON.stringify(data.value))
            for (let i = 0; i < searchdata.value.length; i++) {
              if (data.value[i].line) data.value[i].children = JSON.parse(data.value[i].line)
              if (searchdata.value[i].line) searchdata.value[i].children = JSON.parse(searchdata.value[i].line)
              if (searchdata.value[i].children) {

                for (let a = 0; a < searchdata.value[i].children.length; a++) {
                  let model = scene.getObjectByProperty('uuid', searchdata.value[i].children[a].id)
                  if (model.userData.linePonit == null || model.userData.linePonit == '[]') {
                    searchdata.value[i].children[a].task = false
                  } else {
                    searchdata.value[i].children[a].linePonit = model.userData.linePonit
                    searchdata.value[i].children[a].task = true
                  }
                }
              }
            }
            is = true
          }
          loadModel('UV', dataJson.value.UV, is)
        }
        if (dataJson.value.EquipmentComponentSettings != '') {
          if (selType.value == '05') {
            data.value = dataJson.value.EquipmentComponentSettings
            searchdata.value = JSON.parse(JSON.stringify(data.value))
          }
          scene.children[1].traverse(function (obj) {
            dataJson.value.EquipmentComponentSettings.forEach(element => {
              if (obj.userData.name == element.equipmentname) {
                obj.name = element.name
                obj.userData.type = 'EquipmentComponentSettings'
                obj.uuid = element.id
                obj.userData.objinfo = element.objinfo
              }
            })
          })
        }
        if (dataJson.value.UAV != '') {
          let is = false
          if (selType.value == '06') {
            data.value = dataJson.value.UAV
            searchdata.value = JSON.parse(JSON.stringify(data.value))
            is = true
          }
          loadModel('UAV', dataJson.value.UAV, is)
        }
        if (dataJson.value.UAVLine != '') {
          let is = false
          if (selType.value == '07') {
            data.value = dataJson.value.UAVLine
            searchdata.value = JSON.parse(JSON.stringify(data.value))
            for (let i = 0; i < searchdata.value.length; i++) {
              if (data.value[i].linePonit) data.value[i].children = JSON.parse(data.value[i].linePonit)
              if (searchdata.value[i].linePonit) searchdata.value[i].children = JSON.parse(searchdata.value[i].linePonit)
              if (searchdata.value[i].linePonit == null || searchdata.value[i].linePonit == '[]') {
                searchdata.value[i].task = false
              } else {
                searchdata.value[i].task = true
              }
            }
            is = true
          }
          loadModelLines(dataJson.value.UAVLine, is)
        }
      }
    }
  })
}
const backups = ref([])
function rightTabClik(str) {
  isOnLine.value = str
  if (str == '02') {
    searchdata.value = data.value.filter(item => item.objinfo != undefined && item.objinfo.channelList != undefined && item.objinfo.online == 1)
    backups.value = data.value.filter(item => item.objinfo != undefined && item.objinfo.channelList != undefined && item.objinfo.online == 1)
  } else if (str == '03') {
    searchdata.value = data.value.filter(item => item.objinfo == undefined || item.objinfo.online != 1)
    backups.value = data.value.filter(item => item.objinfo == undefined || item.objinfo.online != 1)
  } else {
    searchdata.value = data.value
  }
}

function searchNmae() {
  if (selType.value == '03' || selType.value == '05') {
    searchdata.value = data.value.filter(item => item.name.indexOf(search.value) !== -1)
  } else {
    if (selType.value == '01') {
      if (isOnLine.value == '02' || isOnLine.value == '03') {
        searchdata.value = backups.value.filter(item => item.objname.indexOf(search.value) !== -1)
      } else {
        searchdata.value = data.value.filter(item => item.objname.indexOf(search.value) !== -1)
      }

    } else {
      searchdata.value = data.value.filter(item => item.objname.indexOf(search.value) !== -1)
    }
    // searchdata.value = data.value.filter(item => item.objname.indexOf(search.value) !== -1)
  }
}
// 关联巡视路线搜索
function searchNmaeLine() {
  if (dataJson.value.PatrolLine != null) {
    associationLineData.value = dataJson.value.PatrolLine.filter(item => item.name.indexOf(patrolDeviceName.value) !== -1)
  }
}

// 模型操作
function initTransFormControls(str) {
  if (transformControls) {
    transformControls.detach()
    controls.enabled = true
    scene.remove(transformControls)
    transformControls = null
  }
  // 初始化 模型操作
  transformControls = new TransformControls(defaultCamera, renderer.domElement)
  transformControls.addEventListener('dragging-changed', (event) => {
    controls.enabled = !event.value
  })
  scene.add(transformControls)
  if (str == '01') {
    transformControls.attach(BoxHelper(dataSel.value)) // 物体移动
    transformControls.setMode('translate') // 拖动
  }
  if (str == '02') {
    transformControls.attach(BoxHelper(dataSel.value)) // 物体移动
    transformControls.setMode('rotate') // 旋转
  }
  // controls.enabled = false
  translateRotate.value = str
}
// 模型操作 确定
function DeleteTransFormControls() {
  if (translateRotate.value == '03') {
    dataSel.value.userData.x1 = defaultCamera.position.x
    dataSel.value.userData.y1 = defaultCamera.position.y
    dataSel.value.userData.z1 = defaultCamera.position.z
  }
  if (transformControls) {
    translateRotate.value = ''
    transformControls.detach()
    controls.enabled = true
    scene.remove(transformControls)
    transformControls = null
  }
  save()
}
// 右键添加模型
function adddrop(index) {
  if (isCameraMenu.value == true) return
  for (let i = 0; i < scene.children.length; i++) {
    if (scene.children[i].type == 'BoxHelper') {
      scene.children[i].traverse(function (obj) {
        if (obj.type === 'Mesh') {
          obj.geometry.dispose()
          obj.material.dispose()
        }
      })
      scene.remove(scene.children[i])
      i--
    }
  }
  let modelMame = ''
  let name = ''
  controls.enabled = true
  const manager = new THREE.LoadingManager()
  manager.setURLModifier((url, path) => {
    return (path || '') + url
  })
  const dracoLoader = new DRACOLoader()
  let gltfLoader = new GLTFLoader() //obj加载器
  if (selType.value == '01') {
    if (index == 1) {
      modelMame = 'Camera'
    } else {
      modelMame = 'Camera1'
    }
    name = '摄像头'
  } else if (selType.value == '02') {
    modelMame = 'DevicePoint'
    name = '点位'
  } else if (selType.value == '04') {
    modelMame = 'UV'
    name = '无人车'
  } else if (selType.value == '06') {
    modelMame = 'UAV'
    name = '无人机'
    gltfLoader = new GLTFLoader(manager) //obj加载器
    dracoLoader.setDecoderPath('./static/js/')
    dracoLoader.setDecoderConfig({ type: 'js' })
    gltfLoader.setDRACOLoader(dracoLoader)
  }

  gltfLoader.load('./static/3DModel/' + modelMame + '.glb', (gltf1) => {
    let model = gltf1.scene
    let x = selModel.value.point.x
    let y = selModel.value.point.y
    let z = selModel.value.point.z
    let posX = x
    let posY = y
    let posZ = z
    if (selType.value == '06') {
      y = y + 4
      posY = y
    }
    if (selType.value == '01') {
      if (modelMame == 'Camera') {
        if (selModel.value.face.normal.z > 0) {
          z = z + 0.2
          posZ = z + 5
          model.rotateY(THREE.MathUtils.degToRad(180))
        } else if (selModel.value.face.normal.z < 0) {
          z = z - 0.2
          posZ = z - 5
          model.rotateY(THREE.MathUtils.degToRad(0))
        }
        if (selModel.value.face.normal.x > 0) {
          x = x + 0.2
          posX = posX + 4
          model.rotateY(THREE.MathUtils.degToRad(-90))
        } else if (selModel.value.face.normal.x < 0) {
          x = x - 0.2
          posX = posX - 4
          model.rotateY(THREE.MathUtils.degToRad(90))
        }
        if (selModel.value.face.normal.x > 0 && selModel.value.face.normal.z < 0) {
          z = z + 0.2
          posZ = z + 0.05
        }
        if (selModel.value.face.normal.x > 0 && selModel.value.face.normal.z > 0) {
          z = z - 0.2
          posZ = z - 0.05
        }
        if (selModel.value.face.normal.x < 0 && selModel.value.face.normal.z < 0) {
          z = z + 0.2
          posZ = z + 0.05
        }
        if (selModel.value.face.normal.x < 0 && selModel.value.face.normal.z > 0) {
          z = z - 0.2
          posZ = z - 0.05
        }
        if (selModel.value.face.normal.x == 0 && selModel.value.face.normal.z == 0) {
          posX = posX + 3
          posY = posY + 3
          posZ = posZ + 3
        }
      }
      if (modelMame == 'Camera1') {
        if (selModel.value.face.normal.z > 0) {
          z = z + 0.3
          posZ = z + 5
        } else if (selModel.value.face.normal.z < 0) {
          z = z - 0.3
          posZ = z - 5
        }
        if (selModel.value.face.normal.x > 0) {
          x = x + 0.3
          posX = posX + 4
        } else if (selModel.value.face.normal.x < 0) {
          x = x - 0.3
          posX = posX - 4
        }
        if (selModel.value.face.normal.x > 0 && selModel.value.face.normal.z < 0) {
          z = z + 0.2
          posZ = z + 0.05
        }
        if (selModel.value.face.normal.x > 0 && selModel.value.face.normal.z > 0) {
          z = z - 0.2
          posZ = z - 0.05
        }
        if (selModel.value.face.normal.x < 0 && selModel.value.face.normal.z < 0) {
          z = z + 0.3
          posZ = z + 0.05
        }
        if (selModel.value.face.normal.x < 0 && selModel.value.face.normal.z > 0) {
          z = z - 0.3
          posZ = z - 0.05
        }
        if (selModel.value.face.normal.x == 0 && selModel.value.face.normal.z == 0) {
          posX = posX + 3
          posY = posY + 3
          posZ = posZ + 3
        }
      }
    } else if (selType.value == '02') {
      if (selModel.value.face.normal.z > 0) {
        z = z + 0.05
        posZ = z + 5
        model.rotateY(THREE.MathUtils.degToRad(180))
      } else if (selModel.value.face.normal.z < 0) {
        z = z - 0.05
        posZ = z - 5
        model.rotateY(THREE.MathUtils.degToRad(0))
      }
      if (selModel.value.face.normal.x > 0) {
        x = x + 0.05
        posX = posX + 4
        model.rotateY(THREE.MathUtils.degToRad(-90))
      } else if (selModel.value.face.normal.x < 0) {
        x = x - 0.05
        posX = posX - 4
        model.rotateY(THREE.MathUtils.degToRad(90))
      }
      if (selModel.value.face.normal.x > 0 && selModel.value.face.normal.z < 0) {
        z = z + 0.05
        posZ = z
      }
      if (selModel.value.face.normal.x > 0 && selModel.value.face.normal.z > 0) {
        z = z - 0.05
        posZ = z
      }
      if (selModel.value.face.normal.x < 0 && selModel.value.face.normal.z < 0) {
        z = z + 0.05
        posZ = z
      }
      if (selModel.value.face.normal.x < 0 && selModel.value.face.normal.z > 0) {
        z = z - 0.05
        posZ = z
      }
      if (selModel.value.face.normal.x == 0 && selModel.value.face.normal.z == 0) {
        posX = posX + 3
        posY = posY + 3
        posZ = posZ + 3
      }
    } else if (selType.value == '04' || selType.value == '06') {
      posX = posX + 4
      posY = posY + 4
    }
    model.position.set(x, y, z)
    model.name = name + Number(data.value.length + 1)
    model.userData.type = modelMame
    model.userData.x1 = posX + 0.2
    model.userData.y1 = posY
    model.userData.z1 = posZ
    // 显示在最上层

    if (modelMame == 'DevicePoint') {
      model.renderOrder = 99
      model.traverse(function (obj) {
        if (obj.type === 'Mesh') obj.material.depthTest = false
      })
    }
    model.userData.normal = {
      x: Number(selModel.value.face.normal.x),
      y: Number(selModel.value.face.normal.y),
      z: Number(selModel.value.face.normal.z),
    }
    let pos = new THREE.Vector3(posX + 0.2, posY, posZ)
    let pos2 = new THREE.Vector3(x, y, z)
    animateCamera(defaultCamera.position, pos, controls.target, pos2)
    const box = new THREE.BoxHelper(model, '#fff000')
    box.userData.uuid = model.uuid
    scene.add(box)
    data.value.push({
      id: model.uuid,
      objname: name + Number(data.value.length + 1),
      objid: '',
      objtype: '',
      coordinate: {
        x: x,
        y: y,
        z: z,
        x1: posX,
        y1: posY,
        z1: posZ,
      },
      playurl: '',
      rotation: {
        x: model.rotation.x,
        y: model.rotation.y,
        z: model.rotation.z
      },
      type: modelMame,
      start: false
    })
    searchdata.value.push(data.value[data.value.length - 1])
    dataSel.value = model
    nextTick(() => {
      if (selType.value == '04') {
        treeRef.value.setCurrentKey(model.uuid)
      } else {
        dataIndex.value = data.value.length - 1
      }
    })
    scene.add(model)
    // 显示操作
    isTranslateRotate.value = true

    const contextmenu = document.getElementById('contextmenu')
    contextmenu.style.display = 'none'
    const contextimg = document.getElementById('contextimg')
    contextimg.style.display = 'none'
  })
}
// 添加路线
function addLine() {
  if (isdrop.value == false) {
    reset()
    clearDiv()
    for (let i = 0; i < scene.children.length; i++) {
      if (scene.children[i].userData.type == 'PatrolLine') {
        scene.children[i].traverse(function (obj) {
          if (obj.type === 'Mesh') {
            obj.material.visible = false
          }
        })
      }
    }
    testmesh = ''
    drawline.value = []
    isdrop.value = true
    const box = new THREE.Box3().setFromObject(scene)
    const size = box.getSize(new THREE.Vector3()).length()
    defaultCamera.position.set(0, size, 0) // 正视
    defaultCamera.fov = 42
    defaultCamera.updateProjectionMatrix()
    controls.enableRotate = false //禁止旋转
    controls.enablePan = false //禁止平移
    controls.enableZoom = false //禁止缩放
    controls.update()
    isWithdraw.value = true
    testmesh = ''
    drawline.value = []
    isdropLine.value = false
    for (let i = 0; i < scene.children.length; i++) {
      if (scene.children[i].name == 'testmesh') {
        scene.remove(scene.children[i])
      }
    }
  } else {
    for (let i = 0; i < scene.children.length; i++) {
      if (scene.children[i].name == '添加路线点') {
        scene.children[i].traverse(function (obj) {
          if (obj.type === 'Mesh') {
            obj.geometry.dispose()
            obj.material.dispose()
          }
        })
        scene.remove(scene.children[i])
        i--
      }
    }
    testmesh = ''
    drawline.value = []
    isdrop.value = false
    isPatrolLine.value = false
    controls.enableRotate = true //禁止旋转
    controls.enablePan = true //禁止平移
    controls.enableZoom = true //禁止缩放
    controls.reset()
    defaultCamera.fov = defaultCamera.fov + 18
    defaultCamera.updateProjectionMatrix()
  }
}
// 点击开始/结束绘制
function initLine() {
  if (isdropLine.value == false) {
    isdropLine.value = true
    for (let i = 0; i < scene.children.length; i++) {
      if (scene.children[i].userData.type == 'PatrolLine') {
        scene.children[i].traverse(function (obj) {
          if (obj.type === 'Mesh') {
            obj.material.visible = false
          }
        })
      }
    }
    clearDiv()
  } else {
    for (let i = 0; i < scene.children.length; i++) {
      if (scene.children[i].name == '添加路线点') {
        scene.children[i].traverse(function (obj) {
          if (obj.type === 'Mesh') {
            obj.geometry.dispose()
            obj.material.dispose()
          }
        })
        scene.remove(scene.children[i])
        i--
      }
    }
    if (drawline.value.length > 1) {
      testmesh.name = '巡视路线' + Number(data.value.length + 1)
      let arr = []
      for (let i = 0; i < drawline.value.length; i++) {
        arr.push({ x: drawline.value[i].x, y: drawline.value[i].y, z: drawline.value[i].z })
      }
      testmesh.userData.point = JSON.stringify(arr)
      testmesh.userData.type = 'PatrolLine'
      data.value.push({
        id: testmesh.uuid,
        name: '巡视路线' + Number(data.value.length + 1),
        points: drawline.value
      })
    }
    isWithdraw.value = true
    testmesh = ''
    drawline.value = []
    isdropLine.value = false
    save()
  }
}
// 线撤回
function withdraw() {
  for (let i = 0; i < scene.children.length; i++) {
    if (scene.children[i].name == '添加路线点') {
      scene.children[i].traverse(function (obj) {
        if (obj.type === 'Mesh') {
          obj.geometry.dispose()
          obj.material.dispose()
        }
      })
      scene.remove(scene.children[i])
      i--
    }
  }
  // isWithdraw.value = true
  drawline.value.pop()
  if (drawline.value.length == 0) {
    isWithdraw.value = true
    for (let i = 0; i < scene.children.length; i++) {
      if (scene.children[i].name == 'testmesh') {
        scene.remove(scene.children[i])
      }
    }
    return
  }
  if (drawline.value.length >= 1) {
    var ponst = []
    for (let i = 0; i < drawline.value.length; i++) {
      let gltfLoader = new OBJLoader() //obj加载器
      // 引入默认纹理
      gltfLoader.load('./static/3DModel/XiaoSanJiao.obj', (gltf1) => {
        let model = gltf1
        model.position.set(drawline.value[i].x + 0.2, drawline.value[i].y, drawline.value[i].z)
        model.name = '添加路线点'
        model.scale.set(3, 3, 3)
        scene.add(model)
      })
      ponst.push(new THREE.Vector3(drawline.value[i].x, drawline.value[i].y + 0.05, drawline.value[i].z))
    }

    let curve = new THREE.CatmullRomCurve3(ponst, false)
    var up = new THREE.Vector3(0, 1, 0)
    // 创建路线点列表
    var pathPointLists = new PathPointList()
    pathPointLists.set(curve.points, 0.5, 10, up, false)
    var geometry = new PathGeometry()
    geometry.update(pathPointLists, {
      width: 1,
      arrow: false
    })
    textures = new THREE.TextureLoader().load(jt, function (texture) {
      texture.wrapS = texture.wrapT = THREE.RepeatWrapping
      texture.anisotropy = renderer.capabilities.getMaxAnisotropy()
    })

    // 创建材质
    var material = new THREE.MeshPhongMaterial({
      color: 0xFFFFFF,
      depthWrite: true,
      transparent: true,
      opacity: 1,
      side: THREE.DoubleSide,
      map: textures,
    })
    testmesh = new THREE.Mesh(geometry, material)
    testmesh.name = 'testmesh'
    for (let i = 0; i < scene.children.length; i++) {
      if (scene.children[i].name == 'testmesh') {
        scene.remove(scene.children[i])
      }
    }
    scene.add(testmesh)
  }
}
// 右键删除
function deldrop() {
  if (isCameraMenu.value == false) return
  Explicit.value = true
  let name = ''
  if (selType.value == '01') {
    name = '确定删除此摄像机吗？'
  } else if (selType.value == '02') {
    name = '确定删除此巡视点位吗？'
  } else if (selType.value == '04') {
    name = '确定删除此无人车吗？'
  } else if (selType.value == '06') {
    name = '确定删除此无人机吗？'
  }

  ExplicitAll.value = false
  ExplicitTitle.value = name
  dataSel.value = scene.getObjectByProperty('uuid', BoxHelper(selModel.value.object).uuid)
  const contextmenu = document.getElementById('contextmenu')
  contextmenu.style.display = 'none'
  const contextimg = document.getElementById('contextimg')
  contextimg.style.display = 'none'
}
//右键关联
function associatedCamera(row) {
  if (row == '关联设备') {
    if (isdevice.value == false) return
    mainDeviceName.value = ''
    associationTitle.value = row
    getmainDevicePage()
  } else if (row == '关联部件') {
    if (isdevice.value == false) return
    componentName.value = ''
    associationTitle.value = row
    getComponentPage()
  } else if (row == '01') {
    if (isCameraMenu.value == false) return
    taskName.value = ''
    associationTitle.value = '关联摄像机'
    getData()
  } else if (row == '02') {
    if (isCameraMenu.value == false) return
    deviceName.value = ''
    associationTitle.value = '关联巡视点位'
    getDevice()
  } else if (row == '04') {
    if (isCameraMenu.value == false) return
    patrolDeviceName.value = ''
    associationTitle.value = '关联无人车'
    getRobot()
  } else if (row == '06') {
    if (isCameraMenu.value == false) return
    deviceName.value = ''
    associationTitle.value = '关联无人机'
    getUAV()
  }
  onjId.value = dataSel.value.uuid
  association.value = true
  const contextmenu = document.getElementById('contextmenu')
  contextmenu.style.display = 'none'
  const contextimg = document.getElementById('contextimg')
  contextimg.style.display = 'none'
}
//右键详细信息
function CameraInformation(e) {
  if (isInfo.value == true || isdevice.value == false) {
    information.value = true
    objRow.value = dataSel.value
    nextTick(() => {
      const detailedInformation = document.getElementById('detailed-information')
      detailedInformation.style.left = e.layerX - 60 + 'px'
      detailedInformation.style.top = e.layerY - 40 + 'px'
    })
    const contextmenu = document.getElementById('contextmenu')
    contextmenu.style.display = 'none'
    const contextimg = document.getElementById('contextimg')
    contextimg.style.display = 'none'
  }

}
// 右侧点击 关联路线
function associationLineTreeClick(data) {
  associationLine.value = true
  dataSel.value = scene.getObjectByProperty('uuid', data.id)
  if (dataJson.value.PatrolLine != null) {
    let arr = JSON.parse(JSON.stringify(dataJson.value.PatrolLine))
    for (let i = 0; i < arr.length; i++) {
      delete arr[i].children
    }
    associationLineData.value = arr
  }
  nextTick(() => {
    for (let i = 0; i < associationLineData.value.length; i++) {
      if (dataSel.value.userData.line) {
        for (let a = 0; a < dataSel.value.userData.line.length; a++) {
          if (associationLineData.value[i].id == dataSel.value.userData.line[a].id) {
            multipleTable.value.toggleRowSelection(associationLineData.value[i], true)
          }
        }
      }
    }
  })
}
// 无人车关联路线 - 弹框
function associationLineClick() {
  if (isCameraMenu.value == false) return
  associationLine.value = true
  dataSel.value = scene.getObjectByProperty('uuid', BoxHelper(selModel.value.object).uuid)
  if (dataJson.value.PatrolLine != null) associationLineData.value = dataJson.value.PatrolLine
  nextTick(() => {
    for (let i = 0; i < associationLineData.value.length; i++) {
      if (dataSel.value.userData.line) {
        for (let a = 0; a < dataSel.value.userData.line.length; a++) {
          if (associationLineData.value[i].id == dataSel.value.userData.line[a].id) {
            multipleTable.value.toggleRowSelection(associationLineData.value[i], true)
          }
        }
      }
    }
  })
  const contextmenu = document.getElementById('contextmenu')
  contextmenu.style.display = 'none'
  const contextimg = document.getElementById('contextimg')
  contextimg.style.display = 'none'
}
// 无人车弹框选择路线
function associationTableChange(e) {
  associationLineDataSel.value = e
}
// 无人车关联路线弹框
function associationLineConfirm() {
  if (associationLineDataSel.value.length == 0) {
    ElMessage({
      message: '请选择巡视路线',
      type: 'warning',
    })
    return
  }
  let data = []
  associationLineDataSel.value.forEach(element => {
    data.push({ id: element.id, name: element.name, points: element.points })
  })
  dataSel.value.userData.line = data
  associationLine.value = false
  save()
}

//选择点位，创建巡视任务
const info = ref({
  type: '4',
  taskCode: '',
  taskName: '',
  taskType: '',
  taskTodoType: '',
  fixedStartTime: '',
  cronValue: '',
  invalidStartTime: '',
  invalidEndTime: '',
  custom1: '',
  priority: '',
})

// cron表达式所传参数
const cronValue = ref({
  cycleMonth: '',
  cycleWeek: '',
  cycleExecuteTime: '',
  intervalNumber: '',
  intervalType: '',
  intervalExecuteTime: '',
  intervalStartTime: '',
  intervalEndTime: ''
})
const stationlist = ref({
  stationCode: userStore.stationCode,
  stationName: userStore.stationName,
})

const infoForm = ref()
const explicitImplicit = ref(false)
const TaskType = ref([])
// 优先级
const priority = ref([])

//表单校验
const rules = ref({
  taskCode: [
    { required: true, message: '请输入任务编码', trigger: 'blur' },
  ],
  taskName: [
    { required: true, message: '请输入任务名称', trigger: 'blur' },
  ],
})
//执行方式
const ExecutionMethod = [
  {
    value: '1',
    label: '立即执行',
  },
  {
    value: '2',
    label: '定时执行',
  },
  {
    value: '3',
    label: '周期执行',
  },
]
var newArr = []
var taskInfo = null
// 创建任务
function createTask(row, node) {
  getarrType()
  explicitImplicit.value = true
  info.value = {
    type: '4',
    taskCode: '',
    taskName: '',
    taskType: '',
    taskTodoType: '',
    fixedStartTime: '',
    cronValue: '',
    invalidStartTime: '',
    invalidEndTime: '',
    custom1: '',
    priority: '',
  }
  let id = []
  if (selType.value == '04') {
    for (let i = 0; i < row.linePonit.length; i++) {
      id.push(row.linePonit[i].deviceId)
    }
  } else if (selType.value == '07') {
    let linePonit = JSON.parse(row.linePonit)
    for (let i = 0; i < linePonit.length; i++) {
      id.push(linePonit[i].deviceId)
    }
  }
  newArr = id
  taskInfo = row
}
function getarrType() {
  const params = {
    dictcode: 'TaskType'
  }
  getDeviceByType(params).then((res) => {
    res.data.forEach((res) => {
      if (res.itemcode == 1 || res.itemcode == 3) {
        TaskType.value.push(res)
      }
    });
    // TaskType.value = Array.from(new Set(TaskTypeOne.value))
    for (var i = 0; i < TaskType.value.length - 1; i++) {
      for (var j = i + 1; j < TaskType.value.length; j++) {
        if (TaskType.value[i].id == TaskType.value[j].id) {
          TaskType.value.splice(j, 1);
          j--;
        }
      }
    }

  })

  const paramstype = {
    dictcode: 'TaskPriority'
  }
  getDeviceByType(paramstype).then((res) => {
    priority.value = res.data
  })
}
const cronExpressions = ref(false)
// cron表达式-弹窗
const cycleTime = ref(false)
const index = ref()
//时间周期 - 弹窗
function cycleCron() {
  cronExpressions.value = true
  index.value = 1
  nextTick(() => {

    Echo()
  })
}
//时间周期表达式-单选
//秒
const second = ref()
//分
const divide = ref()
//时
const time = ref()
//日
const sun = ref()
//月
const moon = ref()
//周
const week = ref()
//时间周期-周期-时
const periodtime = ref({
  periodInput3: '0',
  periodInput4: '2'
})
//时间周期-周期-日
const periodsun = ref({
  periodInput3: '1',
  periodInput4: '1',
})
////时间周期-指定-秒
const checkListsecond = ref([])
const appointsecond = ref(['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23',
  '24', '25', '26', '27', '28', '29', '30', '31', '32', '33', '34', '35', '36', '37', '38', '39', '40', '41', '42', '43', '44', '45', '46', '47', '48', '49', '50',
  '51', '52', '53', '54', '55', '56', '57', '58', '59'])
////时间周期-指定-分
const checkListdivide = ref([])
const appointdivide = ref(['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23',
  '24', '25', '26', '27', '28', '29', '30', '31', '32', '33', '34', '35', '36', '37', '38', '39', '40', '41', '42', '43', '44', '45', '46', '47', '48', '49', '50',
  '51', '52', '53', '54', '55', '56', '57', '58', '59'])
////时间周期-指定-时
const checkListtime = ref([])
const appointtime1 = ref(['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11'])
const appointtime2 = ref(['12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23',])
////时间周期-指定-月
const checkListmoon = ref([])
const appointmoon = ref(['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12',])
////时间周期-指定-周
const checkListweek = ref([])
const appointweek = ref(['日', '一', '二', '三', '四', '五', '六'])
//多选 - 秒
function ahangesecond() {
  rediosecond(4)
}
//表达式字段
const field = ref({
  fieldsecond: '*',
  fielddivide: '*',
  fieldtime: '*',
  fieldsun: '?',
  fieldmoon: '*',
  fieldweek: '?',
  fieldyear: '',
})
//表达式
const resentation = ref('***?*?')
//时间周期
//秒
const secondarr = ref([])
function rediosecond(val) {
  second.value = val
  if (val == 4) {
    const arraysecond = ref([])
    if (checkListsecond.value.length == 2) {
      checkListsecond.value.shift()
    }
    secondarr.value = JSON.parse(JSON.stringify(checkListsecond.value))
    secondarr.value.forEach((item) => {
      arraysecond.value.push(parseInt(item))
    })
    if (arraysecond.value.toString()) {
      field.value.fieldsecond = arraysecond.value.toString()
    }

  }

}
//分
const dividearr = ref([])
function rediodivide(val) {
  divide.value = val
  if (val == 4) {

    const arraysecond = ref([])
    // if (checkListdivide.value.length == 2) {
    //   checkListdivide.value.shift()
    // }
    dividearr.value = JSON.parse(JSON.stringify(checkListdivide.value))
    dividearr.value.forEach((item) => {
      arraysecond.value.push(parseInt(item))
    })
    if (arraysecond.value.toString()) {
      field.value.fielddivide = arraysecond.value.toString()
    }
  }
}
//时
const timearr = ref([])
function rediodtime(val) {
  time.value = val
  if (val == 3) {
    field.value.fieldtime = periodtime.value.periodInput3 + '/' + periodtime.value.periodInput4
    checkListtime.value = []
  } else if (val == 4) {

    const arraysecond = ref([])
    if (checkListtime.value.length == 2) {
      checkListtime.value.shift()
    }
    timearr.value = JSON.parse(JSON.stringify(checkListtime.value))
    timearr.value.forEach((item) => {
      arraysecond.value.push(parseInt(item))
    })
    if (arraysecond.value.toString()) {
      field.value.fieldtime = arraysecond.value.toString()
    }
  }
}
//日
function rediodsun(val) {
  sun.value = val
  if (val == 2) {
    field.value.fieldsun = '?'
  } else if (val == 4) {
    field.value.fieldsun = periodsun.value.periodInput3 + '/' + periodsun.value.periodInput4
  }
}
//月
function rediodmoon(val) {
  moon.value = val
  if (val == 1) {
    field.value.fieldmoon = '*'
    checkListmoon.value = []
  } else if (val == 4) {
    const secondarr = ref([])
    const arraysecond = ref([])
    secondarr.value = JSON.parse(JSON.stringify(checkListmoon.value))
    secondarr.value.forEach((item) => {
      arraysecond.value.push(parseInt(item))
    })
    if (arraysecond.value.toString()) {
      field.value.fieldmoon = arraysecond.value.toString()
    }
  }
}
//周
function rediodweek(val) {
  week.value = val
  if (val == 2) {
    field.value.fieldweek = '?'
    checkListweek.value = []
  } else if (val == 6) {
    const secondarr = ref([])
    const arraysecond = ref([])
    secondarr.value = JSON.parse(JSON.stringify(checkListweek.value))
    secondarr.value.forEach((res, index) => {
      if (res == '日') {
        secondarr.value[index] = 1
      } else if (res == '一') {
        secondarr.value[index] = 2
      } else if (res == '二') {
        secondarr.value[index] = 3
      } else if (res == '三') {
        secondarr.value[index] = 4
      } else if (res == '四') {
        secondarr.value[index] = 5
      } else if (res == '五') {
        secondarr.value[index] = 6
      } else if (res == '六') {
        secondarr.value[index] = 7
      }
    })
    secondarr.value.forEach((item) => {
      arraysecond.value.push(parseInt(item))
    })
    if (arraysecond.value.toString()) {
      field.value.fieldweek = arraysecond.value.toString()
    } else {
      field.value.fieldweek = '*'
    }
  }
}
//拼接表达式字段
function montage() {
  resentation.value = field.value.fieldsecond + ' ' + field.value.fielddivide + ' ' + field.value.fieldtime + ' ' + field.value.fieldsun + ' ' + field.value.fieldmoon + ' ' + field.value.fieldweek + ' ' + field.value.fieldyear
}

const timeData = ref([])
const allDataID = ref([])

// 创建巡视任务 - 确定
function taskConfirmClick(formEl) {
  formEl.validate((valid) => {
    if (valid) {
      allDataID.value = [...new Set(newArr)];
      if (info.value.fixedStartTime) {
        info.value.fixedStartTime = dateFormat(info.value.fixedStartTime)
      }

      if (timeData.value.length == 2) {
        info.value.invalidStartTime = dateFormat(timeData.value[0])
        info.value.invalidEndTime = dateFormat(timeData.value[1])
      }
      info.value['deviceList'] = allDataID.value.toString()
      info.value['deviceLevel'] = 3
      if (selType.value == '04') {
        info.value['taskLineid'] = taskInfo.id
        info.value['taskClass'] = 2
      } else if (selType.value == '07') {
        info.value['taskLineid'] = taskInfo.id
        info.value['taskClass'] = 3
      }
      if (info.value.lastmodifydate) {
        info.value.lastmodifydate = ''
      }
      const params = Object.assign({}, info.value, cronValue.value)

      const paramsall = Object.assign({}, params, stationlist.value)
      addTask(paramsall).then((res) => {
        if (res.code != '1') {
          ElMessage({
            type: 'success',
            message: '添加成功',
          })
          allDataID.value = []
          explicitImplicit.value = false
        }
      })
    }
  })
}

//时间周期弹窗-确定
function assignment() {
  if (timearr.value.indexOf("/") != -1) {
    cronValue.value.cycleExecuteTime = timearr.value.toString() + ':' + dividearr.value.toString() + ':' + secondarr.value.toString()
  } else {
    var Timetype = ref()
    if (periodtime.value.periodInput3 < '9') {
      Timetype.value = '0' + periodtime.value.periodInput3
    } else {
      Timetype.value = periodtime.value.periodInput3
    }
    cronValue.value.cycleExecuteTime = Timetype.value + ':' + dividearr.value.toString() + ':' + secondarr.value.toString()
  }

  if (field.value.fieldmoon == '*') {
    cronValue.value.cycleMonth = appointmoon.value.toString()
  } else {
    cronValue.value.cycleMonth = field.value.fieldmoon
  }
  if (field.value.fieldweek == '*') {
    cronValue.value.cycleWeek = appointweek.value.toString()
  } else if (field.value.fieldweek == '?') {
    cronValue.value.cycleWeek = ''
  } else {
    cronValue.value.cycleWeek = field.value.fieldweek
  }
  if (sun.value == 4) {
    cronValue.value.intervalNumber = periodsun.value.periodInput4
  } else if (time.value == 3) {
    cronValue.value.intervalNumber = periodtime.value.periodInput4
  }
  if (sun.value == 4) {
    cronValue.value.intervalType = '2'
  } else if (time.value == 3) {
    cronValue.value.intervalType = '1'
  }
  cronValue.value.intervalExecuteTime = cronValue.value.cycleExecuteTime
  if (sun.value == 4) {
    cronValue.value.intervalStartTime = periodsun.value.periodInput3
  } else if (time.value == 3) {
    cronValue.value.intervalStartTime = periodtime.value.periodInput3
  }
  if (sun.value == 4) {
    cronValue.value.intervalEndTime = '31'
  } else if (time.value == 3) {
    cronValue.value.intervalEndTime = '24'
  }
  if (field.value.fieldsecond == '*' || field.value.fielddivide == '*' || field.value.fieldtime == '*') {
    ElMessage({
      type: 'warning',
      message: '请选择时，分，秒',
    })
    return false
  }
  if (field.value.fieldsun == '?' && field.value.fieldweek == '?') {
    ElMessage({
      type: 'warning',
      message: '日和周不支持都选择不指定，请重新选择',
    })
    return false
  }

  if (resentation.value !== '') {
    info.value.cronValue = resentation.value
  } else {
    info.value.cronValue = field.value.fieldsecond + ' ' + field.value.fielddivide + ' ' + field.value.fieldtime + ' ' + field.value.fieldsun + ' ' + field.value.fieldmoon + ' ' + field.value.fieldweek + ' ' + field.value.fieldyear
  }

  cronExpressions.value = false
}
//时间周期回显
function Echo() {
  resentation.value = info.value.cronValue
  if (info.value.cronValue == '') {
    second.value = ''
    divide.value = ''
    time.value = ''
    sun.value = ''
    moon.value = ''
    week.value = ''
    checkListsecond.value = []
    checkListdivide.value = []
    checkListtime.value = []
    checkListmoon.value = []
    checkListweek.value = []
    resentation.value = ''
    field.value = {
      fieldsecond: '*',
      fielddivide: '*',
      fieldtime: '*',
      fieldsun: '?',
      fieldmoon: '*',
      fieldweek: '?',
      fieldyear: '',
    }
  } else {
    const arrEcho = JSON.parse(JSON.stringify(info.value.cronValue))
    const arrayEcho = arrEcho.split(" ");
    //秒
    if (arrayEcho[0] == '*') {
      second.value = ''
      checkListsecond.value = []
      field.value.fieldsecond = '*'
    } else if (arrayEcho[0] != '*') {
      second.value = 4
      field.value.fieldsecond = arrayEcho[0]

      const secondArr = arrayEcho[0].split(",");
      const secondARR = ref([])
      secondArr.forEach((item) => {
        item = '0' + item
        secondARR.value.push(item)
      })
      checkListsecond.value = secondARR.value
    }
    //分
    if (arrayEcho[1] == '*') {
      divide.value = ''
      checkListdivide.value = []
      field.value.fielddivide = '*'
    } else if (arrayEcho[1] != '*') {
      divide.value = 4
      field.value.fielddivide = arrayEcho[1]
      const secondArr = arrayEcho[1].split(",");
      const secondARR = ref([])
      secondArr.forEach((item) => {
        if (item < 10) {
          item = '0' + item
        }
        secondARR.value.push(item)
      })
      checkListdivide.value = secondARR.value
    }
    //时
    if (arrayEcho[2] == '*') {
      time.value = ''
      checkListtime.value = []
      field.value.fieldtime = '*'
    } else if (arrayEcho[2].indexOf("/") != -1) {
      time.value = 3
      field.value.fieldtime = arrayEcho[2]
      checkListtime.value = []
      const secondArr = arrayEcho[2].split("/");
      periodtime.value.periodInput3 = secondArr[0]
      periodtime.value.periodInput4 = secondArr[1]
    } else if (arrayEcho[2].indexOf("/") == -1 && arrayEcho[2] != '*') {
      time.value = 4
      field.value.fieldtime = arrayEcho[2]
      const secondArr = arrayEcho[2].split(",");
      const secondARR = ref([])
      secondArr.forEach((item) => {
        item = '0' + item
        secondARR.value.push(item)
      })
      checkListtime.value = secondARR.value
    }
    //日
    if (arrayEcho[3] == '?') {
      sun.value = 2
      field.value.fieldsun = '?'
    } else if (arrayEcho[3].indexOf("/") != -1) {
      sun.value = 4
      field.value.fieldsun = arrayEcho[3]
      const secondArr = arrayEcho[3].split("/");
      periodsun.value.periodInput3 = secondArr[0]
      periodsun.value.periodInput4 = secondArr[1]
    }
    //月
    if (arrayEcho[4] == '*') {
      moon.value = 1
      checkListmoon.value = []
      field.value.fieldmoon = '*'
    } else if (arrayEcho[4] != '*') {
      moon.value = 4
      field.value.fieldmoon = arrayEcho[4]
      const secondArr = arrayEcho[4].split(",");

      checkListmoon.value = secondArr
    }
    //周
    if (arrayEcho[5] == '?') {
      week.value = 2
      checkListweek.value = []
      field.value.fieldweek = '?'
    } else if (arrayEcho[5] != '?') {
      week.value = 6
      field.value.fieldweek = arrayEcho[5]
      const secondArr = arrayEcho[5].split(",");
      checkListweek.value = secondArr
      checkListweek.value.forEach((res, index) => {
        if (res == 1) {
          checkListweek.value[index] = '日'
        } else if (res == 2) {
          checkListweek.value[index] = '一'
        } else if (res == 3) {
          checkListweek.value[index] = '二'
        } else if (res == 4) {
          checkListweek.value[index] = '三'
        } else if (res == 5) {
          checkListweek.value[index] = '四'
        } else if (res == 6) {
          checkListweek.value[index] = '五'
        } else if (res == 7) {
          checkListweek.value[index] = '六'
        }
      })
    }
  }
}

//更改时间格式
function dateFormat(row) {
  const daterc = row;
  if (daterc != null) {
    var date = new Date(daterc);
    var year = date.getFullYear();
    var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
    date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
    var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
    var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
    var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
    var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
    // 拼接
    return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
  }
}
//监听表达式变化
watch(() => field, (newValue, oldValue) => {
  montage()
}, { deep: true })







// 取消关联线
function disassociationClick(row, node) {
  disassociationDia.value = true
  treeId.value = row.id
  dataSel.value = scene.getObjectByProperty('uuid', node.parent.data.id)
}
// 取消关联确定
function disassociationDiaConfirmClick() {
  for (let i = 0; i < scene.children.length; i++) {
    if (scene.children[i].userData.type == 'PatrolLine') {
      scene.children[i].traverse(function (obj) {
        if (obj.type === 'Mesh') {
          obj.material.visible = false
        }
      })
    }
  }
  let line = dataSel.value.userData.line
  for (let i = 0; i < line.length; i++) {
    if (line[i].id == treeId.value) {
      line.splice(i, 1)
    }
  }
  for (let i = 0; i < searchdata.value.length; i++) {
    if (searchdata.value[i].id == dataSel.value.uuid) {
      searchdata.value[i].children = line
    }
  }
  dataSel.value.userData.line = JSON.parse(JSON.stringify(line))
  disassociationDia.value = false
  clearDiv()
}
// 切换显示
function selTypeChange(e) {
  isLineUV.value = false
  search.value = ''
  filterText.value = ''
  for (let i = 0; i < scene.children.length; i++) {
    if (scene.children[i].userData.type == 'Camera' || scene.children[i].userData.type == 'Camera1' || scene.children[i].userData.type == 'DevicePoint' || scene.children[i].userData.type == 'UV' || scene.children[i].userData.type == 'UAV' || scene.children[i].userData.type == 'PatrolLine' || scene.children[i].userData.type == 'UAVLine') {
      scene.children[i].traverse(function (obj) {
        if (obj.type === 'Mesh') {
          obj.material.visible = false
        }
      })
    }
    if (scene.children[i].userData.type == 'linePonit' || scene.children[i].userData.type == 'UAVLinePonit') {
      scene.children[i].visible = false
    }
    if (scene.children[i].userData.type == 'Projection') {
      scene.children[i].traverse(function (obj) {
        if (obj.type === 'Mesh') {
          obj.geometry.dispose()
          obj.material.dispose()
        }
      })
      scene.remove(scene.children[i])
      i--
    }
  }
  data.value = []
  if (dataJson.value) {
    if (e == '01') {
      if (dataJson.value.Camera) {
        data.value = dataJson.value.Camera
        data.value.forEach(element => {
          element.start = false
        })
      }
      searchdata.value = JSON.parse(JSON.stringify(data.value))
      for (let i = 0; i < scene.children.length; i++) {
        if (scene.children[i].userData.type == 'Camera' || scene.children[i].userData.type == 'Camera1' || scene.children[i].userData.type == 'Camera1') {
          scene.children[i].traverse(function (obj) {
            if (obj.type === 'Mesh') {
              obj.material.visible = true
            }
          })
        }
      }
    } else if (e == '02') {
      if (dataJson.value.DevicePoint) data.value = dataJson.value.DevicePoint
      searchdata.value = JSON.parse(JSON.stringify(data.value))
      for (let i = 0; i < scene.children.length; i++) {
        if (scene.children[i].userData.type == 'DevicePoint') {
          scene.children[i].traverse(function (obj) {
            if (obj.type === 'Mesh') {
              obj.material.visible = true
            }
          })
        }
      }
    } else if (e == '03') {
      if (dataJson.value.PatrolLine) data.value = dataJson.value.PatrolLine
      searchdata.value = JSON.parse(JSON.stringify(data.value))
      for (let i = 0; i < searchdata.value.length; i++) {
        if (searchdata.value[i].linePonit) searchdata.value[i].children = JSON.parse(searchdata.value[i].linePonit)
      }
      for (let i = 0; i < scene.children.length; i++) {
        if (scene.children[i].userData.type == 'PatrolLine') {
          scene.children[i].traverse(function (obj) {
            if (obj.type === 'Mesh') {
              obj.material.visible = true
            }
          })
        }
      }
    } else if (e == '04') {
      isLineUV.value = true
      if (dataJson.value.UV) data.value = dataJson.value.UV
      searchdata.value = JSON.parse(JSON.stringify(data.value))
      for (let i = 0; i < searchdata.value.length; i++) {
        if (searchdata.value[i].line) searchdata.value[i].children = JSON.parse(searchdata.value[i].line)
        if (searchdata.value[i].children) {

          for (let a = 0; a < searchdata.value[i].children.length; a++) {
            let model = scene.getObjectByProperty('uuid', searchdata.value[i].children[a].id)

            if (model) {
              if (model.userData.linePonit == null || model.userData.linePonit == '[]') {
                searchdata.value[i].children[a].task = false
              } else {
                searchdata.value[i].children[a].linePonit = model.userData.linePonit
                searchdata.value[i].children[a].task = true
              }
            }
          }
        }
      }
      for (let i = 0; i < scene.children.length; i++) {
        if (scene.children[i].userData.type == 'UV') {
          scene.children[i].traverse(function (obj) {
            if (obj.type === 'Mesh') {
              obj.material.visible = true
            }
          })
        }
      }
    } else if (e == '05') {
      if (dataJson.value.EquipmentComponentSettings) data.value = dataJson.value.EquipmentComponentSettings
      searchdata.value = JSON.parse(JSON.stringify(data.value))
      isdevice.value = true
      scene.children[1].traverse(function (obj) {
        data.value.forEach(element => {
          if (obj.userData.name == element.equipmentname) {
            obj.name = element.name
            obj.userData.type = 'EquipmentComponentSettings'
            obj.uuid = element.id
            obj.userData.objinfo = element.objinfo
          }
        })
      })
    } else if (e == '06') {
      isLineUV.value = true
      if (dataJson.value.UAV) data.value = dataJson.value.UAV
      searchdata.value = JSON.parse(JSON.stringify(data.value))
      for (let i = 0; i < scene.children.length; i++) {
        if (scene.children[i].userData.type == 'UAV') {
          scene.children[i].traverse(function (obj) {
            if (obj.type === 'Mesh') {
              obj.material.visible = true
            }
          })
        }
      }
    } else if (e == '07') {
      if (dataJson.value.UAVLine) data.value = dataJson.value.UAVLine
      searchdata.value = JSON.parse(JSON.stringify(data.value))
      for (let i = 0; i < searchdata.value.length; i++) {
        if (searchdata.value[i].linePonit) searchdata.value[i].children = JSON.parse(searchdata.value[i].linePonit)
        if (searchdata.value[i].linePonit == null || searchdata.value[i].linePonit == '[]') {
          searchdata.value[i].task = false
        } else {
          searchdata.value[i].task = true
        }
      }
      for (let i = 0; i < scene.children.length; i++) {
        if (scene.children[i].userData.type == 'UAVLine') {
          scene.children[i].traverse(function (obj) {
            if (obj.type === 'Mesh') {
              obj.material.visible = true
            }
          })
        }
        if (scene.children[i].userData.type == 'UAVLinePonit') {
          scene.children[i].visible = true
        }
      }
    }
  }
  reset()
}
// 显示/隐藏
function show() {
  let name = ''
  let is = ''
  if (selType.value == '01') {
    name = 'Camera'
    is = isCamera
  } else if (selType.value == '02') {
    name = 'DevicePoint'
    is = isDevicePoint
  } else if (selType.value == '03') {
    name = 'PatrolLine'
    is = isPatrolLine
  } else if (selType.value == '04') {
    name = 'UV'
    is = isUV
  } else if (selType.value == '06') {
    name = 'UAV'
    is = isUAV
  } else if (selType.value == '07') {
    name = 'UAVLine'
    is = isUAVLine
  }
  is.value = !is.value
  for (let i = 0; i < scene.children.length; i++) {
    if (scene.children[i].userData.type) {
      if (scene.children[i].userData.type.indexOf(name) != -1) {
        scene.children[i].traverse(function (obj) {
          if (obj.type === 'Mesh') {
            obj.material.visible = is.value
          }
        })
      }
    }
    if (selType.value == '03') {
      if (scene.children[i].userData.type == 'linePonit') {
        scene.children[i].visible = is.value
      }
    }
    if (selType.value == '07') {
      if (scene.children[i].userData.type == 'UAVLinePonit') {
        scene.children[i].visible = is.value
      }
    }
  }
  clearDiv()
}
// 删除全部点位 - 弹框
function del() {
  Explicit.value = true
  let name = ''
  if (selType.value == '01') {
    name = '确定删除全部摄像机吗？'
  } else if (selType.value == '02') {
    name = '确定删除全部巡视点位吗？'
  } else if (selType.value == '03') {
    name = '确定清空巡视路线吗？'
  } else if (selType.value == '04') {
    name = '确定清理全部无人车吗？'
  } else if (selType.value == '05') {
    name = '确定清空模型对象关联吗？'
  } else if (selType.value == '06') {
    name = '确定清理全部无人机吗？'
  } else if (selType.value == '07') {
    name = '确定清空巡视路线吗？'
  }
  ExplicitAll.value = true
  ExplicitTitle.value = name
}
// 删除全部点位 - 确定
function confirmClick() {
  let name = ''
  if (selType.value == '01') {
    name = 'Camera'
  } else if (selType.value == '02') {
    name = 'DevicePoint'
  } else if (selType.value == '03') {
    name = 'PatrolLine'
  } else if (selType.value == '04') {
    name = 'UV'
  } else if (selType.value == '06') {
    name = 'UAV'
  } else if (selType.value == '05') {
    name = 'EquipmentComponentSettings'
    if (ExplicitAll.value == true) {
      data.value = []
      searchdata.value = []
      scene.children[1].traverse(function (obj) {
        if (obj.userData.type == 'EquipmentComponentSettings') {
          obj.userData.type = ''
          obj.userData.objinfo = ''
        }
      })
    } else {
      scene.children[1].traverse(function (obj) {
        if (obj.uuid == dataSel.value.uuid) {
          obj.userData.type = ''
          obj.userData.objinfo = ''
        }
      })
      for (let i = 0; i < data.value.length; i++) {
        if (data.value[i].id == dataSel.value.uuid) {
          data.value.splice(i, 1)
          searchdata.value = JSON.parse(JSON.stringify(data.value))
          for (let i = 0; i < searchdata.value.length; i++) {
            if (data.value[i].line) data.value[i].children = JSON.parse(data.value[i].line)
            if (searchdata.value[i].line) searchdata.value[i].children = JSON.parse(searchdata.value[i].line)
          }
        }
      }
    }
    Explicit.value = false
    save()
    return
  } else if (selType.value == '07') {
    name = 'UAVLine'
  }
  if (name == 'PatrolLine') {
    for (let i = 0; i < dataJson.value.UV.length; i++) {
      if (dataJson.value.UV[i].line != '' && dataJson.value.UV[i].line != null) {
        let line = JSON.parse(dataJson.value.UV[i].line)
        if (dataSel.value == '') {
          if(line !=null) {
            ElMessage({
              message: '路线已绑定无人车，请解绑后重试',
              type: 'warning',
            })
            Explicit.value = false
            return
          }
        }
        for (let a = 0; a < line.length; a++) {
          if (line[a].id == dataSel.value.uuid) {
            ElMessage({
              message: '当前路线已绑定无人车，请解绑后重试',
              type: 'warning',
            })
            Explicit.value = false
            return
          }
        }
      }
    }
  }
  Explicit.value = false
  if (ExplicitAll.value == true) {
    data.value = []
    searchdata.value = []
    for (let i = 0; i < scene.children.length; i++) {
      if (scene.children[i].userData.type) {
        if (scene.children[i].userData.type.indexOf(name) != -1) {
          scene.children[i].traverse(function (obj) {
            if (obj.type === 'Mesh') {
              obj.geometry.dispose()
              obj.material.dispose()
            }
          })
          scene.remove(scene.children[i])
          i--
        }
      }
      if (selType.value == '03') {
        if (scene.children[i].userData.type == 'linePonit') {
          scene.children[i].traverse(function (obj) {
            if (obj.type === 'Mesh') {
              obj.geometry.dispose()
              obj.material.dispose()
            }
          })
          scene.remove(scene.children[i])
          i--
        }
      }
      if (selType.value == '07') {
        if (scene.children[i].userData.type == 'UAVLine') {
          scene.children[i].traverse(function (obj) {
            if (obj.type === 'Mesh') {
              obj.geometry.dispose()
              obj.material.dispose()
            }
          })
          scene.remove(scene.children[i])
          i--
        }
      }
    }
  } else {
    for (let i = 0; i < scene.children.length; i++) {
      if (scene.children[i].userData.parentid == dataSel.value.uuid) {
        scene.children[i].traverse(function (obj) {
          if (obj.type === 'Mesh') {
            obj.geometry.dispose()
            obj.material.dispose()
          }
        })
        scene.remove(scene.children[i])
        i--
      }
      if (scene.children[i].uuid == dataSel.value.uuid) {
        scene.children[i].traverse(function (obj) {
          if (obj.type === 'Mesh') {
            obj.geometry.dispose()
            obj.material.dispose()
          }
        })
        scene.remove(scene.children[i])
        i--
      }
    }
    for (let i = 0; i < data.value.length; i++) {
      if (data.value[i].id == dataSel.value.uuid) {
        data.value.splice(i, 1)
        searchdata.value = JSON.parse(JSON.stringify(data.value))
        for (let i = 0; i < searchdata.value.length; i++) {
          if (data.value[i].line) data.value[i].children = JSON.parse(data.value[i].line)
          if (searchdata.value[i].line) searchdata.value[i].children = JSON.parse(searchdata.value[i].line)
        }
      }
    }
  }
  save()
  clearDiv()
}
// 显示右侧列表
function showList() {
  isRightList.value = !isRightList.value
}
// 无人车菜单点击
function handleNodeClick(row, node) {
  if (selType.value == '03') {
    if (node.level == 1) {
      if (lineDrap.value == true) return
      for (let i = 0; i < scene.children.length; i++) {
        if (scene.children[i].userData.type == 'PatrolLine') {
          scene.children[i].traverse(function (obj) {
            if (obj.type === 'Mesh') {
              obj.material.visible = false
            }
          })
        }
        if (scene.children[i].userData.type == 'linePonit') {
          scene.children[i].visible = false
          if (scene.children[i].userData.parentid == row.id) {
            scene.children[i].visible = true
          }
        }
      }
      let model = scene.getObjectByProperty('uuid', row.id)
      model.traverse(function (obj) {
        if (obj.type === 'Mesh') {
          obj.material.visible = true
        }
      })
    } else {

    }
  } else if (selType.value == '04') {
    if (node.level == 1) {
      for (let i = 0; i < scene.children.length; i++) {
        if (scene.children[i].userData.type == 'PatrolLine') {
          scene.children[i].traverse(function (obj) {
            if (obj.type === 'Mesh') {
              obj.material.visible = false
            }
          })
        }
      }
      let model = scene.getObjectByProperty('uuid', row.id)
      dataSel.value = model
      for (let i = 0; i < scene.children.length; i++) {
        if (scene.children[i].type == 'BoxHelper') {
          scene.children[i].traverse(function (obj) {
            if (obj.type === 'Mesh') {
              obj.geometry.dispose()
              obj.material.dispose()
            }
          })
          scene.remove(scene.children[i])
          i--
        }
      }
      model.traverse(function (obj) {
        if (obj.type === 'Mesh') {
          obj.material.visible = true
        }
      })
      // 框选
      const box = new THREE.BoxHelper(model, '#fff000')
      box.userData.uuid = model.uuid
      scene.add(box)
      controls.enabled = true
      isTranslateRotate.value = true
      var pos = new THREE.Vector3(Number(model.userData.x1), Number(model.userData.y1), Number(model.userData.z1))
      var pos2 = new THREE.Vector3(Number(model.position.x), Number(model.position.y), Number(model.position.z))
      animateCamera(defaultCamera.position, pos, controls.target, pos2)
    } else {
      for (let i = 0; i < scene.children.length; i++) {
        if (scene.children[i].userData.type == 'PatrolLine') {
          scene.children[i].traverse(function (obj) {
            if (obj.type === 'Mesh') {
              obj.material.visible = false
            }
          })
        }
      }
      let model = scene.getObjectByProperty('uuid', row.id)
      model.traverse(function (obj) {
        if (obj.type === 'Mesh') {
          obj.material.visible = true
        }
      })
      return
    }
  } else if (selType.value == '07') {
    if (isUAVdropLine.value == true) {
      if (row.add != true && row.add == undefined) {
        nextTick(() => {
          treeRef.value.setCurrentKey(null)
        })
      }
    }
    if (node.level == 1) {
      if (isUAVdropLine.value == true) return
      for (let i = 0; i < scene.children.length; i++) {
        if (scene.children[i].userData.type == 'UAVLine') {
          scene.children[i].traverse(function (obj) {
            if (obj.type === 'Mesh') {
              obj.material.visible = false
            }
          })
        }
        if (scene.children[i].userData.type == 'UAVLinePonit') {
          scene.children[i].visible = false
          if (scene.children[i].userData.parentid == row.id) {
            scene.children[i].visible = true
          }
        }
      }
      let model = scene.getObjectByProperty('uuid', row.id)
      model.traverse(function (obj) {
        if (obj.type === 'Mesh') {
          obj.material.visible = true
        }
      })
    } else {

    }
  }
}
// 列表点击 - 视角切换
function listClick(row, index) {
  dataIndex.value = index
  if (selType.value == '05') {
    for (let i = 0; i < scene.children.length; i++) {
      if (scene.children[i].type == 'BoxHelper') {
        scene.children[i].traverse(function (obj) {
          if (obj.type === 'Mesh') {
            obj.geometry.dispose()
            obj.material.dispose()
          }
        })
        scene.remove(scene.children[i])
        i--
      }
    }
    let model = scene.getObjectByProperty('uuid', row.id)
    // 框选
    const BoxHelper = new THREE.BoxHelper(model, '#fff000')
    BoxHelper.userData.uuid = model.uuid
    scene.add(BoxHelper)

    const box = new THREE.Box3().setFromObject(model)
    const center = box.getCenter(new THREE.Vector3())
    let arr = true
    position.forEach(element => {
      if (element.name == model.userData.name) {
        arr = false
        var pos = new THREE.Vector3(element.x1, element.y1, element.z1)
        var pos2 = new THREE.Vector3(element.x, element.y, element.z)
        animateCamera(defaultCamera.position, pos, controls.target, pos2)
      }
    })
    if (arr == true) {
      var pos = new THREE.Vector3(center.x + 8, center.y, center.z)
      var pos2 = new THREE.Vector3(center.x, center.y, center.z)
      animateCamera(defaultCamera.position, pos, controls.target, pos2)
    }

    const contextmenu = document.getElementById('contextmenu')
    contextmenu.style.display = 'none'
    const contextimg = document.getElementById('contextimg')
    contextimg.style.display = 'none'
    return
  }
  let model = scene.getObjectByProperty('uuid', row.id)
  dataSel.value = model
  for (let i = 0; i < scene.children.length; i++) {
    if (scene.children[i].type == 'BoxHelper') {
      scene.children[i].traverse(function (obj) {
        if (obj.type === 'Mesh') {
          obj.geometry.dispose()
          obj.material.dispose()
        }
      })
      scene.remove(scene.children[i])
      i--
    }
  }
  model.traverse(function (obj) {
    if (obj.type === 'Mesh') {
      obj.material.visible = true
    }
  })
  const box = new THREE.BoxHelper(model, '#fff000')
  box.renderOrder = 99
  box.material.depthTest = false
  box.userData.uuid = model.uuid
  scene.add(box)
  controls.enabled = true
  isTranslateRotate.value = true
  var pos = new THREE.Vector3(Number(model.userData.x1), Number(model.userData.y1), Number(model.userData.z1))
  var pos2 = new THREE.Vector3(Number(model.position.x), Number(model.position.y), Number(model.position.z))
  animateCamera(defaultCamera.position, pos, controls.target, pos2)

  const contextmenu = document.getElementById('contextmenu')
  contextmenu.style.display = 'none'
  const contextimg = document.getElementById('contextimg')
  contextimg.style.display = 'none'
}
function listange(row) {
  let model = scene.getObjectByProperty('uuid', row.id)
  let isAdd = true
  scene.children.forEach((item) => {
    if (item.userData.type == 'Projection') {
      if (row.id == item.userData.uuid) {
        item.rotation.x = model.rotation.x
        item.rotation.y = model.rotation.y
        item.rotation.z = model.rotation.z
        item.traverse(function (obj) {
          if (obj.type === 'Mesh') {
            if (row.start) {
              let num = 30
              let timer = setInterval(() => {
                num--
                item.scale.set(num, num, num)
                if (num == 1) {
                  obj.material.visible = false
                  clearInterval(timer)
                }
              }, 1)
            } else {
              let num = 1
              obj.material.visible = true
              let timer = setInterval(() => {
                num++
                item.scale.set(num, num, num)
                if (num == 30) {
                  clearInterval(timer)
                }
              }, 1)
            }
          }
        })
        isAdd = false
      }
    }
  })

  if (isAdd) {
    let gltfLoader = new GLTFLoader() //obj加载器
    // 引入默认纹理
    gltfLoader.load('./static/3DModel/range.glb', (gltf1) => {
      let model1 = gltf1.scene
      model1.position.set(Number(model.position.x), Number(model.position.y), Number(model.position.z))
      model1.rotation.x = model.rotation.x
      model1.rotation.y = model.rotation.y
      model1.rotation.z = model.rotation.z
      model1.userData.type = 'Projection'
      model1.userData.uuid = row.id
      model1.userData.select = true
      scene.add(model1)
      let num = 1
      let timer = setInterval(() => {
        num = num + 1
        model1.scale.set(num, num, num)
        if (num == 30) clearInterval(timer)
      }, 10)
    })
  }
  row.start = !row.start
}
// 列表点击 - 单个删除
function listDel(row) {
  Explicit.value = true
  let name = ''
  if (selType.value == '01') {
    name = '确定删除此摄像机吗？'
  } else if (selType.value == '02') {
    name = '确定删除此巡视点位吗？'
  } else if (selType.value == '03') {
    name = '确定删除此巡视路线吗？'
  } else if (selType.value == '04') {
    name = '确定删除此无人车吗？'
  } else if (selType.value == '05') {
    name = '确定取消模型对象关联吗？'
  } else if (selType.value == '06') {
    name = '确定删除此无人机吗？'
  } else if (selType.value == '07') {
    name = '确定删除此巡视路线吗？'
  }
  ExplicitAll.value = false
  ExplicitTitle.value = name
  dataSel.value = scene.getObjectByProperty('uuid', row.id)
}
function renameClick(row) {
  renameNmae.value = ''
  for (let i = 0; i < searchdata.value.length; i++) {
    searchdata.value[i].isRename = true
  }
  row.isRename = !row.isRename
}
//巡视点位重名名{
function Rename(row) {
  if (renameNmae.value == '') {
    ElMessage({
      message: '请输入巡视路线名称！',
      type: 'warning',
    })
    return
  }
  for (let i = 0; i < scene.children.length; i++) {
    if (selType.value == '03') {
      if (scene.children[i].uuid === row.id) {
        scene.children[i].name = renameNmae.value
        save()
        row.isRename = !row.isRename
      }
    }
  }
}
// 列表点击 - 关联
function associationClick(row) {
  association.value = true
  onjId.value = row.id
  if (selType.value == '01') {
    associationTitle.value = '关联摄像机'
    getData()
  } else if (selType.value == '02') {
    associationTitle.value = '关联巡视点位'
    getDevice()
  } else if (selType.value == '04') {
    associationTitle.value = '关联无人车'
    getRobot()
  } else if (selType.value == '06') {
    associationTitle.value = '关联无人机'
    getUAV()
  }
  clearDiv()
}
const lineDrap = ref(false)
const lineDrapStart = ref(false)
// 列表点击 - 巡视路线 - 关联巡视点 
function lineAssociationDrop(row, index) {
  reset()
  clearDiv()
  for (let i = 0; i < scene.children.length; i++) {
    if (scene.children[i].userData.type == 'PatrolLine') {
      scene.children[i].traverse(function (obj) {
        if (obj.type === 'Mesh') {
          obj.material.visible = false
        }
      })
    }
    if (scene.children[i].userData.type == 'linePonit') {
      scene.children[i].visible = false
      if (scene.children[i].userData.parentid == row.id) {
        scene.children[i].visible = true
      }
    }
  }

  const box = new THREE.Box3().setFromObject(scene)
  const size = box.getSize(new THREE.Vector3()).length()
  defaultCamera.position.set(0, size, 0) // 正视
  defaultCamera.fov = 42
  defaultCamera.updateProjectionMatrix()
  controls.enableRotate = false //禁止旋转
  controls.enablePan = false //禁止平移
  controls.enableZoom = false //禁止缩放
  controls.update()

  lineDrap.value = true
  isdrop.value = false
  isdropLine.value = false

  treeRef.value.setCurrentKey(row.id)

  dataSel.value = scene.getObjectByProperty('uuid', row.id)
  dataSel.value.traverse(function (obj) {
    if (obj.type === 'Mesh') {
      obj.material.visible = true
    }
  })
}
// 结束设置
function closeSet() {
  for (let i = 0; i < searchdata.value.length; i++) {
    if (searchdata.value[i].id == dataSel.value.uuid) {
      searchdata.value[i].children = dataSel.value.userData.linePonit
    }
  }
  for (let i = 0; i < scene.children.length; i++) {
    if (scene.children[i].userData.type == 'linePonit') {
      scene.remove(scene.children[i])
      i--
    }
  }
  for (let i = 0; i < searchdata.value.length; i++) {
    if (searchdata.value[i].linePonit) {
      let linePonit = JSON.parse(searchdata.value[i].linePonit)
      for (let a = 0; a < linePonit.length; a++) {
        let sprite = new THREE.Sprite(new THREE.SpriteMaterial({
          map: new THREE.TextureLoader().load(pointImg),
          transparent: true
        }))
        sprite.position.set(linePonit[a].x, linePonit[a].y, linePonit[a].z)
        sprite.uuid = linePonit[a].uuid
        sprite.userData.orderno = linePonit[a].orderno
        sprite.userData.deviceId = linePonit[a].deviceId
        sprite.userData.deviceName = linePonit[a].deviceName
        sprite.userData.parentid = linePonit[a].parentid
        sprite.userData.type = 'linePonit'
        scene.add(sprite)
      }
    }
  }

  lineDrap.value = false
  lineDrapStart.value = false
  controls.enableRotate = true //禁止旋转
  controls.enablePan = true //禁止平移
  controls.enableZoom = true //禁止缩放
  controls.reset()
  defaultCamera.fov = defaultCamera.fov + 18
  defaultCamera.updateProjectionMatrix()
}
const lineNum = ref(0)
// 线 点击关联 巡视点 点击开始/结束绘制
function lineDrapStartClick() {
  if (lineDrapStart.value == false) {
    lineDrapStart.value = true
  } else {
    for (let i = 0; i < searchdata.value.length; i++) {
      if (searchdata.value[i].id == dataSel.value.uuid) {
        dataSel.value.userData.linePonit = searchdata.value[i].children
      }
    }
    lineDrapStart.value = false
    save()
  }
}
const removePointDia = ref(false)
// 取消关联巡视点
function disassociationPointClick(row, node) {
  removePointDia.value = true
  treeId.value = row.uuid
  dataSel.value = scene.getObjectByProperty('uuid', node.parent.data.id)
}
// 取消关联巡视点 - 确定
function removePointDiaConfirmClick() {
  if (selType.value == '03') {
    for (let i = 0; i < scene.children.length; i++) {
      if (scene.children[i].userData.type == 'linePonit') {
       
        if (treeId.value == scene.children[i].uuid) {
          scene.remove(scene.children[i])
          i--
        }
      }
      if (scene.children[i].userData.type == 'PatrolLine') {
        for (let a = 0; a < scene.children[i].userData.linePonit.length; a++) {
          if (treeId.value == scene.children[i].userData.linePonit[a].uuid) {
            scene.children[i].userData.linePonit.splice(a,1)
            a--
          }
        }
      }
    }
  } else {
    if (selType.value == '07') {
      let model = ''
      for (let i = 0; i < scene.children.length; i++) {
        if (scene.children[i].userData.type == 'UAVLinePonit') {
          if (treeId.value == scene.children[i].uuid) {
            model = scene.getObjectByProperty('uuid', scene.children[i].userData.parentid)
            for (let a = 0; a < model.userData.linePonit.length; a++) {
              if (model.userData.linePonit[a].uuid == treeId.value) {
                model.userData.linePonit.splice(a, 1)
              }
            }
            scene.remove(scene.children[i])
            i--
          }
        }
      }
      let vector3 = []
      let points = []
      for (let i = 0; i < model.userData.linePonit.length; i++) {
        vector3.push(new THREE.Vector3(model.userData.linePonit[i].x, model.userData.linePonit[i].y, model.userData.linePonit[i].z))
        points.push({ x: model.userData.linePonit[i].x, y: model.userData.linePonit[i].y, z: model.userData.linePonit[i].z })
      }
      model.userData.points = points
      let curve = new THREE.CatmullRomCurve3(vector3, false)
      let up = new THREE.Vector3(0, 1, 0)
      // 创建路线点列表
      let pathPointLists = new PathPointList()
      pathPointLists.set(curve.points, 0.5, 10, up, false)
      let geometry = new PathGeometry()
      geometry.update(pathPointLists, { width: 0.5, arrow: false })
      model.geometry = geometry
    }
  }
  for (let i = 0; i < searchdata.value.length; i++) {
    for (let a = 0; a < searchdata.value[i].children.length; a++) {
      if (searchdata.value[i].children[a].uuid == treeId.value) {
        searchdata.value[i].children.splice(a, 1)
        a--
      }
    }
    if (searchdata.value[i].children.length == 0) {
      searchdata.value[i].task = false
    } else {
      searchdata.value[i].task = true
    }
  }
  removePointDia.value = false
}


const lineUAVNum = ref(0)
const isUAVdrop = ref(false)
const isUAVdropLine = ref(false)

// 添加无人机路线
function addUAVLine() {
  if (isUAVdrop.value == false) {
    reset()
    clearDiv()
    isUAVdrop.value = true
    const box = new THREE.Box3().setFromObject(scene)
    const size = box.getSize(new THREE.Vector3()).length()
    defaultCamera.position.set(0, size, 0) // 正视
    defaultCamera.fov = 42
    defaultCamera.updateProjectionMatrix()
    controls.enableRotate = false //禁止旋转
    controls.enablePan = false //禁止平移
    controls.enableZoom = false //禁止缩放
    controls.update()
    isWithdraw.value = true
    isdropLine.value = false
    for (let i = 0; i < scene.children.length; i++) {
      if (scene.children[i].name == 'testmesh') {
        scene.remove(scene.children[i])
      }
    }
  } else {
    isUAVdrop.value = false
    isUAVdropLine.value = false
    controls.enableRotate = true //禁止旋转
    controls.enablePan = true //禁止平移
    controls.enableZoom = true //禁止缩放
    controls.reset()
    defaultCamera.fov = defaultCamera.fov + 18
    defaultCamera.updateProjectionMatrix()
  }
}
// 点击开始/结束绘制
function initUAVLine() {
  if (isUAVdropLine.value == false) {
    for (let i = 0; i < scene.children.length; i++) {
      if (scene.children[i].userData.type == 'UAVLine') {
        scene.children[i].traverse(function (obj) {
          if (obj.type === 'Mesh') {
            obj.material.visible = false
          }
        })
      }
      if (scene.children[i].userData.type == 'UAVLinePonit') scene.children[i].visible = false
    }
    nextTick(() => {
      treeRef.value.setCurrentKey(null)
    })
    isUAVdropLine.value = true
    clearDiv()
  } else {
    nextTick(() => {
      if (treeRef.value.getCurrentNode()) {
        let model = scene.getObjectByProperty('uuid', treeRef.value.getCurrentNode().id)
        model.name = model.userData.name
      }
      treeRef.value.setCurrentKey(null)
    })
    isUAVdropLine.value = false
    save()
  }
}
//摄像机-摄像机-视频播放
const deviceId = ref('')
const channelId = ref('')
const videoChannelList = ref([])
function getVideoUrl(row, index) {
  videoShow.value = true
  deviceId.value = row.channelList[index].deviceid
  channelId.value = row.channelList[index].channelid
  if (row.channelList[index].deviceid == undefined) {
    deviceId.value = row.channelList[index].deviceId
    channelId.value = row.channelList[index].channelId
  }
  axios.get(userStore.webApiMonitorUrl + '/api/play/start/' + deviceId.value + '/' + channelId.value, {}).then((res) => {
    if (res.data.data != undefined) {
      videoUrl.value = res.data.data.flv

    }
  }).catch(function (error) {
  })
}


function realTimeVideo(row, index) {
  const contextmenu = document.getElementById('contextmenu')
  contextmenu.style.display = 'none'
  const contextimg = document.getElementById('contextimg')
  contextimg.style.display = 'none'
  if (row == 1) {
    if (index == 0) {
      videoChannelList.value = dataSel.value.userData.objinfo.channelList[0]
      getVideoUrl(dataSel.value.userData.objinfo, index)
    } else if (index == 1) {
      videoChannelList.value = dataSel.value.userData.objinfo.channelList[1]
      getVideoUrl(dataSel.value.userData.objinfo, index)
    }

    return
  }
  if (index == 0) {
    getVideoUrl(row.objinfo, index)
    videoChannelList.value = scene.getObjectByProperty('uuid', row.id).userData.objinfo.channelList[0]
  } else if (index == 1) {
    getVideoUrl(row.objinfo, index)
    videoChannelList.value = scene.getObjectByProperty('uuid', row.id).userData.objinfo.channelList[1]
  } else if (index == 3) {
    ElMessage({
      message: '此摄像机暂无实时视频',
      type: 'warning',
    })
    return false
  }
}
//列表点击-查看详细信息
function informationClick(row) {
  information.value = true
  objRow.value = scene.getObjectByProperty('uuid', row.id)
  nextTick(() => {
    const detailedInformation = document.getElementById('detailed-information')
    detailedInformation.style.right = '26%'
    detailedInformation.style.bottom = '15%'
    detailedInformation.style.left = 'auto'
    detailedInformation.style.top = 'auto'
  })
  clearDiv()
}
// 保存
function save() {
  const params = {
    stationId: userStore.stationId,
    custom2: ''
  }
  let json = {
    Camera: [],
    DevicePoint: [],
    UV: [],
    UAV: [],
    UAVLine: [],
    PatrolLine: [],
    EquipmentComponentSettings: []
  }
  for (let i = 0; i < scene.children.length; i++) {
    if (scene.children[i].userData.type == 'Camera' || scene.children[i].userData.type == 'Camera1') {
      json.Camera.push({
        id: scene.children[i].uuid,
        objname: scene.children[i].name,
        coordinate: {
          x: scene.children[i].position.x,
          y: scene.children[i].position.y,
          z: scene.children[i].position.z,
          x1: scene.children[i].userData.x1,
          y1: scene.children[i].userData.y1,
          z1: scene.children[i].userData.z1,
          normal: scene.children[i].userData.normal
        },
        rotation: {
          x: scene.children[i].rotation.x,
          y: scene.children[i].rotation.y,
          z: scene.children[i].rotation.z
        },
        type: scene.children[i].userData.type == 'Camera' ? 'Camera' : 'Camera1',
        objinfo: scene.children[i].userData.objinfo
      })
    }
    if (scene.children[i].userData.type == 'DevicePoint') {
      json.DevicePoint.push({
        id: scene.children[i].uuid,
        objname: scene.children[i].name,
        coordinate: {
          x: scene.children[i].position.x,
          y: scene.children[i].position.y,
          z: scene.children[i].position.z,
          x1: scene.children[i].userData.x1,
          y1: scene.children[i].userData.y1,
          z1: scene.children[i].userData.z1,
          normal: scene.children[i].userData.normal
        },
        rotation: {
          x: scene.children[i].rotation.x,
          y: scene.children[i].rotation.y,
          z: scene.children[i].rotation.z
        },
        objinfo: scene.children[i].userData.objinfo
      })
    }
    if (scene.children[i].userData.type == 'UV') {
      let posX = scene.children[i].position.x
      let posZ = scene.children[i].position.z
      json.UV.push({
        id: scene.children[i].uuid,
        objname: scene.children[i].name,
        coordinate: {
          x: scene.children[i].position.x,
          y: scene.children[i].position.y,
          z: scene.children[i].position.z,
          x1: posX + 4,
          y1: scene.children[i].userData.y1,
          z1: posZ + 4,
          normal: scene.children[i].userData.normal
        },
        rotation: {
          x: scene.children[i].rotation.x,
          y: scene.children[i].rotation.y,
          z: scene.children[i].rotation.z
        },
        line: JSON.stringify(scene.children[i].userData.line),
        objinfo: scene.children[i].userData.objinfo
      })
    }
    if (scene.children[i].userData.type == 'UAV') {
      let posX = scene.children[i].position.x
      let posZ = scene.children[i].position.z
      json.UAV.push({
        id: scene.children[i].uuid,
        objname: scene.children[i].name,
        coordinate: {
          x: scene.children[i].position.x,
          y: scene.children[i].position.y,
          z: scene.children[i].position.z,
          x1: posX + 4,
          y1: scene.children[i].userData.y1,
          z1: posZ + 4,
          normal: scene.children[i].userData.normal
        },
        rotation: {
          x: scene.children[i].rotation.x,
          y: scene.children[i].rotation.y,
          z: scene.children[i].rotation.z
        },
        objinfo: scene.children[i].userData.objinfo
      })
    }
    if (scene.children[i].userData.type == 'UAVLine') {
      json.UAVLine.push({
        id: scene.children[i].uuid,
        name: scene.children[i].userData.name,
        points: scene.children[i].userData.points,
        isRename: true,
        linePonit: JSON.stringify(scene.children[i].userData.linePonit)
      })
    }
    if (scene.children[i].userData.type == 'PatrolLine') {
      json.PatrolLine.push({
        id: scene.children[i].uuid,
        name: scene.children[i].name,
        points: scene.children[i].userData.point,
        isRename: true,
        linePonit: JSON.stringify(scene.children[i].userData.linePonit)
      })
    }
    scene.children[i].traverse(function (obj) {
      if (obj.userData.type == 'EquipmentComponentSettings') {
        json.EquipmentComponentSettings.push({
          id: obj.uuid,
          name: obj.name,
          equipmentname: obj.userData.name,
          objinfo: obj.userData.objinfo
        })
      }
    })
  }
  params.custom2 = JSON.stringify(json)
  updateSubstation_bak(params).then((item) => {
    if (item.code == 0) {
      ElMessage({
        message: '保存成功',
        type: 'success',
      })
      initData()
    }
  })
}
// 视角切换
function animateCamera(current1, target1, current2, target2) {
  // current1 相机当前的位置
  // target1 相机的目标位置
  // current2 当前的controls的target
  // target2 新的controls的target
  var tween = new TWEEN.Tween({
    x1: current1.x, // 相机当前位置x
    y1: current1.y, // 相机当前位置y
    z1: current1.z, // 相机当前位置z
    x2: current2.x, // 控制当前的中心点x
    y2: current2.y, // 控制当前的中心点y
    z2: current2.z // 控制当前的中心点z
  })
  tween.to({
    x1: target1.x, // 新的相机位置x
    y1: target1.y, // 新的相机位置y
    z1: target1.z, // 新的相机位置z
    x2: target2.x, // 新的控制中心点位置x
    y2: target2.y, // 新的控制中心点位置x
    z2: target2.z // 新的控制中心点位置x
  }, 1000)
  tween.onUpdate(function () {
    defaultCamera.position.x = this.x1
    defaultCamera.position.y = this.y1
    defaultCamera.position.z = this.z1
    controls.target.x = this.x2
    controls.target.y = this.y2
    controls.target.z = this.z2
    controls.update()
  })
  tween.easing(TWEEN.Easing.Cubic.InOut)
  tween.start()
}
// 开始加载模型
function loadModel(name, data, is) {
  for (let i = 0; i < data.length; i++) {
    for (let a = 0; a < scene.children.length; a++) {
      if (data[i].id == scene.children[a].uuid) {
        return
      }
    }
    let gltfLoader = new GLTFLoader(); //obj加载器
    let modeltype = name
    if (name == 'Camera') if (data[i].type == 'Camera1') modeltype = 'Camera1'

    let modelMame = ''
    controls.enabled = true
    const manager = new THREE.LoadingManager()
    manager.setURLModifier((url, path) => {
      return (path || '') + url
    })
    const dracoLoader = new DRACOLoader()
    if (name == 'UAV') {
      gltfLoader = new GLTFLoader(manager) //obj加载器
      dracoLoader.setDecoderPath('./static/js/')
      dracoLoader.setDecoderConfig({ type: 'js' })
      gltfLoader.setDRACOLoader(dracoLoader)
    }

    gltfLoader.load('./static/3DModel/' + modeltype + '.glb', (gltf1) => {
      let model = gltf1.scene
      model.position.set(data[i].coordinate.x, data[i].coordinate.y, data[i].coordinate.z)
      if (data[i].rotation) {
        model.rotation.x = data[i].rotation.x
        model.rotation.y = data[i].rotation.y
        model.rotation.z = data[i].rotation.z
      }
      model.uuid = data[i].id
      model.name = data[i].objname
      model.userData.type = modeltype
      model.userData.x1 = data[i].coordinate.x1
      model.userData.y1 = data[i].coordinate.y1
      model.userData.z1 = data[i].coordinate.z1
      model.userData.normal = data[i].coordinate.normal
      model.userData.objinfo = data[i].objinfo
      // 显示在最上层
      if (modeltype == 'DevicePoint') model.renderOrder = 99
      model.traverse(function (obj) {
        if (obj.type === 'Mesh') {
          obj.material.visible = is
          if (modeltype == 'DevicePoint') obj.material.depthTest = false
        }
      })
      if (modeltype == 'UV') {
        if (data[i].line) {
          model.userData.line = JSON.parse(data[i].line)
        }
      }
      scene.add(model)
    })
  }
}
// 开始加载 无人车 巡视路线
function loadModelLine(data, is) {
  for (let i = 0; i < data.length; i++) {
    for (let a = 0; a < scene.children.length; a++) {
      if (data[i].id == scene.children[a].uuid) {
        return
      }
    }
    let point = []
    let dataPoint = JSON.parse(data[i].points)
    for (let a = 0; a < dataPoint.length; a++) {
      point.push(new THREE.Vector3(
        dataPoint[a].x,
        dataPoint[a].y + 0.05,
        dataPoint[a].z
      ))
    }
    let curve = new THREE.CatmullRomCurve3(point, false)
    let up = new THREE.Vector3(0, 1, 0)
    // 创建路线点列表
    let pathPointLists = new PathPointList()
    pathPointLists.set(curve.points, 0.5, 10, up, false)
    let geometry = new PathGeometry()
    geometry.update(pathPointLists, {
      width: 1,
      arrow: false
    })
    let texture = new THREE.TextureLoader().load(jt, function (texture) {
      texture.wrapS = texture.wrapT = THREE.RepeatWrapping
      texture.anisotropy = renderer.capabilities.getMaxAnisotropy()
    })

    // 创建材质
    var material = new THREE.MeshPhongMaterial({
      color: 0xFFFFFF,
      depthWrite: true,
      transparent: true,
      opacity: 1,
      side: THREE.DoubleSide,
      map: texture,
    })
    let mesh = new THREE.Mesh(geometry, material)
    mesh.uuid = data[i].id
    mesh.name = data[i].name
    mesh.userData.type = 'PatrolLine'
    mesh.userData.point = data[i].points
    mesh.traverse(function (obj) {
      if (obj.type === 'Mesh') {
        obj.material.visible = is
      }
    })
    scene.add(mesh)
    if (data[i].linePonit) {
      mesh.userData.linePonit = JSON.parse(data[i].linePonit)
      const linePonit = JSON.parse(data[i].linePonit)
      for (let a = 0; a < linePonit.length; a++) {
        let sprite = new THREE.Sprite(new THREE.SpriteMaterial({
          map: new THREE.TextureLoader().load(pointImg),
          transparent: true
        }))
        sprite.uuid = linePonit[a].uuid
        sprite.position.set(linePonit[a].x, linePonit[a].y, linePonit[a].z)
        sprite.userData.orderno = linePonit[a].orderno
        sprite.userData.deviceId = linePonit[a].deviceId
        sprite.userData.deviceName = linePonit[a].deviceName
        sprite.userData.type = 'linePonit'
        sprite.userData.parentid = data[i].id
        sprite.visible = false
        scene.add(sprite)
      }
    }
  }
}
// 开始加载 无人机 巡视路线
function loadModelLines(data, is) {
  for (let i = 0; i < data.length; i++) {
    for (let a = 0; a < scene.children.length; a++) {
      if (data[i].id == scene.children[a].uuid) {
        return
      }
    }
    let point = []
    let dataPoint = data[i].points
    for (let a = 0; a < dataPoint.length; a++) {
      point.push(new THREE.Vector3(
        dataPoint[a].x,
        dataPoint[a].y,
        dataPoint[a].z
      ))
    }
    let curve = new THREE.CatmullRomCurve3(point, false)
    let up = new THREE.Vector3(0, 1, 0)
    // 创建路线点列表
    let pathPointLists = new PathPointList()
    pathPointLists.set(curve.points, 0.5, 10, up, false)
    let geometry = new PathGeometry()
    geometry.update(pathPointLists, {
      width: 0.5,
      arrow: false
    })

    var material = new THREE.MeshPhongMaterial({
      color: 0x0383d9
    })
    let mesh = new THREE.Mesh(geometry, material)
    mesh.uuid = data[i].id
    mesh.name = data[i].name
    mesh.userData.name = data[i].name
    mesh.userData.type = 'UAVLine'
    mesh.userData.points = data[i].points
    mesh.traverse(function (obj) {
      if (obj.type === 'Mesh') {
        obj.material.visible = is
      }
    })
    scene.add(mesh)
    if (data[i].linePonit) {
      mesh.userData.linePonit = JSON.parse(data[i].linePonit)
      const linePonit = JSON.parse(data[i].linePonit)
      for (let a = 0; a < linePonit.length; a++) {
        let sprite = new THREE.Sprite(new THREE.SpriteMaterial({
          map: new THREE.TextureLoader().load(pointImg),
          transparent: true
        }))
        sprite.uuid = linePonit[a].uuid
        sprite.position.set(linePonit[a].x, linePonit[a].y, linePonit[a].z)
        sprite.userData.orderno = linePonit[a].orderno
        sprite.userData.deviceId = linePonit[a].deviceId
        sprite.userData.deviceName = linePonit[a].deviceName
        sprite.userData.type = 'UAVLinePonit'
        sprite.userData.parentid = data[i].id
        sprite.visible = false
        scene.add(sprite)
      }
    }
  }
}
// 重置
function reset() {
  if (transformControls) {
    transformControls.detach()
    controls.enabled = true
    scene.remove(transformControls)
  }
  defaultCamera.position.set(0.1653268513339453, 108.83794927572215, 71.85528617360808)
  controls.target.set(0, 0, 0)
  controls.update()
  clearDiv()

  multipleSelection.value = ''
  information.value = false
  videoShow.value = false
}
// 清除模型选中和右键选择框
function clearDiv() {
  if (transformControls) {
    transformControls.detach()
    controls.enabled = true
    scene.remove(transformControls)
  }
  for (let i = 0; i < scene.children.length; i++) {
    if (scene.children[i].type == 'BoxHelper') {
      scene.children[i].traverse(function (obj) {
        if (obj.type === 'Mesh') {
          obj.geometry.dispose()
          obj.material.dispose()
        }
      })
      scene.remove(scene.children[i])
      i--
    }
  }
  isTranslateRotate.value = false
  dataSel.value = ''
  selModel.value = ''
  dataIndex.value = null
  const contextmenu = document.getElementById('contextmenu')
  contextmenu.style.display = 'none'
  const contextimg = document.getElementById('contextimg')
  contextimg.style.display = 'none'
}










// 摄像机关联查询
const Ids = ref([])
function getData() {
  for (let i = 0; i < searchdata.value.length; i++) {
    if (searchdata.value[i] != undefined && searchdata.value[i].objinfo != undefined && searchdata.value[i].objinfo.patroldeviceId != undefined) {
      Ids.value.push(searchdata.value[i].objinfo.patroldeviceId)
    }
  }
  const params = {
    stationId: userStore.stationId,
    patrolDeviceName: taskName.value,
    areaId: getinfo.value.areaId,
    type: getinfo.value.type,
    size: getinfo.value.size,
    current: getinfo.value.current,
    ids: [...new Set(Ids.value)].toString(),
  }
  PatrolEquipmentType.value = []
  getDeviceByType({ dictcode: 'PatrolEquipmentType' }).then((res) => {
    res.data.forEach((row) => {
      if (row.itemcode == 10 || row.itemcode == 11) {
        PatrolEquipmentType.value.push(row)
      }
    })
    for (var i = 0; i < PatrolEquipmentType.value.length - 1; i++) {
      for (var j = i + 1; j < PatrolEquipmentType.value.length; j++) {
        if (PatrolEquipmentType.value[i].id == PatrolEquipmentType.value[j].id) {
          PatrolEquipmentType.value.splice(j, 1);
          j--;
        }
      }
    }
  })
  getArea({ stationCode: userStore.stationCode }).then((res) => {
    areaIdType.value = res.data
  })
  getdata(params).then((res) => {
    tableData.value = res.data.records
    getinfo.value.size = res.data.size
    getinfo.value.current = res.data.current
    total.value = res.data.total
    Ids.value.length = 0
  })
}
//巡视点位关联查询 
function getDevice() {
  for (let i = 0; i < searchdata.value.length; i++) {
    if (searchdata.value[i] != undefined && searchdata.value[i].objinfo != undefined && searchdata.value[i].objinfo.deviceId != undefined) {
      Ids.value.push(searchdata.value[i].objinfo.deviceId)
    }
  }
  const params = {
    ids: [...new Set(Ids.value)].toString(),
    stationId: userStore.stationId,
    size: deviceInfo.value.size,
    current: deviceInfo.value.current,
    deviceName: deviceName.value,
    mainDeviceId: deviceInfo.value.mainDeviceId,
    componentId: deviceInfo.value.componentId
  }
  getBayType({ stationCode: userStore.stationCode }).then((res) => {
    deviceComponent.value = res.data
  })
  getMainEquipment({ stationCode: userStore.stationCode }).then((res) => {
    deviceMain.value = res.data
  })

  getdevicedata(params).then((res) => {
    res.data.records.forEach((row) => {
      if (row.patroldeviceJson) {
        row.device_code = JSON.parse(row.patroldeviceJson).device_code
        row.device_name = JSON.parse(row.patroldeviceJson).device_name
      }
    })
    getMater()
    daviceData.value = JSON.parse(JSON.stringify(res.data.records))
    deviceInfo.value.size = res.data.size
    deviceInfo.value.current = res.data.current
    total.value = res.data.total
    Ids.value.length = 0

  })

}
const Metertype = ref([])
function getMater() {
  getDeviceByType({ dictcode: 'MeterType' }).then((res) => {
    Metertype.value = res.data
  })
}
function currency(list, itemcode) {
  let dictname = ''
  list.forEach((element) => {
    if (element.itemcode == itemcode) {
      dictname = element.dictname
    }
  })
  return dictname
}
//无人车关联查询
function getRobot() {
  for (let i = 0; i < searchdata.value.length; i++) {
    if (searchdata.value[i] != undefined && searchdata.value[i].objinfo != undefined && searchdata.value[i].objinfo.patroldeviceId != undefined) {
      Ids.value.push(searchdata.value[i].objinfo.patroldeviceId)
    }
  }
  const params = {
    ids: [...new Set(Ids.value)].toString(),
    size: robotInfo.value.size,
    current: robotInfo.value.current,
    stationId: userStore.stationId,
    type: '1,2',
    patrolDeviceName: patrolDeviceName.value,
  }
  getrobotdata(params).then((res) => {
    robotData.value = res.data.records
    robotInfo.value.size = res.data.size
    robotInfo.value.current = res.data.current
    total.value = res.data.total
    Ids.value.length = 0
  })
}
//无人机关联查询
function getUAV() {
  for (let i = 0; i < searchdata.value.length; i++) {
    if (searchdata.value[i] != undefined && searchdata.value[i].objinfo != undefined && searchdata.value[i].objinfo.patroldeviceId != undefined) {
      Ids.value.push(searchdata.value[i].objinfo.patroldeviceId)
    }
  }
  const params = {
    size: robotInfo.value.size,
    current: robotInfo.value.current,
    stationId: userStore.stationId,
    type: '13',
    patrolDeviceName: patrolDeviceName.value,
  }
  getPatrolDeviceList(params).then((res) => {
    robotData.value = res.data.records
    robotInfo.value.size = res.data.size
    robotInfo.value.current = res.data.current
    total.value = res.data.total
    Ids.value.length = 0
  })
}

//部件关联查询
function getComponentPage() {
  for (let i = 0; i < searchdata.value.length; i++) {
    if (searchdata.value[i] != undefined && searchdata.value[i].objinfo != undefined && searchdata.value[i].objinfo.componentId != undefined) {
      Ids.value.push(searchdata.value[i].objinfo.componentId)
    }
  }
  // 区域
  getArea({ stationCode: userStore.stationCode }).then((res) => {
    areaIdType.value = res.data
  })
  getSubstationBayByArea({ stationCode: userStore.stationCode }).then((res) => {
    bayIdType.value = res.data
  })

  const params = {
    ids: [...new Set(Ids.value)].toString(),
    size: pageInfo.value.size,
    current: pageInfo.value.current,
    stationCode: userStore.stationCode,
    areaId: pageInfo.value.areaId,
    bayId: pageInfo.value.bayId,
    componentName: componentName.value
  }
  getComponentByBayPage(JSON.stringify(params)).then(res => {
    componentData.value = res.data.records
    pageInfo.value.size = res.data.size
    pageInfo.value.current = res.data.current
    total.value = res.data.total
    Ids.value.length = 0
  })
}
// 主设备关联查询
function getmainDevicePage() {
  for (let i = 0; i < searchdata.value.length; i++) {
    if (searchdata.value[i] != undefined && searchdata.value[i].objinfo.componentId == undefined) {
      Ids.value.push(searchdata.value[i].objinfo.mainDeviceId)
    }
  }
  const params = {
    ids: [...new Set(Ids.value)].toString(),
    size: pageInfo.value.size,
    current: pageInfo.value.current,
    stationCode: userStore.stationCode,
    areaId: pageInfo.value.areaId,
    bayId: pageInfo.value.bayId,
    mainDeviceName: mainDeviceName.value
  }
  // 区域
  getArea({ stationCode: userStore.stationCode }).then((res) => {
    areaIdType.value = res.data
  })
  getSubstationBayByArea({ stationCode: userStore.stationCode }).then((res) => {
    bayIdType.value = res.data
  })
  getMainDevicePage(JSON.stringify(params)).then(res => {
    mainDeviceData.value = res.data.records
    pageInfo.value.size = res.data.size
    pageInfo.value.current = res.data.current
    total.value = res.data.total
    Ids.value.length = 0
  })
}

// 重置
function resetting() {
  taskName.value = ''
  getinfo.value.type = ''
  getinfo.value.areaId = ''
  getinfo.value.size = 10
  getinfo.value.current = 1
  multipleSelection.value = ''
  getData()
}
// 重置-点位
function resettingDevice() {
  deviceName.value = ''
  deviceInfo.value.mainDeviceId = ''
  deviceInfo.value.componentId = ''
  getDevice()
}
function associationConfirm() {
  if (multipleSelection.value == undefined || multipleSelection.value == '') {
    ElMessage({
      message: '请选择设备',
      type: 'warning',
    })
    return
  }
  if (lineDrapStart.value == true) {
    // 巡视点序号
    lineNum.value = lineNum.value + 1
    // 贴图
    let sprite = new THREE.Sprite(new THREE.SpriteMaterial({
      map: new THREE.TextureLoader().load(pointImg),
      transparent: false
    }))
    sprite.position.set(selModel.value.point.x, selModel.value.point.y + 1, selModel.value.point.z)
    sprite.userData.orderno = lineNum.value
    sprite.userData.deviceId = multipleSelection.value.deviceId
    sprite.userData.deviceName = multipleSelection.value.deviceName
    sprite.userData.parentid = dataSel.value.uuid
    sprite.userData.type = 'linePonit'
    scene.add(sprite)
    let arr = []
    for (let i = 0; i < scene.children.length; i++) {
      if (scene.children[i].userData.type == 'linePonit') {
        if (scene.children[i].userData.parentid == dataSel.value.uuid) {
          arr.push({
            uuid: scene.children[i].uuid,
            orderno: scene.children[i].userData.orderno,
            deviceId: scene.children[i].userData.deviceId,
            deviceName: scene.children[i].userData.deviceName,
            parentid: scene.children[i].userData.parentid,
            x: scene.children[i].position.x,
            y: scene.children[i].position.y,
            z: scene.children[i].position.z
          })
        }
      }
    }
    for (let i = 0; i < searchdata.value.length; i++) {
      if (searchdata.value[i].id == dataSel.value.uuid) {
        searchdata.value[i].children = arr
      }
    }
    association.value = false
    return
  }
  if (isUAVdropLine.value == true) {
    let uuid = 'testid'
    if (treeRef.value.getCurrentNode() != null) {
      uuid = treeRef.value.getCurrentNode().id
    }
    lineUAVNum.value = lineUAVNum.value + 1
    let sprite = new THREE.Sprite(new THREE.SpriteMaterial({
      map: new THREE.TextureLoader().load(pointImg),
      transparent: true
    }))
    sprite.position.set(selModel.value.point.x, selModel.value.point.y + 28, selModel.value.point.z)
    sprite.userData.orderno = lineUAVNum.value
    sprite.userData.deviceId = multipleSelection.value.deviceId
    sprite.userData.deviceName = multipleSelection.value.deviceName
    sprite.userData.parentid = uuid
    sprite.userData.type = 'UAVLinePonit'
    scene.add(sprite)

    let arr = []
    for (let i = 0; i < scene.children.length; i++) {
      if (scene.children[i].userData.type == 'UAVLinePonit') {
        if (scene.children[i].userData.parentid == uuid) {
          arr.push({
            uuid: scene.children[i].uuid,
            orderno: scene.children[i].userData.orderno,
            deviceId: scene.children[i].userData.deviceId,
            deviceName: scene.children[i].userData.deviceName,
            parentid: uuid,
            x: scene.children[i].position.x,
            y: scene.children[i].position.y,
            z: scene.children[i].position.z
          })
        }
      }
    }

    if (searchdata.value.length == 0) {
      searchdata.value.push({
        id: 'testid',
        name: '巡视路线1',
        isRename: true,
        add: true,
        children: arr
      })
      nextTick(() => {
        treeRef.value.setCurrentKey('testid')
      })
    } else {
      let data = treeRef.value.getCurrentNode()
      if (data == null) {
        let id = 'testid' + Number(searchdata.value.length + 1)
        searchdata.value.push({
          id: id,
          name: '巡视路线' + Number(searchdata.value.length + 1),
          isRename: true,
          add: true,
          children: arr
        })
        nextTick(() => {
          treeRef.value.setCurrentKey('testid' + Number(searchdata.value.length + 1))
        })
        data = searchdata.value[searchdata.value.length - 1]
      } else {
        data.children = arr
      }
      let vector3 = []
      let points = []
      for (let i = 0; i < data.children.length; i++) {
        vector3.push(new THREE.Vector3(data.children[i].x, data.children[i].y, data.children[i].z))
        points.push({ x: data.children[i].x, y: data.children[i].y, z: data.children[i].z })
      }
      let line = null
      let curve = new THREE.CatmullRomCurve3(vector3, false)
      let up = new THREE.Vector3(0, 1, 0)
      // 创建路线点列表
      let pathPointLists = new PathPointList()
      pathPointLists.set(curve.points, 0.5, 10, up, false)
      let geometry = new PathGeometry()
      geometry.update(pathPointLists, { width: 0.5, arrow: false })
      // 创建材质
      let material = new THREE.MeshPhongMaterial({ color: 0x0383d9 })
      line = new THREE.Mesh(geometry, material)
      line.name = 'testUAVLine'
      line.userData.name = data.name
      line.userData.type = 'UAVLine'
      line.userData.points = points
      line.userData.linePonit = data.children
      data.id = line.uuid
      for (let i = 0; i < data.children.length; i++) {
        data.children[i].parentid = line.uuid
        let model = scene.getObjectByProperty('uuid', data.children[i].uuid)
        model.userData.parentid = line.uuid
      }
      for (let i = 0; i < scene.children.length; i++) {
        if (scene.children[i].name == 'testUAVLine') {
          scene.remove(scene.children[i])
        }
      }
      nextTick(() => {
        treeRef.value.setCurrentKey(line.uuid)
      })
      scene.add(line)
    }
    association.value = false
    return
  }

  for (let i = 0; i < scene.children.length; i++) {
    if (selType.value == '01' || selType.value == '02' || selType.value == '04' || selType.value == '06') {
      if (scene.children[i].uuid === onjId.value) {
        scene.children[i].userData.objinfo = multipleSelection.value
        if (selType.value == '01' || selType.value == '04' || selType.value == '06') {
          scene.children[i].name = multipleSelection.value.patroldeviceName
        } else if (selType.value == '02') {
          scene.children[i].name = multipleSelection.value.deviceName
        }
        save()
        association.value = false
      }
    }
    if (selType.value == '05') {
      scene.children[i].traverse(function (obj) {
        if (obj.uuid === onjId.value) {
          if (multipleSelection.value.componentId) {
            obj.name = multipleSelection.value.componentName
          } else {
            obj.name = multipleSelection.value.mainDeviceName
          }
          obj.userData.type = 'EquipmentComponentSettings'
          obj.userData.objinfo = multipleSelection.value
          obj.userData.x = selModel.value.point.x
          obj.userData.y = selModel.value.point.y
          obj.userData.z = selModel.value.point.z
          association.value = false
          save()
        }
      })
    }
  }
}

//控制行变色
function tableRowClassName({ row, rowIndex }) {
  if (rowIndex % 2 === 0) {
    return 'warning-row'
  } else {
    return 'success-row'
  }
}
const multipleSelection = ref()
function rowClick(val) {
  multipleSelection.value = val
}
//视频配置
const devicechannelInfo = ref({})
const videoUrl = ref('')
function closeVideo(index) { // 关闭视频

}
// var source = new EventSource(userStore.webApiBaseUrl + '/sse/connect/taskresult_' + userStore.stationCode + "_" + userStore.userId,)
const ws1 = new WebSocket(userStore.wsApiBaseUrl + '/websocket/taskresult_' + userStore.stationCode + "_" + userStore.userId);
function setupWebSocket() {

ws1.onopen = () => {

};
ws1.onerror = (error) => {
};
ws1.onmessage = (e) => {
    
    if (e.data != 0) {
        getData()
      }
}
ws1.onclose = () => {

};

}



</script>
 
<style lang="scss" scoped>
#three_div {
  width: 100%;
  height: 100%;
}
//进度条
.loadingBox {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #001b4a;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2001;
}

.loadingBox1 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 98;
  color: #ffffff;
  font-size: 20px;
  margin-top: 60px;
}

.progress {
  height: 17px;
  background: #131a25;
  padding: 3px;
  overflow: visible;
  border-radius: 20px;
  border-top: 1px solid #000;
  border-bottom: 1px solid #7992a8;
  width: 300px;

  .progress-bar {
    border-radius: 20px;
    position: relative;
    animation: animate-positive 2s;
    float: left;
    width: 0;
    height: 100%;
    font-size: 12px;
    line-height: 20px;
    color: #fff;
    text-align: center;
    background-color: #009bff;
    -webkit-transition: width .6s ease;
    -o-transition: width .6s ease;
    transition: width .6s ease;

  }

  .active {
    animation: reverse stripes 0.40s linear infinite, animate-positive 2s;
  }

  .progress-value {
    display: none;
    padding: 3px 7px;
    font-size: 13px;
    color: #fff;
    border-radius: 4px;
    background: #191919;
    border: 1px solid #000;
    position: absolute;
    top: -40px;
    right: -10px;
  }

  .progress-value:after {
    content: "";
    border-top: 10px solid #191919;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    position: absolute;
    bottom: -6px;
    left: 26%;
  }
}

.progress-bar-striped {
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  -webkit-background-size: 40px 40px;
  background-size: 40px 40px;
}

@-webkit-keyframes stripes {
  from {
    background-position: 40px 0
  }

  to {
    background-position: 0 0
  }
}

@-o-keyframes stripes {
  from {
    background-position: 40px 0
  }

  to {
    background-position: 0 0
  }
}

@keyframes stripes {
  from {
    background-position: 40px 0
  }

  to {
    background-position: 0 0
  }
}

@-webkit-keyframes animate-positive {
  0% {
    width: 0;
  }
}

@keyframes animate-positive {
  0% {
    width: 0;
  }
}

#contextimg {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1001;
  display: none;
  color: #009bff;

  img {
    width: 40px;
    height: 40px;
  }
}

.context-operate {
  div {
    width: 62px;
    height: 62px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    background: rgba(29, 78, 111, 0.56);
    border-radius: 5px;
    margin: 10px 0;
    padding: 6px 0;
    border: 1px solid #225b7e;
    cursor: pointer;
    color: #ffffff;

    span {
      width: 100%;
      text-align: center;
      display: block;
      font-size: 14px;

      img {
        width: 20px;
        height: 20px;
        display: inline-block;
        ;
      }
    }
  }
}

.context-operate-hov {
  color: #009bff !important;
  box-shadow: 0 0 4px #009bff;
  border: 1px solid #009bff !important;
}

#context-operate {
  position: absolute;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  z-index: 1001;
  display: flex;

  div {
    width: 62px;
    height: 62px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    background: #1b2028;
    border-radius: 5px;
    margin: 0 10px;
    padding: 6px 0;
    border: 1px solid #ffffff;
    cursor: pointer;
    color: #ffffff;

    span {
      width: 100%;
      text-align: center;
      display: block;
      font-size: 14px;

      img {
        width: 20px;
        height: 20px;
        display: inline-block;
      }
    }
  }
}

#contextmenu {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1001;
  width: 180px;
  display: none;
  border-radius: 3px;
  background: url('@/assets/3d/wrccz.png') no-repeat;
  background-size: 100% 100%;
  padding: 10px 0;

  li {
    width: 100%;
    height: 32px;
    line-height: 32px;
    text-align: center;
    cursor: pointer;
    font-size: 14px;
    color: #ffffff;

    &:hover {
      color: #009bff;
      background: url('@/assets/3d/menu_hov.png') no-repeat;
      background-size: 100% 100%;
    }
  }
}

.contextmenu-disabled {
  color: rgba(255, 255, 255, 0.498) !important;

  &:hover {
    color: rgba(255, 255, 255, 0.498) !important;
    background: none !important;
  }
}

.three-top {
  position: absolute;
  left: 15px;
  top: 60px;
  z-index: 1001;
}

.three-right-list {
  position: absolute;
  right: 13px;
  top: 8px;
  z-index: 1001;
  width: 320px;
  height: calc(100% - 18px);
  background: url('@/assets/3d/spjk_ytbj.png') no-repeat;
  background-size: 100% 100%;

  .three-right-list-title {
    width: 100%;
    height: 50px;
    line-height: 60px;
    display: flex;
    justify-content: space-between;
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    padding: 10px 15px 0;
    margin-bottom: 10px;

    img {
      width: 15px;
      height: 15px;
      display: inline-block !important;
      margin-right: 20px;
      vertical-align: text-bottom;
    }
  }

  .three-right-list-main {
    width: 100%;
    padding: 20px 15px 0;

    .three-right-list-main-tab {
      width: 100%;
      display: flex;
      justify-content: space-between;
      margin: 10px 0;

      div {
        width: 30%;
        height: 30px;
        text-align: center;
        line-height: 30px;
        background: transparent;
        color: rgba(255, 255, 255, 0.498039215686275);
        border: 1px solid #225b7e;
        border-radius: 3px;
        cursor: pointer;
        font-size: 14px;
      }
    }

    .three-right-list-main-tab-hov {
      color: #009bff !important;
      border: 1px solid #009bff !important;
      background: rgba(0, 155, 255, 0.2) !important;
    }


    :deep(input) {
      color: #fff !important;
    }

  }

  ul {
    width: 100%;
    // height: 100%;
    margin-top: 10px;
    overflow: auto;
  }

  .three-right-list-main-li-hov {
    background: url('@/assets/3d/right_list_hov.png') no-repeat;
    color: #009bff !important;
    cursor: pointer;
  }

  li {
    width: 100%;
    height: 36px;
    line-height: 36px;
    padding: 0 20px;
    color: #fff;
    display: flex;
    font-size: 14px;
    justify-content: space-between;


    img {
      display: inline-block;
      vertical-align: text-bottom;
      margin-right: 6px;
    }

    &:hover {
      color: #009bff;
      // background: url('@/assets/3d/right_list_hov.png') no-repeat;
      background-size: 100% 100%;
    }
  }
}

.three-right-list-main-icon {
  display: flex;
  align-items: center;

  img {
    width: 14px;
    height: 14px;
    margin: 0 3px;
    cursor: pointer;
  }
}

.selType {
  width: 240px;

  color: #fff;
  border-radius: 3px;


  :deep(input) {
    color: #fff !important;
  }

  :deep(.el-popper.is-light) {
    background: #131a25 !important;
    border-color: #409eff94 !important;
    box-shadow: rgba(0, 155, 255, 0.298) 0px 0px 5px !important;
  }
}

.three-button {
  width: 130px;
  height: 36px;
  background: url('@/assets/3d/an_d.png') no-repeat;
  background-size: 100% 100%;
  color: #009bff;
  border: none;

  :deep(.el-button.is-disabled, .el-button.is-disabled:focus, .el-button.is-disabled:hover) {
    color: #009bff !important;
    background: url('@/assets/3d/an_d.png') no-repeat !important;
    background-size: 100% 100% !important;
    border: none !important;
  }

  &:focus {
    color: #009bff;
    background: url('@/assets/3d/an_d.png') no-repeat;
    background-size: 100% 100%;
  }

  &:hover {
    border: none !important;
    background: url('@/assets/3d/an_d1.png') no-repeat;
    background-size: 100% 100%;
    color: #009bff;
  }
}
.searchButton {
  border: #009bff solid 1px;
  background-color: #009bff;
  color: #ffffff;
}

.details-title {
  font-size: 16px;
  color: #ffffff;
}

.details-button {
  width: 112px;
  height: 36px;
  line-height: 36px;
  font-family: 'Arial Normal', 'Arial';
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  color: #009bff;
  text-align: center;
  background: url(@/assets/3d/xsri_an.png);
  background-size: 100% 100%;
  cursor: pointer;
  margin: 0 15px;
}

.details-button:hover {
  background: url(@/assets/3d/xsri_an1.png);
  background-size: 100% 100%;
}

:deep(.el-input__wrapper.is-focus) {
  box-shadow: 0 0 0 1px #009bff inset !important;
}

:deep(.el-input__wrapper .el-input__icon) {
  color: #009bff;
}

.back {
  background-color: #131a25 !important;
}
:deep(.is-disabled) {
  background-color: #0a232000 !important;
  color: #009bff !important;
}

:deep(.el-tree) {
  background-color: transparent !important;
}

:deep(.el-tree-node.is-current>.el-tree-node__content) {
  width: 100%;
  height: 40px;
  color: #009bff !important;
  background: url('@/assets/3d/right_list_hov.png') no-repeat !important;
  background-size: 100% 100%;
}

:deep(.el-tree-node__content) {
  width: 100% !important;
  height: 40px !important;
  margin: auto !important;
  color: #ffffff !important;
  background-color: transparent !important;
}

//视频大小
.videoPopup {
  position: fixed;
  bottom: 15px;
  right: 8px;
  z-index: 100;
  width: 320px;
  // margin: auto;
  height: calc(25vh);
  cursor: pointer;
  border: #009bff 1px solid;
  // margin: auto;
}

// 左侧列表显隐
.explicit {
  transform: translate(3px, 0px);
  transition: 0.5s;
}

.implicit {
  transform: translate(-410px, 0px);
  transition: 0.5s;
}

// :deep(.el-scrollbar) {
//   height: calc(85%) !important;
// }

//详细信息弹窗
.detailed-information {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  z-index: 1002;

  .examination {
    width: 406px;
    position: fixed;
    background: url(@/assets/3d/sxjxq.png) no-repeat;
    background-size: 100% 100%;
    padding: 0 25px 15px;

    .examination-title {
      margin-top: 20px;
      width: 100%;
      height: 40px;
      text-align: center;
      line-height: 40px;
      font-weight: 700;
      font-style: normal;
      font-size: 16px;
      color: #009bff;
      background: url(@/assets/3d/u714.png) no-repeat;
      background-size: 100% 100%;
    }

    .examination-close {
      position: absolute;
      top: 30px;
      right: 20px;
      cursor: pointer;
    }
    .examination-contont {
      color: #fff;
      font-size: 14px;
      .examination-contont-text {
        margin-top: 11px;
      }
    }
  }

}

:deep(.el-input-number__decrease) {
  background-color: transparent !important;
}

:deep(.el-input-number__increase) {
  background-color: transparent !important;
}
:deep(.el-input-number.is-controls-right .el-input-number__increase) {
  border: transparent !important;
}

:deep(.el-input-number.is-controls-right .el-input-number__decrease) {
  border: transparent !important;
}

:deep(.el-input-number .el-icon) {
  color: #009bff91 !important;
}
:deep(.el-input-number .el-icon:hover) {
  color: #009bff !important;
}

:deep(.el-input__inner) {
  color: #fff !important;
}

//按钮样式
.three-button1 {
  // position: absolute;
  // top: 10px;
  // right: 350px;
  width: 110px;
  height: 34px;
  background: url('@/assets/3d/xsri_an.png') no-repeat;
  background-size: 100% 100%;
  color: #009bff;
  border: none;

  :deep(.el-button.is-disabled, .el-button.is-disabled:focus, .el-button.is-disabled:hover) {
    color: #009bff !important;
    background: url('@/assets/3d/xsri_an.png') no-repeat !important;
    background-size: 100% 100% !important;
    border: none !important;
  }

  &:focus {
    color: #009bff;
    background: url('@/assets/3d/xsri_an.png') no-repeat;
    background-size: 100% 100%;
  }

  &:hover {
    border: none !important;
    background: url('@/assets/3d/xsri_an1.png') no-repeat;
    background-size: 100% 100%;
    color: #009bff;
  }
}

:deep(.is-checked .el-radio__inner) {
  border-color: #009bff !important;
  background: #009bff !important;
}

:deep(.el-radio__inner) {
  border-color: #009bff !important;
}

:deep(.is-checked .el-radio__inner::after) {
  width: 6px;
  height: 6px;
  border-radius: var(--el-radio-input-border-radius);
  background-color: rgb(15, 51, 42);
}

:deep(.el-radio) {
  --el-radio-text-color: #ffffff !important;
}



:deep(.el-textarea) {
  --el-input-bg-color: #ffffff00 !important;
  --el-input-border-color: #009bff2f !important;
  --el-input-text-color: #fff !important;
  --el-input-focus-border-color: #009bff2f !important;
}

:deeo(.el-radio__input.is-checked + .el-radio__label) {
  color: #009bff !important;
}

:deep(.el-checkbox__inner) {
  background-color: #009bff00;
  border: #009bff 1px solid;
}

:deep(.el-input__wrapper) {
  box-shadow: 0 0 0 1px #225b7e inset !important;
}

:deep(.el-date-editor .el-range-input) {
  background: #00000000;
}

:deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
  background-color: #009bff02 !important;
  border: #009bff 1px solid !important;
}

// cron 表达式
.tabsContent {
  width: 100%;
  border-top: 0px;
  padding: 0px 10px 20px 10px;
  box-sizing: border-box;
  border-radius: 0px 5px 5px 5px;
}

.tabs {
  width: 100%;
  display: flex;
  display: -webkit-flex;

  div {
    width: 43px;
    height: 31px;
    line-height: 31px;
    text-align: center;
    box-sizing: border-box;
    border-bottom: 1px solid #009bff;
    cursor: pointer;
  }

  .tabsTitle {
    box-sizing: border-box;
    border: 1px solid #009bff;
    border-radius: 5px 5px 0px 0px;
    background-color: #009bff;
    color: #ffffff;
    cursor: pointer;
  }
}

.spanmarg {
  display: inline-block;
  margin-left: 10px;
  color: #fff;
}

.field {
  width: 150px;
  position: relative;

  .fieldText {
    position: absolute;
    top: 0;
    right: 5px;
    z-index: 100;
    height: 40px;
    line-height: 40px;
    color: #009bff;
  }

  .fieldInput {
    height: 40px;
    // background-color:rgba(242, 246, 252, 1) ;
  }
}

.miao {
  :deep(.el-radio__input) {
    margin-top: -184px;
  }
}

.shi {
  :deep(.el-radio__input) {
    margin-top: -64px;
  }
}

.yue {
  :deep(.el-radio__input) {
    margin-top: -24px;
  }
}
:deep(.el-checkbox__input.is-checked + .el-checkbox__label) {
  color: #fff !important;
}

:deep(.el-checkbox.el-checkbox--large .el-checkbox__label) {
  color: #fff;
}

:deep(.el-input.is-disabled .el-input__inner) {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

.PatrolMonitoring {
  :deep(.el-table__body tr.current-row td) {
    border: 1px solid #009bff !important;
    border-right: 0px solid transparent !important;
    border-left: 0px solid transparent !important;
  }

  :deep(.current-row.el-table__row td) {
    border-right: 1px solid #009bff;
  }

  :deep(.current-row.el-table__row td:first-child) {
    border-left: 1px solid #009bff !important;
  }

  :deep(.current-row.el-table__row td:last-child) {
    border-right: 1px solid #009bff !important;
  }

  :deep(.current-row.el-table__row :last-child td) {
    border-bottom: 1px solid #009bff !important;
  }
}
</style>
