Browse Source

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

master
Fuyuu 1 year ago
parent
commit
7e75bff5af
  1. 534
      src/components/earthMap/VideoControl.vue
  2. 2516
      src/views/earthMap/edit/EarthComp.vue
  3. 6
      src/views/military/modules/ai/aiMonitorArea/components/DtAiMonitorAreaForm.vue
  4. 335
      src/views/military/modules/equipmentManage/videoMonitorEquInfo/cameraManage/CameraSet.vue

534
src/components/earthMap/VideoControl.vue

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

2516
src/views/earthMap/edit/EarthComp.vue

File diff suppressed because it is too large

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

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

335
src/views/military/modules/equipmentManage/videoMonitorEquInfo/cameraManage/CameraSet.vue

@ -11,10 +11,11 @@
<a-icon type="sync" @click="reNew" ref="reNewBtn" />
</p>
<div class="cameraBox">
<!-- 树形控件界面-->
<!--树形控件界面-->
<div class="treeBox">
<a-input-search style="margin-bottom: 8px" placeholder="搜索" @change="onChange" />
<a-tree
v-model:selectedKeys="selectedKeys"
:defaultExpandAll="true"
v-if="gData.length != 0"
:expanded-keys="expandedKeys"
@ -28,7 +29,7 @@
>
</a-tree>
</div>
<!-- 菜单界面-->
<!--菜单界面-->
<div class="menuBox">
<div class="menuTop">
<a-button type="primary" @click="add"> 新增 </a-button>
@ -48,16 +49,15 @@
<a-form-item label="监控点位" class="mustInput" name="siteName">
<a-col :span="11">
<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 }}
</a-select-option>
</a-select>
</a-col>
<a-col :offset="1" :span="12">
<a-form-item style="margin-bottom: 0px">
<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 }}
</a-select-option>
</a-select>
@ -70,12 +70,10 @@
<a-form-item label="相机IP" class="mustInput" name="ip">
<a-input v-model:value="cameraForm.ip" :disabled="!changeTag" />
</a-form-item>
<a-form-item label="相机备用IP" class="mustInput" name="ip2">
<a-input v-model:value="cameraForm.ip2" :disabled="!changeTag" />
</a-form-item>
<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-form-item>
<a-form-item label="相机认证用户名" class="mustInput" name="user">
@ -85,8 +83,6 @@
<a-input-password v-model:value="cameraForm.password" :disabled="!changeTag" />
</a-form-item>
<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原生下拉框 -->
<a-select v-model:value="cameraForm.factory" :disabled="!changeTag">
<template :key="Number(cameraFactory.value)" v-for="cameraFactory in cameraFactorys">
@ -94,10 +90,8 @@
</template>
</a-select>
</a-form-item>
<a-form-item label="类型" class="mustInput" name="type">
<a-form-item label="相机类型" class="mustInput" name="type">
<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原生下拉框 -->
<a-select name="type" v-model:value="cameraForm.type" :disabled="!changeTag" @change="typeChange">
<template :key="Number(cameraType.value)" v-for="cameraType in cameraTypes">
@ -106,10 +100,6 @@
</a-select>
</a-col>
<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原生下拉框 -->
<a-select name="style" v-model:value="cameraForm.style" :disabled="!flag || !changeTag">
<template :key="Number(cameraStyle.value)" v-for="cameraStyle in cameraStyles">
@ -118,14 +108,12 @@
</a-select>
</a-col>
</a-form-item>
<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-form-item>
<a-form-item label="录像机" name="videoRecorder">
<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 }}
</a-select-option>
</a-select>
@ -160,27 +148,19 @@
<a-form-item label="地理纬度" name="latitude">
<a-input v-model:value="cameraForm.latitude" disabled />
</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-input v-model="cameraForm.leftAngle" type="number" :disabled="!changeTag" /> -->
<a-input-number v-model:value="cameraForm.leftAngle" :disabled="!changeTag" style="width: 100%" />
</a-form-item>
<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-form-item>
<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-form-item>
<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-form-item>
<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-form-item>
<a-form-item label="云台控制IP" name="cloudCtrlIp">
@ -190,23 +170,18 @@
<a-input v-model:value="cameraForm.cloudCtrlPort" :disabled="!changeTag" />
</a-form-item>
<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-form-item>
<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-form-item>
<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-form-item>
<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-form-item>
<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-form-item>
<a-form-item label="报警持续时间(秒)" name="alarmNum">
@ -250,137 +225,187 @@
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue';
import { ref, onMounted } from 'vue';
import { useUserStore } from '/@/store/modules/user';
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 { Modal } from 'ant-design-vue';
//
const cameraFactorys: any = ref([]);
//
//
const cameraTypes: any = ref([]);
//
const cameraStyles: any = ref([]);
//
//
const getCameraFactory = () => {
return defHttp.get({ url: '/sys/dict/getDictItems/ms_camera_factory' }, { isTransformResponse: false });
};
//
//
const getCameraType = () => {
return defHttp.get({ url: '/sys/dict/getDictItems/ms_camera_type' }, { isTransformResponse: false });
};
//
//
const getCameraStyle = () => {
return defHttp.get({ url: '/sys/dict/getDictItems/ms_camera_style' }, { isTransformResponse: false });
};
const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 6 } });
const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 18 } });
//
const reNewBtn = ref();
//
const userStore = useUserStore();
//
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 searchValue = ref('');
//
const autoExpandParent = ref(true);
//
const gData: any = ref([]);
//
const treeData: any = ref([]);
//
const dataList: any = ref([]);
//
const replaceFields = ref({
key: 'id',
title: 'name',
children: 'children',
});
const url = ref({
//
getSiteCameraInfo: '/military/camera/site/getSiteCameraInfo',
// id
getCameraInfoById: '/military/camera/setting/queryById',
//
add: '/military/camera/setting/add',
//
edit: '/military/camera/setting/edit',
//
delete: '/military/camera/setting/delete',
//
getVideoRecorderInfo: '/military/videoRecorder/qryCameraList',
//
getVMCameraInfo: '/third/api/getVMCameraInfo',
});
// -
const lineNameTemp = ref('');
// -
const siteNameTemp = ref('');
//
const vrNameTemp = ref('');
// id
const dataId = ref('');
//
const cancelFlag = ref(false);
//
const flag = ref(false);
//
const changeTag = ref(false);
//
const getTag = ref(false);
// /
const addOrEdit = ref(false);
//
const cameraForm: any = ref({
// id
id: '',
// ip
ip: '',
// ip
ip2: '',
//
port: '',
//
factory: '',
//
cameraName: '',
//
cameraType: '',
//
style: '',
//
type: '',
//
user: '',
siteId: '',
//
password: '',
//
channel: '',
// rtsp
preRtsp: '',
// rtsp
analysisRtsp: '',
// rtsp
recordRtsp: '',
//
lineName: '',
// id
siteId: '',
//
siteName: '',
// ip
cloudCtrlIp: '',
//
cloudCtrlPort: '',
cameraName: '',
latitude: '',
//
longitude: '',
//
latitude: '',
//
height: '',
// id
videoRecorderId: '',
//
videoRecorder: '',
cameraType: '',
//
cameraColor: '',
// 线
leftAngle: '',
// 线
rightAngle: '',
//
viewDistance: '',
//
frameRate: '',
//
maxRange: '',
//
zeroAzimuth: '',
//
maxElevation: '',
//
fixedAngle: '',
//
maxVisibleDistance: '',
//
zoomFactor: '',
videoRecorderId: '',
//
dayBeginTime: '',
//
dayEndTime: '',
//
alarmNum: undefined,
// Web
webcastAddress: '',
});
const lineArr: any = ref([]); //线
const siteData: any = ref({}); //线
const siteArr: any = ref([]); //
const videoRecorderArr: any = ref([]); //
//
const lineArr: any = ref([]);
//
const siteData: any = ref({});
//
const siteArr: any = ref([]);
//
const videoRecorderArr: any = ref([]);
//
const selectedKeys: any = ref([]);
onMounted(() => {
dataList.value.length = 0;
//
getTreeInfo();
//
getCameraFactory().then((response) => {
@ -388,28 +413,29 @@
cameraFactorys.value = response.result;
}
});
//
//
getCameraType().then((response) => {
if (response.success) {
cameraTypes.value = response.result;
}
}),
getCameraStyle().then((response) => {
if (response.success) {
cameraStyles.value = response.result;
}
});
});
//
getCameraStyle().then((response) => {
if (response.success) {
cameraStyles.value = response.result;
}
});
//
getVideoRecorderArr();
});
//
function handleLineChange(id) {
changeSiteArr(id);
}
//
function handleSiteChange(id) {
cameraForm.value.siteId = id;
}
function changeSiteArr(id) {
let lineLen = gData.value.length;
siteArr.value = [];
@ -431,17 +457,20 @@
cameraForm.value.siteName = siteArr.value[0].name;
siteNameTemp.value = cameraForm.value.siteName; //线线
}
//
function add() {
addOrEdit.value = true;
cancelFlag.value = true;
changeTag.value = true;
getTag.value = false;
dataId.value = '';
//
selectedKeys.value = [];
fromClear();
}
//
function edit() {
//
if (cameraForm.value.type == '1' || cameraForm.value.type == '3') {
flag.value = true;
} else {
@ -450,7 +479,6 @@
}
if (cameraForm.value.id == '') {
// this.$message.info("!");
createMessage.info('请先选择需要修改的数据!');
return false;
}
@ -458,7 +486,7 @@
addOrEdit.value = true;
changeTag.value = true;
}
//
function del() {
Modal.confirm({
title: '确认删除',
@ -472,11 +500,12 @@
},
{ joinParamsToUrl: true, isTransformResponse: false }
)
// deleteAction(that.url.delete, {id: that.cameraForm.id})
.then((res) => {
if (res.success) {
createMessage.success(res.message);
//
fromClear();
//
getTreeInfo();
getTag.value = false;
} else {
@ -489,11 +518,11 @@
},
});
}
//
function submitForm() {
// ip
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)/;
let settingId = cameraForm.value.id;
let cloudCtrlIp = cameraForm.value.cloudCtrlIp;
let cloudCtrlPort = cameraForm.value.cloudCtrlPort;
let cameraName = cameraForm.value.cameraName;
@ -563,6 +592,7 @@
},
];
let errorMessage = '';
//
if (!cameraName || !siteName || !port || !user || !password || !height || !type || !factory || !ip || !ip2) {
for (const flag of flagList) {
if (!flag.code) {
@ -576,10 +606,7 @@
createMessage.warning('请检查IP格式并正确填写!');
return;
}
// else if (!pattern.test(this.cameraForm.cloudCtrlIp)){
// this.$message.warning("IP");
// return
// }
// 0
cameraForm.value.channel = channel ? channel : '0';
cameraForm.value.leftAngle = leftAngle ? leftAngle : '0';
cameraForm.value.rightAngle = rightAngle ? rightAngle : '0';
@ -593,17 +620,15 @@
cameraForm.value.zoomFactor = zoomFactor ? zoomFactor : '0';
cameraForm.value.cloudCtrlIp = cloudCtrlIp ? cloudCtrlIp : ip;
cameraForm.value.cloudCtrlPort = cloudCtrlPort ? cloudCtrlPort : port;
console.log(cameraForm.value.style);
cameraForm.value.style = style ? style : '';
console.log(cameraForm.value.style);
let http;
if (addOrEdit.value) {
let httpurl = '';
let method = '';
//
if (!cameraForm.value.id) {
httpurl += url.value.add;
method = 'post';
console.log(cameraForm.value.style);
http = defHttp.post(
{
url: httpurl,
@ -612,9 +637,9 @@
{ isTransformResponse: false }
);
} else {
//
httpurl += url.value.edit;
method = 'put';
console.log(cameraForm.value.style);
http = defHttp.put(
{
url: httpurl,
@ -623,21 +648,21 @@
{ isTransformResponse: false }
);
}
http
// httpAction(httpurl, cameraForm.value, method)
.then((res) => {
let success_message = cameraForm.value.id ? '修改成功' : '添加成功';
let error_message = cameraForm.value.id ? '修改失败' : '添加失败';
if (res.success) {
createMessage.success(success_message);
cameraForm.value = res.result;
getTreeInfo();
// fromClear();
} else {
console.log(res);
createMessage.warning(error_message);
}
});
//
http.then((res) => {
let success_message = cameraForm.value.id ? '修改成功' : '添加成功';
let error_message = cameraForm.value.id ? '修改失败' : '添加失败';
//
if (res.success) {
createMessage.success(success_message);
//
cameraForm.value = res.result;
//
getTreeInfo();
} else {
createMessage.warning(error_message);
}
});
cancelFlag.value = false;
addOrEdit.value = false;
changeTag.value = false;
@ -645,14 +670,8 @@
flag.value = false;
}
}
function selectSite(item, option) {
let siteId = option.key;
cameraForm.value.siteId = siteId;
}
//
function typeChange(item) {
console.log(item);
if (item == '1' || item == '3') {
flag.value = true;
} else {
@ -660,17 +679,15 @@
flag.value = false;
}
}
function onSelect(selectedKeys, info) {
console.log(selectedKeys);
//
function onSelect(selectedKeys, _info) {
fromClear();
addOrEdit.value = false;
cancelFlag.value = false;
changeTag.value = false;
//
dataId.value = selectedKeys[0];
// console.log(selectedKeys,info);
selectedKeys = selectedKeys;
let gDataLen = gData.value.length;
getTag.value = false;
for (let i = 0; i < gDataLen; i++) {
@ -679,8 +696,6 @@
}
}
//
console.log('dataId.value', dataId.value);
defHttp
.get(
{
@ -689,9 +704,7 @@
},
{ isTransformResponse: false }
)
// getAction(this.url.getCameraInfoById + "?id=" + this.dataId)
.then((res) => {
console.log(res);
if (res.success) {
getTag.value = true;
cameraForm.value = res.result;
@ -701,67 +714,68 @@
}
});
}
//
function getTreeInfo() {
defHttp
.get(
{
url: url.value.getSiteCameraInfo,
// params: model.value
},
{ isTransformResponse: false }
)
// httpAction(this.url.getSiteCameraInfo, this.model, 'get')
.then((res) => {
if (res.success) {
gData.value = res.result;
treeData.value = gData.value;
// console.log("treeData",treeData.value);
treeData.value = handleCameraTree(res.result);
generateList(gData.value);
lineArr.value = [];
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) {
expandedKeys.value = onExpandedKeys;
autoExpandParent.value = false;
}
//
function onChange(e) {
let time = null;
const value = e.target.value;
treeData.value = [];
// console.log(time)
const expandedKeys = dataList.value.map((item) => {
dataList.value.map((item) => {
if (value) {
if (item.title.indexOf(value) > -1) {
console.log(item);
treeData.value.push({
children: [],
id: item.key,
name: item.title,
disabled: item.children?.length > 0 ? true : false,
});
// treeData.value = gData.value
}
} else {
treeData.value = gData.value;
treeData.value = handleCameraTree(gData.value);
}
});
// Object.assign(this, {
// expandedKeys,
// searchValue: value,
// autoExpandParent: true
// })
}
//
function generateList(data) {
// dataList.length=0
// console.log(dataList)
for (let i = 0; i < data.length; i++) {
const node: any = data[i];
const key = node.name;
@ -771,7 +785,7 @@
}
}
}
//
function initLineArr() {
let lineLen = gData.value.length;
for (let i = 0; i < lineLen; i++) {
@ -779,12 +793,9 @@
lineArr.value.push({ id: lineData.id, name: lineData.name });
}
}
// /
function cancel() {
// fromClear()
let mycameraForm = cameraForm.value;
if (!getTag.value) {
// this.getTag = false;
cameraForm.value.id = '';
cameraForm.value.ip = '';
cameraForm.value.ip2 = '';
@ -839,7 +850,6 @@
},
{ isTransformResponse: false }
)
// getAction(this.url.getCameraInfoById + "?id=" + that.dataId)
.then((res) => {
if (res.success) {
getTag.value = true;
@ -854,6 +864,7 @@
cancelFlag.value = false;
addOrEdit.value = false;
}
//
function fromReset() {
if (dataId.value) {
defHttp
@ -864,7 +875,6 @@
},
{ isTransformResponse: false }
)
// getAction(this.url.getCameraInfoById + "?id=" + that.dataId)
.then((res) => {
if (res.success) {
getTag.value = true;
@ -878,8 +888,8 @@
fromClear();
}
}
//
function fromClear() {
// let cameraForm = cameraForm.value;
dataId.value = '';
cameraForm.value.id = '';
cameraForm.value.ip = '';
@ -927,6 +937,7 @@
siteNameTemp.value = '';
vrNameTemp.value = '';
}
//
function getVideoRecorderArr() {
defHttp
.get(
@ -935,18 +946,15 @@
},
{ isTransformResponse: false }
)
// getAction(this.url.getVideoRecorderInfo)
.then((res) => {
if (res.success) {
res.result.forEach((data, index) => {
res.result.forEach((data, _index) => {
videoRecorderArr.value.push({ id: data.id, name: data.deviceName });
});
}
});
}
function videoRecorderChange(id) {
cameraForm.value.videoRecorderId = id;
}
//
function reNew() {
reNewBtn.value.spin = true;
defHttp
@ -956,7 +964,6 @@
},
{ isTransformResponse: false }
)
// getAction(this.url.getVMCameraInfo)
.then((res) => {
if (res.success) {
createMessage.success('相机列表更新成功!');
@ -1030,7 +1037,7 @@
color: red;
position: absolute;
top: 6px;
left: -8px;
left: 4px;
}
.timePeriodDelimiter {

Loading…
Cancel
Save