operation_wx/pages/equipment/index.wxml

<view class="container">
  <!-- 告警分类筛选栏 -->
  <view class="filter_top" >
  <view class="filter-bar">
    <view class="filter-item {{activeFilter === 'all' ? 'filter-active' : ''}}" bindtap="switchFilter" data-type="all">
      全部消息
      <span class="filter-badge" wx:if="{{alertCount.all > 0}}">{{alertCount.all}}</span>
    </view>
    <view class="filter-item {{activeFilter === 'car' ? 'filter-active' : ''}}" bindtap="switchFilter" data-type="car">
      日常消息
      <span class="filter-badge" wx:if="{{alertCount.car > 0}}">{{alertCount.car}}</span>
    </view>
    <view class="filter-item {{activeFilter === 'station' ? 'filter-active' : ''}}" bindtap="switchFilter" data-type="station">
      车辆消息
      <span class="filter-badge" wx:if="{{alertCount.station > 0}}">{{alertCount.station}}</span>
    </view>
    <view class="filter-item {{activeFilter === 'user' ? 'filter-active' : ''}}" bindtap="switchFilter" data-type="user">
      设备消息
      <span class="filter-badge" wx:if="{{alertCount.user > 0}}">{{alertCount.user}}</span>
    </view>
    <view class="filter-item {{activeFilter === 'user' ? 'filter-active' : ''}}" bindtap="switchFilter" data-type="user">
      运维消息
      <span class="filter-badge" wx:if="{{alertCount.user > 0}}">{{alertCount.user}}</span>
    </view>
  </view>

  <!-- 状态筛选（未读/已读/已处理） -->
  <view class="status-filter">
    <view class="status-item {{activeStatus === 'unread' ? 'status-active' : ''}}" bindtap="switchStatus" data-status="unread">全部</view>
    <view class="status-item {{activeStatus === 'read' ? 'status-active' : ''}}" bindtap="switchStatus" data-status="read">触发消息</view>
    <view class="status-item {{activeStatus === 'handled' ? 'status-active' : ''}}" bindtap="switchStatus" data-status="handled">恢复消息</view>
  </view>
</view>
<view style="height: 230rpx;"></view>
  <!-- 告警列表 -->
  <view class="alert-list">
    <!-- 空数据占位 -->
    <view class="empty-wrap" wx:if="{{filteredAlerts.length === 0}}">
      <view class="empty-icon">🔔</view>
      <view class="empty-text">{{activeFilter === 'all' ? '暂无未读消息' : '暂无该消息类型'}}</view>
      <view class="empty-subtext" wx:if="{{activeStatus === 'unread'}}">当前无未读消息，运营状态良好</view>
    </view>

    <!-- 告警列表项 -->
    <view class="alert-card" wx:for="{{filteredAlerts}}" wx:key="faultId" bindtap="toAlertDetail" data-alert="{{item}}">
      <!-- 未读角标 -->
      <view class="unread-tag" wx:if="{{item.status === 'unread'}}"></view>
      
      <!-- 告警类型图标+级别 mockAlerts -->
      <view class="alert-left">
        <view class="alert-icon {{item.level === 'critical' ? 'icon-critical' : item.level === 'warning' ? 'icon-warning' : 'icon-info'}}">
          {{item.level === 'critical' ? '危' : item.level === 'warning' ? '警' : '提'}}
        </view>
        <view class="alert-type">{{item.controllerId}}</view>
      </view>

      <!-- 告警核心信息 -->
      <view class="alert-middle">
        <view class="alert-title">{{item.faultdescs}}</view>
        <view class="alert-desc">{{item.deviceId}}</view>
        <view class="alert-info">
          <text>{{item.controllerId}}</text>
          <text>{{item.createtime}}</text>
        </view>
      </view>

      <!-- 操作按钮 -->
      <view class="alert-right">
        <button class="handle-btn" wx:if="{{item.faultstatus !== 0}}" bindtap="handleAlert" data-id="{{item.id}}" catchtap="true">
          处理
        </button>
        <view class="handled-tag" wx:else>已处理</view>
      </view>
    </view>
  </view>

  <!-- 底部批量操作栏（有未处理告警时显示） -->
  <view class="batch-bar" wx:if="{{hasUnHandled}}">
    <button class="batch-read" bindtap="batchReadAll">标记全部已读</button>
    <button class="batch-handle" bindtap="batchHandleAll">标记全部已处理</button>
  </view>
</view>