拓扑图配置

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

@@ -54,7 +54,7 @@ const tableStore = new TableStore({
                     icon: 'el-icon-EditPen',
                     render: 'tipButton',
                     click: row => {
-                        popupRef.value.open('编辑菜单', row)
+                        popupRef.value.open( row)
                     }
                 },
                 {

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

@@ -1,36 +1,60 @@
 <template>
-    <el-dialog class='cn-operate-dialog' v-model='dialogVisible' :title='title'>
+    <el-dialog class='cn-operate-dialog' v-model='dialogVisible' title='编辑拓扑图信息'>
-        <el-scrollbar>
+        <el-form>
-            <el-form :inline='false' :model='form' label-width='120px'>
+            <el-form-item label='拓扑图:' style='height: auto !important;'>
-                <el-form-item label='上级菜单'>
+                <div class='gplot-content'>
-                    <el-cascader
+                    <img :src='imgUrl' class='gplot-content' style='border: 1px solid #dcdfe6' />
-                        v-model='form.pid'
+<!--                    <VueDraggableResizable-->
-                        :options='tableStore.table.data'
+<!--                        :isActive='editorIndex == index'-->
-                        :props='cascaderProps'
+<!--                        :h='item.height'-->
-                        style='width: 100%'
+<!--                        :w='item.width'-->
-                    />
+<!--                        :x='item.left'-->
-                </el-form-item>
+<!--                        :y='item.top'-->
-                <el-form-item label='菜单名称'>
+<!--                        @dragging='resize(index, $event)'-->
-                    <el-input v-model='form.name' placeholder='请输入菜单名称' />
+<!--                        v-for='(item, index) in pointList'-->
-                </el-form-item>
+<!--                        :key='index'-->
-                <el-form-item label='图标'>
+<!--                        :isResizable='false'-->
-                    <IconSelector v-model='form.icon' placeholder='请选择图标' />
+<!--                    >-->
-                </el-form-item>
+<!--                        <div-->
-                <el-form-item label='菜单路由'>
+<!--                            class='text'-->
-                    <el-input v-model='form.path' placeholder='请输入菜单名称' />
+<!--                            style='line-height: 20px; white-space: nowrap'-->
-                </el-form-item>
+<!--                            :style="{ color: item.name === '监测点' ? 'red' : 'black' }"-->
-                <el-form-item label='组件路径'>
+<!--                            @click.stop='textClick(item, index)'-->
-                    <el-input v-model='form.routeName' placeholder='请输入组件路径，如/src/views/dashboard/index.vue' />
+<!--                        >-->
-                </el-form-item>
+<!--                            {{ item.name }}-->
-                <el-form-item label='排序'>
+<!--                        </div>-->
-                    <el-input-number v-model='form.sort' :min='0' />
+<!--                    </VueDraggableResizable>-->
-                </el-form-item>
+                    <div>注意监测点不要移出圈</div>
-                <el-form-item label='菜单描述'>
+                </div>
-                    <el-input v-model='form.remark' :rows='2' type='textarea' placeholder='请输入描述' />
+            </el-form-item>
+        </el-form>
+        <el-form v-if='editorIndex > -1'>
+            <el-form-item label='监测点位置:'>
+                <div style='display: flex'>
+                    <el-select
+                        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'
+                        ></el-option>
+                    </el-select>
+                    <el-button class='ml20' type='danger' size='mini' @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>
         </el-form>
-        </el-scrollbar>
-
         <template #footer>
             <span class='dialog-footer'>
                 <el-button @click='dialogVisible = false'>取消</el-button>
@@ -43,61 +67,51 @@
 import { ref, inject } from 'vue'
 import { reactive } from 'vue'
 import TableStore from '@/utils/tableStore'
-import IconSelector from '@/components/baInput/components/iconSelector.vue'
+import { useDictData } from '@/stores/dictData'
-import { updateMenu, addMenu } from '@/api/systerm'
+import { fullUrl } from '@/utils/common'
-
+defineOptions({
-const tableStore = inject('tableStore') as TableStore
+    name: 'govern/manage/gplot/popupEdit',
-const cascaderProps = {
-    label: 'title',
-    value: 'id'
-}
-const form: any = reactive({
-    code: '',
-    icon: '',
-    id: '',
-    name: '',
-    path: '',
-    pid: '0',
-    remark: '',
-    routeName: '',
-    sort: 0,
-    type: 0
 })
+const tableStore = inject('tableStore') as TableStore
+const editorIndex = ref(-1)
+const pointList = ref([])
+const topoId = ref()
+const imgUrl = ref('')
+const linePosition = useDictData().getBasicData('Line_Position')
+
 
 const dialogVisible = ref(false)
-const title = ref('新增菜单')
+const open = (data?: anyObj) => {
-const open = (text: string, data?: anyObj) => {
+    pointList.value = data.fullUrl
-    console.log(data)
+    topoId.value = data.id
-    title.value = text
+    imgUrl.value = fullUrl(data.filePath)
-    if (data) {
-        for (let key in form) {
-            form[key] = data[key]
-        }
-        form.path = data.routePath
-        form.name = data.title
-    } else {
-        // 重置表单
-        for (let key in form) {
-            form[key] = ''
-        }
-        form.pid = '0'
-        form.sort = 0
-        form.type = 0
-    }
     dialogVisible.value = true
 }
+const textClick = () => {
+}
+const positionChange = () => {
+}
+const resize = (index, newRect) => {
+    if (!newRect) return
+    const dom = pointList.value[index]
+    dom.top = newRect.top
+    dom.left = newRect.left
+}
+const addPoint = () => {
+}
+const deletePoint = () => {
+}
 const submit = async () => {
-    if (form.id) {
+
-        await updateMenu(form)
-    } else {
-        form.code = 'menu'
-        let obj = JSON.parse(JSON.stringify(form))
-        delete obj.id
-        await addMenu(obj)
-    }
-    tableStore.index()
-    dialogVisible.value = false
 }
 
 defineExpose({ open })
 </script>
+
+<style lang='scss'>
+
+.gplot-content {
+    width: 375px;
+    object-fit: cover;
+}
+</style>