Fuyuu
/
dt-admin-pc-v2
3
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

相机管理模块（cameraSet）添加方法、变量注释，删除过滤多余、未使用方法

master
Fuyuu 2 years ago
parent
4099d361b6
commit
7e75bff5af
4 changed files with 1731 additions and 1660 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 302
      src/components/earthMap/VideoControl.vue
  2. 2112
      src/views/earthMap/edit/EarthComp.vue
  3. 6
      src/views/military/modules/ai/aiMonitorArea/components/DtAiMonitorAreaForm.vue
  4. 305
      src/views/military/modules/equipmentManage/videoMonitorEquInfo/cameraManage/CameraSet.vue

302
src/components/earthMap/VideoControl.vue
View File

@ -1,75 +1,75 @@
<template> <template>
<div> <div>
<div class="camera-control"> <div class="camera-control">
<div class="camera-control-title"> <div class="camera-control-title"> 云台 </div>
云台 <hr style="background-color: #e2e2e2; height: 1px; border: 0" />
</div>
<hr style="background-color: #e2e2e2; height: 1px; border: 0;" />
<div class="camera-operate"> <div class="camera-operate">
<div class="camera-direct"> <div class="camera-direct">
<!--左上--> <!--左上-->
<div class="direct-item" style="background-position:0 0" @mousedown="ptzControl('LeftUp')" <div class="direct-item" style="background-position: 0 0" @mousedown="ptzControl('LeftUp')" @mouseup="stopMove()"> </div>
@mouseup="stopMove()">
</div>
<!--上--> <!--上-->
<div class="direct-item" style="background-position:-30px 0" @mousedown="ptzControl('Up')" <div class="direct-item" style="background-position: -30px 0" @mousedown="ptzControl('Up')" @mouseup="stopMove()"> </div>
@mouseup="stopMove()">
</div>
<!--右上--> <!--右上-->
<div class="direct-item" style="background-position:-60px 0" @mousedown="ptzControl('RightUp')" <div class="direct-item" style="background-position: -60px 0" @mousedown="ptzControl('RightUp')" @mouseup="stopMove()"> </div>
@mouseup="stopMove()">
</div>
<!--左--> <!--左-->
<div class="direct-item" style="background-position:0 -30px" @mousedown="ptzControl('Left')" <div class="direct-item" style="background-position: 0 -30px" @mousedown="ptzControl('Left')" @mouseup="stopMove()"> </div>
@mouseup="stopMove()">
</div>
<!--自动--> <!--自动-->
<div class="direct-item" style="background-position:-30px -30px"> <div class="direct-item" style="background-position: -30px -30px"> </div>
</div>
<!--右--> <!--右-->
<div class="direct-item" style="background-position:-60px -30px" @mousedown="ptzControl('Right')" <div class="direct-item" style="background-position: -60px -30px" @mousedown="ptzControl('Right')" @mouseup="stopMove()"> </div>
@mouseup="stopMove()">
</div>
<!--左下--> <!--左下-->
<div class="direct-item" style="background-position:0 -60px" @mousedown="ptzControl('LeftDown')" <div class="direct-item" style="background-position: 0 -60px" @mousedown="ptzControl('LeftDown')" @mouseup="stopMove()"> </div>
@mouseup="stopMove()">
</div>
<!--下--> <!--下-->
<div class="direct-item" style="background-position:-30px -60px" @mousedown="ptzControl('Down')" <div class="direct-item" style="background-position: -30px -60px" @mousedown="ptzControl('Down')" @mouseup="stopMove()"> </div>
@mouseup="stopMove()">
</div>
<!--右下--> <!--右下-->
<div class="direct-item" style="background-position:-60px -60px" @mousedown="ptzControl('RightDown')" <div class="direct-item" style="background-position: -60px -60px" @mousedown="ptzControl('RightDown')" @mouseup="stopMove()"> </div>
@mouseup="stopMove()">
</div>
</div> </div>
<div class="camera-function"> <div class="camera-function">
<div class="function-box"> <div class="function-box">
<div class="function-item" <div
style="background-position:-128px 0;border-right: 1px rgba(179, 177, 177, 0.97) dotted;" class="function-item"
@mousedown="ptzControlOther('ZoomIn')" @mouseup="stopMove()" title="变倍+"> style="background-position: -128px 0; border-right: 1px rgba(179, 177, 177, 0.97) dotted"
@mousedown="ptzControlOther('ZoomIn')"
@mouseup="stopMove()"
title="变倍+"
>
</div> </div>
<div class="function-item" style="background-position:-92px 0;" <div
@mousedown="ptzControlOther('ZoomOut')" @mouseup="stopMove()" title="变倍-"> class="function-item"
style="background-position: -92px 0"
@mousedown="ptzControlOther('ZoomOut')"
@mouseup="stopMove()"
title="变倍-"
>
</div> </div>
</div> </div>
<div class="function-box"> <div class="function-box">
<div class="function-item" <div
style="background-position:-128px -30px;border-right:1px rgba(179, 177, 177, 0.97) dotted; " class="function-item"
@mousedown="ptzControlOther('FocusZoomIn')" @mouseup="stopMove()" title="变焦+"> style="background-position: -128px -30px; border-right: 1px rgba(179, 177, 177, 0.97) dotted"
@mousedown="ptzControlOther('FocusZoomIn')"
@mouseup="stopMove()"
title="变焦+"
>
</div> </div>
<div class="function-item" style="background-position:-92px -30px;" <div
@mousedown="ptzControlOther('FocusZoomOut')" @mouseup="stopMove()" title="变焦-"> class="function-item"
style="background-position: -92px -30px"
@mousedown="ptzControlOther('FocusZoomOut')"
@mouseup="stopMove()"
title="变焦-"
>
</div> </div>
</div> </div>
<div class="function-box"> <div class="function-box">
<div class="function-item" <div
style="background-position:-202px 0; border-right:1px rgba(179, 177, 177, 0.97) dotted;" class="function-item"
@mousedown="handleScreenSnap()" title="抓拍"> style="background-position: -202px 0; border-right: 1px rgba(179, 177, 177, 0.97) dotted"
</div> @mousedown="handleScreenSnap()"
<div class="function-item" style="background-position:-162px -89px;" title="抓拍"
@mousedown="openImgListDialog()" title="抓拍列表"> >
</div> </div>
<div class="function-item" style="background-position: -162px -89px" @mousedown="openImgListDialog()" title="抓拍列表"> </div>
</div> </div>
</div> </div>
</div> </div>
@ -84,8 +84,6 @@
<a-col span="19"> <a-col span="19">
<input type="range" min="1" max="10" step="1" v-model="currentStep" /> <input type="range" min="1" max="10" step="1" v-model="currentStep" />
</a-col> </a-col>
</a-row> </a-row>
</div> </div>
<!-- 图片列表弹窗 --> <!-- 图片列表弹窗 -->
@ -95,14 +93,13 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { computed, defineComponent, ref, onMounted, onBeforeMount, getCurrentInstance, onBeforeUnmount, watch } from 'vue';
import { computed, defineComponent, ref, onMounted, onBeforeMount, getCurrentInstance, onBeforeUnmount, watch } from 'vue' // import ImgListDialog from '@/components/earthMap/ImgListDialog.vue'
// import ImgListDialog from '@/components/earthMap/ImgListDialog.vue' import * as ysApi from '@/api/yushiApi';
import * as ysApi from '@/api/yushiApi' import $mitt from '@/utils/earthMap/mitt';
import $mitt from "@/utils/earthMap/mitt"; import { defHttp } from '/@/utils/http/axios';
import { defHttp } from '/@/utils/http/axios'; export default defineComponent({
export default defineComponent({ name: 'VideoControl',
name: "VideoControl",
props: ['cameraCode', 'visibleChild', 'user', 'password'], props: ['cameraCode', 'visibleChild', 'user', 'password'],
components: { components: {
// ImgListDialog // ImgListDialog
@ -110,9 +107,9 @@ export default defineComponent({
setup(props) { setup(props) {
const { proxy }: any = getCurrentInstance(); const { proxy }: any = getCurrentInstance();
// const $mitt = mitt(); // const $mitt = mitt();
let currentStep = ref(5) let currentStep = ref(5);
let autoFlag = ref(false) let autoFlag = ref(false);
let visible = ref(false) let visible = ref(false);
let videoInfo = ref({ let videoInfo = ref({
cameraId: this.id, cameraId: this.id,
cameraName: this.name, cameraName: this.name,
@ -120,97 +117,110 @@ export default defineComponent({
cameraUser: this.user, cameraUser: this.user,
cameraPassword: this.password, cameraPassword: this.password,
instruct: this.instruct, instruct: this.instruct,
step: 0 step: 0,
}) });
let screenSnapList = ref({ let screenSnapList = ref({
title: '抓拍列表', title: '抓拍列表',
visible: false visible: false,
}) });
function ptzControl(instruct) { function ptzControl(instruct) {
if (!props.cameraCode) return if (!props.cameraCode) return;
let params = { let params = {
code: props.cameraCode, code: props.cameraCode,
PTZCmdID: ysApi.PtzCmdId[instruct], PTZCmdID: ysApi.PtzCmdId[instruct],
PTZCmdPara1: currentStep.value - 1, PTZCmdPara1: currentStep.value - 1,
PTZCmdPara2: currentStep.value - 1, PTZCmdPara2: currentStep.value - 1,
PTZCmdPara3: 2, PTZCmdPara3: 2,
} };
ysApi.PtzCtrl(params).then((data) => { ysApi.PtzCtrl(params).then((data) => {
console.log(data) console.log(data);
}) });
} }
function ptzControlOther(instruct) { function ptzControlOther(instruct) {
if (!props.cameraCode) return if (!props.cameraCode) return;
let params = { let params = {
code: props.cameraCode, code: props.cameraCode,
PTZCmdID: ysApi.PtzCmdId[instruct], PTZCmdID: ysApi.PtzCmdId[instruct],
PTZCmdPara1: 2, PTZCmdPara1: 2,
PTZCmdPara2: 1, PTZCmdPara2: 1,
PTZCmdPara3: 2, PTZCmdPara3: 2,
} };
ysApi.PtzCtrl(params).then((data) => { ysApi.PtzCtrl(params).then((data) => {
console.log(data) console.log(data);
}) });
} }
//停止移动 //停止移动
function stopMove() { function stopMove() {
if (!props.cameraCode) return if (!props.cameraCode) return;
let params: any = { let params: any = {
code: props.cameraCode, code: props.cameraCode,
PTZCmdID: null, PTZCmdID: null,
PTZCmdPara1: 3, PTZCmdPara1: 3,
PTZCmdPara2: 3, PTZCmdPara2: 3,
PTZCmdPara3: 0, PTZCmdPara3: 0,
} };
params.PTZCmdID = ysApi.PtzCmdId.AllStop params.PTZCmdID = ysApi.PtzCmdId.AllStop;
ysApi.PtzCtrl(params).then((_data) => { }) ysApi.PtzCtrl(params).then((_data) => {});
} }
function handleScreenSnap() { function handleScreenSnap() {
let params = { ip: this.ip } let params = { ip: this.ip };
this.onvifOperateHandler(this.url.getSnapshot, 'get', params, (res) => { this.onvifOperateHandler(this.url.getSnapshot, 'get', params, (res) => {
let snapshotUrl = res.data let snapshotUrl = res.data;
let newInfo = { snapshotUrl: snapshotUrl } let newInfo = { snapshotUrl: snapshotUrl };
Object.assign(newInfo, videoInfo.value) Object.assign(newInfo, videoInfo.value);
defHttp.delete({ defHttp
.delete(
{
url: this.url.screenSnap, url: this.url.screenSnap,
params: newInfo, params: newInfo,
},{isTransformResponse: false}) },
{ isTransformResponse: false }
)
// postAction(this.url.screenSnap, newInfo) // postAction(this.url.screenSnap, newInfo)
.then(() => { .then(() => {
// $mitt.emit('openNotification', '抓拍图片保存成功!', 2, 'success', '50px') // $mitt.emit('openNotification', '抓拍图片保存成功!', 2, 'success', '50px')
// $mitt.emit('openNotification',{msg: '抓拍图片保存成功!', dt: 2, type:'success', top: '50px'} ) // $mitt.emit('openNotification',{msg: '抓拍图片保存成功!', dt: 2, type:'success', top: '50px'} )
proxy.$message.success('抓拍图片保存成功!') proxy.$message.success('抓拍图片保存成功!');
}).catch(() => { })
.catch(() => {
// $mitt.emit('openNotification', '抓拍图片保存失败!', 2, 'error', '50px') // $mitt.emit('openNotification', '抓拍图片保存失败!', 2, 'error', '50px')
// $mitt.emit('openNotification',{msg: '抓拍图片保存失败!', dt: 2, type:'error', top: '50px'} ) // $mitt.emit('openNotification',{msg: '抓拍图片保存失败!', dt: 2, type:'error', top: '50px'} )
proxy.$message.error('抓拍图片保存失败!') proxy.$message.error('抓拍图片保存失败!');
}) });
}) });
} }
function openImgListDialog() { function openImgListDialog() {
screenSnapList.value.visible = true screenSnapList.value.visible = true;
} }
watch(() => props.visibleChild, (newValue) => { watch(
() => props.visibleChild,
(newValue) => {
if (newValue) { if (newValue) {
//目的端不存在 //目的端不存在
ysApi.PtzStart({ code: props.cameraCode }).then( ysApi
res => { .PtzStart({ code: props.cameraCode })
.then(
(res) => {
console.log(res); console.log(res);
}, }
// err => { console.log(err, 1); } // err => { console.log(err, 1); }
) )
.catch(err => { console.log(err, 2); }) .catch((err) => {
console.log(err, 2);
});
} }
},{ },
{
deep: true, // 深度监听 deep: true, // 深度监听
immediate: true // 第一次改变就执行 immediate: true, // 第一次改变就执行
}) }
);
return { return {
currentStep, currentStep,
@ -223,59 +233,57 @@ export default defineComponent({
stopMove, stopMove,
handleScreenSnap, handleScreenSnap,
openImgListDialog, openImgListDialog,
};
} },
} });
})
</script> </script>
<style scoped> <style scoped>
.camera-control { .camera-control {
color: #080000; color: #080000;
} }
.camera-control .el-slider__bar { .camera-control .el-slider__bar {
background-color: #b00303; background-color: #b00303;
} }
.camera-control .el-slider__button { .camera-control .el-slider__button {
border: 2px solid #848486; border: 2px solid #848486;
} }
.camera-control .el-slider__runway { .camera-control .el-slider__runway {
width: 92%; width: 92%;
} }
.camera-control .camera-operate { .camera-control .camera-operate {
display: -webkit-flex; display: -webkit-flex;
/* Safari */ /* Safari */
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
} }
.camera-control .camera-control-speed { .camera-control .camera-control-speed {
padding-top: 20px; padding-top: 20px;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
.camera-control .camera-control-speed input { .camera-control .camera-control-speed input {
width: 40px; width: 40px;
color: black; color: black;
} }
.camera-control .camera-control-title { .camera-control .camera-control-title {
padding-top: 7px; padding-top: 7px;
text-align: center; text-align: center;
height: 35px; height: 35px;
line-height: 28px; line-height: 28px;
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;
} }
.camera-control .camera-direct { .camera-control .camera-direct {
display: -webkit-flex; display: -webkit-flex;
/* Safari */ /* Safari */
width: 110px; width: 110px;
@ -285,9 +293,9 @@ export default defineComponent({
flex-wrap: wrap; flex-wrap: wrap;
padding: 10px 10px 0 0; padding: 10px 10px 0 0;
/*margin: auto;*/ /*margin: auto;*/
} }
.camera-control .camera-direct .direct-item { .camera-control .camera-direct .direct-item {
width: 30px; width: 30px;
height: 30px; height: 30px;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -297,19 +305,19 @@ export default defineComponent({
border: 1px rgba(190, 188, 188, 0.97) solid; border: 1px rgba(190, 188, 188, 0.97) solid;
border-radius: 1px; border-radius: 1px;
cursor: pointer; cursor: pointer;
} }
.camera-control .camera-direct .direct-item:hover { .camera-control .camera-direct .direct-item:hover {
background-color: rgba(208, 212, 208, 0.3); background-color: rgba(208, 212, 208, 0.3);
background-image: url('../../assets/ptz-icons-on.png'); background-image: url('../../assets/ptz-icons-on.png');
} }
.camera-control .camera-direct .direct-item .img { .camera-control .camera-direct .direct-item .img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.camera-control .camera-function { .camera-control .camera-function {
display: -webkit-flex; display: -webkit-flex;
/* Safari */ /* Safari */
/*margin-left: 20px;*/ /*margin-left: 20px;*/
@ -321,9 +329,9 @@ export default defineComponent({
flex-wrap: wrap; flex-wrap: wrap;
padding: 10px 0 0 10px; padding: 10px 0 0 10px;
/*margin: auto;*/ /*margin: auto;*/
} }
.camera-control .camera-function .function-box { .camera-control .camera-function .function-box {
display: -webkit-flex; display: -webkit-flex;
/* Safari */ /* Safari */
height: 30px; height: 30px;
@ -333,9 +341,9 @@ export default defineComponent({
border: 1px rgba(190, 188, 188, 0.97) solid; border: 1px rgba(190, 188, 188, 0.97) solid;
border-radius: 1px; border-radius: 1px;
margin: 1px 1px 1px 1px; margin: 1px 1px 1px 1px;
} }
.camera-control .camera-function .function-item { .camera-control .camera-function .function-item {
width: 32px; width: 32px;
height: 29px; height: 29px;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -343,29 +351,29 @@ export default defineComponent({
cursor: pointer; cursor: pointer;
background-image: url('../../assets/ptz-icons.png'); background-image: url('../../assets/ptz-icons.png');
/*border: 1px rgba(179, 177, 177, 0.64) solid;*/ /*border: 1px rgba(179, 177, 177, 0.64) solid;*/
} }
.camera-control .camera-function .function-item:hover { .camera-control .camera-function .function-item:hover {
background-color: rgba(208, 212, 208, 0.3); background-color: rgba(208, 212, 208, 0.3);
background-image: url('../../assets/ptz-icons-on.png'); background-image: url('../../assets/ptz-icons-on.png');
} }
.camera-control .camera-function .function-item .img { .camera-control .camera-function .function-item .img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
/* 滑动输入条 */ /* 滑动输入条 */
input[type='range'] { input[type='range'] {
display: block; display: block;
-webkit-appearance: none; -webkit-appearance: none;
background-color: #bdc3c7; background-color: #bdc3c7;
width: 100%; width: 100%;
height: 5px; height: 5px;
margin: 6% auto; margin: 6% auto;
} }
input[type='range']::-webkit-slider-thumb { input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none; -webkit-appearance: none;
height: 20px; height: 20px;
width: 20px; width: 20px;
@ -379,25 +387,25 @@ input[type='range']::-webkit-slider-thumb {
box-shadow: 0 0.125em 0.125em #3b4547; box-shadow: 0 0.125em 0.125em #3b4547;
/*添加底部阴影*/ /*添加底部阴影*/
cursor: pointer; cursor: pointer;
} }
input[type='range']::-webkit-slider-runnable-track { input[type='range']::-webkit-slider-runnable-track {
height: 10px; height: 10px;
border-radius: 10px; border-radius: 10px;
/*将轨道设为圆角的*/ /*将轨道设为圆角的*/
box-shadow: 0 1px 1px #def3f8, inset 0 0.125em 0.125em #0d1112; box-shadow: 0 1px 1px #def3f8, inset 0 0.125em 0.125em #0d1112;
/*轨道内置阴影效果*/ /*轨道内置阴影效果*/
} }
input[type='range']:focus { input[type='range']:focus {
outline: none; outline: none;
} }
input[type='range']::-webkit-slider-thumb:hover { input[type='range']::-webkit-slider-thumb:hover {
border: 5px solid #b00303; border: 5px solid #b00303;
} }
input[type='range']::-webkit-slider-thumb:active { input[type='range']::-webkit-slider-thumb:active {
transform: scale(1.2); transform: scale(1.2);
} }
</style> </style>

2112
src/views/earthMap/edit/EarthComp.vue
View File

File diff suppressed because it is too large

6
src/views/military/modules/ai/aiMonitorArea/components/DtAiMonitorAreaForm.vue
View File

@ -12,6 +12,7 @@
:disabled="disabled" :disabled="disabled"
placeholder="请选择监控相机" placeholder="请选择监控相机"
> >
<template #suffixIcon><VideoCameraOutlined /></template>
</a-tree-select> </a-tree-select>
</a-form-item> </a-form-item>
</a-col> </a-col>
@ -97,6 +98,7 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { VideoCameraOutlined } from '@ant-design/icons-vue';
import { ref, reactive, nextTick, computed, onMounted } from 'vue'; import { ref, reactive, nextTick, computed, onMounted } from 'vue';
import { defHttp } from '/@/utils/http/axios'; import { defHttp } from '/@/utils/http/axios';
import { useMessage } from '/@/hooks/web/useMessage'; import { useMessage } from '/@/hooks/web/useMessage';
@ -112,9 +114,9 @@
const userStore = useUserStore(); const userStore = useUserStore();
// 获取当前权限下的场景id // 获取当前权限下的场景id
// const sceneId = userStore.userInfo.sceneId; const sceneId = userStore.userInfo?.sceneId;
// 三级场景 00001-00001-00001 二级场景 00001-00002 一级场景 00001 // 三级场景 00001-00001-00001 二级场景 00001-00002 一级场景 00001
const sceneId = '00001-00002'; // const sceneId = '00001-00002';
// 场景列表 // 场景列表
const sceneList: any = []; const sceneList: any = [];

305
src/views/military/modules/equipmentManage/videoMonitorEquInfo/cameraManage/CameraSet.vue
View File

@ -11,10 +11,11 @@
<a-icon type="sync" @click="reNew" ref="reNewBtn" /> <a-icon type="sync" @click="reNew" ref="reNewBtn" />
</p> </p>
<div class="cameraBox"> <div class="cameraBox">
<!-- 树形控件界面--> <!--树形控件界面-->
<div class="treeBox"> <div class="treeBox">
<a-input-search style="margin-bottom: 8px" placeholder="搜索" @change="onChange" /> <a-input-search style="margin-bottom: 8px" placeholder="搜索" @change="onChange" />
<a-tree <a-tree
v-model:selectedKeys="selectedKeys"
:defaultExpandAll="true" :defaultExpandAll="true"
v-if="gData.length != 0" v-if="gData.length != 0"
:expanded-keys="expandedKeys" :expanded-keys="expandedKeys"
@ -28,7 +29,7 @@
> >
</a-tree> </a-tree>
</div> </div>
<!-- 菜单界面--> <!--菜单界面-->
<div class="menuBox"> <div class="menuBox">
<div class="menuTop"> <div class="menuTop">
<a-button type="primary" @click="add"> 新增 </a-button> <a-button type="primary" @click="add"> 新增 </a-button>
@ -48,16 +49,15 @@
<a-form-item label="监控点位" class="mustInput" name="siteName"> <a-form-item label="监控点位" class="mustInput" name="siteName">
<a-col :span="11"> <a-col :span="11">
<a-select name="lineNameTemp" v-model:value="lineNameTemp" @change="handleLineChange" :disabled="!changeTag"> <a-select name="lineNameTemp" v-model:value="lineNameTemp" @change="handleLineChange" :disabled="!changeTag">
<a-select-option v-for="(line, i) in lineArr" :key="line.id"> <a-select-option v-for="line in lineArr" :key="line.id">
{{ line.name }} {{ line.name }}
</a-select-option> </a-select-option>
</a-select> </a-select>
</a-col> </a-col>
<a-col :offset="1" :span="12"> <a-col :offset="1" :span="12">
<a-form-item style="margin-bottom: 0px"> <a-form-item style="margin-bottom: 0px">
<a-select name="siteNameTemp" v-model:value="siteNameTemp" @change="handleSiteChange" :disabled="!changeTag"> <a-select name="siteNameTemp" v-model:value="siteNameTemp" @change="handleSiteChange" :disabled="!changeTag">
<a-select-option v-for="(site, i) in siteArr" :key="site.id"> <a-select-option v-for="site in siteArr" :key="site.id">
{{ site.name }} {{ site.name }}
</a-select-option> </a-select-option>
</a-select> </a-select>
@ -70,12 +70,10 @@
<a-form-item label="相机IP" class="mustInput" name="ip"> <a-form-item label="相机IP" class="mustInput" name="ip">
<a-input v-model:value="cameraForm.ip" :disabled="!changeTag" /> <a-input v-model:value="cameraForm.ip" :disabled="!changeTag" />
</a-form-item> </a-form-item>
<a-form-item label="相机备用IP" class="mustInput" name="ip2"> <a-form-item label="相机备用IP" class="mustInput" name="ip2">
<a-input v-model:value="cameraForm.ip2" :disabled="!changeTag" /> <a-input v-model:value="cameraForm.ip2" :disabled="!changeTag" />
</a-form-item> </a-form-item>
<a-form-item label="相机端口" class="mustInput" name="port"> <a-form-item label="相机端口" class="mustInput" name="port">
<!-- <a-input v-model="cameraForm.port" type="number" :disabled="!changeTag" /> -->
<a-input-number v-model:value="cameraForm.port" :disabled="!changeTag" style="width: 100%" /> <a-input-number v-model:value="cameraForm.port" :disabled="!changeTag" style="width: 100%" />
</a-form-item> </a-form-item>
<a-form-item label="相机认证用户名" class="mustInput" name="user"> <a-form-item label="相机认证用户名" class="mustInput" name="user">
@ -85,8 +83,6 @@
<a-input-password v-model:value="cameraForm.password" :disabled="!changeTag" /> <a-input-password v-model:value="cameraForm.password" :disabled="!changeTag" />
</a-form-item> </a-form-item>
<a-form-item label="厂家" class="mustInput" name="factory" v-if="cameraFactorys.length > 0"> <a-form-item label="厂家" class="mustInput" name="factory" v-if="cameraFactorys.length > 0">
<!-- <j-dict-select-tag v-model:value="cameraForm.factory" placeholder="选择"
dictCode="ms_camera_factory" :disabled="!changeTag" /> -->
<!-- 使用antd原生下拉框 --> <!-- 使用antd原生下拉框 -->
<a-select v-model:value="cameraForm.factory" :disabled="!changeTag"> <a-select v-model:value="cameraForm.factory" :disabled="!changeTag">
<template :key="Number(cameraFactory.value)" v-for="cameraFactory in cameraFactorys"> <template :key="Number(cameraFactory.value)" v-for="cameraFactory in cameraFactorys">
@ -94,10 +90,8 @@
</template> </template>
</a-select> </a-select>
</a-form-item> </a-form-item>
<a-form-item label="类型" class="mustInput" name="type"> <a-form-item label="相机类型" class="mustInput" name="type">
<a-col :span="11"> <a-col :span="11">
<!-- <j-dict-select-tag name="type" v-model:value="cameraForm.type" placeholder="选择"
dictCode="ms_camera_type" @change="typeChange" :disabled="!changeTag" /> -->
<!-- 使用antd原生下拉框 --> <!-- 使用antd原生下拉框 -->
<a-select name="type" v-model:value="cameraForm.type" :disabled="!changeTag" @change="typeChange"> <a-select name="type" v-model:value="cameraForm.type" :disabled="!changeTag" @change="typeChange">
<template :key="Number(cameraType.value)" v-for="cameraType in cameraTypes"> <template :key="Number(cameraType.value)" v-for="cameraType in cameraTypes">
@ -106,10 +100,6 @@
</a-select> </a-select>
</a-col> </a-col>
<a-col :offset="1" :span="12"> <a-col :offset="1" :span="12">
<!-- <a-form-item style="margin-bottom: 0px;">
<j-dict-select-tag name="style" v-model:value="cameraForm.style" placeholder="选择"
dictCode="ms_camera_style" :disabled="!flag || !changeTag" />
</a-form-item> -->
<!-- 使用antd原生下拉框 --> <!-- 使用antd原生下拉框 -->
<a-select name="style" v-model:value="cameraForm.style" :disabled="!flag || !changeTag"> <a-select name="style" v-model:value="cameraForm.style" :disabled="!flag || !changeTag">
<template :key="Number(cameraStyle.value)" v-for="cameraStyle in cameraStyles"> <template :key="Number(cameraStyle.value)" v-for="cameraStyle in cameraStyles">
@ -118,14 +108,12 @@
</a-select> </a-select>
</a-col> </a-col>
</a-form-item> </a-form-item>
<a-form-item label="安装高度" class="mustInput" name="height"> <a-form-item label="安装高度" class="mustInput" name="height">
<!-- <a-input v-model="cameraForm.height" type="number" :disabled="!changeTag" /> -->
<a-input-number v-model:value="cameraForm.height" :disabled="!changeTag" style="width: 100%" /> <a-input-number v-model:value="cameraForm.height" :disabled="!changeTag" style="width: 100%" />
</a-form-item> </a-form-item>
<a-form-item label="录像机" name="videoRecorder"> <a-form-item label="录像机" name="videoRecorder">
<a-select v-model:value="cameraForm.videoRecorderId" :disabled="!changeTag"> <a-select v-model:value="cameraForm.videoRecorderId" :disabled="!changeTag">
<a-select-option v-for="(vr, i) in videoRecorderArr" :value="vr.id" :key="vr.id"> <a-select-option v-for="vr in videoRecorderArr" :value="vr.id" :key="vr.id">
{{ vr.name }} {{ vr.name }}
</a-select-option> </a-select-option>
</a-select> </a-select>
@ -160,27 +148,19 @@
<a-form-item label="地理纬度" name="latitude"> <a-form-item label="地理纬度" name="latitude">
<a-input v-model:value="cameraForm.latitude" disabled /> <a-input v-model:value="cameraForm.latitude" disabled />
</a-form-item> </a-form-item>
<!-- <a-form-model-item :wrapper-col="{offset:8,span:14}" name="style">
<j-dict-select-tag v-model="cameraForm.style" placeholder="选择" dictCode="ms_camera_style"/>
</a-form-model-item>-->
<a-form-item label="视线水平左夹角" name="leftAngle"> <a-form-item label="视线水平左夹角" name="leftAngle">
<!-- <a-input v-model="cameraForm.leftAngle" type="number" :disabled="!changeTag" /> -->
<a-input-number v-model:value="cameraForm.leftAngle" :disabled="!changeTag" style="width: 100%" /> <a-input-number v-model:value="cameraForm.leftAngle" :disabled="!changeTag" style="width: 100%" />
</a-form-item> </a-form-item>
<a-form-item label="视线水平右夹角" name="rightAngle"> <a-form-item label="视线水平右夹角" name="rightAngle">
<!-- <a-input v-model="cameraForm.rightAngle" type="number" :disabled="!changeTag" /> -->
<a-input-number v-model:value="cameraForm.rightAngle" :disabled="!changeTag" style="width: 100%" /> <a-input-number v-model:value="cameraForm.rightAngle" :disabled="!changeTag" style="width: 100%" />
</a-form-item> </a-form-item>
<a-form-item label="视野中央有效视距" name="viewDistance"> <a-form-item label="视野中央有效视距" name="viewDistance">
<!-- <a-input v-model="cameraForm.viewDistance" type="number" :disabled="!changeTag" /> -->
<a-input-number v-model:value="cameraForm.viewDistance" :disabled="!changeTag" style="width: 100%" /> <a-input-number v-model:value="cameraForm.viewDistance" :disabled="!changeTag" style="width: 100%" />
</a-form-item> </a-form-item>
<a-form-item label="采样帧率" name="frameRate"> <a-form-item label="采样帧率" name="frameRate">
<!-- <a-input v-model="cameraForm.frameRate" type="number" :disabled="!changeTag" /> -->
<a-input-number v-model:value="cameraForm.frameRate" :disabled="!changeTag" style="width: 100%" /> <a-input-number v-model:value="cameraForm.frameRate" :disabled="!changeTag" style="width: 100%" />
</a-form-item> </a-form-item>
<a-form-item label="最大跟踪范围" name="maxRange"> <a-form-item label="最大跟踪范围" name="maxRange">
<!-- <a-input v-model="cameraForm.maxRange" type="number" :disabled="!changeTag" /> -->
<a-input-number v-model:value="cameraForm.maxRange" :disabled="!changeTag" style="width: 100%" /> <a-input-number v-model:value="cameraForm.maxRange" :disabled="!changeTag" style="width: 100%" />
</a-form-item> </a-form-item>
<a-form-item label="云台控制IP" name="cloudCtrlIp"> <a-form-item label="云台控制IP" name="cloudCtrlIp">
@ -190,23 +170,18 @@
<a-input v-model:value="cameraForm.cloudCtrlPort" :disabled="!changeTag" /> <a-input v-model:value="cameraForm.cloudCtrlPort" :disabled="!changeTag" />
</a-form-item> </a-form-item>
<a-form-item label="零方位角" name="zeroAzimuth"> <a-form-item label="零方位角" name="zeroAzimuth">
<!-- <a-input v-model="cameraForm.zeroAzimuth" type="number" :disabled="!changeTag" /> -->
<a-input-number v-model:value="cameraForm.zeroAzimuth" :disabled="!changeTag" style="width: 100%" /> <a-input-number v-model:value="cameraForm.zeroAzimuth" :disabled="!changeTag" style="width: 100%" />
</a-form-item> </a-form-item>
<a-form-item label="最大仰角" name="maxElevation"> <a-form-item label="最大仰角" name="maxElevation">
<!-- <a-input v-model="cameraForm.maxElevation" type="number" :disabled="!changeTag" /> -->
<a-input-number v-model:value="cameraForm.maxElevation" :disabled="!changeTag" style="width: 100%" /> <a-input-number v-model:value="cameraForm.maxElevation" :disabled="!changeTag" style="width: 100%" />
</a-form-item> </a-form-item>
<a-form-item label="安装垂直角" name="fixedAngle"> <a-form-item label="安装垂直角" name="fixedAngle">
<!-- <a-input v-model="cameraForm.fixedAngle" type="number" :disabled="!changeTag" /> -->
<a-input-number v-model:value="cameraForm.fixedAngle" :disabled="!changeTag" style="width: 100%" /> <a-input-number v-model:value="cameraForm.fixedAngle" :disabled="!changeTag" style="width: 100%" />
</a-form-item> </a-form-item>
<a-form-item label="最大可视距离" name="maxVisibleDistance"> <a-form-item label="最大可视距离" name="maxVisibleDistance">
<!-- <a-input v-model="cameraForm.maxVisibleDistance" type="number" :disabled="!changeTag" /> -->
<a-input-number v-model:value="cameraForm.maxVisibleDistance" :disabled="!changeTag" style="width: 100%" /> <a-input-number v-model:value="cameraForm.maxVisibleDistance" :disabled="!changeTag" style="width: 100%" />
</a-form-item> </a-form-item>
<a-form-item label="变倍因子" name="zoomFactor"> <a-form-item label="变倍因子" name="zoomFactor">
<!-- <a-input v-model="cameraForm.zoomFactor" type="number" :disabled="!changeTag" /> -->
<a-input-number v-model:value="cameraForm.zoomFactor" :disabled="!changeTag" style="width: 100%" /> <a-input-number v-model:value="cameraForm.zoomFactor" :disabled="!changeTag" style="width: 100%" />
</a-form-item> </a-form-item>
<a-form-item label="报警持续时间（秒）" name="alarmNum"> <a-form-item label="报警持续时间（秒）" name="alarmNum">
@ -250,137 +225,187 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'; import { ref, onMounted } from 'vue';
import { useUserStore } from '/@/store/modules/user'; import { useUserStore } from '/@/store/modules/user';
import { useMessage } from '/@/hooks/web/useMessage'; import { useMessage } from '/@/hooks/web/useMessage';
import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
import axios from 'axios';
import { defHttp } from '/@/utils/http/axios'; import { defHttp } from '/@/utils/http/axios';
import { Modal } from 'ant-design-vue'; import { Modal } from 'ant-design-vue';
// 厂家 // 厂家
const cameraFactorys: any = ref([]); const cameraFactorys: any = ref([]);
// 类型 // 相机类型
const cameraTypes: any = ref([]); const cameraTypes: any = ref([]);
// 相机光照颜色
const cameraStyles: any = ref([]); const cameraStyles: any = ref([]);
// 获取场景类型字典 // 获取相机厂家
const getCameraFactory = () => { const getCameraFactory = () => {
return defHttp.get({ url: '/sys/dict/getDictItems/ms_camera_factory' }, { isTransformResponse: false }); return defHttp.get({ url: '/sys/dict/getDictItems/ms_camera_factory' }, { isTransformResponse: false });
}; };
//获取场景类型字典 //获取相机类型
const getCameraType = () => { const getCameraType = () => {
return defHttp.get({ url: '/sys/dict/getDictItems/ms_camera_type' }, { isTransformResponse: false }); return defHttp.get({ url: '/sys/dict/getDictItems/ms_camera_type' }, { isTransformResponse: false });
}; };
//获取场景类型字典 //获取相机光色
const getCameraStyle = () => { const getCameraStyle = () => {
return defHttp.get({ url: '/sys/dict/getDictItems/ms_camera_style' }, { isTransformResponse: false }); return defHttp.get({ url: '/sys/dict/getDictItems/ms_camera_style' }, { isTransformResponse: false });
}; };
const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 6 } }); const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 6 } });
const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 18 } }); const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 18 } });
// 刷新按钮
const reNewBtn = ref(); const reNewBtn = ref();
// 当前登录用户信息
const userStore = useUserStore(); const userStore = useUserStore();
// 消息弹窗
const { createMessage } = useMessage(); const { createMessage } = useMessage();
const x = 3; // 展开指定的树节点
const y = 2;
const z = 1;
// const gData = []
// const dataList = []
const getParentKey = (key, tree) => {
let parentKey;
for (let i = 0; i < tree.length; i++) {
const node = tree[i];
if (node.children) {
if (node.children.some((item) => item.id === key)) {
parentKey = node.id;
} else if (getParentKey(key, node.children)) {
parentKey = getParentKey(key, node.children);
}
}
}
return parentKey;
};
const expandedKeys: any = ref([]); const expandedKeys: any = ref([]);
const searchValue = ref(''); // 是否自动关闭父节点
const autoExpandParent = ref(true); const autoExpandParent = ref(true);
// 相机数据
const gData: any = ref([]); const gData: any = ref([]);
// 相机树结构数据
const treeData: any = ref([]); const treeData: any = ref([]);
// 每一条数据，包括防区、站点、相机
const dataList: any = ref([]); const dataList: any = ref([]);
// 用于替换对应字段名
const replaceFields = ref({ const replaceFields = ref({
key: 'id', key: 'id',
title: 'name', title: 'name',
children: 'children', children: 'children',
}); });
const url = ref({ const url = ref({
// 获取所有相机信息
getSiteCameraInfo: '/military/camera/site/getSiteCameraInfo', getSiteCameraInfo: '/military/camera/site/getSiteCameraInfo',
// 根据id获取相机信息
getCameraInfoById: '/military/camera/setting/queryById', getCameraInfoById: '/military/camera/setting/queryById',
// 添加相机
add: '/military/camera/setting/add', add: '/military/camera/setting/add',
// 编辑相机
edit: '/military/camera/setting/edit', edit: '/military/camera/setting/edit',
// 删除相机
delete: '/military/camera/setting/delete', delete: '/military/camera/setting/delete',
// 获取录像机列表
getVideoRecorderInfo: '/military/videoRecorder/qryCameraList', getVideoRecorderInfo: '/military/videoRecorder/qryCameraList',
// 第三方平台接口
getVMCameraInfo: '/third/api/getVMCameraInfo', getVMCameraInfo: '/third/api/getVMCameraInfo',
}); });
// 监控点位-防区
const lineNameTemp = ref(''); const lineNameTemp = ref('');
// 监控点位-站点
const siteNameTemp = ref(''); const siteNameTemp = ref('');
// 录像机
const vrNameTemp = ref(''); const vrNameTemp = ref('');
// 选择的相机id
const dataId = ref(''); const dataId = ref('');
// 取消
const cancelFlag = ref(false); const cancelFlag = ref(false);
// 不知道
const flag = ref(false); const flag = ref(false);
// 表单修改状态
const changeTag = ref(false); const changeTag = ref(false);
// 按钮修改状态
const getTag = ref(false); const getTag = ref(false);
// 区分添加/修改
const addOrEdit = ref(false); const addOrEdit = ref(false);
// 相机信息表单
const cameraForm: any = ref({ const cameraForm: any = ref({
// 相机id
id: '', id: '',
// 相机ip
ip: '', ip: '',
// 备用ip
ip2: '', ip2: '',
// 相机端口
port: '', port: '',
// 厂家
factory: '', factory: '',
// 相机名称
cameraName: '',
// 相机类型
cameraType: '',
//相机光色
style: '', style: '',
// 相机类型
type: '', type: '',
// 相机认证用户名
user: '', user: '',
siteId: '', // 相机认证密码
password: '', password: '',
// 相机认证通道号
channel: '', channel: '',
// 预览rtsp地址
preRtsp: '', preRtsp: '',
// 分析rtsp地址
analysisRtsp: '', analysisRtsp: '',
// 录像rtsp地址
recordRtsp: '', recordRtsp: '',
// 防区名称
lineName: '', lineName: '',
// 站点id
siteId: '',
// 站点名称
siteName: '', siteName: '',
// 云台控制ip
cloudCtrlIp: '', cloudCtrlIp: '',
// 云台控制端口
cloudCtrlPort: '', cloudCtrlPort: '',
cameraName: '', // 地理经度
latitude: '',
longitude: '', longitude: '',
// 地理纬度
latitude: '',
// 安装高度
height: '', height: '',
// 录像机id
videoRecorderId: '',
// 录像机名称
videoRecorder: '', videoRecorder: '',
cameraType: '', // 相机颜色？？
cameraColor: '', cameraColor: '',
// 视线水平左夹角
leftAngle: '', leftAngle: '',
// 视线水平右夹角
rightAngle: '', rightAngle: '',
// 视野中央有效视距
viewDistance: '', viewDistance: '',
// 采样帧率
frameRate: '', frameRate: '',
// 最大跟踪范围
maxRange: '', maxRange: '',
// 零方位角
zeroAzimuth: '', zeroAzimuth: '',
// 最大仰角
maxElevation: '', maxElevation: '',
// 安装垂直角
fixedAngle: '', fixedAngle: '',
// 最大可视距离
maxVisibleDistance: '', maxVisibleDistance: '',
// 变倍因子
zoomFactor: '', zoomFactor: '',
videoRecorderId: '', // 白光开始时间
dayBeginTime: '', dayBeginTime: '',
// 白光结束时间
dayEndTime: '', dayEndTime: '',
// 报警持续时间
alarmNum: undefined, alarmNum: undefined,
// Web播放地址
webcastAddress: '', webcastAddress: '',
}); });
const lineArr: any = ref([]); //线路数据 // 防区数据
const siteData: any = ref({}); //线路站点对应关系 const lineArr: any = ref([]);
const siteArr: any = ref([]); //站点数据 // 防区站点对应关系
const videoRecorderArr: any = ref([]); //录像机数据 const siteData: any = ref({});
// 站点数据
const siteArr: any = ref([]);
// 录像机数据
const videoRecorderArr: any = ref([]);
// 选中的相机节点
const selectedKeys: any = ref([]);
onMounted(() => { onMounted(() => {
dataList.value.length = 0; dataList.value.length = 0;
// 获取相机数据
getTreeInfo(); getTreeInfo();
// 厂家 // 厂家
getCameraFactory().then((response) => { getCameraFactory().then((response) => {
@ -388,28 +413,29 @@
cameraFactorys.value = response.result; cameraFactorys.value = response.result;
} }
}); });
// 类型 // 相机类型
getCameraType().then((response) => { getCameraType().then((response) => {
if (response.success) { if (response.success) {
cameraTypes.value = response.result; cameraTypes.value = response.result;
} }
}), });
// 相机光色
getCameraStyle().then((response) => { getCameraStyle().then((response) => {
if (response.success) { if (response.success) {
cameraStyles.value = response.result; cameraStyles.value = response.result;
} }
}); });
// 录像机列表
getVideoRecorderArr(); getVideoRecorderArr();
}); });
// 选择防区
function handleLineChange(id) { function handleLineChange(id) {
changeSiteArr(id); changeSiteArr(id);
} }
// 选择站点
function handleSiteChange(id) { function handleSiteChange(id) {
cameraForm.value.siteId = id; cameraForm.value.siteId = id;
} }
function changeSiteArr(id) { function changeSiteArr(id) {
let lineLen = gData.value.length; let lineLen = gData.value.length;
siteArr.value = []; siteArr.value = [];
@ -431,17 +457,20 @@
cameraForm.value.siteName = siteArr.value[0].name; cameraForm.value.siteName = siteArr.value[0].name;
siteNameTemp.value = cameraForm.value.siteName; //改变线路，默认回显该线路的第一个站点 siteNameTemp.value = cameraForm.value.siteName; //改变线路，默认回显该线路的第一个站点
} }
// 新增相机
function add() { function add() {
addOrEdit.value = true; addOrEdit.value = true;
cancelFlag.value = true; cancelFlag.value = true;
changeTag.value = true; changeTag.value = true;
getTag.value = false; getTag.value = false;
dataId.value = ''; dataId.value = '';
// 清空树选中节点
selectedKeys.value = [];
fromClear(); fromClear();
} }
// 编辑相机
function edit() { function edit() {
// 只有光电追踪仪和枪机有不同色光
if (cameraForm.value.type == '1' || cameraForm.value.type == '3') { if (cameraForm.value.type == '1' || cameraForm.value.type == '3') {
flag.value = true; flag.value = true;
} else { } else {
@ -450,7 +479,6 @@
} }
if (cameraForm.value.id == '') { if (cameraForm.value.id == '') {
// this.$message.info("请先选择需要修改的数据!");
createMessage.info('请先选择需要修改的数据!'); createMessage.info('请先选择需要修改的数据!');
return false; return false;
} }
@ -458,7 +486,7 @@
addOrEdit.value = true; addOrEdit.value = true;
changeTag.value = true; changeTag.value = true;
} }
// 删除相机
function del() { function del() {
Modal.confirm({ Modal.confirm({
title: '确认删除', title: '确认删除',
@ -472,11 +500,12 @@
}, },
{ joinParamsToUrl: true, isTransformResponse: false } { joinParamsToUrl: true, isTransformResponse: false }
) )
// deleteAction(that.url.delete, {id: that.cameraForm.id})
.then((res) => { .then((res) => {
if (res.success) { if (res.success) {
createMessage.success(res.message); createMessage.success(res.message);
// 置空表单
fromClear(); fromClear();
// 重新获取相机数据
getTreeInfo(); getTreeInfo();
getTag.value = false; getTag.value = false;
} else { } else {
@ -489,11 +518,11 @@
}, },
}); });
} }
// 提交表单数据
function submitForm() { function submitForm() {
// ip校验规则
const pattern = const pattern =
/(25[0-5]|2[0-4]\d|[0-1]\d{2}|[1-9]?\d)\.(25[0-5]|2[0-4]\d|[0-1]\d{2}|[1-9]?\d)\.(25[0-5]|2[0-4]\d|[0-1]\d{2}|[1-9]?\d)\.(25[0-5]|2[0-4]\d|[0-1]\d{2}|[1-9]?\d)/; /(25[0-5]|2[0-4]\d|[0-1]\d{2}|[1-9]?\d)\.(25[0-5]|2[0-4]\d|[0-1]\d{2}|[1-9]?\d)\.(25[0-5]|2[0-4]\d|[0-1]\d{2}|[1-9]?\d)\.(25[0-5]|2[0-4]\d|[0-1]\d{2}|[1-9]?\d)/;
let settingId = cameraForm.value.id;
let cloudCtrlIp = cameraForm.value.cloudCtrlIp; let cloudCtrlIp = cameraForm.value.cloudCtrlIp;
let cloudCtrlPort = cameraForm.value.cloudCtrlPort; let cloudCtrlPort = cameraForm.value.cloudCtrlPort;
let cameraName = cameraForm.value.cameraName; let cameraName = cameraForm.value.cameraName;
@ -563,6 +592,7 @@
}, },
]; ];
let errorMessage = ''; let errorMessage = '';
// 错误信息拼接
if (!cameraName || !siteName || !port || !user || !password || !height || !type || !factory || !ip || !ip2) { if (!cameraName || !siteName || !port || !user || !password || !height || !type || !factory || !ip || !ip2) {
for (const flag of flagList) { for (const flag of flagList) {
if (!flag.code) { if (!flag.code) {
@ -576,10 +606,7 @@
createMessage.warning('请检查IP格式并正确填写！'); createMessage.warning('请检查IP格式并正确填写！');
return; return;
} }
// else if (!pattern.test(this.cameraForm.cloudCtrlIp)){ // 未输入时将赋值为0
// this.$message.warning("请正确填写云台IP！");
// return
// }
cameraForm.value.channel = channel ? channel : '0'; cameraForm.value.channel = channel ? channel : '0';
cameraForm.value.leftAngle = leftAngle ? leftAngle : '0'; cameraForm.value.leftAngle = leftAngle ? leftAngle : '0';
cameraForm.value.rightAngle = rightAngle ? rightAngle : '0'; cameraForm.value.rightAngle = rightAngle ? rightAngle : '0';
@ -593,17 +620,15 @@
cameraForm.value.zoomFactor = zoomFactor ? zoomFactor : '0'; cameraForm.value.zoomFactor = zoomFactor ? zoomFactor : '0';
cameraForm.value.cloudCtrlIp = cloudCtrlIp ? cloudCtrlIp : ip; cameraForm.value.cloudCtrlIp = cloudCtrlIp ? cloudCtrlIp : ip;
cameraForm.value.cloudCtrlPort = cloudCtrlPort ? cloudCtrlPort : port; cameraForm.value.cloudCtrlPort = cloudCtrlPort ? cloudCtrlPort : port;
console.log(cameraForm.value.style);
cameraForm.value.style = style ? style : ''; cameraForm.value.style = style ? style : '';
console.log(cameraForm.value.style);
let http; let http;
if (addOrEdit.value) { if (addOrEdit.value) {
let httpurl = ''; let httpurl = '';
let method = ''; let method = '';
// 无选中相机，则添加相机
if (!cameraForm.value.id) { if (!cameraForm.value.id) {
httpurl += url.value.add; httpurl += url.value.add;
method = 'post'; method = 'post';
console.log(cameraForm.value.style);
http = defHttp.post( http = defHttp.post(
{ {
url: httpurl, url: httpurl,
@ -612,9 +637,9 @@
{ isTransformResponse: false } { isTransformResponse: false }
); );
} else { } else {
// 有选中相机，则编辑相机
httpurl += url.value.edit; httpurl += url.value.edit;
method = 'put'; method = 'put';
console.log(cameraForm.value.style);
http = defHttp.put( http = defHttp.put(
{ {
url: httpurl, url: httpurl,
@ -623,18 +648,18 @@
{ isTransformResponse: false } { isTransformResponse: false }
); );
} }
http // 添加或编辑相机
// httpAction(httpurl, cameraForm.value, method) http.then((res) => {
.then((res) => {
let success_message = cameraForm.value.id ? '修改成功' : '添加成功'; let success_message = cameraForm.value.id ? '修改成功' : '添加成功';
let error_message = cameraForm.value.id ? '修改失败' : '添加失败'; let error_message = cameraForm.value.id ? '修改失败' : '添加失败';
// 添加或编辑完成
if (res.success) { if (res.success) {
createMessage.success(success_message); createMessage.success(success_message);
// 重新赋值表单
cameraForm.value = res.result; cameraForm.value = res.result;
// 重新获取相机
getTreeInfo(); getTreeInfo();
// fromClear();
} else { } else {
console.log(res);
createMessage.warning(error_message); createMessage.warning(error_message);
} }
}); });
@ -645,14 +670,8 @@
flag.value = false; flag.value = false;
} }
} }
// 选择相机类型
function selectSite(item, option) {
let siteId = option.key;
cameraForm.value.siteId = siteId;
}
function typeChange(item) { function typeChange(item) {
console.log(item);
if (item == '1' || item == '3') { if (item == '1' || item == '3') {
flag.value = true; flag.value = true;
} else { } else {
@ -660,17 +679,15 @@
flag.value = false; flag.value = false;
} }
} }
// 选择相机
function onSelect(selectedKeys, info) { function onSelect(selectedKeys, _info) {
console.log(selectedKeys);
fromClear(); fromClear();
addOrEdit.value = false; addOrEdit.value = false;
cancelFlag.value = false; cancelFlag.value = false;
changeTag.value = false; changeTag.value = false;
// 选中相机
dataId.value = selectedKeys[0]; dataId.value = selectedKeys[0];
// console.log(selectedKeys,info);
selectedKeys = selectedKeys;
let gDataLen = gData.value.length; let gDataLen = gData.value.length;
getTag.value = false; getTag.value = false;
for (let i = 0; i < gDataLen; i++) { for (let i = 0; i < gDataLen; i++) {
@ -679,8 +696,6 @@
} }
} }
//请求相机数据 //请求相机数据
console.log('dataId.value', dataId.value);
defHttp defHttp
.get( .get(
{ {
@ -689,9 +704,7 @@
}, },
{ isTransformResponse: false } { isTransformResponse: false }
) )
// getAction(this.url.getCameraInfoById + "?id=" + this.dataId)
.then((res) => { .then((res) => {
console.log(res);
if (res.success) { if (res.success) {
getTag.value = true; getTag.value = true;
cameraForm.value = res.result; cameraForm.value = res.result;
@ -701,67 +714,68 @@
} }
}); });
} }
// 获取相机数据
function getTreeInfo() { function getTreeInfo() {
defHttp defHttp
.get( .get(
{ {
url: url.value.getSiteCameraInfo, url: url.value.getSiteCameraInfo,
// params: model.value
}, },
{ isTransformResponse: false } { isTransformResponse: false }
) )
// httpAction(this.url.getSiteCameraInfo, this.model, 'get')
.then((res) => { .then((res) => {
if (res.success) { if (res.success) {
gData.value = res.result; gData.value = res.result;
treeData.value = gData.value; treeData.value = handleCameraTree(res.result);
// console.log("treeData",treeData.value);
generateList(gData.value); generateList(gData.value);
lineArr.value = []; lineArr.value = [];
initLineArr(); initLineArr();
} }
}); });
} }
// 处理相机数据
function handleCameraTree(data, _index = undefined) {
let arr: any = [];
for (let i = 0; i < data.length; i++) {
let obj: any = {};
let item = data[i];
obj.name = item.name;
obj.id = item.id;
obj.disabled = item.children?.length > 0 ? true : false;
if (item.children && item.children.length > 0) {
obj.children = handleCameraTree(item.children);
}
arr.push(obj);
}
return arr;
}
// 展开/收起节点时触发
function onExpand(onExpandedKeys) { function onExpand(onExpandedKeys) {
expandedKeys.value = onExpandedKeys; expandedKeys.value = onExpandedKeys;
autoExpandParent.value = false; autoExpandParent.value = false;
} }
// 搜索相机
function onChange(e) { function onChange(e) {
let time = null; let time = null;
const value = e.target.value; const value = e.target.value;
treeData.value = []; treeData.value = [];
// console.log(time) dataList.value.map((item) => {
const expandedKeys = dataList.value.map((item) => {
if (value) { if (value) {
if (item.title.indexOf(value) > -1) { if (item.title.indexOf(value) > -1) {
console.log(item);
treeData.value.push({ treeData.value.push({
children: [], children: [],
id: item.key, id: item.key,
name: item.title, name: item.title,
disabled: item.children?.length > 0 ? true : false,
}); });
// treeData.value = gData.value
} }
} else { } else {
treeData.value = gData.value; treeData.value = handleCameraTree(gData.value);
} }
}); });
// Object.assign(this, {
// expandedKeys,
// searchValue: value,
// autoExpandParent: true
// })
} }
// 将树结构展开，每个节点都变成同级
function generateList(data) { function generateList(data) {
// dataList.length=0
// console.log(dataList)
for (let i = 0; i < data.length; i++) { for (let i = 0; i < data.length; i++) {
const node: any = data[i]; const node: any = data[i];
const key = node.name; const key = node.name;
@ -771,7 +785,7 @@
} }
} }
} }
// 防区列表
function initLineArr() { function initLineArr() {
let lineLen = gData.value.length; let lineLen = gData.value.length;
for (let i = 0; i < lineLen; i++) { for (let i = 0; i < lineLen; i++) {
@ -779,12 +793,9 @@
lineArr.value.push({ id: lineData.id, name: lineData.name }); lineArr.value.push({ id: lineData.id, name: lineData.name });
} }
} }
// 取消编辑/新增
function cancel() { function cancel() {
// fromClear()
let mycameraForm = cameraForm.value;
if (!getTag.value) { if (!getTag.value) {
// this.getTag = false;
cameraForm.value.id = ''; cameraForm.value.id = '';
cameraForm.value.ip = ''; cameraForm.value.ip = '';
cameraForm.value.ip2 = ''; cameraForm.value.ip2 = '';
@ -839,7 +850,6 @@
}, },
{ isTransformResponse: false } { isTransformResponse: false }
) )
// getAction(this.url.getCameraInfoById + "?id=" + that.dataId)
.then((res) => { .then((res) => {
if (res.success) { if (res.success) {
getTag.value = true; getTag.value = true;
@ -854,6 +864,7 @@
cancelFlag.value = false; cancelFlag.value = false;
addOrEdit.value = false; addOrEdit.value = false;
} }
// 重置表单
function fromReset() { function fromReset() {
if (dataId.value) { if (dataId.value) {
defHttp defHttp
@ -864,7 +875,6 @@
}, },
{ isTransformResponse: false } { isTransformResponse: false }
) )
// getAction(this.url.getCameraInfoById + "?id=" + that.dataId)
.then((res) => { .then((res) => {
if (res.success) { if (res.success) {
getTag.value = true; getTag.value = true;
@ -878,8 +888,8 @@
fromClear(); fromClear();
} }
} }
// 清空表单
function fromClear() { function fromClear() {
// let cameraForm = cameraForm.value;
dataId.value = ''; dataId.value = '';
cameraForm.value.id = ''; cameraForm.value.id = '';
cameraForm.value.ip = ''; cameraForm.value.ip = '';
@ -927,6 +937,7 @@
siteNameTemp.value = ''; siteNameTemp.value = '';
vrNameTemp.value = ''; vrNameTemp.value = '';
} }
// 获取录像机列表
function getVideoRecorderArr() { function getVideoRecorderArr() {
defHttp defHttp
.get( .get(
@ -935,18 +946,15 @@
}, },
{ isTransformResponse: false } { isTransformResponse: false }
) )
// getAction(this.url.getVideoRecorderInfo)
.then((res) => { .then((res) => {
if (res.success) { if (res.success) {
res.result.forEach((data, index) => { res.result.forEach((data, _index) => {
videoRecorderArr.value.push({ id: data.id, name: data.deviceName }); videoRecorderArr.value.push({ id: data.id, name: data.deviceName });
}); });
} }
}); });
} }
function videoRecorderChange(id) { // 刷新列表
cameraForm.value.videoRecorderId = id;
}
function reNew() { function reNew() {
reNewBtn.value.spin = true; reNewBtn.value.spin = true;
defHttp defHttp
@ -956,7 +964,6 @@
}, },
{ isTransformResponse: false } { isTransformResponse: false }
) )
// getAction(this.url.getVMCameraInfo)
.then((res) => { .then((res) => {
if (res.success) { if (res.success) {
createMessage.success('相机列表更新成功!'); createMessage.success('相机列表更新成功!');
@ -1030,7 +1037,7 @@
color: red; color: red;
position: absolute; position: absolute;
top: 6px; top: 6px;
left: -8px; left: 4px;
} }
.timePeriodDelimiter { .timePeriodDelimiter {

Write Preview
Loading…
Cancel
Save