删除无用代码
咬轮猫
4 years ago
parent
eec9c89ff6
commit
a9632846cd
@ -1,31 +0,0 @@
|
||||
<template>
|
||||
<component :is="svgtype"
|
||||
:svg_color= svg_color></component>
|
||||
</template>
|
||||
<script>
|
||||
let importComponents = {};
|
||||
export default {
|
||||
props: ['svgInfoData','svg_color','svgtype'],
|
||||
data () {
|
||||
return {
|
||||
componentTag: ''
|
||||
}
|
||||
},
|
||||
components: importComponents,
|
||||
methods: {
|
||||
|
||||
},
|
||||
created () {
|
||||
this.svgInfoData.forEach(f => {
|
||||
console.log(111);
|
||||
let componentInfo = {
|
||||
template: f.template,
|
||||
props: f.props
|
||||
}
|
||||
importComponents[f.type] = componentInfo;
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
</style>
|
||||
@ -1,48 +0,0 @@
|
||||
<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>
|
||||
@ -1,63 +1,31 @@
|
||||
<!-- 箭头向下svg组件 -->
|
||||
<template>
|
||||
<CircuitBreakerSvg :height = height :color= color :width= width v-if="type=='CircuitBreakerSvg'"></CircuitBreakerSvg>
|
||||
<VerticalLineSvg :height = height :color= color :width= width v-else-if="type=='VerticalLineSvg'"></VerticalLineSvg>
|
||||
<TextSvg :fontSize= fontSize :color= color :text= svgText v-else-if="type=='TextSvg'"></TextSvg>
|
||||
<IsolatingSwitchSvg :height = height :color= color :width= width v-else-if="type=='IsolatingSwitchSvg'"></IsolatingSwitchSvg>
|
||||
<LightningArresterSvg :height = height :color= color :width= width v-else-if="type=='LightningArresterSvg'"></LightningArresterSvg>
|
||||
<StandardCapacitorSvg :height = height :color= color :width= width v-else-if="type=='StandardCapacitorSvg'"></StandardCapacitorSvg>
|
||||
<WireConnectionSvg :height = height :color= color :width= width v-else-if="type=='WireConnectionSvg'"></WireConnectionSvg>
|
||||
<WireBreakOffSvg :height = height :color= color :width= width v-else-if="type=='WireBreakOffSvg'"></WireBreakOffSvg>
|
||||
<TableSvg :tableDataList = tableData :editable= editable v-else-if="type=='TableSvg'"></TableSvg>
|
||||
<HorizontalLineSvg :height = height :color= color :width= width v-else-if="type=='HorizontalLineSvg'"></HorizontalLineSvg>
|
||||
<PolylineUpSvg :height = height :color= color :width= width v-else-if="type=='PolylineUpSvg'"></PolylineUpSvg>
|
||||
<PolylineDownSvg :height = height :color= color :width= width v-else-if="type=='PolylineDownSvg'"></PolylineDownSvg>
|
||||
<ArrowUpSvg :height = height :color= color :width= width v-else-if="type=='ArrowUpSvg'"></ArrowUpSvg>
|
||||
<ArrowDownSvg :height = height :color= color :width= width v-else-if="type=='ArrowDownSvg'"></ArrowDownSvg>
|
||||
<GroundGraySvg :height = height :color= color :width= width v-else-if="type=='GroundGraySvg'"></GroundGraySvg>
|
||||
<SignalLamp :height = height :color= color :width= width v-else-if="type=='SignalLamp'"></SignalLamp>
|
||||
<RectSvg :height = height :color= color :width= width v-else-if="type=='RectSvg'"></RectSvg>
|
||||
<TwoCircleSvg :height = height :color= color :width= width v-else-if="type=='TwoCircleSvg'"></TwoCircleSvg>
|
||||
<TransformerY :height = height :color= color :width= width v-else-if="type=='TransformerYSvg'"></TransformerY>
|
||||
<TransformerTriphaseOpen :height = height :color= color :width= width v-else-if="type=='TransformerTriphaseOpenSvg'"></TransformerTriphaseOpen>
|
||||
<DoubleWindingSvg :height = height :color= color :width= width v-else-if="type=='DoubleWindingSvg'"></DoubleWindingSvg>
|
||||
<DoubleWindingSvgB :height = height :color= color :width= width v-else-if="type=='DoubleWindingSvgB'"></DoubleWindingSvgB>
|
||||
<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> -->
|
||||
<component :is="svgtype"
|
||||
:svg_color= svg_color></component>
|
||||
</template>
|
||||
<script>
|
||||
import CircuitBreakerSvg from '@/components/svgCpt/CircuitBreakerSvg.vue';//断路器svg
|
||||
import VerticalLineSvg from '@/components/svgCpt/VerticalLineSvg.vue';//竖线svg
|
||||
import TextSvg from '@/components/svgCpt/TextSvg.vue';//文字svg
|
||||
import IsolatingSwitchSvg from '@/components/svgCpt/IsolatingSwitchSvg.vue';//隔离开关svg
|
||||
import LightningArresterSvg from '@/components/svgCpt/LightningArresterSvg.vue';//避雷器svg
|
||||
import StandardCapacitorSvg from '@/components/svgCpt/StandardCapacitorSvg.vue';//标准电容器svg
|
||||
import WireConnectionSvg from '@/components/svgCpt/WireConnectionSvg.vue';//电线连接svg
|
||||
import WireBreakOffSvg from '@/components/svgCpt/WireBreakOffSvg.vue';//电线断开svg
|
||||
import TableSvg from '@/components/svgCpt/TableSvg.vue';//表格svg
|
||||
import HorizontalLineSvg from '@/components/svgCpt/HorizontalLineSvg.vue';//横线svg
|
||||
import PolylineUpSvg from '@/components/svgCpt/PolylineUpSvg.vue';//多段向上折线
|
||||
import PolylineDownSvg from '@/components/svgCpt/PolylineDownSvg.vue';//多段向下折线
|
||||
import ArrowUpSvg from '@/components/svgCpt/ArrowUpSvg.vue';//箭头向上
|
||||
import ArrowDownSvg from '@/components/svgCpt/ArrowDownSvg.vue';//箭头向下
|
||||
import GroundGraySvg from '@/components/svgCpt/GroundGraySvg.vue';//接地灰白
|
||||
import SignalLamp from '@/components/svgCpt/SignalLamp.vue';//接地灰白
|
||||
import RectSvg from '@/components/svgCpt/RectSvg.vue';//长方形
|
||||
import TwoCircleSvg from '@/components/svgCpt/TwoCircleSvg.vue';//双圆
|
||||
import TransformerY from '@/components/svgCpt/TransformerY.vue';//电流互感器y
|
||||
import TransformerTriphaseOpen from '@/components/svgCpt/TransformerTriphaseOpen.vue';//三相互感器开口
|
||||
import DoubleWindingSvg from '@/components/svgCpt/DoubleWindingSvg.vue';//双绕组变压器
|
||||
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';//发电站
|
||||
let importComponents = {};
|
||||
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},
|
||||
};
|
||||
props: ['svgInfoData','svg_color','svgtype'],
|
||||
data () {
|
||||
return {
|
||||
componentTag: ''
|
||||
}
|
||||
},
|
||||
components: importComponents,
|
||||
methods: {
|
||||
|
||||
},
|
||||
created () {
|
||||
this.svgInfoData.forEach(f => {
|
||||
console.log(111);
|
||||
let componentInfo = {
|
||||
template: f.template,
|
||||
props: f.props
|
||||
}
|
||||
importComponents[f.type] = componentInfo;
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
</style>
|
||||
@ -1,10 +0,0 @@
|
||||
<!-- 发电机类型svg组件 -->
|
||||
<template>
|
||||
<ellipse id="c1" cx="50" cy="50" rx="35" ry="35" fill="none" :stroke="color" :stroke-width="width" :transform="'translate('+(-10*height)+','+(-10*height)+') scale('+height/5+')'"></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="width" :transform="'translate('+(-10*height)+','+(-10*height)+')scale('+height/5+')'"></path>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['height','color','width'],
|
||||
};
|
||||
</script>
|
||||
@ -1,9 +0,0 @@
|
||||
<!-- 箭头向下svg组件 -->
|
||||
<template>
|
||||
<polygon points="0,-8 5,0 10,-8" :fill="color" :stroke="color" :stroke-width="height" :transform="'translate('+(-5)+','+0+')'"></polygon>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['height','color','width'],
|
||||
};
|
||||
</script>
|
||||
@ -1,9 +0,0 @@
|
||||
<!-- 箭头向上svg组件 -->
|
||||
<template>
|
||||
<polygon points="0,8 5,0 10,8" :fill="color" :stroke="color" :stroke-width="height" :transform="'translate('+(-5)+','+0+')'"></polygon>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['height','color','width'],
|
||||
};
|
||||
</script>
|
||||
@ -1,9 +0,0 @@
|
||||
<!-- 充电站svg组件 -->
|
||||
<template>
|
||||
<image :x="-height/4" :y="-height/2" :width="height/2" :height="height" xlink:href="../../assets/ChargingStationSvg.png"></image>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['height','color','width'],
|
||||
};
|
||||
</script>
|
||||
@ -1,9 +0,0 @@
|
||||
<!-- 断路器svg组件 -->
|
||||
<template>
|
||||
<rect :x="-(height/4)" :y="-(height/2)" :width="height/2" :height="height" :fill="color" stroke="#000000" :stroke-width="width" ></rect>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['height','color','width'],
|
||||
};
|
||||
</script>
|
||||
@ -1,15 +0,0 @@
|
||||
<!-- 双绕组变压器svg组件 -->
|
||||
<template>
|
||||
<ellipse cx="0" :cy="-height*4" :rx="height*5" :ry="height*5" fill="none" :stroke="color" :stroke-width="width" ></ellipse>
|
||||
<ellipse cx="0" :cy="height*4" :rx="height*5" :ry="height*5" fill="none" :stroke="color" :stroke-width="width" ></ellipse>
|
||||
<polygon :points="height*2+','+(-(height*6))+' '+0+','+(-height*2)+' '+(-height*2)+','+(-height*6)" fill="none" :stroke="color" :stroke-width="width"></polygon>
|
||||
<line x1="0" :y1="height*4" x2="0" :y2="height*7" fill="none" :stroke="color" :stroke-width="width"></line>
|
||||
<line x1="0" :y1="height*4" :x2="-(height*2)" :y2="height*2" fill="none" :stroke="color" :stroke-width="width"></line>
|
||||
<line x1="0" :y1="height*4" :x2="height*2" :y2="height*2" fill="none" :stroke="color" :stroke-width="width"></line>
|
||||
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['height','color','width'],
|
||||
};
|
||||
</script>
|
||||
@ -1,15 +0,0 @@
|
||||
<!-- 双绕组变压器B类型svg组件 -->
|
||||
<template>
|
||||
<ellipse cx="0" :cy="-height*4" :rx="height*5" :ry="height*5" fill="none" :stroke="color" :stroke-width="width" ></ellipse>
|
||||
<ellipse cx="0" :cy="height*4" :rx="height*5" :ry="height*5" fill="none" :stroke="color" :stroke-width="width" ></ellipse>
|
||||
<polygon :points="height*2+','+height*6+' '+0+','+height*2 +''+(-height*2)+','+height*6" fill="none" :stroke="color" :stroke-width="width" ></polygon>
|
||||
<line x1="0" :y1="-height*4" x2="0" :y2="-height*7" fill="none" :stroke="color" :stroke-width="width" ></line>
|
||||
<line x1="0" :y1="-height*4" :x2="height*2" :y2="-height*2" fill="none" :stroke="color" :stroke-width="width" ></line>
|
||||
<line x1="0" :y1="-height*4" :x2="-height*2" :y2="-height*2" fill="none" :stroke="color" :stroke-width="width" ></line>
|
||||
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['height','color','width'],
|
||||
};
|
||||
</script>
|
||||
@ -1,20 +0,0 @@
|
||||
<!-- 电容柜类型svg组件 -->
|
||||
<template>
|
||||
<line :x1="0.5*height" :y1="-25*height" :x2="-9.5*height" :y2="-13*height" fill="none" :stroke="color" :stroke-width="width" ></line>
|
||||
<line :x1="-0.5*height" :y1="-26*height" :x2="9.5*height" :y2="-13*height" fill="none" :stroke="color" :stroke-width="width" ></line>
|
||||
<line :x1="-12*height" :y1="-17*height" :x2="-6*height" :y2="-8*height" fill="none" :stroke="color" :stroke-width="width"></line>
|
||||
<line :x1="-15*height" :y1="-12*height" :x2="-11*height" :y2="-3*height" fill="none" :stroke="color" :stroke-width="width"></line>
|
||||
<polyline :points="(-13*height)+','+(-8*height)+' '+(-22*height)+','+(3*height)+' '+(-22*height)+','+(5*height)" fill="none" :stroke="color" :stroke-width="width" ></polyline>
|
||||
<line :x1="-21*height" :y1="4*height" :x2="-4*height" :y2="4*height" fill="none" :stroke="color" :stroke-width="width" ></line>
|
||||
<line :x1="-5*height" :y1="-2*height" :x2="-5*height" :y2="11*height" fill="none" :stroke="color" :stroke-width="width" ></line>
|
||||
<line :x1="3*height" :y1="-2*height" :x2="3*height" :y2="11*height" fill="none" :stroke="color" :stroke-width="width" ></line>
|
||||
<line :x1="4*height" :y1="4*height" :x2="21*height" :y2="4*height" fill="none" :stroke="color" :stroke-width="width" ></line>
|
||||
<polyline :points="(13*height)+','+(-8*height)+' '+(22*height)+','+(3*height)+' '+(22*height)+','+(5*height)" fill="none" :stroke="color" :stroke-width="width" ></polyline>
|
||||
<line :x1="14*height" :y1="-12*height" :x2="8*height" :y2="-3*height" fill="none" :stroke="color" :stroke-width="width"></line>
|
||||
<line :x1="12*height" :y1="-17*height" :x2="6*height" :y2="-8*height" fill="none" :stroke="color" :stroke-width="width"></line>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['height','color','width'],
|
||||
};
|
||||
</script>
|
||||
@ -1,12 +0,0 @@
|
||||
<!-- 接地灰白svg组件 -->
|
||||
<template>
|
||||
<line :x1="3*height" :y1="3*height" :x2="3*height" y2="0" fill="none" :stroke="color" :stroke-width="width" :transform="'translate('+(-height*3)+','+(-height*2)+')'"></line>
|
||||
<line x1="0" :y1="3*height" :x2="6*height" :y2="3*height" fill="none" :stroke="color" :stroke-width="width" :transform="'translate('+(-height*3)+','+(-height*2)+')'"></line>
|
||||
<line :x1="height" :y1="5*height" :x2="5*height" :y2="5*height" fill="none" :stroke="color" :stroke-width="width" :transform="'translate('+(-height*3)+','+(-height*2)+')'"></line>
|
||||
<line :x1="2*height" :y1="7*height" :x2="4*height" :y2="7*height" fill="none" :stroke="color" :stroke-width="width" :transform="'translate('+(-height*3)+','+(-height*2)+')'"></line>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['height','color','width'],
|
||||
};
|
||||
</script>
|
||||
@ -1,9 +0,0 @@
|
||||
<!-- 横线svg组件 -->
|
||||
<template>
|
||||
<line :x1="-height/2" :y1="0" :x2="(height)-height/2" :y2="0" fill="none" :stroke="color" :stroke-width="width"></line>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['height','color','width'],
|
||||
};
|
||||
</script>
|
||||
@ -1,12 +0,0 @@
|
||||
<!-- 隔离开关svg组件 -->
|
||||
<template>
|
||||
<line :x1="0" :y1="0-(height)" :x2="0" :y2="0" fill="none" :stroke="color" :stroke-width="width" ></line>
|
||||
<line :x1="0-(height/2)" :y1="0" :x2="height/3" :y2="0" fill="none" :stroke="color" :stroke-width="width" ></line>
|
||||
<line :x1="0" :y1="height" :x2="-(height/2)" :y2="height/4" fill="none" :stroke="color" :stroke-width="width"></line>
|
||||
<line :x1="0" :y1="height*2" :x2="0" :y2="height" fill="none" :stroke="color" :stroke-width="width" ></line>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['height','color','width'],
|
||||
};
|
||||
</script>
|
||||
@ -1,12 +0,0 @@
|
||||
<!-- 避雷器svg组件 -->
|
||||
<template>
|
||||
<rect :x="-height" :y="-(height*2)" :width="(height*2+1)" :height="height*5" fill="none" :stroke="color" :stroke-width="width" />
|
||||
<line :x1="0" :y1="-(height*3)" :x2="0" :y2="0" fill="none" :stroke="color" :stroke-width="width" />
|
||||
<line :x1="0" :y1="(height*3)" :x2="0" :y2="(4*height)" fill="none" :stroke="color" :stroke-width="width" />
|
||||
<polyline :points="(-1)+','+(-7)+' '+(0)+','+(0)+' '+(1)+','+(-7)" fill="none" :stroke="color" :stroke-width="width"/>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['height','color','width'],
|
||||
};
|
||||
</script>
|
||||
@ -1,10 +0,0 @@
|
||||
<!-- 多段线向下svg组件 -->
|
||||
<template>
|
||||
<polyline :points="'0,'+height+' '+(2*height-1)+','+(3*height+1)+' '+(4*height-2)+','+height" fill="none" :stroke="color" :stroke-width="width" :transform="'translate('+(-(2*height-1))+','+0+')'" ></polyline>
|
||||
<polyline :points="'0,'+height+' '+(2*height-1)+','+(3*height+1)+' '+(4*height-2)+','+height" fill="none" :stroke="color" :stroke-width="width" :transform="'translate('+(-(2*height-1))+','+(height+1)+')'" ></polyline>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['height','color','width'],
|
||||
};
|
||||
</script>
|
||||
@ -1,10 +0,0 @@
|
||||
<!-- 多段线向上svg组件 -->
|
||||
<template>
|
||||
<polyline :points="'0,'+height+' '+(2*height-1)+','+(-height)+' '+(4*height-2)+','+height" fill="none" :stroke="color" :stroke-width="width" :transform ="'translate('+(-(2*height-1))+','+0+')'"></polyline>
|
||||
<polyline :points="'0,'+height+' '+(2*height-1)+','+(-height)+' '+(4*height-2)+','+height" fill="none" :stroke="color" :stroke-width="width" :transform="'translate('+(-(2*height-1))+','+(height+1)+')'"></polyline>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['height','color','width'],
|
||||
};
|
||||
</script>
|
||||
@ -1,9 +0,0 @@
|
||||
<!-- 长方形svg组件 -->
|
||||
<template>
|
||||
<rect :x="-(height/6)" :y="-(height/2)" :width="height/3" :height="height" fill="none" :stroke="color" :stroke-width="width" stroke-linecap="round"></rect>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['height','color','width'],
|
||||
};
|
||||
</script>
|
||||
@ -1,11 +0,0 @@
|
||||
<!-- 信号灯svg组件 -->
|
||||
<template>
|
||||
<ellipse :cx="2*height+1" :cy="7*height+1" :rx="4*height" :ry="4*height" fill="none" :stroke="color" :stroke-width="width" :transform="'translate('+(-(2*height+1))+','+(-(7*height+1))+')'" ></ellipse>
|
||||
<line :x1="(-height+3)" :y1="10*height" :x2="5*height" :y2="5*height" fill="none" :stroke="color" :stroke-width="width" :transform="'translate('+(-(2*height+1))+','+(-(7*height+1))+')'" ></line>
|
||||
<line :x1="5*height" :y1="10*height" :x2="(-height+3)" :y2="5*height" fill="none" :stroke="color" :stroke-width="width" :transform="'translate('+(-(2*height+1))+','+(-(7*height+1))+')'"></line>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['height','color','width'],
|
||||
};
|
||||
</script>
|
||||
@ -1,9 +0,0 @@
|
||||
// <!-- 智慧终端svg组件 -->
|
||||
// <template>
|
||||
// <image :x="-height/4" :y="-height/2" :width="height/2" :height="height" xlink:href="../../assets/SmartTerminalSvg.png"></image>
|
||||
// </template>
|
||||
// <script>
|
||||
// export default {
|
||||
// props: ['height','color','width'],
|
||||
// };
|
||||
// </script>
|
||||
@ -1,12 +0,0 @@
|
||||
<!-- 标准电容器svg组件 -->
|
||||
<template>
|
||||
<line :x1="0" :y1="-(height*4)" :x2="0" :y2="-height" fill="none" :stroke="color" :stroke-width="width" />
|
||||
<line :x1="-(height*3)" :y1="-height" :x2="height*3" :y2="-height" fill="none" :stroke="color" :stroke-width="width" />
|
||||
<line :x1="-(height*3)" :y1="height" :x2="height*3" :y2="height" fill="none" :stroke="color" :stroke-width="width" />
|
||||
<line :x1="0" :y1="(height*4)" :x2="0" :y2="height" fill="none" :stroke="color" :stroke-width="width" />
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['height','color','width'],
|
||||
};
|
||||
</script>
|
||||
@ -1,9 +0,0 @@
|
||||
<!-- 标准电抗类型svg组件 -->
|
||||
<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="color" :stroke-width="width" :transform="'translate('+(-6*height)+','+(-12*height)+') scale('+height/3+')'"></path>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['height','color','width'],
|
||||
};
|
||||
</script>
|
||||
@ -1,86 +0,0 @@
|
||||
<!-- 表格svg组件 -->
|
||||
<template>
|
||||
<foreignObject :x="0" :y="0">
|
||||
<div id="divtable" class="svgfont" :style="editable?'':'display:none'"></div>
|
||||
<table border="0" cellpadding="0" cellspacing="0" style="pointer-events: none">
|
||||
<tr v-for="(tableDataRowItem,index) in tableDataList" :key="index" >
|
||||
<td v-for="(tableDataColItem) in tableDataRowItem.cols " :key="tableDataColItem.id" class="tdsvg">
|
||||
<div class="add-tag">
|
||||
<span>{{ tableDataColItem.val }}</span>
|
||||
<a-input :disabled="!editable" v-model:value="tableDataColItem.val" class="ainput" size="small"/>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</foreignObject>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['tableDataList','x','y','editable'],
|
||||
methods:{
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
foreignObject{
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
// position:absolute;
|
||||
overflow: visible;
|
||||
cursor: pointer;
|
||||
}
|
||||
.add-tag {
|
||||
color: #333;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
padding: 0 32px;
|
||||
}
|
||||
|
||||
.ainput {
|
||||
pointer-events: auto;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
caret-color: #426BF2;
|
||||
::-webkit-input-placeholder {
|
||||
color: #aaa;
|
||||
}
|
||||
border-style: none;
|
||||
padding: 0 32px;
|
||||
color: rgb(255, 255, 0);
|
||||
background-color: black;
|
||||
}
|
||||
}
|
||||
foreignObject #divtable{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
line-height: 20px;
|
||||
z-index: 111;
|
||||
color: #fff;
|
||||
// pointer-events: auto;
|
||||
display: none;
|
||||
cursor: pointer;
|
||||
font-size: 20px;
|
||||
}
|
||||
foreignObject:hover #divtable {
|
||||
pointer-events: none;
|
||||
display:block;
|
||||
}
|
||||
.tdsvg{
|
||||
border:1px solid rgb(255, 255, 0);
|
||||
white-space:nowrap;
|
||||
background:#fff;
|
||||
color:#999;
|
||||
text-align:center;
|
||||
font-size:16px;
|
||||
background-color: lawngreen;
|
||||
}
|
||||
</style>
|
||||
@ -1,10 +0,0 @@
|
||||
|
||||
<!-- 文字svg组件 -->
|
||||
<template>
|
||||
<text :x="0-(fontSize*text.length/2)" :y="fontSize/2" :font-size="fontSize" :fill="color">{{text}}</text>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['fontSize','color','text'],
|
||||
};
|
||||
</script>
|
||||
@ -1,12 +0,0 @@
|
||||
<!-- 电流互感器三相开口 svg组件 -->
|
||||
<template>
|
||||
<ellipse cx="0" cy="0" :rx="height*5" :ry="height*5" fill="none" :stroke="color" :stroke-width="width" ></ellipse>
|
||||
<line :x1="-height" :y1="-height*3" :x2="-height" :y2="height*3" fill="none" :stroke="color" :stroke-width="width"></line>
|
||||
<line :x1="-height" :y1="-height*3" :x2="height*2" y2="0" fill="none" :stroke="color" :stroke-width="width"></line>
|
||||
<line :x1="height*2" :y1="height" :x2="-height" :y2="height*3" fill="none" :stroke="color" :stroke-width="width"></line>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['height','color','width'],
|
||||
};
|
||||
</script>
|
||||
@ -1,12 +0,0 @@
|
||||
<!-- 电流互感器y svg组件 -->
|
||||
<template>
|
||||
<ellipse cx="0" cy="0" :rx="height*2" :ry="height*2" fill="none" :stroke="color" :stroke-width="width" ></ellipse>
|
||||
<line :x1="height" :y1="-height" x2="0" y2="0" fill="none" :stroke="color" :stroke-width="width" ></line>
|
||||
<line :x1="-height" :y1="-height" x2="0" y2="0" fill="none" :stroke="color" :stroke-width="width" ></line>
|
||||
<line x1="0" y1="0" x2="0" :y2="height" fill="none" :stroke="color" :stroke-width="width" ></line>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['height','color','width'],
|
||||
};
|
||||
</script>
|
||||
@ -1,10 +0,0 @@
|
||||
<!-- 双圆svg组件 -->
|
||||
<template>
|
||||
<ellipse cx="0" :cy="-height-(height/2)" :rx="height*2" :ry="height*2" fill="none" :stroke="color" :stroke-width="width"></ellipse>
|
||||
<ellipse cx="0" :cy="height+height/2" :rx="height*2" :ry="height*2" fill="none" :stroke="color" :stroke-width="width"></ellipse>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['height','color','width'],
|
||||
};
|
||||
</script>
|
||||
@ -1,9 +0,0 @@
|
||||
<!-- 竖线svg组件 -->
|
||||
<template>
|
||||
<line x1="0" :y1="0-height/2" x2="0" :y2="(0+height)-height/2" fill="none" :stroke="color" :stroke-width="width" />
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['height','color','width'],
|
||||
};
|
||||
</script>
|
||||
@ -1,11 +0,0 @@
|
||||
<!-- 电线断开svg组件 -->
|
||||
<template>
|
||||
<line :x1="0" :y1="-(height*8)" :x2="0" :y2="-(3*height)" fill="none" stroke="#00ff00" :stroke-width="width"></line>
|
||||
<line :x1="0" :y1="3*height" :x2="-(2*height)" :y2="-(3*height)" fill="none" stroke="#00ff00" :stroke-width="width"></line>
|
||||
<line :x1="0" :y1="9*height" :x2="0" :y2="3*height" fill="none" stroke="#00ff00" :stroke-width="width"></line>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['height','color','width'],
|
||||
};
|
||||
</script>
|
||||
@ -1,11 +0,0 @@
|
||||
<!-- 电线连接svg组件 -->
|
||||
<template>
|
||||
<line :x1="0" :y1="-(height*8)" :x2="0" :y2="-(3*height)" fill="none" :stroke="color" :stroke-width="width"></line>
|
||||
<line :x1="0" :y1="height*3" :x2="0" :y2="-(3*height)" fill="none" :stroke="color" :stroke-width="width"></line>
|
||||
<line :x1="0" :y1="height*9" :x2="0" :y2="3*height" fill="none" :stroke="color" :stroke-width="width"></line>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['height','color','width'],
|
||||
};
|
||||
</script>
|
||||
File diff suppressed because one or more lines are too long
@ -1,104 +1,129 @@
|
||||
<template>
|
||||
<div style="overflow:auto;position: relative;">
|
||||
<div class="svg-contain">
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="background-color:#000000" viewBox="0 0 1920 1080" width="100%" height="100%">
|
||||
<defs/>
|
||||
<g v-for="item in svgLists" :key="item" :id= item.id :title=item.title :transform="'translate('+(item.svgPositionX)+','+(item.svgPositionY)+')' +'rotate('+item.angle+')'" >
|
||||
<SvgComponents :height = item.height :color= item.svgColor :width= item.width :type= item.type :tableData= item.tableData :fontSize= item.fontSize :svgText= item.svgText :editable= editable></SvgComponents>
|
||||
<svg version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
style="background-color:#000000"
|
||||
viewBox="0 0 1920 1080"
|
||||
width="100%"
|
||||
height="100%">
|
||||
<defs />
|
||||
<g v-for="item in svgLists"
|
||||
:key="item"
|
||||
:id=item.id
|
||||
:title=item.title
|
||||
:transform="'translate('+(item.svgPositionX)+','+(item.svgPositionY)+')' +'rotate('+item.angle+')'">
|
||||
<SvgComponents :svg_color=item.svgColor
|
||||
:svgtype=item.type
|
||||
:svgInfoData=svgInfoData></SvgComponents>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="btns-content">
|
||||
<a-button type="primary" @click="testF">模拟硬件</a-button>
|
||||
<a-button type="primary" @click="testG">取消模拟硬件</a-button>
|
||||
</div>
|
||||
<!-- <div class="btns-content">
|
||||
<a-button type="primary"
|
||||
@click="testF">模拟硬件</a-button>
|
||||
<a-button type="primary"
|
||||
@click="testG">取消模拟硬件</a-button>
|
||||
</div> -->
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import SvgComponents from '@/components/SvgComponents.vue';
|
||||
export default {
|
||||
components: {SvgComponents},
|
||||
data(){
|
||||
return{
|
||||
svgLists:[],
|
||||
analogDataTimer:'',//模拟数据定时器
|
||||
userInfo:'',
|
||||
editable:false
|
||||
}},
|
||||
methods:{
|
||||
testF(){
|
||||
components: { SvgComponents },
|
||||
data () {
|
||||
return {
|
||||
svgLists: [],
|
||||
svgInfoData:[],
|
||||
analogDataTimer: '',//模拟数据定时器
|
||||
userInfo: '',
|
||||
editable: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
testF () {
|
||||
//找出所有断路器
|
||||
let anyCircuitBreakerList=this.svgLists.filter(f=>f.type=='CircuitBreakerSvg');
|
||||
let anyCircuitBreakerList = this.svgLists.filter(f => f.type == 'CircuitBreakerSvg');
|
||||
//找出所有的电线开关
|
||||
let anyWireBreakList=this.svgLists.filter(f=>f.type=='WireConnectionSvg'||f.type=='WireBreakOffSvg');
|
||||
let anyWireBreakList = this.svgLists.filter(f => f.type == 'WireConnectionSvg' || f.type == 'WireBreakOffSvg');
|
||||
//查找所有表格值
|
||||
let anyTable=this.svgLists.filter(f=>f.type=='TableSvg')[0];
|
||||
let anyTable = this.svgLists.filter(f => f.type == 'TableSvg')[0];
|
||||
let anyTableList;
|
||||
if(anyTable=='undefined'||anyTable==null){
|
||||
anyTableList=[];
|
||||
if (anyTable == 'undefined' || anyTable == null) {
|
||||
anyTableList = [];
|
||||
}
|
||||
else{
|
||||
anyTableList=anyTable.tableData.map(m=>m.cols);
|
||||
else {
|
||||
anyTableList = anyTable.tableData.map(m => m.cols);
|
||||
}
|
||||
this.analogDataTimer= setInterval(function() {
|
||||
anyCircuitBreakerList.forEach(anyCircuitBreaker=>{
|
||||
this.analogDataTimer = setInterval(function () {
|
||||
anyCircuitBreakerList.forEach(anyCircuitBreaker => {
|
||||
//生成一个随机数
|
||||
let random=Math.round(Math.random()*10);
|
||||
if(random<5){
|
||||
anyCircuitBreaker.svgColor='#00FF00';
|
||||
let random = Math.round(Math.random() * 10);
|
||||
if (random < 5) {
|
||||
anyCircuitBreaker.svgColor = '#00FF00';
|
||||
}
|
||||
else{
|
||||
anyCircuitBreaker.svgColor='#FF0000';
|
||||
else {
|
||||
anyCircuitBreaker.svgColor = '#FF0000';
|
||||
}
|
||||
});
|
||||
anyWireBreakList.forEach(anyWireBreak=>{
|
||||
anyWireBreakList.forEach(anyWireBreak => {
|
||||
//生成一个随机数
|
||||
let random=Math.round(Math.random()*10);
|
||||
if(random<5){
|
||||
anyWireBreak.type='WireConnectionSvg';
|
||||
anyWireBreak.svgColor="#FF0000"
|
||||
let random = Math.round(Math.random() * 10);
|
||||
if (random < 5) {
|
||||
anyWireBreak.type = 'WireConnectionSvg';
|
||||
anyWireBreak.svgColor = "#FF0000"
|
||||
}
|
||||
else{
|
||||
anyWireBreak.type='WireBreakOffSvg';
|
||||
else {
|
||||
anyWireBreak.type = 'WireBreakOffSvg';
|
||||
}
|
||||
});
|
||||
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'){
|
||||
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;
|
||||
let random = Math.round(Math.random() * 100);
|
||||
anyTable.val = random;
|
||||
}
|
||||
});
|
||||
});
|
||||
},2000)
|
||||
}, 2000)
|
||||
|
||||
},
|
||||
testG(){
|
||||
testG () {
|
||||
clearInterval(this.analogDataTimer);
|
||||
},
|
||||
},
|
||||
created(){
|
||||
let _this=this;
|
||||
_this.svgLists=JSON.parse(localStorage.getItem('svginfo'));
|
||||
created () {
|
||||
let _this = this;
|
||||
_this.svgLists = JSON.parse(localStorage.getItem('svginfo'));
|
||||
//请求接口获取组件
|
||||
this.$axios.get('/InterfaceReturn.json')
|
||||
.then(function (response) {
|
||||
_this.svgInfoData = response.data;
|
||||
console.log(response.data);
|
||||
})
|
||||
.catch(function (error) {
|
||||
console.log(error);
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.svg-contain{
|
||||
.svg-contain {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
.btns-content{
|
||||
.btns-content {
|
||||
position: fixed;
|
||||
left: 10px;
|
||||
bottom: 10px;
|
||||
button{
|
||||
button {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue