149 lines
10 KiB
Vue
149 lines
10 KiB
Vue
<template>
|
|
<view v-html="svgHtml" class="svg-container"></view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
// 父组件传递的参数
|
|
name: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
},
|
|
data() {
|
|
return {}
|
|
},
|
|
computed: {
|
|
svgHtml() {
|
|
if (this.name == '电压暂降') {
|
|
return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
|
|
<path d="M8,50 L15,50 L18,38 L21,28 L24,38 L27,50 L30,62 L33,72 L36,62 L39,50 L42,38 L45,28 L48,38 L51,50 L54,56 L56,54 L58,55 L60,54 L63,56 L66,60 L68,62 L70,60 L72,56 L75,54 L77,52 L79,54 L81,56 L84,50 L87,38 L90,28 L93,38 L96,50" fill="none" stroke="#2563eb" stroke-width="4"/>
|
|
</svg>`
|
|
} else if (this.name == '电压暂升') {
|
|
return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
|
|
<path d="M8,50 L15,50 L18,38 L21,28 L24,38 L27,50 L30,62 L33,72 L36,62 L39,50 L42,38 L45,28 L48,38 L51,50 L54,43 L56,34 L58,26 L60,34 L63,43 L66,54 L68,60 L70,54 L72,43 L75,34 L77,26 L79,34 L81,43 L84,50 L87,38 L90,28 L93,38 L96,50" fill="none" stroke="#e6a23c" stroke-width="4"/>
|
|
</svg>`
|
|
} else if (this.name == '电压中断') {
|
|
return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
|
|
<path d="M8,50 L15,50 L18,38 L21,28 L24,38 L27,50 L30,62 L33,72 L36,62 L39,50 L42,38 L45,28 L48,38 L51,50 L54,50 L57,50 L60,50 L63,50 L66,50 L69,50 L72,50 L75,50 L78,50 L81,50 L84,50 L87,38 L90,28 L93,38 L96,50" fill="none" stroke="#6b7280" stroke-width="4"/>
|
|
</svg>`
|
|
} else if (this.name == '瞬态') {
|
|
return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
|
|
<path d="M8,50 L15,50 L18,38 L21,28 L24,38 L27,50 L30,62 L33,72 L36,62 L39,50 L42,38 L45,28 L48,38 L51,50 L53,50 L55,50 L57,20 L59,50 L61,50 L63,50 L66,60 L68,62 L70,60 L72,56 L75,54 L77,52 L79,54 L81,56 L84,50 L87,38 L90,28 L93,38 L96,50" fill="none" stroke="#8b5cf6" stroke-width="4"/>
|
|
|
|
</svg>`
|
|
} else if (this.name == '未知') {
|
|
return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
|
|
<path d="M8,50 L15,50 L18,38 L21,28 L24,38 L27,50 L30,62 L33,72 L36,62 L39,50 L42,38 L45,28 L48,38 L51,50 L54,56 L56,54 L58,55 L60,54 L63,56 L66,60 L68,62 L70,60 L72,56 L75,54 L77,52 L79,54 L81,56 L84,50 L87,38 L90,28 L93,38 L96,50" fill="none" stroke="#6b7280" stroke-width="4"/>
|
|
<text x="50" y="82" text-anchor="middle" font-size="18" fill="#6b7280" font-family="Arial, sans-serif" font-weight="bold">?</text>
|
|
</svg>`
|
|
} else if (this.name == '稳态越限') {
|
|
return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
|
|
<!-- Limit line -->
|
|
<line x1="5" y1="40" x2="95" y2="40" stroke="#e6a23c" stroke-width="2" stroke-dasharray="4,4"/>
|
|
|
|
<polyline points="
|
|
5,65 12,65 15,59 18,53 21,59 24,65
|
|
27,71 30,77 33,71 36,65
|
|
39,59 42,53 45,59 48,65
|
|
" fill="none" stroke="#376cf3" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
|
|
|
|
<polyline points="
|
|
51,40 54,20 57,40
|
|
" fill="none" stroke="#e6a23c" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
|
|
|
|
<polyline points="
|
|
60,65 63,71 66,77 69,71 72,65
|
|
75,59 78,53 81,59 84,65
|
|
87,71 90,77 93,71 95,65
|
|
" fill="none" stroke="#376cf3" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
|
|
|
|
<line x1="48" y1="65" x2="51" y2="40" stroke="#376cf3" stroke-width="4" stroke-linecap="round"/>
|
|
<line x1="57" y1="40" x2="60" y2="65" stroke="#376cf3" stroke-width="4" stroke-linecap="round"/>
|
|
|
|
<circle cx="54" cy="18" r="2" fill="#e6a23c"/>
|
|
|
|
<defs>
|
|
<marker id="arrowRed" markerWidth="6" markerHeight="5" refX="5" refY="2.5" orient="auto">
|
|
<polygon points="0,0 6,2.5 0,5" fill="#e6a23c"/>
|
|
</marker>
|
|
</defs>
|
|
</svg>`
|
|
} else if (this.name == '运行告警') {
|
|
return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="40" height="40">
|
|
<path d="M78.43 4H20.06C9.48 4 1.16 12.33 1.16 22.9v38.37c0 10.57 8.32 18.9 18.9 18.9h26.49v7.27H25.77v7.41h47.96v-7.41H53.96v-7.27h26.47c10.58 0 18.9-8.33 18.9-18.9V22.9c0-10.57-8.32-18.9-18.9-18.9z m11.49 57.27c0 6.33-5.14 11.49-11.49 11.49H20.06c-6.34 0-11.49-5.15-11.49-11.49V22.9c0-6.33 5.14-11.49 11.49-11.49h59.37c6.34 0 11.49 5.15 11.49 11.49v38.37z" fill="#007aff"/>
|
|
<line x1="50" y1="28" x2="50" y2="50" stroke="#007aff" stroke-width="6" stroke-linecap="round"/>
|
|
<circle cx="50" cy="62" r="4" fill="#007aff"/>
|
|
</svg>`
|
|
} else if (this.name == '治理设备') {
|
|
return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="38" height="38">
|
|
<rect x="0" y="0" width="100" height="100" rx="8" ry="8" fill="#007aff30" stroke="#007aff" stroke-width="2"/>
|
|
<rect x="8" y="8" width="84" height="84" rx="4" ry="4" fill="#FFFFFF" stroke="#007aff" stroke-width="1.5"/>
|
|
<rect x="10" y="12" width="80" height="16" rx="2" ry="2" fill="#007aff30" stroke="#CCC" stroke-width="0.8"/>
|
|
<text x="50" y="24" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="#007aff" text-anchor="middle">治理设备</text>
|
|
<polyline points="14,45 22,51 30,49 38,57 46,55 54,63 62,61 70,67 78,65 86,69"
|
|
fill="none" stroke="#007aff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<polygon points="14,45 22,51 30,49 38,57 46,55 54,63 62,61 70,67 78,65 86,69 86,80 14,80"
|
|
fill="#007aff15"/>
|
|
|
|
<circle cx="14" cy="45" r="2" fill="#007aff"/>
|
|
<circle cx="30" cy="49" r="2" fill="#007aff"/>
|
|
<circle cx="46" cy="55" r="2" fill="#007aff"/>
|
|
<circle cx="62" cy="61" r="2" fill="#007aff"/>
|
|
<circle cx="78" cy="65" r="2" fill="#007aff"/>
|
|
<circle cx="86" cy="69" r="2" fill="#007aff"/>
|
|
<polygon points="88,65 86,70 84,65" fill="#007aff" opacity="0.7"/>
|
|
</svg>`
|
|
} else if (this.name == '监测设备') {
|
|
return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="38" height="38">
|
|
<style>
|
|
text { font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif; }
|
|
</style>
|
|
|
|
<rect x="0" y="0" width="100" height="100" rx="6" ry="6" fill="#007aff30" stroke="#007aff" stroke-width="2"/>
|
|
|
|
<rect x="8" y="8" width="84" height="84" rx="3" ry="3" fill="#FFFFFF" stroke="#007aff" stroke-width="1.5"/>
|
|
|
|
<rect x="10" y="12" width="80" height="16" rx="2" ry="2" fill="#007aff30" stroke="#CCC" stroke-width="0.8"/>
|
|
<text x="50" y="24" font-size="14" font-weight="bold" fill="#007aff" text-anchor="middle">监测设备</text>
|
|
|
|
<text x="16" y="45" font-size="7" fill="#007aff">Ua: 220.5V</text>
|
|
<text x="16" y="55" font-size="7" fill="#007aff">Ub: 219.8V</text>
|
|
<text x="16" y="65" font-size="7" fill="#007aff">Uc: 220.1V</text>
|
|
|
|
<line x1="48" y1="38" x2="48" y2="78" stroke="#CCC" stroke-width="0.8" stroke-dasharray="2,2"/>
|
|
|
|
<text x="54" y="45" font-size="7" fill="#007aff">Ia: 125.3A</text>
|
|
<text x="54" y="55" font-size="7" fill="#007aff">Ib: 124.7A</text>
|
|
<text x="54" y="65" font-size="7" fill="#007aff">Ic: 125.1A</text>
|
|
|
|
</svg>`
|
|
} else if (this.name == '报告') {
|
|
return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="47" height="47">
|
|
<path d="M12,12 L78,12 L88,22 L88,88 L12,88 Z" fill="none" stroke="#007aff" stroke-width="4" stroke-linejoin="round"/>
|
|
<path d="M78,12 L78,22 L88,22" fill="none" stroke="#007aff" stroke-width="4" stroke-linejoin="round"/>
|
|
<polyline points="20,50 26,50 28,46 30,42 32,46 34,50 36,54 38,58 40,54 42,50 44,46 46,42 48,46 50,50 56,50" fill="none" stroke="#007aff" stroke-width="4" stroke-linecap="round"/>
|
|
<line x1="20" y1="68" x2="52" y2="68" stroke="#007aff" stroke-width="4" opacity="0.4" stroke-linecap="round"/>
|
|
<line x1="20" y1="76" x2="42" y2="76" stroke="#007aff" stroke-width="4" opacity="0.4" stroke-linecap="round"/>
|
|
<circle cx="70" cy="68" r="9" fill="none" stroke="#007aff" stroke-width="4"/>
|
|
<line x1="76" y1="74" x2="86" y2="84" stroke="#007aff" stroke-width="4" stroke-linecap="round"/>
|
|
</svg>`
|
|
} else if (this.name == '监测点') {
|
|
return `<svg t="1779762122379" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3577" width="38" height="38"><path d="M875.17148 230.296136c30.706152 56.294611 46.059227 122.824606 46.059227 194.472293 0 107.47153-40.941535 209.825369-107.47153 286.590748 0 0 0 5.117692-5.117692 5.117692l-261.002288 286.590748c0 5.117692-5.117692 10.235384-5.117692 10.235383-15.353076 10.235384-30.706152 15.353076-46.059227 5.117692-5.117692 0-10.235384-5.117692-15.353076-10.235384v-5.117691L209.87153 716.476869s-5.117692-5.117692-5.117692-10.235384c-66.529995-76.765379-102.353838-174.001525-102.353838-281.473056C102.4 189.354601 286.636909 0 511.815354 0c81.883071 0 153.530758 25.58846 220.060752 66.529995 5.117692 0 5.117692 5.117692 10.235384 5.117692h5.117692c46.059227 35.823843 81.883071 81.883071 112.589222 133.05999 10.235384 5.117692 15.353076 15.353076 15.353076 25.588459z m-163.766141-92.118454c-5.117692 0-10.235384-5.117692-15.353076-10.235384-51.176919-35.823843-112.589222-56.294611-179.119217-56.294611-189.354601 0-337.767667 158.64845-337.767667 353.120742 0 92.118455 30.706152 174.001525 87.000762 235.413829l20.470768 20.470767 20.470768 20.470768 143.295374 153.530758L511.815354 931.41993l71.647687-76.765379 143.295373-153.530758 5.117692-5.117692 35.823844-40.941535c0-5.117692 5.117692-5.117692 10.235384-5.117692 51.176919-61.412303 81.883071-143.295374 81.88307-230.296136-5.117692-112.589222-66.529995-214.943061-148.413065-281.473056z m-199.589985 460.592273c-92.118455 0-163.766141-76.765379-163.766142-174.001526C348.049212 332.649975 419.696899 255.884596 511.815354 255.884596c92.118455 0 163.766141 76.765379 163.766141 174.001525 0 92.118455-71.647687 168.883833-163.766141 168.883834z m0-271.237672c-51.176919 0-97.236146 46.059227-97.236147 102.353838s46.059227 102.353838 97.236147 102.353839c51.176919 0 97.236146-46.059227 97.236146-102.353839s-46.059227-102.353838-97.236146-102.353838z" fill="#007aff" p-id="3578"></path></svg>`
|
|
}
|
|
},
|
|
},
|
|
methods: {},
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.svg-container {
|
|
width: 100rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
</style>
|