ThbTech/SmartSubstationPlatform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
17c349c5e7
SmartSubstationPlatform/riis-web/src/views/threevisitation/3DModelSet/index.vue

6084 lines
224 KiB
Vue
Raw Normal View History

设备数据检测
2025-04-29 14:23:16 +08:00
<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>
Reference in New Issue Copy Permalink