fix: 设备管理，告警通知，设备告警，优化手机端展示。

src/api/fishery/callNotice/types.ts

@@ -84,6 +84,36 @@ export interface CallNoticeVO {
    */
   voiceType: string;
 
+  /**
+   * 呼叫时间
+   */
+  callTime?: string;
+
+  /**
+   * 用户名（关联查询）
+   */
+  userName?: string;
+
+  /**
+   * 设备编号（关联查询）
+   */
+  serialNum?: string;
+
+  /**
+   * 设备类型（关联查询）
+   */
+  deviceType?: number;
+
+  /**
+   * 告警类型
+   */
+  warnType?: number;
+
+  /**
+   * 告警标题
+   */
+  warnTitle?: string;
+
 }
 
 export interface CallNoticeForm extends BaseEntity {

src/api/fishery/device/types.ts

@@ -214,6 +214,26 @@ export interface DeviceVO {
    */
   batteryWarnLower: number;
 
+  /**
+   * 用户名（关联查询）
+   */
+  userName?: string;
+
+  /**
+   * 手机号（关联查询）
+   */
+  mobilePhone?: string;
+
+  /**
+   * 塘口名称（关联查询）
+   */
+  pondName?: string;
+
+  /**
+   * 创建时间（激活时间）
+   */
+  createTime?: string;
+
 }
 
 export interface DeviceForm extends BaseEntity {

src/api/fishery/messageWarn/types.ts

@@ -69,6 +69,11 @@ export interface MessageWarnVO {
    */
   createTime?: string;
 
+  /**
+   * 电话通知次数
+   */
+  callNoticeCount?: number;
+
 }
 
 export interface MessageWarnForm extends BaseEntity {

src/types/components.d.ts

@@ -19,6 +19,7 @@ declare module 'vue' {
     ElButton: typeof import('element-plus/es')['ElButton']
     ElButtonGroup: typeof import('element-plus/es')['ElButtonGroup']
     ElCard: typeof import('element-plus/es')['ElCard']
+    ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElCol: typeof import('element-plus/es')['ElCol']
     ElColorPicker: typeof import('element-plus/es')['ElColorPicker']
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
@@ -34,7 +35,6 @@ declare module 'vue' {
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
     ElIcon: typeof import('element-plus/es')['ElIcon']
     ElInput: typeof import('element-plus/es')['ElInput']
-    ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
     ElOption: typeof import('element-plus/es')['ElOption']

src/views/fishery/callNotice/index.vue

@@ -56,7 +56,7 @@
         </el-row>
       </template>
 
-      <el-table v-loading="loading" border :data="callNoticeList" @selection-change="handleSelectionChange">
+      <el-table v-loading="loading" border :data="callNoticeList" @selection-change="handleSelectionChange" class="hidden-sm-and-down">
         <el-table-column type="selection" width="55" align="center" />
         <el-table-column label="用户名" align="center" prop="userName" width="120"/>
         <!-- <el-table-column label="手机号" align="center" prop="mobilePhone"  width="120"/> -->
@@ -108,6 +108,64 @@
         </el-table-column>
       </el-table>
 
+      <!-- 移动端卡片展示 -->
+      <div v-loading="loading" class="mobile-card-list hidden-sm-and-up">
+        <div v-if="callNoticeList.length === 0" class="no-data">
+          <el-empty description="暂无数据" />
+        </div>
+        <el-card v-for="item in callNoticeList" :key="item.id" class="mobile-notice-card" shadow="hover">
+          <!-- 卡片头部 -->
+          <div class="card-header">
+            <div class="header-left">
+              <dict-tag :options="call_status" :value="item.callStatus" class="status-tag"/>
+              <span class="call-time">{{ item.callTime || '-' }}</span>
+            </div>
+            <el-checkbox :model-value="ids.includes(item.id)" @change="handleMobileSelect(item, $event)" />
+          </div>
+
+          <!-- 基本信息 -->
+          <div class="info-section">
+            <div class="info-list">
+              <div class="info-row"><span class="label">用户名</span><span class="value">{{ item.userName || '-' }}</span></div>
+              <div class="info-row"><span class="label">设备编号</span><span class="value">{{ item.serialNum || '-' }}</span></div>
+              <div class="info-row"><span class="label">设备类型</span><span class="value"><dict-tag :options="aqu_device_type" :value="item.deviceType"/></span></div>
+              <div class="info-row"><span class="label">呼叫电话</span><span class="value highlight">{{ item.mobilePhone || '-' }}</span></div>
+              <div class="info-row"><span class="label">主叫号码</span><span class="value">{{ item.caller || '-' }}</span></div>
+            </div>
+          </div>
+
+          <!-- 告警信息 -->
+          <div class="info-section warn-section">
+            <div class="section-title">告警信息</div>
+            <div class="warn-grid">
+              <div class="warn-item">
+                <span class="warn-label">告警类型</span>
+                <span class="warn-value"><dict-tag :options="warn_type" :value="item.warnType"/></span>
+              </div>
+              <div class="warn-item">
+                <span class="warn-label">告警标题</span>
+                <span class="warn-value">{{ item.warnTitle || '-' }}</span>
+              </div>
+            </div>
+          </div>
+
+          <!-- 结果信息 -->
+          <div class="info-section" v-if="item.statusMsg">
+            <div class="section-title">呼叫结果</div>
+            <div class="result-box">
+              <span class="result-text">{{ item.statusMsg }}</span>
+            </div>
+          </div>
+
+          <!-- 操作按钮 -->
+          <div class="card-footer">
+            <el-button type="danger" size="small" plain @click="handleDelete(item)" v-hasPermi="['fishery:callNotice:remove']">
+              <el-icon><Delete /></el-icon>删除
+            </el-button>
+          </div>
+        </el-card>
+      </div>
+
       <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
     </el-card>
     <!-- 添加或修改告警电话通知记录对话框 -->
@@ -336,6 +394,19 @@ const handleSelectionChange = (selection: CallNoticeVO[]) => {
   multiple.value = !selection.length;
 }
 
+/** 移动端选择 */
+const handleMobileSelect = (item: CallNoticeVO, checked: boolean | string | number) => {
+  if (checked) {
+    if (!ids.value.includes(item.id)) {
+      ids.value.push(item.id);
+    }
+  } else {
+    ids.value = ids.value.filter(id => id !== item.id);
+  }
+  single.value = ids.value.length != 1;
+  multiple.value = !ids.value.length;
+}
+
 /** 新增按钮操作 */
 const handleAdd = () => {
   reset();
@@ -390,3 +461,185 @@ onMounted(() => {
   getList();
 });
 </script>
+
+<style lang="scss" scoped>
+// 移动端卡片样式
+.mobile-card-list {
+  .no-data {
+    padding: 40px 0;
+  }
+
+  .mobile-notice-card {
+    margin-bottom: 12px;
+    border-radius: 8px;
+
+    :deep(.el-card__body) {
+      padding: 12px;
+    }
+
+    .card-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding-bottom: 10px;
+      border-bottom: 1px solid #ebeef5;
+
+      .header-left {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        flex: 1;
+        min-width: 0;
+
+        .status-tag {
+          flex-shrink: 0;
+        }
+
+        .call-time {
+          font-size: 12px;
+          color: #909399;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+      }
+    }
+
+    .info-section {
+      padding: 10px 0;
+      border-bottom: 1px solid #ebeef5;
+
+      &:last-of-type {
+        border-bottom: none;
+      }
+
+      .section-title {
+        font-size: 12px;
+        font-weight: 600;
+        color: #e6a23c;
+        margin-bottom: 8px;
+        padding-left: 8px;
+        border-left: 3px solid #e6a23c;
+      }
+
+      .info-list {
+        background-color: #fafafa;
+        border-radius: 6px;
+        padding: 4px 0;
+
+        .info-row {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          padding: 8px 12px;
+          font-size: 13px;
+          border-bottom: 1px dashed #ebeef5;
+
+          &:last-child {
+            border-bottom: none;
+          }
+
+          .label {
+            color: #909399;
+            flex-shrink: 0;
+          }
+
+          .value {
+            color: #303133;
+            font-weight: 500;
+            text-align: right;
+            word-break: break-all;
+            flex: 1;
+            margin-left: 12px;
+
+            &.highlight {
+              color: #409eff;
+              font-weight: 600;
+            }
+          }
+        }
+      }
+
+      .warn-grid {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        gap: 8px;
+
+        .warn-item {
+          display: flex;
+          flex-direction: column;
+          padding: 8px 12px;
+          background: linear-gradient(135deg, #fdf6ec 0%, #faecd8 100%);
+          border-radius: 6px;
+          border: 1px solid #f5dab1;
+
+          .warn-label {
+            font-size: 11px;
+            color: #909399;
+            margin-bottom: 4px;
+          }
+
+          .warn-value {
+            font-size: 13px;
+            font-weight: 500;
+            color: #303133;
+          }
+        }
+      }
+
+      .result-box {
+        padding: 10px 12px;
+        background-color: #f5f7fa;
+        border-radius: 6px;
+
+        .result-text {
+          font-size: 13px;
+          color: #606266;
+          line-height: 1.5;
+        }
+      }
+    }
+
+    .card-footer {
+      display: flex;
+      justify-content: flex-end;
+      gap: 8px;
+      padding-top: 12px;
+      border-top: 1px solid #ebeef5;
+      margin-top: 4px;
+
+      .el-button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 8px 16px;
+        font-size: 13px;
+        border-radius: 8px;
+        transition: all 0.2s;
+
+        .el-icon {
+          font-size: 16px;
+          margin-right: 4px;
+        }
+
+        &:active {
+          transform: scale(0.96);
+        }
+      }
+    }
+  }
+}
+
+// 响应式隐藏
+.hidden-sm-and-down {
+  @media (max-width: 768px) {
+    display: none !important;
+  }
+}
+
+.hidden-sm-and-up {
+  @media (min-width: 769px) {
+    display: none !important;
+  }
+}
+</style>

src/views/fishery/device/index.vue

@@ -52,7 +52,8 @@
         </el-row>
       </template>
 
-      <el-table v-loading="loading" border :data="deviceList" @selection-change="handleSelectionChange">
+      <!-- PC端表格展示 -->
+      <el-table v-loading="loading" border :data="deviceList" @selection-change="handleSelectionChange" class="hidden-sm-and-down">
         <el-table-column type="selection" width="55" align="center" />
         <el-table-column label="用户名" align="center" prop="userName" fixed="left" width="120"/>
         <el-table-column label="手机号" align="center" prop="mobilePhone" fixed="left" width="120"/>
@@ -163,6 +164,118 @@
         </el-table-column>
       </el-table>
 
+      <!-- 移动端卡片展示 -->
+      <div v-loading="loading" class="mobile-device-list hidden-sm-and-up">
+        <div v-if="deviceList.length === 0" class="no-data">
+          <el-empty description="暂无数据" />
+        </div>
+        <el-card v-for="item in deviceList" :key="item.id" class="mobile-device-card" shadow="hover">
+          <!-- 卡片头部 -->
+          <div class="card-header">
+            <div class="device-info">
+              <span class="device-name">{{ item.deviceName || '-' }}</span>
+              <dict-tag :options="aqu_device_type" :value="item.deviceType" class="device-type"/>
+            </div>
+            <el-checkbox :model-value="ids.includes(item.id)" @change="handleMobileSelect(item, $event)" />
+          </div>
+
+          <!-- 基础信息 -->
+          <div class="info-section">
+            <div class="section-title">基础信息</div>
+            <div class="info-list">
+              <div class="info-row"><span class="label">用户名</span><span class="value">{{ item.userName || '-' }}</span></div>
+              <div class="info-row"><span class="label">手机号</span><span class="value">{{ item.mobilePhone || '-' }}</span></div>
+              <div class="info-row"><span class="label">设备编号</span><span class="value">{{ item.serialNum || '-' }}</span></div>
+              <div class="info-row"><span class="label">塘口名称</span><span class="value">{{ item.pondName || '-' }}</span></div>
+              <div class="info-row"><span class="label">物联网卡号</span><span class="value">{{ item.iccId || '-' }}</span></div>
+              <div class="info-row"><span class="label">设备分类</span><span class="value">{{ item.category || '-' }}</span></div>
+              <div class="info-row"><span class="label">绑定时间</span><span class="value">{{ parseTime(item.bindTime, '{y}-{m}-{d}') }}</span></div>
+              <div class="info-row"><span class="label">激活时间</span><span class="value">{{ item.createTime || '-' }}</span></div>
+              <div class="info-row"><span class="label">到期时间</span><span class="value">{{ parseTime(item.deadTime, '{y}-{m}-{d}') }}</span></div>
+              <div class="info-row"><span class="label">溶解氧启用</span><span class="value"><dict-tag :options="open_close" :value="item.isOxygenUsed"/></span></div>
+            </div>
+          </div>
+
+          <!-- 传感器数据 -->
+          <div class="info-section">
+            <div class="section-title">传感器数据</div>
+            <div class="sensor-grid">
+              <div class="sensor-item"><span class="sensor-label">溶解氧</span><span class="sensor-value">{{ item.valueDissolvedOxygen ?? '-' }}</span></div>
+              <div class="sensor-item"><span class="sensor-label">水温</span><span class="sensor-value">{{ item.valueTemperature ?? '-' }}</span></div>
+              <div class="sensor-item"><span class="sensor-label">饱和度</span><span class="sensor-value">{{ item.valueSaturability ?? '-' }}</span></div>
+              <div class="sensor-item"><span class="sensor-label">PH</span><span class="sensor-value">{{ item.valuePh ?? '-' }}</span></div>
+              <div class="sensor-item"><span class="sensor-label">盐度</span><span class="sensor-value">{{ item.valueSalinity ?? '-' }}</span></div>
+              <div class="sensor-item"><span class="sensor-label">参比值</span><span class="sensor-value">{{ item.treference ?? '-' }}</span></div>
+              <div class="sensor-item"><span class="sensor-label">荧光值</span><span class="sensor-value">{{ item.tfluorescence ?? '-' }}</span></div>
+              <div class="sensor-item"><span class="sensor-label">告警码</span><span class="sensor-value">{{ item.warnCode ?? '-' }}</span></div>
+            </div>
+          </div>
+
+          <!-- 溶解氧告警设置 -->
+          <div class="info-section">
+            <div class="section-title">溶解氧告警设置</div>
+            <div class="info-list">
+              <div class="info-row"><span class="label">电话告警开关</span><span class="value"><dict-tag :options="open_close" :value="item.oxyWarnCallOpen"/></span></div>
+              <div class="info-row"><span class="label">免打扰</span><span class="value"><dict-tag :options="open_close" :value="item.oxyWarnCallNoDis"/></span></div>
+              <div class="info-row"><span class="label">告警下限</span><span class="value">{{ item.oxyWarnLower ?? '-' }}</span></div>
+            </div>
+          </div>
+
+          <!-- 温度告警设置 -->
+          <div class="info-section">
+            <div class="section-title">温度告警设置</div>
+            <div class="info-list">
+              <div class="info-row"><span class="label">电话告警开关</span><span class="value"><dict-tag :options="open_close" :value="item.tempWarnCallOpen"/></span></div>
+              <div class="info-row"><span class="label">免打扰</span><span class="value"><dict-tag :options="open_close" :value="item.tempWarnCallNoDis"/></span></div>
+              <div class="info-row"><span class="label">告警上限</span><span class="value">{{ item.tempWarnUpper ?? '-' }}</span></div>
+              <div class="info-row"><span class="label">告警下限</span><span class="value">{{ item.tempWarnLower ?? '-' }}</span></div>
+            </div>
+          </div>
+
+          <!-- 电量告警设置 -->
+          <div class="info-section">
+            <div class="section-title">电量告警设置</div>
+            <div class="info-list">
+              <div class="info-row"><span class="label">电话告警开关</span><span class="value"><dict-tag :options="open_close" :value="item.batteryWarnCallOpen"/></span></div>
+              <div class="info-row"><span class="label">免打扰</span><span class="value"><dict-tag :options="open_close" :value="item.batteryWarnCallNoDis"/></span></div>
+              <div class="info-row"><span class="label">告警下限</span><span class="value">{{ item.batteryWarnLower ?? '-' }}</span></div>
+            </div>
+          </div>
+
+          <!-- 补偿设置 -->
+          <div class="info-section">
+            <div class="section-title">补偿设置</div>
+            <div class="info-list">
+              <div class="info-row"><span class="label">盐度补偿</span><span class="value">{{ item.salinityCompensation ?? '-' }}</span></div>
+              <div class="info-row"><span class="label">线性系数补偿</span><span class="value">{{ item.phaseCompensation ?? '-' }}</span></div>
+              <div class="info-row"><span class="label">相位差补偿</span><span class="value">{{ item.phasedifCompensation ?? '-' }}</span></div>
+              <div class="info-row"><span class="label">温度补偿</span><span class="value">{{ item.temperatureCompensation ?? '-' }}</span></div>
+              <div class="info-row"><span class="label">输入额定电压</span><span class="value">{{ item.inputVoltage ?? '-' }}</span></div>
+              <div class="info-row"><span class="label">电压告警开关</span><span class="value"><dict-tag :options="open_close" :value="item.voltageWarnOpen"/></span></div>
+            </div>
+          </div>
+
+          <!-- 操作按钮 -->
+          <div class="card-footer">
+            <el-button type="primary" size="small" plain @click="handleViewHistory(item)" v-hasPermi="['fishery:monitorHistory:list']">
+              <el-icon><TrendCharts /></el-icon>曲线图
+            </el-button>
+            <el-button v-if="item.deviceType === 2" type="success" size="small" plain @click="handleViewSwitch(item)" v-hasPermi="['fishery:deviceSwitch:list']">
+              <el-icon><Operation /></el-icon>开关
+            </el-button>
+            <el-button type="info" size="small" plain @click="handleViewLinkedCtrl(item)" v-hasPermi="['fishery:linkedCtrl:list']">
+              <el-icon><Connection /></el-icon>联动
+            </el-button>
+            <el-button type="warning" size="small" plain @click="handleViewCorrectRecord(item)" v-hasPermi="['fishery:deviceCorrectRecord:list']">
+              <el-icon><Clock /></el-icon>校时
+            </el-button>
+            <el-button size="small" plain @click="handleUpdate(item)" v-hasPermi="['fishery:device:edit']">
+              <el-icon><Edit /></el-icon>修改
+            </el-button>
+          </div>
+        </el-card>
+      </div>
+
       <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
     </el-card>
     <!-- 添加或修改设备管理对话框 -->
@@ -1199,6 +1312,19 @@ const handleSelectionChange = (selection: DeviceVO[]) => {
   multiple.value = !selection.length;
 }
 
+/** 移动端选择 */
+const handleMobileSelect = (item: DeviceVO, checked: boolean | string | number) => {
+  if (checked) {
+    if (!ids.value.includes(item.id)) {
+      ids.value.push(item.id);
+    }
+  } else {
+    ids.value = ids.value.filter(id => id !== item.id);
+  }
+  single.value = ids.value.length != 1;
+  multiple.value = !ids.value.length;
+}
+
 /** 新增按钮操作 */
 const handleAdd = () => {
   reset();
@@ -1713,3 +1839,202 @@ onMounted(() => {
   getList();
 });
 </script>
+
+<style lang="scss" scoped>
+// 移动端卡片样式
+.mobile-device-list {
+  .no-data {
+    padding: 40px 0;
+  }
+
+  .mobile-device-card {
+    margin-bottom: 12px;
+    border-radius: 8px;
+
+    :deep(.el-card__body) {
+      padding: 12px;
+    }
+
+    .card-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding-bottom: 10px;
+      border-bottom: 1px solid #ebeef5;
+
+      .device-info {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        flex: 1;
+        min-width: 0;
+
+        .device-name {
+          font-size: 16px;
+          font-weight: 600;
+          color: #303133;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+
+        .device-type {
+          flex-shrink: 0;
+        }
+      }
+    }
+
+    .info-section {
+      padding: 10px 0;
+      border-bottom: 1px solid #ebeef5;
+
+      &:last-of-type {
+        border-bottom: none;
+      }
+
+      .section-title {
+        font-size: 13px;
+        font-weight: 600;
+        color: #409eff;
+        margin-bottom: 8px;
+        padding-left: 8px;
+        border-left: 3px solid #409eff;
+      }
+
+      .info-list {
+        background-color: #fafafa;
+        border-radius: 6px;
+        padding: 4px 0;
+
+        .info-row {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          padding: 8px 12px;
+          font-size: 13px;
+          border-bottom: 1px dashed #ebeef5;
+
+          &:last-child {
+            border-bottom: none;
+          }
+
+          .label {
+            color: #909399;
+            flex-shrink: 0;
+          }
+
+          .value {
+            color: #303133;
+            font-weight: 500;
+            text-align: right;
+            word-break: break-all;
+            flex: 1;
+            margin-left: 12px;
+          }
+        }
+      }
+
+      .info-grid {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        gap: 6px 12px;
+
+        .info-item {
+          display: flex;
+          align-items: flex-start;
+          font-size: 12px;
+          line-height: 1.5;
+
+          .label {
+            color: #909399;
+            flex-shrink: 0;
+            min-width: 70px;
+
+            &::after {
+              content: ':';
+              margin-right: 4px;
+            }
+          }
+
+          .value {
+            color: #606266;
+            word-break: break-all;
+            flex: 1;
+          }
+        }
+      }
+
+      .sensor-grid {
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+        gap: 6px;
+
+        .sensor-item {
+          text-align: center;
+          padding: 8px 4px;
+          background: linear-gradient(135deg, #f0f7ff 0%, #e8f4ff 100%);
+          border-radius: 6px;
+          border: 1px solid #d9ecff;
+
+          .sensor-label {
+            display: block;
+            font-size: 11px;
+            color: #909399;
+            margin-bottom: 4px;
+          }
+
+          .sensor-value {
+            display: block;
+            font-size: 15px;
+            font-weight: 600;
+            color: #409eff;
+          }
+        }
+      }
+    }
+
+    .card-footer {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 8px;
+      padding-top: 12px;
+      border-top: 1px solid #ebeef5;
+      margin-top: 4px;
+
+      .el-button {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        height: auto;
+        padding: 10px 8px;
+        font-size: 12px;
+        border-radius: 8px;
+        transition: all 0.2s;
+
+        .el-icon {
+          font-size: 18px;
+          margin-bottom: 4px;
+        }
+
+        &:active {
+          transform: scale(0.96);
+        }
+      }
+    }
+  }
+}
+
+// 响应式隐藏
+.hidden-sm-and-down {
+  @media (max-width: 768px) {
+    display: none !important;
+  }
+}
+
+.hidden-sm-and-up {
+  @media (min-width: 769px) {
+    display: none !important;
+  }
+}
+</style>

src/views/fishery/messageWarn/index.vue

@@ -48,7 +48,7 @@
         </el-row>
       </template>
 
-      <el-table v-loading="loading" border :data="messageWarnList" @selection-change="handleSelectionChange">
+      <el-table v-loading="loading" border :data="messageWarnList" @selection-change="handleSelectionChange" class="hidden-sm-and-down">
         <el-table-column type="selection" width="55" align="center" />
         <el-table-column label="用户名" align="center" prop="userName" width="120"/>
         <el-table-column label="手机号" align="center" prop="mobilePhone"  width="120"/>
@@ -92,6 +92,55 @@
         </el-table-column>
       </el-table>
 
+      <!-- 移动端卡片展示 -->
+      <div v-loading="loading" class="mobile-card-list hidden-sm-and-up">
+        <div v-if="messageWarnList.length === 0" class="no-data">
+          <el-empty description="暂无数据" />
+        </div>
+        <el-card v-for="item in messageWarnList" :key="item.id" class="mobile-warn-card" shadow="hover">
+          <!-- 卡片头部 -->
+          <div class="card-header">
+            <dict-tag :options="warn_type" :value="item.warnType" class="warn-type-tag"/>
+            <el-checkbox :model-value="ids.includes(item.id)" @change="handleMobileSelect(item, $event)" />
+          </div>
+
+          <!-- 基本信息 -->
+          <div class="info-section">
+            <div class="info-list">
+              <div class="info-row"><span class="label">告警标题</span><span class="value">{{ item.title || '-' }}</span></div>
+              <div class="info-row"><span class="label">告警时间</span><span class="value">{{ item.createTime || '-' }}</span></div>
+              <div class="info-row"><span class="label">是否已读</span><dict-tag :options="yes_no" :value="item.isRead" /></div>
+              <div class="info-row"><span class="label">用户名</span><span class="value">{{ item.userName || '-' }}</span></div>
+              <div class="info-row"><span class="label">手机号</span><span class="value">{{ item.mobilePhone || '-' }}</span></div>
+              <div class="info-row"><span class="label">设备编号</span><span class="value">{{ item.serialNum || '-' }}</span></div>
+              <div class="info-row"><span class="label">设备名称</span><span class="value">{{ item.deviceName || '-' }}</span></div>
+            </div>
+          </div>
+
+          <!-- 告警内容 -->
+          <div class="message-section">
+            <div class="message-label">告警内容</div>
+            <div class="message-content">{{ item.message || '-' }}</div>
+          </div>
+
+          <!-- 电话通知 -->
+          <div class="notice-section" v-if="item.callNoticeCount && item.callNoticeCount > 0">
+            <span class="notice-label">电话通知</span>
+            <span class="notice-count" @click="handleViewCallNotice(item)">{{ item.callNoticeCount }}次</span>
+          </div>
+
+          <!-- 操作按钮 -->
+          <div class="card-footer">
+            <el-button type="primary" size="small" plain @click="handleView(item)" v-hasPermi="['fishery:messageWarn:query']">
+              <el-icon><View /></el-icon>查看
+            </el-button>
+            <el-button type="danger" size="small" plain @click="handleDelete(item)" v-hasPermi="['fishery:messageWarn:remove']">
+              <el-icon><Delete /></el-icon>删除
+            </el-button>
+          </div>
+        </el-card>
+      </div>
+
       <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
     </el-card>
     <!-- 查看设备告警记录对话框 -->
@@ -339,6 +388,19 @@ const handleSelectionChange = (selection: MessageWarnVO[]) => {
   multiple.value = !selection.length;
 }
 
+/** 移动端选择 */
+const handleMobileSelect = (item: MessageWarnVO, checked: boolean | string | number) => {
+  if (checked) {
+    if (!ids.value.includes(item.id)) {
+      ids.value.push(item.id);
+    }
+  } else {
+    ids.value = ids.value.filter(id => id !== item.id);
+  }
+  single.value = ids.value.length != 1;
+  multiple.value = !ids.value.length;
+}
+
 /** 新增按钮操作 */
 const handleAdd = () => {
   reset();
@@ -403,3 +465,150 @@ onMounted(() => {
   getList();
 });
 </script>
+
+<style lang="scss" scoped>
+// 移动端卡片样式
+.mobile-card-list {
+  .no-data {
+    padding: 40px 0;
+  }
+
+  .mobile-warn-card {
+    margin-bottom: 12px;
+    border-radius: 8px;
+
+    :deep(.el-card__body) {
+      padding: 12px;
+    }
+
+    .card-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding-bottom: 8px;
+      border-bottom: 1px solid #ebeef5;
+    }
+
+    .info-section {
+      padding: 10px 0;
+      border-bottom: 1px solid #ebeef5;
+
+      .info-list {
+        background-color: #fafafa;
+        border-radius: 6px;
+        padding: 4px 0;
+
+        .info-row {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          padding: 6px 12px;
+          font-size: 12px;
+          border-bottom: 1px dashed #ebeef5;
+
+          &:last-child {
+            border-bottom: none;
+          }
+
+          .label {
+            color: #909399;
+            flex-shrink: 0;
+          }
+
+          .value {
+            color: #303133;
+            font-weight: 500;
+            text-align: right;
+            word-break: break-all;
+            flex: 1;
+            margin-left: 12px;
+          }
+        }
+      }
+    }
+
+    .message-section {
+      padding: 10px 0;
+      border-bottom: 1px solid #ebeef5;
+
+      .message-label {
+        font-size: 12px;
+        color: #909399;
+        margin-bottom: 6px;
+      }
+
+      .message-content {
+        font-size: 13px;
+        color: #606266;
+        line-height: 1.6;
+        padding: 8px 12px;
+        background-color: #fef0f0;
+        border-radius: 6px;
+        border-left: 3px solid #f56c6c;
+      }
+    }
+
+    .notice-section {
+      display: flex;
+      align-items: center;
+      padding: 8px 0;
+      font-size: 12px;
+
+      .notice-label {
+        color: #909399;
+      }
+
+      .notice-count {
+        color: #409eff;
+        font-weight: 600;
+        margin-left: 8px;
+        text-decoration: underline;
+        cursor: pointer;
+      }
+    }
+
+    .card-footer {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: 8px;
+      padding-top: 12px;
+      border-top: 1px solid #ebeef5;
+      margin-top: 4px;
+
+      .el-button {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        height: auto;
+        padding: 10px 8px;
+        font-size: 12px;
+        border-radius: 8px;
+        transition: all 0.2s;
+
+        .el-icon {
+          font-size: 18px;
+          margin-bottom: 4px;
+        }
+
+        &:active {
+          transform: scale(0.96);
+        }
+      }
+    }
+  }
+}
+
+// 响应式隐藏
+.hidden-sm-and-down {
+  @media (max-width: 768px) {
+    display: none !important;
+  }
+}
+
+.hidden-sm-and-up {
+  @media (min-width: 769px) {
+    display: none !important;
+  }
+}
+</style>