1.安全模块展示修改

src/views/energyOperationSupport/components/securitys/pic2.vue

@@ -15,29 +15,41 @@
             <el-col :span="2" class="mt10">
               <el-checkbox v-model="searchParam.radioItemStatus" @change="isShowItemStatus">显示状态</el-checkbox>
             </el-col>
+
+            <div class="crumb-nav2">
+              <template v-for="(nav, index) in crumbNavs">
+                {{ index > 0 ? '>' : '' }}
+                <!-- <el-button type="primary" :key="nav.id" @click="changeNode(nav)">{{ nav.label }}</el-button>-->
+                <span :key="nav.id" class="nav-text" @click="changeNode(nav)">{{ nav.label }}</span>
+              </template>
+            </div>
           </el-row>
         </div>
         <div class="canvaBox">
-            <div class="minimap"></div>
-            <!-- 树图相关 -->
-            <div id="treeDiv" class="whr100"></div>
-            <!-- 重命名节点Dialog -->
-            <el-dialog title="提示" :visible.sync="renameDialogVisible" width="30%" :before-close="editDialogClose">
-              <el-input v-model="inputLabel.name" placeholder="请输入"></el-input>
-              <span slot="footer" class="dialog-footer">
-                <el-button @click="renameDialogVisible = false">取 消</el-button>
-                <el-button type="primary" @click="renameSubmit">确 定</el-button>
-              </span>
-            </el-dialog>
-            <!-- 删除dialog -->
-            <el-dialog title="提示" :visible.sync="delDialogVisible" width="20%" :before-close="delDialogClose">
-              <div class="title">是否确认删除？</div>
-              <span slot="footer" class="dialog-footer">
-                <el-button @click="delDialogVisible = false">取 消</el-button>
-                <el-button type="primary" @click="delSubmit">确 定</el-button>
-              </span>
-            </el-dialog>
+            
+          <div class="minimap">
+          </div>
+          <!-- 树图相关 -->
+          <div id="treeDiv" class="whr100">
+            <div class="text">安泰安全管理模块展示</div>
           </div>
+          <!-- 重命名节点Dialog -->
+          <el-dialog title="提示" :visible.sync="renameDialogVisible" width="30%" :before-close="editDialogClose">
+            <el-input v-model="inputLabel.name" placeholder="请输入"></el-input>
+            <span slot="footer" class="dialog-footer">
+              <el-button @click="renameDialogVisible = false">取 消</el-button>
+              <el-button type="primary" @click="renameSubmit">确 定</el-button>
+            </span>
+          </el-dialog>
+          <!-- 删除dialog -->
+          <el-dialog title="提示" :visible.sync="delDialogVisible" width="20%" :before-close="delDialogClose">
+            <div class="title">是否确认删除？</div>
+            <span slot="footer" class="dialog-footer">
+              <el-button @click="delDialogVisible = false">取 消</el-button>
+              <el-button type="primary" @click="delSubmit">确 定</el-button>
+            </span>
+          </el-dialog>
+        </div>
       </el-col>
       <el-drawer title="节点信息" :visible.sync="dataInfoDrawerVisible" class="dataInfo-drawer-dialog" @close="dataInfoClose"
         size="50%">
@@ -115,8 +127,11 @@ export default {
 
   data() {
     return {
+      graph: null,
+      thereDataId : '',
+      crumbNavs: [],
       canvasWidth: 0, // 画布宽度
-      canvasHeight: 0 ,// 画布高度
+      canvasHeight: 0,// 画布高度
       singleTableHeight: '720px',
       previewUrl: '',
       activeMenu: '',
@@ -134,7 +149,7 @@ export default {
       dialogVisible2: false,
       loading: false,
       loading2: false,
-      uploadloading : false,
+      uploadloading: false,
       tableLoading: false,
       chart: {
         height: '1024px',
@@ -229,6 +244,7 @@ export default {
         name: "",
       },
       treeData: [],
+      treeData1: [],
       listData: [],
       searchParam: {
         searchLabel: "",
@@ -246,11 +262,18 @@ export default {
   mounted() {
   },
   methods: {
+    changeNode(node) {
+      console.log('casdasd', node)
+      if (node.tlevel === 1) {
+
+      }
+      graph.changeData(JSON.parse(JSON.stringify(node)));
+      graph.fitView([140, 40, 20, 40]);
+    },
     treeData3() {
       //获取tree数据
       // this.treeData = require('../securitys/treeData2.json');
       let that = this;
-      console.log('treeData:', that.treeData)
       // 根据tree获取平级数组../
       const treeData = JSON.parse(JSON.stringify(this.treeData));
       this.listData = this.treeToList(treeData);
@@ -264,12 +287,10 @@ export default {
           levle: item.tlevel
         });
       });
-      let tNow = moment();
       this.$nextTick(() => {
         this.treeInit();
       });
     },
-
     treeInit() {
       const that = this;
       that.styleCss(); // 样式函数
@@ -554,10 +575,17 @@ export default {
           }
           that.preview(arg);
         }
-
         that.findNodesByModels([nodeModel]);
-      });
+        that.crumbNavs = [];
+        that.getParentNodes(that.treeData, nodeModel, nodeModel.id);
+    
+        if (nodeModel.tlevel >= 1) {
+          graph.changeData(JSON.parse(JSON.stringify(nodeModel))),
+            graph.fitView([230, 240, 390, 390]);
 
+        }
+
+      });
       // 鼠标点击画布，显示所有节点和边 
       graph.on('canvas:click', function (event) {
         const nodes = graph.getNodes();
@@ -593,6 +621,44 @@ export default {
         // edges.forEach((edge) => graph.setItemState(edge, "running", false));
       });
     },
+    getParentNodes(data, node) {
+      let no1 = 0;
+      //如果点击的是第二层，只显示导航到第一层
+      if (node.tlevel === 2) {
+        this.crumbNavs.push(data);
+      }
+      //如果点击的是第三层，只显示导航到第二层和第一层
+
+      if (node.tlevel === 3) {
+        no1 = 1;
+        const $id = node.parentid;
+        const $node = data.children.find(item => item.id === $id);
+        if ($node) {
+          this.crumbNavs.push($node);
+          this.thereData = $node.id;
+        }
+      }
+      //如果点击的是第四层，只显示导航到第二层和第一层还有第三层
+      if (node.tlevel === 4) {
+        no1 = 1;
+        console.log('点击第四层', node)
+        const $id = node.parentid;
+        console.log('点击第四层$id', $id)
+        console.log('thereData', this.thereData)
+        const $node = data.children.find(item => item.id === this.thereData);
+        console.log('$node', $node)
+        const $node2 = $node.children.find(item => item.id === $id)
+        console.log('$$node2', $node2)
+        if ($node2) {
+          this.crumbNavs.push($node2);
+          this.crumbNavs.push($node);
+
+        }
+      }
+      if (no1 === 1) {
+        this.crumbNavs.push(data);//第一层
+      }
+    },
     // 获取节点结构数据
     getGxNameData() {
       let that = this
@@ -601,22 +667,20 @@ export default {
         .then(res => {
           if (res.code === '0') {
             that.treeData = res.data[0];
-            console.log('datajson', that.treeData[0])
             that.treeData3();
           } else {
             that.$message.error(res.message);
           }
         })
     },
- // 获取节点结构数据
- getGxNameData3() {
+    // 获取节点结构数据
+    getGxNameData3() {
       let that = this
       let url = 'pass/ems/v1/emssecuernodes/findAll';
       that.axios.post(url)
         .then(res => {
           if (res.code === '0') {
             that.treeData = res.data[0];
-            console.log('datajson', that.treeData[0])
           } else {
             that.$message.error(res.message);
           }
@@ -827,7 +891,7 @@ export default {
       };
       const updateModel2 = {
         name: this.inputLabel.name,
-        content : this.inputLabel.content
+        content: this.inputLabel.content
       };
       let id = model.id;
       this.updateNameData(id, updateModel2);
@@ -944,8 +1008,8 @@ export default {
           }
         })
     },
-      // 更改文件信息
-      updateNameData2(arr1, arr2) {
+    // 更改文件信息
+    updateNameData2(arr1, arr2) {
       let that = this
       let url = `pass/ems/v1/emssecuernodes/${arr1}`;
       that.axios.put(url, arr2)
@@ -985,10 +1049,10 @@ export default {
             type: 'success'
           });
           let arr2 = {
-            itemstatus : 200, 
+            itemstatus: 200,
             itemtype: 200
           }
-          that.updateNameData2(that.itemNode._cfg.id,arr2);
+          that.updateNameData2(that.itemNode._cfg.id, arr2);
           that.uploadloading = false;
           that.$refs.upload1.clearFiles();
           that.getGxNameData();
@@ -1157,7 +1221,7 @@ export default {
     downloadFile(data) {
       let that = this;
       let SubmitData = {
-        fileName: data.fileName,    
+        fileName: data.fileName,
         fileUrl: data.fileUrl
       };
       // 不带token访问方式，留底后端修改shiroconfig.java,application.properties
@@ -1274,6 +1338,7 @@ export default {
   bottom: 0;
   position: absolute;
 }
+
 .minimap {
   position: absolute;
   top: 0;
@@ -1439,6 +1504,39 @@ export default {
   overflow-x: hidden;
   overflow-y: auto;
 }
+
+.crumb-nav {
+  position: absolute;
+  top: 20px;
+  left: 40px;
+  background: #73bf8f;
+  border-radius: 4px;
+  color: #fff;
+  margin-left: 500px;
+}
+
+.nav-text {
+  display: inline-block;
+  height: 36px;
+  line-height: 36px;
+  margin: 0 10px;
+  cursor: pointer;
+}
+
+.crumb-nav2 {
+  height: 36px;
+  line-height: 36px;
+  margin: 0 10px;
+  cursor: pointer;
+  margin-left: 800px;
+}
+.text {
+  margin-left: 550px;
+  font-size: 50px;
+  position: absolute;
+
+  top: 60px;
+}
 </style>