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

src/api/editer.ts

@@ -11,3 +11,12 @@ export function saveGroup(postParams: any): any {
 export function readGroup(postParams: any): any {
     return httputils.postJson(`/labsl${baseApi}read`, postParams)
 }
+
+//查询楼层
+export function buildiFloor(postParams: any): any {
+    return httputils.postJson(`/equip-componnet/labsl/building/floor`, postParams)
+}
+// 查询设备类型
+export function readCategory(postParams: any): any {
+    return httputils.postJson(`/equip-componnet/labsl/category`, postParams)
+}

src/api/httputils.ts

@@ -21,7 +21,7 @@ axiosservice.interceptors.request.use(
     (config) => {
         config.withCredentials = true // 允许携带token ,这个是解决跨域产生的相关问题
         config.headers = {
-            projectID: 'Pj1101050029',//项目id
+            projectId: 'Pj1101050029',//项目id
         }
         return config
     },

src/components/editview/baseTopoEditer.vue

@@ -36,7 +36,7 @@ export default {
     };
   },
   computed: {
-    ...mapState(["editCmd", "legendObj", "graphId", "id", "categoryId"]),
+    ...mapState(["editCmd", "legendObj", "graphId", "id", "categoryId","projectId"]),
   },
   mounted() {
     this.canvasWidth = this.$refs.baseTopo.offsetWidth;
@@ -66,7 +66,6 @@ export default {
       "SETCHOICELEHEND",
       "SETLEGENDOBJ",
       "SETPROJECT",
-      "projectId",
       "SETCATEGROY",
     ]),
     // 恢复命令状态
@@ -210,7 +209,8 @@ export default {
     },
   },
   created() {
-    this.SETPROJECT(this.$route.query);
+    console.log(this.$route.query)
+    // this.SETPROJECT(this.$route.query);
   },
 };
 </script>

src/components/editview/leftToolBar.vue

@@ -23,7 +23,7 @@
       size="220px"
       :with-header="false"
       :destroy-on-close="true"
-      :visible.sync="drawer"
+      :visible="true"
       :direction="direction"
       :modal="false"
       :modal-append-to-body="false"

src/components/editview/leftToolBar/addItemModel.vue

@@ -15,7 +15,8 @@
               caption="专业系统"
               multiple
               allText="全部"
-              :data="cascaderData6"
+              :all="false"
+              :data="categoryList"
               showPanel
               width="300"
               @change="changeItem"
@@ -25,17 +26,18 @@
             <Cascader
               caption="建筑楼层"
               multiple
-              :data="cascaderData6"
+              :all="false"
+              :data="buildFloorList"
               showPanel
               width="300"
             ></Cascader>
-            <Cascader
+            <!-- <Cascader
               caption="分区类型"
               multiple
               :data="cascaderData6"
               showPanel
               width="300"
-            ></Cascader>
+            ></Cascader> -->
             <Input
               iconType="search"
               v-model="inputVal2"
@@ -127,6 +129,7 @@
 <script>
 import { mapMutations, mapState } from "vuex";
 import { EquipmentList } from "./equipData";
+import { buildiFloor, readCategory } from "@/api/editer";
 export default {
   props: ["showAddItemModel"],
   computed: {
@@ -135,7 +138,7 @@ export default {
   data() {
     return {
       inputVal2: "",
-      isShowModel: false,
+      isShowModel: true,
       cascaderData6: [
         {
           title: "United Kingdom",
@@ -240,6 +243,8 @@ export default {
         },
       ],
       equipData: EquipmentList,
+      buildFloorList: [], // 建筑查询数据
+      categoryList: [], //设备类型
     };
   },
   methods: {
@@ -252,7 +257,13 @@ export default {
       this.$emit("closeModel");
     },
     finish() {
-      this.SETEQUIPLIST(this.equipData);
+      // 获取数组
+      let list = [];
+      this.equipData.forEach((items) => {
+        list = list.concat([...items.children]);
+      });
+      // 将选中的设备类存到vuex中
+      this.SETEQUIPLIST(list);
       this.modalClose();
     },
     pressEnter() {},
@@ -265,6 +276,30 @@ export default {
       items.children.splice(key, 1);
       items.number = items.children.length;
     },
+    // 构建树list
+    mapList(list, arr = [], nameList = ["id", "localName", "floor"]) {
+      if (list.length) {
+        list.forEach((item) => {
+          if (item[nameList[2]] && item[nameList[2]].length) {
+            const obj = {
+              title: item[nameList[1]],
+              id: item[nameList[0]],
+              children: [],
+            };
+            const children = this.mapList(item[nameList[2]], [], nameList);
+            obj.children = children;
+            arr.push(obj);
+          } else {
+            arr.push({
+              title: item[nameList[1]],
+              id: item[nameList[0]],
+            });
+          }
+        });
+      }
+      return arr;
+    },
+    handleSelectionChange() {},
   },
   watch: {
     abc: function (item) {
@@ -275,6 +310,24 @@ export default {
       this.isShowModel = val;
     },
   },
+  mounted() {
+    const data = {
+      projectId: "Pj1101050029",
+    };
+    // 建筑查询条件
+    buildiFloor(data).then((res) => {
+      this.buildFloorList = this.mapList(res.content);
+    });
+    // 设备类型查询条件
+    readCategory(data).then((res) => {
+      this.categoryList = this.mapList(
+        res.content,
+        [],
+        ["code", "name", "children"]
+      );
+      console.log(this.categoryList);
+    });
+  },
 };
 </script>
 <style lang="less" scoped>
@@ -397,7 +450,13 @@ li {
       border-bottom: 1px solid #eff0f1;
       display: flex;
       align-items: center;
-      justify-content: space-around;
+      justify-content: flex-start;
+      &:first-child {
+        margin-right: 24px;
+      }
+      &:last-child {
+        margin-left: 24px;
+      }
     }
   }
   .btn-list {

src/components/editview/leftToolBar/equipData.js

@@ -9,40 +9,99 @@ export const EquipmentList = [
             name: '设备实例-SBSL100201131',
             id: 11,
             url: '123',
-            porfess:''
+            porfess: '给排水专业',
+            porfessId: 1,
+            equipType: "设备名称2",
+            equipTypeId: 11
         },
         {
             name: '设备实例-SBSL100201132',
             id: 11,
-            url: '123'
+            url: '123',
+            porfess: '给排水专业',
+            porfessId: 1,
+            equipType: "设备名称2",
+            equipTypeId: 11
         },
         {
-            name: '设备实例-SBSL100201133',
+            name: '设备实例-SBSL100201131',
             id: 11,
-            url: '123'
-
+            url: '123',
+            porfess: '给排水专业',
+            porfessId: 1,
+            equipType: "设备名称2",
+            equipTypeId: 12
         }]
     },
     {
-        name: "设备名称2",
+        name: "设备名称3",
         id: 123,
         showChildren: true,
         number: 3,
         children: [{
             name: '设备实例-SBSL100201134',
             id: 11,
-            url: '123'
+            url: '123',
+            porfess: '给排水专业',
+            porfessId: 1,
+            equipType: "设备名称2",
+            equipTypeId: 12
         },
         {
             name: '设备实例-SBSL100201135',
             id: 11,
-            url: '123'
+            url: '123',
+            porfess: '给排水专业',
+            porfessId: 1,
+            equipType: "设备名称2",
+            equipTypeId: 12
         },
         {
             name: '设备实例-SBSL100201136',
             id: 11,
-            url: '123'
-
+            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

@@ -48,41 +48,57 @@
         ></span>
       </Popover>
     </div>
-    <ul>
-      <li @click="getEquipItem('lengganji.svg')">
-        <div class="left">
-          <div class="icon">
-            <!-- <svg class="xxx">
-              <use
-                xlink:href="@/assets/images/equip/lengganji.svg#notification"
-              ></use>
-            </svg> -->
+    <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(b)" 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>
+                    <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>
         </div>
-        <div class="right">
-          <div class="t">冷干机</div>
-          <div class="b">W3456112345093</div>
-        </div>
-      </li>
-      <li @click="getEquipItem('shuibeng.svg')">
-        <div class="left">
-          <div class="icon"></div>
-        </div>
-        <div class="right">
-          <div class="t">水泵</div>
-          <div class="b">A245234345287</div>
-        </div>
-      </li>
-      <li @click="getEquipItem('shuixiang.svg')">
-        <div class="left">
-          <div class="icon"></div>
-        </div>
-        <div class="right">
-          <div class="t">水箱</div>
-          <div class="b">Y2344560096</div>
-        </div>
-      </li>
-    </ul>
+      </el-collapse-transition>
+    </div>
+
     <!-- 添加设备 -->
     <div class="addbtn" @click="openAddEqupModle">
       <i class="el-icon-plus"></i>
@@ -92,6 +108,7 @@
 </template>
 <script>
 import { mapMutations, mapState } from "vuex";
+import { equipmentList } from "./equipData";
 export default {
   data() {
     return {
@@ -160,6 +177,8 @@ export default {
           ],
         },
       ],
+      equipmentList: [],
+      hoverIndex: -1,
     };
   },
   methods: {
@@ -168,6 +187,13 @@ export default {
     openAddEqupModle() {
       this.$emit("openAddEqupModle");
     },
+    // 设置hover显示
+    sethover(b) {
+      this.hoverIndex = b;
+    },
+    deletehover() {
+      this.hoverIndex = -1;
+    },
     // 获取设备图例
     getEquipItem(id) {
       const obj = {
@@ -179,13 +205,68 @@ export default {
     },
     // 筛选
     screen() {},
+    // 判断是否再数组中
+    isinlist(item, idName, name, list) {
+      let index = -1;
+      list.forEach((item, i) => {
+        if (item[idName] == item[idName]) {
+          index = i;
+        }
+      });
+      if (index < 0) {
+        list.push({
+          [idName]: item[idName],
+          [name]: item[name],
+          isShow: true,
+          children: [],
+        });
+      }
+      return index;
+    },
+    // 折叠
+    collapse(item) {
+      item.isShow = !item.isShow;
+    },
   },
   computed: {
     ...mapState(["editCmd"]),
   },
+  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;
+  },
 };
 </script>
 <style lang="less" scoped>
+div {
+  -moz-user-select: none; /*火狐*/
+  -webkit-user-select: none; /*webkit浏览器*/
+  -ms-user-select: none; /*IE10*/
+  -khtml-user-select: none; /*早期浏览器*/
+  user-select: none;
+}
 ul,
 li {
   margin: 0;
@@ -205,37 +286,61 @@ li {
       cursor: pointer;
     }
   }
-  ul {
-    li {
+  .porfess {
+    .porfess-title {
       width: 100%;
-      height: 48px;
+      padding: 16px 16px 0 16px;
       display: flex;
+      justify-content: space-between;
       cursor: pointer;
-      .left {
-        width: 28px;
-        display: flex;
-        height: 100%;
-        align-items: center;
-        .icon {
-          width: 100%;
-          height: 28px;
-          border-radius: 50% 50%;
-        }
+    }
+    .equipType {
+      .equipType-title {
+        margin: 20px 0 20px 18px;
+        cursor: pointer;
       }
-      .right {
-        padding: 4px;
-        box-sizing: border-box;
-        .t {
-          font-size: 14px;
-          color: #1f2429;
-        }
-        .b {
-          font-size: 10px;
-          color: #8d9399;
+      ul {
+        li {
+          width: 100%;
+          height: 48px;
+          display: flex;
+          cursor: pointer;
+          &:hover {
+            background: #f5f6f7;
+          }
+          .left {
+            width: 60px;
+            display: flex;
+            height: 100%;
+            align-items: center;
+            .showEyes {
+              width: 28px;
+              height: 28px;
+            }
+            .icon {
+              width: 28px;
+              height: 28px;
+              border-radius: 50% 50%;
+              background: red;
+            }
+          }
+          .right {
+            padding: 4px;
+            box-sizing: border-box;
+            .t {
+              font-size: 14px;
+              color: #1f2429;
+            }
+            .b {
+              font-size: 10px;
+              color: #8d9399;
+            }
+          }
         }
       }
     }
   }
+
   .addbtn {
     width: 100%;
     height: 40px;
@@ -251,10 +356,48 @@ li {
       color: #0091ff;
     }
   }
+  .caret-icon {
+    animation: nowhirling 0.2s linear forwards;
+  }
+  .caret-icon-active {
+    animation: whirling 0.2s linear forwards;
+  }
 }
 .reset {
   position: absolute;
   bottom: 16px;
   left: 24px;
 }
+@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/leftToolBar/legendList.vue

@@ -14,8 +14,9 @@
     <!-- 新增实例对象 -->
     <addItemModel
       @closeModel="showAddItemModel = false"
-      :showAddItemModel="showAddItemModel"
+      :showAddItemModel="true"
     ></addItemModel>
+      <!-- :showAddItemModel="showAddItemModel" -->
   </div>
 </template>
 <script>

src/components/editview/rightPropertyBar/BaseEquipment.vue

@@ -45,12 +45,17 @@ export default {
   data() {
     return {
       activeName: "first",
+      width:'',
+      height:''
     };
   },
   methods: {
     handleClick(tab, event) {
       console.log(tab, event);
     },
+    changeWidth() {},
+    changeHeight() {},
+    eforeAvatarUpload(){},
   },
   mounted() {},
 };

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 } from 'meri-design';
+import { Input, Modal, Cascader, Popover,Icon  } from 'meri-design';
 import { Select } from 'ant-design-vue';
 // 按需引入公共组件
 Vue.use(Input)
@@ -14,7 +14,7 @@ Vue.use(Select)
 Vue.use(Modal)
 Vue.use(Cascader)
 Vue.use(Popover)
-
+Vue.use(Icon)
 Vue.config.productionTip = false;
 new Vue({
   router,

src/store/index.ts

@@ -9,7 +9,7 @@ export default new Vuex.Store({
     legendObj: null, //获取的相关图例数据obj
     graphId: '',    //图 id 用于读图
     id: '',        // id  用于读图
-    projectId: '',  // projectId
+    projectId: 'Pj1101050029',  // projectId
     categoryId: '',   //类型id 用于读图
     equipmentList: []  //设备数组
   },
@@ -34,7 +34,7 @@ export default new Vuex.Store({
     },
     // 设置设备 list
     SETEQUIPLIST(state, val) {
-      state.equipmentList = val
+      state.equipmentList.concat(val);
     }
   },
   actions: {