chendingwei
/
ar-web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

添加标签

master
chendingwei 2 years ago
parent
762c430d01
commit
4e9ac48ed0
6 changed files with 135 additions and 94 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      src/axios/cameraMark/markLabelApi.ts
  2. 2
      src/components/aside/leftMenu/index.vue
  3. 1
      src/components/aside/leftMenu/leftMenuItem/basic.vue
  4. 20
      src/components/aside/leftMenu/leftMenuItem/sytemcomponent.vue
  5. 64
      src/store/index.ts
  6. 140
      src/views/page/cameraCenter.vue

2
src/axios/cameraMark/markLabelApi.ts
View File

@ -20,7 +20,7 @@ export const AddReturnId = (params?: any) => axios.post(CisApiUrl + Api.AddRetur
export const Update = (params?: any) => axios.post(CisApiUrl + Api.Update, qs.stringify(params))
export const Delete = (params?: any) => axios.post(CisApiUrl + Api.Delete+"?"+qs.stringify(params))
export const Delete = (params?: any) => axios.post(CisApiUrl + Api.Delete,qs.stringify(params))
export const Get = (params?: any) => axios.get(CisApiUrl + Api.Get, {params: params})

2
src/components/aside/leftMenu/index.vue
View File

@ -53,7 +53,7 @@
<template #tab>
<!-- <span class="icon iconfont icon-shezhi1 iconfontsize"></span> -->
<div class="menu-title">
系统<br />功能
系统<br />设置
</div>
</template>
<SytemComponent />

1
src/components/aside/leftMenu/leftMenuItem/basic.vue
View File

@ -53,6 +53,7 @@ function playAudio(): void {
}
//添加标签
function addLabel(e: string) {
piniaStore.updateIsAddLabel({labelType:"",isAddLabel: true})
playAudio();
}

20
src/components/aside/leftMenu/leftMenuItem/sytemcomponent.vue
View File

@ -7,7 +7,7 @@
<span class="icon iconfont icon-moxing-miaobian"></span>
</i>
</a>
<div class="item-text">单体化列表</div>
<div class="item-text">用户管理</div>
</a-col>
<a-col class="content-item" @click="addhaplochromatization" title="单体化">
@ -16,23 +16,7 @@
<span class="icon iconfont icon-sanweimoxing"></span>
</i>
</a>
<div class="item-text">单体化</div>
</a-col>
<a-col class="content-item" title="防区列表" @click="fenceListFn">
<a class="btn btnColor">
<i class="fa">
<span class="icon iconfont icon-liebiao2"></span>
</i>
</a>
<div class="item-text">防区列表</div>
</a-col>
<a-col class="content-item" title="添加防区" @click="addDefenceArea">
<a class="btn btnColor">
<i class="fa">
<span class="icon iconfont icon-24gl-fence"></span>
</i>
</a>
<div class="item-text">添加防区</div>
<div class="item-text">相机配置</div>
</a-col>
</a-row>
</div>

64
src/store/index.ts
View File

@ -1,35 +1,41 @@
import { defineStore } from 'pinia';
export const useStore = defineStore('Index', {
state: () => {
return {
curSelectKey:"",
cameraMap:new Map<string, any>(),
treeData:<any[]>[],
audioCount: 0,
audioCurrentCount: 0,
editType:0
}
},
// 也可以定义为
// state: () => ({ count: 0 })
actions: {
addCameraMap(list:any){
this.treeData=[]
for (let item of list) {
this.cameraMap.set(item.id, item);
this.treeData.push({title: item.ip, key: item.id});
state: () => {
return {
//当前相机id
curSelectKey: "",
//存放相机数组
cameraMap: new Map<string, any>(),
treeData: <any[]>[],
audioCount: 0,
audioCurrentCount: 0,
editType: 0,
addLabel: {labelType:"",isAddLabel: false}
}
return this.cameraMap
},
updateCurSelectKey(key:string){
this.curSelectKey=key
// 也可以定义为
// state: () => ({ count: 0 })
actions: {
addCameraMap(list: any) {
this.treeData = []
for (let item of list) {
this.cameraMap.set(item.id, item);
this.treeData.push({ title: item.ip, key: item.id });
}
return this.cameraMap
},
updateCurSelectKey(key: string) {
this.curSelectKey = key
},
updateaudioCurrentCount(num: number) {
this.audioCurrentCount = num
},
updateaudioCount(num: number) {
this.audioCount = num
},
updateIsAddLabel(obj:any){
this.addLabel=obj
}
},
updateaudioCurrentCount(num: number) {
this.audioCurrentCount = num
},
updateaudioCount(num: number) {
this.audioCount = num
},
},
})

140
src/views/page/cameraCenter.vue
View File

@ -3,15 +3,22 @@
<div id="videoWrapper">
<canvas ref="videoCanvas" id="videoCanvas" :width="canvasWidth" :height="canvasHeight">
</canvas>
<video ref="videoPlayer" id="videoPlayer" autoplay muted
@loadedmetadata="changeVideoCanvasSize" @mouseover="mouseOverVideo" @mouseout="mouseOutVideo"
@mousedown="mouseDownVideo">
<video ref="videoPlayer" id="videoPlayer" autoplay muted @loadedmetadata="changeVideoCanvasSize"
@mouseover="mouseOverVideo" @mouseout="mouseOutVideo" @mousedown="mouseDownVideo">
</video>
<div v-for="item in labelList" class="labels" :key="item.id" :style="`top:${canvasHeight*item.canvasTopRatio}px;left:${canvasWidth*item.canvasLeftRatio}px`">
<div class="labels-item" @click="test(item.id)">
<!-- <div class="labels-item" v-if="item.inFlag"> -->
<img src="@/assets/images/dialog.png" width="80" height="50" alt="">
<span>{{item.name}}</span>
<div v-for="item in labelList" class="labels" :key="item.id"
:style="`top:${canvasHeight * item.canvasTopRatio}px;left:${canvasWidth * item.canvasLeftRatio}px`">
<div class="labels-item" @click="test(item.id)" @contextmenu.prevent="mouseRightFn">
<!-- <div class="labels-item" v-if="item.inFlag"> -->
<img src="@/assets/images/dialog.png" width="80" height="50" alt="">
<span>{{ item.name }}</span>
</div>
</div>
<div class="labels" v-if="addLabel.isAddLabel"
:style="`position: fixed;transform: translate(-50%,-100%);top:${addLabelTop}px;left:${addLabelLeft}px`">
<div class="labels-item">
<img src="@/assets/images/dialog.png" width="80" height="50" alt="">
<span>1</span>
</div>
</div>
</div>
@ -19,12 +26,12 @@
<script setup lang='ts'>
////@ts-nocheck
import { ref, h, onMounted, getCurrentInstance, ComponentInternalInstance, onUnmounted,watch } from "vue";
import { ref, h, onMounted, getCurrentInstance, ComponentInternalInstance, onUnmounted, watch } from "vue";
import * as markLabelApi from '@/axios/cameraMark/markLabelApi';
import * as markSearchApi from '@/axios/core/markSearchApi';
import { useStore } from '@/store/index';
import { apiUrl } from "@/axios";
import {storeToRefs} from 'pinia';
import { storeToRefs } from 'pinia';
import Msg from "@/utils/message";
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
let piniaStore = useStore();
@ -36,7 +43,10 @@ let curSelectKey = storeToRefs(piniaStore).curSelectKey
let cameraMap = storeToRefs(piniaStore).cameraMap
let webRtcServer: any = ref()
let isActiveChoose = ref(false)
let labelList=ref<any[]>([])
let labelList = ref<any[]>([])
let addLabel = storeToRefs(piniaStore).addLabel
let addLabelLeft = ref(0);
let addLabelTop = ref(0);
onMounted(() => {
{
player = <HTMLVideoElement>document.querySelector('#videoPlayer');
@ -47,19 +57,29 @@ onMounted(() => {
}
})
watch(curSelectKey,(newVal,oldVal)=>{
watch(curSelectKey, (newVal, oldVal) => {
switchCamera(newVal)
})
function test(id:number){
console.log(id,"id++++++++++++");
markLabelApi.Delete({id}).then((res:any)=>{
watch(addLabel, (newVal, oldVal) => {
console.log(newVal);
if (newVal.isAddLabel) {
isActiveChoose.value = true
document.body.onmousemove = (e) => {
addLabelTop.value = e.clientY
addLabelLeft.value = e.clientX
}
}
})
//测试删除标签
function test(id: number) {
markLabelApi.Delete({ id }).then((res: any) => {
console.log(res.data);
if(res.data.code==200){
let msg=res.data.data==true?"删除成功":"删除失败"
if(res.data.data){
labelList.value=labelList.value.filter((element:any) => {
return element.id!=id
if (res.data.code == 200) {
let msg = res.data.data == true ? "删除成功" : "删除失败"
if (res.data.data) {
labelList.value = labelList.value.filter((element: any) => {
return element.id != id
});
Msg.success("删除成功")
return
@ -68,6 +88,10 @@ function test(id:number){
Msg.error("删除失败")
})
}
function mouseRightFn(e:any){
console.log(1111111111,e);
}
function loadVideoPlayer() {
let elmId = 'videoPlayer';
let url = apiUrl.WebRtcUrl;
@ -95,9 +119,11 @@ function mouseOutVideo() {
player.classList.remove('activeChoose');
}
function mouseDownVideo(e: MouseEvent) {
console.log('mouseDownVideo');
if (!isActiveChoose.value) return;
let cameraId = cameraMap.value.get(curSelectKey.value).id;
let name = 'markLabel-' + Date.now();
let name = "1";
let videoWidth = player.videoWidth | 1920;
let videoHeight = player.videoHeight | 1080;
let canvasWidth = player.clientWidth;
@ -114,7 +140,6 @@ function mouseDownVideo(e: MouseEvent) {
CanvasLeftRatio: canvasLeftRatio,
CanvasTopRatio: canvasTopRatio
}
console.log(entity);
markLabelApi.AddReturnId({
'entity': entity
}).then((res: any) => {
@ -126,7 +151,26 @@ function mouseDownVideo(e: MouseEvent) {
'cameraId': cameraId,
'markLabelId': markLabelId
}).then((res: any) => {
let ret: boolean = res.data.data;
console.log(ret, 'ret');
if(ret){
let obj = {
cbCameraId: cameraId,
videoWidth: videoWidth,
videoHeight: videoHeight,
canvasLeftRatio: canvasLeftRatio,
canvasTopRatio: canvasTopRatio,
id: markLabelId,
isDelete: false,
inFlag: true,
name:name,
}
labelList.value.push(obj)
console.log(obj,'obj111111111111111');
piniaStore.updateIsAddLabel({labelType:"",isAddLabel: false})
}
});
})
}
@ -176,7 +220,7 @@ function switchCamera(cameraId: string) {
console.log('load camera labels');
getLabel(cameraObj.id)
loadMarkLabelsByLoop(cameraObj);
}
});
} else {
@ -192,12 +236,12 @@ function getRtspUrl(cameraObj: any): string {
// 模拟 onvif
return "rtsp://admin:hk123456@192.168.1.65:554/Streaming/Channels/101?transportmode=unicast&profile=Profile_1";
}
function getLabel(cbCameraId:string|number){
markLabelApi.GetList({cbCameraId}).then((res:any)=>{
if(res.data.code==200){
console.log(res,'res');
labelList.value=res.data.data
function getLabel(cbCameraId: string | number) {
markLabelApi.GetList({ cbCameraId }).then((res: any) => {
if (res.data.code == 200) {
console.log(res, 'res');
labelList.value = res.data.data
}
})
}
@ -216,19 +260,19 @@ function loadMarkLabels(cameraObj: any) {
'cameraId': cameraObj.id
}).then((res: any) => {
let list: Array<any> = res.data.data;
list.forEach((element:any) => {
labelList.value.forEach((item:any,index:number) => {
if(element.id==item.id){
labelList.value[index].canvasLeftRatio=element.canvasLeftRatio
labelList.value[index].canvasTopRatio=element.canvasTopRatio
labelList.value[index].inFlag=element.inFlag
console.log(list);
list.forEach((element: any) => {
labelList.value.forEach((item: any, index: number) => {
if (element.id == item.id) {
labelList.value[index].canvasLeftRatio = element.canvasLeftRatio
labelList.value[index].canvasTopRatio = element.canvasTopRatio
labelList.value[index].inFlag = element.inFlag
}
});
});
// console.log(labelList);
// drawMarkLabels(list);
});
}
@ -268,6 +312,7 @@ onUnmounted(() => {
height: 100vh;
position: relative;
overflow: hidden;
#videoCanvas {
position: absolute;
}
@ -276,20 +321,25 @@ onUnmounted(() => {
height: 100%;
width: 100%;
object-fit: fill;
}
.labels{
.labels {
position: absolute;
top: 0;
left: 0;
transform: translate(-50%,-50%);
transform: translate(-50%,-100%);
z-index: 2;
.labels-item{
.labels-item {
position: relative;
span{
cursor: pointer;
span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
transform: translate(-50%, -50%);
}
}
}

Write Preview
Loading…
Cancel
Save