设备定位地图，打点展示

src/views/controlCenter/controlPanel/index.vue

@@ -81,7 +81,7 @@
         <el-card class="Maplist">
           <div v-if="isListView" key="list">
             <el-table v-loading="loading" border :data="deviceList" @selection-change="handleSelectionChange">
-              <el-table-column type="selection" width="50" align="center" />
+              <el-table-column type="selection" width="50" align="center" :selectable="isSelectable" />
               <el-table-column label="设备名称" align="center" prop="deviceName" />
               <el-table-column label="设备图片" align="center" prop="devicePic">
                 <template #default="scope">
@@ -104,13 +104,24 @@
               </el-table-column>
               <el-table-column label="设备IMEI" align="center" prop="deviceImei" />
               <el-table-column label="使用人员" align="center" prop="personnelBy" />
-              <el-table-column label="电量" align="center" prop="battery" />
               <el-table-column label="设备状态" align="center" prop="onlineStatus">
                 <template #default="scope">
                   <div class="normal green" v-if="scope.row.onlineStatus == 1">在线</div>
                   <div class="normal red" v-if="scope.row.onlineStatus == 0">离线</div>
                 </template>
               </el-table-column>
+              <el-table-column label="电量" align="center" prop="battery">
+                <template #default="scope">
+                  <div :class="{
+                    'battery-red': Number(scope.row.battery) < 20,
+                    'battery-yellow': Number(scope.row.battery) >= 20 && Number(scope.row.battery) < 80,
+                    'battery-green': Number(scope.row.battery) >= 80 && Number(scope.row.battery) <= 100
+                  }">
+                    {{ scope.row.battery }}%
+                  </div>
+                </template>
+              </el-table-column>
+
               <el-table-column label="操作" fixed="right" width="180" class-name="small-padding fixed-width">
                 <template #default="scope">
                   <el-button link type="primary" @click="handleControl(scope.row)">控制面板</el-button>
@@ -127,11 +138,11 @@
       </el-col>
     </el-row>
     <el-dialog v-model="dialog.visible" :title="dialog.title" width="500px" append-to-body>
+      <div class="title_ps">{{ `对${arrayDeviceName.join('、')}设备发送消息` }}</div>
       <el-form ref="postFormRef" :model="form" label-width="80px">
-        <el-form-item label="发送信息" prop="messageToSend">
-          <el-input type="textarea" v-model="form.messageToSend" placeholder="请输入内容" />
-        </el-form-item>
+        <el-input type="textarea" v-model="form.messageToSend" placeholder="请输入消息内容" />
       </el-form>
+
       <template #footer>
         <div class="dialog-footer">
           <el-button type="primary" @click="submitForm" :loading="sendTextLoading"
@@ -207,8 +218,12 @@ const switchView = (view: 'list' | 'map') => {
 };
 const dialog = reactive<DialogOption>({
   visible: false,
-  title: ''
+  title: '发送信息'
 });
+const isSelectable = (row: any) => {
+  // 仅当在线状态（onlineStatus == 1）时允许选中
+  return row.onlineStatus === 1;
+}
 /** 通过条件过滤节点  */
 const filterNode = (value: string, data: any) => {
   if (!value) return true;
@@ -286,12 +301,17 @@ const resetQuery = () => {
 
 /** 设备控制跳转 */
 const handleControl = (row: any) => {
+  console.log(row,'row1111');
+  
   const deviceId = row.id;
   router.push('/controlCenter/6170/' + deviceId);
 };
 
 /** 选择条数  */
+const arrayDeviceName = ref([])
 const handleSelectionChange = (selection: deviceVO[]) => {
+  console.log(selection, 'selectionselection');
+  arrayDeviceName.value = selection.map(item => item.deviceName);
   ids.value = selection;
   single.value = selection.length != 1;
   multiple.value = !selection.length;
@@ -397,7 +417,7 @@ const submitForm = async () => {
 };
 // 取消
 const cancel = () => {
-  dialog.visible = true;
+  dialog.visible = false;
   form.value.messageToSend = ''
 }
 // 强制报警
@@ -411,6 +431,7 @@ const forceAlarm = async () => {
     return;
   }
   try {
+    await proxy?.$modal.confirm('确定要对所选设备开启强制报警？', '强制报警');
     forceAlarmLoading.value = true
     // 2. 准备请求数据
     const batchId = generateShortId();
@@ -465,6 +486,25 @@ const forceAlarm = async () => {
   background: transparent;
 }
 
+.battery-red {
+  color: rgba(224, 52, 52, 1);
+}
+
+/* 20%~80% 黄色（或橙色，根据设计图调整） */
+.battery-yellow {
+  color: rgba(234, 152, 0, 1);
+}
+
+/* 80%~100% 绿色 */
+.battery-green {
+  color: rgba(234, 152, 0, 1);
+}
+
+.title_ps {
+  color: rgba(224, 52, 52, 1);
+  padding: 0px 0 20px 0;
+}
+
 .main-tree {
   border-radius: 4px;
   box-shadow: 0px 0px 6px 0px rgba(0, 34, 96, 0.1);