Browse Source

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

haojianlong 4 years ago
parent
commit
3e6ed6ad2d

+ 18 - 10
src/components/editview/baseTopoEditer.vue

@@ -35,7 +35,7 @@ export default {
     };
   },
   computed: {
-    ...mapState(["editCmd", "legendObj"]),
+    ...mapState(["editCmd", "legendObj", "graphId", "id"]),
   },
   mounted() {
     this.canvasWidth = this.$refs.baseTopo.offsetWidth;
@@ -61,7 +61,12 @@ export default {
     // this.readMapmsg();
   },
   methods: {
-    ...mapMutations(["SETCHOICELEHEND", "SETLEGENDOBJ"]),
+    ...mapMutations([
+      "SETCHOICELEHEND",
+      "SETLEGENDOBJ",
+      "SETPROJECT",
+      "projectId",
+    ]),
     // 恢复命令状态
     clearCmdStatus() {
       this.SETCHOICELEHEND("");
@@ -120,10 +125,10 @@ export default {
         const obj = {
           elements,
           name: "1", // 名称
-          categoryID: "1", // 图分类ID
-          projectID: "1", // 项目ID
-          buildingID: "1", // 建筑ID
-          floorID: "1", // 楼层id
+          categoryId: "1", // 图分类ID
+          projectId: this.projectId, // 项目ID
+          buildingId: "1", // 建筑ID
+          floorId: "1", // 楼层id
           note: "1", // 图说明
           log: {
             // 图操作日志
@@ -138,8 +143,8 @@ export default {
           },
         };
         Object.assign(obj, {
-          graphId: "cd8ca79c337644d48c58c447cf21b757",
-          id: "f15506fa5dcc4ce79064e459e5497748",
+          graphId: this.graphId,
+          id: this.id,
         });
         console.log(obj);
         saveGroup(obj).then((res) => {
@@ -154,8 +159,8 @@ export default {
     // 读取拓扑图
     readtopoMsg() {
       let obj = {
-        graphId: "cd8ca79c337644d48c58c447cf21b757",
-        id: "f15506fa5dcc4ce79064e459e5497748",
+        graphId: this.graphId,
+        id: this.id,
       };
       readGroup(obj).then((res) => {
         const parse = new PTopoParser();
@@ -195,6 +200,9 @@ export default {
       deep: true,
     },
   },
+  created() {
+    this.SETPROJECT(this.$route.query);
+  },
 };
 </script>
 <style lang="less" scoped>

+ 6 - 6
src/components/editview/leftToolBar.vue

@@ -4,18 +4,18 @@
     <div class="btn-list">
       <ul>
         <li
-          v-for="(item,index) in leftData"
+          v-for="(item, index) in leftData"
           :key="index"
-          :class="{ 'btn-active': chiceStatus==index }"
+          :class="{ 'btn-active': chiceStatus == index }"
           @click="openTool(index)"
         >
           <img
             width="20px"
             height="20px"
-            :src="chiceStatus==index ? item.activeIcon : item.icon"
+            :src="chiceStatus == index ? item.activeIcon : item.icon"
             alt
           />
-          <span>{{item.name}}</span>
+          <span>{{ item.name }}</span>
         </li>
       </ul>
     </div>
@@ -30,6 +30,7 @@
       :show-close="true"
       :before-close="handleClose"
       :wrapperClosable="false"
+      custom-class="drawer-box"
     >
       <legendList :chiceStatus="chiceStatus"></legendList>
     </el-drawer>
@@ -163,8 +164,7 @@ li {
 }
 .el-drawer__wrapper {
   left: 64px;
-  top: 50px;
-  // background: rgba(255, 255, 255, 1);
+  top: 86px;
   // box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
   width: 242px;
 }

+ 67 - 13
src/components/editview/leftToolBar/addBaseItem.vue

@@ -20,19 +20,29 @@
         v-for="(itemList, i) in item.itemList"
         :key="i"
       >
-        <div class="title">{{ itemList.title }}</div>
-        <ul>
-          <li
-            :class="{ 'btn-active': editCmd == baseItem.id }"
-            v-for="(baseItem, k) in itemList.itemList"
-            :key="k"
-            @click="drawItem(baseItem.id)"
-            :title="baseItem.name"
-          >
-            <img class="icon" :src="baseItem.icon" />
-            <span class="iconName">{{ baseItem.name }}</span>
-          </li>
-        </ul>
+        <div @click="collapse(itemList)" class="title">
+          {{ itemList.title }}
+          <i
+            v-bind:class="[
+              itemList.isClip ? 'caret-icon-active' : 'caret-icon',
+              'el-icon-caret-bottom ',
+            ]"
+          ></i>
+        </div>
+        <el-collapse-transition>
+          <ul v-show="itemList.isClip">
+            <li
+              :class="{ 'btn-active': editCmd == baseItem.id }"
+              v-for="(baseItem, k) in itemList.itemList"
+              :key="k"
+              @click="drawItem(baseItem.id)"
+              :title="baseItem.name"
+            >
+              <img class="icon" :src="baseItem.icon" />
+              <span class="iconName">{{ baseItem.name }}</span>
+            </li>
+          </ul>
+        </el-collapse-transition>
       </div>
     </div>
   </div>
@@ -56,6 +66,10 @@ export default {
       this.SETCHOICELEHEND(item);
     },
     pressEnter() {},
+    // /是否下拉折叠
+    collapse(item) {
+      item.isClip = !item.isClip;
+    },
   },
 };
 </script>
@@ -85,6 +99,46 @@ export default {
         font-size: 14px;
         padding-top: 16px;
         padding-bottom: 16px;
+        cursor: pointer;
+        .caret-icon {
+          animation: nowhirling 0.2s linear forwards;
+        }
+        .caret-icon-active {
+          animation: whirling 0.2s linear forwards;
+        }
+      }
+
+      @keyframes whirling {
+        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(180deg);
+          -ms-transform: rotate(180deg); /* Internet Explorer */
+          -moz-transform: rotate(180deg); /* Firefox */
+          -webkit-transform: rotate(180deg); /* Safari 和 Chrome */
+          -o-transform: rotate(180deg); /* Opera */
+        }
+      }
+      @keyframes nowhirling {
+        0% {
+          transform: rotate(180deg);
+          -ms-transform: rotate(180deg); /* Internet Explorer */
+          -moz-transform: rotate(180deg); /* Firefox */
+          -webkit-transform: rotate(180deg); /* Safari 和 Chrome */
+          -o-transform: rotate(180deg); /* 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 */
+        }
       }
       ul {
         display: flex;

+ 102 - 98
src/components/editview/leftToolBar/data.js

@@ -2,110 +2,114 @@
 export const baseEditItems = [{
     title: '基础组件',
     itemList: [{
-            title: '通用元素',
-            itemList: [{
-                    name: '线条',
-                    id: "EditBaseLine",
-                    icon:require("./../../../assets/images/leftImgs/"+"EditBaseLine.png"),
-                    activeIcon:require("./../../../assets/images/leftImgs/"+ "EditBaseLine"+"Active"+".png")
-                },
-                {
-                    name: '文本框',
-                    id: "EditBasetext",
-                    icon:require("./../../../assets/images/leftImgs/"+"EditBasetext.png"),
-                    activeIcon:require("./../../../assets/images/leftImgs/"+ "EditBasetext"+"Active"+".png")
-                },
-                {
-                    name: '图片',
-                    id: "EditBaseImage",
-                    icon:require("./../../../assets/images/leftImgs/"+"EditBaseImage.png"),
-                    activeIcon:require("./../../../assets/images/leftImgs/"+ "EditBaseImage"+"Active"+".png")
-                },
-                {
-                    name: '批注',
-                    id: "BaseExplain",
-                    icon:require("./../../../assets/images/leftImgs/"+"EditBasePostil.png"),
-                    activeIcon:require("./../../../assets/images/leftImgs/"+ "EditBasePostil"+"Active"+".png")
-                }
-            ]
+        title: '通用元素',
+        isClip: true,// 是否展开
+        itemList: [{
+            name: '线条',
+            id: "EditBaseLine",
+            icon: require("./../../../assets/images/leftImgs/" + "EditBaseLine.png"),
+            activeIcon: require("./../../../assets/images/leftImgs/" + "EditBaseLine" + "Active" + ".png")
         },
         {
-            title: '图形',
-            itemList: [{
-                    name: '矩形',
-                    id: "EditBaseRect",
-                    icon:require("./../../../assets/images/leftImgs/"+"EditBaseRect.png"),
-                    activeIcon:require("./../../../assets/images/leftImgs/"+ "EditBaseRect"+"Active"+".png")
-                },
-                {
-                    name: '多边形',
-                    id: "EditBasePolygon",
-                    icon:require("./../../../assets/images/leftImgs/"+"polygon.png"),
-                    activeIcon:require("./../../../assets/images/leftImgs/"+ "polygon"+"Active"+".png")
-                },
-                {
-                    name: '圆',
-                    id: "EditBaseCircle",
-                    icon:require("./../../../assets/images/leftImgs/"+"circle.png"),
-                    activeIcon:require("./../../../assets/images/leftImgs/"+ "circle"+"Active"+".png")
-                },
-                {
-                    name: '箭头',
-                    id: "EditBaseArrows",
-                    icon:require("./../../../assets/images/leftImgs/"+"EditBaseArrows.png"),
-                    activeIcon:require("./../../../assets/images/leftImgs/"+ "EditBaseArrows"+"Active"+".png")
-                }
-            ]
+            name: '文本框',
+            id: "EditBasetext",
+            icon: require("./../../../assets/images/leftImgs/" + "EditBasetext.png"),
+            activeIcon: require("./../../../assets/images/leftImgs/" + "EditBasetext" + "Active" + ".png")
         },
         {
-            title: '联通方式',
-            itemList: [{
-                    name: '弯头',
-                    id: "wantou",
-                    icon:require("./../../../assets/images/leftImgs/"+"wantou.png"),
-                    activeIcon:require("./../../../assets/images/leftImgs/"+ "wantou"+"Active"+".png")
-                },
-                {
-                    name: '三通',
-                    id: "santong",
-                    icon:require("./../../../assets/images/leftImgs/"+"santong.png"),
-                    activeIcon:require("./../../../assets/images/leftImgs/"+ "santong"+"Active"+".png")
-                },
-                {
-                    name: '四通',
-                    id: "sitong",
-                    icon:require("./../../../assets/images/leftImgs/"+"sitong.png"),
-                    activeIcon:require("./../../../assets/images/leftImgs/"+ "sitong"+"Active"+".png")
-                }
-            ]
+            name: '图片',
+            id: "EditBaseImage",
+            icon: require("./../../../assets/images/leftImgs/" + "EditBaseImage.png"),
+            activeIcon: require("./../../../assets/images/leftImgs/" + "EditBaseImage" + "Active" + ".png")
         },
         {
-            title: '动态取值',
-            itemList: [{
-                    name: '公式',
-                    id: "equation",
-                    icon:require("./../../../assets/images/leftImgs/"+"equation.png"),
-                    activeIcon:require("./../../../assets/images/leftImgs/"+ "equation"+"Active"+".png")
-                },
-                {
-                    name: '信息点',
-                    id: "infoPoint",
-                    icon:require("./../../../assets/images/leftImgs/"+"infoPoint.png"),
-                    activeIcon:require("./../../../assets/images/leftImgs/"+ "infoPoint"+"Active"+".png")
-                },
-                {
-                    name: '设备组',
-                    id: "equipList",
-                    icon:require("./../../../assets/images/leftImgs/"+"equipList.png"),
-                    activeIcon:require("./../../../assets/images/leftImgs/"+ "equipList"+"Active"+".png")
-                },
-                {
-                    name: '通用实例',
-                    id: "publicItem",
-                    icon:require("./../../../assets/images/leftImgs/"+"publicItem.png"),
-                    activeIcon:require("./../../../assets/images/leftImgs/"+ "publicItem"+"Active"+".png")
-                }
-            ]
+            name: '批注',
+            id: "BaseExplain",
+            icon: require("./../../../assets/images/leftImgs/" + "EditBasePostil.png"),
+            activeIcon: require("./../../../assets/images/leftImgs/" + "EditBasePostil" + "Active" + ".png")
+        }
+        ]
+    },
+    {
+        title: '图形',
+        isClip: true,// 是否展开
+        itemList: [{
+            name: '矩形',
+            id: "EditBaseRect",
+            icon: require("./../../../assets/images/leftImgs/" + "EditBaseRect.png"),
+            activeIcon: require("./../../../assets/images/leftImgs/" + "EditBaseRect" + "Active" + ".png")
         },
+        {
+            name: '多边形',
+            id: "EditBasePolygon",
+            icon: require("./../../../assets/images/leftImgs/" + "polygon.png"),
+            activeIcon: require("./../../../assets/images/leftImgs/" + "polygon" + "Active" + ".png")
+        },
+        {
+            name: '圆',
+            id: "EditBaseCircle",
+            icon: require("./../../../assets/images/leftImgs/" + "circle.png"),
+            activeIcon: require("./../../../assets/images/leftImgs/" + "circle" + "Active" + ".png")
+        },
+        {
+            name: '箭头',
+            id: "EditBaseArrows",
+            icon: require("./../../../assets/images/leftImgs/" + "EditBaseArrows.png"),
+            activeIcon: require("./../../../assets/images/leftImgs/" + "EditBaseArrows" + "Active" + ".png")
+        }
+        ]
+    },
+    {
+        title: '联通方式',
+        isClip: true,// 是否展开
+        itemList: [{
+            name: '弯头',
+            id: "wantou",
+            icon: require("./../../../assets/images/leftImgs/" + "wantou.png"),
+            activeIcon: require("./../../../assets/images/leftImgs/" + "wantou" + "Active" + ".png")
+        },
+        {
+            name: '三通',
+            id: "santong",
+            icon: require("./../../../assets/images/leftImgs/" + "santong.png"),
+            activeIcon: require("./../../../assets/images/leftImgs/" + "santong" + "Active" + ".png")
+        },
+        {
+            name: '四通',
+            id: "sitong",
+            icon: require("./../../../assets/images/leftImgs/" + "sitong.png"),
+            activeIcon: require("./../../../assets/images/leftImgs/" + "sitong" + "Active" + ".png")
+        }
+        ]
+    },
+    {
+        title: '动态取值',
+        isClip: true,// 是否展开
+        itemList: [{
+            name: '公式',
+            id: "equation",
+            icon: require("./../../../assets/images/leftImgs/" + "equation.png"),
+            activeIcon: require("./../../../assets/images/leftImgs/" + "equation" + "Active" + ".png")
+        },
+        {
+            name: '信息点',
+            id: "infoPoint",
+            icon: require("./../../../assets/images/leftImgs/" + "infoPoint.png"),
+            activeIcon: require("./../../../assets/images/leftImgs/" + "infoPoint" + "Active" + ".png")
+        },
+        {
+            name: '设备组',
+            id: "equipList",
+            icon: require("./../../../assets/images/leftImgs/" + "equipList.png"),
+            activeIcon: require("./../../../assets/images/leftImgs/" + "equipList" + "Active" + ".png")
+        },
+        {
+            name: '通用实例',
+            id: "publicItem",
+            icon: require("./../../../assets/images/leftImgs/" + "publicItem.png"),
+            activeIcon: require("./../../../assets/images/leftImgs/" + "publicItem" + "Active" + ".png")
+        }
+        ]
+    },
     ]
 }]

+ 10 - 1
src/store/index.ts

@@ -6,7 +6,10 @@ Vue.use(Vuex)
 export default new Vuex.Store({
   state: {
     editCmd: '', //编辑器编辑命令
-    legendObj: null //获取的相关图例数据obj
+    legendObj: null, //获取的相关图例数据obj
+    graphId: '',    //图 id 用于读图
+    id: '',        // id  用于读图
+    projectId: ''  // projectId
   },
   mutations: {
     // 修改编辑器命令
@@ -16,6 +19,12 @@ export default new Vuex.Store({
     // 修改编辑器图例
     SETLEGENDOBJ(state, data) {
       state.legendObj = data;
+    },
+    // 设置项目id
+    SETPROJECT(state, data) {
+      state.graphId = data.graphId;   //图 id 用于读图
+      state.id = data.id;       // id  用于读图
+      // projectId: ''  // projectId
     }
   },
   actions: {