From 70e54d2ebaf9e1eddc122e798a2d6e6809f4f048 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=92=AC=E8=BD=AE=E7=8C=AB?= <10928033@qq.com>
Date: Fri, 20 Jan 2023 20:21:41 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E7=A4=BA=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                                  |    1 +
 src/components/webtopo-svg-edit/index.vue    |    7 +
 src/components/webtopo-svg-preview/index.vue |    8 +-
 src/router/index.ts                          |   22 +-
 src/utils/index.ts                           |   16 +
 src/views/demo/custom-toolbar.vue            |  231 ++++
 src/views/demo/edit-load.vue                 |  197 +++
 src/views/demo/index.vue                     |   94 ++
 src/views/demo/preview-test.vue              | 1206 ++++++++++++++++++
 src/views/demo/set-node-attr.vue             |  130 ++
 src/views/edit/index.vue                     |  372 +-----
 11 files changed, 1911 insertions(+), 373 deletions(-)
 create mode 100644 src/views/demo/custom-toolbar.vue
 create mode 100644 src/views/demo/edit-load.vue
 create mode 100644 src/views/demo/index.vue
 create mode 100644 src/views/demo/preview-test.vue
 create mode 100644 src/views/demo/set-node-attr.vue

diff --git a/src/App.vue b/src/App.vue
index f480248..4c0c1da 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
   // This starter template is using Vue 3 <script setup> SFCs
   // Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
+  import 'element-plus/dist/index.css';
 </script>
 
 <template>
diff --git a/src/components/webtopo-svg-edit/index.vue b/src/components/webtopo-svg-edit/index.vue
index e187874..f7e8b7c 100644
--- a/src/components/webtopo-svg-edit/index.vue
+++ b/src/components/webtopo-svg-edit/index.vue
@@ -85,6 +85,7 @@
   import { IConfigCenter } from '@/config-center/types';
   import { useImportDataModel } from '@/hooks';
   import { useGlobalStore } from '@/store/global';
+  import { IDoneJson } from '@/store/global/types';
   const props = defineProps({
     customToolBar: {
       type: Object as PropType<IConfigCenter>,
@@ -111,6 +112,9 @@
     importJsonRef.value?.onImportJson();
     changeVisible(EVisibleConfKey.ImportJson, false);
   };
+  const setGraphNodeJson = (done_json: IDoneJson[]) => {
+    globalStore.setDoneJson(done_json);
+  };
   onMounted(() => {
     if (props.dataModel != '') {
       useImportDataModel(props.dataModel);
@@ -118,6 +122,9 @@
       globalStore.setDoneJson([]);
     }
   });
+  defineExpose({
+    setGraphNodeJson
+  });
 </script>
 <style scoped lang="less">
   @headerHeight: 60px;
diff --git a/src/components/webtopo-svg-preview/index.vue b/src/components/webtopo-svg-preview/index.vue
index a4a7b27..62fef30 100644
--- a/src/components/webtopo-svg-preview/index.vue
+++ b/src/components/webtopo-svg-preview/index.vue
@@ -93,7 +93,7 @@
   import { getCurrentInstance, PropType, reactive } from 'vue';
   import { useGlobalStore } from '@/store/global';
   import { EGlobalStoreIntention, EMouseInfoState } from '@/store/global/types';
-  import { prosToVBind } from '@/utils';
+  import { prosToVBind, setArrItemByID } from '@/utils';
 
   import { EDoneJsonType } from '@/config-center/types';
   import ConnectionLine from '@/components/webtopo-svg-edit/components/connection-line/index.vue';
@@ -215,6 +215,12 @@
       height: actual_bound.height * scale_y
     };
   };
+  const setNodeAttrByID = (id: string, attr: string, val: any) => {
+    return setArrItemByID(id, attr, val, preview_data.done_json);
+  };
+  defineExpose({
+    setNodeAttrByID
+  });
 </script>
 <style lang="less" scoped>
   .canvas {
diff --git a/src/router/index.ts b/src/router/index.ts
index f392002..80022cb 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -2,7 +2,7 @@ import { createRouter, createWebHistory } from 'vue-router';
 export const constantRoutes = [
   {
     path: '/',
-    redirect: '/edit'
+    component: () => import('../views/demo/index.vue')
   },
   {
     name: 'edit',
@@ -13,6 +13,26 @@ export const constantRoutes = [
     name: 'preview',
     path: '/preview',
     component: () => import('../views/preview/index.vue')
+  },
+  {
+    name: 'edit-load',
+    path: '/edit-load',
+    component: () => import('../views/demo/edit-load.vue')
+  },
+  {
+    name: 'custom-toolbar',
+    path: '/custom-toolbar',
+    component: () => import('../views/demo/custom-toolbar.vue')
+  },
+  {
+    name: 'preview-test',
+    path: '/preview-test',
+    component: () => import('../views/demo/preview-test.vue')
+  },
+  {
+    name: 'set-node-attr',
+    path: '/set-node-attr',
+    component: () => import('../views/demo/set-node-attr.vue')
   }
 ];
 const router = createRouter({
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 5207d32..3db19e7 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -299,3 +299,19 @@ export const prosToVBind = (item: IConfigItem) => {
   }
   return temp;
 };
+export const setArrItemByID = (id: string, key: string, val: any, json_arr: IDoneJson[]) => {
+  return new Promise((res) => {
+    const find_item = json_arr.find((f) => f.id === id);
+    if (!find_item) {
+      res({
+        status: false,
+        msg: '要设置的id不存在'
+      });
+    }
+    eval(`find_item.${key} = val;`);
+    res({
+      status: true,
+      msg: '操作成功'
+    });
+  });
+};
diff --git a/src/views/demo/custom-toolbar.vue b/src/views/demo/custom-toolbar.vue
new file mode 100644
index 0000000..461d74d
--- /dev/null
+++ b/src/views/demo/custom-toolbar.vue
@@ -0,0 +1,231 @@
+<template>
+  <webtopo-svg-edit
+    @on-return="onReturn"
+    @on-preview="onPreview"
+    @on-save="onSave"
+    :custom-tool-bar="setCustomToolBar"
+  ></webtopo-svg-edit>
+</template>
+<script setup lang="ts">
+  // import { ref } from 'vue';
+  import { IDataModel } from '@/components/webtopo-svg-edit/types';
+  import { ref } from 'vue';
+  // import { ref } from 'vue';
+  import { useRouter } from 'vue-router';
+  import WebtopoSvgEdit from '../../components/webtopo-svg-edit/index.vue';
+  const setCustomToolBar = ref<any>({
+    测试注入组件: [
+      {
+        groupType: 'element-ui',
+        title: 'element-ui',
+        list: [
+          {
+            name: 'el-button',
+            tag: 'el-button',
+            title: '按钮',
+            type: 'Vue',
+            config: {
+              can_zoom: true,
+              have_anchor: true,
+              actual_rect: true
+            },
+            display: true,
+            props: {
+              size: {
+                title: '尺寸',
+                type: 'Select',
+                val: 'default',
+                options: [
+                  {
+                    label: '大',
+                    value: 'large'
+                  },
+                  {
+                    label: '默认',
+                    value: 'default'
+                  },
+                  {
+                    label: '小',
+                    value: 'small'
+                  }
+                ]
+              },
+              type: {
+                title: '类型',
+                type: 'Select',
+                val: 'primary',
+                options: [
+                  {
+                    label: '主要按钮',
+                    value: 'primary'
+                  },
+                  {
+                    label: '成功按钮',
+                    value: 'success'
+                  },
+                  {
+                    label: '警告按钮',
+                    value: 'warning'
+                  },
+                  {
+                    label: '危险按钮',
+                    value: 'danger'
+                  },
+                  {
+                    label: '信息按钮',
+                    value: 'info'
+                  }
+                ]
+              },
+              plain: {
+                title: '朴素按钮',
+                type: 'Switch',
+                val: false
+              },
+              text: {
+                title: '文字按钮',
+                type: 'Switch',
+                val: false
+              }
+            },
+            tag_slot: '按钮'
+          }
+        ]
+      },
+      {
+        groupType: 'custom-vue',
+        title: '自定义',
+        list: [
+          {
+            name: 'custom-vue-common-table',
+            title: '通用表格',
+            tag: 'custom-vue-common-table',
+            type: 'Vue',
+            config: {
+              can_zoom: true,
+              have_anchor: true,
+              actual_rect: true
+            },
+            display: true,
+            props: {
+              'col-config': {
+                title: '列配置',
+                type: 'JsonEdit',
+                val: [
+                  {
+                    prop: 'date',
+                    label: '第一列',
+                    width: '120px',
+                    fixed: false,
+                    sortable: false,
+                    'show-overflow-tooltip': false
+                  },
+                  {
+                    prop: 'name',
+                    label: '第二列',
+                    width: '120px',
+                    fixed: false,
+                    sortable: false,
+                    'show-overflow-tooltip': false
+                  },
+                  {
+                    prop: 'address',
+                    label: '第三列测试',
+                    width: '280px',
+                    fixed: false,
+                    sortable: false,
+                    'show-overflow-tooltip': false
+                  }
+                ]
+              },
+              data: {
+                title: '表格数据',
+                type: 'JsonEdit',
+                val: [
+                  {
+                    date: '2016-05-03',
+                    name: 'Tom',
+                    address: 'No. 189, Grove St, Los Angeles'
+                  },
+                  {
+                    date: '2016-05-02',
+                    name: 'Tom',
+                    address: 'No. 189, Grove St, Los Angeles'
+                  },
+                  {
+                    date: '2016-05-04',
+                    name: 'Tom',
+                    address: 'No. 189, Grove St, Los Angeles'
+                  },
+                  {
+                    date: '2016-05-01',
+                    name: 'Tom',
+                    address: 'No. 189, Grove St, Los Angeles'
+                  }
+                ]
+              },
+              height: {
+                title: '高度',
+                type: 'InputNumber',
+                val: null
+              },
+              'max-height': {
+                title: '最大高度',
+                type: 'InputNumber',
+                val: null
+              },
+              stripe: {
+                title: '斑马纹',
+                type: 'Switch',
+                val: false
+              },
+              border: {
+                title: '纵向边框',
+                type: 'Switch',
+                val: false
+              },
+              size: {
+                title: '尺寸',
+                type: 'Select',
+                val: 'default',
+                options: [
+                  {
+                    label: '大',
+                    value: 'large'
+                  },
+                  {
+                    label: '默认',
+                    value: 'default'
+                  },
+                  {
+                    label: '小',
+                    value: 'small'
+                  }
+                ]
+              },
+              fit: {
+                title: '列宽自撑开',
+                type: 'Switch',
+                val: false
+              }
+            }
+          }
+        ]
+      }
+    ]
+  });
+  const router = useRouter();
+  const onReturn = () => {
+    console.log('点击了返回按钮');
+    router.go(-1);
+  };
+  const onPreview = (data_model: IDataModel) => {
+    router.push({
+      name: 'preview',
+      params: { data_model: JSON.stringify(data_model) }
+    });
+  };
+  const onSave = (data_model: IDataModel) => {
+    console.log('点击了保存按钮，可以在此处将图存到数据库', data_model);
+  };
+</script>
diff --git a/src/views/demo/edit-load.vue b/src/views/demo/edit-load.vue
new file mode 100644
index 0000000..b8fae5a
--- /dev/null
+++ b/src/views/demo/edit-load.vue
@@ -0,0 +1,197 @@
+<template>
+  <webtopo-svg-edit
+    @on-return="onReturn"
+    @on-preview="onPreview"
+    @on-save="onSave"
+    :data-model="import_model"
+  ></webtopo-svg-edit>
+</template>
+<script setup lang="ts">
+  import { IDataModel } from '@/components/webtopo-svg-edit/types';
+  import { ref } from 'vue';
+  import { useRouter } from 'vue-router';
+  import WebtopoSvgEdit from '../../components/webtopo-svg-edit/index.vue';
+  //我是从数据库获取到的数据
+  const import_model = ref(
+    JSON.stringify({
+      layout_center: {
+        x: 0,
+        y: 0
+      },
+      config: {
+        background_color: '#fff',
+        scale: 1,
+        position_center: {
+          x: -295,
+          y: -95
+        },
+        svg_position_center: {
+          x: 50,
+          y: 50
+        }
+      },
+      done_json: [
+        {
+          id: 'circuit-breakerCuFTG7Iy6F',
+          x: 474,
+          y: 226,
+          client: {
+            x: 474,
+            y: 226
+          },
+          scale_x: 1,
+          scale_y: 1,
+          rotate: 0,
+          actual_bound: {
+            x: 23.1640625,
+            y: 19.375,
+            width: 61.201171875,
+            height: 64.033203125
+          },
+          point_coordinate: {
+            tl: {
+              x: 443.3994140625,
+              y: 193.9833984375
+            },
+            tc: {
+              x: 474,
+              y: 193.9833984375
+            },
+            tr: {
+              x: 504.6005859375,
+              y: 193.9833984375
+            },
+            l: {
+              x: 443.3994140625,
+              y: 226
+            },
+            r: {
+              x: 504.6005859375,
+              y: 226
+            },
+            bl: {
+              x: 443.3994140625,
+              y: 258.0166015625
+            },
+            bc: {
+              x: 474,
+              y: 258.0166015625
+            },
+            br: {
+              x: 504.6005859375,
+              y: 258.0166015625
+            }
+          },
+          name: 'circuit-breaker',
+          title: '断路器',
+          type: 'File',
+          config: {
+            can_zoom: true,
+            have_anchor: true,
+            actual_rect: true
+          },
+          display: true,
+          props: {},
+          state: {
+            OnOff: {
+              title: '开关',
+              default: false,
+              props: {
+                fill: {
+                  openVal: '#00ff00',
+                  closeVal: '#ff0000'
+                },
+                'fill-opacity': {
+                  openVal: '0',
+                  closeVal: '1'
+                }
+              }
+            }
+          }
+        },
+        {
+          id: 'traction-transformer9nzBE9dPxm',
+          x: 666,
+          y: 170,
+          client: {
+            x: 666,
+            y: 170
+          },
+          scale_x: 1,
+          scale_y: 1,
+          rotate: 0,
+          actual_bound: {
+            x: 35.416664123535156,
+            y: 22.916667938232422,
+            width: 26.858333587646484,
+            height: 54.16874313354492
+          },
+          point_coordinate: {
+            tl: {
+              x: 652.5708332061768,
+              y: 142.91562843322754
+            },
+            tc: {
+              x: 666,
+              y: 142.91562843322754
+            },
+            tr: {
+              x: 679.4291667938232,
+              y: 142.91562843322754
+            },
+            l: {
+              x: 652.5708332061768,
+              y: 170
+            },
+            r: {
+              x: 679.4291667938232,
+              y: 170
+            },
+            bl: {
+              x: 652.5708332061768,
+              y: 197.08437156677246
+            },
+            bc: {
+              x: 666,
+              y: 197.08437156677246
+            },
+            br: {
+              x: 679.4291667938232,
+              y: 197.08437156677246
+            }
+          },
+          name: 'traction-transformer',
+          title: '牵引变',
+          type: 'File',
+          config: {
+            can_zoom: true,
+            have_anchor: true,
+            actual_rect: true
+          },
+          display: true,
+          props: {
+            fill: {
+              title: '填充色',
+              type: 'Color',
+              val: '#ff0000'
+            }
+          }
+        }
+      ]
+    })
+  );
+  const router = useRouter();
+  const onReturn = () => {
+    console.log('点击了返回按钮');
+    router.go(-1);
+  };
+  const onPreview = (data_model: IDataModel) => {
+    router.push({
+      name: 'preview',
+      params: { data_model: JSON.stringify(data_model) }
+    });
+  };
+  const onSave = (data_model: IDataModel) => {
+    console.log('点击了保存按钮，可以在此处将图存到数据库', data_model);
+  };
+</script>
diff --git a/src/views/demo/index.vue b/src/views/demo/index.vue
new file mode 100644
index 0000000..f519c6a
--- /dev/null
+++ b/src/views/demo/index.vue
@@ -0,0 +1,94 @@
+<!-- eslint-disable vue/html-indent -->
+<template>
+  <div>
+    <div class="flex justify-center">
+      <div>
+        <p class="mt-5">webtopo-svg-edit demo演示页面</p>
+      </div>
+    </div>
+    <div class="flex mt-10px justify-center h-[calc(100vh-100px)]">
+      <el-button
+        type="primary"
+        link
+        v-for="item in button_list"
+        :key="item.name"
+        :title="item.title"
+        @click="item.onClick"
+        style="height: 20px"
+        >{{ item.name }}</el-button
+      >
+    </div>
+    <div class="h-40px bottom-el-footer">
+      <bottom-panel></bottom-panel>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+  import { ElButton } from 'element-plus';
+  import { reactive } from 'vue';
+  import { useRouter } from 'vue-router';
+  import BottomPanel from '@/components/webtopo-svg-edit/components/bottom-panel/index.vue';
+  const router = useRouter();
+  const button_list: IButtonList[] = reactive([
+    {
+      name: '编辑器页面',
+      title: '基础功能之编辑器页面',
+      onClick: () => {
+        router.push({
+          name: 'edit',
+          params: {}
+        });
+      }
+    },
+    {
+      name: '编辑器(加载已有数据)',
+      title: '模拟从数据库加载数据',
+      onClick: () => {
+        router.push({
+          name: 'edit-load',
+          params: {}
+        });
+      }
+    },
+    {
+      name: '自定义左侧组件库',
+      title: '用自己的组件库替换现有组件库，一般是集成到自己项目时使用',
+      onClick: () => {
+        router.push({
+          name: 'custom-toolbar',
+          params: {}
+        });
+      }
+    },
+    {
+      name: '加载保存好的页面',
+      title: '模拟从数据库加载数据',
+      onClick: () => {
+        router.push({
+          name: 'preview-test',
+          params: {}
+        });
+      }
+    },
+    {
+      name: '设置节点属性',
+      title: '从插件外部设置节点属性',
+      onClick: () => {
+        router.push({
+          name: 'set-node-attr',
+          params: {}
+        });
+      }
+    }
+  ]);
+  interface IButtonList {
+    name: string;
+    title: string;
+    onClick: () => void;
+  }
+</script>
+<style scoped>
+  .bottom-el-footer {
+    box-shadow: 0px -1px 0px 0px #dfcfcf;
+  }
+</style>
diff --git a/src/views/demo/preview-test.vue b/src/views/demo/preview-test.vue
new file mode 100644
index 0000000..9bfea99
--- /dev/null
+++ b/src/views/demo/preview-test.vue
@@ -0,0 +1,1206 @@
+<template>
+  <webtopo-svg-preview :data-model="data_model" :canvas-drag="true"></webtopo-svg-preview>
+</template>
+<script setup lang="ts">
+  import WebtopoSvgPreview from '@/components/webtopo-svg-preview/index.vue';
+
+  import { ref } from 'vue';
+  //假装我是接口返回的
+  const data_model = ref<any>({
+    layout_center: {
+      x: -29,
+      y: 17
+    },
+    config: {
+      background_color: '#fff',
+      scale: 1,
+      position_center: {
+        x: -295,
+        y: -95
+      },
+      svg_position_center: {
+        x: 50,
+        y: 50
+      }
+    },
+    done_json: [
+      {
+        id: 'circuit-breaker5AWZnim3r6',
+        x: 412,
+        y: 154,
+        client: {
+          x: 412,
+          y: 154
+        },
+        scale_x: 1,
+        scale_y: 1,
+        rotate: 0,
+        actual_bound: {
+          x: 23.1640625,
+          y: 19.375,
+          width: 61.201171875,
+          height: 64.033203125
+        },
+        point_coordinate: {
+          tl: {
+            x: 381.3994140625,
+            y: 121.9833984375
+          },
+          tc: {
+            x: 412,
+            y: 121.9833984375
+          },
+          tr: {
+            x: 442.6005859375,
+            y: 121.9833984375
+          },
+          l: {
+            x: 381.3994140625,
+            y: 154
+          },
+          r: {
+            x: 442.6005859375,
+            y: 154
+          },
+          bl: {
+            x: 381.3994140625,
+            y: 186.0166015625
+          },
+          bc: {
+            x: 412,
+            y: 186.0166015625
+          },
+          br: {
+            x: 442.6005859375,
+            y: 186.0166015625
+          }
+        },
+        name: 'circuit-breaker',
+        title: '断路器',
+        type: 'File',
+        config: {
+          can_zoom: true,
+          have_anchor: true,
+          actual_rect: true
+        },
+        display: true,
+        props: {},
+        state: {
+          OnOff: {
+            title: '开关',
+            default: false,
+            props: {
+              fill: {
+                openVal: '#00ff00',
+                closeVal: '#ff0000'
+              },
+              'fill-opacity': {
+                openVal: '0',
+                closeVal: '1'
+              }
+            }
+          }
+        }
+      },
+      {
+        id: 'circuit-breakerCeyE17C7Ib',
+        x: 696,
+        y: 144,
+        client: {
+          x: 696,
+          y: 144
+        },
+        scale_x: 1,
+        scale_y: 1,
+        rotate: 0,
+        actual_bound: {
+          x: 23.1640625,
+          y: 19.375,
+          width: 61.201171875,
+          height: 64.033203125
+        },
+        point_coordinate: {
+          tl: {
+            x: 665.3994140625,
+            y: 111.9833984375
+          },
+          tc: {
+            x: 696,
+            y: 111.9833984375
+          },
+          tr: {
+            x: 726.6005859375,
+            y: 111.9833984375
+          },
+          l: {
+            x: 665.3994140625,
+            y: 144
+          },
+          r: {
+            x: 726.6005859375,
+            y: 144
+          },
+          bl: {
+            x: 665.3994140625,
+            y: 176.0166015625
+          },
+          bc: {
+            x: 696,
+            y: 176.0166015625
+          },
+          br: {
+            x: 726.6005859375,
+            y: 176.0166015625
+          }
+        },
+        name: 'circuit-breaker',
+        title: '断路器',
+        type: 'File',
+        config: {
+          can_zoom: true,
+          have_anchor: true,
+          actual_rect: true
+        },
+        display: true,
+        props: {},
+        state: {
+          OnOff: {
+            title: '开关',
+            default: false,
+            props: {
+              fill: {
+                openVal: '#00ff00',
+                closeVal: '#ff0000'
+              },
+              'fill-opacity': {
+                openVal: '0',
+                closeVal: '1'
+              }
+            }
+          }
+        }
+      },
+      {
+        id: 'straight-lineGUyEi2THVC',
+        x: 442.6005859375,
+        y: 154,
+        client: {
+          x: 447,
+          y: 158
+        },
+        scale_x: 1,
+        scale_y: 1,
+        rotate: 0,
+        actual_bound: {
+          x: 50,
+          y: 50,
+          width: 0,
+          height: 0
+        },
+        point_coordinate: {
+          tl: {
+            x: 442.6005859375,
+            y: 154
+          },
+          tc: {
+            x: 442.6005859375,
+            y: 154
+          },
+          tr: {
+            x: 442.6005859375,
+            y: 154
+          },
+          l: {
+            x: 442.6005859375,
+            y: 154
+          },
+          r: {
+            x: 442.6005859375,
+            y: 154
+          },
+          bl: {
+            x: 442.6005859375,
+            y: 154
+          },
+          bc: {
+            x: 442.6005859375,
+            y: 154
+          },
+          br: {
+            x: 442.6005859375,
+            y: 154
+          }
+        },
+        name: 'connection_line',
+        title: '连接线',
+        type: 'ConnectionLine',
+        config: {
+          can_zoom: false,
+          have_anchor: false,
+          actual_rect: false
+        },
+        display: true,
+        props: {
+          stroke: {
+            title: '线条颜色',
+            type: 'Color',
+            val: '#ff0000'
+          },
+          'stroke-width': {
+            title: '线条宽度',
+            type: 'InputNumber',
+            val: 2
+          },
+          point_position: {
+            title: '点坐标',
+            type: 'JsonEdit',
+            val: [
+              {
+                x: 50,
+                y: 50
+              },
+              {
+                x: 274,
+                y: 39
+              }
+            ]
+          }
+        },
+        animations: {
+          type: {
+            title: '动画类型',
+            type: 'Select',
+            val: 'Electricity',
+            options: [
+              {
+                label: '无',
+                value: 'None'
+              },
+              {
+                label: '电流',
+                value: 'Electricity'
+              },
+              {
+                label: '轨迹',
+                value: 'Track'
+              },
+              {
+                label: '水珠',
+                value: 'WaterDrop'
+              }
+            ]
+          },
+          dur: {
+            title: '持续时间',
+            type: 'InputNumber',
+            val: 20
+          },
+          repeatCount: {
+            title: '循环次数',
+            type: 'Input',
+            val: 'indefinite',
+            disabled: true
+          },
+          color: {
+            title: '颜色',
+            type: 'Color',
+            val: '#0a7ae2'
+          },
+          reverse: {
+            title: '反转动画',
+            type: 'Switch',
+            val: false
+          }
+        },
+        bind_anchors: {
+          start: {
+            type: 'Right',
+            target_id: 'circuit-breaker5AWZnim3r6'
+          },
+          end: null
+        }
+      },
+      {
+        id: 'straight-lineXORecx5dkM',
+        x: 665.3994140625,
+        y: 144,
+        client: {
+          x: 671,
+          y: 147
+        },
+        scale_x: 1,
+        scale_y: 1,
+        rotate: 0,
+        actual_bound: {
+          x: 50,
+          y: 50,
+          width: 0,
+          height: 0
+        },
+        point_coordinate: {
+          tl: {
+            x: 665.3994140625,
+            y: 144
+          },
+          tc: {
+            x: 665.3994140625,
+            y: 144
+          },
+          tr: {
+            x: 665.3994140625,
+            y: 144
+          },
+          l: {
+            x: 665.3994140625,
+            y: 144
+          },
+          r: {
+            x: 665.3994140625,
+            y: 144
+          },
+          bl: {
+            x: 665.3994140625,
+            y: 144
+          },
+          bc: {
+            x: 665.3994140625,
+            y: 144
+          },
+          br: {
+            x: 665.3994140625,
+            y: 144
+          }
+        },
+        name: 'connection_line',
+        title: '连接线',
+        type: 'ConnectionLine',
+        config: {
+          can_zoom: false,
+          have_anchor: false,
+          actual_rect: false
+        },
+        display: true,
+        props: {
+          stroke: {
+            title: '线条颜色',
+            type: 'Color',
+            val: '#ff0000'
+          },
+          'stroke-width': {
+            title: '线条宽度',
+            type: 'InputNumber',
+            val: 2
+          },
+          point_position: {
+            title: '点坐标',
+            type: 'JsonEdit',
+            val: [
+              {
+                x: 50,
+                y: 50
+              }
+            ]
+          }
+        },
+        animations: {
+          type: {
+            title: '动画类型',
+            type: 'Select',
+            val: 'None',
+            options: [
+              {
+                label: '无',
+                value: 'None'
+              },
+              {
+                label: '电流',
+                value: 'Electricity'
+              },
+              {
+                label: '轨迹',
+                value: 'Track'
+              },
+              {
+                label: '水珠',
+                value: 'WaterDrop'
+              }
+            ]
+          },
+          dur: {
+            title: '持续时间',
+            type: 'InputNumber',
+            val: 20
+          },
+          repeatCount: {
+            title: '循环次数',
+            type: 'Input',
+            val: 'indefinite',
+            disabled: true
+          },
+          color: {
+            title: '颜色',
+            type: 'Color',
+            val: '#0a7ae2'
+          },
+          reverse: {
+            title: '反转动画',
+            type: 'Switch',
+            val: false
+          }
+        },
+        bind_anchors: {
+          start: {
+            type: 'Left',
+            target_id: 'circuit-breakerCeyE17C7Ib'
+          },
+          end: null
+        }
+      },
+      {
+        id: 'alternator8fWE3IfvWE',
+        x: 504,
+        y: 398,
+        client: {
+          x: 504,
+          y: 398
+        },
+        scale_x: 1,
+        scale_y: 1,
+        rotate: 0,
+        actual_bound: {
+          x: 22.916664123535156,
+          y: 22.91666603088379,
+          width: 54.16667175292969,
+          height: 54.166664123535156
+        },
+        point_coordinate: {
+          tl: {
+            x: 476.91666412353516,
+            y: 370.9166679382324
+          },
+          tc: {
+            x: 504,
+            y: 370.9166679382324
+          },
+          tr: {
+            x: 531.0833358764648,
+            y: 370.9166679382324
+          },
+          l: {
+            x: 476.91666412353516,
+            y: 398
+          },
+          r: {
+            x: 531.0833358764648,
+            y: 398
+          },
+          bl: {
+            x: 476.91666412353516,
+            y: 425.0833320617676
+          },
+          bc: {
+            x: 504,
+            y: 425.0833320617676
+          },
+          br: {
+            x: 531.0833358764648,
+            y: 425.0833320617676
+          }
+        },
+        name: 'alternator',
+        title: '发电机',
+        type: 'File',
+        config: {
+          can_zoom: true,
+          have_anchor: true,
+          actual_rect: true
+        },
+        display: true,
+        props: {
+          fill: {
+            title: '填充色',
+            type: 'Color',
+            val: '#00ff00'
+          }
+        }
+      },
+      {
+        id: 'straight-lineyNa2CGSIjq',
+        x: 412,
+        y: 186.0166015625,
+        client: {
+          x: 419,
+          y: 187
+        },
+        scale_x: 1,
+        scale_y: 1,
+        rotate: 0,
+        actual_bound: {
+          x: 50,
+          y: 50,
+          width: 0,
+          height: 0
+        },
+        point_coordinate: {
+          tl: {
+            x: 412,
+            y: 186.0166015625
+          },
+          tc: {
+            x: 412,
+            y: 186.0166015625
+          },
+          tr: {
+            x: 412,
+            y: 186.0166015625
+          },
+          l: {
+            x: 412,
+            y: 186.0166015625
+          },
+          r: {
+            x: 412,
+            y: 186.0166015625
+          },
+          bl: {
+            x: 412,
+            y: 186.0166015625
+          },
+          bc: {
+            x: 412,
+            y: 186.0166015625
+          },
+          br: {
+            x: 412,
+            y: 186.0166015625
+          }
+        },
+        name: 'connection_line',
+        title: '连接线',
+        type: 'ConnectionLine',
+        config: {
+          can_zoom: false,
+          have_anchor: false,
+          actual_rect: false
+        },
+        display: true,
+        props: {
+          stroke: {
+            title: '线条颜色',
+            type: 'Color',
+            val: '#ff0000'
+          },
+          'stroke-width': {
+            title: '线条宽度',
+            type: 'InputNumber',
+            val: 2
+          },
+          point_position: {
+            title: '点坐标',
+            type: 'JsonEdit',
+            val: [
+              {
+                x: 50,
+                y: 50
+              },
+              {
+                x: 70,
+                y: 158
+              },
+              {
+                x: 167,
+                y: 96
+              },
+              {
+                x: 113,
+                y: 216
+              },
+              {
+                x: 137,
+                y: 232
+              }
+            ]
+          }
+        },
+        animations: {
+          type: {
+            title: '动画类型',
+            type: 'Select',
+            val: 'Track',
+            options: [
+              {
+                label: '无',
+                value: 'None'
+              },
+              {
+                label: '电流',
+                value: 'Electricity'
+              },
+              {
+                label: '轨迹',
+                value: 'Track'
+              },
+              {
+                label: '水珠',
+                value: 'WaterDrop'
+              }
+            ]
+          },
+          dur: {
+            title: '持续时间',
+            type: 'InputNumber',
+            val: 20
+          },
+          repeatCount: {
+            title: '循环次数',
+            type: 'Input',
+            val: 'indefinite',
+            disabled: true
+          },
+          color: {
+            title: '颜色',
+            type: 'Color',
+            val: '#0a7ae2'
+          },
+          reverse: {
+            title: '反转动画',
+            type: 'Switch',
+            val: false
+          }
+        },
+        bind_anchors: {
+          start: {
+            type: 'BottomCenter',
+            target_id: 'circuit-breaker5AWZnim3r6'
+          },
+          end: null
+        }
+      },
+      {
+        id: 'straight-line5N22jllLwB',
+        x: 504,
+        y: 370.9166679382324,
+        client: {
+          x: 506,
+          y: 369
+        },
+        scale_x: 1,
+        scale_y: 1,
+        rotate: 0,
+        actual_bound: {
+          x: 50,
+          y: 50,
+          width: 0,
+          height: 0
+        },
+        point_coordinate: {
+          tl: {
+            x: 504,
+            y: 370.9166679382324
+          },
+          tc: {
+            x: 504,
+            y: 370.9166679382324
+          },
+          tr: {
+            x: 504,
+            y: 370.9166679382324
+          },
+          l: {
+            x: 504,
+            y: 370.9166679382324
+          },
+          r: {
+            x: 504,
+            y: 370.9166679382324
+          },
+          bl: {
+            x: 504,
+            y: 370.9166679382324
+          },
+          bc: {
+            x: 504,
+            y: 370.9166679382324
+          },
+          br: {
+            x: 504,
+            y: 370.9166679382324
+          }
+        },
+        name: 'connection_line',
+        title: '连接线',
+        type: 'ConnectionLine',
+        config: {
+          can_zoom: false,
+          have_anchor: false,
+          actual_rect: false
+        },
+        display: true,
+        props: {
+          stroke: {
+            title: '线条颜色',
+            type: 'Color',
+            val: '#ff0000'
+          },
+          'stroke-width': {
+            title: '线条宽度',
+            type: 'InputNumber',
+            val: 2
+          },
+          point_position: {
+            title: '点坐标',
+            type: 'JsonEdit',
+            val: [
+              {
+                x: 50,
+                y: 50
+              }
+            ]
+          }
+        },
+        animations: {
+          type: {
+            title: '动画类型',
+            type: 'Select',
+            val: 'None',
+            options: [
+              {
+                label: '无',
+                value: 'None'
+              },
+              {
+                label: '电流',
+                value: 'Electricity'
+              },
+              {
+                label: '轨迹',
+                value: 'Track'
+              },
+              {
+                label: '水珠',
+                value: 'WaterDrop'
+              }
+            ]
+          },
+          dur: {
+            title: '持续时间',
+            type: 'InputNumber',
+            val: 20
+          },
+          repeatCount: {
+            title: '循环次数',
+            type: 'Input',
+            val: 'indefinite',
+            disabled: true
+          },
+          color: {
+            title: '颜色',
+            type: 'Color',
+            val: '#0a7ae2'
+          },
+          reverse: {
+            title: '反转动画',
+            type: 'Switch',
+            val: false
+          }
+        },
+        bind_anchors: {
+          start: {
+            type: 'TopCenter',
+            target_id: 'alternator8fWE3IfvWE'
+          },
+          end: null
+        }
+      },
+      {
+        id: 'traction-transformer4utrZz4hIc',
+        x: 803,
+        y: 326,
+        client: {
+          x: 803,
+          y: 326
+        },
+        scale_x: 1,
+        scale_y: 1,
+        rotate: 0,
+        actual_bound: {
+          x: 35.416664123535156,
+          y: 22.916667938232422,
+          width: 26.858333587646484,
+          height: 54.16874313354492
+        },
+        point_coordinate: {
+          tl: {
+            x: 789.5708332061768,
+            y: 298.91562843322754
+          },
+          tc: {
+            x: 803,
+            y: 298.91562843322754
+          },
+          tr: {
+            x: 816.4291667938232,
+            y: 298.91562843322754
+          },
+          l: {
+            x: 789.5708332061768,
+            y: 326
+          },
+          r: {
+            x: 816.4291667938232,
+            y: 326
+          },
+          bl: {
+            x: 789.5708332061768,
+            y: 353.08437156677246
+          },
+          bc: {
+            x: 803,
+            y: 353.08437156677246
+          },
+          br: {
+            x: 816.4291667938232,
+            y: 353.08437156677246
+          }
+        },
+        name: 'traction-transformer',
+        title: '牵引变',
+        type: 'File',
+        config: {
+          can_zoom: true,
+          have_anchor: true,
+          actual_rect: true
+        },
+        display: true,
+        props: {
+          fill: {
+            title: '填充色',
+            type: 'Color',
+            val: '#ff0000'
+          }
+        }
+      },
+      {
+        id: 'straight-lineRNS1ttG2xy',
+        x: 696,
+        y: 176.0166015625,
+        client: {
+          x: 696,
+          y: 176.0166015625
+        },
+        scale_x: 1,
+        scale_y: 1,
+        rotate: 0,
+        actual_bound: {
+          x: 50,
+          y: 50,
+          width: 0,
+          height: 0
+        },
+        point_coordinate: {
+          tl: {
+            x: 617,
+            y: 20.5166015625
+          },
+          tc: {
+            x: 696,
+            y: 20.5166015625
+          },
+          tr: {
+            x: 775,
+            y: 20.5166015625
+          },
+          l: {
+            x: 617,
+            y: 176.0166015625
+          },
+          r: {
+            x: 775,
+            y: 176.0166015625
+          },
+          bl: {
+            x: 617,
+            y: 331.5166015625
+          },
+          bc: {
+            x: 696,
+            y: 331.5166015625
+          },
+          br: {
+            x: 775,
+            y: 331.5166015625
+          }
+        },
+        name: 'connection_line',
+        title: '连接线',
+        type: 'ConnectionLine',
+        config: {
+          can_zoom: false,
+          have_anchor: false,
+          actual_rect: false
+        },
+        display: true,
+        props: {
+          stroke: {
+            title: '线条颜色',
+            type: 'Color',
+            val: '#ff0000'
+          },
+          'stroke-width': {
+            title: '线条宽度',
+            type: 'InputNumber',
+            val: 2
+          },
+          point_position: {
+            title: '点坐标',
+            type: 'JsonEdit',
+            val: [
+              {
+                x: 50,
+                y: 50
+              },
+              {
+                x: 204,
+                y: 47
+              },
+              {
+                x: 46,
+                y: 291
+              },
+              {
+                x: 188,
+                y: 358
+              }
+            ]
+          }
+        },
+        animations: {
+          type: {
+            title: '动画类型',
+            type: 'Select',
+            val: 'WaterDrop',
+            options: [
+              {
+                label: '无',
+                value: 'None'
+              },
+              {
+                label: '电流',
+                value: 'Electricity'
+              },
+              {
+                label: '轨迹',
+                value: 'Track'
+              },
+              {
+                label: '水珠',
+                value: 'WaterDrop'
+              }
+            ]
+          },
+          dur: {
+            title: '持续时间',
+            type: 'InputNumber',
+            val: 20
+          },
+          repeatCount: {
+            title: '循环次数',
+            type: 'Input',
+            val: 'indefinite',
+            disabled: true
+          },
+          color: {
+            title: '颜色',
+            type: 'Color',
+            val: '#0a7ae2'
+          },
+          reverse: {
+            title: '反转动画',
+            type: 'Switch',
+            val: false
+          }
+        },
+        bind_anchors: {
+          start: {
+            type: 'BottomCenter',
+            target_id: 'circuit-breakerCeyE17C7Ib'
+          },
+          end: null
+        }
+      },
+      {
+        id: 'reservoirrFSCTkvgJx',
+        x: 838,
+        y: 529,
+        client: {
+          x: 838,
+          y: 529
+        },
+        scale_x: 1,
+        scale_y: 1,
+        rotate: 0,
+        actual_bound: {
+          x: 8.310546875,
+          y: 12.607422828674316,
+          width: 83.37890625,
+          height: 76.37694549560547
+        },
+        point_coordinate: {
+          tl: {
+            x: 796.310546875,
+            y: 490.81152725219727
+          },
+          tc: {
+            x: 838,
+            y: 490.81152725219727
+          },
+          tr: {
+            x: 879.689453125,
+            y: 490.81152725219727
+          },
+          l: {
+            x: 796.310546875,
+            y: 529
+          },
+          r: {
+            x: 879.689453125,
+            y: 529
+          },
+          bl: {
+            x: 796.310546875,
+            y: 567.1884727478027
+          },
+          bc: {
+            x: 838,
+            y: 567.1884727478027
+          },
+          br: {
+            x: 879.689453125,
+            y: 567.1884727478027
+          }
+        },
+        name: 'reservoir',
+        title: '蓄水池',
+        type: 'File',
+        config: {
+          can_zoom: true,
+          have_anchor: true,
+          actual_rect: true
+        },
+        display: true,
+        props: {
+          fill: {
+            title: '水流颜色',
+            type: 'Color',
+            val: '#37cfe7'
+          },
+          stroke: {
+            title: '边框颜色',
+            type: 'Color',
+            val: '#000'
+          }
+        }
+      },
+      {
+        id: 'pie-chartsAKReNdbYgt',
+        x: 1174,
+        y: 355,
+        client: {
+          x: 1174,
+          y: 355
+        },
+        scale_x: 4.26,
+        scale_y: 1,
+        rotate: 0,
+        actual_bound: {
+          x: 0,
+          y: -150,
+          width: 100,
+          height: 400
+        },
+        point_coordinate: {
+          tl: {
+            x: 266.62,
+            y: 155
+          },
+          tc: {
+            x: 1174,
+            y: 155
+          },
+          tr: {
+            x: 2081.38,
+            y: 155
+          },
+          l: {
+            x: 266.62,
+            y: 355
+          },
+          r: {
+            x: 2081.38,
+            y: 355
+          },
+          bl: {
+            x: 266.62,
+            y: 555
+          },
+          bc: {
+            x: 1174,
+            y: 555
+          },
+          br: {
+            x: 2081.38,
+            y: 555
+          }
+        },
+        name: 'pie-charts',
+        tag: 'pie-charts',
+        title: '饼图',
+        type: 'Vue',
+        config: {
+          can_zoom: true,
+          have_anchor: true,
+          actual_rect: true
+        },
+        display: true,
+        props: {
+          title: {
+            title: '标题',
+            type: 'Input',
+            val: '默认标题'
+          },
+          seriesName: {
+            title: '详情',
+            type: 'Input',
+            val: '详情标题'
+          },
+          seriesData: {
+            title: 'legendData',
+            type: 'JsonEdit',
+            val: [
+              {
+                value: 1048,
+                name: '办公楼A'
+              },
+              {
+                value: 735,
+                name: '办公楼B'
+              },
+              {
+                value: 580,
+                name: '保安室'
+              },
+              {
+                value: 484,
+                name: '地下车库'
+              },
+              {
+                value: 300,
+                name: '食堂'
+              }
+            ]
+          }
+        }
+      }
+    ]
+  });
+</script>
diff --git a/src/views/demo/set-node-attr.vue b/src/views/demo/set-node-attr.vue
new file mode 100644
index 0000000..564bbfc
--- /dev/null
+++ b/src/views/demo/set-node-attr.vue
@@ -0,0 +1,130 @@
+<!-- eslint-disable vue/html-indent -->
+<template>
+  <div>
+    <el-button @click="openTest">打开开关</el-button>
+    <el-button @click="closeTest">关闭开关</el-button>
+    <webtopo-svg-preview
+      ref="svgPreviewRef"
+      :data-model="data_model"
+      :canvas-drag="true"
+    ></webtopo-svg-preview>
+  </div>
+</template>
+<script setup lang="ts">
+  import WebtopoSvgPreview from '@/components/webtopo-svg-preview/index.vue';
+  import { ElButton } from 'element-plus';
+  import { ref } from 'vue';
+  const svgPreviewRef = ref<InstanceType<typeof WebtopoSvgPreview>>();
+  const data_model = ref<any>({
+    layout_center: {
+      x: 0,
+      y: 0
+    },
+    config: {
+      background_color: '#fff',
+      scale: 1,
+      position_center: {
+        x: -295,
+        y: -95
+      },
+      svg_position_center: {
+        x: 50,
+        y: 50
+      }
+    },
+    done_json: [
+      {
+        id: 'circuit-breakerCkjuZ7Ql9C',
+        x: 471,
+        y: 222,
+        client: {
+          x: 471,
+          y: 222
+        },
+        scale_x: 1,
+        scale_y: 1,
+        rotate: 0,
+        actual_bound: {
+          x: 23.1640625,
+          y: 19.375,
+          width: 61.201171875,
+          height: 64.033203125
+        },
+        point_coordinate: {
+          tl: {
+            x: 440.3994140625,
+            y: 189.9833984375
+          },
+          tc: {
+            x: 471,
+            y: 189.9833984375
+          },
+          tr: {
+            x: 501.6005859375,
+            y: 189.9833984375
+          },
+          l: {
+            x: 440.3994140625,
+            y: 222
+          },
+          r: {
+            x: 501.6005859375,
+            y: 222
+          },
+          bl: {
+            x: 440.3994140625,
+            y: 254.0166015625
+          },
+          bc: {
+            x: 471,
+            y: 254.0166015625
+          },
+          br: {
+            x: 501.6005859375,
+            y: 254.0166015625
+          }
+        },
+        name: 'circuit-breaker',
+        title: '断路器',
+        type: 'File',
+        config: {
+          can_zoom: true,
+          have_anchor: true,
+          actual_rect: true
+        },
+        display: true,
+        props: {},
+        state: {
+          OnOff: {
+            title: '开关',
+            default: false,
+            props: {
+              fill: {
+                openVal: '#00ff00',
+                closeVal: '#ff0000'
+              },
+              'fill-opacity': {
+                openVal: '0',
+                closeVal: '1'
+              }
+            }
+          }
+        }
+      }
+    ]
+  });
+  const openTest = () => {
+    svgPreviewRef.value
+      ?.setNodeAttrByID('circuit-breakerCkjuZ7Ql9C', 'state.OnOff.default', true)
+      .then((res) => {
+        console.log(res);
+      });
+  };
+  const closeTest = () => {
+    svgPreviewRef.value
+      ?.setNodeAttrByID('circuit-breakerCkjuZ7Ql9C', 'state.OnOff.default', false)
+      .then((res) => {
+        console.log(res);
+      });
+  };
+</script>
diff --git a/src/views/edit/index.vue b/src/views/edit/index.vue
index b1746a1..71607c3 100644
--- a/src/views/edit/index.vue
+++ b/src/views/edit/index.vue
@@ -6,383 +6,13 @@
   ></webtopo-svg-edit>
 </template>
 <script setup lang="ts">
-  // import { ref } from 'vue';
   import { IDataModel } from '@/components/webtopo-svg-edit/types';
-  // import { ref } from 'vue';
   import { useRouter } from 'vue-router';
   import WebtopoSvgEdit from '../../components/webtopo-svg-edit/index.vue';
-  // const setCustomToolBar = ref({
-  //   测试注入组件: [
-  //     {
-  //       groupType: 'element-ui',
-  //       title: 'element-ui',
-  //       list: [
-  //         {
-  //           name: 'el-button',
-  //           tag: 'el-button',
-  //           title: '按钮',
-  //           type: 'Vue',
-  //           config: {
-  //             can_zoom: true,
-  //             have_anchor: true,
-  //             actual_rect: true
-  //           },
-  //           display: true,
-  //           props: {
-  //             size: {
-  //               title: '尺寸',
-  //               type: 'Select',
-  //               val: 'default',
-  //               options: [
-  //                 {
-  //                   label: '大',
-  //                   value: 'large'
-  //                 },
-  //                 {
-  //                   label: '默认',
-  //                   value: 'default'
-  //                 },
-  //                 {
-  //                   label: '小',
-  //                   value: 'small'
-  //                 }
-  //               ]
-  //             },
-  //             type: {
-  //               title: '类型',
-  //               type: 'Select',
-  //               val: 'primary',
-  //               options: [
-  //                 {
-  //                   label: '主要按钮',
-  //                   value: 'primary'
-  //                 },
-  //                 {
-  //                   label: '成功按钮',
-  //                   value: 'success'
-  //                 },
-  //                 {
-  //                   label: '警告按钮',
-  //                   value: 'warning'
-  //                 },
-  //                 {
-  //                   label: '危险按钮',
-  //                   value: 'danger'
-  //                 },
-  //                 {
-  //                   label: '信息按钮',
-  //                   value: 'info'
-  //                 }
-  //               ]
-  //             },
-  //             plain: {
-  //               title: '朴素按钮',
-  //               type: 'Switch',
-  //               val: false
-  //             },
-  //             text: {
-  //               title: '文字按钮',
-  //               type: 'Switch',
-  //               val: false
-  //             }
-  //           },
-  //           tag_slot: '按钮'
-  //         }
-  //       ]
-  //     },
-  //     {
-  //       groupType: 'custom-vue',
-  //       title: '自定义',
-  //       list: [
-  //         {
-  //           name: 'custom-vue-common-table',
-  //           title: '通用表格',
-  //           tag: 'custom-vue-common-table',
-  //           type: 'Vue',
-  //           config: {
-  //             can_zoom: true,
-  //             have_anchor: true,
-  //             actual_rect: true
-  //           },
-  //           display: true,
-  //           props: {
-  //             'col-config': {
-  //               title: '列配置',
-  //               type: 'JsonEdit',
-  //               val: [
-  //                 {
-  //                   prop: 'date',
-  //                   label: '第一列',
-  //                   width: '120px',
-  //                   fixed: false,
-  //                   sortable: false,
-  //                   'show-overflow-tooltip': false
-  //                 },
-  //                 {
-  //                   prop: 'name',
-  //                   label: '第二列',
-  //                   width: '120px',
-  //                   fixed: false,
-  //                   sortable: false,
-  //                   'show-overflow-tooltip': false
-  //                 },
-  //                 {
-  //                   prop: 'address',
-  //                   label: '第三列测试',
-  //                   width: '280px',
-  //                   fixed: false,
-  //                   sortable: false,
-  //                   'show-overflow-tooltip': false
-  //                 }
-  //               ]
-  //             },
-  //             data: {
-  //               title: '表格数据',
-  //               type: 'JsonEdit',
-  //               val: [
-  //                 {
-  //                   date: '2016-05-03',
-  //                   name: 'Tom',
-  //                   address: 'No. 189, Grove St, Los Angeles'
-  //                 },
-  //                 {
-  //                   date: '2016-05-02',
-  //                   name: 'Tom',
-  //                   address: 'No. 189, Grove St, Los Angeles'
-  //                 },
-  //                 {
-  //                   date: '2016-05-04',
-  //                   name: 'Tom',
-  //                   address: 'No. 189, Grove St, Los Angeles'
-  //                 },
-  //                 {
-  //                   date: '2016-05-01',
-  //                   name: 'Tom',
-  //                   address: 'No. 189, Grove St, Los Angeles'
-  //                 }
-  //               ]
-  //             },
-  //             height: {
-  //               title: '高度',
-  //               type: 'InputNumber',
-  //               val: null
-  //             },
-  //             'max-height': {
-  //               title: '最大高度',
-  //               type: 'InputNumber',
-  //               val: null
-  //             },
-  //             stripe: {
-  //               title: '斑马纹',
-  //               type: 'Switch',
-  //               val: false
-  //             },
-  //             border: {
-  //               title: '纵向边框',
-  //               type: 'Switch',
-  //               val: false
-  //             },
-  //             size: {
-  //               title: '尺寸',
-  //               type: 'Select',
-  //               val: 'default',
-  //               options: [
-  //                 {
-  //                   label: '大',
-  //                   value: 'large'
-  //                 },
-  //                 {
-  //                   label: '默认',
-  //                   value: 'default'
-  //                 },
-  //                 {
-  //                   label: '小',
-  //                   value: 'small'
-  //                 }
-  //               ]
-  //             },
-  //             fit: {
-  //               title: '列宽自撑开',
-  //               type: 'Switch',
-  //               val: false
-  //             }
-  //           }
-  //         }
-  //       ]
-  //     }
-  //   ]
-  // });
-  // const import_model = ref(
-  //   JSON.stringify({
-  //     layout_center: {
-  //       x: 0,
-  //       y: 0
-  //     },
-  //     config: {
-  //       background_color: '#fff',
-  //       scale: 1,
-  //       position_center: {
-  //         x: -295,
-  //         y: -95
-  //       },
-  //       svg_position_center: {
-  //         x: 50,
-  //         y: 50
-  //       }
-  //     },
-  //     done_json: [
-  //       {
-  //         id: 'circuit-breakerCuFTG7Iy6F',
-  //         x: 474,
-  //         y: 226,
-  //         client: {
-  //           x: 474,
-  //           y: 226
-  //         },
-  //         scale_x: 1,
-  //         scale_y: 1,
-  //         rotate: 0,
-  //         actual_bound: {
-  //           x: 23.1640625,
-  //           y: 19.375,
-  //           width: 61.201171875,
-  //           height: 64.033203125
-  //         },
-  //         point_coordinate: {
-  //           tl: {
-  //             x: 443.3994140625,
-  //             y: 193.9833984375
-  //           },
-  //           tc: {
-  //             x: 474,
-  //             y: 193.9833984375
-  //           },
-  //           tr: {
-  //             x: 504.6005859375,
-  //             y: 193.9833984375
-  //           },
-  //           l: {
-  //             x: 443.3994140625,
-  //             y: 226
-  //           },
-  //           r: {
-  //             x: 504.6005859375,
-  //             y: 226
-  //           },
-  //           bl: {
-  //             x: 443.3994140625,
-  //             y: 258.0166015625
-  //           },
-  //           bc: {
-  //             x: 474,
-  //             y: 258.0166015625
-  //           },
-  //           br: {
-  //             x: 504.6005859375,
-  //             y: 258.0166015625
-  //           }
-  //         },
-  //         name: 'circuit-breaker',
-  //         title: '断路器',
-  //         type: 'File',
-  //         config: {
-  //           can_zoom: true,
-  //           have_anchor: true,
-  //           actual_rect: true
-  //         },
-  //         display: true,
-  //         props: {},
-  //         state: {
-  //           OnOff: {
-  //             title: '开关',
-  //             default: false,
-  //             props: {
-  //               fill: {
-  //                 openVal: '#00ff00',
-  //                 closeVal: '#ff0000'
-  //               },
-  //               'fill-opacity': {
-  //                 openVal: '0',
-  //                 closeVal: '1'
-  //               }
-  //             }
-  //           }
-  //         }
-  //       },
-  //       {
-  //         id: 'traction-transformer9nzBE9dPxm',
-  //         x: 666,
-  //         y: 170,
-  //         client: {
-  //           x: 666,
-  //           y: 170
-  //         },
-  //         scale_x: 1,
-  //         scale_y: 1,
-  //         rotate: 0,
-  //         actual_bound: {
-  //           x: 35.416664123535156,
-  //           y: 22.916667938232422,
-  //           width: 26.858333587646484,
-  //           height: 54.16874313354492
-  //         },
-  //         point_coordinate: {
-  //           tl: {
-  //             x: 652.5708332061768,
-  //             y: 142.91562843322754
-  //           },
-  //           tc: {
-  //             x: 666,
-  //             y: 142.91562843322754
-  //           },
-  //           tr: {
-  //             x: 679.4291667938232,
-  //             y: 142.91562843322754
-  //           },
-  //           l: {
-  //             x: 652.5708332061768,
-  //             y: 170
-  //           },
-  //           r: {
-  //             x: 679.4291667938232,
-  //             y: 170
-  //           },
-  //           bl: {
-  //             x: 652.5708332061768,
-  //             y: 197.08437156677246
-  //           },
-  //           bc: {
-  //             x: 666,
-  //             y: 197.08437156677246
-  //           },
-  //           br: {
-  //             x: 679.4291667938232,
-  //             y: 197.08437156677246
-  //           }
-  //         },
-  //         name: 'traction-transformer',
-  //         title: '牵引变',
-  //         type: 'File',
-  //         config: {
-  //           can_zoom: true,
-  //           have_anchor: true,
-  //           actual_rect: true
-  //         },
-  //         display: true,
-  //         props: {
-  //           fill: {
-  //             title: '填充色',
-  //             type: 'Color',
-  //             val: '#ff0000'
-  //           }
-  //         }
-  //       }
-  //     ]
-  //   })
-  // );
   const router = useRouter();
   const onReturn = () => {
     console.log('点击了返回按钮');
+    router.go(-1);
   };
   const onPreview = (data_model: IDataModel) => {
     router.push({