From 67c84731b4582d6f5f10e500772efabaac0945f0 Mon Sep 17 00:00:00 2001
From: joylink_zhaoerwei <Bob_Engineer@163.com>
Date: Thu, 27 Jun 2024 18:09:03 +0800
Subject: [PATCH] Squashed commit of the following:
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

commit 7cb3586ad5831142e582dd556f4cd27b4cbc2677
Author: joylink_zhaoerwei <Bob_Engineer@163.com>
Date:   Thu Jun 27 18:06:32 2024 +0800

    拖拽组件添加可变宽高配置（鼠标放置左边和上方移动改变弹框大小）

commit 530a6cf1a342f5023564b9809971f03002a3bb6b
Author: joylink_zhaoerwei <Bob_Engineer@163.com>
Date:   Thu Jun 27 16:40:19 2024 +0800

    驱采绘制点击变背景色

commit d4c5e5a4a859394f1563078e471bbf2d87d61b6a
Author: joylink_zhaoerwei <Bob_Engineer@163.com>
Date:   Thu Jun 27 15:41:42 2024 +0800

    继电器增加批量操作
---
 src/components/common/DraggableDialog.vue    | 53 ++++++++++++++++-
 src/components/common/ResizableDivHeight.vue | 61 ++++++++++++++++++++
 src/components/common/ResizableDivWidth.vue  | 61 ++++++++++++++++++++
 src/components/draw-app/dialogs/CiCjList.vue |  9 ++-
 src/components/draw-app/dialogs/CiQdList.vue |  9 ++-
 5 files changed, 189 insertions(+), 4 deletions(-)
 create mode 100644 src/components/common/ResizableDivHeight.vue
 create mode 100644 src/components/common/ResizableDivWidth.vue

diff --git a/src/components/common/DraggableDialog.vue b/src/components/common/DraggableDialog.vue
index 3fd124e..2da85ea 100644
--- a/src/components/common/DraggableDialog.vue
+++ b/src/components/common/DraggableDialog.vue
@@ -48,18 +48,30 @@
       <q-scroll-area
         v-if="props.height"
         id="draggable-dialog-scroll"
-        :style="`width: ${props.width}px;height: ${props.height}px`"
+        :style="`width: ${dialogWidth}px;height: ${dialogHeight}px`"
         style="max-height: calc(90vh - 100px)"
       >
         <slot></slot>
       </q-scroll-area>
       <slot name="footer"></slot>
       <div
-        :style="`width: ${props.width}px`"
+        :style="`width: ${dialogWidth}px`"
         style="position: sticky; bottom: 0px"
       >
         <slot name="sticky-footer"></slot>
       </div>
+      <resizable-div-width
+        v-if="resizableWidth"
+        :height="dialogHeight - 10"
+        @drapWidth="drapWidth"
+        @drapMouseUp="drapMouseUp"
+      />
+      <resizable-div-height
+        v-if="resizableHeight"
+        :width="dialogWidth - 10"
+        @drapHeight="drapHeight"
+        @drapMouseUp="drapMouseUp"
+      />
     </q-card>
   </q-dialog>
 </template>
@@ -67,6 +79,8 @@
 <script setup lang="ts">
 import { QBar, useDialogPluginComponent } from 'quasar';
 import { ref, onMounted, onUnmounted, reactive } from 'vue';
+import ResizableDivWidth from './ResizableDivWidth.vue';
+import ResizableDivHeight from './ResizableDivHeight.vue';
 
 const emit = defineEmits({
   ...useDialogPluginComponent.emitsObject,
@@ -84,6 +98,8 @@ const props = withDefaults(
     height?: number;
     bgColor?: string;
     bgBorder?: string;
+    resizableWidth?: boolean;
+    resizableHeight?: boolean;
   }>(),
   {
     width: 500,
@@ -92,6 +108,8 @@ const props = withDefaults(
     titleHeight: 36,
     fontSize: 20,
     fontColor: 'white',
+    resizableWidth: false,
+    resizableHeight: false,
   }
 );
 
@@ -109,6 +127,10 @@ const start = { x: 0, y: 0 };
 const startOffset = { x: 0, y: 0 };
 
 onMounted(() => {
+  dialogWidth.value = props.width;
+  lastDialogWidth = props.width;
+  dialogHeight.value = props.height;
+  lastDialogHeight = props.height;
   window.addEventListener('mousedown', onMouseDown);
 });
 
@@ -142,4 +164,31 @@ function onHide() {
   emit('hide');
   onDialogHide();
 }
+
+let lastDialogWidth = 0;
+const dialogWidth = ref(0);
+function drapWidth(width: number) {
+  if (
+    (dialogWidth.value > 300 && width > 0) ||
+    (dialogWidth.value < 1800 && width < 0)
+  ) {
+    dialogWidth.value = lastDialogWidth - width * 2 + 15;
+  }
+}
+
+let lastDialogHeight = 0;
+const dialogHeight = ref(0);
+function drapHeight(height: number) {
+  if (
+    (dialogHeight.value > 150 && height > 0) ||
+    (dialogHeight.value < 750 && height < 0)
+  ) {
+    dialogHeight.value = lastDialogHeight - height * 2 + 15;
+  }
+}
+
+function drapMouseUp() {
+  lastDialogWidth = dialogWidth.value;
+  lastDialogHeight = dialogHeight.value;
+}
 </script>
diff --git a/src/components/common/ResizableDivHeight.vue b/src/components/common/ResizableDivHeight.vue
new file mode 100644
index 0000000..8339c89
--- /dev/null
+++ b/src/components/common/ResizableDivHeight.vue
@@ -0,0 +1,61 @@
+<template>
+  <div
+    ref="drapBox"
+    class="drapWidth"
+    :style="{
+      width: props.width + 'px',
+      height: props.height + 'px',
+    }"
+    @mousedown.stop="onMouseDown"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+
+const props = withDefaults(
+  defineProps<{
+    width?: number;
+    height?: number;
+  }>(),
+  {
+    width: 300,
+    height: 15,
+  }
+);
+
+const drapBox = ref();
+onMounted(() => {
+  drapBox.value.onmousedown = () => {
+    return false;
+  };
+});
+const emit = defineEmits(['drapHeight', 'drapMouseUp']);
+function onMouseDown(e: MouseEvent) {
+  drapBox.value.onmousedown = () => {
+    return false;
+  };
+  if (!e.target) return;
+  const disY = e.clientY - drapBox.value.offsetTop;
+  document.onmousemove = (e) => {
+    let top = e.clientY - disY;
+    emit('drapHeight', top);
+  };
+  document.onmouseup = () => {
+    emit('drapMouseUp');
+    document.onmousemove = null;
+    document.onmouseup = null;
+  };
+}
+</script>
+
+<style scoped>
+.drapWidth {
+  position: absolute;
+  top: 0;
+  z-index: 9999;
+  background: red;
+  opacity: 0;
+  cursor: n-resize;
+}
+</style>
diff --git a/src/components/common/ResizableDivWidth.vue b/src/components/common/ResizableDivWidth.vue
new file mode 100644
index 0000000..a2ce8ad
--- /dev/null
+++ b/src/components/common/ResizableDivWidth.vue
@@ -0,0 +1,61 @@
+<template>
+  <div
+    ref="drapBox"
+    class="drapWidth"
+    :style="{
+      width: props.width + 'px',
+      height: props.height + 'px',
+    }"
+    @mousedown.stop="onMouseDown"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+
+const props = withDefaults(
+  defineProps<{
+    width?: number;
+    height?: number;
+  }>(),
+  {
+    width: 15,
+    height: 500,
+  }
+);
+
+const drapBox = ref();
+onMounted(() => {
+  drapBox.value.onmousedown = () => {
+    return false;
+  };
+});
+const emit = defineEmits(['drapWidth', 'drapMouseUp']);
+function onMouseDown(e: MouseEvent) {
+  drapBox.value.onmousedown = () => {
+    return false;
+  };
+  if (!e.target) return;
+  const disX = e.clientX - drapBox.value.offsetLeft;
+  document.onmousemove = (e) => {
+    let left = e.clientX - disX;
+    emit('drapWidth', left);
+  };
+  document.onmouseup = () => {
+    emit('drapMouseUp');
+    document.onmousemove = null;
+    document.onmouseup = null;
+  };
+}
+</script>
+
+<style scoped>
+.drapWidth {
+  position: absolute;
+  top: 0;
+  z-index: 9999;
+  background: red;
+  opacity: 0;
+  cursor: e-resize;
+}
+</style>
diff --git a/src/components/draw-app/dialogs/CiCjList.vue b/src/components/draw-app/dialogs/CiCjList.vue
index d40830d..dbc6aef 100644
--- a/src/components/draw-app/dialogs/CiCjList.vue
+++ b/src/components/draw-app/dialogs/CiCjList.vue
@@ -1,5 +1,12 @@
 <template>
-  <draggable-dialog seamless title="采集列表" :width="865" :height="485">
+  <draggable-dialog
+    seamless
+    title="采集列表"
+    :width="865"
+    :height="485"
+    resizableWidth
+    resizableHeight
+  >
     <div class="row no-wrap" v-for="row in showSetCellMessage.rows" :key="row">
       <div
         class="ceil"
diff --git a/src/components/draw-app/dialogs/CiQdList.vue b/src/components/draw-app/dialogs/CiQdList.vue
index d3ce234..d667941 100644
--- a/src/components/draw-app/dialogs/CiQdList.vue
+++ b/src/components/draw-app/dialogs/CiQdList.vue
@@ -1,5 +1,12 @@
 <template>
-  <draggable-dialog seamless title="驱动列表" :width="865" :height="485">
+  <draggable-dialog
+    seamless
+    title="驱动列表"
+    :width="865"
+    :height="485"
+    resizableWidth
+    resizableHeight
+  >
     <div class="row no-wrap" v-for="row in showSetCellMessage.rows" :key="row">
       <div
         class="ceil"