zhangchao/Visualize-electronic-fences
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat 电池样式修改

Browse Source
This commit is contained in:
Ironsp
2026-06-30 11:55:46 +08:00
parent 5ef955f1fc
commit c76102bf96
1 changed files with 150 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

159
src/views/equipmentList/list.vue
View File

@@ -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-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.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>