工艺流程-小地图的显示/隐藏

src/view/process/process-flow/process-setting.vue

@@ -96,7 +96,7 @@
               </div>
             </Poptip>
             <Tooltip content="节点居中">
-              <Button icon="iconfont iconfont icon-juzhong" @click="()=>{this.graph.centerContent(); this.graph.cleanSelection()}"></Button>
+              <Button icon="md-contract" @click="()=>{this.graph.centerContent(); this.graph.cleanSelection()}"></Button>
             </Tooltip>
             <Tooltip content="适应窗口">
               <Button icon="md-expand" @click="()=>{this.graph.zoomToFit(); this.graph.cleanSelection()}"></Button>
@@ -104,6 +104,9 @@
             <Tooltip content="原始比例">
               <Button icon="iconfont iconfont icon-one2one" @click="()=>{this.graph.zoomToFit({ maxScale: 1 }); this.graph.cleanSelection()}"></Button>
             </Tooltip>
+            <Tooltip content="显示/隐藏小地图">
+              <Button icon="md-locate" @click="()=>{this.showMiniMap=!this.showMiniMap}"></Button>
+            </Tooltip>
             <Tooltip content="导出PNG">
               <Button icon="md-images" @click="()=>{this.graph.exportPNG('',{padding:50})}"></Button>
             </Tooltip>
@@ -138,9 +141,9 @@
       ></InputNumber>
     </div>
     <!--  小地图  -->
-    <div id="miniMap" ref="miniMap" class="miniMap"/>
-    <!--  弹窗组件  -->
-    <transition-group name="fade">
+    <transition name="fade">
+      <div id="miniMap" ref="miniMap" class="miniMap" v-show="showMiniMap"/>
+    </transition>
       <!--  节点弹窗  -->
       <NodeModal key="node" v-if="process.nodeModal.display"
                  :dataKindList="dataKindList"
@@ -153,7 +156,6 @@
       <EdgeModal key="edge" v-if="process.edgeModal.display"
                  :dictionaryDataList="dictionaryDataList"
                  :productGradeList="productGradeList.filter(it=>![$config.gradeKindType.decrease,$config.gradeKindType.inferior].includes(it.gradeKind))"/>
-    </transition-group>
   </div>
 </template>
 <script>
@@ -180,6 +182,7 @@ export default {
   },
   data() {
     return {
+      showMiniMap:true,
       scaleValue: 1,
       scaleMax: 3,
       scaleMin: 0.5,
@@ -720,6 +723,16 @@ export default {
   bottom: 100px;
   right: 30px
 }
+.fade-enter,.fade-leave-to {
+  opacity: 0;
+}
+.fade-enter-to,.fade-leave {
+  opacity: 1;
+}
+
+.fade-enter-active,.fade-leave-active {
+  transition: all .2s;
+}
 
 </style>