feat 电池样式修改

src/views/equipmentList/list.vue

@@ -65,21 +65,119 @@
             <el-tag v-else>{{ scope.row.status ?? '-' }}</el-tag>
           </template> -->
         </el-table-column>
-        <el-table-column label="电池电量" align="center" prop="batteryLevel1" width="150">
+        <!-- <el-table-column label="电池电量" align="center" prop="batteryLevel1" width="150">
           <template #default="scope">
-            <!-- <el-button type="primary" v-if="scope.row.batteryLevel1" plain size="small">{{ scope.row.batteryLevel1 + '%' }}</el-button>
+            <el-tag v-if="scope.row.batteryLevel1">左{{ scope.row.batteryLevel1 + '%' }}</el-tag>
-            <el-button type="primary" v-if="scope.row.batteryLevel2" plain size="small">
-              {{ scope.row.batteryLevel2 + '%' }}
-            </el-button> -->
-            <!-- <el-button type="primary" v-else plain size="small"> 未获取 </el-button> -->
-            <el-tag v-if="scope.row.batteryLevel1">{{ scope.row.batteryLevel1 + '%' }}</el-tag>
             <el-tag v-if="scope.row.batteryLevel2" :style="scope.row.batteryLevel1 && scope.row.batteryLevel2 ? 'margin-left: 10px' : ''">
-              {{ scope.row.batteryLevel2 + '%' }}
+              右{{ scope.row.batteryLevel2 + '%' }}
             </el-tag>
-            <!-- <el-tag v-else type="info"> 未获取 </el-tag> -->
             <el-tag v-if="!scope.row.batteryLevel1 && !scope.row.batteryLevel2"> 未获取 </el-tag>
           </template>
+        </el-table-column> -->
+        <el-table-column label="电池电量" align="center" width="160">
+          <template #default="scope">
+            <div v-if="scope.row.batteryLevel1 != null || scope.row.batteryLevel2 != null" class="battery-group">
+              <!-- 左电池 -->
+              <div v-if="scope.row.batteryLevel1 != null" class="battery-item">
+                <svg viewBox="0 0 56 20" width="56" height="20">
+                  <rect
+                    x="0"
+                    y="1"
+                    width="44"
+                    height="18"
+                    rx="4"
+                    ry="4"
+                    fill="none"
+                    :stroke="getBatteryColor(scope.row.batteryLevel1)"
+                    stroke-width="1.5"
+                  />
+                  <rect x="44" y="6" width="4" height="8" rx="2" ry="2" :fill="getBatteryColor(scope.row.batteryLevel1)" />
+                  <rect
+                    x="2"
+                    y="3"
+                    :width="Math.max((40 * scope.row.batteryLevel1) / 100, 0)"
+                    height="14"
+                    rx="2"
+                    ry="2"
+                    :fill="getBatteryColor(scope.row.batteryLevel1)"
+                    opacity="0.25"
+                  />
+                  <text
+                    x="24"
+                    y="11.5"
+                    text-anchor="middle"
+                    dominant-baseline="middle"
+                    font-size="2"
+                    :fill="getBatteryColor(scope.row.batteryLevel1)"
+                  >
+                    左{{ scope.row.batteryLevel1 }}%
+                  </text>
+                </svg>
+              </div>
+              <!-- 右电池 -->
+              <div v-if="scope.row.batteryLevel2 != null" class="battery-item">
+                <svg viewBox="0 0 56 20" width="56" height="20">
+                  <rect
+                    x="0"
+                    y="1"
+                    width="44"
+                    height="18"
+                    rx="4"
+                    ry="4"
+                    fill="none"
+                    :stroke="getBatteryColor(scope.row.batteryLevel2)"
+                    stroke-width="1.5"
+                  />
+                  <rect x="44" y="6" width="4" height="8" rx="2" ry="2" :fill="getBatteryColor(scope.row.batteryLevel2)" />
+                  <rect
+                    x="2"
+                    y="3"
+                    :width="Math.max((40 * scope.row.batteryLevel2) / 100, 0)"
+                    height="14"
+                    rx="2"
+                    ry="2"
+                    :fill="getBatteryColor(scope.row.batteryLevel2)"
+                    opacity="0.25"
+                  />
+                  <text
+                    x="24"
+                    y="11.5"
+                    text-anchor="middle"
+                    dominant-baseline="middle"
+                    font-size="2"
+                    :fill="getBatteryColor(scope.row.batteryLevel2)"
+                  >
+                    右{{ scope.row.batteryLevel2 }}%
+                  </text>
+                </svg>
+              </div>
+            </div>
+            <span v-else>未获取</span>
+          </template>
         </el-table-column>
+        <!-- <el-table-column align="center" label="电量" prop="powerLevel" width="160">
+          <template #default="scope">
+            <div v-if="scope.row.powerLevel !== undefined && scope.row.powerLevel !== null && scope.row.powerLevel !== ''" class="power-level">
+              <svg class="power-level__icon" :class="getPowerLevelClass(scope.row.powerLevel)" viewBox="0 0 48 24" width="48" height="24">
+                <rect x="0" y="2" width="42" height="20" rx="4" ry="4" fill="none" stroke="currentColor" stroke-width="2" />
+
+                <rect x="42" y="8" width="4" height="8" rx="2" ry="2" fill="currentColor" />
+
+                <rect
+                  x="3"
+                  y="5"
+                  :width="Math.max((36 * formatPowerLevel(scope.row.powerLevel)) / 100, 0)"
+                  height="14"
+                  rx="2"
+                  ry="2"
+                  fill="currentColor"
+                />
+              </svg>
+              <span class="power-level__text">{{ formatPowerLevel(scope.row.powerLevel) }}%</span>
+            </div>
+            <span v-else>-</span>
+          </template>
+        </el-table-column> -->
         <el-table-column label="设备型号" align="center" prop="model" />
         <el-table-column label="固件版本" align="center" prop="version" />
         <el-table-column label="是否绘制区域" align="center" prop="isDrawArea">
@@ -702,6 +800,21 @@ const handleRefresh = async () => {
     initHls(monitorVideoUrl, monitorVideoRef);
   }
 };
+
+/** 电池颜色：>50% 绿，30-50% 黄，<30% 红 */
+const getBatteryColor = (val: number) => {
+  if (val > 50) return '#52c41a';
+  if (val >= 30) return '#faad14';
+  return '#ff4d4f';
+};
+
+const formatPowerLevel = (val: any) => Number(val) || 0;
+const getPowerLevelClass = (val: any) => {
+  const v = Number(val);
+  if (v > 50) return 'power--high';
+  if (v >= 30) return 'power--mid';
+  return 'power--low';
+};
 </script>
 
 <style scoped lang="scss">
@@ -801,4 +914,32 @@ const handleRefresh = async () => {
 .monitor-video::-moz-progress-bar {
   display: none !important;
 }
+
+.battery-group {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+.battery-item {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+.battery-label {
+  font-size: 12px;
+  color: #909399;
+}
+
+/* 电量电池颜色 */
+.power--high {
+  color: #52c41a;
+}
+.power--mid {
+  color: #faad14;
+}
+.power--low {
+  color: #ff4d4f;
+}
 </style>