diff --git a/src/assets/img/battery1.png b/src/assets/img/battery1.png
new file mode 100644
index 0000000..48e8a51
Binary files /dev/null and b/src/assets/img/battery1.png differ
diff --git a/src/views/monitoringCenter/deviceModel.vue b/src/views/monitoringCenter/deviceModel.vue
index 024bd71..209abb9 100644
--- a/src/views/monitoringCenter/deviceModel.vue
+++ b/src/views/monitoringCenter/deviceModel.vue
@@ -24,9 +24,9 @@
               <div class="item-right">
                 <div class="battery">
                   <div class="battery-icon">
-                    <img src="@/assets/img/battery.png" alt="" srcset="" />
+                    <img :src="item.battery < 20 ? battery1 : battery" alt="" srcset="" />
                   </div>
-                  <div class="battery-num">{{ item.battery }}%</div>
+                  <div class="battery-num" :style="{ color: item.battery < 20 ? '#f56c6c' : '#67c23a' }">{{ item.battery }}%</div>
                 </div>
                 <div class="user">{{ item.userNumber || "--" }}</div>
               </div>
@@ -76,6 +76,8 @@
 import { TDevice } from "@/api/index.d";
 import { ref, watch, reactive, onMounted } from "vue";
 import { deviceList } from "@/api/index";
+import battery1 from "@/assets/img/battery1.png";
+import battery from "@/assets/img/battery.png";
 
 const statusColor = ["danger", "success", "warning"];
 const modeColor = ["primary", "danger", "warning"];
diff --git a/src/views/synthesizeManage/deviceManage/index.vue b/src/views/synthesizeManage/deviceManage/index.vue
index 474e3cd..37fbd3e 100644
--- a/src/views/synthesizeManage/deviceManage/index.vue
+++ b/src/views/synthesizeManage/deviceManage/index.vue
@@ -22,7 +22,10 @@
         <template #mode="{ rows }">
           <el-tag :type="modeColor[rows.mode]">{{ modeEnum[rows.mode] }}</el-tag>
         </template>
-        <template #battery="{ rows }"> {{ rows.battery }}% </template>
+        <template #battery="{ rows }">
+          <div v-if="!rows.battery && rows.battery != 0">--</div>
+          <el-tag :type="rows.battery < 20 ? 'danger' : 'success'" v-else>{{ rows.battery }}% </el-tag>
+        </template>
         <template #operator="{ rows }">
           <el-button link type="primary" size="small" @click="toPage('deviceInfo', rows)"> 详细信息 </el-button>
           <el-button link type="primary" size="small" @click="toPage('mapLocation', rows)"> 地图位置 </el-button>