动态组件准备工作

public/InterfaceReturn.json

@@ -0,0 +1,15 @@
+[{
+  "type": "AlternatorSvg",
+  "title": "发电机",
+  "template": "<ellipse id=\"c1\" cx=\"50\" cy=\"50\" rx=\"35\" ry=\"35\" fill=\"none\" :stroke=\"color\" stroke-width=\"2\" transform=\"translate(-50,-50)\"></ellipse><path id=\"l1\" d=\"M30,50 C30,44 34,40 40,40 46,40 50,44 50,50 M50,50 C50,56 54,60 60,60 66,60 70,56 70,50 \" fill=\"none\" :stroke=\"color\" stroke-width=\"2\" transform=\"translate(-50,-50)\"></path>",
+  "props": ["svg_color"],
+  "default_color":"#00FF00",
+  "priview_img":"/AlternatorSvg.png"
+}, {
+  "type": "ArrowDownSvg",
+  "title": "箭头向下",
+  "template": "<polygon  points=\"0,-8 5,0 10,-8\" :fill=\"color\" :stroke=\"color\" stroke-width=\"2\" transform=\"translate(-5,0)\"></polygon>",
+  "props": ["svg_color"],
+  "default_color":"#00FF00",
+  "priview_img":"/ArrowDownSvg.png"
+}]

src/components/DynamicTest.vue

@@ -0,0 +1,69 @@
+<template>
+  <div style="padding: 30px">
+    <button @click="change('1')">组件1</button>
+    <button @click="change('2')">组件2</button>
+    <button @click="change('3')">组件3</button>
+    <component :is="componentTag"
+               :color= color
+               :translate =translate></component>
+  </div>
+</template>
+<script>
+// var componentA = {
+//   template: `<div style="color:red">我是 {{msg}}</div>`,
+//   props: ['msg']
+// }
+// var componentB = {
+//   template: `<div style="color:green">我是 componentB</div>`
+// }
+// var componentC = {
+//   template: `<div style="color:rebeccapurple">我是 componentC</div>`
+// }
+let importComponents = {};
+export default {
+
+  data () {
+    return {
+      componentTag: '',
+      color: '测试颜色',
+      translate:'测试坐标'
+    }
+  },
+  components: importComponents,
+  methods: {
+    change (index) {
+      if (index == 1) {
+        this.componentTag = 'AlternatorSvg'
+      }
+      else {
+        this.componentTag = 'ArrowDownSvg'
+      }
+
+    },
+  },
+  created () {
+    // let _this=this;
+    //假如这是接口获取的字符串
+    const dataStr = [{
+      type: 'AlternatorSvg',
+      name: '发电机',
+      template: `<ellipse id="c1" cx="50" cy="50" rx="35" ry="35" fill="none" :stroke="color" stroke-width="2" :transform="translate"></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="color" stroke-width="2" :transform="translate"></path>`,
+      props: ['color', 'translate']
+    }, {
+      typr: 'ArrowDownSvg',
+      name: '箭头向下',
+      template: `<polygon  points="0,-8 5,0 10,-8" :fill="color" :stroke="color" stroke-width="2" :transform="translate"></polygon>`,
+      props: ['color', 'translate']
+    }];
+    dataStr.forEach(f => {
+      let componentInfo = {
+        template: f.template,
+        props: f.props
+      }
+      importComponents[f.type] = componentInfo;
+    })
+  }
+}
+</script>
+<style scoped>
+</style>

src/components/DynamicTest1.vue

@@ -0,0 +1,48 @@
+<template>
+  <div style="padding: 30px">
+    <button @click="change('1')">组件1</button>
+    <button @click="change('2')">组件2</button>
+    <button @click="change('3')">组件3</button>
+    <component :is="componentTag"
+               :color=color
+               :translate=translate></component>
+  </div>
+</template>
+<script>
+var componentA = {
+  template: `<div style="color:red">我是 {{color}}</div>`,
+  props: ['color']
+}
+var componentB = {
+  template: `<polygon  points="0,-8 5,0 10,-8" :fill="color" :stroke="color" stroke-width="2" :transform="translate"></polygon>`
+  , props: ['color', 'translate']
+}
+var componentC = {
+  template: `<div style="color:rebeccapurple">我是 componentC</div>`
+}
+export default {
+  components: { componentA, componentB, componentC },
+  data () {
+    return {
+      componentTag: '',
+      color: '测试颜色',
+      translate: '测试坐标'
+    }
+  },
+
+  methods: {
+    change (index) {
+      console.log(111);
+      if (index == 1) {
+        this.componentTag = 'componentA'
+      }
+      else {
+        this.componentTag = 'componentB'
+      }
+
+    },
+  }
+}
+</script>
+<style scoped>
+</style>

src/components/LeftToolBar.vue

@@ -1,42 +1,183 @@
 <template>
   <div class="components-layout-left">
 
-<a-input-search placeholder="搜索组件" @search="onSearch" />
+    <a-input-search placeholder="搜索组件"
-  <a-collapse v-model:activeKey="activeKey" accordion>
+                    @search="onSearch" />
-    <a-collapse-panel key="1" header="基本形状">
+    <a-collapse v-model:activeKey="activeKey"
+                accordion>
+      <a-collapse-panel key="1"
+                        header="基本形状">
+                        
         <ul class="svg-nav-list">
-        <li><div class="title">断路器</div><img title="断路器" @mousedown="Mousedown('CircuitBreakerSvg','断路器','#00FF00',40,0,'',2)" src="../assets/CircuitBreakerSvg.png" draggable="true"></li>
+          <li v-for="item in svgInfoData" :key="item">
-        <li><div class="title">竖线</div><img title="竖线" @mousedown="Mousedown('VerticalLineSvg','竖线','#FF0000',150,0,'',2)" src="../assets/VerticalLineSvg.png" draggable="true"></li>
+            <div class="title">{{item.title}}</div>
-        <li><div class="title">文字</div><img title="文字" @mousedown="Mousedown('TextSvg','文字','#FF0000',0,50,'文字')" src="../assets/TextSvg.png" draggable="true"></li>   
+            <img :title="item.title"
-        <li><div class="title">隔离开关</div><img title="隔离开关" @mousedown="Mousedown('IsolatingSwitchSvg','隔离开关','#00FF00',20,0,'',2)" src="../assets/IsolatingSwitchSvg.png" draggable="true"></li>
+                 @mousedown="Mousedown(item.type,item.title,item.default_color)"
-        <li><div class="title">避雷器</div><img title="避雷器" @mousedown="Mousedown('LightningArresterSvg','避雷器','#FF0000',7,0,'',2)" src="../assets/LightningArresterSvg.png" draggable="true"></li>   
+                 :src="item.priview_img"
-        <li><div class="title">标准电容器</div><img title="标准电容器" @mousedown="Mousedown('StandardCapacitorSvg','标准电容器','#FF0000',3,0,'',2)" src="../assets/StandardCapacitorSvg.png" draggable="true"></li>   
+                 draggable="true">
-        <li><div class="title">电线开关</div><img title="电线开关" @mousedown="Mousedown('WireBreakOffSvg','电线开关','#00FF00',5,0,'',2)" src="../assets/WireBreakOffSvg.png" draggable="true"></li>      
+          </li>
-        <li><div class="title">表格</div><img title="表格" @mousedown="Mousedown('TableSvg','表格','#CCCC33')" src="../assets/TableSvg.png" draggable="true"></li>      
-        <li><div class="title">横线</div><img title="横线" @mousedown="Mousedown('HorizontalLineSvg','横线','#FF0000',150,0,'',2)" src="../assets/HorizontalLineSvg.png" draggable="true"></li>   
-        <li><div class="title">多段向上折线</div><img title="多段向上折线" @mousedown="Mousedown('PolylineUpSvg','多段向上折线','#FF0000',7,0,'',2)" src="../assets/PolylineUpSvg.png" draggable="true"></li>   
-        <li><div class="title">多段向下折线</div><img title="多段向下折线" @mousedown="Mousedown('PolylineDownSvg','多段向下折线','#FF0000',7,0,'',2)" src="../assets/PolylineDownSvg.png" draggable="true"></li>   
-        <li><div class="title">箭头向上</div><img title="箭头向上" @mousedown="Mousedown('ArrowUpSvg','箭头向上','#FF0000',2,0,'',2)" src="../assets/ArrowUpSvg.png" draggable="true"></li>   
-        <li><div class="title">箭头向下</div><img title="箭头向下" @mousedown="Mousedown('ArrowDownSvg','箭头向下','#FF0000',2,0,'',2)" src="../assets/ArrowDownSvg.png" draggable="true"></li>   
-        <li><div class="title">接地灰白</div><img title="接地灰白" @mousedown="Mousedown('GroundGraySvg','接地灰白','#CCCCCC',3,0,'',2)" src="../assets/GroundGraySvg.png" draggable="true"></li>  
-        <li><div class="title">信号灯</div><img title="信号灯" @mousedown="Mousedown('SignalLamp','信号灯','#FF0000',3,0,'',2)" src="../assets/SignalLamp.png" draggable="true"></li>   
-        <li><div class="title">长方形</div><img title="长方形" @mousedown="Mousedown('RectSvg','长方形','#FF0000',30,0,'',2)" src="../assets/RectSvg.png" draggable="true"></li>   
-        <li><div class="title">双圆</div><img title="双圆" @mousedown="Mousedown('TwoCircleSvg','双圆','#FF0000',3,0,'',2)" src="../assets/TwoCircleSvg.png" draggable="true"></li>   
-        <li><div class="title">电流互感器y</div><img title="电流互感器y" @mousedown="Mousedown('TransformerYSvg','电流互感器y','#FF0000',5,0,'',2)" src="../assets/TransformerY.png" draggable="true"></li>   
-        <li><div class="title">三相互感器开口</div><img title="三相互感器开口" @mousedown="Mousedown('TransformerTriphaseOpenSvg','三相互感器开口','#FF0000',2,0,'',2)" src="../assets/TransformerTriphaseOpen.png" draggable="true"></li>   
-        <li><div class="title">双绕组变压器</div><img title="双绕组变压器" @mousedown="Mousedown('DoubleWindingSvg','双绕组变压器','#FF0000',5,0,'',2)" src="../assets/DoubleWindingSvg.png" draggable="true"></li>   
-        <li><div class="title">双绕组变压器B</div><img title="双绕组变压器B" @mousedown="Mousedown('DoubleWindingSvgB','双绕组变压器B','#FF0000',5,0,'',2)" src="../assets/DoubleWindingSvgB.png" draggable="true"></li>   
-        <li><div class="title">电容柜</div><img title="电容柜" @mousedown="Mousedown('GGJSvg','电容柜','#FF6600',1,0,'',2)" src="../assets/GGJ.png" draggable="true"></li>   
-        <li><div class="title">标准电抗</div><img title="标准电抗" @mousedown="Mousedown('StandardReactanceSvg','标准电抗','#CCCC00',3,0,'',2)" src="../assets/StandardReactance.png" draggable="true"></li>   
-        <li><div class="title">发电机</div><img title="发电机" @mousedown="Mousedown('AlternatorSvg','发电机','#FF0000',5,0,'',2)" src="../assets/Alternator.png" draggable="true"></li>   
         </ul>
+        <!-- <ul class="svg-nav-list">
+          <li>
+            <div class="title">断路器</div><img title="断路器"
+                 @mousedown="Mousedown('CircuitBreakerSvg','断路器','#00FF00',40,0,'',2)"
+                 src="../assets/CircuitBreakerSvg.png"
+                 draggable="true">
+          </li>
+          <li>
+            <div class="title">竖线</div><img title="竖线"
+                 @mousedown="Mousedown('VerticalLineSvg','竖线','#FF0000',150,0,'',2)"
+                 src="../assets/VerticalLineSvg.png"
+                 draggable="true">
+          </li>
+          <li>
+            <div class="title">文字</div><img title="文字"
+                 @mousedown="Mousedown('TextSvg','文字','#FF0000',0,50,'文字')"
+                 src="../assets/TextSvg.png"
+                 draggable="true">
+          </li>
+          <li>
+            <div class="title">隔离开关</div><img title="隔离开关"
+                 @mousedown="Mousedown('IsolatingSwitchSvg','隔离开关','#00FF00',20,0,'',2)"
+                 src="../assets/IsolatingSwitchSvg.png"
+                 draggable="true">
+          </li>
+          <li>
+            <div class="title">避雷器</div><img title="避雷器"
+                 @mousedown="Mousedown('LightningArresterSvg','避雷器','#FF0000',7,0,'',2)"
+                 src="../assets/LightningArresterSvg.png"
+                 draggable="true">
+          </li>
+          <li>
+            <div class="title">标准电容器</div><img title="标准电容器"
+                 @mousedown="Mousedown('StandardCapacitorSvg','标准电容器','#FF0000',3,0,'',2)"
+                 src="../assets/StandardCapacitorSvg.png"
+                 draggable="true">
+          </li>
+          <li>
+            <div class="title">电线开关</div><img title="电线开关"
+                 @mousedown="Mousedown('WireBreakOffSvg','电线开关','#00FF00',5,0,'',2)"
+                 src="../assets/WireBreakOffSvg.png"
+                 draggable="true">
+          </li>
+          <li>
+            <div class="title">表格</div><img title="表格"
+                 @mousedown="Mousedown('TableSvg','表格','#CCCC33')"
+                 src="../assets/TableSvg.png"
+                 draggable="true">
+          </li>
+          <li>
+            <div class="title">横线</div><img title="横线"
+                 @mousedown="Mousedown('HorizontalLineSvg','横线','#FF0000',150,0,'',2)"
+                 src="../assets/HorizontalLineSvg.png"
+                 draggable="true">
+          </li>
+          <li>
+            <div class="title">多段向上折线</div><img title="多段向上折线"
+                 @mousedown="Mousedown('PolylineUpSvg','多段向上折线','#FF0000',7,0,'',2)"
+                 src="../assets/PolylineUpSvg.png"
+                 draggable="true">
+          </li>
+          <li>
+            <div class="title">多段向下折线</div><img title="多段向下折线"
+                 @mousedown="Mousedown('PolylineDownSvg','多段向下折线','#FF0000',7,0,'',2)"
+                 src="../assets/PolylineDownSvg.png"
+                 draggable="true">
+          </li>
+          <li>
+            <div class="title">箭头向上</div><img title="箭头向上"
+                 @mousedown="Mousedown('ArrowUpSvg','箭头向上','#FF0000',2,0,'',2)"
+                 src="../assets/ArrowUpSvg.png"
+                 draggable="true">
+          </li>
+          <li>
+            <div class="title">箭头向下</div><img title="箭头向下"
+                 @mousedown="Mousedown('ArrowDownSvg','箭头向下','#FF0000',2,0,'',2)"
+                 src="../assets/ArrowDownSvg.png"
+                 draggable="true">
+          </li>
+          <li>
+            <div class="title">接地灰白</div><img title="接地灰白"
+                 @mousedown="Mousedown('GroundGraySvg','接地灰白','#CCCCCC',3,0,'',2)"
+                 src="../assets/GroundGraySvg.png"
+                 draggable="true">
+          </li>
+          <li>
+            <div class="title">信号灯</div><img title="信号灯"
+                 @mousedown="Mousedown('SignalLamp','信号灯','#FF0000',3,0,'',2)"
+                 src="../assets/SignalLamp.png"
+                 draggable="true">
+          </li>
+          <li>
+            <div class="title">长方形</div><img title="长方形"
+                 @mousedown="Mousedown('RectSvg','长方形','#FF0000',30,0,'',2)"
+                 src="../assets/RectSvg.png"
+                 draggable="true">
+          </li>
+          <li>
+            <div class="title">双圆</div><img title="双圆"
+                 @mousedown="Mousedown('TwoCircleSvg','双圆','#FF0000',3,0,'',2)"
+                 src="../assets/TwoCircleSvg.png"
+                 draggable="true">
+          </li>
+          <li>
+            <div class="title">电流互感器y</div><img title="电流互感器y"
+                 @mousedown="Mousedown('TransformerYSvg','电流互感器y','#FF0000',5,0,'',2)"
+                 src="../assets/TransformerY.png"
+                 draggable="true">
+          </li>
+          <li>
+            <div class="title">三相互感器开口</div><img title="三相互感器开口"
+                 @mousedown="Mousedown('TransformerTriphaseOpenSvg','三相互感器开口','#FF0000',2,0,'',2)"
+                 src="../assets/TransformerTriphaseOpen.png"
+                 draggable="true">
+          </li>
+          <li>
+            <div class="title">双绕组变压器</div><img title="双绕组变压器"
+                 @mousedown="Mousedown('DoubleWindingSvg','双绕组变压器','#FF0000',5,0,'',2)"
+                 src="../assets/DoubleWindingSvg.png"
+                 draggable="true">
+          </li>
+          <li>
+            <div class="title">双绕组变压器B</div><img title="双绕组变压器B"
+                 @mousedown="Mousedown('DoubleWindingSvgB','双绕组变压器B','#FF0000',5,0,'',2)"
+                 src="../assets/DoubleWindingSvgB.png"
+                 draggable="true">
+          </li>
+          <li>
+            <div class="title">电容柜</div><img title="电容柜"
+                 @mousedown="Mousedown('GGJSvg','电容柜','#FF6600',1,0,'',2)"
+                 src="../assets/GGJ.png"
+                 draggable="true">
+          </li>
+          <li>
+            <div class="title">标准电抗</div><img title="标准电抗"
+                 @mousedown="Mousedown('StandardReactanceSvg','标准电抗','#CCCC00',3,0,'',2)"
+                 src="../assets/StandardReactance.png"
+                 draggable="true">
+          </li>
+          <li>
+            <div class="title">发电机</div><img title="发电机"
+                 @mousedown="Mousedown('AlternatorSvg','发电机','#FF0000',5,0,'',2)"
+                 src="../assets/Alternator.png"
+                 draggable="true">
+          </li>
+        </ul> -->
       </a-collapse-panel>
-    <a-collapse-panel key="2" header="拓扑图" :disabled="false">
+      <a-collapse-panel key="2"
-      <ul class="svg-nav-list two-item">
+                        header="拓扑图"
-        <li><div class="title">智慧终端</div><img title="智慧终端" @mousedown="Mousedown('SmartTerminalSvg','智慧终端','',140,0,'',0)" src="../assets/SmartTerminalSvg.png" draggable="true"></li>
+                        :disabled="false">
-      </ul>
+        <!-- <ul class="svg-nav-list two-item">
+          <li>
+            <div class="title">智慧终端</div><img title="智慧终端"
+                 @mousedown="Mousedown('SmartTerminalSvg','智慧终端','',140,0,'',0)"
+                 src="../assets/SmartTerminalSvg.png"
+                 draggable="true">
+          </li>
+        </ul> -->
       </a-collapse-panel>
-    <a-collapse-panel key="3" header="物联网">
+      <a-collapse-panel key="3"
+                        header="物联网">
         <p>{{ text }}</p>
       </a-collapse-panel>
     </a-collapse>
@@ -49,6 +190,7 @@ export default {
     return {
       activeKey: ['1'],//当前激活的key
       text: `这里是预留位置.`,
+      svgInfoData:[]
     };
   },
   methods: {
@@ -62,7 +204,22 @@ export default {
       global.CurrentlySelectedToolBarText = text;
       global.CurrentlySelectedToolBarWidth = width;
       // alert(this.$UCore.GenUUid());
-      },}
+    },
+  },
+  created () {
+    let _this=this;
+    //请求接口获取组件
+    this.$axios.get('/InterfaceReturn.json')
+      .then(function (response) {
+        _this.svgInfoData=response.data;
+        console.log(response.data);
+      })
+      .catch(function (error) {
+        console.log(error);
+      });
+
+
+  }
 };
 </script>
 <style>
@@ -129,8 +286,6 @@ export default {
     }
   }
 
-  
-
   &.two-item {
     li {
       width: calc(50% - 30px);

src/components/SvgComponents.vue

@@ -25,7 +25,7 @@
     <GGJ :height = height :color= color :width= width v-else-if="type=='GGJSvg'"></GGJ>
     <StandardReactance :height = height :color= color :width= width v-else-if="type=='StandardReactanceSvg'"></StandardReactance>
     <Alternator :height = height :color= color :width= width v-else-if="type=='AlternatorSvg'"></Alternator>
-    <SmartTerminalSvg :height = height :color= color :width= width v-else-if="type=='SmartTerminalSvg'"></SmartTerminalSvg>
+    <!-- <SmartTerminalSvg :height = height :color= color :width= width v-else-if="type=='SmartTerminalSvg'"></SmartTerminalSvg> -->
 </template>
 <script>
 import CircuitBreakerSvg from '@/components/svgCpt/CircuitBreakerSvg.vue';//断路器svg
@@ -53,11 +53,11 @@ import DoubleWindingSvgB from '@/components/svgCpt/DoubleWindingSvgB.vue';//双
 import GGJ from '@/components/svgCpt/GGJ.vue';//电容柜
 import StandardReactance from '@/components/svgCpt/StandardReactance.vue';//标准电抗
 import Alternator from '@/components/svgCpt/Alternator.vue';//发电机
-import SmartTerminalSvg from '@/components/svgCpt/SmartTerminalSvg.vue';//发电站
+// import SmartTerminalSvg from '@/components/svgCpt/SmartTerminalSvg.vue';//发电站
 export default {
     props: ['height','color','width','type','fontSize','tableData','svgText','editable'],
     components: {CircuitBreakerSvg ,VerticalLineSvg,TextSvg,IsolatingSwitchSvg,LightningArresterSvg,StandardCapacitorSvg,WireConnectionSvg,WireBreakOffSvg,TableSvg
   ,HorizontalLineSvg,PolylineUpSvg,PolylineDownSvg,ArrowUpSvg,ArrowDownSvg,GroundGraySvg,SignalLamp,RectSvg,TwoCircleSvg,TransformerY,TransformerTriphaseOpen,DoubleWindingSvg,DoubleWindingSvgB,GGJ
-  ,StandardReactance,Alternator,SmartTerminalSvg},
+  ,StandardReactance,Alternator},
 };
 </script>

src/components/svgCpt/SmartTerminalSvg.vue

@@ -1,9 +1,9 @@
-<!-- 智慧终端svg组件 -->
+// <!-- 智慧终端svg组件 -->
-<template>
+// <template>
-    <image :x="-height/4" :y="-height/2" :width="height/2" :height="height" xlink:href="../../assets/SmartTerminalSvg.png"></image>
+//     <image :x="-height/4" :y="-height/2" :width="height/2" :height="height" xlink:href="../../assets/SmartTerminalSvg.png"></image>
-</template>
+// </template>
-<script>
+// <script>
-export default {
+// export default {
-    props: ['height','color','width'],
+//     props: ['height','color','width'],
-};
+// };
-</script>
+// </script>

src/main.js

@@ -1,4 +1,4 @@
-import { createApp } from 'vue'
+import { createApp } from 'vue/dist/vue.esm-bundler.js'
 import Antd from 'ant-design-vue';
 import App from './App.vue'
 import 'ant-design-vue/dist/antd.css';
@@ -11,4 +11,3 @@ app.use(router);
 app.config.globalProperties.$UCore = UCore;
 app.config.globalProperties.$axios = axios;
 app.use(Antd).mount('#app');
-

src/views/CircuitEdit.vue

@@ -16,6 +16,8 @@
           <LeftToolBar></LeftToolBar>
         </a-layout-sider>
         <a-layout-content class="centerContain" :class="{ fixed: !shrink }">
+          <DynamicTest></DynamicTest>
+          <DynamicTest1></DynamicTest1>
           <div class="canvas-content" id="canvas"  @mousemove="MouseMove"  @mousedown="MousedownCanvas" @mouseup="MouseupCanvas" @dblclick="DblClick" @mousewheel="MouseWheel">
             <!--拖动辅助线-->
             <div id="guide-x"></div>
@@ -46,8 +48,10 @@ 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 DynamicTest from '@/components/DynamicTest.vue';
+import DynamicTest1 from '@/components/DynamicTest1.vue';
 export default {
-  components: { LeftToolBar,RightToolBar,SvgComponents},
+  components: { LeftToolBar,RightToolBar,SvgComponents,DynamicTest,DynamicTest1},
   data(){
     return{
       shrink:true,//收缩状态  true收缩  false展开