2

src/main.js

@@ -12,7 +12,7 @@ import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css'
 import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css'
 //logicflow相关配置
 import LogicFlow from "@logicflow/core";
-import { BpmnElement, Control, MiniMap,Menu } from '@logicflow/extension';
+import { BpmnElement, Control, MiniMap,Menu,Snapshot } from '@logicflow/extension';
 // 左边工具栏以及编辑节点的样式
 // import 'bpmn-js-properties-panel/dist/assets/bpmn-js-properties-panel.css'
 const app = createApp(App)
@@ -24,6 +24,7 @@ app.use(router)
 LogicFlow.use(BpmnElement);
 LogicFlow.use(Control);
 LogicFlow.use(Menu);
+LogicFlow.use(Snapshot);
 // LogicFlow.use(MiniMap);
 // 使用 app 实例来挂载应用
 app.mount('#app')

src/pages/components/draw/DrawDesigns.vue

@@ -7,22 +7,84 @@
 </template>
 
 <script>
-import { ref, onMounted } from 'vue';
-import logicFlows from '@/utils/logicFlow';
+import { ref, onMounted, watch } from 'vue';
 import LogicFlow from "@logicflow/core";
-import { DndPanel, SelectionSelect, Group, Menu, MiniMap, regeister } from "@logicflow/extension";
+import { DndPanel, SelectionSelect, Group, Menu, MiniMap, regeister, Snapshot } from "@logicflow/extension";
 import "@logicflow/core/dist/style/index.css";
 import "@logicflow/extension/lib/style/index.css";
 export default {
-    setup() {
+    props: {
+        lineMenuColor: {
+            type: String,
+            required: true
+        }
+    },
+    setup(props, { emit }) {
         const container = ref();
         const lf = ref();
+        let needColor = props.lineMenuColor
+        let lineColor = ref('#255CE7')
+        let copyColor = ref('')
+        let delId = ref('')
+        let nodeId = ref('')
+        watch(() => props.lineMenuColor, (newVal) => {
+            copyColor.value = newVal
+        })
+        function blue() {
+            lf.value.setTheme({
+                baseEdge: {
+                    stroke: '#255CE7',
+                    strokeWidth: 2,
+                },
+            });//设置连接线为蓝色
+        }
+        function orange() {
+            lf.value.setTheme({
+                baseEdge: {
+                    stroke: 'orange',
+                    strokeWidth: 2,
+                },
+            });//设置连接线为橙色
+        }
+        function delLine() {
+            if (delId.value) {
+                lf.value.deleteEdge(delId.value)//删除选择的连接线
+            }
+            if (nodeId.value) {
+                lf.value.deleteNode(nodeId.value)//删除节点
+            }
+        }
+        function saveLine() {
+            lf.value.getSnapshot()//保存为图片
+        }
+        function cleanMap() {
+            lf.value.clearData()
+        }
+        function textColor() {
+            if (lineColor.value == "#255CE7") {
+                lf.value.setTheme({
+                    baseEdge: {
+                        stroke: "orange",
+                        strokeWidth: 2,
+                    },
+                });
+                lineColor.value = 'orange'
+            } else {
+                lf.value.setTheme({
+                    baseEdge: {
+                        stroke: "#255CE7",
+                        strokeWidth: 2,
+                    },
+                });
+                lineColor.value = '#255CE7'
+            }
+        }
         onMounted(() => {
             lf.value = new LogicFlow({
                 // 通过选项指定了渲染的容器和需要显示网格
                 container: container.value,
-                grid: true,
-                plugins: [DndPanel, SelectionSelect, Group, Menu, MiniMap],
+                grid: false,
+                plugins: [DndPanel, SelectionSelect, Group, Menu, MiniMap, Snapshot],
                 keyboard: {
                     enabled: true
                 },
@@ -95,13 +157,12 @@ export default {
                     icon: "",
                 }
             ]
-            var lineColor = '#255CE7'
             lf.value.setTheme({
                 rect: {
                     fill: "#FFFFFF",
                     stroke: "#255CE7",
                     strokeWidth: 2,
-                },
+                },//放置的元素
                 snapline: {
                     stroke: '#1E90FF', // 对齐线颜色
                     strokeWidth: 1, // 对齐线宽度
@@ -109,11 +170,11 @@ export default {
                 edgeText: {
                     textWidth: 100,
                     overflowMode: "default",
-                    fontSize: 16,
+                    fontSize: 18,
                     background: {
                         fill: "#FFFFFF",
                     },
-                },
+                },//连接线w文字样式
                 outline: {
                     fill: "transparent",
                     stroke: "#949494",
@@ -132,27 +193,31 @@ export default {
                         stroke: "#949494",
                         r: 10,
                     },
-                },
+                },//锚点样式
+                baseEdge: {
+                    stroke: "#255CE7",
+                    strokeWidth: 2,
+                },//连接线颜色
+                nodeText: {
+                    color: "#255CE7",
+                    overflowMode: "autoWrap",
+                    lineHeight: 1.2,
+                    fontSize: 12,
+                },//节点内文字样式
             });
             lf.value.on("edge:click", function (data, e, position) {
-                if (lineColor == "#255CE7") {
-                    lf.value.setTheme({
-                        baseEdge: {
-                            stroke: "orange",
-                            strokeWidth: 2,
-                        },
-                    });
-                    lineColor = 'orange'
-                } else {
-                    lf.value.setTheme({
-                        baseEdge: {
-                            stroke: "#255CE7",
-                            strokeWidth: 2,
-                        },
-                    });
-                    lineColor = '#255CE7'
+                delId.value = data.data.id
+            })
+            lf.value.on('node:click', function (data, e, position) {
+                nodeId.value = data.data.id
+            })
+            lf.value.on('edge:click', function (data, e, position) {//解决点击连接线问题
+                if (copyColor.value == '#255CE7') {
+                    blue()
+                }
+                if (copyColor.value == 'orange') {
+                    orange()
                 }
-
             })
             // lf.value.register(logicFlows)
             lf.value.extension.dndPanel.setPatternItems(patternItems);
@@ -161,6 +226,15 @@ export default {
         return {
             container,
             lf,
+            textColor,
+            lineColor,
+            blue,
+            orange,
+            delLine,
+            saveLine,
+            cleanMap,
+            nodeId,
+            copyColor,
         }
     },
 }

src/pages/system/SystemPage.vue

@@ -15,13 +15,14 @@
 
                 <!-- 公共组件box -->
                 <div class="traBox">
-                    <LineTree v-if="selectIndex == 0" @listBack="listBack"></LineTree>
-                    <ModuleTree v-if="selectIndex == 1"></ModuleTree>
+                    <LineTree v-if="selectIndex == 0 || ourNum == 0" @listBack="listBack"></LineTree>
+                    <ModuleTree v-if="selectIndex == 1 && ourNum == 1"></ModuleTree>
                 </div>
                 <!-- 切换box -->
                 <div class="changeBox">
                     <LitLine v-if="selectIndex == 0" :fuckList="fuckList"></LitLine>
-                    <InsideModule v-if="selectIndex == 1"></InsideModule>
+                    <InsideModule v-if="selectIndex == 1 && ourNum == 1"></InsideModule>
+                    <SetModule v-if="selectIndex == 1 && ourNum == 0" @backNum="backNum"></SetModule>
                 </div>
             </div>
         </div>
@@ -34,6 +35,7 @@ import LitLine from './components/LitLine.vue'
 import LineTree from './components/LineTree.vue'
 import InsideModule from './components/InsideModule.vue';
 import ModuleTree from './components/ModuleTree.vue';
+import SetModule from './components/SetModule.vue'
 import blueBtn from '@/assets/image/btn_blue.png'
 import grayBtn from '@/assets/image/btn_gray.png'
 export default {
@@ -54,10 +56,14 @@ export default {
                 isImg: blueBtn,
                 isSelected: false, // 初始状态未选中
             },
-        ])
+        ])//标签列表
         let fuckList = ref([])//公共list
-        function tagChange(row, num) {
+        let ourNum = ref(0)//决定编辑图像的数字，0为不显示1为显示
+        function tagChange(row, num) {//标签切换
             selectIndex.value = num
+            if(num == 1){
+                ourNum.value = 0
+            }
             // 将当前点击的标签设为选中状态，其他标签设为非选中
             tagList.value.forEach((tag) => {
                 tag.isSelected = tag.id === row.id;
@@ -65,7 +71,9 @@ export default {
         }
         function listBack(data) {
             fuckList.value = data
-            console.log(fuckList.value, 'fuck');
+        }
+        function backNum(data){
+            ourNum.value = data
         }
         onMounted(() => {
 
@@ -76,6 +84,8 @@ export default {
             listBack,
             fuckList,
             selectIndex,
+            ourNum,
+            backNum,
         }
     },
     components: {
@@ -83,6 +93,7 @@ export default {
         LineTree,
         InsideModule,
         ModuleTree,
+        SetModule
     }
 }
 </script>

src/pages/system/components/InsideModule.vue

@@ -2,21 +2,43 @@
     <div>
         <div class="bigBox">
             <div style="text-align: center;">
-                <h2>间隔管理</h2>
+                <h2>装置关联模型管理</h2>
             </div>
-            <div style="display: flex;justify-content: flex-start;align-items: center;height: 89%;">
-                <!-- <div class="moduleBox">
-
-                </div> -->
-                <div style="height: 100%;width: 100%;position: relative;">
+            <div style="display: flex;justify-content: flex-start;align-items: center;height: 100%;">
+                <div style="height: 100%;width: calc(100% - 0px);position: relative;">
                     <div class="setBox">
-
+                        <div style="width: 70%;display: flex;justify-content: flex-start;align-items: center;">
+                            <div style="width: calc(50%);">
+                                <span style="font-size: 20px;color: #7484AB;">连接线:</span>
+                                <span class="sv" @click="svClick">SV</span>
+                                <span class="goose" @click="gooseClick">GOOSE</span>
+                            </div>
+                            <div style="display: flex;width: calc(50%);">
+                                <span style="font-size: 20px;color: #7484AB;margin-left: 20px;">操作:</span>
+                                <div class="cutPoint">
+                                    <img style="width: 22px;height: 22px;display: block;"
+                                        src="../../../assets/icon/iorn_pen.png" alt="">
+                                    <span style="display: block;">控点</span>
+                                </div>
+                                <div class="deletePoint" @click="delClick">
+                                    <img style="width: 22px;height: 22px;display: block;"
+                                        src="../../../assets/icon/cut_knief.png" alt="">
+                                    <span style="display: block;">删除</span>
+                                </div>
+                            </div>
+                        </div>
+                        <div style="width: calc(30%);">
+                            <div style="width: calc(100%);">
+                                <el-button type="primary" @click="cleanAll" plain>取消</el-button>
+                                <el-button type="primary" @click="saveMap">保存</el-button>
+                            </div>
+                        </div>
                     </div>
                     <div class="tableBox">
                         <!-- <FeelLoad></FeelLoad> -->
                         <!-- <FatherMap></FatherMap> -->
                         <!-- 建议使用这个 -->
-                        <DrawDesigns></DrawDesigns>
+                        <DrawDesigns ref="designsRef" :lineMenuColor="lineMenuColor"></DrawDesigns>
                     </div>
                 </div>
             </div>
@@ -33,15 +55,41 @@ import DrawDesigns from '@/pages/components/draw/DrawDesigns.vue';//原生js
 export default {
     setup() {
         let moduleList = ref([])
+        let lineMenuColor = ref('#255CE7')
+        let designsRef = ref(null)
         function searchModule() {
 
         }
+        function svClick() {
+            lineMenuColor.value = '#255CE7'
+            designsRef.value.blue()//切换为sv
+        }
+        function gooseClick() {
+            lineMenuColor.value = 'orange'
+            designsRef.value.orange()//切换为goose
+        }
+        function delClick() {
+            designsRef.value.delLine()//删除连接线
+        }
+        function saveMap() {
+            designsRef.value.saveLine()//保存为图片
+        }
+        function cleanAll() {
+            designsRef.value.cleanMap()//清除画布
+        }
         onMounted(() => {
             searchModule()
         })
         return {
             moduleList,
             searchModule,
+            lineMenuColor,
+            svClick,
+            gooseClick,
+            designsRef,
+            delClick,
+            saveMap,
+            cleanAll,
         }
     },
     components: {
@@ -66,28 +114,79 @@ export default {
 
 .setBox {
     width: calc(100% - 11%);
-    height: calc(100% - 85%);
-    border: 1px solid red;
+    height: calc(100% - 90%);
+    border: 1px solid #A3ADE0;
     position: absolute;
     top: 0px;
-    left: calc(100% - 1260px);
+    left: calc(100% - 89.5%);
     z-index: 1;
-    background-color: white;
+    background-color: #F7F8FB;
+    line-height: calc(600%);
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
     /* margin-top: 1px; */
 }
-.moduleBox{
+
+.moduleBox {
     width: 10%;
     height: 100%;
     border: 1px solid green;
 }
-:deep(.lf-dndpanel){
-    height: calc(100%);
+
+.sv {
+    display: inline-block;
+    width: calc(100% - 82%);
+    height: 24px;
+    text-align: center;
+    line-height: 24px;
+    border-top: 2px solid #255CE7;
+    font-size: 1.8rem;
+    margin-right: 5px;
+    cursor: pointer;
+}
+
+.goose {
+    display: inline-block;
+    width: 75px;
+    height: 24px;
+    text-align: center;
+    line-height: 24px;
+    border-top: 2px solid #FF7C03;
+    font-size: 20px;
+    cursor: pointer;
+}
+
+.cutPoint {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    font-size: 20px;
+    text-align: center;
+    margin-right: 10px;
+    cursor: pointer;
+}
+
+.deletePoint {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    font-size: 20px;
+    text-align: center;
+    cursor: pointer;
+}
+
+:deep(.lf-dndpanel) {
+    height: auto;
     overflow-y: auto;
+    background-color: #F7F8FB;
 }
-:deep(.lf-dnd-shape){
+
+:deep(.lf-dnd-shape) {
     display: none;
 }
-:deep(.lf-dnd-text){
+
+:deep(.lf-dnd-text) {
     width: calc(100% - 8px);
     height: 42px;
     border: 1px solid #255CE7;

src/pages/system/components/LineTree.vue

@@ -29,7 +29,7 @@ export default {
                 console.log(res, '987res');
             })
         }
-        function searchFlashLel() {
+        function searchFlashLel() {//拿到电压等级
             systemRow.getChildren({ code: "voltage_level" }).then(res => {
                 lineData.value = res.data
             })

src/pages/system/components/SetModule.vue

@@ -0,0 +1,72 @@
+<template>
+    <div>
+        <div class="bigBox">
+            <div style="text-align: center;">
+                <h2>间隔管理</h2>
+            </div>
+            <div class="btnBox">
+                <el-button type="primary" plain><el-icon>
+                        <Plus />
+                    </el-icon>添加间隔</el-button>
+            </div>
+            <div class='tableBox'>
+                <el-table :data="tableData" style="width: 100%" :stripe="true" @selection-change="tableChange">
+                    <el-table-column type="selection" width="55" />
+                    <el-table-column fixed prop="name" label="间隔名称" width="auto" />
+                    <el-table-column prop="flash" label="电压等级" width="auto" />
+                    <el-table-column prop="type" label="间隔类型" width="auto" />
+                    <el-table-column fixed="right" label="操作" width="180">
+                        <template #default>
+                            <el-button link type="primary" size="small" @click=""><el-icon>
+                                    <EditPen />
+                                </el-icon>修改</el-button>
+                            <el-button link type="primary" size="small" @click="goMap"><el-icon>
+                                    <Coin />
+                                </el-icon>编辑模型</el-button>
+                        </template>
+                    </el-table-column>
+                </el-table>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { ref, onMounted, toRefs } from 'vue';
+import { ElMessage } from 'element-plus';
+export default {
+    setup(props, { emit }) {
+        let tableData = ref([
+            {
+                name: "测试间隔",
+                flash: "220kv",
+                type: "string",
+            }
+        ])
+        let kisNum = ref(0)
+        let { goMap } = toRefs(props)
+        function tableChange(e) {
+            console.log(e, 'table');
+        }
+        function cacl() {
+            kisNum.value = 1
+            if(kisNum.value == 0){
+                ElMessage({
+                    message:"暂时无法进行模型编辑",
+                    type:"error",
+                    duration:1500
+                })
+            }
+            emit("backNum", kisNum.value)
+        }
+        return {
+            tableData,
+            tableChange,
+            kisNum,
+            goMap:cacl,
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped></style>