Merge remote-tracking branch 'origin/dev' into dev

src/components/Dialog/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="modelValue || customShow" class="common-dialog" :style="{ width: computedWidth, height: computedHeight, zIndex: zIndex }">
+  <div v-if="modelValue || customShow" v-drag="{draggable: draggable, scaleX: containerScale().scaleX, scaleY: containerScale().scaleY}" class="common-dialog" :style="{ width: computedWidth, height: computedHeight, zIndex: zIndex }">
     <div :class="type === 'xs' || headerType === 'header2' ? 'dialog-header2' : 'dialog-header'">
       <div v-if="!hideTitle" class="dialog-title">
         {{ title ? title : '弹窗' }}
@@ -52,6 +52,7 @@ interface Props {
   customShow?: boolean;
   headerType?: string;
   getTagId?: string;
+  draggable?: boolean;
 }
 const props = withDefaults(defineProps<Props>(), {
   modelValue: false,
@@ -60,6 +61,7 @@ const props = withDefaults(defineProps<Props>(), {
   confirmText: '确定',
   hideFooter: false
 });
+const containerScale = inject('containerScale');
 const emit = defineEmits(['update:modelValue', 'close', 'confirm']);
 const computedWidth = computed(() => {
   if (!!props.width) {

src/components/NearbyVideos/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <Dialog custom-show type="md" title="附近视频" hide-footer @close="handleClose">
+  <Dialog custom-show type="md" title="附近视频" draggable hide-footer @close="handleClose">
     <div class="flex-box">
       <div>附近距离</div>
       <el-select v-model="queryParams.radius" class="custom-select" popper-class="custom-popper" :teleported="false" @change="initData">

src/directive/common/dialogDrag.ts

@@ -1,58 +0,0 @@
-/*
- * @Author: shenmei
- * @Date: 2022-08-24 13:54:39
- * @LastEditors: Please set LastEditors
- * @LastEditTime: 2023-02-20 20:47:34
- * @Description: 弹框拖拽指令
- * @FilePath: \ioc_cooperation_2\src\directives\dialogDrag.js
- */
-import Vue from 'vue';
-Vue.directive('dialogDrag', {
-  bind(el, binding, vnode, oldVnode) {
-    const dialogHeaderEl = el.querySelector('.dialogDrag-target');
-    const dragDom = el;
-    dialogHeaderEl.style.cursor = 'move';
-
-    // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
-    const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null);
-
-    dialogHeaderEl.onmousedown = (e) => {
-      // 鼠标按下，计算当前元素距离可视区的距离
-      const disX = e.clientX - dialogHeaderEl.offsetLeft;
-      const disY = e.clientY - dialogHeaderEl.offsetTop;
-
-      // 获取到的值带px 正则匹配替换
-      let styL, styT;
-
-      // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
-      if (sty.left.includes('%')) {
-        styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100);
-        styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100);
-      } else {
-        styL = +sty.left.replace(/\px/g, '');
-        styT = +sty.top.replace(/\px/g, '');
-      }
-
-      document.onmousemove = function(e) {
-        // 通过事件委托，计算移动的距离
-        const l = e.clientX - disX;
-        const t = e.clientY - disY;
-
-        // 移动当前元素
-        dragDom.style.left = `${l + styL}px`;
-        dragDom.style.top = `${t + styT}px`;
-        // 将此时的位置传出去
-        // binding.value({x:e.pageX,y:e.pageY})
-      };
-
-      document.onmouseup = function(e) {
-        if(binding.expression) {
-          console.log("鼠标拖完触发",binding);
-          vnode.context[binding.expression]();
-        }
-        document.onmousemove = null;
-        document.onmouseup = null;
-      };
-    };
-  }
-});

src/directive/common/drag.ts

@@ -0,0 +1,42 @@
+export default {
+  mounted(el, binding) {
+    const { draggable, scaleX = 1, scaleY = 1 } = binding.value;
+    if (!draggable) {
+      // 如果拖拽功能被禁用，则不执行任何拖拽相关的逻辑
+      return;
+    }
+
+    el.style.position = 'fixed';
+    el.style.cursor = 'move';
+
+    const dragDom = el;
+
+    let disX = 0; // 鼠标按下时，鼠标与拖拽元素的左边距
+    let disY = 0; // 鼠标按下时，鼠标与拖拽元素的上边距
+
+    dragDom.onmousedown = (e) => {
+      // 鼠标按下，计算当前元素距离可视区的距离
+      disX = e.clientX / scaleX - dragDom.offsetLeft;
+      disY = e.clientY / scaleY - dragDom.offsetTop;
+
+      // 鼠标移动事件
+      document.onmousemove = function (e) {
+        // 通过事件委托，计算移动的距离
+        const l = e.clientX / scaleX - disX;
+        const t = e.clientY / scaleY - disY;
+        // 移动当前元素
+        dragDom.style.left = `${l + 'px'}`;
+        dragDom.style.top = `${t + 'px'}`;
+
+        // 将此时的位置传出去
+        // binding.value({x:e.pageX,y:e.pageY})
+      };
+
+      // 鼠标松开事件
+      document.onmouseup = function (e) {
+        document.onmousemove = null;
+        document.onmouseup = null;
+      };
+    };
+  }
+};

src/directive/index.ts

@@ -1,4 +1,5 @@
 import copyText from './common/copyText';
+import drag from './common/drag';
 import { hasPermi, hasRoles } from './permission';
 import { App } from 'vue';
 
@@ -6,4 +7,5 @@ export default (app: App) => {
   app.directive('copyText', copyText);
   app.directive('hasPermi', hasPermi);
   app.directive('hasRoles', hasRoles);
+  app.directive('drag', drag);
 };

src/types/components.d.ts

@@ -44,6 +44,8 @@ declare module 'vue' {
     ElRow: typeof import('element-plus/es')['ElRow']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
     ElSelect: typeof import('element-plus/es')['ElSelect']
+    ElSkeleton: typeof import('element-plus/es')['ElSkeleton']
+    ElSkeletonItem: typeof import('element-plus/es')['ElSkeletonItem']
     ElSlider: typeof import('element-plus/es')['ElSlider']
     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']

src/views/globalMap/RightMenu/Fireproofing.vue

@@ -49,7 +49,7 @@
           @current-change="handleChangePage"
         />
       </div>
-      <Dialog v-if="showDialog" v-model="showDialog" type="md" title="森林防火" hide-footer>
+      <Dialog v-if="showDialog" v-model="showDialog" draggable type="md" title="森林防火" hide-footer>
         <div style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center">
           <HKVideo :dot_data="videoMonitorData" autoplay />
         </div>

src/views/globalMap/RightMenu/GridPointRainfall.vue

@@ -1,5 +1,5 @@
 <template>
-  <Dialog custom-show title="格点雨量" :height="'1000px'" hide-footer @close="handleClose">
+  <Dialog draggable custom-show title="格点雨量" :height="'1000px'" hide-footer @close="handleClose">
     <div class="gradient-text title">雨量统计：{{address}}({{location[0]}}, {{location[1]}})</div>
     <Chart :option="chartOption" style="height: 700px" />
   </Dialog>

src/views/globalMap/RightMenu/PreventDrowning.vue

@@ -38,7 +38,7 @@
           </div>
         </div>
       </div>
-      <Dialog v-if="showDialog" v-model="showDialog" type="md" title="防溺水" hide-footer>
+      <Dialog v-if="showDialog" v-model="showDialog" type="md" draggable title="防溺水" hide-footer>
         <div style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center">
           <HKVideo :dot_data="videoMonitorData" />
         </div>

src/views/globalMap/RightMenu/Reservoir.vue

@@ -38,7 +38,7 @@
           </div>
         </div>
       </div>
-      <Dialog v-if="showDialog" v-model="showDialog" type="md" title="江湖河库" hide-footer>
+      <Dialog v-if="showDialog" v-model="showDialog" draggable type="md" title="江湖河库" hide-footer>
         <div style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center">
           <HKVideo :dot_data="videoMonitorData" />
         </div>

src/views/globalMap/RightMenu/ReservoirMonitor.vue

@@ -34,7 +34,7 @@
       </div>
     </div>
   </div>
-  <Dialog v-model="showDialog" type="lg" title="水库监测" hide-footer>
+  <Dialog v-model="showDialog" type="lg" draggable title="水库监测" hide-footer>
     <div class="flex">
       <div class="detail-container">
         <div class="flex">

src/views/globalMap/RightMenu/RiverMonitor.vue

@@ -34,7 +34,7 @@
       </div>
     </div>
   </div>
-  <Dialog v-model="showDialog" type="xl" title="河道监测" hide-footer>
+  <Dialog v-model="showDialog" type="xl" draggable title="河道监测" hide-footer>
     <div class="flex">
       <div class="detail-container">
         <div class="flex">

src/views/globalMap/RightMenu/RoadNetworkVideo.vue

@@ -49,7 +49,7 @@
         </div>
       </div>
     </div>
-    <Dialog v-if="showDialog" v-model="showDialog" type="md" title="路网视频" hide-footer>
+    <Dialog v-if="showDialog" v-model="showDialog" type="md" draggable title="路网视频" hide-footer>
       <div style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center">
         <HKVideo :dot_data="videoMonitorData" />
       </div>

src/views/globalMap/RightMenu/TrafficVideo.vue

@@ -38,7 +38,7 @@
           </div>
         </div>
       </div>
-      <Dialog v-if="showDialog" v-model="showDialog" type="md" title="交通视频" hide-footer>
+      <Dialog v-if="showDialog" v-model="showDialog" type="md" draggable title="交通视频" hide-footer>
         <div style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center">
           <HKVideo :dot_data="videoMonitorData" />
         </div>
@@ -49,7 +49,7 @@
 
 <script lang="ts" setup>
 import { Search } from '@element-plus/icons-vue';
-import { getRescue, getTraffic } from "@/api/globalMap/mitigation";
+import { getTraffic } from '@/api/globalMap/mitigation';
 import { deepClone } from '@/utils';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;

src/views/globalMap/index.vue

@@ -147,7 +147,6 @@ let showDrawTools = ref(false);
 
 // 点击菜单
 const clickMenu = (item, dataList) => {
-  // debugger
   if (item.path === '1') {
     // 空间分析
     if (item.component === 'spatial') {