131 lines
5.5 KiB
Vue
131 lines
5.5 KiB
Vue
<template>
|
|
<view v-html="svgHtml" class="svg-container"></view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
// 父组件传递的参数
|
|
devType: {
|
|
type: String,
|
|
default: 'Direct_Connected_Device',
|
|
},
|
|
runStatus: {
|
|
type: [String, Number],
|
|
},
|
|
alarmStatus: {
|
|
type: [String, Number],
|
|
},
|
|
|
|
},
|
|
data() {
|
|
return {
|
|
// 动态颜色
|
|
powerColor: '#10b981',
|
|
// alarmStatus==1?'#f59e0b':'#10b981': '#f59e0b', //告警
|
|
// commColor: '#10B981', //在线离线
|
|
// 动态数据
|
|
}
|
|
},
|
|
computed: {
|
|
svgHtml() {
|
|
if (this.devType == 'Direct_Connected_Device') {
|
|
return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
|
|
<!-- 设备主体 - 治理设备主题色（绿色） -->
|
|
<rect x="2" y="2" width="96" height="96" rx="6" ry="6" fill="#007aff30" stroke="#007aff" stroke-width="2"/>
|
|
|
|
<!-- 屏幕区域 -->
|
|
<rect x="6" y="6" width="88" height="52" rx="3" ry="3" fill="#FFFFFF" stroke="#007aff" stroke-width="1.5"/>
|
|
|
|
<!-- 屏幕标题栏 - 调整高度以容纳14px文字 -->
|
|
<rect x="10" y="9" width="80" height="14" rx="2" ry="2" fill="#007aff30" stroke="#CCC" stroke-width="0.8"/>
|
|
<text x="50" y="20" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="#007aff" text-anchor="middle">治理设备</text>
|
|
|
|
<!-- 下降趋势折线（从高到低，拉满宽度） -->
|
|
<polyline points="14,28 22,34 30,32 38,40 46,38 54,46 62,44 70,50 78,48 86,52"
|
|
fill="none" stroke="#007aff" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
|
|
|
|
<!-- 趋势填充区域（完全覆盖屏幕下方） -->
|
|
<polygon points="14,28 22,34 30,32 38,40 46,38 54,46 62,44 70,50 78,48 86,52 86,54 14,54"
|
|
fill="#007aff15"/>
|
|
|
|
<!-- 数据节点圆点（增强数据感） -->
|
|
<circle cx="14" cy="28" r="1.5" fill="#007aff"/>
|
|
<circle cx="30" cy="32" r="1.5" fill="#007aff"/>
|
|
<circle cx="46" cy="38" r="1.5" fill="#007aff"/>
|
|
<circle cx="62" cy="44" r="1.5" fill="#007aff"/>
|
|
<circle cx="78" cy="48" r="1.5" fill="#007aff"/>
|
|
<circle cx="86" cy="52" r="1.5" fill="#007aff"/>
|
|
|
|
<!-- 下降箭头（增强趋势指向） -->
|
|
<polygon points="88,48 86,52 84,48" fill="#007aff" opacity="0.7"/>
|
|
|
|
<!-- 指示灯区域分隔线 -->
|
|
<line x1="6" y1="62" x2="94" y2="62" stroke="#999" stroke-width="1" stroke-dasharray="2,2"/>
|
|
|
|
<!-- 告警指示灯 -->
|
|
<circle cx="28" cy="70" r="6" fill="${this.alarmStatus==1?'#f59e0b':'#10b981'}" stroke="${this.alarmStatus==1?'#f59e0b':'#10b981'}" stroke-width="1"/>
|
|
<text x="28" y="92" font-family="Arial, sans-serif" font-size="13" font-weight="bold" fill="#007aff" text-anchor="middle">告警</text>
|
|
|
|
<!-- 通讯指示灯 -->
|
|
<circle cx="70" cy="70" r="6" fill="${this.runStatus == 1 ? '#ff3b30' : '#10b981'}" stroke="${this.runStatus == 1 ? '#ff3b30' : '#10b981'}" stroke-width="1"/>
|
|
<text x="70" y="92" font-family="Arial, sans-serif" font-size="13" font-weight="bold" fill="#007aff" text-anchor="middle">通讯</text>
|
|
</svg>`
|
|
} else {
|
|
return `
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
|
|
<style>
|
|
text { font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif; }
|
|
</style>
|
|
|
|
<!-- 设备主体 -->
|
|
<rect x="2" y="2" width="96" height="96" rx="6" ry="6" fill="#007aff30" stroke="#007aff" stroke-width="2"/>
|
|
|
|
<!-- 屏幕区域 -->
|
|
<rect x="6" y="6" width="88" height="52" rx="3" ry="3" fill="#FFFFFF" stroke="#007aff" stroke-width="1.5"/>
|
|
|
|
<!-- 屏幕标题栏 - 调整高度 -->
|
|
<rect x="10" y="9" width="80" height="14" rx="2" ry="2" fill="#007aff30" stroke="#CCC" stroke-width="0.8"/>
|
|
<text x="50" y="20" font-size="13" font-weight="bold" fill="#007aff" text-anchor="middle">监测设备</text>
|
|
|
|
<!-- 左侧电压数据 - 调整Y位置 -->
|
|
<text x="10" y="34" font-size="7" fill="#007aff">Ua: 220.5V</text>
|
|
<text x="10" y="43" font-size="7" fill="#007aff">Ub: 219.8V</text>
|
|
<text x="10" y="52" font-size="7" fill="#007aff">Uc: 220.1V</text>
|
|
|
|
<!-- 竖向分隔线 -->
|
|
<line x1="52" y1="26" x2="52" y2="55" stroke="#CCC" stroke-width="0.8" stroke-dasharray="1.5,1.5"/>
|
|
|
|
<!-- 右侧电流数据 -->
|
|
<text x="58" y="34" font-size="7" fill="#007aff">Ia: 125.3A</text>
|
|
<text x="58" y="43" font-size="7" fill="#007aff">Ib: 124.7A</text>
|
|
<text x="58" y="52" font-size="7" fill="#007aff">Ic: 125.1A</text>
|
|
|
|
<!-- 指示灯区域分隔线 -->
|
|
<line x1="6" y1="62" x2="94" y2="62" stroke="#999" stroke-width="1" stroke-dasharray="2,2"/>
|
|
|
|
<!-- 告警指示灯 -->
|
|
<circle cx="28" cy="70" r="6" fill="${this.alarmStatus==1?'#f59e0b':'#10b981'}" stroke="${this.alarmStatus==1?'#f59e0b':'#10b981'}" stroke-width="1"/>
|
|
<text x="28" y="92" font-size="13" font-weight="bold" fill="#007aff" text-anchor="middle">告警</text>
|
|
|
|
<!-- 通讯指示灯 -->
|
|
<circle cx="70" cy="70" r="6" fill="${this.runStatus == 1 ? '#ff3b30' : '#10b981'}" stroke="${this.runStatus == 1 ? '#ff3b30' : '#10b981'}" stroke-width="1"/>
|
|
<text x="70" y="92" font-size="13" font-weight="bold" fill="#007aff" text-anchor="middle">通讯</text>
|
|
</svg>
|
|
`
|
|
}
|
|
},
|
|
},
|
|
methods: {},
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.svg-container {
|
|
width: 100rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
</style>
|