Merge branch 'develop' of http://39.106.8.246:3003/web/persagy_topo_editer into develop

src/api/editer.ts

@@ -38,7 +38,11 @@ export function queryCategory(postParams: any): any {
 export function queryLegend(postParams: any): any {
     return httputils.postJson(`/meiku/legend/query`, postParams)
 }
-// 查询设备信息点
+// 查询设备的所有信息点数组
+export function queryDict(postParams: any): any {
+    return httputils.postJson(`/datacenter/dict/query`, postParams)
+}
+// 查询设备某个信息点详情的值 --- （用于点击图中信息点调用）
 export function queryEquipMsg(postParams: any): any {
     return httputils.postJson(`/datacenter/object/equip/query`, postParams)
 }

src/components/editClass/big-edit/items/SBaseEquipment.ts

@@ -125,31 +125,32 @@ export class SBaseEquipment extends SBaseIconTextEdit {
     }// Function initData()
 
     /**
-     * 添加信息点
+     * 设置信息点
      *
-     * @params	添加的信息点
+     * @params	obj 设置的信息点
      */
-    addInfoMsg(val: any) {
-        this._infoPointList.push(val);
-        this.addTextItem(val)
-    }
-
-    /**
-     * 删除信息点
-     *
-     * @params	删除索引
-     */
-    removeInfoMsg(index: number) {
-        this._infoPointList.splice(index, 1);
-        // this.removeTextItem()
-    }
+    setMsgPoint(val: any) {
+        // 根据是否勾选来判断是够增加或删除
+        if (val.checked) {
+            this._infoPointList.push(val);
+        } else {
+            let deleteItemIndex: number = -1;
+            this._infoPointList.forEach((item, index) => {
+                if (val.id == item.id) {
+                    deleteItemIndex = index;
+                }
+            });
+            this._infoPointList.splice(deleteItemIndex, 1)
+        }
+        // this.addTextItem(val)
+    } //Function setMsgPoint()
 
     /**
      * 增加 textItem
      *
      * @params obj	textItem文本信息
      */
-    addTextItem(val:any) {
+    addTextItem(val: any) {
         // do something
     }
 
@@ -158,7 +159,7 @@ export class SBaseEquipment extends SBaseIconTextEdit {
      *
      * @params obj	textItem文本信息
      */
-    removeTextItem(val:any) {
+    removeTextItem(val: any) {
         // do something
     }
     /**

src/components/editClass/persagy-edit/PTopoScene.ts

@@ -1,4 +1,4 @@
-import { SBaseEditScene, SBasePipe, } from "./../big-edit";
+import { SBaseEditScene, SBasePipe,SBaseEquipment } from "./../big-edit";
 import { SGraphEdit, } from "./../edit";
 import { SMouseEvent } from "@persagy-web/base/lib";
 import { SGraphSelectContainer, SLineStyle } from "@persagy-web/graph";
@@ -24,7 +24,6 @@ export class PTopoScene extends SBaseEditScene {
      */
     listChange(list: any): void {
         const itemList: any = []
-        console.log('list', list)
         list.itemList.forEach((item: any) => {
             if ((item instanceof SGraphEdit) && !(item instanceof SGraphSelectContainer)) {
                 itemList.push(item)
@@ -156,6 +155,17 @@ export class PTopoScene extends SBaseEditScene {
     } // Function updateStyle()
 
     /**
+     * 修改指定设备得信息点
+     * @param obj Object 信息点
+     */
+    changeEquipMsgPoint(obj:any):void{
+       const List = this.selectContainer.itemList.length ? this.selectContainer.itemList[0]:null;
+       if(List && List instanceof SBaseEquipment){
+           List.setMsgPoint(obj);
+       }
+    }
+
+    /**
      * item 创建完成后回调
      *
      * @param   event   鼠标事件参数

src/components/editview/baseTopoEditer.vue

@@ -25,7 +25,7 @@ import {
 // import { SFloorParser } from "@persagy-web/big/lib";
 import topoTooltip from "./topoTooltip.vue";
 import { mapState, mapMutations } from "vuex";
-import base64ToFile from "@/utils/base64ToFile"
+import base64ToFile from "@/utils/base64ToFile";
 import { v1 as uuidv1 } from "uuid";
 import bus from "@/bus/bus";
 import {
@@ -35,7 +35,7 @@ import {
   getImageGroup,
   readPubGroup,
 } from "@/api/editer";
-import { publishGraph } from "@/api/home"
+import { publishGraph } from "@/api/home";
 export default {
   components: { topoTooltip },
   data() {
@@ -118,71 +118,76 @@ export default {
     //初始化bus绑定事件
     initBusEvent() {
       // 改变样式
-      bus.$off('updateStyle');
+      bus.$off("updateStyle");
       bus.$on("updateStyle", (type, val) => {
         this.scene.updateStyle(type, val);
       });
       // 撤销
-      bus.$off('topoUndo');
+      bus.$off("topoUndo");
       bus.$on("topoUndo", (val) => {
         this.scene.undo();
       });
       // 重做
-      bus.$off('topoRedo');
+      bus.$off("topoRedo");
       bus.$on("topoRedo", (val) => {
         this.scene.redo();
       });
       // 删除
-      bus.$off('deleteItem');
+      bus.$off("deleteItem");
       bus.$on("deleteItem", (val) => {
         this.scene.deleteItem();
       });
       // 复制
-      bus.$off('copy');
+      bus.$off("copy");
       bus.$on("copy", (val) => {
         this.scene.copy();
       });
       // 粘贴
-      bus.$off('paste');
+      bus.$off("paste");
       bus.$on("paste", (val) => {
         this.scene.paste();
       });
       // 保存
-      bus.$off('saveTopo');
+      bus.$off("saveTopo");
       bus.$on("saveTopo", (val) => {
-        this.saveTopoDraft()
+        this.saveTopoDraft();
       });
       // 设置实例置顶置底
-      bus.$off('setOrder');
+      bus.$off("setOrder");
       bus.$on("setOrder", (val) => {
         this.scene.setOrder(val);
       });
       // 设置实例status状态
-      bus.$off('setItemStatus');
+      bus.$off("setItemStatus");
       bus.$on("setItemStatus", (val) => {
         this.scene.setItemStatus();
       });
       // 下载图片
-      bus.$off('saveTopoImg');
+      bus.$off("saveTopoImg");
       bus.$on("saveTopoImg", () => {
         // 隐藏选择器
         this.scene.selectContainer.clear();
         setTimeout(() => {
           this.view.saveImage(`${this.topoContent.name}.png`, "png");
-        },80)
+        }, 80);
       });
       // 发布图片
-      bus.$off('issueTopo');
+      bus.$off("issueTopo");
       bus.$on("issueTopo", () => {
         this.saveTopoDraft().then(() => {
-          this.issueDraft()
-        })
+          this.issueDraft();
+        });
       });
       // 手动添加设备实例
-      bus.$off('addEquipment');
+      bus.$off("addEquipment");
       bus.$on("addEquipment", (val) => {
         this.addEquipmentList(val);
       });
+      // 更改设备信息点
+      bus.$off('changeEquipMsgPoint');
+      bus.$on("changeEquipMsgPoint", (val) => {
+          this.scene.changeEquipMsgPoint(val)
+      });
     },
     // 读取拓扑图
     readtopoMsg() {
@@ -203,7 +208,7 @@ export default {
     },
     // 读图成功回调
     getDataSuc(res) {
-      if(res.result == "failure") return;
+      if (res.result == "failure") return;
       this.SETCATEGROY(res.content.categoryId);
       this.topoContent = res.content;
       const parse = new PTopoParser();
@@ -223,11 +228,13 @@ export default {
       this.view.fitSceneToView();
     },
     // 保存草稿
-    saveTopoDraft(){
+    saveTopoDraft() {
       const uuid = uuidv1();
-      return Promise.all([this.generateSnap(uuid), this.saveDraft(uuid)]).then(vals => {
-        this.$message.success(`保存成功${vals[1].version}`);
-      })
+      return Promise.all([this.generateSnap(uuid), this.saveDraft(uuid)]).then(
+        (vals) => {
+          this.$message.success(`保存成功${vals[1].version}`);
+        }
+      );
     },
     // 生成快照
     generateSnap(uuid) {
@@ -235,7 +242,7 @@ export default {
       this.scene.selectContainer.clear();
       setTimeout(() => {
         // base64数据
-        const data = this.view.imageUrl('png');
+        const data = this.view.imageUrl("png");
         // 根据base64生成file
         const file = base64ToFile(data);
         const reader = new FileReader();
@@ -245,25 +252,28 @@ export default {
           reader.onloadend = function () {
             // 这个事件在读取结束后，无论成功或者失败都会触发
             if (reader.error) {
-              console.log('reader error', reader.error);
-              reject(reader.error)
+              console.log("reader error", reader.error);
+              reject(reader.error);
             } else {
               // 构造 XMLHttpRequest 对象，发送文件 Binary 数据
               const xhr = new XMLHttpRequest();
-              xhr.open("POST", `/image-service/common/image_upload?systemId=dataPlatform&secret=9e0891a7a8c8e885&overwrite=true&key=${uuid}.${imgType}`);
+              xhr.open(
+                "POST",
+                `/image-service/common/image_upload?systemId=dataPlatform&secret=9e0891a7a8c8e885&overwrite=true&key=${uuid}.${imgType}`
+              );
               xhr.send(reader.result);
               xhr.onreadystatechange = function () {
                 if (xhr.readyState == 4) {
                   if (xhr.status == 200) {
-                    resolve(xhr)
+                    resolve(xhr);
                   }
                 }
               };
             }
           };
           reader.readAsArrayBuffer(file);
-        })
-      },80)
+        });
+      }, 80);
     },
     // 保存草稿
     saveDraft(uuid) {
@@ -313,25 +323,25 @@ export default {
               },
             });
           }
-          resolve(res.entityList[0])
+          resolve(res.entityList[0]);
         });
-      })
+      });
     },
     // 发布草稿
-    issueDraft(){
+    issueDraft() {
       const pa = {
         graphId: this.graphId,
-        id: this.id
-      }
-      publishGraph(pa).then(res => {
-        this.$message.success('发布成功');
-      })
+        id: this.id,
+      };
+      publishGraph(pa).then((res) => {
+        this.$message.success("发布成功");
+      });
     },
     // 手动添加设备
     addEquipmentList(list) {
       const parse = new PTopoParser();
       list.forEach((item, i) => {
-       const x = (i + 1) * 100;
+        const x = (i + 1) * 100;
         let data = {
           /** 名称 */
           name: "基础设备",
@@ -345,6 +355,7 @@ export default {
           /** 由应用自己定义 */
           properties: {
             type: "BaseEquipment",
+            classCode: item.classCode, // 设备类型
           },
           style: {
             default: {

src/components/editview/leftToolBar/equipmentList.vue

@@ -239,7 +239,6 @@ export default {
     const boxPorfess = document.getElementById("boxPorfess");
     if (dombox) {
       boxPorfess.style.height = dombox.offsetHeight - 90 + "px";
-      console.log("boxPorfess", boxPorfess.style);
     }
   },
 };

src/components/editview/rightPropertyBar/BaseEquipment.vue

@@ -71,7 +71,11 @@
             @pressEnter="pressEnter"
             @clear="pressEnter"
           />
-          <div class="msgPoint-list" v-show="!pressMsgData.length">
+          <div
+            class="msgPoint-list"
+            ref="localDom"
+            v-show="!pressMsgData.length"
+          >
             <div class="type-list" v-for="(item, key) in msgData" :key="key">
               <div class="type-title" @click="clips(item)">
                 <i
@@ -80,7 +84,7 @@
                     'el-icon-caret-bottom',
                   ]"
                 ></i>
-                <span>{{ item.msgType }}</span>
+                <span>{{ item.tagName }}</span>
               </div>
               <el-collapse-transition>
                 <ul class="list" v-show="item.showChildren">
@@ -89,7 +93,7 @@
                       :checked="a.checked ? 'checked' : 'uncheck'"
                       @change="changeCheck(a)"
                     />
-                    <p>{{ a.msgName }}</p>
+                    <p>{{ a.name }}</p>
                   </li>
                 </ul>
               </el-collapse-transition>
@@ -101,7 +105,7 @@
                 :checked="a.checked ? 'checked' : 'uncheck'"
                 @change="changeCheck(a)"
               />
-              <p>{{ a.msgName }}</p>
+              <p>{{ a.name }}</p>
             </li>
           </ul>
         </div>
@@ -110,20 +114,19 @@
   </div>
 </template>
 <script>
-import { msgData } from "./msgData.js";
-import { queryEquipMsg } from "@/api/editer";
+import { queryEquipMsg, queryDict } from "@/api/editer";
+import bus from "@/bus/bus";
 export default {
-  props: ["InfoPointList", "EquipId"],
+  props: ["InfoPointList", "EquipData", "equipHeight"],
   data() {
     return {
       activeName: "first",
       width: "",
       height: "",
-      checked1: "checked",
-      isShow: true,
-      msgData: [],
+      msgData: [], //存储二级树
       pressMsgData: [], // 搜索后得信息点数组
       getPressMsg: "", //输入信息
+      local: "", //局部加载
     };
   },
   methods: {
@@ -132,7 +135,13 @@ export default {
       item.showChildren = !item.showChildren;
     },
     handleClick(tab, event) {
-      console.log(tab, event);
+      // 设置高度
+      if (tab.paneName == "second") {
+        const box = document.getElementsByClassName("msgPoint-list")[0];
+        const box2 = document.getElementsByClassName("msgPoint-list-press")[0];
+        box.style.height = this.equipHeight;
+        box2.style.height = this.equipHeight;
+      }
     },
     changeWidth() {},
     changeHeight() {},
@@ -140,6 +149,7 @@ export default {
     // 切换选中选项
     changeCheck(item) {
       item.checked = !item.checked;
+      bus.$emit("changeEquipMsgPoint", item);
     },
     // 搜索回车操作
     pressEnter() {
@@ -151,7 +161,7 @@ export default {
       // 对信息点相同得提取出来
       this.msgData.forEach((item) => {
         item.children.forEach((a) => {
-          if (a.msgName.includes(this.getPressMsg)) {
+          if (a.name.includes(this.getPressMsg)) {
             list.push(a);
           }
         });
@@ -160,66 +170,112 @@ export default {
     },
   },
   watch: {
-    EquipId(val) {
-      const data = {
-        Filters: `id = '${val}'`,
-      };
-      queryEquipMsg(data).then((res) => {
-        console.log("获取到相应的信息点数据", res);
+    EquipData(val) {
+      this.msgData = []; //存储二级树
+      this.pressMsgData = []; // 搜索后得信息点数组
+      this.getPressMsg = ""; //输入信息
+      // 启动局部 loading
+
+      this.local = this.$loading({
+        el: this.$refs.localDom,
+        type: "local",
+        size: "min",
       });
 
-      // 模拟接口
-      setTimeout(() => {
-        let arr = [];
-        // 勾选设备中选中的对象
-        if (this.InfoPointList && this.InfoPointList.length) {
-          msgData.map((item) => {
-            this.InfoPointList.forEach((a) => {
-              if (a.id == item.id) {
-                item.checked = true;
-              }
+      const data = {
+        Type: val.properties.classCode,
+      };
+      queryDict(data)
+        .then((res) => {
+          let arr = [];
+          // 勾选设备中选中的对象
+          const msgData = res.content;
+          // 设置已经勾选数据
+          if (this.InfoPointList && this.InfoPointList.length) {
+            msgData.map((item) => {
+              item.checked = false;
+              this.InfoPointList.forEach((a) => {
+                if (a.id == item.id) {
+                  item.checked = true;
+                }
+              });
+              return item;
             });
-            return item;
-          });
-        }
-        //  生成二级树
-        msgData.forEach((item) => {
-          if (arr.length) {
-            let index = -1;
-            arr.forEach((aItem) => {
-              if (aItem.msgTypeId == item.msgTypeId) {
-                index = 1;
-                aItem.children.push(item);
-                aItem.number++;
-              }
+          } else {
+            msgData.map((item) => {
+              item.checked = false;
+              return item;
             });
-            if (index == -1) {
+          }
+          //  生成二级树
+          msgData.forEach((item) => {
+            const itemTag = item.secondTag
+              ? item.secondTag
+              : item.firstTag
+              ? item.firstTag
+              : "--";
+            if (arr.length) {
+              let index = -1;
+              arr.forEach((aItem) => {
+                if (aItem.tag == itemTag) {
+                  index = 1;
+                  aItem.children.push(item);
+                  aItem.number++;
+                }
+              });
+
+              if (index == -1) {
+                const tag = item.secondTag
+                  ? item.secondTag
+                  : item.firstTag
+                  ? item.firstTag
+                  : "--";
+                const tagName = item.secondName
+                  ? item.secondName
+                  : item.firstName
+                  ? item.firstName
+                  : "--";
+                let obj = {
+                  tagName: tagName,
+                  tag: tag,
+                  children: [item],
+                  number: 1,
+                  showChildren: true,
+                };
+                arr.push(obj);
+              }
+            } else {
+              const tag = item.secondTag
+                ? item.secondTag
+                : item.firstTag
+                ? item.firstTag
+                : "--";
+              const tagName = item.secondName
+                ? item.secondName
+                : item.firstName
+                ? item.firstName
+                : "--";
               let obj = {
-                msgTypeId: item.msgTypeId,
-                msgType: item.msgType,
-                children: [item],
+                tagName: tagName,
+                tag: tag,
+                children: [],
                 number: 1,
                 showChildren: true,
               };
+              obj.children.push(item);
               arr.push(obj);
             }
-          } else {
-            let obj = {
-              msgTypeId: item.msgTypeId,
-              msgType: item.msgType,
-              children: [],
-              number: 1,
-              showChildren: true,
-            };
-            obj.children.push(item);
-            arr.push(obj);
-          }
+          });
+          this.msgData = arr;
+          this.$loading.close(this.local);
+        })
+        .catch((err) => {
+          console.log("接口报错", err);
+          this.$loading.close(this.local);
         });
-        this.msgData = arr;
-        console.log("this.msgData", this.msgData);
-      }, 1000);
     },
   },
+  mounted() {},
 };
 </script>
 <style lang="less" scoped>
@@ -273,6 +329,8 @@ p {
     box-sizing: border-box;
     .msgPoint-list {
       margin-top: 20px;
+      height: 100%;
+      overflow-y: scroll;
       .type-list {
         .type-title {
           cursor: pointer;
@@ -302,6 +360,7 @@ p {
     }
     .msgPoint-list-press {
       margin-top: 12px;
+      overflow-y: scroll;
       li {
         display: flex;
         height: 40px;

src/components/editview/rightPropertyBar/property.vue

@@ -43,8 +43,9 @@
     ></BaseImagePro>
     <BaseEquipment
       :InfoPointList="infoPointList"
-      :EquipId="equipId"
+      :EquipData="EquipData"
       v-show="itemType == 'BaseEquipment'"
+      :equipHeight="equipHeight"
     ></BaseEquipment>
   </div>
 </template>
@@ -97,10 +98,13 @@ export default {
       begin: "", //开头样式
       end: "", //结尾样式
       infoPointList: [], //设备--信息点数组
-      equipId: "", //设备 id
+      EquipData: {}, //设备 id
+      equipHeight: "", // 设备属性栏得高度
     };
   },
   mounted() {
+    const box = document.getElementsByClassName("propertys")[0];
+    this.equipHeight = box.offsetHeight - 150 + "px";
     bus.$on("emitChoice", this.emitChoice);
   },
   methods: {
@@ -119,7 +123,6 @@ export default {
       }
       // 同步联动样式
       this.linkStyle(itemList);
-      console.log("itemList", itemList);
     },
     // 同步样式
     linkStyle(itemList) {
@@ -130,7 +133,6 @@ export default {
         this.lineWidth = item.lineWidth;
         this.begin = arrowType[item.begin];
         this.end = arrowType[item.end];
-        console.log(this.begin, this.end);
       } else if (
         this.itemType == "BaseText" ||
         this.itemType == "BaseExplain"
@@ -164,14 +166,14 @@ export default {
         // 填充色
       } else if (this.itemType == "BaseEquipment") {
         if (
-          item.legendData.properties &&
-          item.legendData.properties.infoPointList
+          item.infoPointList &&
+          item.infoPointList.length
         ) {
-          this.infoPointList = item.legendData.properties.infoPointList;
+          this.infoPointList = item.infoPointList;
         } else {
           this.infoPointList = [];
         }
-        this.equipId = item.legendData.attachObjectIds[0];
+        this.EquipData = item.legendData;
       }
     },
   },
@@ -179,5 +181,7 @@ export default {
 </script>
 <style lang="less" scoped>
 .propertys {
+  width: 100%;
+  height: 100%;
 }
 </style>