From c554661c7a8eb86ad9542339d489e76bbec1de45 Mon Sep 17 00:00:00 2001
From: chendingwei <1170506816@qq.com>
Date: Thu, 15 Dec 2022 15:16:19 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E7=BC=96=E8=BE=91=E6=8B=96?=
 =?UTF-8?q?=E6=8B=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .gitignore                              |  1 +
 components.d.ts                         |  1 +
 src/components/Draggable.vue            | 49 +++++++++++++++++++++++++
 src/utils/popup.ts                      | 12 +++---
 src/views/page/Model/LabelEditModel.vue | 17 +++++++++
 src/views/page/cameraCenter.vue         |  7 ++--
 6 files changed, 76 insertions(+), 11 deletions(-)
 create mode 100644 src/components/Draggable.vue
 create mode 100644 src/views/page/Model/LabelEditModel.vue

diff --git a/.gitignore b/.gitignore
index b879930..e2625ea 100644
--- a/.gitignore
+++ b/.gitignore
@@ -24,3 +24,4 @@ dist-ssr
 *.sw?
 
 /components.d.ts
+/components.d.ts
diff --git a/components.d.ts b/components.d.ts
index ee82309..703e50a 100644
--- a/components.d.ts
+++ b/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']
   }
diff --git a/src/components/Draggable.vue b/src/components/Draggable.vue
new file mode 100644
index 0000000..9431d31
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/utils/popup.ts b/src/utils/popup.ts
index 6740734..f8a53e3 100644
--- a/src/utils/popup.ts
+++ b/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: () => {
diff --git a/src/views/page/Model/LabelEditModel.vue b/src/views/page/Model/LabelEditModel.vue
new file mode 100644
index 0000000..9acc8c7
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/views/page/cameraCenter.vue b/src/views/page/cameraCenter.vue
index bca4591..e2f95e7 100644
--- a/src/views/page/cameraCenter.vue
+++ b/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",
-                    { style: { color: "black" } },
-                    "是否确认删除该标签？")], "editLabel");
+        popup("编辑标签", [h( LabelEditModel )], "editLabel");
     } else if (menuKey == "delete") {
         Modal.confirm({
             zIndex: 10000,