Browse Source

管道列表调试

YaolongHan 4 years ago
parent
commit
fe8883b76c

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

@@ -38,6 +38,7 @@ export class PTopoParser extends SParser {
     markers: any = [];
     /**  管线对象 */
     relations: any = [];
+    factory:BigEditFactory = new BigEditFactory()
     constructor() {
         super(new BigEditFactory());
     }

+ 57 - 4
src/components/editview/leftToolBar/pipeList.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="pipe-list">
+  <div class="pipe-list" id="pipelist">
     <Input
       class="baseItemInput"
       :width="188"
@@ -8,11 +8,16 @@
       @pressEnter="pressEnter"
       @clear="pressEnter"
     />
-    <div v-show="!pressMsgData.length">
+    <div class="box-type" id="boxtype" v-show="!pressMsgData.length">
       <ul class="type" v-for="(item, key) in pipeList" :key="key">
         <li class="type-item">
           <div class="type-title" @click="collapse(item)">
-            <i class="el-icon-caret-bottom"></i>
+                  <i
+                  v-bind:class="[
+                    item.showchild ? 'caret-icon-active' : 'caret-icon',
+                    'el-icon-caret-bottom',
+                  ]"
+                ></i>
             <span>{{ item.name }}</span>
           </div>
           <el-collapse-transition>
@@ -99,7 +104,13 @@ export default {
       });
     },
   },
-  mounted() {},
+  mounted() {
+    const dombox = document.getElementById("pipelist");
+    const boxPorfess = document.getElementById("boxtype");
+    if (dombox) {
+      boxPorfess.style.height = dombox.offsetHeight - 20 + "px";
+    }
+  },
   created() {
     this.getPipeList();
   },
@@ -115,6 +126,10 @@ li {
 .pipe-list {
   width: 100%;
   height: 100%;
+  .box-type {
+    min-height: 500px;
+    overflow-y: scroll;
+  }
   .type {
     padding: 12px;
     box-sizing: border-box;
@@ -196,4 +211,42 @@ li {
     cursor: pointer;
   }
 }
+.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>