标签编辑1.0

src/views/page/Model/LabelEditModel.vue

@@ -1,19 +1,19 @@
 <template>
     <div class="label-edit-model">
         <Draggable></Draggable>
-        <div class="model-head"><Button  type="primary" danger @click="reset">重新调整</Button></div>
+        <div class="model-head"><Button type="primary" danger @click="reset">重新调整</Button></div>
         <Row>
             <Col :span="24" class="label-attribute">
             <Row>
                 <Col :span="4">标签名称 :</Col>
-                <Col :span="8"><Input size="small" v-model:value="name"></Input></Col>
+                <Col :span="8"><Input size="small" v-model:value="name" @change="changeName"></Input></Col>
             </Row>
             </Col>
             <Col :span="24" class="label-attribute">
             <Row>
                 <Col :span="4">标签X轴 :</Col>
                 <Col :span="8">
-                <InputNumber size="small" :min="0" :max="10000" :step="0.001" v-model:value="x"/>
+                <InputNumber size="small" :min="0" :max="10000" :step="1.0" v-model:value="x" @change="changeX" />
                 </Col>
             </Row>
             </Col>
@@ -21,7 +21,7 @@
             <Row>
                 <Col :span="4">标签Y轴 :</Col>
                 <Col :span="8">
-                <InputNumber size="small" :min="0" :max="10000" :step="0.001" v-model:value="y"/>
+                <InputNumber size="small" :min="0" :max="10000" :step="1.0" v-model:value="y" @change="changeY" />
                 </Col>
             </Row>
             </Col>
@@ -42,21 +42,21 @@ import Draggable from '@/components/Draggable.vue'
 import { onMounted, reactive, ref, UnwrapRef, watch } from 'vue';
 import * as markLabelApi from '@/axios/cameraMark/markLabelApi';
 interface FormState {
-  id: string
+    id: string
-  name: string;
+    name: string;
-  x: string;
+    x: string;
-  y:string;
+    y: string;
-  canvasLeftRatio: string;
+    canvasLeftRatio: string;
-  canvasTopRatio: string;
+    canvasTopRatio: string;
 }
 
 const formState: UnwrapRef<FormState> = reactive({
-  // id: '',
+    // id: '',
-  name: '',
+    name: '',
-  x: null,
+    x: null,
-  y:null,
+    y: null,
-  canvasLeftRatio: null,
+    canvasLeftRatio: null,
-  canvasTopRatio: null,
+    canvasTopRatio: null,
 
 });
 
@@ -66,41 +66,95 @@ const y = ref();
 const canvasLeft = ref();
 const canvasTop = ref();
 
-watch(name, (nv, ov) => {
+// watch(name, (nv, ov) => {
-    // console.log("document.body.offsetWidth ",document.body.offsetWidth );
+//     // console.log("document.body.offsetWidth ",document.body.offsetWidth );
-    // console.log("document.body.clientHeight",document.body.offsetHeight);
+//     // console.log("document.body.clientHeight",document.body.offsetHeight);
 
-    x.value = document.body.offsetWidth  * canvasLeft.value
+//     x.value = document.body.offsetWidth * canvasLeft.value
-    y.value = document.body.offsetHeight * canvasTop.value
+//     y.value = document.body.offsetHeight * canvasTop.value
 
-})
+// })
 
 const props = defineProps({
-    modelData:Object
+    modelData: Object
 })
-onMounted(()=>{
+onMounted(() => {
-    console.log("收到了",props.modelData);
+    console.log("收到了", props.modelData);
-    if(props.modelData){
+    if (props.modelData) {
         name.value = props.modelData.name;
         canvasLeft.value = props.modelData.canvasLeftRatio
         canvasTop.value = props.modelData.canvasTopRatio
+
+        x.value = document.body.offsetWidth * canvasLeft.value
+        y.value = document.body.offsetHeight * canvasTop.value
     }
 })
 
+function changeX(e: any) {
+    // console.log(e);
+    //获取dom
+    let d = document.getElementById(props.modelData.id);
+    // console.log(d);
+    // console.log(d?.style);
+    //修改css
+    d.style.left = e + 'px';
+     //修改 x
+    x.value = e;
+    // console.log(d?.style.left);
+
+}
+function changeY(e: any) {
+    // console.log(e);
+    //获取dom
+    let d = document.getElementById(props.modelData.id);
+    // console.log(d);
+    // console.log(d?.style);
+    //修改css
+    d.style.top = e + 'px';
+    //修改 y
+    y.value = e;
+    // console.log(d?.style.left);
+
+}
+
+function changeName(e: any) {
+    // console.log(e);
+    //获取dom
+    let d = document.getElementById(props.modelData.id);
+    // console.log(d);
+    let dom = d?.querySelector(".label-content")
+    // console.log(dom);
+    //修改html
+    dom.innerHTML = e.target.value;
+    name.value = e.target.value
+}
+
 //重新调整位置
-function reset(){
+function reset() {
 
 }
 
 //取消
-function cancel(){
+function cancel() {
+    //关闭弹窗
     notification.close("editLabel");
+    //获取dom
+    let d = document.getElementById(props.modelData.id);
+    //获取dom HTML
+    let dom = d?.querySelector(".label-content")
+    //恢复原来模样
+    dom.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';
+    
 }
 
 //确认
-function  confirm(){
+function confirm() {
 
-    markLabelApi.Update().then( res =>{
+    markLabelApi.Update().then(res => {
 
 
     })

src/views/page/cameraCenter.vue

@@ -9,7 +9,7 @@
         </video> -->
         <div id="videoPlayer" @mousedown="mouseDownVideo"></div>
         <div v-for="item in labelList" :class="`labels ${item.groupName == '视频标签' ? 'lavels-video' : 'lavels-build'}`"
-            :key="item.id"
+            :key="item.id" :id="item.id"
             :style="`top:${canvasHeight * item.canvasTopRatio}px;left:${canvasWidth * item.canvasLeftRatio}px`">
             <a-dropdown :trigger="['contextmenu']">
                 <div class="labels-item" v-if="item.groupName == '视频标签'">