标签编辑2.0

src/axios/cameraMark/markLabelApi.ts

@@ -1,7 +1,9 @@
-import {axios} from '@/utils/axios';
-import {apiUrl} from "@/axios";
+import { axios } from '@/utils/axios';
+import { apiUrl } from "@/axios";
 import qs from 'qs';
 
+const CisApiUrl = apiUrl.CisApiUrl;
+
 enum Api {
     Add = '/cmMarkLabel/add',
     AddReturnId = '/cmMarkLabel/addReturnId',
@@ -12,18 +14,36 @@ enum Api {
     GetPageList = '/cmMarkLabel/getPageList',
 }
 
-const CisApiUrl = apiUrl.CisApiUrl;
+
+interface modelParams {
+    CbCameraId: number,     //相机 Id
+    CmMarkGroupId?: number, //标记组 Id
+    Name: string,           //名称
+    PanPosition?: number,   //Pan 坐标
+    TiltPosition?: number,  //Tilt 坐标
+    ZoomPosition?: number,  //Zoom 坐标
+    VideoWidth: number,     //视频宽度
+    VideoHeight: number,    //视频高度
+    CanvasLeftRatio: number,//画布 left 距离比例
+    CanvasTopRatio: number, //画布 top 距离比例
+    Remark?: string,    //备注
+    IsDelete?: boolean, //软删除
+    Id?: string,
+    CreateTime?: string
+}
+
+
 
 export const Add = (params?: any) => axios.post(CisApiUrl + Api.Add, qs.stringify(params))
 
 export const AddReturnId = (params?: any) => axios.post(CisApiUrl + Api.AddReturnId, qs.stringify(params))
 
-export const Update = (params?: any) => axios.post(CisApiUrl + Api.Update, qs.stringify(params))
+export const Update = (params?: modelParams) => 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})
+export const Get = (params?: any) => axios.get(CisApiUrl + Api.Get, { params: params })
 
-export const GetList = (params?: any) => axios.get(CisApiUrl + Api.GetList, {params: params})
+export const GetList = (params?: any) => axios.get(CisApiUrl + Api.GetList, { params: params })
 
-export const GetPageList = (params?: any) => axios.get(CisApiUrl + Api.GetPageList, {params: params})
+export const GetPageList = (params?: any) => axios.get(CisApiUrl + Api.GetPageList, { params: params })

src/views/page/Model/LabelEditModel.vue

@@ -41,6 +41,7 @@ import { Input, Row, Col, InputNumber, Button, notification } from 'ant-design-v
 import Draggable from '@/components/Draggable.vue'
 import { onMounted, reactive, ref, UnwrapRef, watch } from 'vue';
 import * as markLabelApi from '@/axios/cameraMark/markLabelApi';
+import Msg from '@/utils/message';
 interface FormState {
     id: string
     name: string;
@@ -90,42 +91,46 @@ onMounted(() => {
     }
 })
 
+//调整 X轴
 function changeX(e: any) {
     // console.log(e);
     //获取dom
-    let d = document.getElementById(props.modelData.id);
+    let dom = document.getElementById(props.modelData.id);
     // console.log(d);
     // console.log(d?.style);
     //修改css
-    d.style.left = e + 'px';
-     //修改 x
+    dom.style.left = e + 'px';
+    //修改 x
     x.value = e;
     // console.log(d?.style.left);
 
 }
+
+//调整 Y轴
 function changeY(e: any) {
     // console.log(e);
     //获取dom
-    let d = document.getElementById(props.modelData.id);
+    let dom = document.getElementById(props.modelData.id);
     // console.log(d);
     // console.log(d?.style);
     //修改css
-    d.style.top = e + 'px';
+    dom.style.top = e + 'px';
     //修改 y
     y.value = e;
     // console.log(d?.style.left);
 
 }
 
+//修改 name
 function changeName(e: any) {
     // console.log(e);
     //获取dom
-    let d = document.getElementById(props.modelData.id);
+    let dom = document.getElementById(props.modelData.id);
     // console.log(d);
-    let dom = d?.querySelector(".label-content")
+    let domHTML = dom?.querySelector(".label-content")
     // console.log(dom);
     //修改html
-    dom.innerHTML = e.target.value;
+    domHTML.innerHTML = e.target.value;
     name.value = e.target.value
 }
 
@@ -139,24 +144,47 @@ function cancel() {
     //关闭弹窗
     notification.close("editLabel");
     //获取dom
-    let d = document.getElementById(props.modelData.id);
+    let dom = document.getElementById(props.modelData.id);
     //获取dom HTML
-    let dom = d?.querySelector(".label-content")
+    let domHTML = dom?.querySelector(".label-content")
     //恢复原来模样
-    dom.innerHTML = props.modelData.name
+    domHTML.innerHTML = props.modelData.name
     x.value = document.body.offsetWidth * canvasLeft.value
     y.value = document.body.offsetHeight * canvasTop.value
-    d.style.left = x.value + 'px';
-    d.style.top = y.value + 'px';
-    
+    dom.style.left = x.value + 'px';
+    dom.style.top = y.value + 'px';
+
 }
 
 //确认
 function confirm() {
 
-    markLabelApi.Update().then(res => {
-
-
+    markLabelApi.Update({
+        CbCameraId: props.modelData.cbCameraId,
+        Name: name.value,
+        VideoWidth: props.modelData.videoWidth,
+        VideoHeight: props.modelData.videoHeight,
+        CanvasLeftRatio: x.value / document.body.offsetWidth,
+        CanvasTopRatio: y.value / document.body.offsetHeight,
+
+        CmMarkGroupId: props.modelData.cmMarkGroupId,//标记组 Id
+        PanPosition: props.modelData.panPosition,   //Pan 坐标
+        TiltPosition: props.modelData.tiltPosition,  //Tilt 坐标
+        ZoomPosition: props.modelData.zoomPosition,  //Zoom 坐标
+        IsDelete: props.modelData.isDelete, //软删除
+        Id: props.modelData.id,
+        CreateTime: props.modelData.createTime
+    }).then(res => {
+        console.log("res", res);
+
+        if (res.data.data == true) {
+            Msg.success("修改成功")
+             //关闭弹窗
+            notification.close("editLabel");
+        }
+        else{
+            Msg.error("修改失败",res.data.message)
+        }
     })
 }