标签

src/views/page/Model/LabelEditModel.vue

@@ -6,14 +6,14 @@
             <Col :span="24" class="label-attribute">
             <Row>
                 <Col :span="4">标签名称 :</Col>
-                <Col :span="8"><Input size="small"></Input></Col>
+                <Col :span="8"><Input size="small" v-model:value="name"></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="1" :step="0.001" />
+                <InputNumber size="small" :min="0" :max="1" :step="0.001" v-model:value="x"/>
                 </Col>
             </Row>
             </Col>
@@ -21,13 +21,13 @@
             <Row>
                 <Col :span="4">标签Y轴 :</Col>
                 <Col :span="8">
-                <InputNumber size="small" :min="0" :max="1" :step="0.001" />
+                <InputNumber size="small" :min="0" :max="1" :step="0.001" v-model:value="y"/>
                 </Col>
             </Row>
             </Col>
             <Col :span="24" class="label-attribute">
             <div class="label-btn">
-                <Button type="primary">保存</Button>
+                <Button type="primary" @click="confirm">保存</Button>
                 <Button style="color:black;" @click="cancel">取消</Button>
             </div>
             </Col>
@@ -39,10 +39,49 @@
 <script setup lang='ts'>
 import { Input, Row, Col, InputNumber, Button, notification } from 'ant-design-vue'
 import Draggable from '@/components/Draggable.vue'
-import { onMounted } from 'vue';
+import { onMounted, reactive, ref, UnwrapRef, watch } from 'vue';
+import * as markLabelApi from '@/axios/cameraMark/markLabelApi';
+interface FormState {
+  id: string
+  name: string;
+  ip: string;
+  canvasLeftRatio: string;
+  canvasTopRatio: string;
+}
+const formState: UnwrapRef<FormState> = reactive({
+  // id: '',
+  name: '',
+  ip: '',
+  CbCameraParamsId: '',
+  userName: '',
 
-onMounted(()=>{
+});
+
+const name = ref();
+const x = ref();
+const y = ref();
+const canvasLeft = ref();
+const canvasTop = ref();
+
+watch(name, (nv, ov) => {
+    console.log("document.body.offsetWidth ",document.body.offsetWidth );
+    console.log("document.body.clientHeight",document.body.offsetHeight);
+    
+    x.value = document.body.offsetWidth  * canvasLeft.value
+    y.value = document.body.offsetHeight * canvasTop.value
+
+})
 
+const props = defineProps({
+    modelData:Object
+})
+onMounted(()=>{
+    console.log("收到了",props.modelData);
+    if(props.modelData){
+        name.value = props.modelData.name;
+        canvasLeft.value = props.modelData.canvasLeftRatio
+        canvasTop.value = props.modelData.canvasTopRatio
+    }
 })
 
 //取消
@@ -50,6 +89,14 @@ function cancel(){
     notification.close("editLabel");
 }
 
+//确认
+function  confirm(){
+
+    markLabelApi.Update().then( res =>{
+
+
+    })
+}
 
 </script>
 

src/views/page/cameraCenter.vue

@@ -184,10 +184,10 @@ function loadVideoCanvas() {
 const onContextMenuClick = (item: any, menuKey: string,) => {
     console.log(`labelId: ${item.id}, menuKey: ${menuKey}`);
     // console.log(`item: ${item}`);
-    console.log(item);
+    // console.log(item);
     //防止添加多个key值，再次点击不能关闭。数组去重
     if (menuKey == "edit") {
-        popup("编辑标签", [h(LabelEditModel)], "editLabel");
+        popup("编辑标签", [h(LabelEditModel,{ modelData: item})], "editLabel");
     } else if (menuKey == "delete") {
         Modal.confirm({
             zIndex: 10000,