preview

package.json

@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "core-js": "^3.6.5",
-    "topology-vue": "^0.1.6",
+    "topology-vue": "^0.1.7",
     "vue": "^2.6.11",
     "vue-router": "^3.2.0"
   },

src/router/index.js

@@ -1,28 +1,34 @@
-import Vue from "vue";
-import VueRouter from "vue-router";
-import Home from "../views/Home.vue";
+import Vue from 'vue';
+import VueRouter from 'vue-router';
+import Home from '../views/Home.vue';
 
 Vue.use(VueRouter);
 
 const routes = [
   {
-    path: "/",
-    name: "Home",
+    path: '/',
+    name: 'Home',
     component: Home
   },
   {
-    path: "/about",
-    name: "About",
+    path: '/preview',
+    name: 'Preview',
+    component: () =>
+      import(/* webpackChunkName: "preview" */ '../views/Preview.vue')
+  },
+  {
+    path: '/about',
+    name: 'About',
     // route level code-splitting
     // this generates a separate chunk (about.[hash].js) for this route
     // which is lazy-loaded when the route is visited.
     component: () =>
-      import(/* webpackChunkName: "about" */ "../views/About.vue")
+      import(/* webpackChunkName: "about" */ '../views/About.vue')
   }
 ];
 
 const router = new VueRouter({
-  mode: "history",
+  mode: 'history',
   base: process.env.BASE_URL,
   routes
 });

src/views/Home.vue

@@ -5,6 +5,7 @@
       :configs="topologyConfigs"
       :materials="materials"
       :user="user"
+      :data="data"
       @event="onEvent"
     />
   </div>
@@ -74,9 +75,22 @@ export default {
         uploadParams: {
           mydata: 1
         }
-      }     
+      },
+      data: {}
     };
   },
+  created: function() {
+    const data = window.topologyData;
+    // 存在缓存数据，预览页返回
+    if (data) {
+      this.data = { data: Object.assign({}, data) };
+      setTimeout(() => {
+        window.topologyData = null;
+      }, 200);
+    } else {
+      // Do sth.
+    }
+  },
   methods: {
     onEvent(e) {
       switch (e.name) {
@@ -128,6 +142,9 @@ export default {
           break;
         case 'preview':
           // 点击工具栏“预览”
+
+          // 保存当前编辑数据，方便预览时直接打开
+          window.topologyData = window.topology.data;
           this.$router.push({
             path: '/preview',
             query: { id: 'xxx', r: '1' }

src/views/Preview.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="preview">
+    <topology preview="true" :data="data" />
+    <div class="tools" v-if="showTools">
+      <a-button type="primary" @click="onBack">
+        <a-icon type="left" /> 返回
+      </a-button>
+      <div></div>
+      <a-button type="primary" style="margin-right: 0" @click="onSizeWindow">
+        <a-icon type="border" />
+        适合窗口大小
+      </a-button>
+      <a-button type="primary" @click="onSizeOri">
+        <a-icon type="fullscreen-exit" />
+        实际大小
+      </a-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import Topology from 'topology-vue';
+export default {
+  name: 'Preview',
+  components: {
+    Topology
+  },
+  data() {
+    return {
+      data: { data: {} },
+      locked: 0,
+      showTools: true
+    };
+  },
+  created() {
+    const data = window.topologyData;
+    if (data) {
+      this.locked = data.locked;
+      data.locked = 1;
+      this.$set(this.data, 'data', Object.assign({}, data));
+      setTimeout(() => {
+        window.topologyData = null;
+      }, 200);
+    } else {
+      // Do sth.
+    }
+
+    this.showTools = !!this.$route.query.r;
+  },
+  methods: {
+    onSizeWindow() {
+      window.topology.fitView(16);
+    },
+
+    onSizeOri() {
+      window.topology.open(this.data.data);
+    },
+
+    onBack() {
+      window.topology.data.locked = this.locked;
+      window.topologyData = window.topology.data;
+      this.$router.go(-1);
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.preview {
+  position: relative;
+  height: 100vh;
+
+  .tools {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    display: flex;
+    & > div {
+      flex-grow: 1;
+    }
+
+    button {
+      margin: 12px 16px;
+    }
+  }
+}
+</style>