App/app-govern
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

调整app页面图标样式

Browse Source
This commit is contained in:
guanj
2026-04-17 08:50:07 +08:00
parent bac0f83f64
commit 747d3139cf
40 changed files with 1345 additions and 553 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
components/Cn-device-card/Cn-device-card.vue
View File

@@ -5,6 +5,7 @@
:extra="device.isPrimaryUser == 1 ? '主设备' : '分享设备'"
padding="0"
@click="jump(device)"
class="boxClick"
:thumbnail="deviceIcon(device.runStatus)"
>
<template v-slot:title>
@@ -12,12 +13,9 @@
<view class="uni-card__header" @click="jump(device)">
<view class="uni-card__header-box">
<view class="uni-card__header-avatar">
<view
class="event-icon"
:style="{ backgroundColor: getColor(device.runStatus, device.devType) }"
>
<view class="event-icon">
<!-- 动态图标：根据类型切换 -->
<uni-icons
<!-- <uni-icons
custom-prefix="iconfont"
:type="
device.devType == 'Direct_Connected_Device'
@@ -26,7 +24,12 @@
"
:color="device.runStatus == 1 ? '#ff3b30' : '#10B981'"
:size="device.devType == 'Direct_Connected_Device' ? '35' : '40'"
></uni-icons>
></uni-icons> -->
<Cn-icon-device
:devType="device.devType"
:runStatus="device.runStatus"
:alarmStatus="device.isAlarm ? 1 : 0"
></Cn-icon-device>
</view>
</view>
<view class="uni-card__header-content">
@@ -114,30 +117,16 @@ export default {
'&process=' +
this.device.process +
'&ndid=' +
this.device.ndid,
this.device.ndid +
'&device=' +
JSON.stringify(this.device),
})
} else {
if (this.device.lineList.length == 0) {
return this.$util.toast('暂无监测点！')
}
uni.navigateTo({
url:
'/pages/device/realTime/index?id=' +
this.device.equipmentId +
'&isPrimaryUser=' +
this.device.isPrimaryUser +
'&process=' +
this.device.process +
'&ndid=' +
this.device.ndid +
'&lineList=' +
JSON.stringify(this.device.lineList) +
'&engineeringName=' +
this.device.engineeringName +
'&equipmentName=' +
this.device.equipmentName +
'&runStatus=' +
this.device.runStatus,
url: '/pages/device/realTime/index?device=' + JSON.stringify(this.device),
})
}
},
@@ -248,8 +237,8 @@ export default {
color: #007aff;
}
.jc-tag {
background-color: #36cfc920;
color: #36cfc9;
background-color: #3498db20;
color: #3498db;
}
.pinToTop {
background-color: $uni-theme-color;

73
components/Cn-filterCriteria/Cn-filterCriteria.vue
View File

@@ -1,13 +1,14 @@
<template>
<view class="nav choose">
<view class="nav-menu" @click="selectEngineering" v-if="showQianTree"
>{{
<view class="nav-menu nav-menu1" @click="selectEngineering" v-if="showQianTree">
{{
select.engineeringName || select.projectName || select.deviceName || select.lineName
? [select.engineeringName, select.projectName, select.deviceName, select.lineName]
.filter((item) => item && item !== '')
.join('>')
: '全部工程'
}}
<uni-icons type="bottom" size="14"></uni-icons>
</view>
<!-- 弹框组件 -->
@@ -35,18 +36,26 @@
<uni-icons type="bottom" size="14"></uni-icons>
</view>
</picker>
<uni-datetime-picker v-if="!showDatetime" v-model="select.range" type="daterange" :end="endDate">
<!-- <uni-datetime-picker v-if="!showDatetime" v-model="select.range" type="daterange" :end="endDate">
<view class="nav-menu"
>{{ select.range[0] + '至' + select.range[1] }}
<uni-icons type="bottom" size="14"></uni-icons>
</view>
</uni-datetime-picker>
<picker @change="bindReport" v-if="report" :value="select.report" :range="reportList">
</uni-datetime-picker> -->
<picker
mode="date"
:value="select.range"
fields="year"
:end="endDate.slice(0, -6)"
@change="yearChange"
v-if="!showDatetime"
>
<view class="nav-menu"
>{{ reportList[select.report] }}
>{{ select.range }}
<uni-icons type="bottom" size="14"></uni-icons>
</view>
</picker>
<slot />
</view>
</template>
@@ -57,7 +66,6 @@ export default {
props: {
level: { type: Number, default: 3 },
showDatetime: { type: Boolean, default: true },
report: { type: Boolean, default: false },
singleChoice: { type: Boolean, default: false },
showQianTree: { type: Boolean, default: true },
},
@@ -65,6 +73,10 @@ export default {
const currentDate = this.getDate({
format: true,
})
const rangeDate = this.getDate({
format: true,
}).slice(0, -3)
console.log('🚀 ~ rangeDate:', rangeDate)
return {
select: {
engineeringName: '',
@@ -76,18 +88,12 @@ export default {
lineName: '',
lineId: '', //测点ID
date: currentDate,
range: ['', ''],
report: 0,
range: rangeDate,
},
list: [],
reportList: ['日报', '月报'],
}
},
created() {
if (!this.showDatetime) {
this.select.range = [this.endDate.slice(0, -3) + '-01', this.endDate]
}
},
created() {},
onShow() {},
mounted() {},
@@ -172,9 +178,10 @@ export default {
bindDateChange(e) {
this.select.date = e.detail.value
},
bindReport(e) {
this.select.report = e.detail.value
yearChange(e) {
this.select.range = e.detail.value
},
selectEngineering() {
this.$refs.qiantree._show()
},
@@ -219,10 +226,18 @@ export default {
break
}
},
external(name, id) {
external(params) {
this.getTree()
this.select.engineeringId = id
this.select.engineeringName = name
// this.select.engineeringId = id
// this.select.engineeringName = name
this.select.engineeringName = params.engineeringName
this.select.engineeringId = params.engineeringId //工程ID
this.select.projectName = params.projectName
this.select.projectId = params.projectId //項目ID
this.select.deviceName = params.deviceName
this.select.deviceId = params.deviceId //设备ID
this.select.lineName = params.lineName
this.select.lineId = params.lineId //测点ID
},
// 取消回调事件
treeCancel(e) {
@@ -273,6 +288,15 @@ export default {
deep: true,
immediate: true,
},
// showDatetime: {
// handler(val, oldVal) {
// if (val == false) {
// console.log("🚀 ~ this.select.range:", this.select.range)
// }
// },
// deep: true,
// },
},
}
</script>
@@ -280,4 +304,13 @@ export default {
/deep/ .uni-date-editor {
width: 360rpx;
}
.nav-menu1 {
max-width: calc(100vw - 150px);
overflow: hidden;
-webkit-line-clamp: 1;
display: -webkit-box;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
word-break: break-all;
}
</style>

130
components/Cn-icon-device/Cn-icon-device.vue Normal file
View File

@@ -0,0 +1,130 @@
<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="#3498DB30" stroke="#3498DB" stroke-width="2"/>
<!-- 屏幕区域 -->
<rect x="6" y="6" width="88" height="52" rx="3" ry="3" fill="#FFFFFF" stroke="#3498DB" stroke-width="1.5"/>
<!-- 屏幕标题栏 - 调整高度 -->
<rect x="10" y="9" width="80" height="14" rx="2" ry="2" fill="#3498DB30" stroke="#CCC" stroke-width="0.8"/>
<text x="50" y="20" font-size="13" font-weight="bold" fill="#3498DB" text-anchor="middle">监测设备</text>
<!-- 左侧电压数据 - 调整Y位置 -->
<text x="10" y="34" font-size="7" fill="#3498DB">Ua: 220.5V</text>
<text x="10" y="43" font-size="7" fill="#3498DB">Ub: 219.8V</text>
<text x="10" y="52" font-size="7" fill="#3498DB">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="#3498DB">Ia: 125.3A</text>
<text x="58" y="43" font-size="7" fill="#3498DB">Ib: 124.7A</text>
<text x="58" y="52" font-size="7" fill="#3498DB">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="#3498DB" 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="#3498DB" text-anchor="middle">通讯</text>
</svg>
`
}
},
},
methods: {},
}
</script>
<style scoped>
.svg-container {
width: 100rpx;
display: flex;
justify-content: center;
align-items: center;
}
</style>

41
components/Cn-icon-device/icon.svg Normal file
View File

@@ -0,0 +1,41 @@
<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="#E8E8E8" stroke="#333" stroke-width="2"/>
<!-- 屏幕区域 -->
<rect x="6" y="6" width="88" height="52" rx="3" ry="3" fill="#FFFFFF" stroke="#333" stroke-width="1.5"/>
<!-- 屏幕标题栏（代替品牌标识） -->
<rect x="10" y="9" width="80" height="10" rx="2" ry="2" fill="#F0F0F0" stroke="#CCC" stroke-width="0.8"/>
<text x="50" y="17" font-family="Arial, sans-serif" font-size="7" font-weight="bold" fill="#333" text-anchor="middle">电能质量监测</text>
<!-- 屏幕内容 - 左侧参数 -->
<text x="10" y="28" font-family="Arial, sans-serif" font-size="6" fill="#000">Ua:220.5V</text>
<text x="10" y="36" font-family="Arial, sans-serif" font-size="6" fill="#000">Ub:219.8V</text>
<text x="10" y="44" font-family="Arial, sans-serif" font-size="6" fill="#000">Uc:220.1V</text>
<text x="10" y="52" font-family="Arial, sans-serif" font-size="6" fill="#000">Hz:50.02</text>
<!-- 垂直分隔线 -->
<line x1="52" y1="22" x2="52" y2="55" stroke="#CCC" stroke-width="0.8" stroke-dasharray="1.5,1.5"/>
<!-- 右侧参数 -->
<text x="58" y="28" font-family="Arial, sans-serif" font-size="6" fill="#000">Ia:125.3A</text>
<text x="58" y="36" font-family="Arial, sans-serif" font-size="6" fill="#000">Ib:124.7A</text>
<text x="58" y="44" font-family="Arial, sans-serif" font-size="6" fill="#000">Ic:125.1A</text>
<text x="58" y="52" font-family="Arial, sans-serif" font-size="6" fill="#000">PF:0.98</text>
<!-- 指示灯区域分隔线 -->
<line x1="6" y1="62" x2="94" y2="62" stroke="#999" stroke-width="1" stroke-dasharray="2,2"/>
<!-- 电源灯 -->
<circle cx="20" cy="76" r="5" fill="#10b981" stroke="#10b981" stroke-width="1"/>
<text x="20" y="90" font-family="Arial, sans-serif" font-size="8" font-weight="bold" fill="#333" text-anchor="middle">电源</text>
<!-- 运行灯 -->
<circle cx="50" cy="76" r="5" fill="#999999" stroke="#333" stroke-width="1"/>
<text x="50" y="90" font-family="Arial, sans-serif" font-size="8" font-weight="bold" fill="#333" text-anchor="middle">运行</text>
<!-- 通讯灯（原通信灯，已改名） -->
<circle cx="80" cy="76" r="5" fill="#999999" stroke="#333" stroke-width="1"/>
<text x="80" y="90" font-family="Arial, sans-serif" font-size="8" font-weight="bold" fill="#333" text-anchor="middle">通讯</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

146
components/Cn-icon-transient/Cn-icon-transient.vue Normal file
View File

@@ -0,0 +1,146 @@
<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="#376cf3"/>
<line x1="50" y1="28" x2="50" y2="50" stroke="#376cf3" stroke-width="6" stroke-linecap="round"/>
<circle cx="50" cy="62" r="4" fill="#376cf3"/>
</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="13" 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="#3498DB30" stroke="#3498DB" stroke-width="2"/>
<rect x="8" y="8" width="84" height="84" rx="3" ry="3" fill="#FFFFFF" stroke="#3498DB" stroke-width="1.5"/>
<rect x="10" y="12" width="80" height="16" rx="2" ry="2" fill="#3498DB30" stroke="#CCC" stroke-width="0.8"/>
<text x="50" y="24" font-size="13" font-weight="bold" fill="#3498DB" text-anchor="middle">监测设备</text>
<text x="16" y="45" font-size="7" fill="#3498DB">Ua: 220.5V</text>
<text x="16" y="55" font-size="7" fill="#3498DB">Ub: 219.8V</text>
<text x="16" y="65" font-size="7" fill="#3498DB">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="#3498DB">Ia: 125.3A</text>
<text x="54" y="55" font-size="7" fill="#3498DB">Ib: 124.7A</text>
<text x="54" y="65" font-size="7" fill="#3498DB">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="#3b82f6" stroke-width="4" stroke-linejoin="round"/>
<path d="M78,12 L78,22 L88,22" fill="none" stroke="#3b82f6" 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="#3b82f6" stroke-width="4" stroke-linecap="round"/>
<line x1="20" y1="68" x2="52" y2="68" stroke="#3b82f6" stroke-width="4" opacity="0.4" stroke-linecap="round"/>
<line x1="20" y1="76" x2="42" y2="76" stroke="#3b82f6" stroke-width="4" opacity="0.4" stroke-linecap="round"/>
<circle cx="70" cy="68" r="9" fill="none" stroke="#3b82f6" stroke-width="4"/>
<line x1="76" y1="74" x2="86" y2="84" stroke="#3b82f6" stroke-width="4" stroke-linecap="round"/>
</svg>`
}
},
},
methods: {},
}
</script>
<style scoped>
.svg-container {
width: 100rpx;
display: flex;
justify-content: center;
align-items: center;
}
</style>

41
components/Cn-icon-transient/icon.svg Normal file
View File

@@ -0,0 +1,41 @@
<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="#E8E8E8" stroke="#333" stroke-width="2"/>
<!-- 屏幕区域 -->
<rect x="6" y="6" width="88" height="52" rx="3" ry="3" fill="#FFFFFF" stroke="#333" stroke-width="1.5"/>
<!-- 屏幕标题栏（代替品牌标识） -->
<rect x="10" y="9" width="80" height="10" rx="2" ry="2" fill="#F0F0F0" stroke="#CCC" stroke-width="0.8"/>
<text x="50" y="17" font-family="Arial, sans-serif" font-size="7" font-weight="bold" fill="#333" text-anchor="middle">电能质量监测</text>
<!-- 屏幕内容 - 左侧参数 -->
<text x="10" y="28" font-family="Arial, sans-serif" font-size="6" fill="#000">Ua:220.5V</text>
<text x="10" y="36" font-family="Arial, sans-serif" font-size="6" fill="#000">Ub:219.8V</text>
<text x="10" y="44" font-family="Arial, sans-serif" font-size="6" fill="#000">Uc:220.1V</text>
<text x="10" y="52" font-family="Arial, sans-serif" font-size="6" fill="#000">Hz:50.02</text>
<!-- 垂直分隔线 -->
<line x1="52" y1="22" x2="52" y2="55" stroke="#CCC" stroke-width="0.8" stroke-dasharray="1.5,1.5"/>
<!-- 右侧参数 -->
<text x="58" y="28" font-family="Arial, sans-serif" font-size="6" fill="#000">Ia:125.3A</text>
<text x="58" y="36" font-family="Arial, sans-serif" font-size="6" fill="#000">Ib:124.7A</text>
<text x="58" y="44" font-family="Arial, sans-serif" font-size="6" fill="#000">Ic:125.1A</text>
<text x="58" y="52" font-family="Arial, sans-serif" font-size="6" fill="#000">PF:0.98</text>
<!-- 指示灯区域分隔线 -->
<line x1="6" y1="62" x2="94" y2="62" stroke="#999" stroke-width="1" stroke-dasharray="2,2"/>
<!-- 电源灯 -->
<circle cx="20" cy="76" r="5" fill="#10b981" stroke="#10b981" stroke-width="1"/>
<text x="20" y="90" font-family="Arial, sans-serif" font-size="8" font-weight="bold" fill="#333" text-anchor="middle">电源</text>
<!-- 运行灯 -->
<circle cx="50" cy="76" r="5" fill="#999999" stroke="#333" stroke-width="1"/>
<text x="50" y="90" font-family="Arial, sans-serif" font-size="8" font-weight="bold" fill="#333" text-anchor="middle">运行</text>
<!-- 通讯灯（原通信灯，已改名） -->
<circle cx="80" cy="76" r="5" fill="#999999" stroke="#333" stroke-width="1"/>
<text x="80" y="90" font-family="Arial, sans-serif" font-size="8" font-weight="bold" fill="#333" text-anchor="middle">通讯</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB