拓扑图模版配置

package.json

@@ -29,6 +29,7 @@
     "screenfull": "^6.0.2",
     "use-element-plus-theme": "^0.0.5",
     "vue": "^3.3.11",
+    "vue-draggable-resizable": "3.0.0-beta.2",
     "vue-router": "4",
     "vxe-table": "^4.5.17",
     "xe-utils": "^3.5.14"

pnpm-lock.yaml

@@ -61,6 +61,9 @@ dependencies:
   vue:
     specifier: ^3.3.11
     version: 3.3.13(typescript@5.3.3)
+  vue-draggable-resizable:
+    specifier: 3.0.0-beta.2
+    version: 3.0.0-beta.2(vue@3.3.13)
   vue-router:
     specifier: '4'
     version: 4.2.5(vue@3.3.13)
@@ -2356,6 +2359,14 @@ packages:
       vue: 3.3.13(typescript@5.3.3)
     dev: false
 
+  /vue-draggable-resizable@3.0.0-beta.2(vue@3.3.13):
+    resolution: {integrity: sha512-BVk7rKw5OdZh9jT+bHQd+wPWZMBTAkBnfmjNRFbZFPsTSwndAvAdV7YI7IJtyDL3Qwq9XNYjSl5wi7/8ivs5mw==}
+    peerDependencies:
+      vue: ^3.2.25
+    dependencies:
+      vue: 3.3.13(typescript@5.3.3)
+    dev: false
+
   /vue-router@4.2.5(vue@3.3.13):
     resolution: {integrity: sha512-DIUpKcyg4+PTQKfFPX88UWhlagBEBEfJ5A8XDXRJLUnZOvcpMF8o/dnL90vpVkGaPbjvXazV/rC1qBKrZlFugw==, tarball: https://registry.npmmirror.com/vue-router/-/vue-router-4.2.5.tgz}
     peerDependencies:

src/api/cs-device-boot/lineTemplate.ts

@@ -0,0 +1,10 @@
+import request from '@/utils/request'
+
+// 上传拓扑图模板监测点位置
+export const addLineTemplate = (data: any) => {
+    return request({
+        url: '/cs-device-boot/lineTemplate/addLineTemplate',
+        method: 'POST',
+        data: data
+    })
+}

src/views/govern/log/debug.vue

@@ -33,9 +33,12 @@ const tableStore = new TableStore({
 
     loadCallback: () => {
         tableStore.table.data.forEach((item: any) => {
-            item.failReason = item.failReason || '/'
             item.result = item.result === 1 ? '成功' : '失败'
-            item.loginName = item.loginName || '/'
+            for (let key in item) {
+                if (typeof item[key] !== 'number') {
+                    item[key] = item[key] || '/'
+                }
+            }
         })
     }
 })

src/views/govern/manage/gplot/popupEdit.vue

@@ -1,117 +1,175 @@
 <template>
-    <el-dialog class='cn-operate-dialog' v-model='dialogVisible' title='编辑拓扑图信息'>
-        <el-form>
-            <el-form-item label='拓扑图:' style='height: auto !important;'>
-                <div class='gplot-content'>
-                    <img :src='imgUrl' class='gplot-content' style='border: 1px solid #dcdfe6' />
-<!--                    <VueDraggableResizable-->
-<!--                        :isActive='editorIndex == index'-->
-<!--                        :h='item.height'-->
-<!--                        :w='item.width'-->
-<!--                        :x='item.left'-->
-<!--                        :y='item.top'-->
-<!--                        @dragging='resize(index, $event)'-->
-<!--                        v-for='(item, index) in pointList'-->
-<!--                        :key='index'-->
-<!--                        :isResizable='false'-->
-<!--                    >-->
-<!--                        <div-->
-<!--                            class='text'-->
-<!--                            style='line-height: 20px; white-space: nowrap'-->
-<!--                            :style="{ color: item.name === '监测点' ? 'red' : 'black' }"-->
-<!--                            @click.stop='textClick(item, index)'-->
-<!--                        >-->
-<!--                            {{ item.name }}-->
-<!--                        </div>-->
-<!--                    </VueDraggableResizable>-->
+    <el-dialog class="cn-operate-dialog" v-model="dialogVisible" title="编辑拓扑图信息">
+        <el-form :label-width="140">
+            <el-form-item label="拓扑图:" style="height: auto !important">
+                <div class="gplot-content">
+                    <VueDraggableResizable
+                        class-name-draggable="gplot-content-item"
+                        class-name-active="gplot-content-item-active"
+                        :active="editorIndex == index"
+                        :resizable="false"
+                        :parent="true"
+                        :x="item.left"
+                        :y="item.top"
+                        :w="item.width"
+                        :h="item.height"
+                        @dragStart="editorIndex = index"
+                        @dragging="resize"
+                        v-for="(item, index) in pointList"
+                        :key="index"
+                        :isResizable="false"
+                    >
+                        <div
+                            class="text"
+                            style="line-height: 20px; white-space: nowrap"
+                            :style="{ color: item.name === '监测点' ? 'red' : 'black' }"
+                        >
+                            {{ item.name }}
+                        </div>
+                    </VueDraggableResizable>
+                    <img
+                        :src="imgUrl"
+                        class="gplot-content"
+                        style="border: 1px solid #dcdfe6; position: unset; user-select: none"
+                        draggable="false"
+                    />
                     <div>注意监测点不要移出圈</div>
                 </div>
             </el-form-item>
-        </el-form>
-        <el-form v-if='editorIndex > -1'>
-            <el-form-item label='监测点位置:'>
-                <div style='display: flex'>
+            <el-form-item label="监测点位置:" v-if="editorIndex > -1">
+                <div style="display: flex">
                     <el-select
-                        v-model='pointList[editorIndex].position'
-                        placeholder='请选择'
-                        style='flex: 1'
-                        @change='positionChange'
+                        v-model="pointList[editorIndex].position"
+                        placeholder="请选择"
+                        style="flex: 1"
+                        @change="positionChange"
                     >
                         <el-option
-                            v-for='item in linePosition'
-                            :key='item.value'
-                            :label='item.label'
-                            :value='item.value'
+                            v-for="item in linePosition"
+                            :key="item.id"
+                            :label="item.name"
+                            :value="item.id"
                         ></el-option>
                     </el-select>
-                    <el-button class='ml20' type='danger' size='mini' @click='deletePoint' icon='el-icon-delete'>
-                        删除
-                    </el-button>
+                    <el-button class="ml20" type="danger" @click="deletePoint" icon="el-icon-Delete">删除</el-button>
                 </div>
             </el-form-item>
-        </el-form>
-        <el-form>
-            <el-form-item label=''>
-                <el-button type='primary' @click='addPoint'>添加监测点</el-button>
+            <el-form-item label=" ">
+                <el-button type="primary" @click="addPoint">添加监测点</el-button>
             </el-form-item>
         </el-form>
         <template #footer>
-            <span class='dialog-footer'>
-                <el-button @click='dialogVisible = false'>取消</el-button>
-                <el-button type='primary' @click='submit'>确认</el-button>
+            <span class="dialog-footer">
+                <el-button @click="dialogVisible = false">取消</el-button>
+                <el-button type="primary" @click="submit">确认</el-button>
             </span>
         </template>
     </el-dialog>
 </template>
-<script lang='ts' setup>
+<script lang="ts" setup>
 import { ref, inject } from 'vue'
 import { reactive } from 'vue'
 import TableStore from '@/utils/tableStore'
 import { useDictData } from '@/stores/dictData'
 import { fullUrl } from '@/utils/common'
+import VueDraggableResizable from 'vue-draggable-resizable'
+import { ElMessage } from 'element-plus'
+import { addLineTemplate } from '@/api/cs-device-boot/lineTemplate'
+
 defineOptions({
-    name: 'govern/manage/gplot/popupEdit',
+    name: 'govern/manage/gplot/popupEdit'
 })
 const tableStore = inject('tableStore') as TableStore
 const editorIndex = ref(-1)
-const pointList = ref([])
+const pointList = ref<any[]>([])
 const topoId = ref()
 const imgUrl = ref('')
 const linePosition = useDictData().getBasicData('Line_Position')
 
-
 const dialogVisible = ref(false)
-const open = (data?: anyObj) => {
-    pointList.value = data.fullUrl
+const open = (data: anyObj) => {
+    pointList.value = data.csLineTopologyTemplateVOList.map((item: any) => {
+        return {
+            name: linePosition.find(item2 => {
+                return item2.id == item.linePostion
+            })?.name,
+            position: item.linePostion,
+            width: 'auto',
+            height: 20,
+            top: item.lng,
+            left: item.lat
+        }
+    })
     topoId.value = data.id
     imgUrl.value = fullUrl(data.filePath)
     dialogVisible.value = true
 }
-const textClick = () => {
+
+const positionChange = (e: string) => {
+    pointList.value[editorIndex.value].name = linePosition.find((item: any) => {
+        return item.id == e
+    })?.name
 }
-const positionChange = () => {
-}
-const resize = (index, newRect) => {
-    if (!newRect) return
-    const dom = pointList.value[index]
-    dom.top = newRect.top
-    dom.left = newRect.left
+const resize = (left: number, top: number) => {
+    const dom = pointList.value[editorIndex.value]
+    dom.left = left
+    dom.top = top
 }
 const addPoint = () => {
+    pointList.value.push({
+        name: '监测点',
+        position: '',
+        width: 'auto',
+        height: 20,
+        top: 100,
+        left: 100
+    })
+    editorIndex.value = pointList.value.length - 1
 }
 const deletePoint = () => {
+    pointList.value.splice(editorIndex.value, 1)
+    editorIndex.value = -1
 }
 const submit = async () => {
-
+    let allSelect = pointList.value.some(item => item.position === '')
+    if (allSelect) {
+        ElMessage.warning('请完善所有监测点位置')
+        return
+    }
+    let arr = pointList.value.map(item => {
+        return {
+            linePostion: item.position,
+            lat: item.left,
+            lng: item.top,
+            topoId: topoId.value
+        }
+    })
+    addLineTemplate(arr).then(res => {
+        ElMessage.success('保存成功')
+        tableStore.index()
+        dialogVisible.value = false
+    })
 }
 
 defineExpose({ open })
 </script>
 
-<style lang='scss'>
+<style lang="scss">
+@import 'vue-draggable-resizable/style.css';
 
 .gplot-content {
+    position: relative;
     width: 375px;
     object-fit: cover;
+    overflow: hidden;
+
+    .gplot-content-item {
+        border-color: transparent;
+        cursor: move;
+
+        &-active {
+            border-color: red;
+        }
+    }
 }
 </style>