'202203081754'

public/InterfaceReturn.json

@@ -1,172 +1,439 @@
 [
   {
     "type": "CircuitBreakerSvg",
-    "title": "断路器",
     "template": "<rect x='-10' y='-20' width='20' height='40' :fill='svg_color' :stroke='svg_color' stroke-width='2' data-v-d903d4f8=''></rect>",
     "props": [
       "svg_color"
     ],
     "default_color": "#00FF00",
-    "fontSize": 1,
-    "height": 40,
-    "svgText": "",
-    "priview_img": "/vuefiv/CircuitBreakerSvg.png"
+    "priviewImg": "/vuefiv/CircuitBreakerSvg.png",
+    "array": {
+      "id": "",
+      "sort": 0,
+      "title": "断路器",
+      "type": "CircuitBreakerSvg",
+      "typeName": "断路器",
+      "svgColor": "#00FF00",
+      "svgPositionX": 0,
+      "svgPositionY": 0,
+      "size": 1,
+      "height": 40,
+      "fontSize": 1,
+      "svgText": "",
+      "angle": 0,
+      "tableRowCount": 2,
+      "tableColCount": 2,
+      "tableData": [],
+      "elementBool": [
+        "svgColor",
+        "selectSvgInfoSize",
+        "width",
+        "angle",
+        "size"
+      ]
+    }
   },
   {
     "type": "VerticalLineSvg",
-    "title": "竖线",
     "template": "<line x1='0' y1='-25' x2='0' y2='25' fill='none' :stroke='svg_color' stroke-width='2' data-v-d903d4f8=''></line>",
     "props": [
       "svg_color"
     ],
     "default_color": "#FF0000",
-    "fontSize": 1,
-    "height": 150,
-    "svgText": "",
-    "priview_img": "/vuefiv/VerticalLineSvg.png"
+    "priviewImg": "/vuefiv/VerticalLineSvg.png",
+    "array": {
+      "id": "",
+      "sort": 0,
+      "title": "电线",
+      "type": "VerticalLineSvg",
+      "typeName": "电线",
+      "svgColor": "#FF0000",
+      "svgPositionX": 0,
+      "svgPositionY": 0,
+      "size": 1,
+      "height": 50,
+      "fontSize": 1,
+      "svgText": "",
+      "angle": 0,
+      "tableRowCount": 2,
+      "tableColCount": 2,
+      "tableData": [],
+      "elementBool": [
+        "size",
+        "svgColor",
+        "selectSvgInfoSize",
+        "width",
+        "angle",
+        "height"
+      ]
+    }
   },
   {
     "type": "TextSvg",
-    "title": "文字",
     "template": "<text  x='-50' y='25' font-size='50' :fill='svg_color' data-v-d903d4f8=''></text>",
     "props": [
       "svg_color"
     ],
     "default_color": "#FF0000",
-    "fontSize": 50,
-    "height": 1,
-    "svgText": "文字",
-    "priview_img": "/vuefiv/TextSvg.png"
+    "priviewImg": "/vuefiv/TextSvg.png",
+    "array": {
+      "id": "",
+      "sort": 0,
+      "title": "文字",
+      "type": "TextSvg",
+      "typeName": "文字",
+      "svgColor": "#FF0000",
+      "svgPositionX": 0,
+      "svgPositionY": 0,
+      "size": 1,
+      "height": 1,
+      "fontSize": 50,
+      "svgText": "文字",
+      "angle": 0,
+      "tableRowCount": 2,
+      "tableColCount": 2,
+      "tableData": [],
+      "elementBool": [
+        "svgColor",
+        "selectSvgInfoSize",
+        "angle",
+        "fontSize",
+        "svgText"
+      ]
+    }
   },
   {
     "type": "IsolatingSwitchSvg",
-    "title": "隔离开关",
     "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>",
     "props": [
       "svg_color"
     ],
     "default_color": "#00FF00",
-    "fontSize": 1,
-    "height": 20,
-    "svgText": "",
-    "priview_img": "/vuefiv/IsolatingSwitchSvg.png"
+    "priviewImg": "/vuefiv/IsolatingSwitchSvg.png",
+    "array": {
+      "id": "",
+      "sort": 0,
+      "title": "隔离开关",
+      "type": "IsolatingSwitchSvg",
+      "typeName": "隔离开关",
+      "svgColor": "#00FF00",
+      "svgPositionX": 0,
+      "svgPositionY": 0,
+      "size": 1,
+      "height": 20,
+      "fontSize": 1,
+      "svgText": "",
+      "angle": 0,
+      "tableRowCount": 2,
+      "tableColCount": 2,
+      "tableData": [],
+      "elementBool": [
+        "svgColor",
+        "selectSvgInfoSize",
+        "angle",
+        "size"
+      ]
+    }
   },
   {
     "type": "LightningArresterSvg",
-    "title": "避雷器",
     "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>",
     "props": [
       "svg_color"
     ],
     "default_color": "#FF0000",
-    "fontSize": 1,
-    "height": 7,
-    "svgText": "",
-    "priview_img": "/vuefiv/LightningArresterSvg.png"
+    "priviewImg": "/vuefiv/LightningArresterSvg.png",
+    "array": {
+      "id": "",
+      "sort": 0,
+      "title": "避雷器",
+      "type": "LightningArresterSvg",
+      "typeName": "避雷器",
+      "svgColor": "#FF0000",
+      "svgPositionX": 0,
+      "svgPositionY": 0,
+      "size": 1,
+      "height": 7,
+      "fontSize": 1,
+      "svgText": "",
+      "angle": 0,
+      "tableRowCount": 2,
+      "tableColCount": 2,
+      "tableData": [],
+      "elementBool": [
+        "svgColor",
+        "selectSvgInfoSize",
+        "angle",
+        "size"
+      ]
+    }
   },
   {
     "type": "StandardCapacitorSvg",
-    "title": "标准电容器",
     "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>",
     "props": [
       "svg_color"
     ],
     "default_color": "#FF0000",
-    "fontSize": 1,
-    "height": 3,
-    "svgText": "",
-    "priview_img": "/vuefiv/StandardCapacitorSvg.png"
+    "priviewImg": "/vuefiv/StandardCapacitorSvg.png",
+    "array": {
+      "id": "",
+      "sort": 0,
+      "title": "标准电容器",
+      "type": "StandardCapacitorSvg",
+      "typeName": "标准电容器",
+      "svgColor": "#FF0000",
+      "svgPositionX": 0,
+      "svgPositionY": 0,
+      "size": 1,
+      "height": 3,
+      "fontSize": 1,
+      "svgText": "",
+      "angle": 0,
+      "tableRowCount": 2,
+      "tableColCount": 2,
+      "tableData": [],
+      "elementBool": [
+        "svgColor",
+        "selectSvgInfoSize",
+        "angle",
+        "size"
+      ]
+    }
   },
   {
     "type": "WireBreakOffSvg",
-    "title": "电线开关",
     "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>",
     "props": [
       "svg_color"
     ],
     "default_color": "#00FF00",
-    "fontSize": 1,
-    "height": 5,
-    "svgText": "",
-    "priview_img": "/vuefiv/WireBreakOffSvg.png"
+    "priviewImg": "/vuefiv/WireBreakOffSvg.png",
+    "array": {
+      "id": "",
+      "sort": 0,
+      "title": "电线开关",
+      "type": "WireBreakOffSvg",
+      "typeName": "电线开关",
+      "svgColor": "#00FF00",
+      "svgPositionX": 0,
+      "svgPositionY": 0,
+      "size": 1,
+      "height": 5,
+      "fontSize": 1,
+      "svgText": "",
+      "angle": 0,
+      "tableRowCount": 2,
+      "tableColCount": 2,
+      "tableData": [],
+      "elementBool": [
+        "svgColor",
+        "selectSvgInfoSize",
+        "angle",
+        "size"
+      ]
+    }
   },
   {
     "type": "WireConnectionSvg",
-    "title": "电线开关",
     "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>",
     "props": [
       "svg_color"
     ],
     "default_color": "#FF0000",
-    "fontSize": 1,
-    "height": 5,
-    "svgText": "",
-    "priview_img": "/vuefiv/WireBreakOffSvg.png"
+    "priviewImg": "/vuefiv/WireBreakOffSvg.png",
+    "array": {
+      "id": "",
+      "sort": 0,
+      "title": "电线开关",
+      "type": "WireConnectionSvg",
+      "typeName": "电线开关",
+      "svgColor": "#FF0000",
+      "svgPositionX": 0,
+      "svgPositionY": 0,
+      "size": 1,
+      "height": 5,
+      "fontSize": 1,
+      "svgText": "",
+      "angle": 0,
+      "tableRowCount": 2,
+      "tableColCount": 2,
+      "tableData": [],
+      "elementBool": [
+        "svgColor",
+        "selectSvgInfoSize",
+        "angle",
+        "size"
+      ]
+    }
   },
   {
     "type": "TableSvg",
-    "title": "表格",
-    "template": "<foreignObject x='0' y='0' ></foreignObject>",
+    "template": "<foreignObject x='0' y='0'></foreignObject>",
     "props": [
       "svg_color"
     ],
     "default_color": "#CCCC33",
-    "fontSize": 1,
-    "height": 0,
-    "svgText": "",
-    "priview_img": "/vuefiv/TableSvg.png"
+    "priviewImg": "/vuefiv/TableSvg.png",
+    "array": {
+      "id": "",
+      "sort": 0,
+      "title": "表格",
+      "type": "TableSvg",
+      "typeName": "表格",
+      "svgColor": "#CCCC33",
+      "svgPositionX": 0,
+      "svgPositionY": 0,
+      "size": 1,
+      "height": 0,
+      "fontSize": 1,
+      "svgText": "",
+      "angle": 0,
+      "tableRowCount": 2,
+      "tableColCount": 2,
+      "tableData": [],
+      "elementBool": [
+        "svgColor",
+        "selectSvgInfoSize",
+        "tableRowCount",
+        "tableColCount"
+      ]
+    }
   },
   {
     "type": "HorizontalLineSvg",
-    "title": "横线",
-    "template": "<line x1='-75' y1='0' x2='75' y2='0' fill='none' :stroke='svg_color' stroke-width='2' data-v-d903d4f8=''></line>",
+    "template": "<line x1='-25' y1='0' x2='25' y2='0' fill='none' :stroke='svg_color' stroke-width='2' data-v-d903d4f8=''></line>",
     "props": [
       "svg_color"
     ],
     "default_color": "#FF0000",
-    "fontSize": 1,
-    "height": 150,
-    "svgText": "",
-    "priview_img": "/vuefiv/HorizontalLineSvg.png"
+    "priviewImg": "/vuefiv/HorizontalLineSvg.png",
+    "array": {
+      "id": "",
+      "sort": 0,
+      "title": "横线",
+      "type": "HorizontalLineSvg",
+      "typeName": "横线",
+      "svgColor": "#FF0000",
+      "svgPositionX": 0,
+      "svgPositionY": 0,
+      "size": 1,
+      "height": 50,
+      "fontSize": 1,
+      "svgText": "",
+      "angle": 0,
+      "tableRowCount": 2,
+      "tableColCount": 2,
+      "tableData": [],
+      "elementBool": [
+        "size",
+        "svgColor",
+        "selectSvgInfoSize",
+        "width",
+        "angle",
+        "height"
+      ]
+    }
   },
   {
     "type": "PolylineUpSvg",
-    "title": "多段向上折线",
     "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>",
     "props": [
       "svg_color"
     ],
     "default_color": "#FF0000",
-    "fontSize": 1,
-    "height": 7,
-    "svgText": "",
-    "priview_img": "/vuefiv/PolylineUpSvg.png"
+    "priviewImg": "/vuefiv/PolylineUpSvg.png",
+    "array": {
+      "id": "",
+      "sort": 0,
+      "title": "多段向上折线",
+      "type": "PolylineUpSvg",
+      "typeName": "多段向上折线",
+      "svgColor": "#FF0000",
+      "svgPositionX": 0,
+      "svgPositionY": 0,
+      "size": 1,
+      "height": 7,
+      "fontSize": 1,
+      "svgText": "",
+      "angle": 0,
+      "tableRowCount": 2,
+      "tableColCount": 2,
+      "tableData": [],
+      "elementBool": [
+        "svgColor",
+        "selectSvgInfoSize",
+        "width",
+        "angle",
+        "size"
+      ]
+    }
   },
   {
     "type": "PolylineDownSvg",
-    "title": "多段向下折线",
     "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"
     ],
     "default_color": "#FF0000",
-    "fontSize": 1,
-    "height": 7,
-    "svgText": "",
-    "priview_img": "/vuefiv/PolylineDownSvg.png"
+    "priviewImg": "/vuefiv/PolylineDownSvg.png",
+    "array": {
+      "id": "",
+      "sort": 0,
+      "title": "多段向下折线",
+      "type": "PolylineDownSvg",
+      "typeName": "多段向下折线",
+      "svgColor": "#FF0000",
+      "svgPositionX": 0,
+      "svgPositionY": 0,
+      "size": 1,
+      "height": 7,
+      "fontSize": 1,
+      "svgText": "",
+      "angle": 0,
+      "tableRowCount": 2,
+      "tableColCount": 2,
+      "tableData": [],
+      "elementBool": [
+        "svgColor",
+        "selectSvgInfoSize",
+        "angle",
+        "size"
+      ]
+    }
   },
   {
     "type": "ArrowDownSvg",
-    "title": "箭头向下",
     "template": "<polygon  points='0,-8 5,0 10,-8' :fill='svg_color' :stroke='svg_color' stroke-width='2' transform='translate(-5,0)'></polygon>",
     "props": [
       "svg_color"
     ],
     "default_color": "#FF0000",
-    "fontSize": 1,
-    "height": 2,
-    "svgText": "",
-    "priview_img": "/vuefiv/ArrowDownSvg.png"
+    "priviewImg": "/vuefiv/ArrowDownSvg.png",
+    "array": {
+      "id": "",
+      "sort": 0,
+      "title": "箭头向下",
+      "type": "ArrowDownSvg",
+      "typeName": "箭头向下",
+      "svgColor": "#FF0000",
+      "svgPositionX": 0,
+      "svgPositionY": 0,
+      "size": 1,
+      "height": 2,
+      "fontSize": 1,
+      "svgText": "",
+      "angle": 0,
+      "tableRowCount": 2,
+      "tableColCount": 2,
+      "tableData": [],
+      "elementBool": [
+        "svgColor",
+        "selectSvgInfoSize",
+        "angle",
+        "size"
+      ]
+    }
   },
   {
     "type": "ArrowUpSvg",
@@ -176,149 +443,395 @@
       "svg_color"
     ],
     "default_color": "#FF0000",
-    "fontSize": 1,
-    "height": 2,
-    "svgText": "",
-    "priview_img": "/vuefiv/ArrowUpSvg.png"
+    "priviewImg": "/vuefiv/ArrowUpSvg.png",
+    "array": {
+      "id": "",
+      "sort": 0,
+      "title": "箭头向上",
+      "type": "ArrowUpSvg",
+      "typeName": "箭头向上",
+      "svgColor": "#FF0000",
+      "svgPositionX": 0,
+      "svgPositionY": 0,
+      "size": 1,
+      "height": 2,
+      "fontSize": 1,
+      "svgText": "",
+      "angle": 0,
+      "tableRowCount": 2,
+      "tableColCount": 2,
+      "tableData": [],
+      "elementBool": [
+        "svgColor",
+        "selectSvgInfoSize",
+        "angle",
+        "size"
+      ]
+    }
   },
   {
     "type": "GroundGraySvg",
-    "title": "接地灰白",
     "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>",
     "props": [
       "svg_color"
     ],
     "default_color": "#CCCCCC",
-    "fontSize": 1,
-    "height": 3,
-    "svgText": "",
-    "priview_img": "/vuefiv/GroundGraySvg.png"
+    "priviewImg": "/vuefiv/GroundGraySvg.png",
+    "array": {
+      "id": "",
+      "sort": 0,
+      "title": "接地灰白",
+      "type": "GroundGraySvg",
+      "typeName": "接地灰白",
+      "svgColor": "#CCCCCC",
+      "svgPositionX": 0,
+      "svgPositionY": 0,
+      "size": 1,
+      "height": 3,
+      "fontSize": 1,
+      "svgText": "",
+      "angle": 0,
+      "tableRowCount": 2,
+      "tableColCount": 2,
+      "tableData": [],
+      "elementBool": [
+        "svgColor",
+        "selectSvgInfoSize",
+        "angle",
+        "size"
+      ]
+    }
   },
   {
     "type": "SignalLamp",
-    "title": "信号灯",
     "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>",
     "props": [
       "svg_color"
     ],
     "default_color": "#FF0000",
-    "fontSize": 1,
-    "height": 3,
-    "svgText": "",
-    "priview_img": "/vuefiv/SignalLamp.png"
+    "priviewImg": "/vuefiv/SignalLamp.png",
+    "array": {
+      "id": "",
+      "sort": 0,
+      "title": "信号灯",
+      "type": "SignalLamp",
+      "typeName": "信号灯",
+      "svgColor": "#FF0000",
+      "svgPositionX": 0,
+      "svgPositionY": 0,
+      "size": 1,
+      "height": 3,
+      "fontSize": 1,
+      "svgText": "",
+      "angle": 0,
+      "tableRowCount": 2,
+      "tableColCount": 2,
+      "tableData": [],
+      "elementBool": [
+        "svgColor",
+        "selectSvgInfoSize",
+        "width",
+        "angle",
+        "size"
+      ]
+    }
   },
   {
     "type": "RectSvg",
-    "title": "长方形",
     "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>",
     "props": [
       "svg_color"
     ],
-    "height": 30,
     "default_color": "#FF0000",
-    "priview_img": "/vuefiv/RectSvg.png"
+    "priviewImg": "/vuefiv/RectSvg.png",
+    "array": {
+      "id": "",
+      "sort": 0,
+      "title": "长方形",
+      "type": "RectSvg",
+      "typeName": "长方形",
+      "svgColor": "#FF0000",
+      "svgPositionX": 0,
+      "svgPositionY": 0,
+      "size": 1,
+      "height": 30,
+      "fontSize": 1,
+      "svgText": "",
+      "angle": 0,
+      "tableRowCount": 2,
+      "tableColCount": 2,
+      "tableData": [],
+      "elementBool": [
+        "svgColor",
+        "selectSvgInfoSize",
+        "angle",
+        "size"
+      ]
+    }
   },
   {
     "type": "TwoCircleSvg",
-    "title": "双圆",
     "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>",
     "props": [
       "svg_color"
     ],
     "default_color": "#FF0000",
-    "fontSize": 1,
-    "height": 3,
-    "svgText": "",
-    "priview_img": "/vuefiv/TwoCircleSvg.png"
+    "priviewImg": "/vuefiv/TwoCircleSvg.png",
+    "array": {
+      "id": "",
+      "sort": 0,
+      "title": "双圆",
+      "type": "TwoCircleSvg",
+      "typeName": "双圆",
+      "svgColor": "#FF0000",
+      "svgPositionX": 0,
+      "svgPositionY": 0,
+      "size": 1,
+      "height": 3,
+      "fontSize": 1,
+      "svgText": "",
+      "angle": 0,
+      "tableRowCount": 2,
+      "tableColCount": 2,
+      "tableData": [],
+      "elementBool": [
+        "svgColor",
+        "selectSvgInfoSize",
+        "angle",
+        "size"
+      ]
+    }
   },
   {
     "type": "TransformerYSvg",
-    "title": "电流互感器y",
     "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>",
     "props": [
       "svg_color"
     ],
     "default_color": "#FF0000",
-    "fontSize": 1,
-    "height": 5,
-    "svgText": "",
-    "priview_img": "/vuefiv/TransformerY.png"
+    "priviewImg": "/vuefiv/TransformerY.png",
+    "array": {
+      "id": "",
+      "sort": 0,
+      "title": "电流互感器y",
+      "type": "TransformerYSvg",
+      "typeName": "电流互感器y",
+      "svgColor": "#FF0000",
+      "svgPositionX": 0,
+      "svgPositionY": 0,
+      "size": 1,
+      "height": 5,
+      "fontSize": 1,
+      "svgText": "",
+      "angle": 0,
+      "tableRowCount": 2,
+      "tableColCount": 2,
+      "tableData": [],
+      "elementBool": [
+        "svgColor",
+        "selectSvgInfoSize",
+        "angle",
+        "size"
+      ]
+    }
   },
   {
     "type": "TransformerTriphaseOpen",
-    "title": "三相互感器开口",
     "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>",
     "props": [
       "svg_color"
     ],
     "default_color": "#FF0000",
-    "fontSize": 1,
-    "height": 2,
-    "svgText": "",
-    "priview_img": "/vuefiv/TransformerTriphaseOpen.png"
+    "priviewImg": "/vuefiv/TransformerTriphaseOpen.png",
+    "array": {
+      "id": "",
+      "sort": 0,
+      "title": "三相互感器开口",
+      "type": "TransformerTriphaseOpen",
+      "typeName": "三相互感器开口",
+      "svgColor": "#FF0000",
+      "svgPositionX": 0,
+      "svgPositionY": 0,
+      "size": 1,
+      "height": 2,
+      "fontSize": 1,
+      "svgText": "",
+      "angle": 0,
+      "tableRowCount": 2,
+      "tableColCount": 2,
+      "tableData": [],
+      "elementBool": [
+        "svgColor",
+        "selectSvgInfoSize",
+        "angle",
+        "size"
+      ]
+    }
   },
   {
     "type": "DoubleWindingSvg",
-    "title": "双绕组变压器",
     "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>",
     "props": [
       "svg_color"
     ],
     "default_color": "#FF0000",
-    "fontSize": 1,
-    "height": 5,
-    "svgText": "",
-    "priview_img": "/vuefiv/DoubleWindingSvg.png"
+    "priviewImg": "/vuefiv/DoubleWindingSvg.png",
+    "array": {
+      "id": "",
+      "sort": 0,
+      "title": "双绕组变压器",
+      "type": "DoubleWindingSvg",
+      "typeName": "双绕组变压器",
+      "svgColor": "#FF0000",
+      "svgPositionX": 0,
+      "svgPositionY": 0,
+      "size": 1,
+      "height": 5,
+      "fontSize": 1,
+      "svgText": "",
+      "angle": 0,
+      "tableRowCount": 2,
+      "tableColCount": 2,
+      "tableData": [],
+      "elementBool": [
+        "svgColor",
+        "selectSvgInfoSize",
+        "angle",
+        "size"
+      ]
+    }
   },
   {
     "type": "DoubleWindingSvgB",
-    "title": "双绕组变压器B",
     "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>",
     "props": [
       "svg_color"
     ],
     "default_color": "#FF0000",
-    "fontSize": 1,
-    "height": 5,
-    "svgText": "",
-    "priview_img": "/vuefiv/DoubleWindingSvgB.png"
+    "priviewImg": "/vuefiv/DoubleWindingSvgB.png",
+    "array": {
+      "id": "",
+      "sort": 0,
+      "title": "双绕组变压器B",
+      "type": "DoubleWindingSvgB",
+      "typeName": "双绕组变压器B",
+      "svgColor": "#FF0000",
+      "svgPositionX": 0,
+      "svgPositionY": 0,
+      "size": 1,
+      "height": 5,
+      "fontSize": 1,
+      "svgText": "",
+      "angle": 0,
+      "tableRowCount": 2,
+      "tableColCount": 2,
+      "tableData": [],
+      "elementBool": [
+        "svgColor",
+        "selectSvgInfoSize",
+        "angle",
+        "size"
+      ]
+    }
   },
   {
     "type": "GGJSvg",
-    "title": "电容柜",
     "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>",
     "props": [
       "svg_color"
     ],
     "default_color": "#FF6600",
-    "fontSize": 1,
-    "height": 1,
-    "svgText": "",
-    "priview_img": "/vuefiv/GGJ.png"
+    "priviewImg": "/vuefiv/GGJ.png",
+    "array": {
+      "id": "",
+      "sort": 0,
+      "title": "电容柜",
+      "type": "GGJSvg",
+      "typeName": "电容柜",
+      "svgColor": "#FF6600",
+      "svgPositionX": 0,
+      "svgPositionY": 0,
+      "size": 1,
+      "height": 1,
+      "fontSize": 1,
+      "svgText": "",
+      "angle": 0,
+      "tableRowCount": 2,
+      "tableColCount": 2,
+      "tableData": [],
+      "elementBool": [
+        "svgColor",
+        "selectSvgInfoSize",
+        "angle",
+        "size"
+      ]
+    }
   },
   {
     "type": "StandardReactance",
-    "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='svg_color' stroke-width='2' transform='translate(-18,-36) scale(1)' data-v-d903d4f8=''></path>",
     "props": [
       "svg_color"
     ],
     "default_color": "#CCCC00",
-    "fontSize": 1,
-    "height": 3,
-    "svgText": "",
-    "priview_img": "/vuefiv/StandardReactance.png"
+    "priviewImg": "/vuefiv/StandardReactance.png",
+    "array": {
+      "id": "",
+      "sort": 0,
+      "title": "标准电抗",
+      "type": "StandardReactance",
+      "typeName": "标准电抗",
+      "svgColor": "#CCCC00",
+      "svgPositionX": 0,
+      "svgPositionY": 0,
+      "size": 1,
+      "height": 3,
+      "fontSize": 1,
+      "svgText": "",
+      "angle": 0,
+      "tableRowCount": 2,
+      "tableColCount": 2,
+      "tableData": [],
+      "elementBool": [
+        "svgColor",
+        "selectSvgInfoSize",
+        "angle",
+        "size"
+      ]
+    }
   },
   {
     "type": "AlternatorSvg",
-    "title": "发电机",
-    "template": "<ellipse id='c1' cx='50' cy='50' rx='35' ry='35' fill='none' :stroke='svg_color' stroke-width='2' :transform=\"'translate('+(-(height*10))+','+(-(height*10))+')scale('+height*0.2+')'\"></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('+(-(height*10))+','+(-(height*10))+')scale('+height*0.2+')'\"></path>",
+    "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>",
     "props": [
       "svg_color",
       "height"
     ],
     "default_color": "#FF0000",
-    "height": 5,
-    "priview_img": "/vuefiv/AlternatorSvg.png"
+    "priviewImg": "/vuefiv/AlternatorSvg.png",
+    "array": {
+      "id": "",
+      "sort": 0,
+      "title": "发电机",
+      "type": "AlternatorSvg",
+      "typeName": "发电机",
+      "svgColor": "#FF0000",
+      "svgPositionX": 0,
+      "svgPositionY": 0,
+      "size": 1,
+      "height": 5,
+      "fontSize": 1,
+      "svgText": "",
+      "angle": 0,
+      "tableRowCount": 2,
+      "tableColCount": 2,
+      "tableData": [],
+      "elementBool": [
+        "svgColor",
+        "selectSvgInfoSize",
+        "angle",
+        "size"
+      ]
+    }
   }
 ]

src/api/site/systemImg.js

@@ -0,0 +1,54 @@
+import request from '@/utils/request'
+
+
+export default {
+    // 获取配电图左侧列表---->基础信息
+    gethookupComponentBasics() {
+        return request({
+            url: `hookup/gethookupComponentBasics`,
+            method: 'GET',
+            // params: params
+            // data: data
+        })
+    },
+
+    // 获取配电图list数据---->所有数据
+    getHookupComponentComplete(data) {
+        return request({
+            url: `hookup/getHookupComponentComplete`,
+            method: 'GET',
+            // params: params
+            data: data
+        })
+    },
+
+    // 配电图数据保存---->保存
+    setHookupComponentComplete(data) {
+        return request({
+            url: `hookup/setHookupComponentComplete`,
+            method: 'POST',
+            // params: params
+            data
+        })
+    },
+
+    // 配电图设备下拉---->设备下拉
+    getDeviceAttributeList(params) {
+        return request({
+            url: `hookup/getDeviceAttributeList`,
+            method: 'get',
+            params: params
+            // data
+        })
+    },
+
+    // 配电图变量下拉---->变量下拉
+    getDeviceAnalogVariableList(params) {
+        return request({
+            url: `hookup/getDeviceAnalogVariableList`,
+            method: 'get',
+            params: params
+            // data
+        })
+    },
+}

src/components/LeftToolBar.vue

@@ -4,21 +4,16 @@
     <a-collapse v-model:activeKey="activeKey" accordion>
       <a-collapse-panel key="1" header="基本形状">
         <ul class="svg-nav-list">
-          <li v-for="item in svgInfoData" :key="item" v-show="item.type !== 'WireConnectionSvg'">
-            <div class="title">{{ item.title }}</div>
+          <li
+            v-for="(item, index) in svgInfoData"
+            :key="index"
+            v-show="item.type !== 'WireConnectionSvg'"
+          >
+            <div class="title">{{ item.array.title }}</div>
             <img
-              :title="item.title"
-              @mousedown="
-                Mousedown(
-                  item.type,
-                  item.title,
-                  item.default_color,
-                  item.height,
-                  item.svgText,
-                  item.fontSize
-                )
-              "
-              :src="item.priview_img"
+              :title="item.array.title"
+              @mousedown="Mousedown(item)"
+              :src="item.priviewImg"
               draggable="true"
             />
           </li>
@@ -44,14 +39,8 @@ export default {
     };
   },
   methods: {
-    Mousedown(type, title, color, height,svgText,fontSize) {
-      global.CurrentlySelectedToolBarType = type;
-      global.CurrentlySelectedToolBarTypeName = title;
-      global.CurrentlySelectedToolBarTitle = title;
-      global.CurrentlySelectedToolBarColor = color;
-      global.CurrentlySelectedToolBarHeight = height;
-      global.CurrentlySelectedToolBarSvgText = svgText;
-      global.CurrentlySelectedToolBarFontSize = fontSize;
+    Mousedown(item) {
+      global.CurrentlySelectedToolBarItem = item;
     },
   },
 };

src/components/RightToolBar.vue

@@ -1,116 +1,388 @@
 <template>
-<a-tabs type="card"  class="components-layout-right">
+  <a-tabs type="card" class="components-layout-right">
     <a-tab-pane key="1" tab="外观">
       <a-form layout="horizontal">
         <a-form-item label="id">
-          <p>{{svgInfo.id}}</p>
+          <p>
+            {{ selectSvgInfo.id }}
+          </p>
         </a-form-item>
         <a-form-item label="类型">
-          <p>{{selectSvgInfo.typeName}}</p>
+          <p>{{ selectSvgInfo.typeName }}</p>
         </a-form-item>
-        <a-form-item label="名称">
-          <a-input v-model:value="selectSvgInfo.title" placeholder="请输入组件名称" />
+
+        <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轴坐标">
-          <a-input-number v-model:value="selectSvgInfo.svgPositionX" :min="0" :max="1920"/>
+
+        <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轴坐标">
-          <a-input-number v-model:value="selectSvgInfo.svgPositionY" :min="0" :max="1080"/>
+
+        <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="颜色">
-          <input type="color" v-model="selectSvgInfo.svgColor">
+
+        <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="大小">
-          <a-input-number v-model:value="selectSvgInfo.height" :min="1" :max="3000" step="1" maxlength="4"/>
+
+        <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.typeName !== '箭头向上' && selectSvgInfo.typeName !== '箭头向下'">
-          <a-input-number v-model:value="selectSvgInfo.width" :min="2" :max="3000" step="1" />
+
+        <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="旋转">
-          <a-input-number v-model:value="msgFilteredHTML" :min="0" :max="360" maxlength="3"/>
+
+        <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="文本">
+
+        <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="字体大小">
-          <a-input-number v-model:value="selectSvgInfo.fontSize" :min="1" :max="100"/>
+
+        <a-form-item
+          label="字体大小"
+          v-if="
+            selectSvgInfo.length <= 0
+              ? false
+              : selectSvgInfo.elementBool.indexOf('fontSize') > -1
+          "
+        >
+          <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="表格行数">
-          <a-input-number v-model:value="selectSvgInfo.tableRowCount" :min="2" :max="100"/>
+
+        <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="表格列数">
-          <a-input-number v-model:value="selectSvgInfo.tableColCount" :min="2" :max="100"/>
+
+        <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-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>
-          <a-button type="primary" class="btn-sure">
-            确定
-          </a-button>
+
+        <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-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>
+      <div class="bg-code">{{ selectSvgInfo }}</div>
     </a-tab-pane>
   </a-tabs>
-  
 </template>
 <script>
+import api from "@/api/site/systemImg";
+import { ElMessage } from "element-plus";
 export default {
-  props: ['svgInfo'],
-  computed:{
-    selectSvgInfo(){
+  data() {
+    return {
+      deviceSelectList: [],
+      variableIdSelectList: [],
+      ElMessage: "",
+    };
+  },
+  props: ["svgInfo"],
+  computed: {
+    selectSvgInfo() {
       return this.svgInfo;
-    }
-    ,
-    msgFilteredHTML:{
-      get(){
-        return 0
+    },
+    msgFilteredHTML: {
+      get() {
+        return this.selectSvgInfo.angle;
       },
       set(val) {
-        if(val == "" || val == null){
-          this.selectSvgInfo.angle = 0
-        }else{
-          this.selectSvgInfo.angle = 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?:
   },
-  watch:{
-    'selectSvgInfo.tableRowCount':function(newVal){
-      this.$emit('setTableAttr', this.selectSvgInfo.id,newVal,this.selectSvgInfo.tableColCount)
+  mounted() {
+    //调用设备名称下拉列表接口事件
+    this.getDeviceAttributeList();
+  },
+  methods: {
+    //设备名称下拉列表接口事件
+    getDeviceAttributeList() {
+      api
+        .getDeviceAttributeList({ siteId: this.$store.state.siteId })
+        .then((requset) => {
+          if (requset.status === "SUCCESS") {
+            if (requset.data.length > 0) {
+              this.ElMessage = "请选择设备名称";
+              this.deviceSelectList = requset.data;
+            } else {
+              this.deviceSelectList = [];
+              this.ElMessage = "暂无数据";
+            }
+          } else {
+            ElMessage.error(requset.msg);
+          }
+        })
+        .catch(function (error) {
+          console.log(error);
+        });
     },
-    'selectSvgInfo.tableColCount':function(newVal){
-      this.$emit('setTableAttr', this.selectSvgInfo.id,this.selectSvgInfo.tableRowCount,newVal)
-    }
-  }
+    //变量名称下拉列表接口事件
+    getDeviceAnalogVariableList(value) {
+      api
+        .getDeviceAnalogVariableList({ monitoringDeviceId: value })
+        .then((requset) => {
+          if (requset.status === "SUCCESS") {
+            if (requset.data.length > 0) {
+              this.ElMessage = "请选择变量名称";
+              this.variableIdSelectList = requset.data;
+              if (
+                this.selectSvgInfo.variableId == null ||
+                this.selectSvgInfo.variableId == ""
+              ) {
+                this.selectSvgInfo.variableId = this.variableIdSelectList[0].id;
+              }
+            } else {
+              this.variableIdSelectList = [];
+              this.ElMessage = "暂无数据";
+            }
+          } else {
+            ElMessage.error(requset.msg);
+          }
+        })
+        .catch(function (error) {
+          console.log(error);
+        });
+    },
+    //设备名称下拉列表事件
+    deviceSelectChange(value) {
+      this.selectSvgInfo.variableId = null;
+      this.selectSvgInfo.deviceId = value;
+      //调用变量名称下拉列表接口事件
+      this.getDeviceAnalogVariableList(value);
+    },
+    //变量名称下拉列表事件
+    hookupSelectChange(value) {
+      this.selectSvgInfo.variableId = value;
+    },
+  },
+
+  watch: {
+    selectSvgInfo: function (newVal) {
+      console.log(this.selectSvgInfo.length);
+      if (
+        this.deviceSelectList.length > 0 &&
+        this.selectSvgInfo.length == undefined
+      ) {
+        if (newVal.deviceId == null || newVal.deviceId == "") {
+          this.selectSvgInfo.deviceId = this.deviceSelectList[0].id;
+        }
+
+        //调用变量名称下拉列表接口事件
+        this.getDeviceAnalogVariableList(newVal.deviceId);
+      }
+    },
+    "selectSvgInfo.tableRowCount": function (newVal) {
+      this.$emit(
+        "setTableAttr",
+        this.selectSvgInfo.id,
+        newVal,
+        this.selectSvgInfo.tableColCount
+      );
+    },
+    "selectSvgInfo.tableColCount": function (newVal) {
+      this.$emit(
+        "setTableAttr",
+        this.selectSvgInfo.id,
+        this.selectSvgInfo.tableRowCount,
+        newVal
+      );
+    },
+  },
 };
 </script>
 <style lang="less">
-.components-layout-right{
-  .ant-tabs-bar{
+.components-layout-right {
+  .ant-tabs-bar {
     margin-bottom: 0 !important;
   }
-  .ant-form-item-label{
+  .ant-form-item-label {
     width: 100px !important;
     flex-shrink: 0;
   }
-  .ant-input-number,input{
+  .ant-input-number,
+  input {
     width: 160px;
     border-radius: 4px;
     border-color: #ddd;
   }
-  .ant-form-item-control{
+  .ant-form-item-control {
     line-height: 24px !important;
 
-    p{
+    p {
       margin-bottom: 0 !important;
     }
-
-    
   }
 
-  .ant-form-item{
+  .ant-form-item {
     display: flex;
     align-items: center;
     flex-flow: nowrap;
@@ -118,8 +390,8 @@ export default {
     margin-bottom: 0;
     padding: 8px 0;
 
-    &:after{
-      content:"";
+    &:after {
+      content: "";
       position: absolute;
       bottom: 0;
       left: 15px;
@@ -129,18 +401,18 @@ export default {
       background: #f2f2f2;
     }
 
-    &:last-child::after{
-      content:unset
+    &:last-child::after {
+      content: unset;
     }
   }
 }
 </style>
 <style scoped lang="less">
-.btn-sure{
+.btn-sure {
   width: 260px;
   margin: 20px;
 }
-.bg-code{
+.bg-code {
   background: #444;
   color: #fff;
   width: calc(100% - 20px);

src/components/SvgComponents.vue

@@ -4,7 +4,16 @@
 <script>
 let importComponents = {};
 export default {
-  props: ["svgInfoData", "svg_color", "svgtype", "text", "fontSize", "height"],
+  props: [
+    "svgInfoData",
+    "svg_color",
+    "svgtype",
+    "text",
+    "size",
+    "fontSize",
+    "height",
+    "strokeWidth",
+  ],
   data() {
     return {
       componentTag: "",
@@ -18,6 +27,9 @@ export default {
     fontSize(fontSize) {
       this.font_Size(fontSize);
     },
+    strokeWidth(width) {
+      this.stroke_Width(width);
+    },
     height(height) {
       this.edit_height(height);
     },
@@ -28,13 +40,16 @@ export default {
         template: f.template,
         props: f.props,
       };
-      importComponents[f.type] = componentInfo;
+      if (f.type === this.svgtype) {
+        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);
     });
   },
@@ -63,359 +78,34 @@ export default {
     edit_height(val) {
       var el = this.$refs.textsss.$el;
       if (el != undefined) {
+
         var dom = document.getElementById(el.parentNode.id);
         var title = dom.getAttribute("title");
-        var type = dom.getAttribute("type");
-        let rect = dom.getElementsByTagName("rect")[0];
         let line = dom.getElementsByTagName("line")[0];
-        let line2 = dom.getElementsByTagName("line")[1];
-        let line3 = dom.getElementsByTagName("line")[2];
-        let line4 = dom.getElementsByTagName("line")[3];
-        let polyline = dom.getElementsByTagName("polyline")[0];
-        let polyline2 = dom.getElementsByTagName("polyline")[1];
-        let polygon = dom.getElementsByTagName("polygon")[0];
-        let ellipse = dom.getElementsByTagName("ellipse")[0];
-        let ellipse2 = dom.getElementsByTagName("ellipse")[1];
-        var line_ = dom.getElementsByTagName("line");
-        let polyline_ = dom.getElementsByTagName("polyline");
-        var ellipse_ = dom.getElementsByTagName("ellipse");
-        let polygon_ = dom.getElementsByTagName("polygon");
-        var path_ = dom.getElementsByTagName("path");
-        var x1, y1, x2, y2, points, cx, cy, rx, ry, transform;
-        // console.log(val, el);
-        if (val != null && val != "") {
-          if (title === "断路器") {
-            rect.setAttribute("x", -val / 4);
-            rect.setAttribute("y", -val / 2);
-            rect.setAttribute("width", val / 2);
-            rect.setAttribute("height", val);
-          } else if (title === "长方形") {
-            rect.setAttribute("x", -val / 6);
-            rect.setAttribute("y", -val / 2);
-            rect.setAttribute("width", val / 3);
-            rect.setAttribute("height", val);
-          } else if (title === "竖线") {
-            line.setAttribute("y1", -val / 2);
-            line.setAttribute("y2", val / 2);
-          } else if (title === "避雷器") {
-            rect.setAttribute("x", -val);
-            rect.setAttribute("y", -val * 2);
-            rect.setAttribute("width", val * 2 + 1);
-            rect.setAttribute("height", val * 5);
-            line.setAttribute("y1", -val * 3);
-            line2.setAttribute("y1", val * 3);
-            line2.setAttribute("y2", val * 4);
-          } else if (title === "隔离开关") {
+
+        if (val != null && val != "" && val != undefined) {
+          if (title === "电线") {
             line.setAttribute("y1", -val);
-            line2.setAttribute("x1", -val / 2);
-            line2.setAttribute("x2", val / 3);
-            line3.setAttribute("y1", val);
-            line3.setAttribute("x2", -val / 2);
-            line3.setAttribute("y2", val / 4);
-            line4.setAttribute("y1", val * 2);
-            line4.setAttribute("y2", val);
+            line.setAttribute("y2", val);
           } else if (title === "横线") {
-            line.setAttribute("x1", -val / 2);
-            line.setAttribute("x2", val / 2);
-          } else if (title === "电线开关") {
-            line.setAttribute("y1", -val * 8);
-            line.setAttribute("y2", -val * 3);
-            line2.setAttribute("y2", -val * 3);
-            if (type === "WireConnectionSvg") {
-              line2.setAttribute("x2", 0);
-            } else {
-              line2.setAttribute("x2", -val * 2);
-            }
-            line2.setAttribute("y1", val * 3);
-            line3.setAttribute("y1", val * 9);
-            line3.setAttribute("y2", val * 3);
-          } else if (title === "标准电容器") {
-            line.setAttribute("y1", -val * 4);
-            line.setAttribute("y2", -val);
-            line2.setAttribute("x1", -val * 3);
-            line2.setAttribute("y1", -val);
-            line2.setAttribute("x2", val * 3);
-            line2.setAttribute("y2", -val);
-            line3.setAttribute("x1", -val * 3);
-            line3.setAttribute("y1", val);
-            line3.setAttribute("x2", val * 3);
-            line3.setAttribute("y2", val);
-            line4.setAttribute("y1", val * 4);
-            line4.setAttribute("y2", val);
-          } else if (title === "多段向上折线" || title === "多段向下折线") {
-            var cont;
-            title === "多段向上折线"
-              ? (cont =
-                  "0," +
-                  val +
-                  " " +
-                  (val * 2 - 1) +
-                  "," +
-                  -val +
-                  " " +
-                  (val * 4 - 2) +
-                  "," +
-                  val)
-              : (cont =
-                  "0," +
-                  val +
-                  " " +
-                  (val * 2 - 1) +
-                  "," +
-                  (val * 3 + 1) +
-                  " " +
-                  (val * 4 - 2) +
-                  "," +
-                  val);
-            polyline.setAttribute("points", cont);
-            polyline.setAttribute(
-              "transform",
-              "translate(" + -(val * 2 - 1) + "," + 0 + ")"
-            );
-            polyline2.setAttribute("points", cont);
-            polyline2.setAttribute(
-              "transform",
-              "translate(" + -(val * 2 - 1) + "," + (val + 1) + ")"
-            );
-          } else if (title === "箭头向上" || title === "箭头向下") {
-            polygon.setAttribute("stroke-width", val);
-          } else if (title === "接地灰白") {
-            var translate = -(val * 3) + "," + -(val * 2);
-            line.setAttribute("x1", val * 3);
-            line.setAttribute("y1", val * 3);
-            line.setAttribute("x2", val * 3);
-            line.setAttribute("transform", "translate(" + translate + ")");
-            line2.setAttribute("y1", val * 3);
-            line2.setAttribute("x2", val * 6);
-            line2.setAttribute("y2", val * 3);
-            line2.setAttribute("transform", "translate(" + translate + ")");
-            line3.setAttribute("x1", val * 1);
-            line3.setAttribute("y1", val * 5);
-            line3.setAttribute("x2", val * 5);
-            line3.setAttribute("y2", val * 5);
-            line3.setAttribute("transform", "translate(" + translate + ")");
-            line4.setAttribute("x1", val * 2);
-            line4.setAttribute("y1", val * 7);
-            line4.setAttribute("x2", val * 4);
-            line4.setAttribute("y2", val * 7);
-            line4.setAttribute("transform", "translate(" + translate + ")");
-          } else if (title === "信号灯") {
-            var translate2 = -(val * 2 + 1) + "," + -(val * 7 + 1);
-            ellipse.setAttribute("cx", val * 2 + 1);
-            ellipse.setAttribute("cy", val * 7 + 1);
-            ellipse.setAttribute("rx", val * 4);
-            ellipse.setAttribute("ry", val * 4);
-            ellipse.setAttribute("transform", "translate(" + translate2 + ")");
-            line.setAttribute("x1", -val - -3);
-            line.setAttribute("y1", val * 10);
-            line.setAttribute("x2", val * 5);
-            line.setAttribute("y2", val * 5);
-            line.setAttribute("transform", "translate(" + translate2 + ")");
-            line2.setAttribute("x1", val * 5);
-            line2.setAttribute("y1", val * 10);
-            line2.setAttribute("y2", val * 5);
-            line2.setAttribute("transform", "translate(" + translate2 + ")");
-          } else if (title === "双圆") {
-            ellipse.setAttribute("cy", -val * 1.5);
-            ellipse.setAttribute("rx", val * 2);
-            ellipse.setAttribute("ry", val * 2);
-            ellipse2.setAttribute("cy", val * 1.5);
-            ellipse2.setAttribute("rx", val * 2);
-            ellipse2.setAttribute("ry", val * 2);
-          } else if (title === "电流互感器y") {
-            ellipse.setAttribute("rx", val * 2);
-            ellipse.setAttribute("ry", val * 2);
-            line.setAttribute("x1", val);
-            line.setAttribute("y1", -val);
-            line2.setAttribute("x1", -val);
-            line2.setAttribute("y1", -val);
-            line3.setAttribute("y2", val);
-          } else if (title === "三相互感器开口") {
-            ellipse.setAttribute("rx", val * 5);
-            ellipse.setAttribute("ry", val * 5);
             line.setAttribute("x1", -val);
-            line.setAttribute("y1", -val * 3);
-            line.setAttribute("x2", -val);
-            line.setAttribute("y2", val * 3);
-            line2.setAttribute("x1", -val);
-            line2.setAttribute("y1", -val * 3);
-            line2.setAttribute("x2", val * 2);
-            line3.setAttribute("x1", val * 2);
-            line3.setAttribute("y1", val);
-            line3.setAttribute("x2", -val);
-            line3.setAttribute("y2", val * 3);
-          } else if (title === "双绕组变压器" || title === "双绕组变压器B") {
-            for (let i = 0; i < ellipse_.length; i++) {
-              i == 0 ? (cy = -val * 4) : (cy = val * 4);
-              cx = 0;
-              rx = val * 5;
-              ry = val * 5;
-              ellipse_[i].setAttribute("cx", cx);
-              ellipse_[i].setAttribute("cy", cy);
-              ellipse_[i].setAttribute("rx", rx);
-              ellipse_[i].setAttribute("ry", ry);
-            }
-            if (title === "双绕组变压器") {
-              points =
-                val * 2 +
-                "," +
-                -val * 6 +
-                " 0," +
-                -val * 2 +
-                " " +
-                -val * 2 +
-                "," +
-                -val * 6;
-              polygon_[0].setAttribute("points", points);
-              for (let i = 0; i < line_.length; i++) {
-                if (i == 0) {
-                  x2 = 0;
-                  y2 = val * 7;
-                } else if (i == 1) {
-                  x2 = -val * 2;
-                  y2 = val * 2;
-                } else if (i == 2) {
-                  x2 = val * 2;
-                  y2 = val * 2;
-                }
-                x1 = 0;
-                y1 = val * 4;
-                line_[i].setAttribute("x1", x1);
-                line_[i].setAttribute("y1", y1);
-                line_[i].setAttribute("x2", x2);
-                line_[i].setAttribute("y2", y2);
-              }
-            } else {
-              points =
-                val * 2 +
-                "," +
-                val * 6 +
-                " 0," +
-                val * 2 +
-                " " +
-                -val * 2 +
-                "," +
-                val * 6;
-              polygon_[0].setAttribute("points", points);
-              line_[0].setAttribute("y1", -val * 4);
-              line_[0].setAttribute("y2", -val * 7);
-              line_[1].setAttribute("y1", -val * 4);
-              line_[1].setAttribute("x2", val * 2);
-              line_[1].setAttribute("y2", -val * 2);
-              line_[2].setAttribute("y1", -val * 4);
-              line_[2].setAttribute("x2", -val * 2);
-              line_[2].setAttribute("y2", -val * 2);
-            }
-          } else if (title === "电容柜") {
-            for (let i = 0; i < polyline_.length; i++) {
-              i == 0
-                ? (points =
-                    -val * 13 +
-                    "," +
-                    -val * 8 +
-                    " " +
-                    -val * 22 +
-                    "," +
-                    val * 3 +
-                    " " +
-                    -val * 22 +
-                    "," +
-                    val * 5)
-                : i == 1
-                ? (points =
-                    val * 13 +
-                    "," +
-                    -val * 8 +
-                    " " +
-                    val * 22 +
-                    "," +
-                    val * 3 +
-                    " " +
-                    val * 22 +
-                    "," +
-                    val * 5)
-                : "";
-              polyline_[i].setAttribute("points", points);
-            }
-            for (let i = 0; i < line_.length; i++) {
-              if (i == 0) {
-                x1 = val / 2;
-                y1 = -val * 25;
-                x2 = -val * 9.5;
-                y2 = -val * 13;
-              } else if (i == 1) {
-                x1 = -val / 2;
-                y1 = -val * 26;
-                x2 = val * 9.5;
-                y2 = -val * 13;
-              } else if (i == 2) {
-                x1 = -val * 12;
-                y1 = -val * 17;
-                x2 = -val * 6;
-                y2 = -val * 8;
-              } else if (i == 3) {
-                x1 = -val * 15;
-                y1 = -val * 12;
-                x2 = -val * 11;
-                y2 = -val * 3;
-              } else if (i == 4) {
-                x1 = -val * 21;
-                y1 = val * 4;
-                x2 = -val * 4;
-                y2 = val * 4;
-              } else if (i == 5) {
-                x1 = -val * 5;
-                y1 = -val * 2;
-                x2 = -val * 5;
-                y2 = val * 11;
-              } else if (i == 6) {
-                x1 = val * 3;
-                y1 = -val * 2;
-                x2 = val * 3;
-                y2 = val * 11;
-              } else if (i == 7) {
-                x1 = val * 4;
-                y1 = val * 4;
-                x2 = val * 21;
-                y2 = val * 4;
-              } else if (i == 8) {
-                x1 = val * 14;
-                y1 = -val * 12;
-                x2 = val * 8;
-                y2 = -val * 3;
-              } else if (i == 9) {
-                x1 = val * 12;
-                y1 = -val * 17;
-                x2 = val * 6;
-                y2 = -val * 8;
-              }
-              line_[i].setAttribute("x1", x1);
-              line_[i].setAttribute("y1", y1);
-              line_[i].setAttribute("x2", x2);
-              line_[i].setAttribute("y2", y2);
-            }
-          } else if (title === "标准电抗") {
-            path_[0].setAttribute(
-              "transform",
-              "translate(" +
-                -val * 6 +
-                "," +
-                -val * 12 +
-                ") scale(" +
-                val / 3 +
-                ")"
-            );
-          } else if (title === "发电机") {
-            transform =
-              "translate(" +
-              -val * 10 +
-              "," +
-              -val * 10 +
-              ") scale(" +
-              val / 5 +
-              ")";
-            ellipse_[0].setAttribute("transform", transform);
-            path_[0].setAttribute("transform", transform);
+            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);
           }
         }
       }

src/global/global.js

@@ -16,6 +16,10 @@ let CurrentlySelectedToolBarSvgText = '';
 let CurrentlySelectedToolBarFontSize = 0;
 //当前选中的左侧工具栏参数表格
 let CurrentlySelectedToolBarTableData = [];
+//当前选中的左侧工具栏参数大小
+let CurrentlySelectedToolBarSize = 1;
+
+let CurrentlySelectedToolBarItem = []
 export default {
     CurrentlySelectedToolBarType, 
     CurrentlySelectedToolBarTypeName, 
@@ -25,5 +29,7 @@ export default {
     CurrentlySelectedToolBarHeight,
     CurrentlySelectedToolBarSvgText,
     CurrentlySelectedToolBarFontSize,
-    CurrentlySelectedToolBarTableData
+    CurrentlySelectedToolBarTableData,
+    CurrentlySelectedToolBarSize,
+    CurrentlySelectedToolBarItem
 }

src/main.js

@@ -25,6 +25,9 @@ import { removeToken } from './utils/auth';
 
 const app = createApp(App);
 
+import Interface from "../public/InterfaceReturn.json"
+
+app.config.globalProperties.$Interface = Interface
 app.config.globalProperties.$UCore = UCore;
 app.config.globalProperties.$axios = axios;
 

src/utils/request.js

@@ -8,18 +8,17 @@ import qs from 'qs'
 
 let baseURL = window.PLATFROM_CONFIG.baseUrl
 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(
     config => {
-
         config.headers.accessToken = getToken()
 
         if (

src/views/CircuitEdit1.vue

@@ -6,14 +6,17 @@
         <!-- {{tableDefaultData}} -->
         <a-layout-header>
           <a-button type="primary" style="margin-left: 20px" @click="testD"
-            >导出数据</a-button
+            >保存</a-button
           >
-          <a-button type="primary" style="margin-left: 20px" @click="testE"
+          <!-- <a-button type="primary" style="margin-left: 20px" @click="testE"
             >载入模板</a-button
-          >
+          > -->
           <a-button type="primary" style="margin-left: 20px" @click="testH"
             >预览</a-button
           >
+          <a-button type="primary" style="margin-left: 20px" @click="deleteImg"
+            >删除元器件</a-button
+          >
           <!-- <a style="margin-left: 20px" href="https://svgv1.yaolunmao.top">
             <a-button type="primary">1.0版本</a-button>
           </a> -->
@@ -64,7 +67,7 @@
                 <g
                   style="cursor: pointer"
                   v-for="(item, index) in svgLists"
-                  :key="item"
+                  :key="index"
                   :id="item.id"
                   :type="item.type"
                   @mousedown="
@@ -82,9 +85,10 @@
                     item.svgPositionX +
                     ',' +
                     item.svgPositionY +
-                    ')' +
-                    'rotate(' +
+                    ') rotate(' +
                     item.angle +
+                    ') scale(' +
+                    item.size +
                     ')'
                   "
                 >
@@ -92,8 +96,8 @@
                     :svg_color="item.svgColor"
                     :svgInfoData="svgInfoData"
                     :svgtype="item.type"
-                    :stroke-width="item.width"
                     :text="item.svgText"
+                    :size="item.size"
                     :font-size="item.fontSize"
                     :height="item.height"
                   ></SvgComponents>
@@ -115,9 +119,10 @@
 <script>
 import LeftToolBar from "@/components/LeftToolBar.vue";
 import RightToolBar from "@/components/RightToolBar.vue";
-// import SvgComponents from '@/components/SvgComponents.vue';
 import global from "@/global/global.js"; //全局变量
 import SvgComponents from "@/components/SvgComponents.vue";
+import api from "@/api/site/systemImg";
+import { ElMessage } from "element-plus";
 export default {
   components: { LeftToolBar, RightToolBar, SvgComponents },
   data() {
@@ -133,12 +138,7 @@ export default {
       //辅助线元素
       guideX: "",
       guideY: "",
-      CurrentlySelectedToolBar: {
-        Type: "", //选中的工具栏svg类型
-        TypeName: "", //选中的工具栏svg类型名称
-        Title: "", //选中的工具栏svg标题
-        Color: "", //选中的工具栏svg颜色
-      },
+      CurrentlySelectedToolBar: {},
       selectSvg: {
         ID: "", //要移动的svg
         Index: 0,
@@ -149,8 +149,6 @@ export default {
         pointY: 0, //选中svg时svg的y轴坐标
       },
       selectSvgInfo: "",
-      tableRowCount: 2, //表格默认行数
-      tableColCount: 2, //表格默认列数
       tableDefaultData: [],
       AnalogData: [],
     };
@@ -221,13 +219,14 @@ export default {
       }, 1);
     },
     MousedownCanvas() {
-      //console.log('点击了画布');
+      // console.log('点击了画布');
     },
     MousedownSvg(id, index, pointX, pointY, e) {
       this.CurrentlySelectedToolBar.Type = global.CurrentlySelectedToolBarType =
         "";
       this.CurrentlySelectedToolBar.Title =
         global.CurrentlySelectedToolBarTitle = "";
+
       //从数组里面根据index找到当前元素
       this.selectSvg.ID = id;
       this.selectSvg.Index = index;
@@ -236,6 +235,7 @@ export default {
       this.selectSvg.mPositionY = e.clientY;
       this.selectSvg.pointX = pointX;
       this.selectSvg.pointY = pointY;
+      // console.log(this.svgLists[index]);
       this.selectSvgInfo = this.svgLists[index];
 
       //获取所有g标签 将当前标签追加选中样式
@@ -285,22 +285,65 @@ export default {
       });
       this.selectSvgInfo = "";
     },
+    //保存事件
     testD() {
-      //   console.log(JSON.stringify(this.svgLists));
-      alert(JSON.stringify(this.svgLists));
+      var array = this.svgLists;
+      array.map((val) => {
+        val.siteId = this.$store.state.siteId;
+        delete val.id;
+      });
+      if (this.svgLists.length > 0) {
+        //请求保存接口
+        api
+          .setHookupComponentComplete(array)
+          .then((requset) => {
+            if (requset.status === "SUCCESS") {
+              ElMessage.success("保存成功!");
+            } else {
+              ElMessage.error(requset.msg);
+            }
+          })
+          .catch(function (error) {
+            console.log(error);
+          });
+      } else {
+        ElMessage("请先添加元器件!");
+      }
     },
+    //载入模板事件
     testE() {
-      this.svgLists = this.AnalogData;
+      let _this = this;
+      _this.$axios
+        .get(window.PLATFROM_CONFIG.ione)
+        .then(function (response) {
+          console.log(response.data);
+          response.data.map((val) => {
+            _this.svgLists.push(val);
+          });
+        })
+        .catch(function (error) {
+          console.log(error);
+        });
+      // this.svgLists = this.AnalogData;
     },
+    //预览事件
     testH() {
-      localStorage.setItem("svginfo", JSON.stringify(this.svgLists));
-      this.$router.push({
-        path: "/CircuitPreview",
-        name: "CircuitPreview",
-      });
+      var msg = "系统可能不会保存您所做的更改。";
+      if (confirm(msg) == true) {
+        localStorage.setItem("svginfo", JSON.stringify(this.svgLists));
+        this.$router.push({
+          path: "/Power_diagram",
+          name: "power_diagram",
+        });
+        return true;
+      } else {
+        return false;
+      }
     },
     //设置表格属性
     setTableAttr(id, rowCount, colCount) {
+      // console.log(id, rowCount, colCount);
+
       //根据当前id找到当前表格的index
       let tableIndex = this.svgLists.indexOf(
         this.svgLists.filter((f) => f.id == id)[0]
@@ -336,89 +379,70 @@ export default {
         };
         tableData.push(tableRowData);
       }
-      // console.log(tableData)
+      console.log(tableData);
+
       this.svgLists[tableIndex].tableData = tableData;
-      // console.log(this.svgLists[tableIndex].tableData)
+
       let gAnyList = document.querySelectorAll("foreignObject");
-      // window.onload = function () {
-      //   var tdArr = document.getElementById('tablebox').firstElementChild;
-      //   for (var i = 0; i < data.length; i++) {
-      //       var tr = document.createElement("tr");
-      //       tr.innerHTML = '<td class="active">' + data[i].name + '</td><td class="warning" onClick=clickPerson('+data[i].id+') >编辑</td>';
-      //       tdArr.appendChild(tr)
-      //   }
-      // };
-      var html = `
-        <div id='divtable' class='svgfont' data-v-025fdfb6=''></div>
-        <table border='0' cellpadding='0' cellspacing='0' style='pointer-events: none;'>
-          <tr data-v-025fdfb6=''>
-            <td class='tdsvg' data-v-025fdfb6=''>
-              <div class='add-tag' data-v-025fdfb6=''>
-                <span data-v-025fdfb6=''>1行1列</span>
-                <input type='text' class='ant-input ant-input-sm ainput' data-v-025fdfb6=''>
-              </div>
-            </td>
-            <td class='tdsvg' data-v-025fdfb6=''>
-              <div class='add-tag' data-v-025fdfb6=''>
-                <span data-v-025fdfb6=''>1行2列</span>
-                <input type='text' class='ant-input ant-input-sm ainput' data-v-025fdfb6=''>
-              </div>
-            </td>
-          </tr>
-          <tr data-v-025fdfb6=''>
-            <td class='tdsvg' data-v-025fdfb6=''>
-              <div class='add-tag' data-v-025fdfb6=''>
-                <span data-v-025fdfb6=''>2行1列</span>
-                <input type='text' class='ant-input ant-input-sm ainput' data-v-025fdfb6=''>
-              </div>
-            </td>
-            <td class='tdsvg' data-v-025fdfb6=''>
-              <div class='add-tag' data-v-025fdfb6=''>
-                <span data-v-025fdfb6=''>2行2列</span>
-                <input type='text' class='ant-input ant-input-sm ainput' data-v-025fdfb6=''>
-              </div>
-            </td>
-          </tr>
-        </table>`;
-      gAnyList[0].innerHTML = html;
+      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;`;
+    },
+    //删除元器件事件
+    deleteImg() {
+      let _this = this;
+      let selectSvgInfo = _this.selectSvgInfo;
+      //根据当前id找到当前元素的index
+      let selectSvgIndex = _this.svgLists.indexOf(
+        _this.svgLists.filter((f) => f.id == selectSvgInfo.id)[0]
+      );
+      _this.svgLists.splice(selectSvgIndex, 1);
     },
   },
   mounted() {
+    window.onbeforeunload = function (e) {
+      e = e || window.event;
+      // 兼容IE8和Firefox 4之前的版本
+      if (e) {
+        e.returnValue = "关闭提示";
+      }
+      // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+
+      return "关闭提示";
+    };
+
     let _this = this;
-    //请求接口获取组件
-    this.$axios
-      .get(window.PLATFROM_CONFIG.ione)
-      .then(function (response) {
-        _this.AnalogData = response.data;
-      })
-      .catch(function (error) {
-        console.log(error);
-      });
+
     let canvasdiv = document.querySelector("#canvas");
     _this.guideX = document.querySelector("#guide-x"); //辅助线x轴
     _this.guideY = document.querySelector("#guide-y"); //辅助线y轴
+
     canvasdiv.addEventListener(
       "dragover",
       function (e) {
         e.preventDefault();
-        _this.CurrentlySelectedToolBar.Type =
-          global.CurrentlySelectedToolBarType;
-        _this.CurrentlySelectedToolBar.Title =
-          global.CurrentlySelectedToolBarTitle;
-        _this.CurrentlySelectedToolBar.TypeName =
-          global.CurrentlySelectedToolBarTypeName;
-        _this.CurrentlySelectedToolBar.Color =
-          global.CurrentlySelectedToolBarColor;
-        _this.CurrentlySelectedToolBar.Height =
-          global.CurrentlySelectedToolBarHeight;
-        _this.CurrentlySelectedToolBar.Width =
-          global.CurrentlySelectedToolBarWidth;
-        _this.CurrentlySelectedToolBar.SvgText =
-          global.CurrentlySelectedToolBarSvgText;
-        _this.CurrentlySelectedToolBar.FontSize =
-          global.CurrentlySelectedToolBarFontSize;
-        _this.CurrentlySelectedToolBar.TableData =
-          global.CurrentlySelectedToolBarTableData;
+        _this.CurrentlySelectedToolBar =
+          global.CurrentlySelectedToolBarItem.array;
       },
       false
     );
@@ -426,32 +450,19 @@ export default {
       "drop",
       function (e) {
         e.preventDefault();
-        if (_this.CurrentlySelectedToolBar.Type == "") {
+        if (_this.CurrentlySelectedToolBar.type == "") {
           return;
         }
         //根据类型和鼠标位置创建组件
-        console.log(_this.CurrentlySelectedToolBar.Type);
+        let svgItem = JSON.parse(
+          JSON.stringify(_this.CurrentlySelectedToolBar)
+        );
+        svgItem.id = _this.$UCore.GenUUid();
+        svgItem.svgPositionX = e.offsetX;
+        svgItem.svgPositionY = e.offsetY;
 
-        let svgItem = {
-          id: _this.$UCore.GenUUid(),
-          title: _this.CurrentlySelectedToolBar.Title,
-          type: _this.CurrentlySelectedToolBar.Type,
-          typeName: _this.CurrentlySelectedToolBar.TypeName,
-          svgColor: _this.CurrentlySelectedToolBar.Color,
-          svgPositionX: e.offsetX,
-          svgPositionY: e.offsetY,
-          // size: 1,
-          height: _this.CurrentlySelectedToolBar.Height,
-          width: _this.CurrentlySelectedToolBar.Width,
-          svgText: _this.CurrentlySelectedToolBar.SvgText,
-          fontSize: _this.CurrentlySelectedToolBar.FontSize,
-          tableRowCount: _this.tableRowCount,
-          tableColCount: _this.tableColCount,
-          tableData: _this.CurrentlySelectedToolBar.TableData,
-          angle: 0,
-          //translate:`translate(${this.mousePosition.positionX},${this.mousePosition.positionY})`
-        };
         _this.svgLists.push(svgItem);
+
         setTimeout(function () {
           //获取所有g标签 将当前标签追加选中样式
           let gAnyList = document.querySelectorAll("g");
@@ -467,6 +478,9 @@ export default {
       false
     );
   },
+  unmounted() {
+    window.onbeforeunload = null;
+  },
   created() {
     let _this = this;
     //当前页面监视键盘输入
@@ -527,15 +541,37 @@ export default {
         _this.svgLists.splice(selectSvgIndex, 1);
       }
     };
-    //请求接口获取组件
-    this.$axios
-      .get(window.PLATFROM_CONFIG.Interface)
-      .then(function (response) {
-        _this.svgInfoData = response.data;
+    //请求接口获取组件---->左侧基础数据
+    api
+      .gethookupComponentBasics()
+      .then((requset) => {
+        if (requset.status === "SUCCESS") {
+          _this.svgInfoData = requset.data;
+        } else {
+          ElMessage.error(requset.msg);
+        }
       })
       .catch(function (error) {
         console.log(error);
       });
+
+    //请求接口获取组件---->list数据
+    setTimeout(() => {
+      api
+        .getHookupComponentComplete({ siteId: this.$store.state.siteId })
+        .then((requset) => {
+          if (requset.data.length > 0) {
+            _this.AnalogData = requset.data;
+
+            _this.svgLists = JSON.parse(JSON.stringify(_this.AnalogData));
+          } else {
+            ElMessage.error(requset.msg);
+          }
+        })
+        .catch(function (error) {
+          console.log(error);
+        });
+    }, 1000);
   },
 };
 </script>
@@ -582,17 +618,7 @@ foreignObject {
   overflow: visible;
   cursor: pointer;
 }
-foreignObject #divtable {
-  position: absolute;
-  left: 0;
-  top: 0;
-  line-height: 20px;
-  z-index: 111;
-  color: #fff;
-  display: none;
-  cursor: pointer;
-  font-size: 20px;
-}
+
 .add-tag .ainput {
   display: inline-block;
   height: 100%;

src/views/CircuitPreview.vue

@@ -32,19 +32,20 @@
             item.svgPositionX +
             ',' +
             item.svgPositionY +
-            ')' +
-            'rotate(' +
+            ') rotate(' +
             item.angle +
+            ') scale(' +
+            item.size +
             ')'
           "
         >
           <SvgComponents
             :svg_color="item.svgColor"
             :svgtype="item.type"
-            :stroke-width="item.width"
             :text="item.svgText"
             :font-size="item.fontSize"
             :height="item.height"
+            :size="item.size"
             :svgInfoData="svgInfoData"
           ></SvgComponents>
         </g>
@@ -69,8 +70,90 @@ export default {
       editable: false,
     };
   },
-  mounted() {},
+  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;`;
+    },
     testF() {
       //找出所有断路器
       let anyCircuitBreakerList = this.svgLists.filter(
@@ -139,6 +222,7 @@ export default {
       .then(function (response) {
         _this.svgInfoData = response.data;
         console.log(response.data);
+        console.log(JSON.stringify(response.data));
       })
       .catch(function (error) {
         console.log(error);

src/views/site/CircuitEdit.vue

@@ -1,275 +1,21 @@
 <!-- 电路图编辑器页面 -->
 <template>
   <div>
-    <div id="components-layout">
-      <a-layout>
-        <!-- {{tableDefaultData}} -->
-        <span v-if="!shrink" @click="exitFullscreen" class="icon-shrink svgfont"
-          >&#xe62b;</span
-        >
-        <a-layout class="pageMain">
-          <!-- <a-layout-sider class="leftNav">
-            <LeftToolBar :svgInfoData="svgInfoData"></LeftToolBar>
-          </a-layout-sider> -->
-          <a-layout-content class="centerContain" :class="{ fixed: !shrink }">
-            <div
-              class="canvas-content"
-              id="canvas"
-              @mousemove="MouseMove"
-              @mousedown="MousedownCanvas"
-              @mouseup="MouseupCanvas"
-              @dblclick="DblClick"
-              @mousewheel="MouseWheel"
-            >
-              <!--拖动辅助线-->
-              <div id="guide-x"></div>
-              <div id="guide-y"></div>
-              <!-- 画布 -->
-              <svg
-                version="1.1"
-                xmlns="http://www.w3.org/2000/svg"
-                xmlns:xlink="http://www.w3.org/1999/xlink"
-                style="
-                  background-color: rgba(0, 244, 253, 0.1);
-                  border: 1px solid rgba(0, 244, 253, 0.1);
-                "
-                width="100%"
-                height="100%"
-              >
-                <defs />
-                <filter x="0" y="0" width="1" height="1" id="solid">
-                  <feFlood flood-color="rgb(255,255,255)" />
-                  <feComposite in="SourceGraphic" />
-                </filter>
-                <g
-                  style="cursor: pointer"
-                  v-for="(item, index) in svgLists"
-                  :key="item"
-                  :id="item.id"
-                  :type="item.type"
-                  @mousedown="
-                    MousedownSvg(
-                      item.id,
-                      index,
-                      item.svgPositionX,
-                      item.svgPositionY,
-                      $event
-                    )
-                  "
-                  :title="item.title"
-                  :transform="
-                    'translate(' +
-                    item.svgPositionX +
-                    ',' +
-                    item.svgPositionY +
-                    ')' +
-                    'rotate(' +
-                    item.angle +
-                    ')'
-                  "
-                >
-                  <SvgComponents
-                    :svg_color="item.svgColor"
-                    :svgInfoData="svgInfoData"
-                    :svgtype="item.type"
-                    :stroke-width="item.width"
-                    :text="item.svgText"
-                    :font-size="item.fontSize"
-                    :height="item.height"
-                  ></SvgComponents>
-                </g>
-              </svg>
-            </div>
-          </a-layout-content>
-          <!-- <a-layout-sider class="rightNav">
-            <RightToolBar
-              :svgInfo="selectSvgInfo"
-              @setTableAttr="setTableAttr"
-            ></RightToolBar>
-          </a-layout-sider> -->
-        </a-layout>
-      </a-layout>
-    </div>
+    <div id="components-layout"></div>
   </div>
 </template>
 <script>
-// import LeftToolBar from "@/components/LeftToolBar.vue";
-// import RightToolBar from "@/components/RightToolBar.vue";
-// import SvgComponents from '@/components/SvgComponents.vue';
-import global from "@/global/global.js"; //全局变量
-import SvgComponents from "@/components/SvgComponents.vue";
-// import api from "../api/content/CircuitEdit";
+import api from "@/api/site/systemImg";
+import { ElMessage } from "element-plus";
 export default {
-  components: { SvgComponents }, //LeftToolBar, RightToolBar,
   data() {
     return {
       svgInfoData: [], //接口获取到的组件数据
-      shrink: true, //收缩状态  true收缩  false展开
       svgLists: [], //svg列表
-      //鼠标位置
-      mousePosition: {
-        positionX: "",
-        positiony: "",
-      },
-      //辅助线元素
-      guideX: "",
-      guideY: "",
-      CurrentlySelectedToolBar: {
-        Type: "", //选中的工具栏svg类型
-        TypeName: "", //选中的工具栏svg类型名称
-        Title: "", //选中的工具栏svg标题
-        Color: "", //选中的工具栏svg颜色
-      },
-      selectSvg: {
-        ID: "", //要移动的svg
-        Index: 0,
-        mouseStatus: 0, // 鼠标状态 1按下； 0弹起
-        mPositionX: 0, //选中svg时鼠标的x轴坐标
-        mPositionY: 0, //选中svg时鼠标的y轴坐标
-        pointX: 0, //选中svg时svg的x轴坐标
-        pointY: 0, //选中svg时svg的y轴坐标
-      },
-      selectSvgInfo: "",
-      tableRowCount: 2, //表格默认行数
-      tableColCount: 2, //表格默认列数
-      tableDefaultData: [],
       AnalogData: [],
     };
   },
   methods: {
-    MouseMove(e) {
-      let _this = this;
-
-      if (this.selectSvg.mouseStatus == 0) {
-        return;
-      }
-      const { clientX, clientY } = e;
-
-      let svgID = this.svgLists[this.selectSvg.Index].id;
-      //排除当前元素剩下的所有svg元素的列表
-      let anyPositionList = this.svgLists.filter(function (list) {
-        return list.id != svgID;
-      });
-      //将要移动的元素坐标设备为鼠标坐标
-      let svgPositionX = this.selectSvg.pointX;
-      let svgPositionY = this.selectSvg.pointY;
-      svgPositionX += clientX - this.selectSvg.mPositionX;
-      svgPositionY += clientY - this.selectSvg.mPositionY;
-      setTimeout(function () {
-        //少于十个像素自动吸附
-        //从所有的x坐标列表中查与当前坐标少于10个像素的组件是否存在
-        let exitsAdsorbX = anyPositionList.filter(function (list) {
-          return (
-            -10 < list.svgPositionX - svgPositionX &&
-            list.svgPositionX - svgPositionX < 10
-          );
-        });
-        if (exitsAdsorbX.length > 0) {
-          svgPositionX = exitsAdsorbX[0].svgPositionX;
-        }
-        //y轴相同 横向坐标自动吸附
-        let exitsAdsorbY = anyPositionList.filter(function (list) {
-          return (
-            -10 < list.svgPositionY - svgPositionY &&
-            list.svgPositionY - svgPositionY < 10
-          );
-        });
-        if (exitsAdsorbY.length > 0) {
-          svgPositionY = exitsAdsorbY[0].svgPositionY;
-        }
-        _this.svgLists[_this.selectSvg.Index].svgPositionX = svgPositionX;
-        _this.svgLists[_this.selectSvg.Index].svgPositionY = svgPositionY;
-        //从所有的x坐标列表中查当前坐标是否存在
-        let exitsNowX = anyPositionList.filter(function (list) {
-          return list.svgPositionX === svgPositionX;
-        });
-        if (exitsNowX.length > 0) {
-          _this.guideY.style.setProperty("left", svgPositionX - 1 + "px");
-          _this.guideY.style.display = "inline";
-        } else {
-          _this.guideY.style.display = "none";
-        }
-        //从所有的y坐标列表中查当前坐标是否存在
-        let exitsNowY = anyPositionList.filter(function (list) {
-          return list.svgPositionY === svgPositionY;
-        });
-        if (exitsNowY.length > 0) {
-          _this.guideX.style.setProperty("top", svgPositionY + "px");
-          _this.guideX.style.display = "inline";
-        } else {
-          _this.guideX.style.display = "none";
-        }
-      }, 1);
-    },
-    MousedownCanvas() {
-      //console.log('点击了画布');
-    },
-    MousedownSvg(id, index, pointX, pointY, e) {
-      this.CurrentlySelectedToolBar.Type = global.CurrentlySelectedToolBarType =
-        "";
-      this.CurrentlySelectedToolBar.Title =
-        global.CurrentlySelectedToolBarTitle = "";
-      //从数组里面根据index找到当前元素
-      this.selectSvg.ID = id;
-      this.selectSvg.Index = index;
-      this.selectSvg.mouseStatus = 1;
-      this.selectSvg.mPositionX = e.clientX;
-      this.selectSvg.mPositionY = e.clientY;
-      this.selectSvg.pointX = pointX;
-      this.selectSvg.pointY = pointY;
-      this.selectSvgInfo = this.svgLists[index];
-
-      //获取所有g标签 将当前标签追加选中样式
-      let gAnyList = document.querySelectorAll("g");
-      gAnyList.forEach((g) => {
-        g.classList.remove("topo-layer-view-selected");
-      });
-      document.getElementById(id).classList.add("topo-layer-view-selected");
-    },
-    MouseupCanvas() {
-      this.guideX.style.display = "none";
-      this.guideY.style.display = "none";
-      if (
-        this.CurrentlySelectedToolBar.Title != "" ||
-        this.CurrentlySelectedToolBar.Type != ""
-      ) {
-        return;
-      }
-      // this.selectSvg.ID = '';
-      this.selectSvg.mouseStatus = 0;
-    },
-    MouseWheel(e) {
-      //获取当前选中组件
-      let selectSvgInfo = this.selectSvgInfo;
-      if (
-        selectSvgInfo == undefined ||
-        selectSvgInfo == null ||
-        selectSvgInfo == ""
-      ) {
-        return;
-      }
-      e.preventDefault();
-      //判断滚轮方向 -100是往上滑 100是下滑
-      let svgZoom = e.deltaY < 0 ? 0.1 : -0.1;
-      console.log(e.deltaY);
-      selectSvgInfo.size += svgZoom;
-      selectSvgInfo.size = parseFloat(selectSvgInfo.size.toFixed(1));
-      if (selectSvgInfo.size < 1) {
-        selectSvgInfo.size = 1;
-      }
-    },
-    DblClick() {
-      //获取所有g标签 清除所有选中样式
-      let gAnyList = document.querySelectorAll("g");
-      gAnyList.forEach((g) => {
-        g.classList.remove("topo-layer-view-selected");
-      });
-      this.selectSvgInfo = "";
-    },
-    testD() {
-      //   console.log(JSON.stringify(this.svgLists));
-      alert(JSON.stringify(this.svgLists));
-    },
     testE() {
       this.svgLists = this.AnalogData;
     },
@@ -280,89 +26,6 @@ export default {
         name: "power_diagram",
       });
     },
-    //设置表格属性
-    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;
-      // console.log(this.svgLists[tableIndex].tableData)
-      let gAnyList = document.querySelectorAll("foreignObject");
-      // window.onload = function () {
-      //   var tdArr = document.getElementById('tablebox').firstElementChild;
-      //   for (var i = 0; i < data.length; i++) {
-      //       var tr = document.createElement("tr");
-      //       tr.innerHTML = '<td class="active">' + data[i].name + '</td><td class="warning" onClick=clickPerson('+data[i].id+') >编辑</td>';
-      //       tdArr.appendChild(tr)
-      //   }
-      // };
-      var html = `
-        <div id='divtable' class='svgfont' data-v-025fdfb6=''></div>
-        <table border='0' cellpadding='0' cellspacing='0' style='pointer-events: none;'>
-          <tr data-v-025fdfb6=''>
-            <td class='tdsvg' data-v-025fdfb6=''>
-              <div class='add-tag' data-v-025fdfb6=''>
-                <span data-v-025fdfb6=''>1行1列</span>
-                <input type='text' class='ant-input ant-input-sm ainput' data-v-025fdfb6=''>
-              </div>
-            </td>
-            <td class='tdsvg' data-v-025fdfb6=''>
-              <div class='add-tag' data-v-025fdfb6=''>
-                <span data-v-025fdfb6=''>1行2列</span>
-                <input type='text' class='ant-input ant-input-sm ainput' data-v-025fdfb6=''>
-              </div>
-            </td>
-          </tr>
-          <tr data-v-025fdfb6=''>
-            <td class='tdsvg' data-v-025fdfb6=''>
-              <div class='add-tag' data-v-025fdfb6=''>
-                <span data-v-025fdfb6=''>2行1列</span>
-                <input type='text' class='ant-input ant-input-sm ainput' data-v-025fdfb6=''>
-              </div>
-            </td>
-            <td class='tdsvg' data-v-025fdfb6=''>
-              <div class='add-tag' data-v-025fdfb6=''>
-                <span data-v-025fdfb6=''>2行2列</span>
-                <input type='text' class='ant-input ant-input-sm ainput' data-v-025fdfb6=''>
-              </div>
-            </td>
-          </tr>
-        </table>`;
-      gAnyList[0].innerHTML = html;
-    },
   },
   mounted() {
     let _this = this;
@@ -371,85 +34,11 @@ export default {
       .get(window.PLATFROM_CONFIG.ione)
       .then(function (response) {
         _this.AnalogData = response.data;
-        console.log(response);
       })
       .catch(function (error) {
         console.log(error);
       });
 
-    let canvasdiv = document.querySelector("#canvas");
-    _this.guideX = document.querySelector("#guide-x"); //辅助线x轴
-    _this.guideY = document.querySelector("#guide-y"); //辅助线y轴
-    canvasdiv.addEventListener(
-      "dragover",
-      function (e) {
-        e.preventDefault();
-        _this.CurrentlySelectedToolBar.Type =
-          global.CurrentlySelectedToolBarType;
-        _this.CurrentlySelectedToolBar.Title =
-          global.CurrentlySelectedToolBarTitle;
-        _this.CurrentlySelectedToolBar.TypeName =
-          global.CurrentlySelectedToolBarTypeName;
-        _this.CurrentlySelectedToolBar.Color =
-          global.CurrentlySelectedToolBarColor;
-        _this.CurrentlySelectedToolBar.Height =
-          global.CurrentlySelectedToolBarHeight;
-        _this.CurrentlySelectedToolBar.Width =
-          global.CurrentlySelectedToolBarWidth;
-        _this.CurrentlySelectedToolBar.SvgText =
-          global.CurrentlySelectedToolBarSvgText;
-        _this.CurrentlySelectedToolBar.FontSize =
-          global.CurrentlySelectedToolBarFontSize;
-        _this.CurrentlySelectedToolBar.TableData =
-          global.CurrentlySelectedToolBarTableData;
-      },
-      false
-    );
-    canvasdiv.addEventListener(
-      "drop",
-      function (e) {
-        e.preventDefault();
-        if (_this.CurrentlySelectedToolBar.Type == "") {
-          return;
-        }
-        //根据类型和鼠标位置创建组件
-        console.log(_this.CurrentlySelectedToolBar.Type);
-
-        let svgItem = {
-          id: _this.$UCore.GenUUid(),
-          title: _this.CurrentlySelectedToolBar.Title,
-          type: _this.CurrentlySelectedToolBar.Type,
-          typeName: _this.CurrentlySelectedToolBar.TypeName,
-          svgColor: _this.CurrentlySelectedToolBar.Color,
-          svgPositionX: e.offsetX,
-          svgPositionY: e.offsetY,
-          // size: 1,
-          height: _this.CurrentlySelectedToolBar.Height,
-          width: _this.CurrentlySelectedToolBar.Width,
-          svgText: _this.CurrentlySelectedToolBar.SvgText,
-          fontSize: _this.CurrentlySelectedToolBar.FontSize,
-          tableRowCount: _this.tableRowCount,
-          tableColCount: _this.tableColCount,
-          tableData: _this.CurrentlySelectedToolBar.TableData,
-          angle: 0,
-          //translate:`translate(${this.mousePosition.positionX},${this.mousePosition.positionY})`
-        };
-        _this.svgLists.push(svgItem);
-        setTimeout(function () {
-          //获取所有g标签 将当前标签追加选中样式
-          let gAnyList = document.querySelectorAll("g");
-          console.log(gAnyList);
-          gAnyList.forEach((g) => {
-            g.classList.remove("topo-layer-view-selected");
-          });
-          document
-            .getElementById(svgItem.id)
-            .classList.add("topo-layer-view-selected");
-          _this.selectSvgInfo = svgItem;
-        }, 100);
-      },
-      false
-    );
     setTimeout(() => {
       this.testE();
       this.testH();
@@ -457,6 +46,19 @@ export default {
   },
   created() {
     let _this = this;
+// _this.$store.state.siteId
+    api
+      .gethookupComponentBasics({
+        siteId: 1,
+      })
+      .then((requset) => {
+        if (requset.status === "SUCCESS") {
+          console.log(requset.data)
+          // this.svgInfoData = requset.data;
+        } else {
+          ElMessage.error(requset.msg);
+        }
+      });
     //请求接口获取组件
     this.$axios
       .get(window.PLATFROM_CONFIG.Interface)
@@ -466,64 +68,6 @@ export default {
       .catch(function (error) {
         console.log(error);
       });
-    //当前页面监视键盘输入
-    document.onkeydown = function (e) {
-      //获取当前选中组件
-      let selectSvgInfo = _this.selectSvgInfo;
-      if (
-        selectSvgInfo == undefined ||
-        selectSvgInfo == null ||
-        selectSvgInfo == ""
-      ) {
-        return;
-      }
-      //事件对象兼容
-      let e1 = e || window.event || arguments.callee.caller.arguments[0];
-      //键盘按键判断:左箭头-37;上箭头-38；右箭头-39;下箭头-40
-      if (e1 && e1.keyCode == 37) {
-        e.preventDefault();
-        selectSvgInfo.svgPositionX -= 1;
-      } else if (e1 && e1.keyCode == 38) {
-        e.preventDefault();
-        selectSvgInfo.svgPositionY -= 1;
-      } else if (e1 && e1.keyCode == 39) {
-        e.preventDefault();
-        selectSvgInfo.svgPositionX += 1;
-      } else if (e1 && e1.keyCode == 40) {
-        e.preventDefault();
-        selectSvgInfo.svgPositionY += 1;
-      }
-      //ctrl  c
-      else if (e1 && e1.ctrlKey && e1.keyCode == 67) {
-        e.preventDefault();
-        let copySvgInfoStr = JSON.stringify(selectSvgInfo);
-        let copySvgInfo = JSON.parse(copySvgInfoStr);
-        copySvgInfo.id = _this.$UCore.GenUUid();
-        copySvgInfo.svgPositionX = selectSvgInfo.svgPositionX + 10;
-        copySvgInfo.svgPositionY = selectSvgInfo.svgPositionY + 10;
-        _this.svgLists.push(copySvgInfo);
-        _this.selectSvgInfo = copySvgInfo;
-        setTimeout(function () {
-          //获取所有g标签 将当前标签追加选中样式
-          let gAnyList = document.querySelectorAll("g");
-          gAnyList.forEach((g) => {
-            g.classList.remove("topo-layer-view-selected");
-          });
-          document
-            .getElementById(copySvgInfo.id)
-            .classList.add("topo-layer-view-selected");
-        }, 100);
-      }
-      //deleted
-      else if (e1 && e1.keyCode == 46) {
-        e.preventDefault();
-        //根据当前id找到当前元素的index
-        let selectSvgIndex = _this.svgLists.indexOf(
-          _this.svgLists.filter((f) => f.id == selectSvgInfo.id)[0]
-        );
-        _this.svgLists.splice(selectSvgIndex, 1);
-      }
-    };
   },
 };
 </script>

src/views/site/Power_diagram.vue

@@ -1,5 +1,5 @@
 <template>
-  <section class="mainbox">
+  <section class="mainbox" v-if="svgForList">
     <div style="overflow: auto; position: relative">
       <div class="svg-contain">
         <svg
@@ -18,7 +18,7 @@
           <g
             style="cursor: pointer"
             v-for="(item, index) in svgLists"
-            :key="item"
+            :key="index"
             :id="item.id"
             @mousedown="
               MousedownSvg(
@@ -36,18 +36,19 @@
               item.svgPositionX +
               ',' +
               item.svgPositionY +
-              ')' +
-              'rotate(' +
+              ') rotate(' +
               item.angle +
+              ') scale(' +
+              item.size +
               ')'
             "
           >
             <SvgComponents
               :svg_color="item.svgColor"
               :svgtype="item.type"
-              :stroke-width="item.width"
               :text="item.svgText"
               :font-size="item.fontSize"
+              :size="item.size"
               :height="item.height"
               :svgInfoData="svgInfoData"
             ></SvgComponents>
@@ -57,12 +58,15 @@
       <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="editChart">编辑</a-button>
       </div>
     </div>
   </section>
 </template>
 <script>
 import SvgComponents from "@/components/SvgComponents.vue";
+import api from "@/api/site/systemImg";
+import { ElMessage } from "element-plus";
 export default {
   components: { SvgComponents },
   data() {
@@ -72,91 +76,59 @@ export default {
       analogDataTimer: "", //模拟数据定时器
       userInfo: "",
       editable: false,
+      svgForList: false,
+
+      setInterval: null,
     };
   },
-  mounted() {},
+  mounted() {
+    if (JSON.stringify(this.$route.query) != "{}") {
+      this.$store.state.siteId = this.$route.query.siteId;
+    }
+    this.$nextTick(() => {
+      this.Interface();
+    });
+  },
   methods: {
-    test(e) {
-      console.log("刷新或关闭", e);
-      this.$router.push({
-        path: "/CircuitEdit",
-        name: "circuitEdit",
-      });
-    },
-    testF() {
-      //找出所有断路器
-      let anyCircuitBreakerList = this.svgLists.filter(
-        (f) => f.type == "CircuitBreakerSvg"
-      );
-      //找出所有的电线开关
-      let anyWireBreakList = this.svgLists.filter(
-        (f) => f.type == "WireConnectionSvg" || f.type == "WireBreakOffSvg"
-      );
-      //查找所有表格值
-      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) => {
-          //生成一个随机数
-          let random = Math.round(Math.random() * 10);
-          if (random < 5) {
-            anyCircuitBreaker.svgColor = "#00FF00";
-          } else {
-            anyCircuitBreaker.svgColor = "#FF0000";
-          }
-        });
-        anyWireBreakList.forEach((anyWireBreak) => {
-          //生成一个随机数
-          let random = Math.round(Math.random() * 10);
-          if (random < 5) {
-            anyWireBreak.type = "WireConnectionSvg";
-            anyWireBreak.svgColor = "#FF0000";
+    Interface() {
+      var _this = this;
+
+      //请求接口获取组件
+      this.setInterval = setInterval(() => {
+        api.getHookupComponentComplete({ siteId: this.$store.state.siteId }).then((requset) => {
+          if (requset.data.length > 0) {
+            _this.svgLists = requset.data;
           } else {
-            anyWireBreak.type = "WireBreakOffSvg";
-            anyWireBreak.svgColor = "#00FF00";
+            ElMessage.error("当前站点下无可查看配电图,即将为您跳转到编辑页！");
+            this.editChart();
           }
         });
-        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;
-            }
-          });
-        });
-      }, 2000);
-    },
-    testG() {
-      clearInterval(this.analogDataTimer);
+      }, 1000);
+
+      api.gethookupComponentBasics().then((requset) => {
+        if (requset.status === "SUCCESS") {
+          _this.svgInfoData = requset.data;
+          setTimeout(() => {
+            _this.svgForList = true;
+          }, 1000);
+        } else {
+          ElMessage.error(requset.msg);
+        }
+      });
     },
-  },
-  created() {
-    var _this = this;
-    window.addEventListener("beforeunload", (e) => this.test(e));
-    _this.svgLists = JSON.parse(localStorage.getItem("svginfo"));
-    //请求接口获取组件
-    this.$axios
-      .get(window.PLATFROM_CONFIG.Interface)
-      .then(function (response) {
-        _this.svgInfoData = response.data;
-      })
-      .catch(function (error) {
-        console.log(error);
+    editChart() {
+      this.$router.push({
+        path: "/CircuitEdit1",
+        name: "CircuitEdit1",
       });
+    },
+    MousedownSvg(id, index, svgPositionX, svgPositionY, $event) {
+      console.log(id, index, svgPositionX, svgPositionY, $event);
+    },
   },
   unmounted() {
-    window.removeEventListener("beforeunload", (e) => this.test(e));
+    //销毁定时器
+    clearInterval(this.setInterval);
   },
 };
 </script>
@@ -176,5 +148,10 @@ export default {
     margin-right: 10px;
   }
 }
+* {
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  user-select: none;
+}
 </style>