202206161136

README.md

@@ -69,7 +69,7 @@ yarn serve
   "template": "<path :fill=\"svg_color\" :stroke=\"svg_color\" stroke-width=\"5\" style=\"pointer-events:inherit\" d=\"m143.72081869586242,163.35565803158485 c14.617751633754164,-41.93617271978648 71.89058180534832,0 0,53.91793635401125 c-71.89058180534832,-53.91793635401125 -14.617751633754164,-95.85410907379776 0,-53.91793635401125 z\"  fill-opacity=\"1\" stroke-opacity=\"1\"></path>",
   "props": ["svg_color"],
   "default_color":"#FF0000",
-  "priview_img":"https://svg.yaolunmao.top/test.png"
+  "priviewImg":"https://svg.yaolunmao.top/test.png"
 }
 ```
 

package-lock.json

@@ -10450,6 +10450,11 @@
       "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=",
       "dev": true
     },
+    "resize-detector": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmmirror.com/resize-detector/-/resize-detector-0.3.0.tgz",
+      "integrity": "sha512-R/tCuvuOHQ8o2boRP6vgx8hXCCy87H1eY9V5imBYeVNyNVpuL9ciReSccLj2gDcax9+2weXy3bc8Vv+NRXeEvQ=="
+    },
     "resize-observer-polyfill": {
       "version": "1.5.1",
       "resolved": "https://registry.npm.taobao.org/resize-observer-polyfill/download/resize-observer-polyfill-1.5.1.tgz",
@@ -12577,6 +12582,20 @@
         "@vue/shared": "3.0.11"
       }
     },
+    "vue-demi": {
+      "version": "0.12.1",
+      "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.12.1.tgz",
+      "integrity": "sha512-QL3ny+wX8c6Xm1/EZylbgzdoDolye+VpCXRhI2hug9dJTP3OUJ3lmiKN3CsVV3mOJKwFi0nsstbgob0vG7aoIw=="
+    },
+    "vue-echarts": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmmirror.com/vue-echarts/-/vue-echarts-6.0.2.tgz",
+      "integrity": "sha512-9xDokauJtAc389MNKbwi1I0VDmp4Y6ndAJTQ8T9K7H0ffosTe1OJSJbUtkT7/fVLDFzlCcmg2TfAKaMzbpg5yQ==",
+      "requires": {
+        "resize-detector": "^0.3.0",
+        "vue-demi": "^0.12.1"
+      }
+    },
     "vue-eslint-parser": {
       "version": "7.6.0",
       "resolved": "https://registry.npm.taobao.org/vue-eslint-parser/download/vue-eslint-parser-7.6.0.tgz?cache=0&sync_timestamp=1614679624052&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-eslint-parser%2Fdownload%2Fvue-eslint-parser-7.6.0.tgz",

package.json

@@ -18,6 +18,7 @@
         "js-cookie": "^2.2.1",
         "path": "^0.12.7",
         "vue": "^3.0.0",
+        "vue-echarts": "^6.0.2",
         "vue-router": "^4.0.4",
         "vuex": "^4.0.0"
     },

public/InterfaceReturn.json

@@ -1,9 +1,9 @@
 [
   {
     "type": "CircuitBreakerSvg",
-    "template": "<rect x='-10' y='-20' width='20' height='40' :fill='svg_color' :stroke='svg_color' stroke-width='2' data-v-d903d4f8=''></rect>",
+    "template": "<rect x='-10' y='-20' width='20' height='40' :fill='selectSvgInfo.svgColor' :stroke='selectSvgInfo.svgColor' stroke-width='2></rect>",
     "props": [
-      "svg_color"
+      "selectSvgInfo"
     ],
     "default_color": "#00FF00",
     "priviewImg": "/vuefiv/CircuitBreakerSvg.png",
@@ -18,7 +18,6 @@
       "svgPositionY": 0,
       "size": 1,
       "height": 40,
-      "fontSize": 1,
       "svgText": "",
       "angle": 0,
       "tableRowCount": 2,
@@ -35,9 +34,9 @@
   },
   {
     "type": "VerticalLineSvg",
-    "template": "<line x1='0' y1='-25' x2='0' y2='25' fill='none' :stroke='svg_color' stroke-width='2' data-v-d903d4f8=''></line>",
+    "template": "<line x1='0' :y1=\"-(selectSvgInfo.height)\" x2='0' :y2=\"(selectSvgInfo.height)\" fill='none' :stroke='selectSvgInfo.svgColor' stroke-width='2'></line>",
     "props": [
-      "svg_color"
+      "selectSvgInfo"
     ],
     "default_color": "#FF0000",
     "priviewImg": "/vuefiv/VerticalLineSvg.png",
@@ -52,7 +51,6 @@
       "svgPositionY": 0,
       "size": 1,
       "height": 50,
-      "fontSize": 1,
       "svgText": "",
       "angle": 0,
       "tableRowCount": 2,
@@ -70,9 +68,9 @@
   },
   {
     "type": "TextSvg",
-    "template": "<text  x='-50' y='25' font-size='50' :fill='svg_color' data-v-d903d4f8=''></text>",
+    "template": "<text x=\"0\" y=\"0\" font-size=\"10\" :fill=\"selectSvgInfo.svgColor\">{{selectSvgInfo.svgText}}</text>",
     "props": [
-      "svg_color"
+      "selectSvgInfo"
     ],
     "default_color": "#FF0000",
     "priviewImg": "/vuefiv/TextSvg.png",
@@ -87,7 +85,6 @@
       "svgPositionY": 0,
       "size": 1,
       "height": 1,
-      "fontSize": 50,
       "svgText": "文字",
       "angle": 0,
       "tableRowCount": 2,
@@ -97,16 +94,16 @@
         "svgColor",
         "selectSvgInfoSize",
         "angle",
-        "fontSize",
-        "svgText"
+        "svgText",
+        "size"
       ]
     }
   },
   {
     "type": "IsolatingSwitchSvg",
-    "template": "<line x1='0' y1='-20' x2='0' y2='0' fill='none' :stroke='svg_color' stroke-width='2'></line><line x1='-10' y1='0' x2='6.666666666666667' y2='0' fill='none' :stroke='svg_color' stroke-width='2'></line><line x1='0' y1='20' x2='-10' y2='5' fill='none' :stroke='svg_color' stroke-width='2'></line><line x1='0' y1='40' x2='0' y2='20' fill='none' :stroke='svg_color' stroke-width='2'></line>",
+    "template": "<line x1='0' y1='-20' x2='0' y2='0' fill='none' :stroke='selectSvgInfo.svgColor' stroke-width='2'></line><line x1='-10' y1='0' x2='6.666666666666667' y2='0' fill='none' :stroke='selectSvgInfo.svgColor' stroke-width='2'></line><line x1='0' y1='20' x2='-10' y2='5' fill='none' :stroke='selectSvgInfo.svgColor' stroke-width='2'></line><line x1='0' y1='40' x2='0' y2='20' fill='none' :stroke='selectSvgInfo.svgColor' stroke-width='2'></line>",
     "props": [
-      "svg_color"
+      "selectSvgInfo"
     ],
     "default_color": "#00FF00",
     "priviewImg": "/vuefiv/IsolatingSwitchSvg.png",
@@ -121,7 +118,6 @@
       "svgPositionY": 0,
       "size": 1,
       "height": 20,
-      "fontSize": 1,
       "svgText": "",
       "angle": 0,
       "tableRowCount": 2,
@@ -137,9 +133,9 @@
   },
   {
     "type": "LightningArresterSvg",
-    "template": "<rect x='-7' y='-14' width='15' height='35' fill='none' :stroke='svg_color' stroke-width='2'></rect><line x1='0' y1='-21' x2='0' y2='0' fill='none' :stroke='svg_color' stroke-width='2'></line><line x1='0' y1='21' x2='0' y2='28' fill='none' :stroke='svg_color' stroke-width='2'></line><polyline points='-1,-7 0,0 1,-7' fill='none' :stroke='svg_color' stroke-width='2'></polyline>",
+    "template": "<rect x='-7' y='-14' width='15' height='35' fill='none' :stroke='selectSvgInfo.svgColor' stroke-width='2'></rect><line x1='0' y1='-21' x2='0' y2='0' fill='none' :stroke='selectSvgInfo.svgColor' stroke-width='2'></line><line x1='0' y1='21' x2='0' y2='28' fill='none' :stroke='selectSvgInfo.svgColor' stroke-width='2'></line><polyline points='-1,-7 0,0 1,-7' fill='none' :stroke='selectSvgInfo.svgColor' stroke-width='2'></polyline>",
     "props": [
-      "svg_color"
+      "selectSvgInfo"
     ],
     "default_color": "#FF0000",
     "priviewImg": "/vuefiv/LightningArresterSvg.png",
@@ -154,7 +150,6 @@
       "svgPositionY": 0,
       "size": 1,
       "height": 7,
-      "fontSize": 1,
       "svgText": "",
       "angle": 0,
       "tableRowCount": 2,
@@ -170,9 +165,9 @@
   },
   {
     "type": "StandardCapacitorSvg",
-    "template": "<line x1='0' y1='-12' x2='0' y2='-3' fill='none' :stroke='svg_color' stroke-width='2'></line><line x1='-9' y1='-3' x2='9' y2='-3' fill='none' :stroke='svg_color' stroke-width='2'></line><line x1='-9' y1='3' x2='9' y2='3' fill='none' :stroke='svg_color' stroke-width='2'></line><line x1='0' y1='12' x2='0' y2='3' fill='none' :stroke='svg_color' stroke-width='2'></line>",
+    "template": "<line x1='0' y1='-12' x2='0' y2='-3' fill='none' :stroke='selectSvgInfo.svgColor' stroke-width='2'></line><line x1='-9' y1='-3' x2='9' y2='-3' fill='none' :stroke='selectSvgInfo.svgColor' stroke-width='2'></line><line x1='-9' y1='3' x2='9' y2='3' fill='none' :stroke='selectSvgInfo.svgColor' stroke-width='2'></line><line x1='0' y1='12' x2='0' y2='3' fill='none' :stroke='selectSvgInfo.svgColor' stroke-width='2'></line>",
     "props": [
-      "svg_color"
+      "selectSvgInfo"
     ],
     "default_color": "#FF0000",
     "priviewImg": "/vuefiv/StandardCapacitorSvg.png",
@@ -187,7 +182,6 @@
       "svgPositionY": 0,
       "size": 1,
       "height": 3,
-      "fontSize": 1,
       "svgText": "",
       "angle": 0,
       "tableRowCount": 2,
@@ -203,9 +197,9 @@
   },
   {
     "type": "WireBreakOffSvg",
-    "template": "<line x1='0' y1='-40' x2='0' y2='-15' fill='none' stroke='#FF0000' stroke-width='2'></line><line x1='0' y1='15' x2='-10' y2='-15' fill='none' :stroke='svg_color' stroke-width='2'></line><line x1='0' y1='45' x2='0' y2='15' fill='none' :stroke='svg_color' stroke-width='2'></line>",
+    "template": "<line x1='0' y1='-40' x2='0' y2='-15' fill='none' stroke='#FF0000' stroke-width='2'></line><line x1='0' y1='15' x2='-10' y2='-15' fill='none' :stroke='selectSvgInfo.svgColor' stroke-width='2'></line><line x1='0' y1='45' x2='0' y2='15' fill='none' :stroke='selectSvgInfo.svgColor' stroke-width='2'></line>",
     "props": [
-      "svg_color"
+      "selectSvgInfo"
     ],
     "default_color": "#00FF00",
     "priviewImg": "/vuefiv/WireBreakOffSvg.png",
@@ -220,7 +214,6 @@
       "svgPositionY": 0,
       "size": 1,
       "height": 5,
-      "fontSize": 1,
       "svgText": "",
       "angle": 0,
       "tableRowCount": 2,
@@ -236,9 +229,9 @@
   },
   {
     "type": "WireConnectionSvg",
-    "template": "<line x1='0' y1='-40' x2='0' y2='-15' fill='none' :stroke='svg_color' stroke-width='2'></line><line x1='0' y1='15' x2='0' y2='-15' fill='none' :stroke='svg_color' stroke-width='2'></line><line x1='0' y1='45' x2='0' y2='15' fill='none' :stroke='svg_color' stroke-width='2'></line>",
+    "template": "<line x1='0' y1='-40' x2='0' y2='-15' fill='none' :stroke='selectSvgInfo.svgColor' stroke-width='2'></line><line x1='0' y1='15' x2='0' y2='-15' fill='none' :stroke='selectSvgInfo.svgColor' stroke-width='2'></line><line x1='0' y1='45' x2='0' y2='15' fill='none' :stroke='selectSvgInfo.svgColor' stroke-width='2'></line>",
     "props": [
-      "svg_color"
+      "selectSvgInfo"
     ],
     "default_color": "#FF0000",
     "priviewImg": "/vuefiv/WireBreakOffSvg.png",
@@ -253,7 +246,6 @@
       "svgPositionY": 0,
       "size": 1,
       "height": 5,
-      "fontSize": 1,
       "svgText": "",
       "angle": 0,
       "tableRowCount": 2,
@@ -271,7 +263,7 @@
     "type": "TableSvg",
     "template": "<foreignObject x='0' y='0'></foreignObject>",
     "props": [
-      "svg_color"
+      "selectSvgInfo"
     ],
     "default_color": "#CCCC33",
     "priviewImg": "/vuefiv/TableSvg.png",
@@ -286,7 +278,6 @@
       "svgPositionY": 0,
       "size": 1,
       "height": 0,
-      "fontSize": 1,
       "svgText": "",
       "angle": 0,
       "tableRowCount": 2,
@@ -302,9 +293,9 @@
   },
   {
     "type": "HorizontalLineSvg",
-    "template": "<line x1='-25' y1='0' x2='25' y2='0' fill='none' :stroke='svg_color' stroke-width='2' data-v-d903d4f8=''></line>",
+    "template": "<line :x1=\"-(selectSvgInfo.height)\" :y1='0' :x2=\"(selectSvgInfo.height)\" y2='0' fill='none' :stroke='selectSvgInfo.svgColor' stroke-width='2' data-v-d903d4f8=''></line>",
     "props": [
-      "svg_color"
+      "selectSvgInfo"
     ],
     "default_color": "#FF0000",
     "priviewImg": "/vuefiv/HorizontalLineSvg.png",
@@ -319,7 +310,6 @@
       "svgPositionY": 0,
       "size": 1,
       "height": 50,
-      "fontSize": 1,
       "svgText": "",
       "angle": 0,
       "tableRowCount": 2,
@@ -337,9 +327,9 @@
   },
   {
     "type": "PolylineUpSvg",
-    "template": "<polyline points='0,7 13,-7 26,7' fill='none' :stroke='svg_color' stroke-width='2' transform='translate(-13,0)'></polyline><polyline points='0,7 13,-7 26,7' fill='none' :stroke='svg_color' stroke-width='2' transform='translate(-13,8)'></polyline>",
+    "template": "<polyline points='0,7 13,-7 26,7' fill='none' :stroke='selectSvgInfo.svgColor' stroke-width='2' transform='translate(-13,0)'></polyline><polyline points='0,7 13,-7 26,7' fill='none' :stroke='selectSvgInfo.svgColor' stroke-width='2' transform='translate(-13,8)'></polyline>",
     "props": [
-      "svg_color"
+      "selectSvgInfo"
     ],
     "default_color": "#FF0000",
     "priviewImg": "/vuefiv/PolylineUpSvg.png",
@@ -354,7 +344,6 @@
       "svgPositionY": 0,
       "size": 1,
       "height": 7,
-      "fontSize": 1,
       "svgText": "",
       "angle": 0,
       "tableRowCount": 2,
@@ -373,7 +362,7 @@
     "type": "PolylineDownSvg",
     "template": "<polyline points='0,7 13,22 26,7' fill='none' stroke='#FF0000' stroke-width='2' transform='translate(-13,0)'></polyline><polyline points='0,7 13,22 26,7' fill='none' stroke='#FF0000' stroke-width='2' transform='translate(-13,8)'></polyline>",
     "props": [
-      "svg_color"
+      "selectSvgInfo"
     ],
     "default_color": "#FF0000",
     "priviewImg": "/vuefiv/PolylineDownSvg.png",
@@ -388,7 +377,6 @@
       "svgPositionY": 0,
       "size": 1,
       "height": 7,
-      "fontSize": 1,
       "svgText": "",
       "angle": 0,
       "tableRowCount": 2,
@@ -404,9 +392,9 @@
   },
   {
     "type": "ArrowDownSvg",
-    "template": "<polygon  points='0,-8 5,0 10,-8' :fill='svg_color' :stroke='svg_color' stroke-width='2' transform='translate(-5,0)'></polygon>",
+    "template": "<polygon  points='0,-8 5,0 10,-8' :fill='selectSvgInfo.svgColor' :stroke='selectSvgInfo.svgColor' stroke-width='2' transform='translate(-5,0)'></polygon>",
     "props": [
-      "svg_color"
+      "selectSvgInfo"
     ],
     "default_color": "#FF0000",
     "priviewImg": "/vuefiv/ArrowDownSvg.png",
@@ -421,7 +409,6 @@
       "svgPositionY": 0,
       "size": 1,
       "height": 2,
-      "fontSize": 1,
       "svgText": "",
       "angle": 0,
       "tableRowCount": 2,
@@ -438,9 +425,9 @@
   {
     "type": "ArrowUpSvg",
     "title": "箭头向上",
-    "template": "<polygon  points='0,8 5,0 10,8' :fill='svg_color' :stroke='svg_color' stroke-width='2' transform='translate(-5,0)'></polygon>",
+    "template": "<polygon  points='0,8 5,0 10,8' :fill='selectSvgInfo.svgColor' :stroke='selectSvgInfo.svgColor' stroke-width='2' transform='translate(-5,0)'></polygon>",
     "props": [
-      "svg_color"
+      "selectSvgInfo"
     ],
     "default_color": "#FF0000",
     "priviewImg": "/vuefiv/ArrowUpSvg.png",
@@ -455,7 +442,6 @@
       "svgPositionY": 0,
       "size": 1,
       "height": 2,
-      "fontSize": 1,
       "svgText": "",
       "angle": 0,
       "tableRowCount": 2,
@@ -471,9 +457,9 @@
   },
   {
     "type": "GroundGraySvg",
-    "template": "<line x1='9' y1='9' x2='9' y2='0' fill='none' :stroke='svg_color' stroke-width='2' transform='translate(-9,-6)'></line><line x1='0' y1='9' x2='18' y2='9' fill='none' :stroke='svg_color' stroke-width='2' transform='translate(-9,-6)'></line><line x1='3' y1='15' x2='15' y2='15' fill='none' :stroke='svg_color' stroke-width='2' transform='translate(-9,-6)'></line><line x1='6' y1='21' x2='12' y2='21' fill='none' :stroke='svg_color' stroke-width='2' transform='translate(-9,-6)'></line>",
+    "template": "<line x1='9' y1='9' x2='9' y2='0' fill='none' :stroke='selectSvgInfo.svgColor' stroke-width='2' transform='translate(-9,-6)'></line><line x1='0' y1='9' x2='18' y2='9' fill='none' :stroke='selectSvgInfo.svgColor' stroke-width='2' transform='translate(-9,-6)'></line><line x1='3' y1='15' x2='15' y2='15' fill='none' :stroke='selectSvgInfo.svgColor' stroke-width='2' transform='translate(-9,-6)'></line><line x1='6' y1='21' x2='12' y2='21' fill='none' :stroke='selectSvgInfo.svgColor' stroke-width='2' transform='translate(-9,-6)'></line>",
     "props": [
-      "svg_color"
+      "selectSvgInfo"
     ],
     "default_color": "#CCCCCC",
     "priviewImg": "/vuefiv/GroundGraySvg.png",
@@ -488,7 +474,6 @@
       "svgPositionY": 0,
       "size": 1,
       "height": 3,
-      "fontSize": 1,
       "svgText": "",
       "angle": 0,
       "tableRowCount": 2,
@@ -504,9 +489,9 @@
   },
   {
     "type": "SignalLamp",
-    "template": "<ellipse cx='7' cy='22' rx='12' ry='12' fill='none' :stroke='svg_color' stroke-width='2' transform='translate(-7,-22)'></ellipse><line x1='0' y1='30' x2='15' y2='15' fill='none' :stroke='svg_color' stroke-width='2' transform='translate(-7,-22)'></line><line x1='15' y1='30' x2='0' y2='15' fill='none' :stroke='svg_color' stroke-width='2' transform='translate(-7,-22)'></line>",
+    "template": "<ellipse cx='7' cy='22' rx='12' ry='12' fill='none' :stroke='selectSvgInfo.svgColor' stroke-width='2' transform='translate(-7,-22)'></ellipse><line x1='0' y1='30' x2='15' y2='15' fill='none' :stroke='selectSvgInfo.svgColor' stroke-width='2' transform='translate(-7,-22)'></line><line x1='15' y1='30' x2='0' y2='15' fill='none' :stroke='selectSvgInfo.svgColor' stroke-width='2' transform='translate(-7,-22)'></line>",
     "props": [
-      "svg_color"
+      "selectSvgInfo"
     ],
     "default_color": "#FF0000",
     "priviewImg": "/vuefiv/SignalLamp.png",
@@ -521,7 +506,6 @@
       "svgPositionY": 0,
       "size": 1,
       "height": 3,
-      "fontSize": 1,
       "svgText": "",
       "angle": 0,
       "tableRowCount": 2,
@@ -538,9 +522,9 @@
   },
   {
     "type": "RectSvg",
-    "template": "<rect x='-5' y='-15' width='10' height='30' fill='none' :stroke='svg_color' stroke-width='2' stroke-linecap='round' data-v-d903d4f8=''></rect>",
+    "template": "<rect x='-5' y='-15' width='10' height='30' fill='none' :stroke='selectSvgInfo.svgColor' stroke-width='2' stroke-linecap='round' data-v-d903d4f8=''></rect>",
     "props": [
-      "svg_color"
+      "selectSvgInfo"
     ],
     "default_color": "#FF0000",
     "priviewImg": "/vuefiv/RectSvg.png",
@@ -555,7 +539,6 @@
       "svgPositionY": 0,
       "size": 1,
       "height": 30,
-      "fontSize": 1,
       "svgText": "",
       "angle": 0,
       "tableRowCount": 2,
@@ -571,9 +554,9 @@
   },
   {
     "type": "TwoCircleSvg",
-    "template": "<ellipse cx='0' cy='-4.5' rx='6' ry='6' fill='none' :stroke='svg_color' stroke-width='2'></ellipse><ellipse cx='0' cy='4.5' rx='6' ry='6' fill='none' :stroke='svg_color' stroke-width='2'></ellipse>",
+    "template": "<ellipse cx='0' cy='-4.5' rx='6' ry='6' fill='none' :stroke='selectSvgInfo.svgColor' stroke-width='2'></ellipse><ellipse cx='0' cy='4.5' rx='6' ry='6' fill='none' :stroke='selectSvgInfo.svgColor' stroke-width='2'></ellipse>",
     "props": [
-      "svg_color"
+      "selectSvgInfo"
     ],
     "default_color": "#FF0000",
     "priviewImg": "/vuefiv/TwoCircleSvg.png",
@@ -588,7 +571,6 @@
       "svgPositionY": 0,
       "size": 1,
       "height": 3,
-      "fontSize": 1,
       "svgText": "",
       "angle": 0,
       "tableRowCount": 2,
@@ -604,9 +586,9 @@
   },
   {
     "type": "TransformerYSvg",
-    "template": "<ellipse cx='0' cy='0' rx='10' ry='10' fill='none' :stroke='svg_color' stroke-width='2'></ellipse><line x1='5' y1='-5' x2='0' y2='0' fill='none' :stroke='svg_color' stroke-width='2'></line><line x1='-5' y1='-5' x2='0' y2='0' fill='none' :stroke='svg_color' stroke-width='2'></line><line x1='0' y1='0' x2='0' y2='5' fill='none' :stroke='svg_color' stroke-width='2'></line>",
+    "template": "<ellipse cx='0' cy='0' rx='10' ry='10' fill='none' :stroke='selectSvgInfo.svgColor' stroke-width='2'></ellipse><line x1='5' y1='-5' x2='0' y2='0' fill='none' :stroke='selectSvgInfo.svgColor' stroke-width='2'></line><line x1='-5' y1='-5' x2='0' y2='0' fill='none' :stroke='selectSvgInfo.svgColor' stroke-width='2'></line><line x1='0' y1='0' x2='0' y2='5' fill='none' :stroke='selectSvgInfo.svgColor' stroke-width='2'></line>",
     "props": [
-      "svg_color"
+      "selectSvgInfo"
     ],
     "default_color": "#FF0000",
     "priviewImg": "/vuefiv/TransformerY.png",
@@ -621,7 +603,6 @@
       "svgPositionY": 0,
       "size": 1,
       "height": 5,
-      "fontSize": 1,
       "svgText": "",
       "angle": 0,
       "tableRowCount": 2,
@@ -637,9 +618,9 @@
   },
   {
     "type": "TransformerTriphaseOpen",
-    "template": "<ellipse cx='0' cy='0' rx='10' ry='10' fill='none' :stroke='svg_color' stroke-width='2'></ellipse><line x1='-2' y1='-6' x2='-2' y2='6' fill='none' :stroke='svg_color' stroke-width='2'></line><line x1='-2' y1='-6' x2='4' y2='0' fill='none' :stroke='svg_color' stroke-width='2'></line><line x1='4' y1='2' x2='-2' y2='6' fill='none' :stroke='svg_color' stroke-width='2'></line>",
+    "template": "<ellipse cx='0' cy='0' rx='10' ry='10' fill='none' :stroke='selectSvgInfo.svgColor' stroke-width='2'></ellipse><line x1='-2' y1='-6' x2='-2' y2='6' fill='none' :stroke='selectSvgInfo.svgColor' stroke-width='2'></line><line x1='-2' y1='-6' x2='4' y2='0' fill='none' :stroke='selectSvgInfo.svgColor' stroke-width='2'></line><line x1='4' y1='2' x2='-2' y2='6' fill='none' :stroke='selectSvgInfo.svgColor' stroke-width='2'></line>",
     "props": [
-      "svg_color"
+      "selectSvgInfo"
     ],
     "default_color": "#FF0000",
     "priviewImg": "/vuefiv/TransformerTriphaseOpen.png",
@@ -654,7 +635,6 @@
       "svgPositionY": 0,
       "size": 1,
       "height": 2,
-      "fontSize": 1,
       "svgText": "",
       "angle": 0,
       "tableRowCount": 2,
@@ -670,9 +650,9 @@
   },
   {
     "type": "DoubleWindingSvg",
-    "template": "<ellipse cx='0' cy='-20' rx='25' ry='25' fill='none' :stroke='svg_color' stroke-width='2'></ellipse><ellipse cx='0' cy='20' rx='25' ry='25' fill='none' :stroke='svg_color' stroke-width='2'></ellipse><polygon points='10,-30 0,-10 -10,-30' fill='none' :stroke='svg_color' stroke-width='2'></polygon><line x1='0' y1='20' x2='0' y2='35' fill='none' :stroke='svg_color' stroke-width='2'></line><line x1='0' y1='20' x2='-10' y2='10' fill='none' :stroke='svg_color' stroke-width='2'></line><line x1='0' y1='20' x2='10' y2='10' fill='none' :stroke='svg_color' stroke-width='2'></line>",
+    "template": "<ellipse cx='0' cy='-20' rx='25' ry='25' fill='none' :stroke='selectSvgInfo.svgColor' stroke-width='2'></ellipse><ellipse cx='0' cy='20' rx='25' ry='25' fill='none' :stroke='selectSvgInfo.svgColor' stroke-width='2'></ellipse><polygon points='10,-30 0,-10 -10,-30' fill='none' :stroke='selectSvgInfo.svgColor' stroke-width='2'></polygon><line x1='0' y1='20' x2='0' y2='35' fill='none' :stroke='selectSvgInfo.svgColor' stroke-width='2'></line><line x1='0' y1='20' x2='-10' y2='10' fill='none' :stroke='selectSvgInfo.svgColor' stroke-width='2'></line><line x1='0' y1='20' x2='10' y2='10' fill='none' :stroke='selectSvgInfo.svgColor' stroke-width='2'></line>",
     "props": [
-      "svg_color"
+      "selectSvgInfo"
     ],
     "default_color": "#FF0000",
     "priviewImg": "/vuefiv/DoubleWindingSvg.png",
@@ -687,7 +667,6 @@
       "svgPositionY": 0,
       "size": 1,
       "height": 5,
-      "fontSize": 1,
       "svgText": "",
       "angle": 0,
       "tableRowCount": 2,
@@ -703,9 +682,9 @@
   },
   {
     "type": "DoubleWindingSvgB",
-    "template": "<ellipse cx='0' cy='-20' rx='25' ry='25' fill='none' :stroke='svg_color' stroke-width='2'></ellipse><ellipse cx='0' cy='20' rx='25' ry='25' fill='none' :stroke='svg_color' stroke-width='2'></ellipse><polygon points='10,30 0,10-10,30' fill='none' :stroke='svg_color' stroke-width='2'></polygon><line x1='0' y1='-20' x2='0' y2='-35' fill='none' :stroke='svg_color' stroke-width='2'></line><line x1='0' y1='-20' x2='10' y2='-10' fill='none' :stroke='svg_color' stroke-width='2'></line><line x1='0' y1='-20' x2='-10' y2='-10' fill='none' :stroke='svg_color' stroke-width='2'></line>",
+    "template": "<ellipse cx='0' cy='-20' rx='25' ry='25' fill='none' :stroke='selectSvgInfo.svgColor' stroke-width='2'></ellipse><ellipse cx='0' cy='20' rx='25' ry='25' fill='none' :stroke='selectSvgInfo.svgColor' stroke-width='2'></ellipse><polygon points='10,30 0,10-10,30' fill='none' :stroke='selectSvgInfo.svgColor' stroke-width='2'></polygon><line x1='0' y1='-20' x2='0' y2='-35' fill='none' :stroke='selectSvgInfo.svgColor' stroke-width='2'></line><line x1='0' y1='-20' x2='10' y2='-10' fill='none' :stroke='selectSvgInfo.svgColor' stroke-width='2'></line><line x1='0' y1='-20' x2='-10' y2='-10' fill='none' :stroke='selectSvgInfo.svgColor' stroke-width='2'></line>",
     "props": [
-      "svg_color"
+      "selectSvgInfo"
     ],
     "default_color": "#FF0000",
     "priviewImg": "/vuefiv/DoubleWindingSvgB.png",
@@ -720,7 +699,6 @@
       "svgPositionY": 0,
       "size": 1,
       "height": 5,
-      "fontSize": 1,
       "svgText": "",
       "angle": 0,
       "tableRowCount": 2,
@@ -736,9 +714,9 @@
   },
   {
     "type": "GGJSvg",
-    "template": "<line x1='0.5' y1='-25' x2='-9.5' y2='-13' fill='none' :stroke='svg_color' stroke-width='2'></line><line x1='-0.5' y1='-26' x2='9.5' y2='-13' fill='none' :stroke='svg_color' stroke-width='2'></line><line x1='-12' y1='-17' x2='-6' y2='-8' fill='none' :stroke='svg_color' stroke-width='2'></line><line x1='-15' y1='-12' x2='-11' y2='-3' fill='none' :stroke='svg_color' stroke-width='2'></line><polyline points='-13,-8 -22,3 -22,5' fill='none' :stroke='svg_color' stroke-width='2'></polyline><line x1='-21' y1='4' x2='-4' y2='4' fill='none' :stroke='svg_color' stroke-width='2'></line><line x1='-5' y1='-2' x2='-5' y2='11' fill='none' :stroke='svg_color' stroke-width='2'></line><line x1='3' y1='-2' x2='3' y2='11' fill='none' :stroke='svg_color' stroke-width='2'></line><line x1='4' y1='4' x2='21' y2='4' fill='none' :stroke='svg_color' stroke-width='2'></line><polyline points='13,-8 22,3 22,5' fill='none' :stroke='svg_color' stroke-width='2'></polyline><line x1='14' y1='-12' x2='8' y2='-3' fill='none' :stroke='svg_color' stroke-width='2'></line><line x1='12' y1='-17' x2='6' y2='-8' fill='none' :stroke='svg_color' stroke-width='2'></line>",
+    "template": "<line x1='0.5' y1='-25' x2='-9.5' y2='-13' fill='none' :stroke='selectSvgInfo.svgColor' stroke-width='2'></line><line x1='-0.5' y1='-26' x2='9.5' y2='-13' fill='none' :stroke='selectSvgInfo.svgColor' stroke-width='2'></line><line x1='-12' y1='-17' x2='-6' y2='-8' fill='none' :stroke='selectSvgInfo.svgColor' stroke-width='2'></line><line x1='-15' y1='-12' x2='-11' y2='-3' fill='none' :stroke='selectSvgInfo.svgColor' stroke-width='2'></line><polyline points='-13,-8 -22,3 -22,5' fill='none' :stroke='selectSvgInfo.svgColor' stroke-width='2'></polyline><line x1='-21' y1='4' x2='-4' y2='4' fill='none' :stroke='selectSvgInfo.svgColor' stroke-width='2'></line><line x1='-5' y1='-2' x2='-5' y2='11' fill='none' :stroke='selectSvgInfo.svgColor' stroke-width='2'></line><line x1='3' y1='-2' x2='3' y2='11' fill='none' :stroke='selectSvgInfo.svgColor' stroke-width='2'></line><line x1='4' y1='4' x2='21' y2='4' fill='none' :stroke='selectSvgInfo.svgColor' stroke-width='2'></line><polyline points='13,-8 22,3 22,5' fill='none' :stroke='selectSvgInfo.svgColor' stroke-width='2'></polyline><line x1='14' y1='-12' x2='8' y2='-3' fill='none' :stroke='selectSvgInfo.svgColor' stroke-width='2'></line><line x1='12' y1='-17' x2='6' y2='-8' fill='none' :stroke='selectSvgInfo.svgColor' stroke-width='2'></line>",
     "props": [
-      "svg_color"
+      "selectSvgInfo"
     ],
     "default_color": "#FF6600",
     "priviewImg": "/vuefiv/GGJ.png",
@@ -753,7 +731,6 @@
       "svgPositionY": 0,
       "size": 1,
       "height": 1,
-      "fontSize": 1,
       "svgText": "",
       "angle": 0,
       "tableRowCount": 2,
@@ -769,9 +746,9 @@
   },
   {
     "type": "StandardReactance",
-    "template": "<path d='M18,63 V36 H33 C33,42 27,51 18,51 9,51 3,42 3,36 3,27 9,21 18,21 V6 V21' fill='none' :stroke='svg_color' stroke-width='2' transform='translate(-18,-36) scale(1)' data-v-d903d4f8=''></path>",
+    "template": "<path d='M18,63 V36 H33 C33,42 27,51 18,51 9,51 3,42 3,36 3,27 9,21 18,21 V6 V21' fill='none' :stroke='selectSvgInfo.svgColor' stroke-width='2' transform='translate(-18,-36) scale(1)' data-v-d903d4f8=''></path>",
     "props": [
-      "svg_color"
+      "selectSvgInfo"
     ],
     "default_color": "#CCCC00",
     "priviewImg": "/vuefiv/StandardReactance.png",
@@ -786,7 +763,6 @@
       "svgPositionY": 0,
       "size": 1,
       "height": 3,
-      "fontSize": 1,
       "svgText": "",
       "angle": 0,
       "tableRowCount": 2,
@@ -802,9 +778,9 @@
   },
   {
     "type": "AlternatorSvg",
-    "template": "<ellipse id='c1' cx='50' cy='50' rx='35' ry='35' fill='none' :stroke='svg_color' stroke-width='2' transform='translate(-50,-50) scale(1)'></ellipse><path id='l1' d='M30,50 C30,44 34,40 40,40 46,40 50,44 50,50 M50,50 C50,56 54,60 60,60 66,60 70,56 70,50 ' fill='none' :stroke='svg_color' stroke-width='2' transform='translate(-50,-50) scale(1)'></path>",
+    "template": "<ellipse id='c1' cx='50' cy='50' rx='35' ry='35' fill='none' :stroke='selectSvgInfo.svgColor' stroke-width='2' transform='translate(-50,-50) scale(1)'></ellipse><path id='l1' d='M30,50 C30,44 34,40 40,40 46,40 50,44 50,50 M50,50 C50,56 54,60 60,60 66,60 70,56 70,50 ' fill='none' :stroke='selectSvgInfo.svgColor' stroke-width='2' transform='translate(-50,-50) scale(1)'></path>",
     "props": [
-      "svg_color",
+      "selectSvgInfo",
       "height"
     ],
     "default_color": "#FF0000",
@@ -820,7 +796,6 @@
       "svgPositionY": 0,
       "size": 1,
       "height": 5,
-      "fontSize": 1,
       "svgText": "",
       "angle": 0,
       "tableRowCount": 2,

public/InterfaceReturn1.json

@@ -0,0 +1,473 @@
+[
+  {
+    "type": "AlternatorSvg",
+    "title": "发电机",
+    "template": "<ellipse id=\"c1\" cx=\"50\" cy=\"50\" rx=\"35\" ry=\"35\" fill=\"none\" :stroke=\"prop_data.svgColor\" stroke-width=\"2\" transform=\"translate(-50,-50)\"></ellipse><path id=\"l1\" d=\"M30,50 C30,44 34,40 40,40 46,40 50,44 50,50 M50,50 C50,56 54,60 60,60 66,60 70,56 70,50 \" fill=\"none\" :stroke=\"prop_data.svgColor\" stroke-width=\"2\" transform=\"translate(-50,-50)\"></path>",
+    "props": [
+      "prop_data"
+    ],
+    "defaultColor": "#FF0000",
+    "dataType": "none",
+    "createType": "draggable",
+    "priviewImg": "/AlternatorSvg.png",
+    "echartsOption": "",
+    "elementBool": [
+      "draggable",
+      "switchType"
+    ],
+    "svgLineSelectval": ""
+  },
+  {
+    "type": "ArrowDownSvg",
+    "title": "箭头向下",
+    "template": "<polygon  points=\"0,-8 5,0 10,-8\" :fill=\"prop_data.svgColor\" :stroke=\"prop_data.svgColor\" stroke-width=\"2\" transform=\"translate(-5,0)\"></polygon>",
+    "props": [
+      "prop_data"
+    ],
+    "defaultColor": "#FF0000",
+    "dataType": "none",
+    "createType": "draggable",
+    "priviewImg": "/ArrowDownSvg.png",
+    "echartsOption": "",
+    "elementBool": [
+      "draggable",
+      "switchType"
+    ],
+    "svgLineSelectval": ""
+  },
+  {
+    "type": "ArrowUpSvg",
+    "title": "箭头向上",
+    "template": "<polygon  points=\"0,8 5,0 10,8\" :fill=\"prop_data.svgColor\" :stroke=\"prop_data.svgColor\" stroke-width=\"2\" transform=\"translate(-5,0)\"></polygon>",
+    "props": [
+      "prop_data"
+    ],
+    "defaultColor": "#FF0000",
+    "dataType": "none",
+    "createType": "draggable",
+    "priviewImg": "/ArrowUpSvg.png",
+    "echartsOption": "",
+    "elementBool": [
+      "draggable",
+      "switchType"
+    ],
+    "svgLineSelectval": ""
+  },
+  {
+    "type": "CircuitBreakerSvg",
+    "title": "断路器",
+    "template": "<rect x=\"0\" y=\"0\" width=\"20\" height=\"40\" :fill=\"prop_data.svgColor\" :stroke=\"prop_data.svgColor\" stroke-width=\"2\" transform=\"translate(-10,-20)\"></rect>",
+    "props": [
+      "prop_data"
+    ],
+    "defaultColor": "#FF0000",
+    "dataType": "switch",
+    "createType": "draggable",
+    "priviewImg": "/CircuitBreakerSvg.png",
+    "echartsOption": "",
+    "elementBool": [
+      "draggable",
+      "switchType"
+    ],
+    "svgLineSelectval": ""
+  },
+  {
+    "type": "DoubleWindingSvg",
+    "title": "双绕组变压器",
+    "template": "<ellipse cx=\"0\" cy=\"-20\" rx=\"25\" ry=\"25\" fill=\"none\" :stroke=\"prop_data.svgColor\" stroke-width=\"2\" ></ellipse>     <ellipse  cx=\"0\" cy=\"20\" rx=\"25\" ry=\"25\" fill=\"none\" :stroke=\"prop_data.svgColor\" stroke-width=\"2\" ></ellipse>     <polygon  points=\"10,-30 0,-10 -10,-30\" fill=\"none\" :stroke=\"prop_data.svgColor\" stroke-width=\"2\"></polygon>     <line  x1=\"0\" y1=\"20\" x2=\"0\" y2=\"35\" fill=\"none\" :stroke=\"prop_data.svgColor\" stroke-width=\"2\"></line>     <line  x1=\"0\" y1=\"20\" x2=\"-10\" y2=\"10\" fill=\"none\" :stroke=\"prop_data.svgColor\" stroke-width=\"2\"></line>     <line  x1=\"0\" y1=\"20\" x2=\"10\" y2=\"10\" fill=\"none\" :stroke=\"prop_data.svgColor\" stroke-width=\"2\"></line>",
+    "props": [
+      "prop_data"
+    ],
+    "defaultColor": "#FF0000",
+    "dataType": "none",
+    "createType": "draggable",
+    "priviewImg": "/DoubleWindingSvg.png",
+    "echartsOption": "",
+    "elementBool": [
+      "draggable",
+      "switchType"
+    ],
+    "svgLineSelectval": ""
+  },
+  {
+    "type": "GGJSvg",
+    "title": "电容柜",
+    "template": "<line x1=\"0.5\" y1=\"-25\" x2=\"-9.5\" y2=\"-13\" fill=\"none\" :stroke=\"prop_data.svgColor\" stroke-width=\"2\" ></line> <line  x1=\"0.5\" y1=\"-26\" x2=\"9.5\" y2=\"-13\" fill=\"none\" :stroke=\"prop_data.svgColor\" stroke-width=\"2\" ></line> <line  x1=\"-12\" y1=\"-17\" x2=\"-6\" y2=\"-8\" fill=\"none\" :stroke=\"prop_data.svgColor\" stroke-width=\"2\"></line> <line  x1=\"-15\" y1=\"-12\" x2=\"-9\" y2=\"-3\" fill=\"none\" :stroke=\"prop_data.svgColor\" stroke-width=\"2\"></line> <polyline  points=\"-13,-8 -22,3 -22,5\" fill=\"none\" :stroke=\"prop_data.svgColor\" stroke-width=\"2\" ></polyline> <line x1=\"-21\" y1=\"4\" x2=\"-4\" y2=\"4\" fill=\"none\" :stroke=\"prop_data.svgColor\" stroke-width=\"2\" ></line> <line x1=\"-5\" y1=\"-2\" x2=\"-5\" y2=\"11\" fill=\"none\" :stroke=\"prop_data.svgColor\" stroke-width=\"2\" ></line> <line x1=\"3\" y1=\"-2\" x2=\"3\" y2=\"11\" fill=\"none\" :stroke=\"prop_data.svgColor\" stroke-width=\"2\" ></line> <line x1=\"4\" y1=\"4\" x2=\"21\" y2=\"4\" fill=\"none\" :stroke=\"prop_data.svgColor\" stroke-width=\"2\" ></line> <polyline  points=\"13,-8 22,3 22,5\" fill=\"none\" :stroke=\"prop_data.svgColor\" stroke-width=\"2\" ></polyline> <line  x1=\"14\" y1=\"-12\" x2=\"8\" y2=\"-3\" fill=\"none\" :stroke=\"prop_data.svgColor\" stroke-width=\"2\"></line> <line  x1=\"12\" y1=\"-17\" x2=\"6\" y2=\"-8\" fill=\"none\" :stroke=\"prop_data.svgColor\" stroke-width=\"2\"></line>",
+    "props": [
+      "prop_data"
+    ],
+    "defaultColor": "#FF6600",
+    "dataType": "none",
+    "createType": "draggable",
+    "priviewImg": "/GGJ.png",
+    "echartsOption": "",
+    "elementBool": [
+      "draggable",
+      "svgColor"
+    ],
+    "svgLineSelectval": ""
+  },
+  {
+    "type": "GroundGraySvg",
+    "title": "接地灰白",
+    "template": "<line x1=\"9\" y1=\"9\" x2=\"9\" y2=\"0\" fill=\"none\" :stroke=\"prop_data.svgColor\" stroke-width=\"2\" transform=\"translate(-9,-6)\"></line> <line x1=\"0\" y1=\"9\" x2=\"18\" y2=\"9\" fill=\"none\" :stroke=\"prop_data.svgColor\" stroke-width=\"2\" transform=\"translate(-9,-6)\"></line> <line x1=\"3\" y1=\"15\" x2=\"15\" y2=\"15\" fill=\"none\" :stroke=\"prop_data.svgColor\" stroke-width=\"2\" transform=\"translate(-9,-6)\"></line> <line x1=\"6\" y1=\"21\" x2=\"12\" y2=\"21\" fill=\"none\" :stroke=\"prop_data.svgColor\" stroke-width=\"2\" transform=\"translate(-9,-6)\"></line>",
+    "props": [
+      "prop_data"
+    ],
+    "defaultColor": "#CCCCCC",
+    "dataType": "none",
+    "createType": "draggable",
+    "priviewImg": "/GroundGraySvg.png",
+    "echartsOption": "",
+    "elementBool": [
+      "draggable",
+      "svgColor"
+    ],
+    "svgLineSelectval": ""
+  },
+  {
+    "type": "IsolatingSwitchSvg",
+    "title": "隔离开关",
+    "template": "<line x1=\"0\" y1=\"-20\" x2=\"0\" y2=\"0\" fill=\"none\" :stroke=\"prop_data.svgColor\" stroke-width=\"2\"></line> <line x1=\"-10\" y1=\"0\" x2=\"6\" y2=\"0\" fill=\"none\" :stroke=\"prop_data.svgColor\" stroke-width=\"2\"></line> <line x1=\"0\" y1=\"20\" x2=\"-10\" y2=\"5\" fill=\"none\" :stroke=\"prop_data.svgColor\" stroke-width=\"2\"></line> <line x1=\"0\" y1=\"40\" x2=\"0\" y2=\"20\" fill=\"none\" :stroke=\"prop_data.svgColor\" stroke-width=\"2\"></line> ",
+    "props": [
+      "prop_data"
+    ],
+    "defaultColor": "#FF0000",
+    "dataType": "none",
+    "createType": "draggable",
+    "priviewImg": "/IsolatingSwitchSvg.png",
+    "echartsOption": "",
+    "elementBool": [
+      "draggable",
+      "switchType"
+    ],
+    "svgLineSelectval": ""
+  },
+  {
+    "type": "LightningArresterSvg",
+    "title": "避雷器",
+    "template": "<rect x=\"-7\" y=\"-14\" width=\"15\" height=\"35\" fill=\"none\" :stroke=\"prop_data.svgColor\" stroke-width=\"2\"></rect> <line x1=\"0\" y1=\"-21\" x2=\"0\" y2=\"0\" fill=\"none\" :stroke=\"prop_data.svgColor\" stroke-width=\"2\"></line> <line x1=\"0\" y1=\"21\" x2=\"0\" y2=\"28\" fill=\"none\" :stroke=\"prop_data.svgColor\" stroke-width=\"2\"></line> <polyline points=\"-1,-7 0,0 1,-7\" fill=\"none\" :stroke=\"prop_data.svgColor\" stroke-width=\"2\"></polyline>",
+    "props": [
+      "prop_data"
+    ],
+    "defaultColor": "#FF0000",
+    "dataType": "none",
+    "createType": "draggable",
+    "priviewImg": "/LightningArresterSvg.png",
+    "echartsOption": "",
+    "elementBool": [
+      "draggable",
+      "switchType"
+    ],
+    "svgLineSelectval": ""
+  },
+  {
+    "type": "PolylineSvg",
+    "title": "多段折线",
+    "template": "<polyline points=\"0,7 13,-7 26,7\" fill=\"none\" :stroke=\"prop_data.svgColor\" stroke-width=\"2\" transform=\"translate(-13,0)\"></polyline> <polyline points=\"0,7 13,-7 26,7\" fill=\"none\" :stroke=\"prop_data.svgColor\" stroke-width=\"2\" transform=\"translate(-13,8)\"></polyline> ",
+    "props": [
+      "prop_data"
+    ],
+    "defaultColor": "#FF0000",
+    "dataType": "none",
+    "createType": "draggable",
+    "priviewImg": "/PolylineUpSvg.png",
+    "echartsOption": "",
+    "elementBool": [
+      "draggable",
+      "switchType"
+    ],
+    "svgLineSelectval": ""
+  },
+  {
+    "type": "RectSvg",
+    "title": "长方形",
+    "template": "<rect x=\"-5\" y=\"-15\" width=\"10\" height=\"30\" fill=\"none\" :stroke=\"prop_data.svgColor\" stroke-width=\"2\" stroke-linecap=\"round\"></rect>",
+    "props": [
+      "prop_data"
+    ],
+    "defaultColor": "#FF0000",
+    "dataType": "none",
+    "createType": "draggable",
+    "priviewImg": "/RectSvg.png",
+    "echartsOption": "",
+    "elementBool": [
+      "draggable",
+      "switchType"
+    ],
+    "svgLineSelectval": ""
+  },
+  {
+    "type": "SignalLampSvg",
+    "title": "信号灯",
+    "template": "<ellipse cx=\"7\" cy=\"22\" rx=\"12\" ry=\"12\" fill=\"none\" :stroke=\"prop_data.svgColor\" stroke-width=\"2\" transform=\"translate(-7,-22)\"></ellipse> <line x1=\"0\" y1=\"30\" x2=\"15\" y2=\"15\" fill=\"none\" :stroke=\"prop_data.svgColor\" stroke-width=\"2\" transform=\"translate(-7,-22)\"></line> <line x1=\"15\" y1=\"30\" x2=\"0\" y2=\"15\" fill=\"none\" :stroke=\"prop_data.svgColor\" stroke-width=\"2\" transform=\"translate(-7,-22)\"></line>",
+    "props": [
+      "prop_data"
+    ],
+    "defaultColor": "#FF0000",
+    "dataType": "none",
+    "createType": "draggable",
+    "priviewImg": "/SignalLamp.png",
+    "echartsOption": "",
+    "elementBool": [
+      "draggable",
+      "switchType"
+    ],
+    "svgLineSelectval": ""
+  },
+  {
+    "type": "StandardCapacitorSvg",
+    "title": "标准电容器",
+    "template": "<line x1=\"0\" y1=\"-12\" x2=\"0\" y2=\"-3\" fill=\"none\" :stroke=\"prop_data.svgColor\" stroke-width=\"2\"></line> <line x1=\"-9\" y1=\"-3\" x2=\"9\" y2=\"-3\" fill=\"none\" :stroke=\"prop_data.svgColor\" stroke-width=\"2\"></line> <line x1=\"-9\" y1=\"3\" x2=\"9\" y2=\"3\" fill=\"none\" :stroke=\"prop_data.svgColor\" stroke-width=\"2\"></line> <line x1=\"0\" y1=\"12\" x2=\"0\" y2=\"3\" fill=\"none\" :stroke=\"prop_data.svgColor\" stroke-width=\"2\"></line>",
+    "props": [
+      "prop_data"
+    ],
+    "defaultColor": "#FF0000",
+    "dataType": "none",
+    "createType": "draggable",
+    "priviewImg": "/StandardCapacitorSvg.png",
+    "echartsOption": "",
+    "elementBool": [
+      "draggable",
+      "switchType"
+    ],
+    "svgLineSelectval": ""
+  },
+  {
+    "type": "StandardReactanceSvg",
+    "title": "标准电抗",
+    "template": "<path d=\"M18,63 V36 H33 C33,42 27,51 18,51 9,51 3,42 3,36 3,27 9,21 18,21 V6 V21\" fill=\"none\" :stroke=\"prop_data.svgColor\" stroke-width=\"2\" transform=\"translate(-18,-36)\"></path>",
+    "props": [
+      "prop_data"
+    ],
+    "defaultColor": "#FF0000",
+    "dataType": "none",
+    "createType": "draggable",
+    "priviewImg": "/StandardReactanceSvg.png",
+    "echartsOption": "",
+    "elementBool": [
+      "draggable",
+      "switchType"
+    ],
+    "svgLineSelectval": ""
+  },
+  {
+    "type": "TextSvg",
+    "title": "文字",
+    "template": "<text x=\"0\" y=\"10\" font-size=\"10\" :fill=\"prop_data.svgColor\">{{prop_data.title}}</text>",
+    "props": [
+      "prop_data"
+    ],
+    "defaultColor": "#FF0000",
+    "dataType": "none",
+    "createType": "draggable",
+    "priviewImg": "/TextSvg.png",
+    "echartsOption": "",
+    "elementBool": [
+      "draggable",
+      "svgColor"
+    ],
+    "svgLineSelectval": ""
+  },
+  {
+    "type": "TextSvg1",
+    "title": "绑定值",
+    "template": "<text x=\"0\" y=\"0\" font-size=\"10\" :fill=\"prop_data.svgColor\">{{prop_data.title}}</text>",
+    "props": [
+      "prop_data"
+    ],
+    "defaultColor": "#FF0000",
+    "dataType": "none",
+    "createType": "draggable",
+    "priviewImg": "/TextSvg.png",
+    "echartsOption": "",
+    "elementBool": [
+      "draggable",
+      "svgColor"
+    ],
+    "svgLineSelectval": ""
+  },
+  {
+    "type": "TransformerTriphaseOpenSvg",
+    "title": "三相互感器",
+    "template": "<ellipse cx=\"0\" cy=\"0\" rx=\"10\" ry=\"10\" fill=\"none\" :stroke=\"prop_data.svgColor\" stroke-width=\"2\"></ellipse> <line x1=\"-2\" y1=\"-6\" x2=\"-2\" y2=\"6\" fill=\"none\" :stroke=\"prop_data.svgColor\" stroke-width=\"2\"></line> <line x1=\"-2\" y1=\"-6\" x2=\"4\" y2=\"0\" fill=\"none\" :stroke=\"prop_data.svgColor\" stroke-width=\"2\"></line> <line x1=\"4\" y1=\"2\" x2=\"-2\" y2=\"6\" fill=\"none\" :stroke=\"prop_data.svgColor\" stroke-width=\"2\"></line>",
+    "props": [
+      "prop_data"
+    ],
+    "defaultColor": "#FF0000",
+    "dataType": "none",
+    "createType": "draggable",
+    "priviewImg": "/TransformerTriphaseOpen.png",
+    "echartsOption": "",
+    "elementBool": [
+      "draggable",
+      "switchType"
+    ],
+    "svgLineSelectval": ""
+  },
+  {
+    "type": "TransformerYSvg",
+    "title": "电流互感器Y",
+    "template": "<ellipse cx=\"0\" cy=\"0\" rx=\"10\" ry=\"10\" fill=\"none\" :stroke=\"prop_data.svgColor\" stroke-width=\"2\"></ellipse> <line x1=\"5\" y1=\"-5\" x2=\"0\" y2=\"0\" fill=\"none\" :stroke=\"prop_data.svgColor\" stroke-width=\"2\"></line> <line x1=\"-5\" y1=\"-5\" x2=\"0\" y2=\"0\" fill=\"none\" :stroke=\"prop_data.svgColor\" stroke-width=\"2\"></line> <line x1=\"0\" y1=\"0\" x2=\"0\" y2=\"5\" fill=\"none\" :stroke=\"prop_data.svgColor\" stroke-width=\"2\"></line>",
+    "props": [
+      "prop_data"
+    ],
+    "defaultColor": "#FF0000",
+    "dataType": "none",
+    "createType": "draggable",
+    "priviewImg": "/TransformerY.png",
+    "echartsOption": "",
+    "elementBool": [
+      "draggable",
+      "switchType"
+    ],
+    "svgLineSelectval": ""
+  },
+  {
+    "type": "TwoCircleSvg",
+    "title": "双圆",
+    "template": "<ellipse cx=\"0\" cy=\"-4.5\" rx=\"6\" ry=\"6\" fill=\"none\" :stroke=\"prop_data.svgColor\" stroke-width=\"2\"></ellipse> <ellipse cx=\"0\" cy=\"4.5\" rx=\"6\" ry=\"6\" fill=\"none\" :stroke=\"prop_data.svgColor\" stroke-width=\"2\"></ellipse>",
+    "props": [
+      "prop_data"
+    ],
+    "defaultColor": "#FF0000",
+    "dataType": "none",
+    "createType": "draggable",
+    "priviewImg": "/TwoCircleSvg.png",
+    "echartsOption": "",
+    "elementBool": [
+      "draggable",
+      "switchType"
+    ],
+    "svgLineSelectval": ""
+  },
+  {
+    "type": "WireBreakOffSvg",
+    "title": "电线开关-断开",
+    "template": "<line x1=\"0\" y1=\"-40\" x2=\"0\" y2=\"-15\" fill=\"none\" :stroke=\"prop_data.svgColor\" stroke-width=\"2\"></line> <line x1=\"0\" y1=\"15\" x2=\"-10\" y2=\"-15\" fill=\"none\" :stroke=\"prop_data.svgColor\" stroke-width=\"2\"></line> <line x1=\"0\" y1=\"45\" x2=\"0\" y2=\"15\" fill=\"none\" :stroke=\"prop_data.svgColor\" stroke-width=\"2\"></line>",
+    "props": [
+      "prop_data"
+    ],
+    "defaultColor": "#FF0000",
+    "dataType": "change",
+    "createType": "draggable",
+    "priviewImg": "/WireBreakOffSvg.png",
+    "echartsOption": "",
+    "elementBool": [
+      "draggable"
+    ],
+    "svgLineSelectval": ""
+  },
+  {
+    "type": "WireBreakOnSvg",
+    "title": "电线开关-连接",
+    "template": "<line x1=\"0\" y1=\"-40\" x2=\"0\" y2=\"-15\" fill=\"none\" :stroke=\"prop_data.svgColor\" stroke-width=\"2\"></line> <line x1=\"0\" y1=\"15\" x2=\"0\" y2=\"-15\" fill=\"none\" :stroke=\"prop_data.svgColor\" stroke-width=\"2\"></line> <line x1=\"0\" y1=\"45\" x2=\"0\" y2=\"15\" fill=\"none\" :stroke=\"prop_data.svgColor\" stroke-width=\"2\"></line>",
+    "props": [
+      "prop_data"
+    ],
+    "defaultColor": "#00FF00",
+    "dataType": "change",
+    "createType": "draggable",
+    "priviewImg": "/WireBreakOnSvg.png",
+    "echartsOption": "",
+    "elementBool": [
+      "draggable"
+    ],
+    "svgLineSelectval": ""
+  },
+  {
+    "type": "ConnLineSvg",
+    "title": "连接线",
+    "template": "<line x1=\"0\" y1=\"0\" :x2=\"(prop_data.mPoint.endX-prop_data.mPoint.startX)\" :y2=\"(prop_data.mPoint.endY-prop_data.mPoint.startY)\" :fill=\"prop_data.svgColor\" :stroke=\"prop_data.svgColor\" stroke-width=\"2\" :class=\"prop_data.svgLineSelectval\"></line>",
+    "props": [
+      "prop_data"
+    ],
+    "defaultColor": "#FF0000",
+    "dataType": "none",
+    "createType": "click",
+    "priviewImg": "/VerticalLineSvg.png",
+    "echartsOption": "",
+    "elementBool": [
+      "draw",
+      "svgColor",
+      "svgLineSelectval",
+      "endY",
+      "endX"
+    ],
+    "svgLineSelectval": ""
+  },
+  {
+    "type": "ConnHorizontalLineSvg",
+    "title": "连接线-横线",
+    "template": "<line x1=\"0\" y1=\"0\" :x2=\"(prop_data.mPoint.endX-prop_data.mPoint.startX)\" y2=\"0\" :fill=\"prop_data.svgColor\" :stroke=\"prop_data.svgColor\" stroke-width=\"2\" :class=\"prop_data.svgLineSelectval\"></line>",
+    "props": [
+      "prop_data"
+    ],
+    "defaultColor": "#FF0000",
+    "dataType": "none",
+    "createType": "click",
+    "priviewImg": "/HorizontalLineSvg.png",
+    "echartsOption": "",
+    "elementBool": [
+      "draw",
+      "svgColor",
+      "svgLineSelectval",
+      "endX"
+    ],
+    "svgLineSelectval": ""
+  },
+  {
+    "type": "ConnVerticalLineSvg",
+    "title": "连接线-竖线",
+    "template": "<line x1=\"0\" y1=\"0\" x2=\"0\" :y2=\"(prop_data.mPoint.endY-prop_data.mPoint.startY)\" :fill=\"prop_data.svgColor\" :stroke=\"prop_data.svgColor\" :class=\"prop_data.svgLineSelectval\" stroke-width=\"2\"></line>",
+    "props": [
+      "prop_data"
+    ],
+    "defaultColor": "#FF0000",
+    "dataType": "none",
+    "createType": "click",
+    "priviewImg": "/VerticalLineSvg.png",
+    "echartsOption": "",
+    "elementBool": [
+      "draw",
+      "svgColor",
+      "svgLineSelectval",
+      "endY"
+    ],
+    "svgLineSelectval": ""
+  },
+  {
+    "type": "EchartsPieSvg",
+    "title": "Echart饼图",
+    "template": "<foreignObject x=\"0\" y=\"0\" width=\"600\" height=\"500\"> <v-chart :option=\"prop_data.echartsOption\" /></foreignObject>",
+    "props": [
+      "prop_data"
+    ],
+    "defaultColor": "#000000",
+    "dataType": "echarts",
+    "createType": "draggable",
+    "priviewImg": "/ECharts_PieSvg.png",
+    "echartsOption": "{\"title\":{\"text\":\"某站点用户访问来源\",\"subtext\":\"纯属虚构\",\"left\":\"center\"},\"tooltip\":{\"trigger\":\"item\"},\"legend\":{\"orient\":\"vertical\",\"left\":\"left\"},\"series\":[{\"name\":\"访问来源\",\"type\":\"pie\",\"radius\":\"50%\",\"data\":[{\"value\":1048,\"name\":\"搜索引擎\"},{\"value\":735,\"name\":\"直接访问\"},{\"value\":580,\"name\":\"邮件营销\"},{\"value\":484,\"name\":\"联盟广告\"},{\"value\":300,\"name\":\"视频广告\"}],\"emphasis\":{\"itemStyle\":{\"shadowBlur\":10,\"shadowOffsetX\":0,\"shadowColor\":\"rgba(0, 0, 0, 0.5)\"}}}]}",
+    "elementBool": [
+      "chart"
+    ],
+    "svgLineSelectval": ""
+  },
+  {
+    "type": "EchartsBasicBarSvg",
+    "title": "Echart基础柱状图",
+    "template": "<foreignObject x=\"0\" y=\"0\" width=\"400\" height=\"400\"> <v-chart :option=\"prop_data.echartsOption\" /></foreignObject>",
+    "props": [
+      "prop_data"
+    ],
+    "defaultColor": "#000000",
+    "dataType": "echarts",
+    "createType": "draggable",
+    "priviewImg": "/ECharts_BasicBar.png",
+    "echartsOption": "{\"xAxis\":{\"type\":\"category\",\"data\":[\"Mon\",\"Tue\",\"Wed\",\"Thu\",\"Fri\",\"Sat\",\"Sun\"]},\"yAxis\":{\"type\":\"value\"},\"series\":[{\"data\":[120,200,150,80,70,110,130],\"type\":\"bar\"}]}",
+    "elementBool": [
+      "chart"
+    ],
+    "svgLineSelectval": ""
+  }
+]

public/example.json

@@ -0,0 +1,2756 @@
+[
+	{
+		"id": "f1d2c15a-acd9-4eeb-8d16-c97f6f16e771",
+		"title": "演示监控系统",
+		"type": "TextSvg",
+		"typeName": "文字",
+		"svgColor": "#ffdd00",
+		"createType": "draggable",
+		"svgPositionX": 749,
+		"svgPositionY": 60,
+		"mPoint": {
+			"startX": 0,
+			"startY": 0,
+			"endX": 0,
+			"endY": 0
+		},
+		"echartsOption": "",
+		"size": 5,
+		"angle": 0,
+		"elementBool": [
+			"draggable",
+			"svgColor"
+		],
+		"svgLineSelectval": ""
+	},
+	{
+		"id": "8f18beea-31f0-4e25-bc8e-f717bd10736f",
+		"title": "连接线",
+		"type": "ConnLineSvg",
+		"typeName": "连接线",
+		"svgColor": "#FF0000",
+		"createType": "click",
+		"svgPositionX": 749,
+		"svgPositionY": 129,
+		"mPoint": {
+			"startX": 473,
+			"startY": 92,
+			"endX": 674,
+			"endY": 92
+		},
+		"echartsOption": "",
+		"size": 1.1,
+		"angle": 0,
+		"elementBool": [
+			"draw",
+			"svgColor",
+			"svgLineSelectval",
+			"endY",
+			"endX"
+		],
+		"svgLineSelectval": ""
+	},
+	{
+		"id": "1e62abda-bcbc-45c8-a15b-d217ab137632",
+		"title": "连接线",
+		"type": "ConnLineSvg",
+		"typeName": "连接线",
+		"svgColor": "#FF0000",
+		"createType": "click",
+		"svgPositionX": 57,
+		"svgPositionY": 129,
+		"mPoint": {
+			"startX": 66,
+			"startY": 117,
+			"endX": 454,
+			"endY": 117
+		},
+		"echartsOption": "",
+		"size": 1.1,
+		"angle": 0,
+		"elementBool": [
+			"draw",
+			"svgColor",
+			"svgLineSelectval",
+			"endY",
+			"endX"
+		],
+		"svgLineSelectval": ""
+	},
+	{
+		"id": "a235e449-aed3-471e-b744-f831940e5d43",
+		"title": "连接线",
+		"type": "ConnLineSvg",
+		"typeName": "连接线",
+		"svgColor": "#FF0000",
+		"createType": "click",
+		"svgPositionX": 1181,
+		"svgPositionY": 129,
+		"mPoint": {
+			"startX": 1183,
+			"startY": 131,
+			"endX": 1643,
+			"endY": 130
+		},
+		"echartsOption": "",
+		"size": 1.1,
+		"angle": 0,
+		"elementBool": [
+			"draw",
+			"svgColor",
+			"svgLineSelectval",
+			"endY",
+			"endX"
+		],
+		"svgLineSelectval": ""
+	},
+	{
+		"id": "b6548ff3-8a77-4172-8c03-76e0866b0916",
+		"title": "连接线",
+		"type": "ConnLineSvg",
+		"typeName": "连接线",
+		"svgColor": "#FF0000",
+		"createType": "click",
+		"svgPositionX": 123,
+		"svgPositionY": 130,
+		"mPoint": {
+			"startX": 123,
+			"startY": 131,
+			"endX": 122,
+			"endY": 461
+		},
+		"echartsOption": "",
+		"size": 1,
+		"angle": 0,
+		"elementBool": [
+			"draw",
+			"svgColor",
+			"svgLineSelectval",
+			"endY",
+			"endX"
+		],
+		"svgLineSelectval": ""
+	},
+	{
+		"id": "33f1b4d4-d10c-486b-a742-a0338df7c166",
+		"title": "多段折线",
+		"type": "PolylineSvg",
+		"typeName": "多段折线",
+		"svgColor": "#FF0000",
+		"createType": "draggable",
+		"svgPositionX": 123,
+		"svgPositionY": 170,
+		"mPoint": {
+			"startX": 0,
+			"startY": 0,
+			"endX": 0,
+			"endY": 0
+		},
+		"echartsOption": "",
+		"size": 1,
+		"angle": 0,
+		"elementBool": [
+			"draggable",
+			"switchType"
+		],
+		"svgLineSelectval": ""
+	},
+	{
+		"id": "eec5edea-4961-45ac-8cec-d3fdf666ab3f",
+		"title": "断路器",
+		"type": "CircuitBreakerSvg",
+		"typeName": "断路器",
+		"svgColor": "#FF0000",
+		"createType": "draggable",
+		"svgPositionX": 123,
+		"svgPositionY": 211,
+		"mPoint": {
+			"startX": 0,
+			"startY": 0,
+			"endX": 0,
+			"endY": 0
+		},
+		"echartsOption": "",
+		"size": 1,
+		"angle": 0,
+		"elementBool": [
+			"draggable",
+			"switchType"
+		],
+		"svgLineSelectval": ""
+	},
+	{
+		"id": "841e8de6-0355-4347-8747-5b4850201a16",
+		"title": "多段折线",
+		"type": "PolylineSvg",
+		"typeName": "多段折线",
+		"svgColor": "#FF0000",
+		"createType": "draggable",
+		"svgPositionX": 123,
+		"svgPositionY": 252,
+		"mPoint": {
+			"startX": 0,
+			"startY": 0,
+			"endX": 0,
+			"endY": 0
+		},
+		"echartsOption": "",
+		"size": 1,
+		"angle": 180,
+		"elementBool": [
+			"draggable",
+			"switchType"
+		],
+		"svgLineSelectval": ""
+	},
+	{
+		"id": "1457d30a-1d8f-41ff-84ca-db525777b56d",
+		"title": "箭头向上",
+		"type": "ArrowUpSvg",
+		"typeName": "箭头向上",
+		"svgColor": "#FF0000",
+		"createType": "draggable",
+		"svgPositionX": 122,
+		"svgPositionY": 410,
+		"mPoint": {
+			"startX": 0,
+			"startY": 0,
+			"endX": 0,
+			"endY": 0
+		},
+		"echartsOption": "",
+		"size": 1,
+		"angle": 0,
+		"elementBool": [
+			"draggable",
+			"switchType"
+		],
+		"svgLineSelectval": ""
+	},
+	{
+		"id": "779f1ae2-7e5b-46f1-a380-96b17b290cfb",
+		"title": "接地灰白",
+		"type": "GroundGraySvg",
+		"typeName": "接地灰白",
+		"svgColor": "#CCCCCC",
+		"createType": "draggable",
+		"svgPositionX": 80,
+		"svgPositionY": 444,
+		"mPoint": {
+			"startX": 0,
+			"startY": 0,
+			"endX": 0,
+			"endY": 0
+		},
+		"echartsOption": "",
+		"size": 1,
+		"angle": 0,
+		"elementBool": [
+			"draggable",
+			"svgColor"
+		],
+		"svgLineSelectval": ""
+	},
+	{
+		"id": "976c6e82-1fc4-46ae-8505-f4a6c75dc766",
+		"title": "接地灰白",
+		"type": "GroundGraySvg",
+		"typeName": "接地灰白",
+		"svgColor": "#CCCCCC",
+		"createType": "draggable",
+		"svgPositionX": 158,
+		"svgPositionY": 444,
+		"mPoint": {
+			"startX": 0,
+			"startY": 0,
+			"endX": 0,
+			"endY": 0
+		},
+		"echartsOption": "",
+		"size": 1,
+		"angle": 0,
+		"elementBool": [
+			"draggable",
+			"svgColor"
+		],
+		"svgLineSelectval": ""
+	},
+	{
+		"id": "d4e75ccf-ca52-4067-8252-658b84d188df",
+		"title": "避雷器",
+		"type": "LightningArresterSvg",
+		"typeName": "避雷器",
+		"svgColor": "#FF0000",
+		"createType": "draggable",
+		"svgPositionX": 80,
+		"svgPositionY": 410,
+		"mPoint": {
+			"startX": 0,
+			"startY": 0,
+			"endX": 0,
+			"endY": 0
+		},
+		"echartsOption": "",
+		"size": 1,
+		"angle": 0,
+		"elementBool": [
+			"draggable",
+			"switchType"
+		],
+		"svgLineSelectval": ""
+	},
+	{
+		"id": "0fd4abe0-f40d-4617-8826-69ad783ccb6f",
+		"title": "信号灯",
+		"type": "SignalLampSvg",
+		"typeName": "信号灯",
+		"svgColor": "#FF0000",
+		"createType": "draggable",
+		"svgPositionX": 158,
+		"svgPositionY": 423,
+		"mPoint": {
+			"startX": 0,
+			"startY": 0,
+			"endX": 0,
+			"endY": 0
+		},
+		"echartsOption": "",
+		"size": 1,
+		"angle": 0,
+		"elementBool": [
+			"draggable",
+			"switchType"
+		],
+		"svgLineSelectval": ""
+	},
+	{
+		"id": "fb455be2-49a9-41d5-81bc-eb96a24a2055",
+		"title": "标准电容器",
+		"type": "StandardCapacitorSvg",
+		"typeName": "标准电容器",
+		"svgColor": "#FF0000",
+		"createType": "draggable",
+		"svgPositionX": 158,
+		"svgPositionY": 398,
+		"mPoint": {
+			"startX": 0,
+			"startY": 0,
+			"endX": 0,
+			"endY": 0
+		},
+		"echartsOption": "",
+		"size": 1,
+		"angle": 0,
+		"elementBool": [
+			"draggable",
+			"switchType"
+		],
+		"svgLineSelectval": ""
+	},
+	{
+		"id": "9bffb936-f588-4f50-be71-dbd80da371ab",
+		"title": "连接线",
+		"type": "ConnLineSvg",
+		"typeName": "连接线",
+		"svgColor": "#FF0000",
+		"createType": "click",
+		"svgPositionX": 80,
+		"svgPositionY": 389,
+		"mPoint": {
+			"startX": 79,
+			"startY": 389,
+			"endX": 79,
+			"endY": 372
+		},
+		"echartsOption": "",
+		"size": 1,
+		"angle": 0,
+		"elementBool": [
+			"draw",
+			"svgColor",
+			"svgLineSelectval",
+			"endY",
+			"endX"
+		],
+		"svgLineSelectval": ""
+	},
+	{
+		"id": "80a7344e-b549-4055-92e5-ee423b3e1d8a",
+		"title": "连接线",
+		"type": "ConnLineSvg",
+		"typeName": "连接线",
+		"svgColor": "#FF0000",
+		"createType": "click",
+		"svgPositionX": 158,
+		"svgPositionY": 389,
+		"mPoint": {
+			"startX": 79,
+			"startY": 389,
+			"endX": 79,
+			"endY": 372
+		},
+		"echartsOption": "",
+		"size": 1,
+		"angle": 0,
+		"elementBool": [
+			"draw",
+			"svgColor",
+			"svgLineSelectval",
+			"endY",
+			"endX"
+		],
+		"svgLineSelectval": ""
+	},
+	{
+		"id": "7dc05ed9-e4c9-4b9f-9a37-255800d9cfe9",
+		"title": "连接线",
+		"type": "ConnLineSvg",
+		"typeName": "连接线",
+		"svgColor": "#FF0000",
+		"createType": "click",
+		"svgPositionX": 79,
+		"svgPositionY": 371,
+		"mPoint": {
+			"startX": 78,
+			"startY": 369,
+			"endX": 158,
+			"endY": 369
+		},
+		"echartsOption": "",
+		"size": 1,
+		"angle": 0,
+		"elementBool": [
+			"draw",
+			"svgColor",
+			"svgLineSelectval",
+			"endY",
+			"endX"
+		],
+		"svgLineSelectval": ""
+	},
+	{
+		"id": "006b5bbb-fcad-4d71-80e2-d617b460678c",
+		"title": "连接线",
+		"type": "ConnLineSvg",
+		"typeName": "连接线",
+		"svgColor": "#FF0000",
+		"createType": "click",
+		"svgPositionX": 190,
+		"svgPositionY": 130,
+		"mPoint": {
+			"startX": 224,
+			"startY": 134,
+			"endX": 224,
+			"endY": 163
+		},
+		"echartsOption": "",
+		"size": 1,
+		"angle": 0,
+		"elementBool": [
+			"draw",
+			"svgColor",
+			"svgLineSelectval",
+			"endY",
+			"endX"
+		],
+		"svgLineSelectval": ""
+	},
+	{
+		"id": "f3091869-f768-4538-bfe3-4f3a9836208a",
+		"title": "隔离开关",
+		"type": "IsolatingSwitchSvg",
+		"typeName": "隔离开关",
+		"svgColor": "#FF0000",
+		"createType": "draggable",
+		"svgPositionX": 190,
+		"svgPositionY": 172,
+		"mPoint": {
+			"startX": 0,
+			"startY": 0,
+			"endX": 0,
+			"endY": 0
+		},
+		"echartsOption": "",
+		"size": 1,
+		"angle": 0,
+		"elementBool": [
+			"draggable",
+			"switchType"
+		],
+		"svgLineSelectval": ""
+	},
+	{
+		"id": "090d4447-bfbf-45bc-9ee2-7b7806029d9b",
+		"title": "连接线",
+		"type": "ConnLineSvg",
+		"typeName": "连接线",
+		"svgColor": "#FF0000",
+		"createType": "click",
+		"svgPositionX": 190,
+		"svgPositionY": 212,
+		"mPoint": {
+			"startX": 190,
+			"startY": 210,
+			"endX": 190,
+			"endY": 282
+		},
+		"echartsOption": "",
+		"size": 1,
+		"angle": 0,
+		"elementBool": [
+			"draw",
+			"svgColor",
+			"svgLineSelectval",
+			"endY",
+			"endX"
+		],
+		"svgLineSelectval": ""
+	},
+	{
+		"id": "6deacccf-2564-42b5-93e9-c762f046d63b",
+		"title": "长方形",
+		"type": "RectSvg",
+		"typeName": "长方形",
+		"svgColor": "#FF0000",
+		"createType": "draggable",
+		"svgPositionX": 190,
+		"svgPositionY": 231,
+		"mPoint": {
+			"startX": 0,
+			"startY": 0,
+			"endX": 0,
+			"endY": 0
+		},
+		"echartsOption": "",
+		"size": 1,
+		"angle": 0,
+		"elementBool": [
+			"draggable",
+			"switchType"
+		],
+		"svgLineSelectval": ""
+	},
+	{
+		"id": "801fff38-0732-4665-8a49-01760723cf74",
+		"title": "连接线",
+		"type": "ConnLineSvg",
+		"typeName": "连接线",
+		"svgColor": "#FF0000",
+		"createType": "click",
+		"svgPositionX": 155,
+		"svgPositionY": 285,
+		"mPoint": {
+			"startX": 155,
+			"startY": 283,
+			"endX": 227,
+			"endY": 283
+		},
+		"echartsOption": "",
+		"size": 1,
+		"angle": 0,
+		"elementBool": [
+			"draw",
+			"svgColor",
+			"svgLineSelectval",
+			"endY",
+			"endX"
+		],
+		"svgLineSelectval": ""
+	},
+	{
+		"id": "466e037b-86fb-47f6-8338-c3291ed7b7c3",
+		"title": "双圆",
+		"type": "TwoCircleSvg",
+		"typeName": "双圆",
+		"svgColor": "#FF0000",
+		"createType": "draggable",
+		"svgPositionX": 158,
+		"svgPositionY": 285,
+		"mPoint": {
+			"startX": 0,
+			"startY": 0,
+			"endX": 0,
+			"endY": 0
+		},
+		"echartsOption": "",
+		"size": 1,
+		"angle": 0,
+		"elementBool": [
+			"draggable",
+			"switchType"
+		],
+		"svgLineSelectval": ""
+	},
+	{
+		"id": "98a90b3d-57d2-464d-97bd-0f54c8c14945",
+		"title": "双圆",
+		"type": "TwoCircleSvg",
+		"typeName": "双圆",
+		"svgColor": "#FF0000",
+		"createType": "draggable",
+		"svgPositionX": 223,
+		"svgPositionY": 285,
+		"mPoint": {
+			"startX": 0,
+			"startY": 0,
+			"endX": 0,
+			"endY": 0
+		},
+		"echartsOption": "",
+		"size": 1,
+		"angle": 0,
+		"elementBool": [
+			"draggable",
+			"switchType"
+		],
+		"svgLineSelectval": ""
+	},
+	{
+		"id": "50f4b9bb-efc5-41a9-9a67-92da914e13d6",
+		"title": "连接线",
+		"type": "ConnLineSvg",
+		"typeName": "连接线",
+		"svgColor": "#FF0000",
+		"createType": "click",
+		"svgPositionX": 191,
+		"svgPositionY": 195,
+		"mPoint": {
+			"startX": 191,
+			"startY": 195,
+			"endX": 221,
+			"endY": 194
+		},
+		"echartsOption": "",
+		"size": 1,
+		"angle": 0,
+		"elementBool": [
+			"draw",
+			"svgColor",
+			"svgLineSelectval",
+			"endY",
+			"endX"
+		],
+		"svgLineSelectval": ""
+	},
+	{
+		"id": "3ab0c76b-38da-4c1d-9ee8-6ba486ffc4d7",
+		"title": "标准电容器",
+		"type": "StandardCapacitorSvg",
+		"typeName": "标准电容器",
+		"svgColor": "#FF0000",
+		"createType": "draggable",
+		"svgPositionX": 221,
+		"svgPositionY": 206,
+		"mPoint": {
+			"startX": 0,
+			"startY": 0,
+			"endX": 0,
+			"endY": 0
+		},
+		"echartsOption": "",
+		"size": 1,
+		"angle": 0,
+		"elementBool": [
+			"draggable",
+			"switchType"
+		],
+		"svgLineSelectval": ""
+	},
+	{
+		"id": "629b7b80-a882-48f4-8e63-8001cf913f79",
+		"title": "信号灯",
+		"type": "SignalLampSvg",
+		"typeName": "信号灯",
+		"svgColor": "#FF0000",
+		"createType": "draggable",
+		"svgPositionX": 220,
+		"svgPositionY": 231,
+		"mPoint": {
+			"startX": 0,
+			"startY": 0,
+			"endX": 0,
+			"endY": 0
+		},
+		"echartsOption": "",
+		"size": 1,
+		"angle": 0,
+		"elementBool": [
+			"draggable",
+			"switchType"
+		],
+		"svgLineSelectval": ""
+	},
+	{
+		"id": "08151d61-fefd-441a-946c-6c1547cbe74c",
+		"title": "接地灰白",
+		"type": "GroundGraySvg",
+		"typeName": "接地灰白",
+		"svgColor": "#CCCCCC",
+		"createType": "draggable",
+		"svgPositionX": 219,
+		"svgPositionY": 252,
+		"mPoint": {
+			"startX": 0,
+			"startY": 0,
+			"endX": 0,
+			"endY": 0
+		},
+		"echartsOption": "",
+		"size": 1,
+		"angle": 0,
+		"elementBool": [
+			"draggable",
+			"svgColor"
+		],
+		"svgLineSelectval": ""
+	},
+	{
+		"id": "dc46733a-883f-4df7-a54b-882bdc09ed68",
+		"title": "连接线",
+		"type": "ConnLineSvg",
+		"typeName": "连接线",
+		"svgColor": "#FF0000",
+		"createType": "click",
+		"svgPositionX": 315,
+		"svgPositionY": 131,
+		"mPoint": {
+			"startX": 315,
+			"startY": 131,
+			"endX": 315,
+			"endY": 390
+		},
+		"echartsOption": "",
+		"size": 1,
+		"angle": 0,
+		"elementBool": [
+			"draw",
+			"svgColor",
+			"svgLineSelectval",
+			"endY",
+			"endX"
+		],
+		"svgLineSelectval": ""
+	},
+	{
+		"id": "8436469b-e20c-476a-8947-bf70bb6c3f60",
+		"title": "电流互感器Y",
+		"type": "TransformerYSvg",
+		"typeName": "电流互感器Y",
+		"svgColor": "#FF0000",
+		"createType": "draggable",
+		"svgPositionX": 315,
+		"svgPositionY": 399,
+		"mPoint": {
+			"startX": 0,
+			"startY": 0,
+			"endX": 0,
+			"endY": 0
+		},
+		"echartsOption": "",
+		"size": 1,
+		"angle": 0,
+		"elementBool": [
+			"draggable",
+			"switchType"
+		],
+		"svgLineSelectval": ""
+	},
+	{
+		"id": "119184b9-ac5c-4140-9caf-def203d7294e",
+		"title": "电流互感器Y",
+		"type": "TransformerYSvg",
+		"typeName": "电流互感器Y",
+		"svgColor": "#FF0000",
+		"createType": "draggable",
+		"svgPositionX": 305,
+		"svgPositionY": 415,
+		"mPoint": {
+			"startX": 0,
+			"startY": 0,
+			"endX": 0,
+			"endY": 0
+		},
+		"echartsOption": "",
+		"size": 1,
+		"angle": 0,
+		"elementBool": [
+			"draggable",
+			"switchType"
+		],
+		"svgLineSelectval": ""
+	},
+	{
+		"id": "6cd34921-5587-45f7-8290-826fa2f0a536",
+		"title": "三相互感器",
+		"type": "TransformerTriphaseOpenSvg",
+		"typeName": "三相互感器",
+		"svgColor": "#FF0000",
+		"createType": "draggable",
+		"svgPositionX": 326,
+		"svgPositionY": 415,
+		"mPoint": {
+			"startX": 0,
+			"startY": 0,
+			"endX": 0,
+			"endY": 0
+		},
+		"echartsOption": "",
+		"size": 1,
+		"angle": 0,
+		"elementBool": [
+			"draggable",
+			"switchType"
+		],
+		"svgLineSelectval": ""
+	},
+	{
+		"id": "eed507a3-4895-400f-aaaf-7c40612c9013",
+		"title": "多段折线",
+		"type": "PolylineSvg",
+		"typeName": "多段折线",
+		"svgColor": "#FF0000",
+		"createType": "draggable",
+		"svgPositionX": 315,
+		"svgPositionY": 170,
+		"mPoint": {
+			"startX": 0,
+			"startY": 0,
+			"endX": 0,
+			"endY": 0
+		},
+		"echartsOption": "",
+		"size": 1,
+		"angle": 0,
+		"elementBool": [
+			"draggable",
+			"switchType"
+		],
+		"svgLineSelectval": ""
+	},
+	{
+		"id": "4cbe3849-d4ce-4393-8f00-b47850527cb1",
+		"title": "长方形",
+		"type": "RectSvg",
+		"typeName": "长方形",
+		"svgColor": "#FF0000",
+		"createType": "draggable",
+		"svgPositionX": 315,
+		"svgPositionY": 241,
+		"mPoint": {
+			"startX": 0,
+			"startY": 0,
+			"endX": 0,
+			"endY": 0
+		},
+		"echartsOption": "",
+		"size": 1,
+		"angle": 0,
+		"elementBool": [
+			"draggable",
+			"switchType"
+		],
+		"svgLineSelectval": ""
+	},
+	{
+		"id": "ddd48801-e2d1-4ea5-8478-8416c2b09176",
+		"title": "连接线",
+		"type": "ConnLineSvg",
+		"typeName": "连接线",
+		"svgColor": "#FF0000",
+		"createType": "click",
+		"svgPositionX": 270,
+		"svgPositionY": 203,
+		"mPoint": {
+			"startX": 270,
+			"startY": 203,
+			"endX": 314,
+			"endY": 203
+		},
+		"echartsOption": "",
+		"size": 1,
+		"angle": 0,
+		"elementBool": [
+			"draw",
+			"svgColor",
+			"svgLineSelectval",
+			"endY",
+			"endX"
+		],
+		"svgLineSelectval": ""
+	},
+	{
+		"id": "e9dda543-a028-48ff-80ba-2093b8d02056",
+		"title": "避雷器",
+		"type": "LightningArresterSvg",
+		"typeName": "避雷器",
+		"svgColor": "#FF0000",
+		"createType": "draggable",
+		"svgPositionX": 270,
+		"svgPositionY": 223,
+		"mPoint": {
+			"startX": 0,
+			"startY": 0,
+			"endX": 0,
+			"endY": 0
+		},
+		"echartsOption": "",
+		"size": 1,
+		"angle": 0,
+		"elementBool": [
+			"draggable",
+			"switchType"
+		],
+		"svgLineSelectval": ""
+	},
+	{
+		"id": "84ac2a15-a69a-4cb6-815a-d9aa95108e63",
+		"title": "连接线",
+		"type": "ConnLineSvg",
+		"typeName": "连接线",
+		"svgColor": "#FF0000",
+		"createType": "click",
+		"svgPositionX": 270,
+		"svgPositionY": 251,
+		"mPoint": {
+			"startX": 270,
+			"startY": 253,
+			"endX": 270,
+			"endY": 419
+		},
+		"echartsOption": "",
+		"size": 1,
+		"angle": 0,
+		"elementBool": [
+			"draw",
+			"svgColor",
+			"svgLineSelectval",
+			"endY",
+			"endX"
+		],
+		"svgLineSelectval": ""
+	},
+	{
+		"id": "2f416e71-7089-492d-8839-06c8dcfea1f0",
+		"title": "接地灰白",
+		"type": "GroundGraySvg",
+		"typeName": "接地灰白",
+		"svgColor": "#CCCCCC",
+		"createType": "draggable",
+		"svgPositionX": 270,
+		"svgPositionY": 423,
+		"mPoint": {
+			"startX": 0,
+			"startY": 0,
+			"endX": 0,
+			"endY": 0
+		},
+		"echartsOption": "",
+		"size": 1,
+		"angle": 0,
+		"elementBool": [
+			"draggable",
+			"svgColor"
+		],
+		"svgLineSelectval": ""
+	},
+	{
+		"id": "997ad25a-b021-41ff-86cd-cd55d8098494",
+		"title": "连接线",
+		"type": "ConnLineSvg",
+		"typeName": "连接线",
+		"svgColor": "#FF0000",
+		"createType": "click",
+		"svgPositionX": 271,
+		"svgPositionY": 409,
+		"mPoint": {
+			"startX": 273,
+			"startY": 409,
+			"endX": 297,
+			"endY": 409
+		},
+		"echartsOption": "",
+		"size": 1,
+		"angle": 0,
+		"elementBool": [
+			"draw",
+			"svgColor",
+			"svgLineSelectval",
+			"endY",
+			"endX"
+		],
+		"svgLineSelectval": ""
+	},
+	{
+		"id": "f6ecaeb9-46cc-40f4-8e95-abe8d62ce762",
+		"title": "连接线",
+		"type": "ConnLineSvg",
+		"typeName": "连接线",
+		"svgColor": "#FF0000",
+		"createType": "click",
+		"svgPositionX": 271,
+		"svgPositionY": 393,
+		"mPoint": {
+			"startX": 272,
+			"startY": 393,
+			"endX": 306,
+			"endY": 393
+		},
+		"echartsOption": "",
+		"size": 1,
+		"angle": 0,
+		"elementBool": [
+			"draw",
+			"svgColor",
+			"svgLineSelectval",
+			"endY",
+			"endX"
+		],
+		"svgLineSelectval": ""
+	},
+	{
+		"id": "7b2b2ac7-9cad-40e3-9bc9-2fe62e44f7a6",
+		"title": "连接线",
+		"type": "ConnLineSvg",
+		"typeName": "连接线",
+		"svgColor": "#FF0000",
+		"createType": "click",
+		"svgPositionX": 431,
+		"svgPositionY": 131,
+		"mPoint": {
+			"startX": 431,
+			"startY": 131,
+			"endX": 431,
+			"endY": 421
+		},
+		"echartsOption": "",
+		"size": 1,
+		"angle": 0,
+		"elementBool": [
+			"draw",
+			"svgColor",
+			"svgLineSelectval",
+			"endY",
+			"endX"
+		],
+		"svgLineSelectval": ""
+	},
+	{
+		"id": "5f5aee56-449b-404f-bf61-100f8a9f2adc",
+		"title": "多段折线",
+		"type": "PolylineSvg",
+		"typeName": "多段折线",
+		"svgColor": "#FF0000",
+		"createType": "draggable",
+		"svgPositionX": 431,
+		"svgPositionY": 170,
+		"mPoint": {
+			"startX": 0,
+			"startY": 0,
+			"endX": 0,
+			"endY": 0
+		},
+		"echartsOption": "",
+		"size": 1,
+		"angle": 0,
+		"elementBool": [
+			"draggable",
+			"switchType"
+		],
+		"svgLineSelectval": ""
+	},
+	{
+		"id": "4a234b3f-e506-45cc-8836-9b1822daa30f",
+		"title": "断路器",
+		"type": "CircuitBreakerSvg",
+		"typeName": "断路器",
+		"svgColor": "#FF0000",
+		"createType": "draggable",
+		"svgPositionX": 431,
+		"svgPositionY": 211,
+		"mPoint": {
+			"startX": 0,
+			"startY": 0,
+			"endX": 0,
+			"endY": 0
+		},
+		"echartsOption": "",
+		"size": 1,
+		"angle": 0,
+		"elementBool": [
+			"draggable",
+			"switchType"
+		],
+		"svgLineSelectval": ""
+	},
+	{
+		"id": "b49ad639-25ee-4d26-aa0b-be3d9fa6a5e7",
+		"title": "多段折线",
+		"type": "PolylineSvg",
+		"typeName": "多段折线",
+		"svgColor": "#FF0000",
+		"createType": "draggable",
+		"svgPositionX": 431,
+		"svgPositionY": 252,
+		"mPoint": {
+			"startX": 0,
+			"startY": 0,
+			"endX": 0,
+			"endY": 0
+		},
+		"echartsOption": "",
+		"size": 1,
+		"angle": 180,
+		"elementBool": [
+			"draggable",
+			"switchType"
+		],
+		"svgLineSelectval": ""
+	},
+	{
+		"id": "0644280a-6d15-431d-860a-ef19d6d7eb08",
+		"title": "连接线",
+		"type": "ConnLineSvg",
+		"typeName": "连接线",
+		"svgColor": "#FF0000",
+		"createType": "click",
+		"svgPositionX": 366,
+		"svgPositionY": 355,
+		"mPoint": {
+			"startX": 366,
+			"startY": 355,
+			"endX": 485,
+			"endY": 355
+		},
+		"echartsOption": "",
+		"size": 1,
+		"angle": 0,
+		"elementBool": [
+			"draw",
+			"svgColor",
+			"svgLineSelectval",
+			"endY",
+			"endX"
+		],
+		"svgLineSelectval": ""
+	},
+	{
+		"id": "9ca19602-f29f-41da-8ce9-95752d8cc690",
+		"title": "隔离开关",
+		"type": "IsolatingSwitchSvg",
+		"typeName": "隔离开关",
+		"svgColor": "#FF0000",
+		"createType": "draggable",
+		"svgPositionX": 366,
+		"svgPositionY": 374,
+		"mPoint": {
+			"startX": 0,
+			"startY": 0,
+			"endX": 0,
+			"endY": 0
+		},
+		"echartsOption": "",
+		"size": 1,
+		"angle": 0,
+		"elementBool": [
+			"draggable",
+			"switchType"
+		],
+		"svgLineSelectval": ""
+	},
+	{
+		"id": "029e58ae-3d7e-4ece-8ae5-3484782b27b5",
+		"title": "接地灰白",
+		"type": "GroundGraySvg",
+		"typeName": "接地灰白",
+		"svgColor": "#CCCCCC",
+		"createType": "draggable",
+		"svgPositionX": 366,
+		"svgPositionY": 419,
+		"mPoint": {
+			"startX": 0,
+			"startY": 0,
+			"endX": 0,
+			"endY": 0
+		},
+		"echartsOption": "",
+		"size": 1,
+		"angle": 0,
+		"elementBool": [
+			"draggable",
+			"svgColor"
+		],
+		"svgLineSelectval": ""
+	},
+	{
+		"id": "02fa851b-ebcb-4e92-ac9e-0099e9fbffc3",
+		"title": "避雷器",
+		"type": "LightningArresterSvg",
+		"typeName": "避雷器",
+		"svgColor": "#FF0000",
+		"createType": "draggable",
+		"svgPositionX": 484,
+		"svgPositionY": 377,
+		"mPoint": {
+			"startX": 0,
+			"startY": 0,
+			"endX": 0,
+			"endY": 0
+		},
+		"echartsOption": "",
+		"size": 1,
+		"angle": 0,
+		"elementBool": [
+			"draggable",
+			"switchType"
+		],
+		"svgLineSelectval": ""
+	},
+	{
+		"id": "ff0ff14a-9c8b-4e41-bc38-4a721cd6af22",
+		"title": "接地灰白",
+		"type": "GroundGraySvg",
+		"typeName": "接地灰白",
+		"svgColor": "#CCCCCC",
+		"createType": "draggable",
+		"svgPositionX": 484,
+		"svgPositionY": 410,
+		"mPoint": {
+			"startX": 0,
+			"startY": 0,
+			"endX": 0,
+			"endY": 0
+		},
+		"echartsOption": "",
+		"size": 1,
+		"angle": 0,
+		"elementBool": [
+			"draggable",
+			"svgColor"
+		],
+		"svgLineSelectval": ""
+	},
+	{
+		"id": "1f66f055-a7af-4b75-bd62-6b9e0e65d9c9",
+		"title": "连接线",
+		"type": "ConnLineSvg",
+		"typeName": "连接线",
+		"svgColor": "#FF0000",
+		"createType": "click",
+		"svgPositionX": 479,
+		"svgPositionY": 130,
+		"mPoint": {
+			"startX": 479,
+			"startY": 131,
+			"endX": 479,
+			"endY": 292
+		},
+		"echartsOption": "",
+		"size": 1,
+		"angle": 0,
+		"elementBool": [
+			"draw",
+			"svgColor",
+			"svgLineSelectval",
+			"endY",
+			"endX"
+		],
+		"svgLineSelectval": ""
+	},
+	{
+		"id": "61c252b0-471a-4087-8fde-54bb45a0c434",
+		"title": "多段折线",
+		"type": "PolylineSvg",
+		"typeName": "多段折线",
+		"svgColor": "#FF0000",
+		"createType": "draggable",
+		"svgPositionX": 479,
+		"svgPositionY": 170,
+		"mPoint": {
+			"startX": 0,
+			"startY": 0,
+			"endX": 0,
+			"endY": 0
+		},
+		"echartsOption": "",
+		"size": 1,
+		"angle": 0,
+		"elementBool": [
+			"draggable",
+			"switchType"
+		],
+		"svgLineSelectval": ""
+	},
+	{
+		"id": "6bc84973-9248-4c16-8d55-ad726e6ef221",
+		"title": "断路器",
+		"type": "CircuitBreakerSvg",
+		"typeName": "断路器",
+		"svgColor": "#FF0000",
+		"createType": "draggable",
+		"svgPositionX": 479,
+		"svgPositionY": 211,
+		"mPoint": {
+			"startX": 0,
+			"startY": 0,
+			"endX": 0,
+			"endY": 0
+		},
+		"echartsOption": "",
+		"size": 1,
+		"angle": 0,
+		"elementBool": [
+			"draggable",
+			"switchType"
+		],
+		"svgLineSelectval": ""
+	},
+	{
+		"id": "87d4c6d1-504a-4257-8cc3-37acdacb49cc",
+		"title": "多段折线",
+		"type": "PolylineSvg",
+		"typeName": "多段折线",
+		"svgColor": "#FF0000",
+		"createType": "draggable",
+		"svgPositionX": 479,
+		"svgPositionY": 252,
+		"mPoint": {
+			"startX": 0,
+			"startY": 0,
+			"endX": 0,
+			"endY": 0
+		},
+		"echartsOption": "",
+		"size": 1,
+		"angle": 180,
+		"elementBool": [
+			"draggable",
+			"switchType"
+		],
+		"svgLineSelectval": ""
+	},
+	{
+		"id": "6ec58a1e-6a58-46b2-8529-20147229216f",
+		"title": "连接线",
+		"type": "ConnLineSvg",
+		"typeName": "连接线",
+		"svgColor": "#FF0000",
+		"createType": "click",
+		"svgPositionX": 478,
+		"svgPositionY": 291,
+		"mPoint": {
+			"startX": 476,
+			"startY": 295,
+			"endX": 767,
+			"endY": 294
+		},
+		"echartsOption": "",
+		"size": 1,
+		"angle": 0,
+		"elementBool": [
+			"draw",
+			"svgColor",
+			"svgLineSelectval",
+			"endY",
+			"endX"
+		],
+		"svgLineSelectval": ""
+	},
+	{
+		"id": "57d1141c-6265-4084-83b8-c479ae66e821",
+		"title": "连接线",
+		"type": "ConnLineSvg",
+		"typeName": "连接线",
+		"svgColor": "#FF0000",
+		"createType": "click",
+		"svgPositionX": 768,
+		"svgPositionY": 131,
+		"mPoint": {
+			"startX": 767,
+			"startY": 131,
+			"endX": 767,
+			"endY": 290
+		},
+		"echartsOption": "",
+		"size": 1,
+		"angle": 0,
+		"elementBool": [
+			"draw",
+			"svgColor",
+			"svgLineSelectval",
+			"endY",
+			"endX"
+		],
+		"svgLineSelectval": ""
+	},
+	{
+		"id": "8de5cdd0-ff11-4a96-8f62-9fd212b959d8",
+		"title": "多段折线",
+		"type": "PolylineSvg",
+		"typeName": "多段折线",
+		"svgColor": "#FF0000",
+		"createType": "draggable",
+		"svgPositionX": 768,
+		"svgPositionY": 252,
+		"mPoint": {
+			"startX": 0,
+			"startY": 0,
+			"endX": 0,
+			"endY": 0
+		},
+		"echartsOption": "",
+		"size": 1,
+		"angle": 180,
+		"elementBool": [
+			"draggable",
+			"switchType"
+		],
+		"svgLineSelectval": ""
+	},
+	{
+		"id": "5b4395f1-682f-424d-8271-27a4421966e8",
+		"title": "多段折线",
+		"type": "PolylineSvg",
+		"typeName": "多段折线",
+		"svgColor": "#FF0000",
+		"createType": "draggable",
+		"svgPositionX": 768,
+		"svgPositionY": 170,
+		"mPoint": {
+			"startX": 0,
+			"startY": 0,
+			"endX": 0,
+			"endY": 0
+		},
+		"echartsOption": "",
+		"size": 1,
+		"angle": 0,
+		"elementBool": [
+			"draggable",
+			"switchType"
+		],
+		"svgLineSelectval": ""
+	},
+	{
+		"id": "e00e440f-14e1-49d2-9a7d-5079e17faae9",
+		"title": "连接线",
+		"type": "ConnLineSvg",
+		"typeName": "连接线",
+		"svgColor": "#FF0000",
+		"createType": "click",
+		"svgPositionX": 834,
+		"svgPositionY": 131,
+		"mPoint": {
+			"startX": 834,
+			"startY": 131,
+			"endX": 834,
+			"endY": 417
+		},
+		"echartsOption": "",
+		"size": 1,
+		"angle": 0,
+		"elementBool": [
+			"draw",
+			"svgColor",
+			"svgLineSelectval",
+			"endY",
+			"endX"
+		],
+		"svgLineSelectval": ""
+	},
+	{
+		"id": "cd3f5e5e-9ebd-455a-97ce-f738570d6629",
+		"title": "连接线",
+		"type": "ConnLineSvg",
+		"typeName": "连接线",
+		"svgColor": "#FF0000",
+		"createType": "click",
+		"svgPositionX": 948,
+		"svgPositionY": 129,
+		"mPoint": {
+			"startX": 834,
+			"startY": 131,
+			"endX": 834,
+			"endY": 417
+		},
+		"echartsOption": "",
+		"size": 1,
+		"angle": 0,
+		"elementBool": [
+			"draw",
+			"svgColor",
+			"svgLineSelectval",
+			"endY",
+			"endX"
+		],
+		"svgLineSelectval": ""
+	},
+	{
+		"id": "41d78aca-8c68-40a2-b201-2f60a1ff6fbf",
+		"title": "多段折线",
+		"type": "PolylineSvg",
+		"typeName": "多段折线",
+		"svgColor": "#FF0000",
+		"createType": "draggable",
+		"svgPositionX": 834,
+		"svgPositionY": 170,
+		"mPoint": {
+			"startX": 0,
+			"startY": 0,
+			"endX": 0,
+			"endY": 0
+		},
+		"echartsOption": "",
+		"size": 1,
+		"angle": 0,
+		"elementBool": [
+			"draggable",
+			"switchType"
+		],
+		"svgLineSelectval": ""
+	},
+	{
+		"id": "c28a8d30-1104-4ec5-8195-293b5e8c4bb7",
+		"title": "多段折线",
+		"type": "PolylineSvg",
+		"typeName": "多段折线",
+		"svgColor": "#FF0000",
+		"createType": "draggable",
+		"svgPositionX": 834,
+		"svgPositionY": 252,
+		"mPoint": {
+			"startX": 0,
+			"startY": 0,
+			"endX": 0,
+			"endY": 0
+		},
+		"echartsOption": "",
+		"size": 1,
+		"angle": 180,
+		"elementBool": [
+			"draggable",
+			"switchType"
+		],
+		"svgLineSelectval": ""
+	},
+	{
+		"id": "d6e8146c-7811-47ae-b508-4dda6b364cd0",
+		"title": "多段折线",
+		"type": "PolylineSvg",
+		"typeName": "多段折线",
+		"svgColor": "#FF0000",
+		"createType": "draggable",
+		"svgPositionX": 948,
+		"svgPositionY": 170,
+		"mPoint": {
+			"startX": 0,
+			"startY": 0,
+			"endX": 0,
+			"endY": 0
+		},
+		"echartsOption": "",
+		"size": 1,
+		"angle": 0,
+		"elementBool": [
+			"draggable",
+			"switchType"
+		],
+		"svgLineSelectval": ""
+	},
+	{
+		"id": "bb2a03ef-8778-4715-839d-2d655b3478fd",
+		"title": "多段折线",
+		"type": "PolylineSvg",
+		"typeName": "多段折线",
+		"svgColor": "#FF0000",
+		"createType": "draggable",
+		"svgPositionX": 948,
+		"svgPositionY": 252,
+		"mPoint": {
+			"startX": 0,
+			"startY": 0,
+			"endX": 0,
+			"endY": 0
+		},
+		"echartsOption": "",
+		"size": 1,
+		"angle": 180,
+		"elementBool": [
+			"draggable",
+			"switchType"
+		],
+		"svgLineSelectval": ""
+	},
+	{
+		"id": "fe3c6169-84bf-4349-8872-f210dcbc70f7",
+		"title": "断路器",
+		"type": "CircuitBreakerSvg",
+		"typeName": "断路器",
+		"svgColor": "#FF0000",
+		"createType": "draggable",
+		"svgPositionX": 834,
+		"svgPositionY": 211,
+		"mPoint": {
+			"startX": 0,
+			"startY": 0,
+			"endX": 0,
+			"endY": 0
+		},
+		"echartsOption": "",
+		"size": 1,
+		"angle": 0,
+		"elementBool": [
+			"draggable",
+			"switchType"
+		],
+		"svgLineSelectval": ""
+	},
+	{
+		"id": "746b535d-57f7-43a5-b197-6d4167e5c181",
+		"title": "断路器",
+		"type": "CircuitBreakerSvg",
+		"typeName": "断路器",
+		"svgColor": "#FF0000",
+		"createType": "draggable",
+		"svgPositionX": 948,
+		"svgPositionY": 211,
+		"mPoint": {
+			"startX": 0,
+			"startY": 0,
+			"endX": 0,
+			"endY": 0
+		},
+		"echartsOption": "",
+		"size": 1,
+		"angle": 0,
+		"elementBool": [
+			"draggable",
+			"switchType"
+		],
+		"svgLineSelectval": ""
+	},
+	{
+		"id": "5193db37-a169-46d2-8906-c56ec2716464",
+		"title": "Echart饼图",
+		"type": "EchartsPieSvg",
+		"typeName": "Echart饼图",
+		"svgColor": "#000000",
+		"createType": "draggable",
+		"svgPositionX": 158,
+		"svgPositionY": 594,
+		"mPoint": {
+			"startX": 0,
+			"startY": 0,
+			"endX": 0,
+			"endY": 0
+		},
+		"echartsOption": {
+			"title": {
+				"text": "某单位各场所报警占比",
+				"subtext": "纯属虚构",
+				"left": "center"
+			},
+			"tooltip": {
+				"trigger": "item"
+			},
+			"legend": {
+				"orient": "vertical",
+				"left": "left"
+			},
+			"series": [
+				{
+					"name": "访问来源",
+					"type": "pie",
+					"radius": "50%",
+					"data": [
+						{
+							"value": 1048,
+							"name": "办公楼A"
+						},
+						{
+							"value": 735,
+							"name": "办公楼B"
+						},
+						{
+							"value": 580,
+							"name": "保安室"
+						},
+						{
+							"value": 484,
+							"name": "地下车库"
+						},
+						{
+							"value": 300,
+							"name": "食堂"
+						}
+					],
+					"emphasis": {
+						"itemStyle": {
+							"shadowBlur": 10,
+							"shadowOffsetX": 0,
+							"shadowColor": "rgba(0, 0, 0, 0.5)"
+						}
+					},
+					"itemStyle": {
+						"normal": {
+							"label": {
+								"show": "true",
+								"formatter": "{b} : {c} ({d}%)"
+							}
+						}
+					}
+				}
+			]
+		},
+		"size": 1.2,
+		"angle": 0,
+		"elementBool": [
+			"chart"
+		],
+		"svgLineSelectval": ""
+	},
+	{
+		"id": "706d465a-84eb-4d92-902a-e45d0220d076",
+		"title": "Echart基础柱状图",
+		"type": "EchartsBasicBarSvg",
+		"typeName": "Echart基础柱状图",
+		"svgColor": "#000000",
+		"createType": "draggable",
+		"svgPositionX": 1165,
+		"svgPositionY": 574,
+		"mPoint": {
+			"startX": 0,
+			"startY": 0,
+			"endX": 0,
+			"endY": 0
+		},
+		"echartsOption": {
+			"title": {
+				"text": "某单位各楼层用电量监控",
+				"subtext": "纯属虚构",
+				"left": "center"
+			},
+			"xAxis": {
+				"type": "category",
+				"data": [
+					"一楼",
+					"二楼",
+					"三楼",
+					"四楼",
+					"五楼",
+					"六楼",
+					"七楼"
+				]
+			},
+			"yAxis": {
+				"type": "value"
+			},
+			"series": [
+				{
+					"data": [
+						120,
+						200,
+						150,
+						80,
+						70,
+						110,
+						130
+					],
+					"type": "bar",
+					"itemStyle": {
+						"normal": {
+							"label": {
+								"show": "true",
+								"position": "top"
+							}
+						}
+					}
+				}
+			]
+		},
+		"size": 1.3,
+		"angle": 0,
+		"elementBool": [
+			"chart"
+		],
+		"svgLineSelectval": ""
+	},
+	{
+		"id": "2a7cc52b-b881-4626-b0e3-f2d22975d91f",
+		"title": "连接线",
+		"type": "ConnLineSvg",
+		"typeName": "连接线",
+		"svgColor": "#FF0000",
+		"createType": "click",
+		"svgPositionX": 58,
+		"svgPositionY": 129,
+		"mPoint": {
+			"startX": 56,
+			"startY": 132,
+			"endX": 56,
+			"endY": 534
+		},
+		"echartsOption": "",
+		"size": 1,
+		"angle": 0,
+		"elementBool": [
+			"draw",
+			"svgColor",
+			"svgLineSelectval",
+			"endY",
+			"endX"
+		],
+		"svgLineSelectval": ""
+	},
+	{
+		"id": "bff3366d-edd5-4b48-8386-bd52c78f3245",
+		"title": "连接线",
+		"type": "ConnLineSvg",
+		"typeName": "连接线",
+		"svgColor": "#fff700",
+		"createType": "click",
+		"svgPositionX": 57,
+		"svgPositionY": 532,
+		"mPoint": {
+			"startX": 57,
+			"startY": 532,
+			"endX": 501,
+			"endY": 532
+		},
+		"echartsOption": "",
+		"size": 1.2,
+		"angle": 0,
+		"elementBool": [
+			"draw",
+			"svgColor",
+			"svgLineSelectval",
+			"endY",
+			"endX"
+		],
+		"svgLineSelectval": ""
+	},
+	{
+		"id": "74299afc-96bc-4bcb-8b93-b241f43982d8",
+		"title": "连接线",
+		"type": "ConnLineSvg",
+		"typeName": "连接线",
+		"svgColor": "#FF0000",
+		"createType": "click",
+		"svgPositionX": 948,
+		"svgPositionY": 414,
+		"mPoint": {
+			"startX": 946,
+			"startY": 415,
+			"endX": 1234,
+			"endY": 414
+		},
+		"echartsOption": "",
+		"size": 1,
+		"angle": 0,
+		"elementBool": [
+			"draw",
+			"svgColor",
+			"svgLineSelectval",
+			"endY",
+			"endX"
+		],
+		"svgLineSelectval": ""
+	},
+	{
+		"id": "c73d0d58-5198-4d87-a37a-f00c73e0c8f7",
+		"title": "电线开关-连接",
+		"type": "WireBreakOnSvg",
+		"typeName": "电线开关-连接",
+		"svgColor": "#00FF00",
+		"createType": "draggable",
+		"svgPositionX": 1234,
+		"svgPositionY": 252,
+		"mPoint": {
+			"startX": 0,
+			"startY": 0,
+			"endX": 0,
+			"endY": 0
+		},
+		"echartsOption": "",
+		"size": 1,
+		"angle": 0,
+		"elementBool": [
+			"draggable"
+		],
+		"svgLineSelectval": ""
+	},
+	{
+		"id": "5c235951-d11b-48cc-814b-76fa5ae414bd",
+		"title": "连接线",
+		"type": "ConnLineSvg",
+		"typeName": "连接线",
+		"svgColor": "#FF0000",
+		"createType": "click",
+		"svgPositionX": 1234,
+		"svgPositionY": 129,
+		"mPoint": {
+			"startX": 1230,
+			"startY": 131,
+			"endX": 1230,
+			"endY": 215
+		},
+		"echartsOption": "",
+		"size": 1,
+		"angle": 0,
+		"elementBool": [
+			"draw",
+			"svgColor",
+			"svgLineSelectval",
+			"endY",
+			"endX"
+		],
+		"svgLineSelectval": ""
+	},
+	{
+		"id": "8dbf95f5-4554-4f6e-be71-94795b893ae9",
+		"title": "连接线",
+		"type": "ConnLineSvg",
+		"typeName": "连接线",
+		"svgColor": "#FF0000",
+		"createType": "click",
+		"svgPositionX": 1234,
+		"svgPositionY": 295,
+		"mPoint": {
+			"startX": 1233,
+			"startY": 297,
+			"endX": 1234,
+			"endY": 416
+		},
+		"echartsOption": "",
+		"size": 1,
+		"angle": 0,
+		"elementBool": [
+			"draw",
+			"svgColor",
+			"svgLineSelectval",
+			"endY",
+			"endX"
+		],
+		"svgLineSelectval": ""
+	},
+	{
+		"id": "37c9be82-fd6f-40af-8965-9b28b17294ed",
+		"title": "箭头向上",
+		"type": "ArrowUpSvg",
+		"typeName": "箭头向上",
+		"svgColor": "#FF0000",
+		"createType": "draggable",
+		"svgPositionX": 1234,
+		"svgPositionY": 355,
+		"mPoint": {
+			"startX": 0,
+			"startY": 0,
+			"endX": 0,
+			"endY": 0
+		},
+		"echartsOption": "",
+		"size": 1,
+		"angle": 0,
+		"elementBool": [
+			"draggable",
+			"switchType"
+		],
+		"svgLineSelectval": ""
+	},
+	{
+		"id": "a9dde4fd-e84b-4085-ad08-b7d68d5094f8",
+		"title": "连接线",
+		"type": "ConnLineSvg",
+		"typeName": "连接线",
+		"svgColor": "#FF0000",
+		"createType": "click",
+		"svgPositionX": 1298,
+		"svgPositionY": 129,
+		"mPoint": {
+			"startX": 1230,
+			"startY": 131,
+			"endX": 1230,
+			"endY": 215
+		},
+		"echartsOption": "",
+		"size": 1,
+		"angle": 0,
+		"elementBool": [
+			"draw",
+			"svgColor",
+			"svgLineSelectval",
+			"endY",
+			"endX"
+		],
+		"svgLineSelectval": ""
+	},
+	{
+		"id": "f8b75c73-6fce-427d-8d3f-eaefda2d0d2d",
+		"title": "电线开关-连接",
+		"type": "WireBreakOnSvg",
+		"typeName": "电线开关-连接",
+		"svgColor": "#00FF00",
+		"createType": "click",
+		"svgPositionX": 1298,
+		"svgPositionY": 252,
+		"mPoint": {
+			"startX": 0,
+			"startY": 0,
+			"endX": 0,
+			"endY": 0
+		},
+		"echartsOption": "",
+		"size": 1,
+		"angle": 0,
+		"elementBool": [
+			"draggable"
+		],
+		"svgLineSelectval": ""
+	},
+	{
+		"id": "74ae5333-bdc3-47a9-9b0e-607eb6151769",
+		"title": "连接线",
+		"type": "ConnLineSvg",
+		"typeName": "连接线",
+		"svgColor": "#FF0000",
+		"createType": "click",
+		"svgPositionX": 1298,
+		"svgPositionY": 291,
+		"mPoint": {
+			"startX": 1233,
+			"startY": 297,
+			"endX": 1234,
+			"endY": 416
+		},
+		"echartsOption": "",
+		"size": 1,
+		"angle": 0,
+		"elementBool": [
+			"draw",
+			"svgColor",
+			"svgLineSelectval",
+			"endY",
+			"endX"
+		],
+		"svgLineSelectval": ""
+	},
+	{
+		"id": "5c247366-d14e-418d-82f2-289543ad81ad",
+		"title": "连接线",
+		"type": "ConnLineSvg",
+		"typeName": "连接线",
+		"svgColor": "#FF0000",
+		"createType": "click",
+		"svgPositionX": 1381,
+		"svgPositionY": 129,
+		"mPoint": {
+			"startX": 1230,
+			"startY": 131,
+			"endX": 1230,
+			"endY": 215
+		},
+		"echartsOption": "",
+		"size": 1,
+		"angle": 0,
+		"elementBool": [
+			"draw",
+			"svgColor",
+			"svgLineSelectval",
+			"endY",
+			"endX"
+		],
+		"svgLineSelectval": ""
+	},
+	{
+		"id": "ef6833de-78b7-4c0b-8952-1e4bd9553afa",
+		"title": "电线开关-连接",
+		"type": "WireBreakOnSvg",
+		"typeName": "电线开关-连接",
+		"svgColor": "#00FF00",
+		"createType": "click",
+		"svgPositionX": 1381,
+		"svgPositionY": 252,
+		"mPoint": {
+			"startX": 0,
+			"startY": 0,
+			"endX": 0,
+			"endY": 0
+		},
+		"echartsOption": "",
+		"size": 1,
+		"angle": 0,
+		"elementBool": [
+			"draggable"
+		],
+		"svgLineSelectval": ""
+	},
+	{
+		"id": "5a542ccb-a065-4e37-9121-4dcc15a90004",
+		"title": "连接线",
+		"type": "ConnLineSvg",
+		"typeName": "连接线",
+		"svgColor": "#FF0000",
+		"createType": "click",
+		"svgPositionX": 1381,
+		"svgPositionY": 291,
+		"mPoint": {
+			"startX": 1233,
+			"startY": 297,
+			"endX": 1234,
+			"endY": 416
+		},
+		"echartsOption": "",
+		"size": 1,
+		"angle": 0,
+		"elementBool": [
+			"draw",
+			"svgColor",
+			"svgLineSelectval",
+			"endY",
+			"endX"
+		],
+		"svgLineSelectval": ""
+	},
+	{
+		"id": "263ca38f-ef2d-4d4e-8b38-9583f52a971d",
+		"title": "连接线",
+		"type": "ConnLineSvg",
+		"typeName": "连接线",
+		"svgColor": "#FF0000",
+		"createType": "click",
+		"svgPositionX": 1471,
+		"svgPositionY": 129,
+		"mPoint": {
+			"startX": 1230,
+			"startY": 131,
+			"endX": 1230,
+			"endY": 215
+		},
+		"echartsOption": "",
+		"size": 1,
+		"angle": 0,
+		"elementBool": [
+			"draw",
+			"svgColor",
+			"svgLineSelectval",
+			"endY",
+			"endX"
+		],
+		"svgLineSelectval": ""
+	},
+	{
+		"id": "0658388d-0ef4-4739-862c-1eb23fe82d0d",
+		"title": "电线开关-连接",
+		"type": "WireBreakOnSvg",
+		"typeName": "电线开关-连接",
+		"svgColor": "#00FF00",
+		"createType": "click",
+		"svgPositionX": 1471,
+		"svgPositionY": 252,
+		"mPoint": {
+			"startX": 0,
+			"startY": 0,
+			"endX": 0,
+			"endY": 0
+		},
+		"echartsOption": "",
+		"size": 1,
+		"angle": 0,
+		"elementBool": [
+			"draggable"
+		],
+		"svgLineSelectval": ""
+	},
+	{
+		"id": "77e9b40e-1b22-4412-9541-b8474d26d00c",
+		"title": "连接线",
+		"type": "ConnLineSvg",
+		"typeName": "连接线",
+		"svgColor": "#FF0000",
+		"createType": "click",
+		"svgPositionX": 1471,
+		"svgPositionY": 295,
+		"mPoint": {
+			"startX": 1233,
+			"startY": 297,
+			"endX": 1234,
+			"endY": 416
+		},
+		"echartsOption": "",
+		"size": 1,
+		"angle": 0,
+		"elementBool": [
+			"draw",
+			"svgColor",
+			"svgLineSelectval",
+			"endY",
+			"endX"
+		],
+		"svgLineSelectval": ""
+	},
+	{
+		"id": "651c041c-c694-4a52-8e6d-28b514f7a993",
+		"title": "连接线",
+		"type": "ConnLineSvg",
+		"typeName": "连接线",
+		"svgColor": "#FF0000",
+		"createType": "click",
+		"svgPositionX": 1568,
+		"svgPositionY": 130,
+		"mPoint": {
+			"startX": 1230,
+			"startY": 131,
+			"endX": 1230,
+			"endY": 215
+		},
+		"echartsOption": "",
+		"size": 1,
+		"angle": 0,
+		"elementBool": [
+			"draw",
+			"svgColor",
+			"svgLineSelectval",
+			"endY",
+			"endX"
+		],
+		"svgLineSelectval": ""
+	},
+	{
+		"id": "19ac81be-85df-43fb-82a2-d7ee566728d9",
+		"title": "电线开关-连接",
+		"type": "WireBreakOnSvg",
+		"typeName": "电线开关-连接",
+		"svgColor": "#00FF00",
+		"createType": "click",
+		"svgPositionX": 1568,
+		"svgPositionY": 252,
+		"mPoint": {
+			"startX": 0,
+			"startY": 0,
+			"endX": 0,
+			"endY": 0
+		},
+		"echartsOption": "",
+		"size": 1,
+		"angle": 0,
+		"elementBool": [
+			"draggable"
+		],
+		"svgLineSelectval": ""
+	},
+	{
+		"id": "9564e22c-af8c-4131-91bd-721aebefc692",
+		"title": "连接线",
+		"type": "ConnLineSvg",
+		"typeName": "连接线",
+		"svgColor": "#FF0000",
+		"createType": "click",
+		"svgPositionX": 1568,
+		"svgPositionY": 295,
+		"mPoint": {
+			"startX": 1233,
+			"startY": 297,
+			"endX": 1234,
+			"endY": 416
+		},
+		"echartsOption": "",
+		"size": 1,
+		"angle": 0,
+		"elementBool": [
+			"draw",
+			"svgColor",
+			"svgLineSelectval",
+			"endY",
+			"endX"
+		],
+		"svgLineSelectval": ""
+	},
+	{
+		"id": "578e14df-47da-4fec-81ab-2c4a7fc8dd77",
+		"title": "连接线",
+		"type": "ConnLineSvg",
+		"typeName": "连接线",
+		"svgColor": "#FF0000",
+		"createType": "click",
+		"svgPositionX": 1684,
+		"svgPositionY": 129,
+		"mPoint": {
+			"startX": 1230,
+			"startY": 131,
+			"endX": 1230,
+			"endY": 215
+		},
+		"echartsOption": "",
+		"size": 1,
+		"angle": 0,
+		"elementBool": [
+			"draw",
+			"svgColor",
+			"svgLineSelectval",
+			"endY",
+			"endX"
+		],
+		"svgLineSelectval": ""
+	},
+	{
+		"id": "cc55d207-57bb-4a09-871f-4eceb892b7de",
+		"title": "发电机",
+		"type": "AlternatorSvg",
+		"typeName": "发电机",
+		"svgColor": "#FF0000",
+		"createType": "draggable",
+		"svgPositionX": 1684,
+		"svgPositionY": 252,
+		"mPoint": {
+			"startX": 0,
+			"startY": 0,
+			"endX": 0,
+			"endY": 0
+		},
+		"echartsOption": "",
+		"size": 1,
+		"angle": 0,
+		"elementBool": [
+			"draggable",
+			"switchType"
+		],
+		"svgLineSelectval": ""
+	},
+	{
+		"id": "14e79b39-885d-438b-8cb6-65c145817f56",
+		"title": "连接线",
+		"type": "ConnLineSvg",
+		"typeName": "连接线",
+		"svgColor": "#FF0000",
+		"createType": "click",
+		"svgPositionX": 1684,
+		"svgPositionY": 287,
+		"mPoint": {
+			"startX": 1233,
+			"startY": 297,
+			"endX": 1234,
+			"endY": 416
+		},
+		"echartsOption": "",
+		"size": 1,
+		"angle": 0,
+		"elementBool": [
+			"draw",
+			"svgColor",
+			"svgLineSelectval",
+			"endY",
+			"endX"
+		],
+		"svgLineSelectval": ""
+	},
+	{
+		"id": "cd307df7-5ee5-429e-bfc9-ebd750070f1d",
+		"title": "电容柜",
+		"type": "GGJSvg",
+		"typeName": "电容柜",
+		"svgColor": "#FF0000",
+		"createType": "draggable",
+		"svgPositionX": 1684,
+		"svgPositionY": 427,
+		"mPoint": {
+			"startX": 0,
+			"startY": 0,
+			"endX": 0,
+			"endY": 0
+		},
+		"echartsOption": "",
+		"size": 1,
+		"angle": 0,
+		"elementBool": [
+			"draggable",
+			"svgColor"
+		],
+		"svgLineSelectval": ""
+	},
+	{
+		"id": "85d64ffa-0ff2-4bd6-b862-579d25cde899",
+		"title": "箭头向下",
+		"type": "ArrowDownSvg",
+		"typeName": "箭头向下",
+		"svgColor": "#FF0000",
+		"createType": "draggable",
+		"svgPositionX": 1298,
+		"svgPositionY": 371,
+		"mPoint": {
+			"startX": 0,
+			"startY": 0,
+			"endX": 0,
+			"endY": 0
+		},
+		"echartsOption": "",
+		"size": 1,
+		"angle": 0,
+		"elementBool": [
+			"draggable",
+			"switchType"
+		],
+		"svgLineSelectval": ""
+	},
+	{
+		"id": "32a75720-f42d-4e8b-8784-bf3a9a791a84",
+		"title": "箭头向下",
+		"type": "ArrowDownSvg",
+		"typeName": "箭头向下",
+		"svgColor": "#FF0000",
+		"createType": "draggable",
+		"svgPositionX": 1381,
+		"svgPositionY": 371,
+		"mPoint": {
+			"startX": 0,
+			"startY": 0,
+			"endX": 0,
+			"endY": 0
+		},
+		"echartsOption": "",
+		"size": 1,
+		"angle": 0,
+		"elementBool": [
+			"draggable",
+			"switchType"
+		],
+		"svgLineSelectval": ""
+	},
+	{
+		"id": "d71b65c9-2766-4077-8199-bc3fa30e2f05",
+		"title": "箭头向下",
+		"type": "ArrowDownSvg",
+		"typeName": "箭头向下",
+		"svgColor": "#FF0000",
+		"createType": "draggable",
+		"svgPositionX": 1471,
+		"svgPositionY": 371,
+		"mPoint": {
+			"startX": 0,
+			"startY": 0,
+			"endX": 0,
+			"endY": 0
+		},
+		"echartsOption": "",
+		"size": 1,
+		"angle": 0,
+		"elementBool": [
+			"draggable",
+			"switchType"
+		],
+		"svgLineSelectval": ""
+	},
+	{
+		"id": "ad00017f-f29b-4246-8623-11bccf03bf9b",
+		"title": "箭头向下",
+		"type": "ArrowDownSvg",
+		"typeName": "箭头向下",
+		"svgColor": "#FF0000",
+		"createType": "draggable",
+		"svgPositionX": 1568,
+		"svgPositionY": 371,
+		"mPoint": {
+			"startX": 0,
+			"startY": 0,
+			"endX": 0,
+			"endY": 0
+		},
+		"echartsOption": "",
+		"size": 1,
+		"angle": 0,
+		"elementBool": [
+			"draggable",
+			"switchType"
+		],
+		"svgLineSelectval": ""
+	},
+	{
+		"id": "d0aa0d8f-6d18-4e48-885b-d89fca632978",
+		"title": "双绕组变压器",
+		"type": "DoubleWindingSvg",
+		"typeName": "双绕组变压器",
+		"svgColor": "#FF0000",
+		"createType": "draggable",
+		"svgPositionX": 634,
+		"svgPositionY": 532,
+		"mPoint": {
+			"startX": 0,
+			"startY": 0,
+			"endX": 0,
+			"endY": 0
+		},
+		"echartsOption": "",
+		"size": 1,
+		"angle": 90,
+		"elementBool": [
+			"draggable",
+			"switchType"
+		],
+		"svgLineSelectval": ""
+	},
+	{
+		"id": "461cd7a0-7233-4af4-a26c-0756a22945a2",
+		"title": "连接线",
+		"type": "ConnLineSvg",
+		"typeName": "连接线",
+		"svgColor": "#FF0000",
+		"createType": "click",
+		"svgPositionX": 678,
+		"svgPositionY": 533,
+		"mPoint": {
+			"startX": 682,
+			"startY": 533,
+			"endX": 839,
+			"endY": 533
+		},
+		"echartsOption": "",
+		"size": 1,
+		"angle": 0,
+		"elementBool": [
+			"draw",
+			"svgColor",
+			"svgLineSelectval",
+			"endY",
+			"endX"
+		],
+		"svgLineSelectval": ""
+	},
+	{
+		"id": "0811c7fc-900d-4378-9b77-0725d24e7148",
+		"title": "信号灯",
+		"type": "SignalLampSvg",
+		"typeName": "信号灯",
+		"svgColor": "#FF0000",
+		"createType": "draggable",
+		"svgPositionX": 834,
+		"svgPositionY": 428,
+		"mPoint": {
+			"startX": 0,
+			"startY": 0,
+			"endX": 0,
+			"endY": 0
+		},
+		"echartsOption": "",
+		"size": 1,
+		"angle": 0,
+		"elementBool": [
+			"draggable",
+			"switchType"
+		],
+		"svgLineSelectval": ""
+	},
+	{
+		"id": "47db6638-a56b-41fa-8106-6eb70da240e3",
+		"title": "标准电抗",
+		"type": "StandardReactanceSvg",
+		"typeName": "标准电抗",
+		"svgColor": "#FF0000",
+		"createType": "draggable",
+		"svgPositionX": 834,
+		"svgPositionY": 469,
+		"mPoint": {
+			"startX": 0,
+			"startY": 0,
+			"endX": 0,
+			"endY": 0
+		},
+		"echartsOption": "",
+		"size": 1,
+		"angle": 0,
+		"elementBool": [
+			"draggable",
+			"switchType"
+		],
+		"svgLineSelectval": ""
+	},
+	{
+		"id": "8c8754e1-8c53-45af-8501-e8b958ca9d3c",
+		"title": "避雷器",
+		"type": "LightningArresterSvg",
+		"typeName": "避雷器",
+		"svgColor": "#FF0000",
+		"createType": "draggable",
+		"svgPositionX": 835,
+		"svgPositionY": 505,
+		"mPoint": {
+			"startX": 0,
+			"startY": 0,
+			"endX": 0,
+			"endY": 0
+		},
+		"echartsOption": "",
+		"size": 1,
+		"angle": 0,
+		"elementBool": [
+			"draggable",
+			"switchType"
+		],
+		"svgLineSelectval": ""
+	},
+	{
+		"id": "c6e12c55-4b8a-462f-888a-45957d5bea0d",
+		"title": "进线柜",
+		"type": "TextSvg",
+		"typeName": "文字",
+		"svgColor": "#fbff00",
+		"createType": "draggable",
+		"svgPositionX": 107,
+		"svgPositionY": 484,
+		"mPoint": {
+			"startX": 0,
+			"startY": 0,
+			"endX": 0,
+			"endY": 0
+		},
+		"echartsOption": "",
+		"size": 1,
+		"angle": 0,
+		"elementBool": [
+			"draggable",
+			"svgColor"
+		],
+		"svgLineSelectval": ""
+	},
+	{
+		"id": "9f34b118-61be-40d0-8e08-9a728ad4ccb8",
+		"title": "电容柜",
+		"type": "TextSvg",
+		"typeName": "文字",
+		"svgColor": "#fbff00",
+		"createType": "draggable",
+		"svgPositionX": 1672,
+		"svgPositionY": 457,
+		"mPoint": {
+			"startX": 0,
+			"startY": 0,
+			"endX": 0,
+			"endY": 0
+		},
+		"echartsOption": "",
+		"size": 1,
+		"angle": 0,
+		"elementBool": [
+			"draggable",
+			"svgColor"
+		],
+		"svgLineSelectval": ""
+	},
+	{
+		"id": "fea54d97-fbc4-4335-891a-1aef67892a39",
+		"title": "门卫开关",
+		"type": "TextSvg",
+		"typeName": "文字",
+		"svgColor": "#fbff00",
+		"createType": "draggable",
+		"svgPositionX": 1555,
+		"svgPositionY": 457,
+		"mPoint": {
+			"startX": 0,
+			"startY": 0,
+			"endX": 0,
+			"endY": 0
+		},
+		"echartsOption": "",
+		"size": 1,
+		"angle": 0,
+		"elementBool": [
+			"draggable",
+			"svgColor"
+		],
+		"svgLineSelectval": ""
+	},
+	{
+		"id": "028ab1c8-8a2f-4c32-81c4-16f3463173af",
+		"title": "车库开关",
+		"type": "TextSvg",
+		"typeName": "文字",
+		"svgColor": "#fbff00",
+		"createType": "draggable",
+		"svgPositionX": 1457,
+		"svgPositionY": 457,
+		"mPoint": {
+			"startX": 0,
+			"startY": 0,
+			"endX": 0,
+			"endY": 0
+		},
+		"echartsOption": "",
+		"size": 1,
+		"angle": 0,
+		"elementBool": [
+			"draggable",
+			"svgColor"
+		],
+		"svgLineSelectval": ""
+	},
+	{
+		"id": "29b60400-2833-40c0-92bb-569c2bdb8673",
+		"title": "B座开关",
+		"type": "TextSvg",
+		"typeName": "文字",
+		"svgColor": "#fbff00",
+		"createType": "draggable",
+		"svgPositionX": 1364,
+		"svgPositionY": 457,
+		"mPoint": {
+			"startX": 0,
+			"startY": 0,
+			"endX": 0,
+			"endY": 0
+		},
+		"echartsOption": "",
+		"size": 1,
+		"angle": 0,
+		"elementBool": [
+			"draggable",
+			"svgColor"
+		],
+		"svgLineSelectval": ""
+	},
+	{
+		"id": "3e4e4687-65ed-4898-bd37-5f866ebbff41",
+		"title": "A座开关",
+		"type": "TextSvg",
+		"typeName": "文字",
+		"svgColor": "#fbff00",
+		"createType": "draggable",
+		"svgPositionX": 1284,
+		"svgPositionY": 457,
+		"mPoint": {
+			"startX": 0,
+			"startY": 0,
+			"endX": 0,
+			"endY": 0
+		},
+		"echartsOption": "",
+		"size": 1,
+		"angle": 0,
+		"elementBool": [
+			"draggable",
+			"svgColor"
+		],
+		"svgLineSelectval": ""
+	},
+	{
+		"id": "b2c50372-c4d4-4f90-a4df-d1110d7b88d5",
+		"title": "总开关",
+		"type": "TextSvg",
+		"typeName": "文字",
+		"svgColor": "#fbff00",
+		"createType": "draggable",
+		"svgPositionX": 1217,
+		"svgPositionY": 444,
+		"mPoint": {
+			"startX": 0,
+			"startY": 0,
+			"endX": 0,
+			"endY": 0
+		},
+		"echartsOption": "",
+		"size": 1,
+		"angle": 0,
+		"elementBool": [
+			"draggable",
+			"svgColor"
+		],
+		"svgLineSelectval": ""
+	}
+]

public/static/config.js

@@ -7,9 +7,13 @@ var PLATFROM_CONFIG = {};
 if (window.location.host.indexOf("localhost") != -1 || window.location.host.indexOf("pcdev.ewoogi.com") != -1) {
     PLATFROM_CONFIG.baseUrl = "https://qhome.usky.cn/fivapi/" //线上
     PLATFROM_CONFIG.fileUrl = "https://qhome.usky.cn/file/" //xlsx文件访问路径
+
+    PLATFROM_CONFIG.hrefUrl = 'https://pcdev.ewoogi.com/adminfiv/#/login'//后台管理系统访问路径
 } else {
     PLATFROM_CONFIG.baseUrl = "https://wx.ewoogi.com/api/" //线上
     PLATFROM_CONFIG.fileUrl = "https://wx.ewoogi.com/file/" //xlsx文件访问路径
+
+    PLATFROM_CONFIG.hrefUrl = 'https://wx.ewoogi.com/manage/#/'//后台管理系统访问路径
 }
 
 

src/assets/css/index.css

@@ -819,4 +819,120 @@ p {
 }
 
 
-/* ming end */
+/* ming end */
+
+
+
+/* 电流效果 */
+
+/* 正向流动效果 */
+.svg_ani_flow {
+    stroke-dasharray: 1000;
+    stroke-dashoffset: 1000;
+    animation: ani_flow 10s linear infinite;
+    animation-fill-mode: forwards;
+    -webkit-animation: ani_flow 10s linear infinite;
+    -webkit-animation-fill-mode: forwards;
+  }
+  
+  @keyframes ani_flow {
+    from {
+      stroke-dasharray: 10, 5;
+    }
+  
+    to {
+      stroke-dasharray: 13, 5;
+    }
+  }
+  @-webkit-keyframes ani_flow {
+    from {
+      stroke-dasharray: 10, 5;
+    }
+  
+    to {
+      stroke-dasharray: 13, 5;
+    }
+  }
+  
+  /* 停止流动效果 */
+  .svg_ani_flow_stop {
+    stroke-dasharray: 1000;
+    stroke-dashoffset: 1000;
+    animation: ani_flow_stop 10s linear infinite;
+    animation-fill-mode: forwards;
+    -webkit-animation: ani_flow_stop 10s linear infinite;
+    -webkit-animation-fill-mode: forwards;
+  }
+  
+  @keyframes ani_flow_stop {
+    from {
+      stroke-dasharray: 10, 5;
+    }
+  
+    to {
+      stroke-dasharray: 10, 5;
+    }
+  }
+  @-webkit-keyframes ani_flow_stop {
+    from {
+      stroke-dasharray: 10, 5;
+    }
+  
+    to {
+      stroke-dasharray: 10, 5;
+    }
+  }
+  /* 反向流动效果 */
+  .svg_ani_flow_back {
+    stroke-dasharray: 1000;
+    stroke-dashoffset: 1000;
+    animation: ani_flow_back 10s linear infinite;
+    animation-fill-mode: forwards;
+    -webkit-animation: ani_flow_back 10s linear infinite;
+    -webkit-animation-fill-mode: forwards;
+  }
+  
+  @keyframes ani_flow_back {
+    from {
+      stroke-dasharray: 13, 5;
+    }
+  
+    to {
+      stroke-dasharray: 10, 5;
+    }
+  }
+  @-webkit-keyframes ani_flow_stop {
+    from {
+      stroke-dasharray: 10, 5;
+    }
+  
+    to {
+      stroke-dasharray: 10, 5;
+    }
+  }
+  /* 以最大40高度填充 */
+  .svg_ani_fill_h40 {
+    animation: ani_fill_h40 5s linear infinite;
+    animation-fill-mode: forwards;
+    -webkit-animation: ani_fill_h40 5s linear infinite;
+    -webkit-animation-fill-mode: forwards;
+  }
+  
+  @keyframes ani_fill_h40 {
+    from {
+      height: 0px;
+    }
+  
+    to {
+      height: 40px;
+    }
+  }
+  @-webkit-keyframes ani_flow_stop {
+    from {
+      stroke-dasharray: 10, 5;
+    }
+  
+    to {
+      stroke-dasharray: 10, 5;
+    }
+  }

src/components/LeftToolBar.vue

@@ -1,51 +1,152 @@
+
 <template>
-  <div class="components-layout-left">
-    <a-input-search placeholder="搜索组件" />
+  <div class="components-layout-left leftNav">
+    <!-- <a-input-search placeholder="搜索组件" /> -->
     <a-collapse v-model:activeKey="activeKey" accordion>
-      <a-collapse-panel key="1" header="基本形状">
+      <a-collapse-panel key="1" header="拖动组件">
+        <ul class="svg-nav-list">
+          <li v-for="item in draggableComponentList" :key="item">
+            <div class="title">{{ item.title }}</div>
+            <img
+              :title="item.title"
+              @mousedown="
+                Mousedown(
+                  item.type,
+                  item.title,
+                  item.defaultColor,
+                  item.createType,
+                  item.echartsOption,
+                  item.elementBool,
+                  item.svgLineSelectval
+                )
+              "
+              :src="item.priviewImg"
+              draggable="draggable"
+            />
+          </li>
+        </ul>
+      </a-collapse-panel>
+      <a-collapse-panel key="2" header="绘制组件" :disabled="false">
         <ul class="svg-nav-list">
           <li
-            v-for="(item, index) in svgInfoData"
-            :key="index"
-            v-show="item.type !== 'WireConnectionSvg'"
+            v-for="item in drawComponentList"
+            :key="item"
+            :class="
+              $store.state.CurrentlySelectedToolBar.Type == item.type
+                ? 'toolbar-selected'
+                : ''
+            "
           >
-            <div class="title">{{ item.array.title }}</div>
+            <div class="title">{{ item.title }}</div>
             <img
-              :title="item.array.title"
-              @mousedown="Mousedown(item)"
+              :title="item.title"
+              @mousedown="
+                Mousedown(
+                  item.type,
+                  item.title,
+                  item.defaultColor,
+                  item.createType,
+                  item.echartsOption,
+                  item.elementBool,
+                  item.svgLineSelectval
+                )
+              "
               :src="item.priviewImg"
-              draggable="true"
             />
           </li>
         </ul>
       </a-collapse-panel>
-      <a-collapse-panel key="2" header="拓扑图" :disabled="false">
-        <p>{{ text }}</p>
-      </a-collapse-panel>
-      <a-collapse-panel key="3" header="物联网">
-        <p>{{ text }}</p>
-      </a-collapse-panel>
+      <!-- <a-collapse-panel key="3" header="图表">
+        <ul class="svg-nav-list">
+          <li v-for="item in chartComponentList" :key="item">
+            <div class="title">{{ item.title }}</div>
+            <img
+              :title="item.title"
+              @mousedown="
+                Mousedown(
+                  item.type,
+                  item.title,
+                  item.defaultColor,
+                  item.createType,
+                  item.echartsOption,
+                  item.elementBool,
+                  item.svgLineSelectval
+                )
+              "
+              :src="item.priviewImg"
+              draggable="draggable"
+            />
+          </li>
+        </ul>
+      </a-collapse-panel> -->
     </a-collapse>
   </div>
 </template>
 <script>
-import global from "@/global/global.js"; //全局变量
 export default {
   props: ["svgInfoData"],
   data() {
     return {
       activeKey: ["1"], //当前激活的key
       text: `这里是预留位置.`,
+      draggableComponentList: [], //拖动组件
+      drawComponentList: [], //绘制类型组件
+      chartComponentList: [], //图表类型
     };
   },
+  watch: {
+    svgInfoData: {
+      deep: true,
+      handler(val) {
+        this.draggableComponentList = val.filter((m) => {
+          return m.elementBool.indexOf("draggable") > -1;
+        });
+        this.drawComponentList = val.filter((m) => {
+          return m.elementBool.indexOf("draw") > -1;
+        });
+        this.chartComponentList = val.filter((m) => {
+          return m.elementBool.indexOf("chart") > -1;
+        });
+      },
+    },
+  },
   methods: {
-    Mousedown(item) {
-      global.CurrentlySelectedToolBarItem = item;
+    /**
+     * @description: 点击左侧工具栏触发函数
+     * @param {*} type
+     * @param {*} title
+     * @param {*} default_attr 属性默认值
+     * @param {*} createType 组件创建方式
+     * @return {*}
+     */
+    Mousedown(
+      type,
+      title,
+      defaultColor,
+      createType,
+      echartsOption,
+      elementBool,
+      svgLineSelectval
+    ) {
+      let CurrentlySelectedToolBar = {
+        Type: type, //选中的工具栏svg类型
+        TypeName: title, //选中的工具栏svg类型名称
+        Title: title, //选中的工具栏svg标题
+        Color: defaultColor, //选中的工具栏svg颜色
+        CreateType: createType, //选中工具栏的创建方式
+        EChartsOption: echartsOption,
+        ElementBool: elementBool,
+        SvgLineSelectval: svgLineSelectval, //电流效果
+      };
+      this.$store.commit(
+        "setCurrentlySelectedToolBarAction",
+        CurrentlySelectedToolBar
+      );
     },
   },
 };
 </script>
-<style>
+<style lang="less" scoped>
 .components-layout-left .ant-input-search-icon {
   font-size: 20px !important;
   color: #1890ff !important;
@@ -58,8 +159,6 @@ export default {
 .components-layout-left .ant-collapse-content > .ant-collapse-content-box {
   padding: 16px 0;
 }
-</style>
-<style lang="less" scoped>
 .ant-input-affix-wrapper {
   height: 45px;
   line-height: 45px;
@@ -75,7 +174,6 @@ export default {
   li {
     position: relative;
     width: calc(33.33% - 30px);
-    height: 56px;
     margin: 0 15px 15px 15px;
     padding: 0;
     border-radius: 50%;
@@ -86,7 +184,7 @@ export default {
     cursor: pointer;
 
     &:hover {
-      box-shadow: 1px 1px 5px #0090ff;
+      box-shadow: 1px 1px 10px #ccc;
     }
 
     img {
@@ -123,4 +221,18 @@ export default {
     }
   }
 }
+.toolbar-selected {
+  outline: 1px solid #0cf;
+}
+.leftNav {
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  min-width: unset !important;
+  max-width: unset !important;
+  width: 260px !important;
+  z-index: 1;
+  overflow: auto;
+}
 </style>

src/components/RightToolBar.vue

@@ -1,214 +1,238 @@
+<!--
+ * @Author: yaolunmao
+-->
 <template>
-  <a-tabs type="card" class="components-layout-right">
-    <a-tab-pane key="1" tab="外观">
-      <a-form layout="horizontal">
-        <a-form-item label="id">
-          <p>
-            {{ selectSvgInfo.id }}
-          </p>
-        </a-form-item>
-        <a-form-item label="类型">
-          <p>{{ selectSvgInfo.typeName }}</p>
-        </a-form-item>
-
-        <a-form-item
-          label="名称"
-          v-if="selectSvgInfo.length <= 0 ? false : true"
-        >
-          <a-input
-            v-model:value="selectSvgInfo.title"
-            placeholder="请输入组件名称"
-          />
-        </a-form-item>
-
-        <a-form-item
-          label="X轴坐标"
-          v-if="selectSvgInfo.length <= 0 ? false : true"
-        >
-          <a-input-number
-            v-model:value="selectSvgInfo.svgPositionX"
-            :min="0"
-            :max="1920"
-          />
-        </a-form-item>
-
-        <a-form-item
-          label="Y轴坐标"
-          v-if="selectSvgInfo.length <= 0 ? false : true"
-        >
-          <a-input-number
-            v-model:value="selectSvgInfo.svgPositionY"
-            :min="0"
-            :max="1080"
-          />
-        </a-form-item>
-
-        <a-form-item
-          label="颜色"
-          v-if="
-            selectSvgInfo.length <= 0
-              ? false
-              : selectSvgInfo.elementBool.indexOf('svgColor') > -1
-          "
-        >
-          <input type="color" v-model="selectSvgInfo.svgColor" />
-        </a-form-item>
-
-        <a-form-item
-          label="大小"
-          v-if="
-            selectSvgInfo.length <= 0
-              ? false
-              : selectSvgInfo.elementBool.indexOf('size') > -1
-          "
-        >
-          <a-input-number
-            v-model:value="selectSvgInfoSize"
-            :min="1"
-            :max="10"
-            step="0.1"
-            maxlength="4"
-          />
-        </a-form-item>
-
-        <a-form-item
-          label="长度"
-          v-if="
-            selectSvgInfo.length <= 0
-              ? false
-              : selectSvgInfo.elementBool.indexOf('height') > -1
-          "
-        >
-          <a-input-number
-            v-model:value="selectSvgInfo.height"
-            :min="2"
-            :max="3000"
-            step="1"
-          />
-        </a-form-item>
-
-        <a-form-item
-          label="旋转"
-          v-if="
-            selectSvgInfo.length <= 0
-              ? false
-              : selectSvgInfo.elementBool.indexOf('angle') > -1
-          "
-        >
-          <a-input-number
-            v-model:value="msgFilteredHTML"
-            :min="0"
-            :max="360"
-            maxlength="3"
-          />
-        </a-form-item>
-
-        <a-form-item
-          label="文本"
-          v-if="
-            selectSvgInfo.length <= 0
-              ? false
-              : selectSvgInfo.elementBool.indexOf('svgText') > -1
-          "
-        >
-          <a-input v-model:value="selectSvgInfo.svgText" placeholder="请输入" />
-        </a-form-item>
-
-        <a-form-item
-          label="字体大小"
-          v-if="
-            selectSvgInfo.length <= 0
-              ? false
-              : selectSvgInfo.elementBool.indexOf('fontSize') > -1
-          "
+  <div class="rightNav">
+    <a-tabs type="card" class="components-layout-right">
+      <a-tab-pane key="1" tab="外观">
+        <a-form
+          layout="horizontal"
+          :label-col="{ span: 6 }"
+          :wrapper-col="{ span: 10 }"
+          labelAlign="right"
         >
-          <a-input-number
-            v-model:value="selectSvgInfo.fontSize"
-            :min="1"
-            :max="100"
-          />
-        </a-form-item>
-
-        <a-form-item
-          label="表格行数"
-          v-if="
-            selectSvgInfo.length <= 0
-              ? false
-              : selectSvgInfo.elementBool.indexOf('tableRowCount') > -1
-          "
-        >
-          <a-input-number
-            v-model:value="selectSvgInfo.tableRowCount"
-            :min="2"
-            :max="100"
-          />
-        </a-form-item>
-
-        <a-form-item
-          label="表格列数"
-          v-if="
-            selectSvgInfo.length <= 0
-              ? false
-              : selectSvgInfo.elementBool.indexOf('tableColCount') > -1
-          "
-        >
-          <a-input-number
-            v-model:value="selectSvgInfo.tableColCount"
-            :min="2"
-            :max="100"
-          />
-        </a-form-item>
-
-        <a-form-item
-          label="设备名称"
-          v-if="selectSvgInfo.length <= 0 ? false : true"
-        >
-          <a-select
-            :default-value="selectSvgInfo.deviceId"
-            :placeholder="ElMessage"
-            style="width: 160px"
-            @change="deviceSelectChange"
+          <!-- 设备编号 -->
+          <a-form-item label="id">
+            <p>{{ svgInfo.id }}</p>
+          </a-form-item>
+          <!-- 类型 -->
+          <a-form-item label="类型">
+            <p>{{ selectSvgInfo.typeName }}</p>
+          </a-form-item>
+          <!-- 名称 -->
+          <a-form-item
+            label="名称"
+            v-if="
+              selectSvgInfo.length <= 0
+                ? false
+                : selectSvgInfo.type === 'TextSvg1'
+                ? false
+                : true
+            "
+          >
+            <a-input
+              @blur="selectSvgInfoTitle"
+              v-model:value="selectSvgInfo.title"
+              placeholder="请输入组件名称"
+            />
+          </a-form-item>
+          <!-- X轴坐标 -->
+          <a-form-item
+            label="X轴坐标"
+            v-if="selectSvgInfo.length <= 0 ? false : true"
+          >
+            <a-input-number
+              v-model:value="selectSvgInfo.svgPositionX"
+              :min="0"
+              :max="1920"
+            />
+          </a-form-item>
+          <!-- Y轴坐标 -->
+          <a-form-item
+            label="Y轴坐标"
+            v-if="selectSvgInfo.length <= 0 ? false : true"
           >
-            <a-select-option
-              v-for="list in deviceSelectList"
-              :key="list"
-              :value="list.id"
+            <a-input-number
+              v-model:value="selectSvgInfo.svgPositionY"
+              :min="0"
+              :max="1080"
+            />
+          </a-form-item>
+          <!-- 开关状态 -->
+          <a-form-item
+            label="状态"
+            v-if="
+              selectSvgInfo.length <= 0
+                ? false
+                : selectSvgInfo.elementBool.indexOf('switchType') > -1
+            "
+          >
+            <a-radio-group
+              name="radioGroup"
+              v-model:value="selectSvgInfo.switchType"
+              :default-value="0"
+              @change="selectSvgInfoSvgColor"
+              style="display: flex"
             >
-              {{ list.monitorDeviceName }}
-            </a-select-option>
-          </a-select>
-        </a-form-item>
-
-        <a-form-item
-          label="变量名称"
-          v-if="selectSvgInfo.deviceId != null && selectSvgInfo.deviceId != ''"
-        >
-          <a-select
-            @change="hookupSelectChange"
-            :default-value="selectSvgInfo.variableId"
-            :placeholder="ElMessage"
-            style="width: 160px"
+              <a-radio :value="0"> 关 </a-radio>
+              <a-radio :value="1"> 开 </a-radio>
+            </a-radio-group>
+          </a-form-item>
+          <!-- 颜色 -->
+          <a-form-item
+            label="颜色"
+            v-if="
+              selectSvgInfo.length <= 0
+                ? false
+                : selectSvgInfo.elementBool.indexOf('svgColor') > -1
+            "
+          >
+            <input type="color" v-model="selectSvgInfo.svgColor" />
+          </a-form-item>
+          <!-- 大小 -->
+          <a-form-item
+            label="大小"
+            v-if="selectSvgInfo.length <= 0 ? false : true"
+          >
+            <a-input-number
+              v-model:value="selectSvgInfo.size"
+              :min="1"
+              :max="30"
+              step="0.1"
+            />
+          </a-form-item>
+          <!-- 旋转 -->
+          <a-form-item
+            label="旋转"
+            v-if="selectSvgInfo.length <= 0 ? false : true"
+          >
+            <a-input-number
+              v-model:value="selectSvgInfo.angle"
+              :min="0"
+              :max="360"
+            />
+          </a-form-item>
+          <!-- 起点X -->
+          <a-form-item
+            label="起点X"
+            v-if="
+              selectSvgInfo.length <= 0
+                ? false
+                : selectSvgInfo.elementBool.indexOf('endX') > -1
+            "
+          >
+            <a-input-number
+              v-model:value="selectSvgInfo.mPoint.endX"
+              :min="0"
+              :max="1920"
+            />
+          </a-form-item>
+          <!-- 起点Y -->
+          <a-form-item
+            label="起点Y"
+            v-if="
+              selectSvgInfo.length <= 0
+                ? false
+                : selectSvgInfo.elementBool.indexOf('endY') > -1
+            "
+          >
+            <a-input-number
+              v-model:value="selectSvgInfo.mPoint.endY"
+              :min="0"
+              :max="1080"
+            />
+          </a-form-item>
+          <!-- 电流效果 -->
+          <a-form-item
+            label="电流开关"
+            v-if="
+              selectSvgInfo.length <= 0
+                ? false
+                : selectSvgInfo.elementBool.indexOf('svgLineSelectval') > -1
+            "
           >
-            <a-select-option
-              v-for="list in variableIdSelectList"
-              :key="list"
-              :value="list.id"
+            <a-select
+              :default-value="selectSvgInfo.svgLineSelectval"
+              style="width: 160px"
+              @change="selectSvgInfoSvgLineAni"
             >
-              {{ list.variableName }}
-            </a-select-option>
-          </a-select>
-        </a-form-item>
-      </a-form>
-    </a-tab-pane>
-    <a-tab-pane key="2" tab="数据">
-      <div class="bg-code">{{ selectSvgInfo }}</div>
-    </a-tab-pane>
-  </a-tabs>
+              <a-select-option
+                v-for="up in $store.state.svgLineAni.selectgroup"
+                :key="up"
+                :value="up.value"
+              >
+                {{ up.label }}
+              </a-select-option>
+            </a-select>
+          </a-form-item>
+          <!-- 设备名称 -->
+          <a-form-item
+            label="设备名称"
+            v-if="
+              selectSvgInfo.length <= 0
+                ? false
+                : selectSvgInfo.type === 'TextSvg'
+                ? false
+                : true
+            "
+          >
+            <a-select
+              :default-value="selectSvgInfo.deviceId"
+              :placeholder="ElMessage"
+              style="width: 160px"
+              @change="deviceSelectChange"
+            >
+              <a-select-option
+                v-for="list in deviceSelectList"
+                :key="list"
+                :value="list.id"
+              >
+                {{ list.monitorDeviceName }}
+              </a-select-option>
+            </a-select>
+          </a-form-item>
+          <!-- 变量名称 -->
+          <a-form-item
+            label="变量名称"
+            v-if="
+              selectSvgInfo.deviceId != null &&
+              selectSvgInfo.deviceId != '' &&
+              selectSvgInfo.type != 'TextSvg'
+            "
+          >
+            <a-select
+              @change="hookupSelectChange"
+              :default-value="selectSvgInfo.variableId"
+              :placeholder="ElMessage"
+              style="width: 160px"
+            >
+              <a-select-option
+                v-for="list in variableIdSelectList"
+                :key="list"
+                :value="list.id"
+              >
+                {{ list.variableName }}
+              </a-select-option>
+            </a-select>
+          </a-form-item>
+        </a-form>
+      </a-tab-pane>
+      <a-tab-pane key="2" tab="数据">
+        <div class="bg-code">{{ selectSvgInfo }}</div>
+      </a-tab-pane>
+    </a-tabs>
+  </div>
 </template>
 <script>
 import api from "@/api/site/systemImg";
 import { ElMessage } from "element-plus";
 export default {
+  props: ["svgInfo"],
+  computed: {
+    selectSvgInfo() {
+      return this.svgInfo;
+    },
+  },
   data() {
     return {
       deviceSelectList: [],
@@ -216,54 +240,25 @@ export default {
       ElMessage: "",
     };
   },
-  props: ["svgInfo"],
-  computed: {
-    selectSvgInfo() {
-      return this.svgInfo;
-    },
-    msgFilteredHTML: {
-      get() {
-        return this.selectSvgInfo.angle;
-      },
-      set(val) {
-        //控制元器件旋转
-        if (val == "" || val == null) {
-          this.selectSvgInfo.angle = 0;
-        } else {
-          this.selectSvgInfo.angle = val;
-        }
-      },
-    },
-    selectSvgInfoSize: {
-      get() {
-        return this.selectSvgInfo.size;
-      },
-      set(val) {
-        //控制元器件大小
-        if (val == "" || val == null) {
-          this.selectSvgInfo.size = 1;
-        } else if (val.toString().indexOf(".") != -1) {
-          if (
-            val.toString().split(".")[1] == "" ||
-            val.toString().split(".")[1] == null
-          ) {
-            this.selectSvgInfo.size = 1;
-          } else {
-            console.log(val);
-            this.selectSvgInfo.size = val;
-          }
-        } else {
-          this.selectSvgInfo.size = val;
-        }
-      },
-    },
-    // selectSvgInfo.angle==''&&selectSvgInfo.angle==null?:
-  },
   mounted() {
     //调用设备名称下拉列表接口事件
     this.getDeviceAttributeList();
   },
   methods: {
+    selectSvgInfoSvgColor(e) {
+      this.selectSvgInfo.svgColor = e.target.value == 0 ? "#FF0000" : "#00FF00";
+      this.selectSvgInfo.switchType = e.target.value;
+    },
+    selectSvgInfoSvgLineAni(e) {
+      this.selectSvgInfo.svgLineSelectval = e;
+    },
+    //名称输入框失去焦点事件
+    selectSvgInfoTitle(e) {
+      if (e.target.value == "" || e.target.value == null) {
+        ElMessage("名称不能为空!");
+        this.selectSvgInfo.title = "文字";
+      }
+    },
     //设备名称下拉列表接口事件
     getDeviceAttributeList() {
       api
@@ -324,10 +319,10 @@ export default {
       this.selectSvgInfo.variableId = value;
     },
   },
-
   watch: {
+    //监听数据变化---> selectSvgInfo ---> 改变变量名称和设备名称绑定值
     selectSvgInfo: function (newVal) {
-      console.log(this.selectSvgInfo.length);
+      // console.log(this.selectSvgInfo.length);
       if (
         this.deviceSelectList.length > 0 &&
         this.selectSvgInfo.length == undefined
@@ -359,7 +354,7 @@ export default {
   },
 };
 </script>
-<style lang="less">
+<style scoped lang="less">
 .components-layout-right {
   .ant-tabs-bar {
     margin-bottom: 0 !important;
@@ -398,7 +393,6 @@ export default {
       right: 15px;
       bottom: 0;
       height: 1px;
-      background: #f2f2f2;
     }
 
     &:last-child::after {
@@ -406,8 +400,6 @@ export default {
     }
   }
 }
-</style>
-<style scoped lang="less">
 .btn-sure {
   width: 260px;
   margin: 20px;
@@ -420,4 +412,15 @@ export default {
   border-radius: 4px;
   padding: 10px;
 }
-</style>
+.rightNav {
+  right: 0;
+  top: 0;
+  bottom: 0;
+  min-width: unset !important;
+  max-width: unset !important;
+  width: 300px !important;
+  z-index: 1;
+  overflow: auto;
+  padding: 10px 20px;
+}
+</style>

src/components/SvgComponents.vue

@@ -1,116 +1,51 @@
+<!--
+ * @Author: yaolunmao
+-->
 <template>
-  <component :is="svgtype" :svg_color="svg_color" ref="textsss"></component>
+  <component :is="component_prop.type" :prop_data="component_prop"></component>
 </template>
 <script>
+import { use } from "echarts/core";
+import { SVGRenderer } from "echarts/renderers";
+import { PieChart, BarChart } from "echarts/charts";
+import {
+  TitleComponent,
+  TooltipComponent,
+  LegendComponent,
+  GridComponent,
+} from "echarts/components";
+import { THEME_KEY } from "vue-echarts";
+use([
+  SVGRenderer,
+  PieChart,
+  TitleComponent,
+  TooltipComponent,
+  LegendComponent,
+  GridComponent,
+  BarChart,
+]);
 let importComponents = {};
 export default {
-  props: [
-    "svgInfoData",
-    "svg_color",
-    "svgtype",
-    "text",
-    "size",
-    "fontSize",
-    "height",
-    "strokeWidth",
-  ],
+  props: ["svgInfoData", "component_prop"],
   data() {
     return {
       componentTag: "",
     };
   },
   components: importComponents,
-  watch: {
-    text(text) {
-      this.editText(text);
-    },
-    fontSize(fontSize) {
-      this.font_Size(fontSize);
-    },
-    strokeWidth(width) {
-      this.stroke_Width(width);
-    },
-    height(height) {
-      this.edit_height(height);
-    },
+  provide: {
+    [THEME_KEY]: "dark",
   },
+  methods: {},
   created() {
     this.svgInfoData.forEach((f) => {
       let componentInfo = {
         template: f.template,
         props: f.props,
       };
-      if (f.type === this.svgtype) {
-        importComponents[f.type] = componentInfo;
-      }
+      importComponents[f.type] = componentInfo;
     });
   },
-  mounted() {
-    this.$nextTick(() => {
-      this.editText(this.text);
-      this.font_Size(this.fontSize);
-      this.stroke_Width(this.strokeWidth);
-      this.edit_height(this.height);
-    });
-  },
-  methods: {
-    editText(val) {
-      var el = this.$refs.textsss.$el;
-      if (el != undefined) {
-        // console.log(this.$refs.textsss);
-        if (el.nodeName === "text") {
-          el.innerHTML = val;
-          this.font_Size(this.fontSize);
-        }
-      }
-    },
-    font_Size(val) {
-      var el = this.$refs.textsss.$el;
-      if (el != undefined) {
-        if (el.nodeName === "text") {
-          var len = el.innerHTML.length;
-          el.setAttribute("x", -(val / 2) * len);
-          el.setAttribute("y", val / 2);
-          el.setAttribute("font-size", val);
-        }
-      }
-    },
-    edit_height(val) {
-      var el = this.$refs.textsss.$el;
-      if (el != undefined) {
-
-        var dom = document.getElementById(el.parentNode.id);
-        var title = dom.getAttribute("title");
-        let line = dom.getElementsByTagName("line")[0];
-
-        if (val != null && val != "" && val != undefined) {
-          if (title === "电线") {
-            line.setAttribute("y1", -val);
-            line.setAttribute("y2", val);
-          } else if (title === "横线") {
-            line.setAttribute("x1", -val);
-            line.setAttribute("x2", val);
-          }
-        }
-      }
-    },
-    stroke_Width(val) {
-      var el = this.$refs.textsss.$el;
-      if (el != undefined) {
-        var dom = document.getElementById(el.parentNode.id);
-        var title = dom.getAttribute("title");
-        let line = dom.getElementsByTagName("line")[0];
-
-        if (val != null && val != "" && val != undefined) {
-          if (title === "电线") {
-            line.setAttribute("stroke-width", val);
-          } else if (title === "横线") {
-            line.setAttribute("stroke-width", val);
-          }
-        }
-      }
-    },
-  },
 };
 </script>
 <style scoped>

src/global/global.js

@@ -1,35 +0,0 @@
-//当前选中的左侧工具栏参数类型
-let CurrentlySelectedToolBarType = '';
-//当前选中的左侧工具栏参数类型名称
-let CurrentlySelectedToolBarTypeName = '';
-//当前选中的左侧工具栏参数标题
-let CurrentlySelectedToolBarTitle = '';
-//当前选中的左侧工具栏参数颜色
-let CurrentlySelectedToolBarColor = '';
-//当前选中的左侧工具栏参数宽度
-let CurrentlySelectedToolBarWidth = 2;
-//当前选中的左侧工具栏参数高度
-let CurrentlySelectedToolBarHeight = 0;
-//当前选中的左侧工具栏参数文字
-let CurrentlySelectedToolBarSvgText = '';
-//当前选中的左侧工具栏参数字体大小
-let CurrentlySelectedToolBarFontSize = 0;
-//当前选中的左侧工具栏参数表格
-let CurrentlySelectedToolBarTableData = [];
-//当前选中的左侧工具栏参数大小
-let CurrentlySelectedToolBarSize = 1;
-
-let CurrentlySelectedToolBarItem = []
-export default {
-    CurrentlySelectedToolBarType, 
-    CurrentlySelectedToolBarTypeName, 
-    CurrentlySelectedToolBarTitle, 
-    CurrentlySelectedToolBarColor, 
-    CurrentlySelectedToolBarWidth, 
-    CurrentlySelectedToolBarHeight,
-    CurrentlySelectedToolBarSvgText,
-    CurrentlySelectedToolBarFontSize,
-    CurrentlySelectedToolBarTableData,
-    CurrentlySelectedToolBarSize,
-    CurrentlySelectedToolBarItem
-}

src/main.js

@@ -1,7 +1,7 @@
 import { createApp } from 'vue/dist/vue.esm-bundler.js';
 import Antd from 'ant-design-vue';
-import App from './App.vue';
 import 'ant-design-vue/dist/antd.css';
+import App from './App.vue';
 import UCore from './utils/UCore.js';
 import './assets/css/index.css';
 import router from './router';
@@ -31,6 +31,9 @@ app.config.globalProperties.$Interface = Interface
 app.config.globalProperties.$UCore = UCore;
 app.config.globalProperties.$axios = axios;
 
+import ECharts from 'vue-echarts';
+app.component('v-chart', ECharts);
+
 app.use(router).use(store).use(ElementPlus, { locale }).use(Vuex).use(echarts).use(Antd).mount('#app');
 
 store.commit("getTimeAll");
@@ -51,7 +54,6 @@ router.beforeEach((to, from, next) => {
             // 本地存储的accessToken不存在时，跳转至后台登录页
             // alert('本地存储的accessToken不存在')
 
-            // console.log(window.location.host.indexOf("localhost") != -1)
             if (window.location.host.indexOf("localhost") != -1) {
                 next({ path: '/' })
             } else if (window.location.host.indexOf("pcdev.ewoogi.com") != -1) {

src/router/index.js

@@ -66,14 +66,6 @@ let routes = [
             import('../views/site/Power_diagram.vue'),
         // import ('../views/site/CircuitEdit.vue'),
     },
-    //配电系统图页面
-    {
-        path: '/CircuitEdit',
-        name: 'CircuitEdit',
-        meta: { title: '配电系统图', name: "测试站点一", type: "menu" },
-        component: () =>
-            import('../views/site/CircuitEdit.vue'),
-    },
 
     //设备监控页面
     {
@@ -112,7 +104,6 @@ let routes = [
             import('../views/CircuitPreview.vue'),
         // import('../views/site/Power_diagram.vue'),
     },
-
 ]
 
 // routes = routes.concat(mineRouter)

src/store/index.js

@@ -8,137 +8,137 @@ export default createStore({
         Time_Data: [], //公共api请求参数->Time_Data
         timearr: [], //公共处理开始时间和结束时间中的时间段天数 值存储
         itemStyle: [{
-                normal: {
-                    borderColor: "rgba(0,244,253,1)",
-                    borderWidth: 2,
-                    color: "rgba(6, 68, 83, 1)",
-                    lineStyle: {
-                        width: 2, //折线宽度
-                        color: "rgba(0,244,253,1)",
-                    },
+            normal: {
+                borderColor: "rgba(0,244,253,1)",
+                borderWidth: 2,
+                color: "rgba(6, 68, 83, 1)",
+                lineStyle: {
+                    width: 2, //折线宽度
+                    color: "rgba(0,244,253,1)",
                 },
             },
-            {
-                normal: {
-                    borderColor: "rgba(253,143,0,1)",
-                    borderWidth: 2,
-                    color: "rgba(6, 68, 83, 1)",
-                    lineStyle: {
-                        width: 2, //折线宽度
-                        color: "rgba(253,143,0,1)",
-                    },
+        },
+        {
+            normal: {
+                borderColor: "rgba(253,143,0,1)",
+                borderWidth: 2,
+                color: "rgba(6, 68, 83, 1)",
+                lineStyle: {
+                    width: 2, //折线宽度
+                    color: "rgba(253,143,0,1)",
                 },
             },
-            {
-                normal: {
-                    borderColor: "rgba(0,255,18,1)",
-                    borderWidth: 2,
-                    color: "rgba(6, 68, 83, 1)",
-                    lineStyle: {
-                        width: 2, //折线宽度
-                        color: "rgba(0,255,18,1)",
-                    },
+        },
+        {
+            normal: {
+                borderColor: "rgba(0,255,18,1)",
+                borderWidth: 2,
+                color: "rgba(6, 68, 83, 1)",
+                lineStyle: {
+                    width: 2, //折线宽度
+                    color: "rgba(0,255,18,1)",
                 },
             },
-            {
-                normal: {
-                    borderColor: "rgba(0,255,230,1)",
-                    borderWidth: 2,
-                    color: "rgba(6, 68, 83, 1)",
-                    lineStyle: {
-                        width: 2, //折线宽度
-                        color: "rgba(0,255,230,1)",
-                    },
+        },
+        {
+            normal: {
+                borderColor: "rgba(0,255,230,1)",
+                borderWidth: 2,
+                color: "rgba(6, 68, 83, 1)",
+                lineStyle: {
+                    width: 2, //折线宽度
+                    color: "rgba(0,255,230,1)",
                 },
             },
-            {
-                normal: {
-                    borderColor: "rgba(142,51,255,1)",
-                    borderWidth: 2,
-                    color: "rgba(6, 68, 83, 1)",
-                    lineStyle: {
-                        width: 2, //折线宽度
-                        color: "rgba(142,51,255,1)",
-                    },
+        },
+        {
+            normal: {
+                borderColor: "rgba(142,51,255,1)",
+                borderWidth: 2,
+                color: "rgba(6, 68, 83, 1)",
+                lineStyle: {
+                    width: 2, //折线宽度
+                    color: "rgba(142,51,255,1)",
                 },
             },
-            {
-                normal: {
-                    borderColor: "rgba(77,200,120,1)",
-                    borderWidth: 2,
-                    color: "rgba(6, 68, 83, 1)",
-                    lineStyle: {
-                        width: 2, //折线宽度
-                        color: "rgba(77,200,120,1)",
-                    },
+        },
+        {
+            normal: {
+                borderColor: "rgba(77,200,120,1)",
+                borderWidth: 2,
+                color: "rgba(6, 68, 83, 1)",
+                lineStyle: {
+                    width: 2, //折线宽度
+                    color: "rgba(77,200,120,1)",
                 },
             },
-            {
-                normal: {
-                    borderColor: "rgba(255,47,47,1)",
-                    borderWidth: 2,
-                    color: "rgba(6, 68, 83, 1)",
-                    lineStyle: {
-                        width: 2, //折线宽度
-                        color: "rgba(255,47,47,1)",
-                    },
+        },
+        {
+            normal: {
+                borderColor: "rgba(255,47,47,1)",
+                borderWidth: 2,
+                color: "rgba(6, 68, 83, 1)",
+                lineStyle: {
+                    width: 2, //折线宽度
+                    color: "rgba(255,47,47,1)",
                 },
             },
-            {
-                normal: {
-                    borderColor: "rgba(70,100,255,1)",
-                    borderWidth: 2,
-                    color: "rgba(6, 68, 83, 1)",
-                    lineStyle: {
-                        width: 2, //折线宽度
-                        color: "rgba(70,100,255,1)",
-                    },
+        },
+        {
+            normal: {
+                borderColor: "rgba(70,100,255,1)",
+                borderWidth: 2,
+                color: "rgba(6, 68, 83, 1)",
+                lineStyle: {
+                    width: 2, //折线宽度
+                    color: "rgba(70,100,255,1)",
                 },
             },
-            {
-                normal: {
-                    borderColor: "rgba(255,143,53,1)",
-                    borderWidth: 2,
-                    color: "rgba(6, 68, 83, 1)",
-                    lineStyle: {
-                        width: 2, //折线宽度
-                        color: "rgba(255,143,53,1)",
-                    },
+        },
+        {
+            normal: {
+                borderColor: "rgba(255,143,53,1)",
+                borderWidth: 2,
+                color: "rgba(6, 68, 83, 1)",
+                lineStyle: {
+                    width: 2, //折线宽度
+                    color: "rgba(255,143,53,1)",
                 },
             },
-            {
-                normal: {
-                    borderColor: "rgba(150,150,50,1)",
-                    borderWidth: 2,
-                    color: "rgba(6, 68, 83, 1)",
-                    lineStyle: {
-                        width: 2, //折线宽度
-                        color: "rgba(150,150,50,1)",
-                    },
+        },
+        {
+            normal: {
+                borderColor: "rgba(150,150,50,1)",
+                borderWidth: 2,
+                color: "rgba(6, 68, 83, 1)",
+                lineStyle: {
+                    width: 2, //折线宽度
+                    color: "rgba(150,150,50,1)",
                 },
             },
-            {
-                normal: {
-                    borderColor: "rgba(70,192,255,1)",
-                    borderWidth: 2,
-                    color: "rgba(6, 68, 83, 1)",
-                    lineStyle: {
-                        width: 2, //折线宽度
-                        color: "rgba(70,192,255,1)",
-                    },
+        },
+        {
+            normal: {
+                borderColor: "rgba(70,192,255,1)",
+                borderWidth: 2,
+                color: "rgba(6, 68, 83, 1)",
+                lineStyle: {
+                    width: 2, //折线宽度
+                    color: "rgba(70,192,255,1)",
                 },
             },
-            {
-                normal: {
-                    borderColor: "rgba(20,99,100,1)",
-                    borderWidth: 2,
-                    color: "rgba(6, 68, 83, 1)",
-                    lineStyle: {
-                        width: 2, //折线宽度
-                        color: "rgba(20,99,100,1)",
-                    },
+        },
+        {
+            normal: {
+                borderColor: "rgba(20,99,100,1)",
+                borderWidth: 2,
+                color: "rgba(6, 68, 83, 1)",
+                lineStyle: {
+                    width: 2, //折线宽度
+                    color: "rgba(20,99,100,1)",
                 },
             },
+        },
         ], //公共echarts图表样式
         Time_All: [], //公共时间 返回数组 -> 年月日时分秒 时间戳
 
@@ -150,91 +150,91 @@ export default createStore({
         th_defaultTime: [], //设备监控--->数据报表时间选择器v-model
         fh_defaultTime: [], //设备监控--->运行状态统计时间选择器v-model
         table_list: [{
-                name: "电流",
-                list: [
-                    { name: "A相电流", value: "Ia" },
-                    { name: "B相电流", value: "Ib" },
-                    { name: "C相电流", value: "Ic" },
-                ],
-            },
-            {
-                name: "功率",
-                list: [
-                    { name: "A相有功功率 kW", value: "Pa" },
-                    { name: "A相无功功率 kVar", value: "Qa" },
-                    { name: "B相有功功率 kW", value: "Pb" },
-                    { name: "B相无功功率 kVar", value: "Qb" },
-                    { name: "C相有功功率 kW", value: "Pc" },
-                    { name: "C相无功功率 kVar", value: "Qc" },
-                    { name: "总有功功率 kW", value: "P" },
-                    { name: "总无功功率 kW", value: "Q" },
-                    { name: "实时需量 kW", value: "Demand" },
-                ],
-            },
-            {
-                name: "电度",
-                list: [
-                    { name: "正有功电度 kWh", value: "Epp" },
-                    { name: "负有功电度 kWh", value: "Epn" },
-                    { name: "正无功电度 kvarh", value: "Eqp" },
-                    { name: "负无功电度 kvarh", value: "Eqn" },
-                ],
-            },
-            {
-                name: "电压",
-                list: [
-                    { name: "A相电压 kV", value: "Ua" },
-                    { name: "B相电压 kV", value: "Ub" },
-                    { name: "C相电压 kV", value: "Uc" },
-                    { name: "回路电压 V", value: "Ul" },
-                    { name: "AB线电压 V", value: "Uab" },
-                    { name: "BC线电压 V", value: "Ubc" },
-                    { name: "CA线电压 V", value: "Uca" },
-                ],
-            },
-            {
-                name: "温度 ℃",
-                list: [
-                    { name: "外接温度1", value: "T1" },
-                    { name: "外接温度2", value: "T2" },
-                    { name: "外接温度3", value: "T3" },
-                    { name: "外接温度4", value: "T4" },
-                    { name: "环境温度", value: "DeviceTemp" },
-                ],
-            },
-            {
-                name: "频率 Hz",
-                list: [{ name: "频率", value: "F" }],
-            },
-            {
-                name: "功率因数",
-                list: [
-                    { name: "A相功率因数", value: "COSa" },
-                    { name: "B相功率因数", value: "COSb" },
-                    { name: "C相功率因数", value: "COSc" },
-                    { name: "功率因数", value: "COS" },
-                ],
-            },
-            {
-                name: "谐波电流有效值 A",
-                list: [
-                    { name: "Ia总谐波电流", value: "IHa" },
-                    { name: "Ib总谐波电流", value: "IHa" },
-                    { name: "Ic总谐波电流", value: "IHc" },
-                ],
-            },
-            {
-                name: "通讯参数",
-                list: [{ name: "设备信号强度", value: "SignalIntensity" }],
-            },
-            {
-                name: "电压突变 次",
-                list: [
-                    { name: "电压暂升次数", value: "Upt" },
-                    { name: "电压暂降次数", value: "Udt" },
-                    { name: "电压中断次数", value: "Ust" },
-                ],
-            },
+            name: "电流",
+            list: [
+                { name: "A相电流", value: "Ia" },
+                { name: "B相电流", value: "Ib" },
+                { name: "C相电流", value: "Ic" },
+            ],
+        },
+        {
+            name: "功率",
+            list: [
+                { name: "A相有功功率 kW", value: "Pa" },
+                { name: "A相无功功率 kVar", value: "Qa" },
+                { name: "B相有功功率 kW", value: "Pb" },
+                { name: "B相无功功率 kVar", value: "Qb" },
+                { name: "C相有功功率 kW", value: "Pc" },
+                { name: "C相无功功率 kVar", value: "Qc" },
+                { name: "总有功功率 kW", value: "P" },
+                { name: "总无功功率 kW", value: "Q" },
+                { name: "实时需量 kW", value: "Demand" },
+            ],
+        },
+        {
+            name: "电度",
+            list: [
+                { name: "正有功电度 kWh", value: "Epp" },
+                { name: "负有功电度 kWh", value: "Epn" },
+                { name: "正无功电度 kvarh", value: "Eqp" },
+                { name: "负无功电度 kvarh", value: "Eqn" },
+            ],
+        },
+        {
+            name: "电压",
+            list: [
+                { name: "A相电压 kV", value: "Ua" },
+                { name: "B相电压 kV", value: "Ub" },
+                { name: "C相电压 kV", value: "Uc" },
+                { name: "回路电压 V", value: "Ul" },
+                { name: "AB线电压 V", value: "Uab" },
+                { name: "BC线电压 V", value: "Ubc" },
+                { name: "CA线电压 V", value: "Uca" },
+            ],
+        },
+        {
+            name: "温度 ℃",
+            list: [
+                { name: "外接温度1", value: "T1" },
+                { name: "外接温度2", value: "T2" },
+                { name: "外接温度3", value: "T3" },
+                { name: "外接温度4", value: "T4" },
+                { name: "环境温度", value: "DeviceTemp" },
+            ],
+        },
+        {
+            name: "频率 Hz",
+            list: [{ name: "频率", value: "F" }],
+        },
+        {
+            name: "功率因数",
+            list: [
+                { name: "A相功率因数", value: "COSa" },
+                { name: "B相功率因数", value: "COSb" },
+                { name: "C相功率因数", value: "COSc" },
+                { name: "功率因数", value: "COS" },
+            ],
+        },
+        {
+            name: "谐波电流有效值 A",
+            list: [
+                { name: "Ia总谐波电流", value: "IHa" },
+                { name: "Ib总谐波电流", value: "IHa" },
+                { name: "Ic总谐波电流", value: "IHc" },
+            ],
+        },
+        {
+            name: "通讯参数",
+            list: [{ name: "设备信号强度", value: "SignalIntensity" }],
+        },
+        {
+            name: "电压突变 次",
+            list: [
+                { name: "电压暂升次数", value: "Upt" },
+                { name: "电压暂降次数", value: "Udt" },
+                { name: "电压中断次数", value: "Ust" },
+            ],
+        },
         ], //设备监控--->数据报表->默认tabs数据
         se_tabs: [
             { label: '电流', name: "I" },
@@ -263,6 +263,39 @@ export default createStore({
 
 
         trendIcoCount: null,
+
+
+        CurrentlySelectedToolBar: {
+            Type: '',//选中的工具栏svg类型
+            TypeName: '',//选中的工具栏svg类型名称
+            Title: '',//选中的工具栏svg标题
+            Color: '',//选中的工具栏svg颜色
+            CreateType: '',//选中工具栏的创建方式
+            EChartsOption: '',//选中工具栏的图表默认option
+            ElementBool: '',
+            SvgLineSelectval: ''
+        },
+        svgItem: {},
+        svgLineAni: {
+            selectgroup: [
+                {
+                    value: "",
+                    label: "无"
+                },
+                {
+                    value: "svg_ani_flow",
+                    label: "正向"
+                },
+                {
+                    value: "svg_ani_flow_back",
+                    label: "反向"
+                },
+                {
+                    value: "svg_ani_flow_stop",
+                    label: "停止"
+                }
+            ],
+        }
     },
     mutations: {
         /**
@@ -285,24 +318,24 @@ export default createStore({
                 checked_list[i] === "电流" ?
                     checked = "I" :
                     checked_list[i] === "功率" ?
-                    checked = "P" :
-                    checked_list[i] === "电度" ?
-                    checked = "KWh" :
-                    checked_list[i] === "电压" ?
-                    checked = "V" :
-                    checked_list[i] === "温度" ?
-                    checked = "C" :
-                    checked_list[i] === "频率" ?
-                    checked = "HZ" :
-                    checked_list[i] === "功率因数" ?
-                    checked = "PS" :
-                    checked_list[i] === "谐波电流有效值" ?
-                    checked = "RMS" :
-                    checked_list[i] === "通讯参数" ?
-                    checked = "DDB" :
-                    checked_list[i] === "电压突变" ?
-                    checked = "VT" :
-                    ""
+                        checked = "P" :
+                        checked_list[i] === "电度" ?
+                            checked = "KWh" :
+                            checked_list[i] === "电压" ?
+                                checked = "V" :
+                                checked_list[i] === "温度" ?
+                                    checked = "C" :
+                                    checked_list[i] === "频率" ?
+                                        checked = "HZ" :
+                                        checked_list[i] === "功率因数" ?
+                                            checked = "PS" :
+                                            checked_list[i] === "谐波电流有效值" ?
+                                                checked = "RMS" :
+                                                checked_list[i] === "通讯参数" ?
+                                                    checked = "DDB" :
+                                                    checked_list[i] === "电压突变" ?
+                                                        checked = "VT" :
+                                                        ""
                 state.queryType += checked_list.length > 1 ? checked + "," : checked;
             }
             state.queryType = checked_list.length > 1 ? state.queryType.slice(0, state.queryType.length - 1) : state.queryType
@@ -325,7 +358,7 @@ export default createStore({
                 var HH = time[i].getHours() < 10 ? '0' + time[i].getHours() : time[i].getHours()
                 var MM = time[i].getMinutes() < 10 ? '0' + time[i].getMinutes() : time[i].getMinutes()
                 var SS = time[i].getSeconds() < 10 ? '0' + time[i].getSeconds() : time[i].getSeconds()
-                    // console.log(Y + '-' + M + '-' + D + ' ' + HH + ':' + MM + ':' + SS)
+                // console.log(Y + '-' + M + '-' + D + ' ' + HH + ':' + MM + ':' + SS)
                 state.Time_Data.push(Y + '-' + M + '-' + D + ' ' + HH + ':' + MM + ':' + SS)
             }
         },
@@ -349,8 +382,8 @@ export default createStore({
                 k = k + 24 * 60 * 60 * 1000;
             }
             state.timearr = arrTime
-                // return arrTime;
-                // 时间格式处理
+            // return arrTime;
+            // 时间格式处理
             function datetimeparse(timestamp, format, prefix) {
                 if (typeof timestamp == "string") {
                     timestamp = Number(timestamp);
@@ -382,20 +415,20 @@ export default createStore({
                 let YYYY = dateobj.getFullYear();
                 let MM =
                     dateobj.getMonth() > 8 ?
-                    dateobj.getMonth() + 1 :
-                    "0" + (dateobj.getMonth() + 1);
+                        dateobj.getMonth() + 1 :
+                        "0" + (dateobj.getMonth() + 1);
                 let DD =
                     dateobj.getDate() > 9 ? dateobj.getDate() : "0" + dateobj.getDate();
                 let HH =
                     dateobj.getHours() > 9 ? dateobj.getHours() : "0" + dateobj.getHours();
                 let mm =
                     dateobj.getMinutes() > 9 ?
-                    dateobj.getMinutes() :
-                    "0" + dateobj.getMinutes();
+                        dateobj.getMinutes() :
+                        "0" + dateobj.getMinutes();
                 let ss =
                     dateobj.getSeconds() > 9 ?
-                    dateobj.getSeconds() :
-                    "0" + dateobj.getSeconds();
+                        dateobj.getSeconds() :
+                        "0" + dateobj.getSeconds();
                 let output = "";
                 let separator = "/";
                 if (format) {
@@ -463,5 +496,57 @@ export default createStore({
 
 
         },
+
+
+        setCurrentlySelectedToolBarAction(state, newValue) {
+
+            console.log(newValue)
+            state.CurrentlySelectedToolBar = newValue
+        },
+
+        clearCurrentlySelectedToolBarAction(state) {
+            state.CurrentlySelectedToolBar = {
+                Type: '',//选中的工具栏svg类型
+                TypeName: '',//选中的工具栏svg类型名称
+                Title: '',//选中的工具栏svg标题
+                Color: '',//选中的工具栏svg颜色
+                CreateType: '',//选中工具栏的创建方式
+                EChartsOption: '',//选中工具栏的图表默认option
+                ElementBool: '',
+                SvgLineSelectval: ''
+            }
+        },
+        setSvgItem(state, arr) {
+            let eChartsOption =
+                state.CurrentlySelectedToolBar.EChartsOption;
+
+            state.svgItem = {
+                id: arr.uuid,
+                title: state.CurrentlySelectedToolBar.Title,
+                type: state.CurrentlySelectedToolBar.Type,
+                typeName: state.CurrentlySelectedToolBar.TypeName,
+                svgColor: state.CurrentlySelectedToolBar.Color,
+                createType: state.CurrentlySelectedToolBar.CreateType,
+                svgPositionX: arr.offsetX,
+                svgPositionY: arr.offsetY,
+                mPoint: {
+                    startX: arr.offsetX,
+                    startY: arr.offsetY,
+                    endX: arr.offsetX,
+                    endY: arr.offsetY,
+                },
+                echartsOption: eChartsOption ? JSON.parse(eChartsOption) : null,
+                size: 1,
+                angle: 0,
+                switchType: 0,
+                elementBool: state.CurrentlySelectedToolBar.ElementBool,
+                svgLineSelectval: state.CurrentlySelectedToolBar.SvgLineSelectval,
+                deviceId: 0,
+                variableId: 0
+
+                //translate:`translate(${this.mousePosition.positionX},${this.mousePosition.positionY})`
+            };
+        }
+
     }
 })

src/utils/request.js

@@ -8,9 +8,9 @@ import router from '@/router'
 // create an axios instance
 
 let baseURL = window.PLATFROM_CONFIG.baseUrl
-    // alert(process.env.NODE_ENV)
-    // alert(baseURL)
-    // alert(process.env.VUE_APP_BASE_URL)
+// alert(process.env.NODE_ENV)
+// alert(baseURL)
+// alert(process.env.VUE_APP_BASE_URL)
 
 /**
  * @description 处理code异常
@@ -28,23 +28,29 @@ const handleCode = (code, msg) => {
             // })
             router
             // router.replace({ path: "/" });
-            window.location.href = 'https://wx.ewoogi.com/manage/#/login'
-
+            if (window.location.host.indexOf("localhost") != -1) {
+                localStorage.removeItem('accessToken')
+                router.replace({ path: "/" });
+            } else if (window.location.host.indexOf("pcdev.ewoogi.com") != -1) {
+                window.location.href = 'https://pcdev.ewoogi.com/adminfiv/#/login'
+            } else {
+                window.location.href = 'https://wx.ewoogi.com/manage/#/login'
+            }
             removeToken()
             return;
     }
 }
 
 const service = axios.create({
-        baseURL: baseURL,
-        // baseURL: process.env.NODE_ENV !== "development" ? baseURL : process.env.VUE_APP_BASE_URL,
-        withCredentials: true, // send cookies when cross-domain requests
-        timeout: 5000, // request timeout
-        headers: {
-            'Content-Type': 'application/json;charset=UTF-8',
-        },
-    })
-    // request interceptor
+    baseURL: baseURL,
+    // baseURL: process.env.NODE_ENV !== "development" ? baseURL : process.env.VUE_APP_BASE_URL,
+    withCredentials: true, // send cookies when cross-domain requests
+    timeout: 5000, // request timeout
+    headers: {
+        'Content-Type': 'application/json;charset=UTF-8',
+    },
+})
+// request interceptor
 
 
 service.interceptors.request.use(

src/views/CircuitPreview.vue

@@ -12,40 +12,26 @@
       >
         <defs />
         <g
-          style="cursor: pointer"
-          v-for="(item, index) in svgLists"
+          v-for="item in svgLists"
           :key="item"
           :id="item.id"
-          @mousedown="
-            MousedownSvg(
-              item.id,
-              index,
-              item.svgPositionX,
-              item.svgPositionY,
-              $event
-            )
-          "
           :title="item.title"
-          :type="item.type"
           :transform="
             'translate(' +
             item.svgPositionX +
             ',' +
             item.svgPositionY +
-            ') rotate(' +
+            ')' +
+            'rotate(' +
             item.angle +
-            ') scale(' +
+            ')' +
+            'scale(' +
             item.size +
             ')'
           "
         >
           <SvgComponents
-            :svg_color="item.svgColor"
-            :svgtype="item.type"
-            :text="item.svgText"
-            :font-size="item.fontSize"
-            :height="item.height"
-            :size="item.size"
+            :component_prop="item"
             :svgInfoData="svgInfoData"
           ></SvgComponents>
         </g>
@@ -70,90 +56,12 @@ export default {
       editable: false,
     };
   },
-  mounted() {
-    window.onbeforeunload = (e) => {
-      alert(1);
-      if (!this.modified) {
-        return;
-      }
-      // 通知浏览器不要执行与事件关联的默认动作
-      e.preventDefault();
-      // Chrome 需要 returnValue 被设置成空字符串
-      e.returnValue = "";
-    };
-    window.addEventListener("beforeunload", (e) => {
-      alert("1", e);
-      localStorage.setItem("abcde", "asdas");
-    });
-  },
   methods: {
-    //设置表格属性
-    setTableAttr(id, rowCount, colCount) {
-      //根据当前id找到当前表格的index
-      let tableIndex = this.svgLists.indexOf(
-        this.svgLists.filter((f) => f.id == id)[0]
-      );
-      if (tableIndex == -1) {
-        return;
-      }
-      let svgType = this.svgLists.filter((f) => f.id == id)[0].type;
-      if (svgType != "TableSvg") {
-        return;
-      }
-      let tableData = [];
-      for (let r = 0; r < rowCount; r++) {
-        let tableColDataList = [];
-        for (let c = 0; c < colCount; c++) {
-          if (
-            this.svgLists[tableIndex].tableData.length >= r + 1 &&
-            this.svgLists[tableIndex].tableData[r].cols.length >= c + 1
-          ) {
-            tableColDataList.push(
-              this.svgLists[tableIndex].tableData[r].cols[c]
-            );
-          } else {
-            let tableColData = {
-              id: this.$UCore.GenUUid(),
-              val: `${r + 1}行${c + 1}列`,
-            };
-            tableColDataList.push(tableColData);
-          }
-        }
-        let tableRowData = {
-          cols: tableColDataList,
-        };
-        tableData.push(tableRowData);
-      }
-      console.log(tableData);
-
-      this.svgLists[tableIndex].tableData = tableData;
-
-      let gAnyList = document.querySelectorAll("foreignObject");
-      let data = "";
-      data += " <table class='.divtable'>";
-      for (var j = 0; j < tableData.length; j++) {
-        data += "<tr>";
-        for (var i = 0; i < tableData[j].cols.length; i++) {
-          data +=
-            "<td><input id=" +
-            tableData[j].cols[i].id +
-            " type='text' class='input' value=" +
-            tableData[j].cols[i].val +
-            " ></td>";
-        }
-        data += "</tr>";
-      }
-      data += "</table>";
-      gAnyList[0].innerHTML = data;
-      document.getElementsByClassName(".divtable")[0].style = `
-        position: absolute;
-        left: 0;
-        top: 0;
-        line-height: 20px;
-        z-index: 111;
-        cursor: pointer;
-        font-size: 20px;`;
-    },
+    /**
+     * @description: 此方法仅为演示使用 真正修改组件数据请判断dataType属性
+     * @param {*}
+     * @return {*}
+     */
     testF() {
       //找出所有断路器
       let anyCircuitBreakerList = this.svgLists.filter(
@@ -161,16 +69,16 @@ export default {
       );
       //找出所有的电线开关
       let anyWireBreakList = this.svgLists.filter(
-        (f) => f.type == "WireConnectionSvg" || f.type == "WireBreakOffSvg"
+        (f) => f.type == "WireBreakOnSvg" || f.type == "WireBreakOffSvg"
+      );
+      //找到所有饼图
+      let anyEchartsPieList = this.svgLists.filter(
+        (f) => f.type == "EchartsPieSvg"
+      );
+      //找到所有柱状图
+      let anyEchartsBasicBarSvgList = this.svgLists.filter(
+        (f) => f.type == "EchartsBasicBarSvg"
       );
-      //查找所有表格值
-      let anyTable = this.svgLists.filter((f) => f.type == "TableSvg")[0];
-      let anyTableList;
-      if (anyTable == "undefined" || anyTable == null) {
-        anyTableList = [];
-      } else {
-        anyTableList = anyTable.tableData.map((m) => m.cols);
-      }
       this.analogDataTimer = setInterval(function () {
         anyCircuitBreakerList.forEach((anyCircuitBreaker) => {
           //生成一个随机数
@@ -185,27 +93,32 @@ export default {
           //生成一个随机数
           let random = Math.round(Math.random() * 10);
           if (random < 5) {
-            anyWireBreak.type = "WireConnectionSvg";
-            anyWireBreak.svgColor = "#FF0000";
+            anyWireBreak.type = "WireBreakOnSvg";
+            anyWireBreak.svgColor = "#00FF00";
           } else {
             anyWireBreak.type = "WireBreakOffSvg";
-            anyWireBreak.svgColor = "#00FF00";
+            anyWireBreak.svgColor = "#FF0000";
           }
         });
-        anyTableList.forEach((anyTables) => {
-          anyTables.forEach((anyTable) => {
-            if (
-              anyTable.type == "ff85bc7f-3b69-454f-8cf8-21c9f1903dd6" ||
-              anyTable.id == "f8271273-d07d-4033-8b6c-6b52c04fe3e5" ||
-              anyTable.id == "dc5931bc-7e8e-47f4-b28e-5bc42fb207da" ||
-              anyTable.id == "560f5404-6539-422f-8fb9-77bac641e72b"
-            ) {
-              //生成一个随机数
-              let random = Math.round(Math.random() * 100);
-              anyTable.val = random;
-            }
+        anyEchartsPieList.forEach((anyEchartsPie) => {
+          anyEchartsPie.echartsOption.series[0].data.forEach((f) => {
+            //生成一个随机数
+            let random = Math.round(Math.random() * 100);
+            f.value = random;
           });
         });
+        anyEchartsBasicBarSvgList.forEach((anyEchartsBasicBar) => {
+          let data_arr = [
+            Math.round(Math.random() * 300),
+            Math.round(Math.random() * 300),
+            Math.round(Math.random() * 300),
+            Math.round(Math.random() * 300),
+            Math.round(Math.random() * 300),
+            Math.round(Math.random() * 300),
+            Math.round(Math.random() * 300),
+          ];
+          anyEchartsBasicBar.echartsOption.series[0].data = data_arr;
+        });
       }, 2000);
     },
     testG() {
@@ -214,15 +127,15 @@ export default {
   },
   created() {
     let _this = this;
-    _this.svgLists = JSON.parse(localStorage.getItem("svginfo"));
 
     //请求接口获取组件
     this.$axios
-      .get(window.PLATFROM_CONFIG.Interface)
+      .get("/InterfaceReturn1.json")
       .then(function (response) {
         _this.svgInfoData = response.data;
         console.log(response.data);
-        console.log(JSON.stringify(response.data));
+        //渲染组件
+        _this.svgLists = JSON.parse(localStorage.getItem("svginfo"));
       })
       .catch(function (error) {
         console.log(error);

src/views/index.vue

@@ -13,11 +13,7 @@
         >
           <span>{{ route.meta.title }}</span>
         </router-link>
-        <a
-          :href="'https://wx.ewoogi.com/manage/#/'"
-          class="router-left router_left1"
-          >后台管理</a
-        >
+        <a :href="hrefUrl" class="router-left router_left1">后台管理</a>
 
         <!-- <a
           :href="'http://localhost:9999/#/login?userName=admin'"
@@ -25,8 +21,6 @@
           class="router-left router_left1"
           >后台管理</a
         > -->
-
-
       </div>
       <!-- 主页路由菜单 结束 -->
       <!-- 站点路由菜单 开始 -->
@@ -110,10 +104,13 @@ export default {
       assToken: "",
       username: "",
       password: "",
+      hrefUrl: "",
     };
   },
   components: {},
   mounted() {
+    this.hrefUrl = window.PLATFROM_CONFIG.hrefUrl;
+
     this.assToken = getToken();
 
     setInterval(() => {
@@ -144,13 +141,13 @@ export default {
         }
       }
       // localStorage.clear();
-      localStorage.removeItem("Overview")
+      localStorage.removeItem("Overview");
       localStorage.setItem("Overview", [val, this.name]);
     },
     //下拉列表api请求
     options_api() {
       api.options_api().then((requset) => {
-         this.options=[]
+        this.options = [];
         // console.log(requset)
         var list = requset.data;
         for (let i in list) {

src/views/site/Power_diagram.vue

@@ -16,48 +16,34 @@
         >
           <defs />
           <g
-            style="cursor: pointer"
-            v-for="(item, index) in svgLists"
-            :key="index"
+            v-for="item in svgLists"
+            :key="item"
             :id="item.id"
-            @mousedown="
-              MousedownSvg(
-                item.id,
-                index,
-                item.svgPositionX,
-                item.svgPositionY,
-                $event
-              )
-            "
             :title="item.title"
-            :type="item.type"
             :transform="
               'translate(' +
               item.svgPositionX +
               ',' +
               item.svgPositionY +
-              ') rotate(' +
+              ')' +
+              'rotate(' +
               item.angle +
-              ') scale(' +
+              ')' +
+              'scale(' +
               item.size +
               ')'
             "
           >
             <SvgComponents
-              :svg_color="item.svgColor"
-              :svgtype="item.type"
-              :text="item.svgText"
-              :font-size="item.fontSize"
-              :size="item.size"
-              :height="item.height"
+              :component_prop="item"
               :svgInfoData="svgInfoData"
             ></SvgComponents>
           </g>
         </svg>
       </div>
       <div class="btns-content">
-        <a-button type="primary" @click="testF">模拟硬件</a-button>
-        <a-button type="primary" @click="testG">取消模拟硬件</a-button>
+        <!-- <a-button type="primary" @click="testF">模拟硬件</a-button>
+        <a-button type="primary" @click="testG">取消模拟硬件</a-button> -->
         <a-button type="primary" @click="editChart">编辑</a-button>
       </div>
     </div>
@@ -86,24 +72,42 @@ export default {
       this.$store.state.siteId = this.$route.query.siteId;
     }
     this.$nextTick(() => {
+      this.getHookupComponentComplete();
       this.Interface();
     });
   },
   methods: {
-    Interface() {
+    getHookupComponentComplete() {
       var _this = this;
-
-      //请求接口获取组件
-      this.setInterval = setInterval(() => {
-        api.getHookupComponentComplete({ siteId: this.$store.state.siteId }).then((requset) => {
+      api
+        .getHookupComponentComplete({ siteId: this.$store.state.siteId })
+        .then((requset) => {
+          // console.log(requset);
           if (requset.data.length > 0) {
-            _this.svgLists = requset.data;
+            requset.data.map((val) => {
+              if (val.type === "TextSvg1") {
+                if (val.variableValue === "null") {
+                  val.title = "暂无数据";
+                } else {
+                  val.title = val.variableValue;
+                }
+              }
+              _this.svgLists.push(val);
+            });
+            this.testF();
           } else {
             ElMessage.error("当前站点下无可查看配电图,即将为您跳转到编辑页！");
-            this.editChart();
+            _this.editChart();
           }
         });
-      }, 1000);
+    },
+    Interface() {
+      var _this = this;
+
+      //请求接口获取组件
+      this.setInterval = setInterval(() => {
+        _this.getHookupComponentComplete();
+      }, 1000 * 60 * 7);
 
       api.gethookupComponentBasics().then((requset) => {
         if (requset.status === "SUCCESS") {
@@ -116,15 +120,40 @@ export default {
         }
       });
     },
+    testF() {
+      //找出所有的电线开关
+      let anyWireBreakList = this.svgLists.filter(
+        (f) => f.type == "WireBreakOnSvg" || f.type == "WireBreakOffSvg"
+      );
+      //找出所有断路器
+      let anyCircuitBreakerList = this.svgLists.filter(
+        (f) => f.type == "CircuitBreakerSvg"
+      );
+
+      anyWireBreakList.forEach((anyWireBreak) => {
+        if (anyWireBreak.variableValue == "0") {
+          anyWireBreak.type = "WireBreakOnSvg";
+          anyWireBreak.svgColor = "#00FF00";
+        } else if (anyWireBreak.variableValue == "1") {
+          anyWireBreak.type = "WireBreakOffSvg";
+          anyWireBreak.svgColor = "#FF0000";
+        }
+      });
+
+      anyCircuitBreakerList.forEach((anyCircuitBreaker) => {
+        if (anyCircuitBreaker.variableValue == "0") {
+          anyCircuitBreaker.svgColor = "#00FF00";
+        } else if (anyCircuitBreaker.variableValue == "1") {
+          anyCircuitBreaker.svgColor = "#FF0000";
+        }
+      });
+    },
     editChart() {
       this.$router.push({
         path: "/CircuitEdit1",
         name: "CircuitEdit1",
       });
     },
-    MousedownSvg(id, index, svgPositionX, svgPositionY, $event) {
-      console.log(id, index, svgPositionX, svgPositionY, $event);
-    },
   },
   unmounted() {
     //销毁定时器