6084 lines
224 KiB
Vue
6084 lines
224 KiB
Vue
<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>
|