站点配置功能完善

src/views/gis/Site/RoleLeft/index.vue

@@ -28,7 +28,7 @@
                                 marginRight: nodeType == '0' ? '120px' : '120px',
                             }">
                                 <j-ellipsis>
-                                    <AIcon :style="{ color: positionX?'#315efb':''}" v-if="nodeType == '1'" type="HeartFilled" />
+                                    <AIcon :style="{ color: positionX ?'#315efb':''}" v-if="nodeType == '1'" type="HeartFilled" />
                                     &nbsp;{{ nodeName }}
                                 </j-ellipsis>
                             </span>
@@ -56,7 +56,7 @@
                                 }">
                                     <AIcon type="DeleteOutlined" />
                                 </PermissionButton>
-                                <PermissionButton v-if="nodeType === '1'" type="link" :tooltip="{ title: '移除' }">
+                                <PermissionButton v-if="nodeType === '1' && positionX" type="link" :tooltip="{ title: '移除' }" @click="removeGroup(data)">
                                     <AIcon type="CloseOutlined" />
                                 </PermissionButton>
                             </span>
@@ -270,6 +270,16 @@ const deleteGroup = async (id: string) => {
     }
 }
 
+const removeGroup = async (data: any) => {
+    const res =  await editMonitor({id: data.id, positionX: '', positionY: ''});
+        if (res.status === 200) {
+            onlyMessage('操作成功!');
+            emit('getMonitorList');
+        } else {
+            onlyMessage('操作失败!');
+        }
+};
+
 const search = () => {
     queryGroup(true, searchValue.value);
 };

src/views/gis/Site/RoleRight/index.vue

@@ -9,7 +9,7 @@
 
 <script setup lang="ts" name="Role">
 import "leaflet/dist/leaflet.css";
-import { LatLngBoundsExpression, Layer, LayerGroup, Map } from 'leaflet';
+import { LatLngBoundsExpression, Layer, LayerGroup, Map, LeafletMouseEvent } from 'leaflet';
 import { addMonitor, editMonitor, deleteMonitor } from '@/api/monitor';
 import { monitorType } from '../type'
 import * as L from 'leaflet'
@@ -17,6 +17,7 @@ import { filterTreeItem, onlyMessage } from '@/utils/comm'
 import bg from '/images/bind/bdt.png'
 import { deviceIcons, stateIcons } from '@/assets/diviceIcon'
 import { pad } from "lodash-es";
+const emit = defineEmits([ 'getMonitorList']);
 interface MarkerType extends Layer {
     markerId?: string | number
 }
@@ -32,7 +33,7 @@ const markers = ref<LayerGroup>()
 const mapMonitorList = ref<monitorType[]>([])
 
 const createMarkers = (info: monitorType): MarkerType => {
-    let { id, name, monitorType, deviceNum, deviceIp, devicePort, positionX, positionY } = info
+    let { id, nodeName, positionX, positionY } = info
 
     const x = parseFloat(positionX as string);
     const y = parseFloat(positionY as string);
@@ -45,14 +46,26 @@ const createMarkers = (info: monitorType): MarkerType => {
         draggable: true,//开启拖拽
     })
     marker.markerId = id
-    marker.bindTooltip('dsadas', {
-        permanent: false, // 永久显示提示
+    marker.bindTooltip(nodeName, {
+        permanent: true, // 永久显示提示
         direction: 'top',// 提示显示的方向
         offset: L.point(0, -10)
     });
-    console.log(marker)
+    // 添加拖拽结束事件
+    marker.on('dragend', async (event: LeafletMouseEvent) => {
+        const newMarkerPosition = event.target.getLatLng();
+        if (newMarkerPosition) {
+            const { lat, lng } = newMarkerPosition;
+            //存在则修改位置
+            const res = await editMonitor({ id: event.target.markerId, positionX: lng, positionY: lat });
+            if (res.result) {
+                onlyMessage('保存成功');
+                emit('getMonitorList');
+            }
+        }
+    });
     return marker
-}
+};
 //初始化画板
 const loadMap = () => {
     const imageBounds: LatLngBoundsExpression = [[0, 0], [1080, 1980]];
@@ -72,7 +85,8 @@ const loadMap = () => {
         map.value = L.map('map')
         map.value.setView([30.58, 114.34,], 10);
         const stamenLayer = L.tileLayer('/static/map/{z}/{x}/{y}/tile.png', {
-            attribution: '垃圾程序员', // 图层属性信息※
+            attribution: '', // 图层属性信息※
+            
             minZoom: 10, // 最小缩放级别※
             maxZoom: 15 // 最大缩放级别※
         }).addTo(map.value);
@@ -109,11 +123,11 @@ const drop = async (event: DragEvent) => {
         const { lat, lng } = mouseEventLatLng;
         //const dragEvent = event as DragEvent;
         let monitorData = JSON.parse(event.dataTransfer?.getData('monitorData') || '');
-        console.log("🚀  monitorData:", monitorData, lat, lng)
         //存在则修改位置
         const res = await editMonitor({ ...monitorData, positionX: lng, positionY: lat });
         if (res.result) {
             onlyMessage('保存成功');
+            emit('getMonitorList');
             if (!monitorData.positionX) {
                 markers.value?.addLayer(createMarkers({ ...monitorData, positionX: lng, positionY: lat }))
             }
@@ -132,13 +146,17 @@ const onDragLeave = (event: MouseEvent) => {
     console.log('Drag leave');
 };
 
-onMounted(() => {
-    loadMap()
-    mapMonitorList.value = filterTreeItem(props.listData, 'children', (i) => i.positionX)
+watch(() => props.listData, (val) => {
+    console.log("🚀  val:", val)
+    markers.value?.clearLayers()
+    mapMonitorList.value = filterTreeItem(props.listData, 'children', i => i.positionX)
     mapMonitorList.value.forEach((i: monitorType) => {
         markers.value?.addLayer(createMarkers(i))
     })
+})
 
+onMounted(() => {
+    loadMap();
 })
 
 </script>

src/views/gis/Site/index.vue

@@ -4,7 +4,7 @@
             <Splitpanes ref="split" class="default-theme"
                 @splitter-click="treeShow = !treeShow; treeMinSize = treeMinSize == 0 ? 20 : 0;"
                 :style="{ height: bodyHeight + 'px', overflow: true, minHeight: '720px', width: '100%' }">
-                <Pane :style="{backgroudColor:'#fff'}" ref="paneLeft" :size="treeMinSize" :min-size="treeMinSize" v-show="treeShow">
+                <Pane :style="{backgroudColor:'#fff'}" ref="paneLeft" :size="treeMinSize" :min-size="0" v-show="treeShow">
                     <j-card :style="{height: '100%'}">
                         <Left :listData="listData" :logicId="logicId" @getMonitorList="getMonitorList"
                         @select-data="selectData" />
@@ -13,7 +13,7 @@
                 </Pane>
                 <pane min-size="50" class="realTime" ref="paneRight" :size="100 - treeMinSize"
                     :style="{ minWidth: '500px' }">
-                    <Right :listData="listData" :groupId="groupId" />
+                    <Right :listData="listData" :groupId="groupId" @getMonitorList="getMonitorList" />
                 </pane>
             </Splitpanes>
         </FullPage>