Ver código fonte

leftToolBar:<fix>下拉框由一层改为两层

YaolongHan 4 anos atrás
pai
commit
371b7a72c8

+ 1 - 0
package.json

@@ -19,6 +19,7 @@
     "@persagy-web/big": "2.2.19",
     "@persagy-web/draw": "2.2.8",
     "@persagy-web/graph": "2.2.23",
+    "@persagy-web/big-edit": "2.2.1",
     "@persagy-web/edit": "2.2.2",
     "@types/uuid": "^8.0.0",
     "ant-design-vue": "^1.6.5",

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

@@ -32,7 +32,7 @@ import { SGraphItem, SGraphSelectContainer, SOrderSetType } from "@persagy-web/g
 import { uuid } from "./until";
 import { SBaseArrow, SBaseEquipment, SBaseExpainEdit, SBasePipeUninTool, SBasePipe } from "./"
 import { SBaseArrowPolyEdit } from './items/SBaseArrowPolyEdit';
-import { SGraphAddListCommand } from '../edit/commands/SGraphAddListCommand';
+import { SGraphAddListCommand } from '@persagy-web/edit/lib/commands/SGraphAddListCommand';
 
 /**
  * big-edit 场景
@@ -502,7 +502,7 @@ export class SBaseEditScene extends SGraphEditScene {
      * @parm type   设置类型
      */
     setOrder(type: string) {
-        this.selectContainer.setOrder(SOrderSetType.[type])
+        this.selectContainer.setOrder(SOrderSetType[type])
     }
 
     /**

+ 20 - 20
src/components/editClass/big-edit/items/SBasePipeUninTool.ts

@@ -24,10 +24,10 @@
  * *********************************************************************************************************************
  */
 
-import {SBaseImageEdit} from "@persagy-web/edit";
-import {SGraphItem} from "@persagy-web/graph/lib";
-import {Marker} from "./../types/Marker";
-import {SMouseEvent} from "@persagy-web/base/lib";
+import { SBaseImageEdit } from "@persagy-web/edit";
+import { SGraphItem } from "@persagy-web/graph/lib";
+import { Marker } from "./../types/Marker";
+import { SMouseEvent } from "@persagy-web/base/lib";
 
 /**
  * 编辑基础管道接头类
@@ -45,22 +45,22 @@ export class SBasePipeUninTool extends SBaseImageEdit {
      */
     constructor(parent: SGraphItem | null, data: Marker) {
         super(parent, data);
-        if (data && data.style) {
-            switch (data.style.uninToolType) {
-                case 2:
-                    this.url = require('./../../../../assets/images/leftImgs/wantou.png');
-                    break;
-                case 3:
-                    this.url = require('./../../../../assets/images/leftImgs/santong.png');
-                    break;
-                case 4:
-                    this.url = require('./../../../../assets/images/leftImgs/sitong.png');
-                    break;
-                default:
-                    this.url = require('./../../../../assets/images/leftImgs/wantou.png');
-                    break;
-            }
-        }
+        // if (data && data.style) {
+        //     switch (data.style.uninToolType) {
+        //         case 2:
+        //             this.url = require('./../../../../assets/images/leftImgs/wantou.png');
+        //             break;
+        //         case 3:
+        //             this.url = require('./../../../../assets/images/leftImgs/santong.png');
+        //             break;
+        //         case 4:
+        //             this.url = require('./../../../../assets/images/leftImgs/sitong.png');
+        //             break;
+        //         default:
+        //             this.url = require('./../../../../assets/images/leftImgs/wantou.png');
+        //             break;
+        //     }
+        // }
     } // Constructor
 
     /**

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

@@ -23,7 +23,7 @@
  *
  * ****/
 
-import { SParser, SItemFactory } from '@persagy-web/big/lib';
+import { SParser } from '@persagy-web/big/lib';
 import { BigEditFactory, Legend, Marker, Relation, ElementData } from "./../big-edit"
 
 /**

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

@@ -24,13 +24,13 @@
  * ****/
 
 import { SBaseEditScene, SBasePipe, SBaseEquipment } from "./../big-edit";
-import { SGraphEdit, SGraphPropertyCommand, } from "./../edit";
+import { SGraphEdit, SGraphPropertyCommand, } from "@persagy-web/edit";
 import { SMouseEvent } from "@persagy-web/base/lib";
 import { SGraphSelectContainer, SLineStyle } from "@persagy-web/graph";
 import { SItemStatus } from "@persagy-web/big/lib/enums/SItemStatus";
 import { rgbaNum } from "./../big-edit/until";
 // 引入命令
-import { SGraphAddCommand } from "./../edit/commands/SGraphAddCommand"
+import { SGraphAddCommand } from "@persagy-web/edit/lib/commands/SGraphAddCommand"
 import { SColor, SFont, SArrowStyleType } from '@persagy-web/draw/lib';
 import { PTopoParser } from "./"
 

+ 1 - 1
src/components/editClass/persagy-edit/item/SPersagyImageEdit.ts

@@ -24,7 +24,7 @@
  * *********************************************************************************************************************
  */
 
-import { SBaseImageEdit } from './../../edit';
+import { SBaseImageEdit } from '@persagy-web/edit';
 import { SGraphItem } from "@persagy-web/graph";
 import { Marker } from "./../../big-edit/types/Marker";
 import { SMouseEvent } from "@persagy-web/base/lib";

+ 1 - 2
src/components/editClass/persagy-edit/items/SBaseArrow.ts

@@ -25,11 +25,10 @@
  */
 
 import { SColor, SFont, SPainter, SArrowStyleType } from "@persagy-web/draw/";
-import { SBasePolylineEdit } from './../../edit';
+import { SBasePolylineEdit } from '@persagy-web/edit';
 import { SGraphItem, SLineStyle } from "@persagy-web/graph/lib";
 import { Marker } from "./../../big-edit/types/Marker";
 import { SMouseEvent } from "@persagy-web/base/lib";
-import { ItemOrder } from '@persagy-web/big/lib';
 
 /**
  * 编辑箭头(折线)

+ 89 - 71
src/components/editview/leftToolBar/addBaseItem.vue

@@ -17,36 +17,48 @@
       v-for="(item, index) in baseEditItems"
       :key="index"
     >
-      <span class="legend-title">{{ item.title }}</span>
-      <div
-        class="legend-content"
-        v-for="(itemList, i) in item.itemList"
-        :key="i"
-      >
-        <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 class="legend-title" @click="collapse(item)">
+        <span>{{ item.title }}</span
+        ><i
+          :class="[
+            item.isClip ? 'caret-icon-active' : 'caret-icon',
+            'el-icon-arrow-down',
+          ]"
+        ></i>
       </div>
+      <el-collapse-transition>
+        <div v-show="item.isClip">
+          <div
+            class="legend-content"
+            v-for="(itemList, i) in item.itemList"
+            :key="i"
+          >
+            <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>
+      </el-collapse-transition>
     </div>
     <ul class="baseItems" v-show="baseItemList.length">
       <li
@@ -114,11 +126,18 @@ export default {
     .legend-title {
       display: block;
       font-size: 14px;
-      height: 38px;
-      line-height: 38px;
-      margin-left: 10px;
+      padding: 0 10px 0 10px;
+      box-sizing: border-box;
       color: #8d9399;
       border-top: 1px solid #eee;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      cursor: pointer;
+      span {
+        height: 38px;
+        line-height: 38px;
+      }
     }
     .legend-content {
       padding: 0 10 10px 10px;
@@ -131,45 +150,6 @@ export default {
         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;
@@ -248,4 +228,42 @@ export default {
     background: #e1f2ff !important;
   }
 }
+.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 */
+  }
+}
 </style>

+ 1 - 0
src/components/editview/leftToolBar/data.js

@@ -1,6 +1,7 @@
 
 export const baseEditItems = [{
     title: '基础组件',
+    isClip: true,
     itemList: [{
         title: '通用元素',
         isClip: true,// 是否展开

+ 3 - 6
src/views/editer.vue

@@ -12,27 +12,24 @@
           effect="dark"
           content="下载"
           placement="bottom"
-          @click="saveTopoImg"
         >
-          <span class="icon iconfont icon-xiazai"></span>
+          <span @click="saveTopoImg" class="icon iconfont icon-xiazai"></span>
         </el-tooltip>
         <el-tooltip
           class="item"
           effect="dark"
           content="保存"
           placement="bottom"
-          @click="saveTopo"
         >
-          <span class="icon iconfont icon-baocun"></span>
+          <span @click="saveTopo" class="icon iconfont icon-baocun"></span>
         </el-tooltip>
         <el-tooltip
           class="item"
           effect="dark"
           content="发布"
           placement="bottom"
-          @click="issueTopo"
         >
-          <span class="icon iconfont icon-fabu"></span>
+          <span @click="issueTopo" class="icon iconfont icon-fabu"></span>
         </el-tooltip>
       </div>
     </div>