调整app页面图标样式

2026-04-17 08:50:07 +08:00
parent bac0f83f64
commit 747d3139cf
40 changed files with 1345 additions and 553 deletions
--- a/components/Cn-icon-device/Cn-icon-device.vue
+++ b/components/Cn-icon-device/Cn-icon-device.vue
@@ -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>
--- a/components/Cn-icon-device/icon.svg
+++ b/components/Cn-icon-device/icon.svg
@@ -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>