解决 eslint 报错

修改 dataOptionsFn
更新最新的topology-vue 组件，修改 data.js 中的正方形
2021-07-15 09:50:20 +08:00 · 2021-07-15 09:26:19 +08:00 · 2021-07-12 10:00:21 +08:00 · 2021-07-08 17:54:39 +08:00 · 2021-06-21 12:01:51 +08:00 · 2021-04-22 11:17:26 +08:00
10 changed files with 21054 additions and 1244 deletions
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -10,7 +10,7 @@
  },
  "dependencies": {
    "core-js": "^3.6.5",
-    "topology-vue": "^0.1.6",
+    "topology-vue": "^0.5.24",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0"
  },
@ -29,4 +29,4 @@
    "sass-loader": "^8.0.2",
    "vue-template-compiler": "^2.6.11"
  }
-}
+}
--- a/public/index.html
+++ b/public/index.html
@ -1,38 +1,48 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <!-- 通用字体图标 -->
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
+    <!-- 常用图标 -->
    <link
-    href="//at.alicdn.com/t/font_2030495_pwo1zu1ka1.css"
-    rel="stylesheet"
-  />
-
-  <!-- 通用基础图形库 -->
-  <link
-  href="//at.alicdn.com/t/font_1331132_qhyav2o6mp.css"
-  rel="stylesheet"
-/>
-
-<!-- 其他图形库在此补充，例如企业字体图形库 -->
+      href="//at.alicdn.com/t/font_1331132_g7tv7fmj6c9.css"
+      rel="stylesheet"
+    />
+    <!-- 新通用图标topology-new -->
+    <link
+      href="//at.alicdn.com/t/font_2030495_6tq2su2jmyx.css"
+      rel="stylesheet"
+    />
+    <!-- 老图标 -->
+    <link
+      href="//at.alicdn.com/t/font_1331132_5lvbai88wkb.css"
+      rel="stylesheet"
+    />

+    <!-- 其他图形库在此补充，例如企业字体图形库 -->

    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
-      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+      <strong
+        >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
+        properly without JavaScript enabled. Please enable it to
+        continue.</strong
+      >
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->

    <!-- 需要用到的工具js -->
-    <script src="http://topology.le5le.com/js/canvas2svg.js"></script>
+    <script src="http://topology.le5le.com/assets/js/canvas2svg.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
-    <script src="https://cdn.bootcss.com/jszip/3.2.2/jszip.min.js"></script>
+    <script src="https://cdn.bootcdn.net/ajax/libs/jszip/3.5.0/jszip.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script>
+
+    <script src="/js/777777.js"></script>
+    <script src="/js/rg.js"></script>
  </body>
 </html>
--- a/public/js/777777.js
+++ b/public/js/777777.js
--- a/public/js/rg.js
+++ b/public/js/rg.js
--- a/src/router/index.js
+++ b/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
 });
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@ -5,24 +5,28 @@
      :configs="topologyConfigs"
      :materials="materials"
      :user="user"
+      :data="data"
      @event="onEvent"
    />
  </div>
 </template>

 <script>
+import Vue from 'vue';
 // 导入topology-vue组件
 import topology from 'topology-vue';
 // 需要导入topology-vue.css
 import 'topology-vue/topology-vue.css';
-
-import { defalutMaterials, userMaterials, images } from './data';
+Vue.use(topology);
+import {
+  defalutMenus,
+  defalutUserMenus,
+  defalutMaterials,
+  images
+} from './data';

 export default {
  name: 'Home',
-  components: {
-    topology
-  },
  data: function() {
    return {
      topologyConfigs: {
@ -35,61 +39,36 @@ export default {
          url: 'http://topology.le5le.com',
          target: '_blank'
        },
-        menus: [
-          {
-            name: '文件(自定义菜单1)',
-            children: [
-              { name: '新建文件', keyboard: 'Ctrl+N', action: 'open' },
-              { name: '打开文件', keyboard: 'Ctrl+O', action: 'loadNew' },
-              { name: '导入文件', keyboard: 'Ctrl+I', action: 'load' },
-              {},
-              { name: '保存', keyboard: 'Ctrl+S', action: 'save' },
-              { name: '另存为', keyboard: 'Ctrl+Shift+I', action: 'saveAs' },
-              { name: '下载JSON文件', action: 'downloadJson' },
-              { name: '下载zip打包文件', action: 'downloadZip' },
-              {},
-              { name: '导出为HTML', action: 'downloadHtml' },
-              {},
-              { name: '下载为PNG', action: 'downloadPng' },
-              { name: '下载为SVG', action: 'downloadSvg' }
-            ]
-          },
-          {
-            name: '编辑(自定义菜单2)',
-            children: [
-              { name: '撤销', keyboard: 'Ctrl+Z', action: 'undo' },
-              { name: '恢复  ', keyboard: 'Ctrl+Shift+Z', action: 'redo' },
-              {},
-              { name: '剪切  ', keyboard: 'Ctrl+X', action: 'cut' },
-              { name: '复制  ', keyboard: 'Ctrl+C', action: 'copy' },
-              { name: '粘贴  ', keyboard: 'Ctrl+V', action: 'paste' }
-            ]
-          },
-          {
-            name: '我的菜单3',
-            router: '/page'
-          }
-        ],
+        menus: defalutMenus,
        loginUrl: 'https://account.le5le.com',
        signupUrl: 'https://account.le5le.com',
-        userMenus: [
-          { name: '个人中心', router: '/user/home' },
-          {},
-          {
-            name: '账号设置',
-            url: 'https://account.le5le.com/user/profile',
-            target: '_blank'
-          },
-          {},
-          { name: '退出', action: 'logout' }
-        ]
+        userMenus: defalutUserMenus,
+        dataOptionsFn: (pen, key, value) => {
+          console.log(pen, key, value);
+          const keys = ['aaa', 'bbb'];
+          const values = [
+            {
+              value: 111,
+              label: '111'
+            },
+            {
+              value: 222,
+              label: '222'
+            }
+          ];
+          return {
+            keys,
+            // value: 80,
+            values
+          };
+        }
      },
      user: {
        username: 'le5le'
      },
      materials: {
        system: defalutMaterials,
-        user: userMaterials,
+        user: [],
        images,
        uploadUrl: '/api/file',
        uploadHeaders: {
@ -98,24 +77,46 @@ export default {
        uploadParams: {
          mydata: 1
        }
-      }
+      },
+      data: {}
    };
  },
+  created: function() {},
+  mounted() {
+    // 请确保 7777777(类似数字).js 和 rg.js已下载，正确加载
+    if (window.registerTools) {
+      window.registerTools();
+      if (window.topologyTools) {
+        this.materials.system[0].list = window.topologyTools;
+      }
+      //确保从预览页面返回是时清空存储
+      const json = sessionStorage.getItem('topologyData');
+      if (!this.$route.query.id && json) {
+        this.data = JSON.parse(json);
+        setTimeout(() => {
+          // 读到后清除对应 session
+          sessionStorage.removeItem('topologyData');
+        }, 200);
+      }
+    }
+  },
  methods: {
    onEvent(e) {
      switch (e.name) {
        case 'logout':
+          // 退出登录
          this.user = null;
          // Do sth.
          break;

-        case 'openMaterial':
-          // 点击了图标工具栏分组
-          console.log('openMaterial', e.params);
+        case 'openMaterialGroup':
+          // 展开/折叠图标工具栏分组
+          console.log('openMaterialGroup', e.params);
          // Do sth.
          break;

        case 'addMaterial':
+          // 添加“我的组件”
          // Do sth. For example:
          this.$router.push({
            path: '/',
@ -124,10 +125,43 @@ export default {
          break;

        case 'editMaterial':
+          // 编辑“我的组件”
          // Do sth. For example:
          this.$router.push({
            path: '/',
-            query: { id: e.params.id, component: '1' },
+            query: { id: e.params.id, component: '1' }
+          });
+          break;
+
+        case 'open':
+          // 导航菜单configs.menus里面定义的action
+          // 比如这里表示打开文件
+          break;
+        case 'save':
+          // 导航菜单configs.menus里面定义的action
+          // 比如这里表示保存文件
+          break;
+        case 'addImageUrl':
+          // 在“我的图片”里面添加了一张新图片
+          // this.addImageUrl(e.params);
+          break;
+        case 'deleteImage':
+          // 在“我的图片”里面删除了一张图片
+          // this.deleteImage(e.params);
+          break;
+        case 'preview':
+          // 点击工具栏“预览”
+
+          // 点击工具栏“预览”
+
+          // 保存当前编辑数据到sessionStorage
+          sessionStorage.setItem(
+            'topologyData',
+            JSON.stringify(window.topology.pureData())
+          );
+          this.$router.push({
+            path: '/preview',
+            query: { id: 'xxx', r: '1' }
          });
          break;

--- a/src/views/Preview.vue
+++ b/src/views/Preview.vue
@ -0,0 +1,80 @@
+<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 Vue from 'vue';
+import Topology from 'topology-vue';
+Vue.use(Topology);
+export default {
+  name: 'Preview',
+  data() {
+    return {
+      data: {},
+      locked: 0,
+      showTools: true,
+    };
+  },
+  created() {
+    //获取存储数据
+    const data = sessionStorage.getItem('topologyData');
+    if(data){
+      this.data = JSON.parse(data);
+    }else{
+      //
+    }
+
+    this.showTools = !!this.$route.query.r;
+  },
+  methods: {
+    onSizeWindow() {
+      window.topology.fitView(16);
+    },
+
+    onSizeOri() {
+      window.topology.open(this.data.data);
+    },
+
+    onBack() {
+      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>
--- a/src/views/data.js
+++ b/src/views/data.js
--- a/yarn.lock
+++ b/yarn.lock
Author	SHA1	Message	Date
SignDawn	a0beed1145	解决 eslint 报错	2021-07-15 09:50:20 +08:00
SignDawn	15ce86fded	修改 dataOptionsFn	2021-07-15 09:26:19 +08:00
SignDawn	7a692ed96b	更新最新的topology-vue 组件，修改 data.js 中的正方形	2021-07-12 10:00:21 +08:00
SignDawn	355395ace2	企业图形库的图标展示	2021-07-08 17:54:39 +08:00
SignDawn	57a0d9af8c	更新最新的topology-vue，新增涂鸦和钢笔工具	2021-06-21 12:01:51 +08:00
ananzhusen	1be4b264fd	Merge pull request #4 from ananzhusen/master anjin_modify_preview	2021-04-22 11:17:26 +08:00
anzhusen	c87cb672f6	anjin_modify_preview	2021-04-22 11:12:43 +08:00
JosephHo	7ade618ac0	企业图形库示例	2021-04-09 12:48:51 +08:00
SignDawn	e4f79758ff	修改topology-vue版本	2021-04-02 10:18:08 +08:00
SignDawn	125eba709c	删除master 分支下的初始文件夹	2021-04-01 15:02:44 +08:00
SignDawn	61a1b5850b	更新最新的topology-vue，并且图形库更改	2021-03-30 10:22:36 +08:00
SignDawn	a0d3a4e5bd	升级topology-vue 版本	2021-03-23 15:27:01 +08:00
SignDawn	622f609149	预览数据结构发送改变，修改结构	2021-03-17 11:41:10 +08:00
SignDawn	c01df9971e	Merge pull request #3 from SignDawn/feture/newVersion/2021-3-9 '修改index中的字体文件'	2021-03-12 10:08:55 +08:00
SignDawn	c1664bdb01	'修改index中的字体文件'	2021-03-12 10:06:07 +08:00
SignDawn	d7e5edf7fc	Merge pull request #2 from SignDawn/feture/newVersion/2021-3-9 '修改topologyVue的版本''	2021-03-09 14:22:17 +08:00
SignDawn	95235b462e	'修改topologyVue的版本''	2021-03-09 14:08:06 +08:00
alsmile	5cd5474f9d	Create package.json	2021-01-31 15:24:51 +08:00
Alsmile	c8935df8be	preview	2020-11-13 19:52:58 +08:00
Alsmile	359b5c5be1	data	2020-11-13 17:06:41 +08:00
Alsmile	f80182ec5e	events	2020-11-13 12:09:04 +08:00