SmartSubstationPlatform/riis-web/src/views/threevisitation/3DModelSet/index.vue
2025-04-29 14:23:16 +08:00

6084 lines
224 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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(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(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: #131a25;
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>