From cd4d6cd99da87298142573ac4b547f3e049c8fc7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=92=AC=E8=BD=AE=E7=8C=AB?= <10928033@qq.com>
Date: Sun, 15 Jan 2023 18:02:22 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9C=89=E7=8A=B6=E6=80=81=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6demo?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/svgs/alternator.svg                | 10 +++----
 src/assets/svgs/circuit-breaker.svg           | 14 +++++++---
 src/assets/svgs/custom-svg-text.svg           |  2 +-
 src/assets/svgs/reservoir.svg                 |  2 +-
 src/assets/svgs/traction-transformer.svg      | 20 ++++++--------
 .../components/center-panel/index.vue         |  4 +--
 .../components/left-panel/index.vue           | 26 +++++--------------
 .../components/right-panel/index.vue          | 10 ++++++-
 .../stateful/circuit-breaker/index.ts         | 26 +++++++++----------
 src/config-center/types.ts                    |  8 ++++++
 src/utils/index.ts                            | 25 +++++++++++++++---
 11 files changed, 85 insertions(+), 62 deletions(-)

diff --git a/src/assets/svgs/alternator.svg b/src/assets/svgs/alternator.svg
index c18b07c..c6d97e4 100644
--- a/src/assets/svgs/alternator.svg
+++ b/src/assets/svgs/alternator.svg
@@ -1,8 +1,8 @@
 <?xml version="1.0" standalone="no"?>
-<svg t="1658190759246" class="icon" viewBox="0 0 1024 1024" version="1.1"
-    xmlns="http://www.w3.org/2000/svg" p-id="2410"
+<svg viewBox="0 0 1024 1024" version="1.1"
+    xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
-    <path d="M512 273.194667A238.805333 238.805333 0 1 1 273.194667 512 238.805333 238.805333 0 0 1 512 273.194667M512 234.666667a277.333333 277.333333 0 1 0 277.333333 277.333333 277.333333 277.333333 0 0 0-277.333333-277.333333z" p-id="2411"></path>
-    <path d="M675.157333 556.928a14.677333 14.677333 0 0 0-12.8 7.445333 96 96 0 0 1-137.109333 24.661334 125.098667 125.098667 0 0 0-188.032 24.149333 14.208 14.208 0 0 0-1.28 2.133333 5.802667 5.802667 0 0 0-0.661333 1.408 14.656 14.656 0 0 0 24.149333 15.68 6.272 6.272 0 0 0 1.28-1.493333 96.832 96.832 0 0 1 13.248-16.490667 95.765333 95.765333 0 0 1 124.629333-9.301333 125.077333 125.077333 0 0 0 189.269334-26.176 5.824 5.824 0 0 0 0.682666-1.493333 14.634667 14.634667 0 0 0-13.44-20.437334z" p-id="2412"></path>
-    <path d="M593.834667 444.778667l-12.8 1.557333c-0.192 13.674667-0.384 27.733333-0.384 43.2v9.621333a89.6 89.6 0 0 1-47.296 12.8 76.16 76.16 0 0 1 1.173333-152.277333 81.066667 81.066667 0 0 1 42.666667 10.666667l-0.405334 33.813333h-11.648l-8.213333-32.426667a41.088 41.088 0 0 0-18.965333-4.117333c-29.333333 0-50.837333 23.104-50.837334 68.053333 0 42.666667 20.714667 68.266667 49.642667 68.266667a65.088 65.088 0 0 0 17.792-2.304v-12.8c0-14.272-0.192-27.946667-0.597333-42.026667l-21.461334-2.133333v-6.848h61.376z" p-id="2413"></path>
+    <path d="M512 273.194667A238.805333 238.805333 0 1 1 273.194667 512 238.805333 238.805333 0 0 1 512 273.194667M512 234.666667a277.333333 277.333333 0 1 0 277.333333 277.333333 277.333333 277.333333 0 0 0-277.333333-277.333333z"></path>
+    <path d="M675.157333 556.928a14.677333 14.677333 0 0 0-12.8 7.445333 96 96 0 0 1-137.109333 24.661334 125.098667 125.098667 0 0 0-188.032 24.149333 14.208 14.208 0 0 0-1.28 2.133333 5.802667 5.802667 0 0 0-0.661333 1.408 14.656 14.656 0 0 0 24.149333 15.68 6.272 6.272 0 0 0 1.28-1.493333 96.832 96.832 0 0 1 13.248-16.490667 95.765333 95.765333 0 0 1 124.629333-9.301333 125.077333 125.077333 0 0 0 189.269334-26.176 5.824 5.824 0 0 0 0.682666-1.493333 14.634667 14.634667 0 0 0-13.44-20.437334z"></path>
+    <path d="M593.834667 444.778667l-12.8 1.557333c-0.192 13.674667-0.384 27.733333-0.384 43.2v9.621333a89.6 89.6 0 0 1-47.296 12.8 76.16 76.16 0 0 1 1.173333-152.277333 81.066667 81.066667 0 0 1 42.666667 10.666667l-0.405334 33.813333h-11.648l-8.213333-32.426667a41.088 41.088 0 0 0-18.965333-4.117333c-29.333333 0-50.837333 23.104-50.837334 68.053333 0 42.666667 20.714667 68.266667 49.642667 68.266667a65.088 65.088 0 0 0 17.792-2.304v-12.8c0-14.272-0.192-27.946667-0.597333-42.026667l-21.461334-2.133333v-6.848h61.376z"></path>
 </svg>
\ No newline at end of file
diff --git a/src/assets/svgs/circuit-breaker.svg b/src/assets/svgs/circuit-breaker.svg
index 1292c37..7801bc7 100644
--- a/src/assets/svgs/circuit-breaker.svg
+++ b/src/assets/svgs/circuit-breaker.svg
@@ -1,5 +1,11 @@
-<svg t="1658207779084" class="icon" viewBox="0 0 1024 1024" version="1.1"
-    xmlns="http://www.w3.org/2000/svg" p-id="1742"
-    xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
-    <rect width="150" height="300" x="437" y="362"/>
+<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="200"
+    height="200">
+    <path
+        d="M600.7,404.1v-16.7c0-13-5.5-25.9-16.4-33.3l-54.8-44.5c-5.5-5.6-9.1-13-9.1-20.4v-66.7c0-13-11-24.1-23.7-24.1
+        H260.9c-12.8,0-23.7,11.1-23.7,24.1v607.5c0,13,11,24.1,23.7,24.1h235.7c12.8,0,23.7-11.1,23.7-24.1v-35.2c0-14.8,11-25.9,25.6-25.9
+        h12.8c23.7,0,43.8-20.4,43.8-44.5V656c62.1-7.4,111.4-61.1,111.4-125.9c0-29.6-9.1-57.4-27.4-77.8
+        C675.4,430,626.2,407.8,600.7,404.1z M576.9,726.4h-1.8c0,9.3-7.3,18.5-18.3,18.5H544c-27.4,0-51.2,24.1-51.2,51.9v33.3H262.7V378.2
+        h124.2v231.5c0,7.4,5.5,13,12.8,13s12.8-5.6,12.8-13V365.2c0-7.4-5.5-13-12.8-13h-137V224.4h232v64.8c0,16.7,7.3,31.5,20.1,40.7
+        l54.8,44.5c3.7,3.7,7.3,9.3,7.3,13V726.4z M600.7,630.1V430c49.3,5.6,85.9,48.2,85.9,100C686.5,581.9,648.2,624.5,600.7,630.1z"  fill-opacity="1"/>
+    <polygon points="854.5,400.6 693.6,461.2 703,490.5 863.9,430"/>
 </svg>
\ No newline at end of file
diff --git a/src/assets/svgs/custom-svg-text.svg b/src/assets/svgs/custom-svg-text.svg
index ccc7b57..d9ecb6f 100644
--- a/src/assets/svgs/custom-svg-text.svg
+++ b/src/assets/svgs/custom-svg-text.svg
@@ -1,4 +1,4 @@
-<svg  class="icon" viewBox="0 0 1024 1024" version="1.1"
+<svg viewBox="0 0 1024 1024" version="1.1"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
    <text x="250" y="700" font-family="Microsoft YaHei" font-size="505" >文</text>
diff --git a/src/assets/svgs/reservoir.svg b/src/assets/svgs/reservoir.svg
index b45af15..a571ae6 100644
--- a/src/assets/svgs/reservoir.svg
+++ b/src/assets/svgs/reservoir.svg
@@ -1,4 +1,4 @@
-<svg t="1673619783393" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5654" width="200" height="200">
+<svg  viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"  width="200" height="200">
 	<rect x="0" y="155" width="1000" height="600" fill="#000000" stroke="#FFFFFF" stroke-width="4"></rect>
 	<line x1="80" y1="150" x2="920" y2="150" stroke="#000000" stroke-width="90"></line>
 	<rect transform="rotate(180,500,360)" x="20" y="0" width="960" height="400">
diff --git a/src/assets/svgs/traction-transformer.svg b/src/assets/svgs/traction-transformer.svg
index 10ae543..f2c7100 100644
--- a/src/assets/svgs/traction-transformer.svg
+++ b/src/assets/svgs/traction-transformer.svg
@@ -1,15 +1,11 @@
 <?xml version="1.0" standalone="no"?>
-<svg t="1658198367300" class="icon" viewBox="0 0 1024 1024" version="1.1"
-    xmlns="http://www.w3.org/2000/svg" p-id="1547"
+<svg  viewBox="0 0 1024 1024" version="1.1"
+    xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
-    <defs>
-        <style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
-        </style>
-    </defs>
-    <path d="M500.181333 308.757333a118.421333 118.421333 0 1 1-118.421333 118.421334 118.421333 118.421333 0 0 1 118.421333-118.421334m0-19.2a137.514667 137.514667 0 1 0 137.514667 137.514667 137.514667 137.514667 0 0 0-137.514667-137.514667z" p-id="1548"></path>
-    <path d="M500.181333 478.741333a118.421333 118.421333 0 1 1-118.421333 118.421334 118.421333 118.421333 0 0 1 118.421333-118.421334m0-19.2a137.514667 137.514667 0 1 0 137.514667 137.514667 137.514667 137.514667 0 0 0-137.514667-137.514667z" p-id="1549"></path>
-    <path d="M500.266667 234.666667a9.557333 9.557333 0 0 1 9.557333 9.557333v54.869333a9.557333 9.557333 0 0 1-9.557333 9.557334 9.557333 9.557333 0 0 1-9.557334-9.557334v-54.848A9.557333 9.557333 0 0 1 500.266667 234.666667z" p-id="1550"></path>
-    <path d="M500.266667 715.349333a9.557333 9.557333 0 0 1 9.557333 9.557334v54.890666a9.557333 9.557333 0 0 1-9.557333 9.557334 9.557333 9.557333 0 0 1-9.557334-9.557334v-54.869333a9.557333 9.557333 0 0 1 9.557334-9.578667z" p-id="1551"></path>
-    <path d="M500.266667 446.357333a10.666667 10.666667 0 0 1-10.218667-6.186666l-36.053333-77.312a10.666667 10.666667 0 0 1 5.205333-14.186667 10.666667 10.666667 0 0 1 14.101333 5.205333l26.986667 57.728 26.922667-57.728a10.666667 10.666667 0 0 1 14.186666-5.205333 10.666667 10.666667 0 0 1 5.12 14.186667l-36.053333 77.312a10.666667 10.666667 0 0 1-9.664 6.208z" p-id="1552"></path>
-    <path d="M500.266667 681.024a10.666667 10.666667 0 0 1-10.218667-6.186667l-36.053333-77.312a10.666667 10.666667 0 0 1 5.205333-14.186666 10.666667 10.666667 0 0 1 14.101333 5.205333l26.986667 57.728 26.922667-57.728a10.666667 10.666667 0 0 1 14.186666-5.205333 10.666667 10.666667 0 0 1 5.12 14.186666l-36.053333 77.312a10.666667 10.666667 0 0 1-9.664 6.208z" p-id="1553"></path>
+    <path d="M500.181333 308.757333a118.421333 118.421333 0 1 1-118.421333 118.421334 118.421333 118.421333 0 0 1 118.421333-118.421334m0-19.2a137.514667 137.514667 0 1 0 137.514667 137.514667 137.514667 137.514667 0 0 0-137.514667-137.514667z"></path>
+    <path d="M500.181333 478.741333a118.421333 118.421333 0 1 1-118.421333 118.421334 118.421333 118.421333 0 0 1 118.421333-118.421334m0-19.2a137.514667 137.514667 0 1 0 137.514667 137.514667 137.514667 137.514667 0 0 0-137.514667-137.514667z"></path>
+    <path d="M500.266667 234.666667a9.557333 9.557333 0 0 1 9.557333 9.557333v54.869333a9.557333 9.557333 0 0 1-9.557333 9.557334 9.557333 9.557333 0 0 1-9.557334-9.557334v-54.848A9.557333 9.557333 0 0 1 500.266667 234.666667z"></path>
+    <path d="M500.266667 715.349333a9.557333 9.557333 0 0 1 9.557333 9.557334v54.890666a9.557333 9.557333 0 0 1-9.557333 9.557334 9.557333 9.557333 0 0 1-9.557334-9.557334v-54.869333a9.557333 9.557333 0 0 1 9.557334-9.578667z"></path>
+    <path d="M500.266667 446.357333a10.666667 10.666667 0 0 1-10.218667-6.186666l-36.053333-77.312a10.666667 10.666667 0 0 1 5.205333-14.186667 10.666667 10.666667 0 0 1 14.101333 5.205333l26.986667 57.728 26.922667-57.728a10.666667 10.666667 0 0 1 14.186666-5.205333 10.666667 10.666667 0 0 1 5.12 14.186667l-36.053333 77.312a10.666667 10.666667 0 0 1-9.664 6.208z"></path>
+    <path d="M500.266667 681.024a10.666667 10.666667 0 0 1-10.218667-6.186667l-36.053333-77.312a10.666667 10.666667 0 0 1 5.205333-14.186666 10.666667 10.666667 0 0 1 14.101333 5.205333l26.986667 57.728 26.922667-57.728a10.666667 10.666667 0 0 1 14.186666-5.205333 10.666667 10.666667 0 0 1 5.12 14.186666l-36.053333 77.312a10.666667 10.666667 0 0 1-9.664 6.208z"></path>
 </svg>
\ No newline at end of file
diff --git a/src/components/webtopo-svgedit/components/center-panel/index.vue b/src/components/webtopo-svgedit/components/center-panel/index.vue
index cf4f24a..a51a409 100644
--- a/src/components/webtopo-svgedit/components/center-panel/index.vue
+++ b/src/components/webtopo-svgedit/components/center-panel/index.vue
@@ -49,7 +49,7 @@
             <use
               v-else-if="item.type === EDoneJsonType.File"
               :xlink:href="`#svg-${item.name}`"
-              v-bind="prosToVBind(item.props)"
+              v-bind="prosToVBind(item)"
               width="100"
               height="100"
               :id="item.id"
@@ -63,7 +63,7 @@
             <component
               v-else-if="item.type === EDoneJsonType.CustomSvg"
               :is="item.tag"
-              v-bind="prosToVBind(item.props)"
+              v-bind="prosToVBind(item)"
               width="100"
               height="100"
               :id="item.id"
diff --git a/src/components/webtopo-svgedit/components/left-panel/index.vue b/src/components/webtopo-svgedit/components/left-panel/index.vue
index 389571a..437138e 100644
--- a/src/components/webtopo-svgedit/components/left-panel/index.vue
+++ b/src/components/webtopo-svgedit/components/left-panel/index.vue
@@ -29,10 +29,7 @@
           >
             <div class="flex component-item items-center ml-10px">
               <el-icon :size="40" class="flex items-center">
-                <svg-analysis
-                  :name="svg_item.name"
-                  :props="handleIconProps(svg_item.props)"
-                ></svg-analysis>
+                <svg-analysis :name="svg_item.name" :props="prosToVBind(svg_item)"></svg-analysis>
               </el-icon>
               <div>{{ svg_item.title }}</div>
             </div>
@@ -46,14 +43,11 @@
 <script lang="ts" setup>
   import { ref } from 'vue';
   import { ElSelect, ElOption, ElCollapse, ElCollapseItem, ElIcon, ElMessage } from 'element-plus';
-  import {
-    IConfigComponentGroup,
-    IConfigItem,
-    IConfigItemProps
-  } from '../../../../config-center/types';
-  import { useGlobalStore } from '../../../../store/global';
-  import SvgAnalysis from '../../../svg-analysis/index.vue';
-  import { EGlobalStoreIntention } from '../../../../store/global/types';
+  import { IConfigComponentGroup, IConfigItem } from '@/config-center/types';
+  import { useGlobalStore } from '@/store/global';
+  import SvgAnalysis from '@/components/svg-analysis/index.vue';
+  import { EGlobalStoreIntention } from '@/store/global/types';
+  import { prosToVBind } from '@/utils';
   const globalStore = useGlobalStore();
   const select_lib = ref('svg文件');
   const config_center = ref<IConfigComponentGroup[]>(globalStore.config_center.svg文件);
@@ -64,13 +58,7 @@
 
     console.log(val, 71474);
   };
-  const handleIconProps = (svg_item_props: IConfigItemProps) => {
-    let temp = {};
-    for (const key in svg_item_props) {
-      temp = { ...temp, ...{ [key]: svg_item_props[key].val } };
-    }
-    return temp;
-  };
+
   const createBegin = (svg_item: IConfigItem) => {
     globalStore.setCreateInfo(svg_item);
   };
diff --git a/src/components/webtopo-svgedit/components/right-panel/index.vue b/src/components/webtopo-svgedit/components/right-panel/index.vue
index 5c006ba..8628b4f 100644
--- a/src/components/webtopo-svgedit/components/right-panel/index.vue
+++ b/src/components/webtopo-svgedit/components/right-panel/index.vue
@@ -42,6 +42,13 @@
             <el-form-item label="y轴坐标" size="small">
               <el-input-number v-model="globalStore.handle_svg_info.info.y"></el-input-number>
             </el-form-item>
+            <el-form-item
+              :label="globalStore.handle_svg_info.info.state?.OnOff.title"
+              size="small"
+              v-if="globalStore.handle_svg_info.info.state?.OnOff"
+            >
+              <el-switch v-model="globalStore.handle_svg_info.info.state.OnOff.default"></el-switch>
+            </el-form-item>
             <dynamic-el-form-item
               :obj-info="globalStore.handle_svg_info.info.props"
             ></dynamic-el-form-item>
@@ -73,7 +80,8 @@
     ElTabs,
     ElTabPane,
     TabsPaneContext,
-    ElInput
+    ElInput,
+    ElSwitch
   } from 'element-plus';
   import { ref } from 'vue';
   import { useConfigStore } from '@/store/config';
diff --git a/src/config-center/svg-file/stateful/circuit-breaker/index.ts b/src/config-center/svg-file/stateful/circuit-breaker/index.ts
index 12a27dc..09bcca7 100644
--- a/src/config-center/svg-file/stateful/circuit-breaker/index.ts
+++ b/src/config-center/svg-file/stateful/circuit-breaker/index.ts
@@ -1,4 +1,4 @@
-import { EConfigItemPropsType, EDoneJsonType, IConfigItem } from '../../../types';
+import { EDoneJsonType, IConfigItem } from '@/config-center/types';
 
 export const circuit_breaker_svg_file: IConfigItem = {
   name: 'circuit-breaker',
@@ -9,21 +9,21 @@ export const circuit_breaker_svg_file: IConfigItem = {
     have_anchor: true,
     actual_rect: true
   },
-  props: {
-    fill: {
+  props: {},
+  state: {
+    OnOff: {
       title: '开关',
-      type: EConfigItemPropsType.Select,
-      val: '#ff0000',
-      options: [
-        {
-          value: '#ff0000',
-          label: '关'
+      default: false,
+      props: {
+        fill: {
+          openVal: '#00ff00',
+          closeVal: '#ff0000'
         },
-        {
-          value: '#00ff00',
-          label: '开'
+        'fill-opacity': {
+          openVal: '0',
+          closeVal: '1'
         }
-      ]
+      }
     }
   }
 };
diff --git a/src/config-center/types.ts b/src/config-center/types.ts
index 5845e6b..f73ae48 100644
--- a/src/config-center/types.ts
+++ b/src/config-center/types.ts
@@ -23,6 +23,7 @@ export interface IConfigItem {
   config: IDoneJsonConfig;
   animations?: IConfigItemProps;
   tag?: any;
+  state?: IConfigItemState; //通过一个属性去控制多个属性就是有状态组件
 }
 export interface IConfigItemProps {
   [key: string]: {
@@ -62,3 +63,10 @@ interface IDoneJsonConfig {
 export interface IComponentImport {
   [key: string]: any;
 }
+export interface IConfigItemState {
+  OnOff?: {
+    title: string;
+    default: false;
+    props: { [key: string]: { openVal: any; closeVal: any } };
+  };
+}
diff --git a/src/utils/index.ts b/src/utils/index.ts
index eadb717..dd9df0d 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -1,5 +1,5 @@
 import { ELineBindAnchors } from '@/config-center/system/types';
-import type { IConfigItemProps } from '@/config-center/types';
+import { IConfigItem } from '@/config-center/types';
 import type { IDoneJson } from '@/store/global/types';
 
 /**
@@ -231,10 +231,27 @@ export const setAfterRotationPointCoordinate = (item: IDoneJson) => {
     )
   };
 };
-export const prosToVBind = (props: IConfigItemProps) => {
+
+export const prosToVBind = (item: IConfigItem) => {
   let temp = {};
-  for (const key in props) {
-    temp = { ...temp, ...{ [key]: props[key].val } };
+  if (item.state) {
+    for (const key in item.state) {
+      if (key === 'OnOff') {
+        for (const on_off_key in item.state[key]?.props) {
+          temp = {
+            ...temp,
+            ...{
+              [on_off_key]: item.state[key]?.default
+                ? item.state[key]?.props[on_off_key].openVal
+                : item.state[key]?.props[on_off_key].closeVal
+            }
+          };
+        }
+      }
+    }
+  }
+  for (const key in item.props) {
+    temp = { ...temp, ...{ [key]: item.props[key].val } };
   }
   return temp;
 };