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

src/App.vue

@@ -6,13 +6,18 @@
 <script>
 export default {
   data() {
-    return {
-
-    }
+    return {};
   },
-}
+};
 </script>
 <style lang="less">
+div {
+  -moz-user-select: none; /*火狐*/
+  -webkit-user-select: none; /*webkit浏览器*/
+  -ms-user-select: none; /*IE10*/
+  -khtml-user-select: none; /*早期浏览器*/
+  user-select: none;
+}
 body,
 html {
   margin: 0;

src/api/editer.ts

@@ -30,3 +30,11 @@ export function readCategory(postParams: any): any {
 export function queryEquip(postParams: any): any {
     return httputils.postJson(`/equip-componnet/labsl/query/equip`, postParams)
 }
+// 根据设备 id 查询设备对应的专业 /labsl/major/category
+export function queryCategory(postParams: any): any {
+    return httputils.postJson(`/equip-componnet/labsl/major/category`, postParams)
+}
+// 查询设备图例图片
+export function queryLegend(postParams: any): any {
+    return httputils.postJson(`/meiku/legend/query`, postParams)
+}

src/components/editClass/big-edit/SBaseEditScene.ts

@@ -193,6 +193,7 @@ export class SBaseEditScene extends SGraphEditScene {
                 default: {
                     strokecolor: "#c0ccda",
                     url: require('./../../../assets/images/equip/' + legendObj.url),
+                    text: 'xxxxxx'
                 }
             }
         }
@@ -418,15 +419,15 @@ export class SBaseEditScene extends SGraphEditScene {
                     this.view.update()
                 }
                 console.log(1);
-                
+
                 return true;
             }
             console.log(2);
-            
+
             return this.grabItem.onMouseUp(event);
         }
         console.log(3);
-        
+
         return super.onMouseUp(event)
     } // Function onMouseUp()
 

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

@@ -25,7 +25,6 @@
  */
 
 import { SGraphItem, SAnchorItem } from "@persagy-web/graph/lib";
-import { Marker } from "./../types/Marker";
 import { Legend } from "./../types/Legend";
 import { SBaseIconTextEdit } from './../../edit/';
 

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

@@ -99,7 +99,7 @@ export class PTopoParser extends SParser {
                 case "BasePolygon":
                     this.markers.push(this.factory.createBasePolygonEdit(data));
                     break;
-                case "BaseArrowPolygon": 
+                case "BaseArrowPolygon":
                     this.markers.push(this.factory.createBasePolygonArrowEdit(data));
             }
         }
@@ -111,12 +111,17 @@ export class PTopoParser extends SParser {
      * @param data Legend 图例类型数据
      */
     addNode(data: Legend) {
+        let node = null;
         if (data.properties && data.properties.type) {
             switch (data.properties.type) {
                 case "BaseEquipment":
-                    this.nodes.push(this.factory.createBaseEquipment(data));
+                    node = this.factory.createBaseEquipment(data)
                     break;
             }
         }
+        if (node) {
+            this.nodes.push(node);
+        }
+        return node
     }
 }

src/components/editview/baseTopoEditer.vue

@@ -16,7 +16,11 @@
   </div>
 </template>
 <script>
-import { PTopoScene, PTopoParser, PTopoView } from "@/components/editClass/persagy-edit";
+import {
+  PTopoScene,
+  PTopoParser,
+  PTopoView,
+} from "@/components/editClass/persagy-edit";
 // import { SGraphView } from "@persagy-web/graph";
 // import { SFloorParser } from "@persagy-web/big/lib";
 import topoTooltip from "./topoTooltip.vue";
@@ -163,8 +167,12 @@ export default {
       // 下载图片
       bus.$off('saveTopoImg');
       bus.$on("saveTopoImg", () => {
-        this.view.saveImage(`${this.topoContent.name}.png`, 'png')
-      })
+        this.view.saveImage(`${this.topoContent.name}.png`, "png");
+      });
+      // 手动添加设备实例
+      bus.$on("addEquipment", (val) => {
+        this.addEquipmentList(val);
+      });
     },
     // 读取拓扑图
     readtopoMsg() {
@@ -201,7 +209,7 @@ export default {
         item.connect("onContextMenu", this, this.scene.getItem);
         this.scene.addItem(item);
       });
-      this.view.fitSceneToView()
+      this.view.fitSceneToView();
     },
     // 生成快照
     generateSnap(uuid) {
@@ -287,6 +295,41 @@ export default {
         });
       })
     },
+    // 手动添加设备
+    addEquipmentList(list) {
+      const parse = new PTopoParser();
+      list.forEach((item, i) => {
+        x = (i + 1) * 100;
+        let data = {
+          /** 名称 */
+          name: "基础设备",
+          /** 返回物理世界对象 ID 列表 */
+          attachObjectIds: [item.id],
+          size: { width: 50, height: 50 },
+          /** 图标 (Image)，线类型 (Line) */
+          type: "Image",
+          /** 位置 */
+          pos: { x: x, y: 100 },
+          /** 由应用自己定义 */
+          properties: {
+            type: "BaseEquipment",
+          },
+          style: {
+            default: {
+              strokecolor: "#c0ccda",
+              url: require("./../../assets/images/equip/lengganji.svg"),
+            },
+          },
+        };
+        parse.addNode(data);
+        parse.nodes.forEach((item) => {
+          item.connect("finishCreated", this.scene, this.scene.finishCreated);
+          item.connect("onContextMenu", this, this.scene.getItem);
+          this.scene.addItem(item);
+        });
+        this.view.fitSceneToView();
+      });
+    },
   },
   watch: {
     editCmd(val) {

src/components/editview/leftToolBar/addItemModel.vue

@@ -157,8 +157,13 @@
 </template>
 <script>
 import { mapMutations, mapState } from "vuex";
-import { EquipmentList } from "./equipData";
-import { buildiFloor, readCategory, queryEquip } from "@/api/editer";
+import {
+  buildiFloor,
+  readCategory,
+  queryEquip,
+  queryLegend,
+} from "@/api/editer";
+import bus from "@/bus/bus";
 export default {
   props: ["showAddItemModel", "filtIdList"],
   computed: {
@@ -179,14 +184,15 @@ export default {
       floorIdString: "", // 楼层id 类型string
       tableTotal: 0, //搜索获取得设备总数
       equiptable: [], //table数据
-      equipData: [], //选中得设备数组
+      equipData: [], //选中得设备数组 右侧二级树
       buildFloorList: [], // 建筑查询数据
       categoryList: [], //设备类型
       tableHeight: 0, //table的高度
       choiceEquipList: [], // 选中得设备数组//非树机构
       pageSize: 20,
       currentPage: 1,
-      local: null,
+      local: null, //table loading
+      local2: null, // 全局 loading
       queryText: "", //搜索框数据
     };
   },
@@ -195,6 +201,7 @@ export default {
     // 筛选设备
     changeEquip(list) {
       const classCode = []; // 设备类型
+      this.currentPage = 1;
       list.forEach((val) => {
         if (val.index == 3) {
           classCode.push(val.id);
@@ -213,6 +220,7 @@ export default {
       let floorIdList = [];
       let isfloornull = "";
       let isbuildnull = "";
+      this.currentPage = 1;
       // 遍历获取对应得楼层id、建筑id
       list.forEach((val) => {
         if (val.index == 1) {
@@ -257,20 +265,20 @@ export default {
     // 搜索设备
     queryEquip() {
       let data = {
-        Cascade: [
+        cascade: [
           {
-            Name: "building",
-            Projection: ["id", "name", "localName"],
+            name: "building",
+            projection: ["id", "name", "localName"],
           },
           {
-            Name: "floor",
-            Projection: ["id", "name", "localName"],
+            name: "floor",
+            projection: ["id", "name", "localName"],
           },
         ],
-        Orders: "name asc, createTime desc",
-        PageNumber: this.currentPage,
-        PageSize: this.pageSize,
-        Filters: `projectId='${this.projectId}'${this.filtIdListString}${this.buildIdString}${this.floorIdString}${this.equipTypeString};localName contain "${this.queryText}" or localId contain "${this.queryText}"`,
+        orders: "name asc, createTime desc",
+        pageNumber: this.currentPage,
+        pageSize: this.pageSize,
+        filters: `projectId='${this.projectId}'${this.filtIdListString}${this.buildIdString}${this.floorIdString}${this.equipTypeString};localName contain "${this.queryText}" or localId contain "${this.queryText}"`,
       };
       this.localLoading();
       queryEquip(data)
@@ -291,13 +299,56 @@ export default {
     },
     // 确认/提交
     finish() {
-      // 将选中的设备类存到vuex中
-      this.SETEQUIPLIST(this.choiceEquipList);
-      // 获取专业和设备类型
-      this.modalClose();
+      // 获取选中图例得 iamge url
+      if (!this.equipData.length) {
+        this.modalClose();
+      }
+      const categoryList = [];
+      this.equipData.forEach((item) => {
+        categoryList.push(item.id);
+      });
+      const categoryListString = JSON.stringify(categoryList);
+      let data = {
+        cascade: [
+          {
+            name: "anchorList",
+          },
+          {
+            name: "state",
+          },
+        ],
+        filters: `category in ${categoryListString}`,
+        pageNumber: 1,
+        pageSize: 1000,
+      };
+      this.local2 = this.$loading({ type: "global" });
+      queryLegend(data)
+        .then((res) => {
+          if (res.content && res.content.length) {
+            let list = this.choiceEquipList;
+            res.content.forEach((contentType) => {
+              list.forEach((item) => {
+                if (item.classCode == contentType.category) {
+                  item.url = contentType.state[0].pic;
+                }
+              });
+            });
+            this.choiceEquipList = list;
+          }
+          // // 将选中的设备类存到vuex中
+          this.SETEQUIPLIST(this.choiceEquipList);
+          bus.$emit("addEquipment", this.choiceEquipList);
+          this.$loading.close(this.local2);
+          this.modalClose();
+        })
+        .catch((res) => {
+          this.$loading.close(this.local2);
+          this.modalClose();
+        });
     },
     // 搜索回车
     pressEnter() {
+      this.currentPage = 1;
       this.queryEquip();
     },
     // /是否下拉折叠
@@ -399,7 +450,6 @@ export default {
           };
           obj.children.push(item);
           arr.push(obj);
-          console.log("this.equipData", arr);
         }
       });
       this.equipData = arr;
@@ -435,6 +485,7 @@ export default {
           ["code", "name", "children"]
         );
       });
+      // 设置table的高
       setTimeout(() => {
         const domLeft = document.getElementById("left");
         if (domLeft) {
@@ -443,6 +494,10 @@ export default {
           this.queryEquip();
         }
       });
+      // 清空选中的item;
+      this.choiceEquipList = [];
+      // 清空右侧二级树
+      this.equipData = [];
     },
   },
   watch: {

src/components/editview/leftToolBar/equipData.js

@@ -1,107 +0,0 @@
-// 该数据为测试数据
-export const EquipmentList = [
-    {
-        name: "设备名称2",
-        id: 123,
-        showChildren: true,
-        number: 3,
-        children: [{
-            name: '设备实例-SBSL100201131',
-            id: 11,
-            url: '123',
-            porfess: '给排水专业',
-            porfessId: 1,
-            equipType: "设备名称2",
-            equipTypeId: 11
-        },
-        {
-            name: '设备实例-SBSL100201132',
-            id: 11,
-            url: '123',
-            porfess: '给排水专业',
-            porfessId: 1,
-            equipType: "设备名称2",
-            equipTypeId: 11
-        },
-        {
-            name: '设备实例-SBSL100201131',
-            id: 11,
-            url: '123',
-            porfess: '给排水专业',
-            porfessId: 1,
-            equipType: "设备名称2",
-            equipTypeId: 12
-        }]
-    },
-    {
-        name: "设备名称3",
-        id: 123,
-        showChildren: true,
-        number: 3,
-        children: [{
-            name: '设备实例-SBSL100201134',
-            id: 11,
-            url: '123',
-            porfess: '给排水专业',
-            porfessId: 1,
-            equipType: "设备名称2",
-            equipTypeId: 12
-        },
-        {
-            name: '设备实例-SBSL100201135',
-            id: 11,
-            url: '123',
-            porfess: '给排水专业',
-            porfessId: 1,
-            equipType: "设备名称2",
-            equipTypeId: 12
-        },
-        {
-            name: '设备实例-SBSL100201136',
-            id: 11,
-            url: '123',
-            porfess: '给排水专业',
-            porfessId: 1,
-            equipType: "设备名称2",
-            equipTypeId: 12
-        }]
-    }
-]
-
-export const equipmentList = [
-    {
-        name: '设备实例-SBSL100201136',
-        id: 11,
-        url: '123',
-        porfess: '给排水专业',
-        porfessId: 1,
-        equipType: "设备名称2",
-        equipTypeId: 12
-    },
-    {
-        name: '设备实例-SBSL100201136',
-        id: 11,
-        url: '123',
-        porfess: '给排水专业',
-        porfessId: 1,
-        equipType: "设备名称2",
-        equipTypeId: 12
-    }, {
-        name: '设备实例-SBSL100201136',
-        id: 11,
-        url: '123',
-        porfess: '给排水专业',
-        porfessId: 1,
-        equipType: "设备名称2",
-        equipTypeId: 12
-    }
-    , {
-        name: '设备实例-SBSL100201136',
-        id: 11,
-        url: '123',
-        porfess: '给排水专业',
-        porfessId: 1,
-        equipType: "设备名称2",
-        equipTypeId: 12
-    }
-]

src/components/editview/leftToolBar/equipmentList.vue

@@ -1,6 +1,6 @@
 <!-- 设备列表 -->
 <template>
-  <div class="equip-list">
+  <div class="equip-list" id="equiplist">
     <!-- 筛选 -->
     <div class="clp">
       <Input
@@ -48,55 +48,77 @@
       </Popover>
     </div>
     <!-- 设备 list -->
-    <div class="porfess" v-for="(items, index) in equipmentList" :key="index">
-      <div @click="collapse(items)" class="porfess-title">
-        <span>{{ items.porfess }}</span>
-        <i
-          v-bind:class="[
-            items.isShow ? 'caret-icon-active' : 'caret-icon',
-            'el-icon-arrow-down',
-          ]"
-        ></i>
-      </div>
-      <el-collapse-transition>
-        <div v-show="items.isShow">
-          <div class="equipType" v-for="(item, i) in items.children" :key="i">
-            <div class="equipType-title" @click="collapse(item)">
-              <i
-                v-bind:class="[
-                  item.isShow ? 'caret-icon-active' : 'caret-icon',
-                  'el-icon-caret-bottom',
-                ]"
-              ></i>
-              <span>{{ item.equipType }}</span>
-            </div>
-            <el-collapse-transition>
-              <ul @mouseout="deletehover" v-show="item.isShow">
-                <li
-                  @click="getEquipItem('lengganji.svg')"
-                  v-for="(a, b) in item.children"
-                  :key="b"
-                  @mouseover="sethover(b)"
-                >
-                  <div class="left">
-                    <div class="showEyes">
-                      <Icon v-show="hoverIndex == b" name="preview" />
+    <div class="box-porfess" id="boxPorfess">
+      <!-- 测试代码 开始 -->
+      <div @click="getEquipItem('lengganji.svg')">123</div>
+      <!-- 测试代码 结束-->
+      <div class="porfess" v-for="(items, index) in equipmentTree" :key="index">
+        <div @click="collapse(items)" class="porfess-title">
+          <span>{{ items.aliasName }}</span>
+          <i
+            v-bind:class="[
+              items.isShow ? 'caret-icon-active' : 'caret-icon',
+              'el-icon-arrow-down',
+            ]"
+          ></i>
+        </div>
+        <el-collapse-transition>
+          <div v-show="items.isShow">
+            <div class="equipType" v-for="(item, i) in items.children" :key="i">
+              <div class="equipType-title" @click="collapse(item)">
+                <i
+                  v-bind:class="[
+                    item.isShow ? 'caret-icon-active' : 'caret-icon',
+                    'el-icon-caret-bottom',
+                  ]"
+                ></i>
+                <span>{{ item.aliasName }}</span>
+              </div>
+              <el-collapse-transition>
+                <ul @mouseout="deletehover" v-show="item.isShow">
+                  <li
+                    @click="getEquipItem('lengganji.svg')"
+                    v-for="(a, b) in item.children"
+                    :key="b"
+                    @mouseover="sethover(index, i, b)"
+                  >
+                    <div class="left">
+                      <div class="showEyes">
+                        <Icon
+                          v-show="hoverIndex == '' + index + i + b"
+                          name="preview"
+                        />
+                      </div>
+                      <div class="icon">
+                        <img
+                          width="28"
+                          height="28"
+                          src="./../../../assets/images/equip/lengganji.svg"
+                          alt=""
+                        />
+                      </div>
                     </div>
-                    <div class="icon"></div>
-                  </div>
-                  <div class="right">
-                    <div class="t">{{ a.name }}</div>
-                    <div class="b">W3456112345093</div>
-                  </div>
-                  <div class="icons">
-                    <Icon v-show="hoverIndex == b" name="more" />
-                  </div>
-                </li>
-              </ul>
-            </el-collapse-transition>
+                    <div class="right">
+                      <div class="t" :title="a.localName">
+                        {{ a.localName ? a.localName : "--" }}
+                      </div>
+                      <div class="b" :title="a.localId">
+                        {{ a.localId ? a.localId : "--" }}
+                      </div>
+                    </div>
+                    <div class="icons">
+                      <Icon
+                        v-show="hoverIndex == '' + index + i + b"
+                        name="more"
+                      />
+                    </div>
+                  </li>
+                </ul>
+              </el-collapse-transition>
+            </div>
           </div>
-        </div>
-      </el-collapse-transition>
+        </el-collapse-transition>
+      </div>
     </div>
 
     <!-- 添加设备 -->
@@ -108,78 +130,14 @@
 </template>
 <script>
 import { mapMutations, mapState } from "vuex";
-import { equipmentList } from "./equipData";
+import { queryCategory } from "@/api/editer";
 export default {
   data() {
     return {
-      cascaderData6: [
-        {
-          title: "United Kingdom",
-          id: "id1",
-          children: [
-            { id: "id2", title: "London" },
-            { id: "id3", title: "Edinburgh" },
-            { id: "id4", title: "Cardiff" },
-            { id: "id5", title: "Birmingham" },
-            { id: "id6", title: "Liverpool" },
-            { id: "id7", title: "Oxford" },
-            { id: "id8", title: "Plymouth" },
-          ],
-        },
-        {
-          title: "AMERICAN",
-          id: "id9",
-          children: [
-            { id: "id10", title: "Chicago" },
-            { id: "id11", title: "Philadelphia" },
-            { id: "id12", title: "Boston" },
-            { id: "id13", title: "Houston" },
-            { id: "id14", title: "Atlanta" },
-            { id: "id15", title: "San Francisco" },
-          ],
-        },
-        {
-          title: "CHINA",
-          id: "id16",
-          children: [
-            { id: "id17", title: "BeiJing" },
-            { id: "id18", title: "ShangHAI" },
-            {
-              title: "GuiYang",
-              id: "id19",
-              children: [
-                { id: "id20", title: "Qingyan" },
-                { id: "id21", title: "Guian" },
-              ],
-            },
-            { id: "id22", title: "ZunYi" },
-          ],
-        },
-        {
-          title: "韩国",
-          id: "id23",
-          children: [
-            { id: "id24", title: "首尔" },
-            { id: "id25", title: "仁川" },
-            { id: "id26", title: "釜山" },
-            {
-              id: "id27",
-              title: "蔚山",
-              children: [
-                { id: "id10", title: "Chicago" },
-                { id: "id11", title: "Philadelphia" },
-                { id: "id12", title: "Boston" },
-                { id: "id13", title: "Houston" },
-                { id: "id14", title: "Atlanta" },
-                { id: "id15", title: "San Francisco" },
-              ],
-            },
-          ],
-        },
-      ],
-      equipmentList: [],
+      cascaderData6: [],
       hoverIndex: -1,
       baseItemVal: "",
+      equipmentTree: [],
     };
   },
   methods: {
@@ -189,8 +147,8 @@ export default {
       this.$emit("openAddEqupModle");
     },
     // 设置hover显示
-    sethover(b) {
-      this.hoverIndex = b;
+    sethover(a, b, c) {
+      this.hoverIndex = "" + a + b + c;
     },
     deletehover() {
       this.hoverIndex = -1;
@@ -230,37 +188,59 @@ export default {
     },
     //
     changeItem() {},
-    pressEnter(){}
+    pressEnter() {},
+    // 获取设备相关的专业以及设备类型
+    getCategory(idList) {
+      queryCategory(idList).then((res) => {
+        // 返回专业及其类型，根据类型 添加设备
+        let category = res.content;
+        category.forEach((item) => {
+          item.isShow = true;
+          if (item.children && item.children.length) {
+            item.children.map((child) => {
+              let obj = [];
+              child.isShow = true;
+              this.equipmentList.forEach((choiceItem) => {
+                choiceItem.isShow = true;
+                if (choiceItem.classCode == child.aliasCode) {
+                  obj.push(choiceItem);
+                }
+              });
+              if (obj.length) {
+                child.children = obj;
+              }
+              return child;
+            });
+          }
+        });
+        this.equipmentTree = category;
+      });
+    },
   },
   computed: {
-    ...mapState(["editCmd"]),
-    // equipmentList
+    ...mapState(["editCmd", "equipmentList"]),
+  },
+  watch: {
+    equipmentList: {
+      handler: function (val) {
+        if (!val.length) return;
+        const idList = [];
+        val.forEach((item) => {
+          idList.push(item.id);
+        });
+        this.getCategory(idList);
+      },
+      deep: true,
+      immediate: true,
+    },
   },
   mounted() {
-    let list = [];
-    // 获取树专业
-    equipmentList.forEach((items) => {
-      const porfessId = items.porfessId;
-      const equipTypeId = items.equipTypeId;
-      const listIndex = this.isinlist(items, "porfessId", "porfess", list);
-      // 第二次;
-      list.forEach((listItem) => {
-        this.isinlist(items, "equipTypeId", "equipType", listItem.children);
-        // 第三层
-        if (porfessId == listItem.porfessId) {
-          listItem.children.forEach((item) => {
-            if (equipTypeId == item.equipTypeId) {
-              item.children.push({
-                name: items.name,
-                id: items.id,
-                url: items.url,
-              });
-            }
-          });
-        }
-      });
-    });
-    this.equipmentList = list;
+    const dombox = document.getElementById("equiplist");
+    const boxPorfess = document.getElementById("boxPorfess");
+    if (dombox) {
+      boxPorfess.style.height = dombox.offsetHeight - 90 + "px";
+      console.log("boxPorfess", boxPorfess.style);
+    }
   },
 };
 </script>
@@ -291,6 +271,10 @@ li {
       cursor: pointer;
     }
   }
+  .box-porfess {
+    min-height: 500px;
+    overflow-y: scroll;
+  }
   .porfess {
     .porfess-title {
       width: 100%;
@@ -310,6 +294,8 @@ li {
           height: 48px;
           display: flex;
           cursor: pointer;
+          justify-content: space-around;
+          align-items: center;
           &:hover {
             background: #f5f6f7;
           }
@@ -326,21 +312,34 @@ li {
               width: 28px;
               height: 28px;
               border-radius: 50% 50%;
-              background: red;
+              display: flex;
+              align-items: center;
+              justify-content: center;
             }
           }
           .right {
             padding: 4px;
             box-sizing: border-box;
+            flex: 1;
             .t {
               font-size: 14px;
               color: #1f2429;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
             }
             .b {
               font-size: 10px;
               color: #8d9399;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
             }
           }
+          .icons {
+            width: 28px;
+            height: 28px;
+          }
         }
       }
     }
@@ -348,10 +347,11 @@ li {
 
   .addbtn {
     width: 100%;
-    height: 46px;
+    height: 40px;
     position: absolute;
     bottom: 0;
     left: 0;
+    transform: translateY(-40%);
     display: flex;
     align-items: center;
     justify-content: center;

src/components/editview/rightPropertyBar/BaseEquipment.vue

@@ -29,40 +29,148 @@
               class="avatar-uploader"
               action="https://jsonplaceholder.typicode.com/posts/"
               :show-file-list="false"
-
             >
               <i class="el-icon-link"></i>
             </el-upload>
           </div>
+          <div class="base-property base-property-left">
+            <div>
+              <span>R</span>
+              <el-input
+                style="width: 74px; margin-left: 6px"
+                size="mini"
+                v-model="width"
+                @input="changeWidth"
+                placeholder="请输入内容"
+              ></el-input>
+            </div>
+          </div>
+          <div class="imgUpdate">
+            <div class="img-tit">设计图</div>
+            <div class="btn-list">
+              <Button @click="tap" type="default">上传文件</Button>
+            </div>
+          </div>
+          <div class="imgUpdate">
+            <div class="img-tit">附加数据</div>
+            <div class="textarea">
+              <el-input
+                type="textarea"
+                :rows="2"
+                placeholder="请输入内容"
+                v-model="textarea"
+              >
+              </el-input>
+            </div>
+          </div>
+        </div>
+      </el-tab-pane>
+      <el-tab-pane label="信息点" name="second">
+        <div class="msgPoint-box">
+          <Input
+            class="baseItemInput"
+            :width="200"
+            iconType="search"
+            placeholder="搜索信息点"
+          />
+          <div class="msgPoint-list">
+            <div class="type-list" v-for="(item, key) in msgData" :key="key">
+              <div class="type-title" @click="clips(item)">
+                <i
+                  v-bind:class="[
+                    item.showChildren ? 'caret-icon-active' : 'caret-icon',
+                    'el-icon-caret-bottom',
+                  ]"
+                ></i>
+                <span>{{ item.msgType }}</span>
+              </div>
+              <el-collapse-transition>
+                <ul class="list" v-show="item.showChildren">
+                  <li v-for="(a, b) in item.children" :key="'i' + b">
+                    <Checkbox :checked="checked1" @change="handleChange" />
+                    <p>{{ a.msgName }}</p>
+                  </li>
+                </ul>
+              </el-collapse-transition>
+            </div>
+          </div>
         </div>
       </el-tab-pane>
-      <el-tab-pane label="信息点" name="second">信息点</el-tab-pane>
     </el-tabs>
   </div>
 </template>
 <script>
+import { msgData } from "./msgData.js";
 export default {
   data() {
     return {
       activeName: "first",
-      width:'',
-      height:''
+      width: "",
+      height: "",
+      checked1: "checked",
+      isShow: true,
+      msgData: [],
     };
   },
   methods: {
+    // 折叠信息点操作
+    clips(item) {
+      item.showChildren = !item.showChildren;
+    },
     handleClick(tab, event) {
       console.log(tab, event);
     },
     changeWidth() {},
     changeHeight() {},
-    eforeAvatarUpload(){},
+    eforeAvatarUpload() {},
+    handleChange(v, obj) {
+      console.log(obj);
+      this.checked1 = v;
+    },
+  },
+  mounted() {
+    let arr = [];
+    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++;
+          }
+        });
+        if (index == -1) {
+          let obj = {
+            msgTypeId: item.msgTypeId,
+            msgType: item.msgType,
+            children: [item],
+            number: 1,
+            showChildren: true,
+          };
+          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;
+    console.log(this.msgData);
   },
-  mounted() {},
 };
 </script>
 <style lang="less" scoped>
 ul,
-li {
+li,
+p {
   margin: 0;
   padding: 0;
   list-style-type: none;
@@ -82,6 +190,99 @@ li {
       align-items: center;
       justify-content: space-around;
     }
+    .base-property-left {
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      padding-left: 12px;
+      padding-top: 12px;
+      box-sizing: border-box;
+    }
+    .imgUpdate {
+      border-top: 1px solid #e4e5e7;
+      width: 100%;
+      margin-bottom: 16px;
+      padding: 0 12px 0 12px;
+      box-sizing: border-box;
+      .img-tit {
+        margin: 12px 0 12px 0;
+        color: #646a73;
+        font-size: 12px;
+      }
+    }
+  }
+  .msgPoint-box {
+    width: 100%;
+    height: 100%;
+    padding: 0 12px 0 12px;
+    box-sizing: border-box;
+    .msgPoint-list {
+      margin-top: 20px;
+      .type-list {
+        .type-title {
+          cursor: pointer;
+          margin-bottom: 10px;
+          span {
+            margin-left: 12px;
+          }
+        }
+        ul {
+          width: 100%;
+          padding-left: 28px;
+          li {
+            display: flex;
+            height: 40px;
+            align-items: center;
+            justify-content: flex-start;
+            cursor: pointer;
+            p {
+              margin-left: 12px;
+            }
+            &:hover {
+              background: #f5f6f7;
+            }
+          }
+        }
+      }
+    }
+  }
+  .caret-icon {
+    animation: nowhirling 0.2s linear forwards;
+  }
+  .caret-icon-active {
+    animation: whirling 0.2s linear forwards;
+  }
+  @keyframes whirling {
+    0% {
+      transform: rotate(-90deg);
+      -ms-transform: rotate(-90deg); /* Internet Explorer */
+      -moz-transform: rotate(-90deg); /* Firefox */
+      -webkit-transform: rotate(-90deg); /* Safari 和 Chrome */
+      -o-transform: rotate(-90deg); /* Opera */
+    }
+    100% {
+      transform: rotate(0deg);
+      -ms-transform: rotate(0deg); /* Internet Explorer */
+      -moz-transform: rotate(0deg); /* Firefox */
+      -webkit-transform: rotate(0deg); /* Safari 和 Chrome */
+      -o-transform: rotate(0deg); /* Opera */
+    }
+  }
+  @keyframes nowhirling {
+    0% {
+      transform: rotate(0deg);
+      -ms-transform: rotate(0deg); /* Internet Explorer */
+      -moz-transform: rotate(0deg); /* Firefox */
+      -webkit-transform: rotate(0deg); /* Safari 和 Chrome */
+      -o-transform: rotate(0deg); /* Opera */
+    }
+    100% {
+      transform: rotate(-90deg);
+      -ms-transform: rotate(-90deg); /* Internet Explorer */
+      -moz-transform: rotate(-90deg); /* Firefox */
+      -webkit-transform: rotate(-90deg); /* Safari 和 Chrome */
+      -o-transform: rotate(-90deg); /* Opera */
+    }
   }
 }
 </style>

src/components/editview/rightPropertyBar/msgData.js

@@ -0,0 +1,38 @@
+export const msgData = [
+    {
+        msgType: '即时状态',
+        msgTypeId: 1,
+        id: '001',
+        msgName: '001信息点'
+    },
+    {
+        msgType: '即时状态',
+        msgTypeId: 1,
+        id: '002',
+        msgName: '002信息点'
+    },
+    {
+        msgType: '即时状态',
+        msgTypeId: 1,
+        id: '003',
+        msgName: '003信息点'
+    },
+    {
+        msgType: '累计指标',
+        msgTypeId: 2,
+        id: '004',
+        msgName: '001信息点'
+    },
+    {
+        msgType: '累计指标',
+        msgTypeId: 2,
+        id: '005',
+        msgName: '002信息点'
+    },
+    {
+        msgType: '累计指标',
+        msgTypeId: 2,
+        id: '006',
+        msgName: '003信息点'
+    }
+]

src/components/editview/rightPropertyBar/property.vue

@@ -40,7 +40,8 @@
       :Height="Height"
       v-show="itemType == 'BaseImage'"
     ></BaseImagePro>
-    <BaseEquipment v-show="itemType == 'BaseEquipment'"></BaseEquipment>
+    <BaseEquipment v-if="true"></BaseEquipment>
+    <!-- itemType == 'BaseEquipment' -->
   </div>
 </template>
 <script>

src/main.ts

@@ -6,7 +6,7 @@ import './assets/font/iconfont.css';
 import ElementUI from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
 Vue.use(ElementUI);
-import { Input, Modal, Cascader, Popover, Icon, Pagination, Loading } from 'meri-design';
+import { Input, Modal, Cascader, Popover, Icon, Pagination, Loading,Checkbox,Button  } from 'meri-design';
 import { Select } from 'ant-design-vue';
 // 按需引入公共组件
 Vue.use(Input)
@@ -16,6 +16,8 @@ Vue.use(Cascader)
 Vue.use(Popover)
 Vue.use(Icon)
 Vue.use(Pagination)
+Vue.use(Checkbox)
+Vue.use(Button)
 Vue.prototype.$loading = Loading;
 
 Vue.config.productionTip = false;

src/store/index.ts

@@ -12,7 +12,7 @@ export default new Vuex.Store({
     isPub: 0,     // 用于读图 区分读取 已发布 or 未发布
     projectId: 'Pj1101050029',  // projectId
     categoryId: '',   //类型id 用于读图
-    equipmentList: []  //设备数组
+    equipmentList: []  //图上所有设备数组
   },
   mutations: {
     // 修改编辑器命令
@@ -39,7 +39,8 @@ export default new Vuex.Store({
     },
     // 设置设备 list
     SETEQUIPLIST(state, val) {
-      state.equipmentList.concat(val);
+      let arr1 = state.equipmentList;
+      state.equipmentList = arr1.concat(val)
     }
   },
   actions: {

vue.config.js

@@ -11,6 +11,11 @@ module.exports = {
                 changeOrigin: true,
                 secure: false,
             },
+            '/meiku': {
+                target: 'http://39.102.40.239:8080',
+                changeOrigin: true,
+                secure: false,
+            },
             // 图片服务器
             '/image-service': {
                 target: 'http://adm.sagacloud.cn',