添加编辑拖拽

.gitignore

@@ -24,3 +24,4 @@ dist-ssr
 *.sw?
 
 /components.d.ts
+/components.d.ts

components.d.ts

@@ -11,6 +11,7 @@ declare module '@vue/runtime-core' {
     AMenu: typeof import('ant-design-vue/es')['Menu']
     AMenuItem: typeof import('ant-design-vue/es')['MenuItem']
     ATree: typeof import('ant-design-vue/es')['Tree']
+    Draggable: typeof import('./src/components/Draggable.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
   }

src/components/Draggable.vue

@@ -0,0 +1,49 @@
+<!--   
+  *@描述:   拖拽组件
+            控制 消息弹窗组件 Notification
+  *@作者： 
+  *@日期： 
+  *@版本：1.0
+  */
+  -->
+<template>
+    <div class="draggable" @mousedown="draggable"></div>
+</template>
+<script setup lang="ts">
+const draggable = function (e: any) {
+    let odiv = e.target;        //获取目标元素
+    let pdiv = odiv.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement;
+    //算出鼠标相对元素的位置
+    let disX = e.clientX - pdiv.offsetLeft;
+    let disY = e.clientY - pdiv.offsetTop;
+    document.onmousemove = (e) => {
+        //鼠标按下并移动的事件
+        //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
+        let left = e.clientX - disX;
+        let top = e.clientY - disY;
+        pdiv.style.left = left + 'px';
+        pdiv.style.top = top + 'px';
+        odiv.style.cursor = 'move';
+    };
+    document.onmouseup = (e) => {
+        document.onmousemove = null;
+        document.onmouseup = null;
+    };
+
+}
+</script>
+<style lang="less" scoped>
+.draggable {
+    width: 110%;
+    height: 52px;
+    position: absolute;
+    top: -52px;
+    left: -26px;
+    background-color: rgba(0, 0, 0, 0);
+    z-index: 2;
+}
+
+.draggable:hover {
+    cursor: move;
+}
+</style>

src/utils/popup.ts

@@ -1,5 +1,5 @@
 import { Button, notification } from "ant-design-vue";
-import { CloseSquareTwoTone } from "@ant-design/icons-vue";
+import { CloseOutlined } from "@ant-design/icons-vue";
 import { h, VNode } from "vue";
 /**
  * 消息弹窗组件 Notification
@@ -44,10 +44,6 @@ export default function popup(
     placement: 'topLeft',
     style: {
       width: "540px",
-      // height: "600px",
-      // marginLeft: `-200px`,
-      /**right导致页面重排，不流畅，但目前mac和Windows通过效果
-       */
       top: "50%",
       left: `50%`, 
       transform: 'translate(-50%,-50%)',
@@ -85,9 +81,11 @@ export default function popup(
         btnBText
       ),
     ]),
-    closeIcon:  h(CloseSquareTwoTone, {
+    closeIcon:  h(CloseOutlined, {
       style: {
-        display:"none"
+        color:"#fff",
+        position:"relative",
+        zIndex:3
       },
     }) ,
     onClose: () => {

src/views/page/Model/LabelEditModel.vue

@@ -0,0 +1,17 @@
+<template>
+    <div class="label-edit-model">
+        <Draggable></Draggable>
+        <Button>123</Button>
+    </div>
+</template>
+
+<script setup lang='ts'>
+import {Button} from 'ant-design-vue'
+import Draggable  from '@/components/Draggable.vue'
+</script>
+
+<style scoped lang='less'>
+.label-edit-model{
+    position: relative;
+}
+</style>

src/views/page/cameraCenter.vue

@@ -42,6 +42,7 @@
 <script setup lang='ts'>
 ////@ts-nocheck
 import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+import { Modal } from 'ant-design-vue';
 import { ref, h, onMounted, getCurrentInstance, ComponentInternalInstance, onUnmounted, watch, createVNode } from "vue";
 import * as markLabelApi from '@/axios/cameraMark/markLabelApi';
 import * as markSearchApi from '@/axios/core/markSearchApi';
@@ -51,7 +52,7 @@ import { storeToRefs } from 'pinia';
 import Msg from "@/utils/message";
 import CameraLeftMenu from '@/views/page/Aside/cameraLeftMenu.vue'
 import CameraRightMenu from '@/views/page/Aside/cameraRightMenu.vue'
-import { Modal } from 'ant-design-vue';
+import LabelEditModel from '@/views/page/Model/LabelEditModel.vue'
 import popup from "@/utils/popup";
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 let piniaStore = useStore();
@@ -128,9 +129,7 @@ const onContextMenuClick = (labelId: string, menuKey: string) => {
     console.log(`labelId: ${labelId}, menuKey: ${menuKey}`);
     //防止添加多个key值，再次点击不能关闭。数组去重
     if (menuKey == "edit") {
-        popup("编辑标签", [h( "span",
+        popup("编辑标签", [h( LabelEditModel )], "editLabel");
-                    { style: { color: "black" } },
-                    "是否确认删除该标签？")], "editLabel");
     } else if (menuKey == "delete") {
         Modal.confirm({
             zIndex: 10000,