feat 异常警告

src/components/home/warning.vue

@@ -1,10 +1,18 @@
+<script setup lang="ts">
+function goToWarningList() {
+  uni.navigateTo({
+    url: '/pages/warning/index',
+  })
+}
+</script>
+
 <template>
   <view class="card">
     <view class="card-header">
       <text class="card-title">
         异常警告
       </text>
-      <wd-button variant="text">
+      <wd-button variant="text" @tap="goToWarningList">
         查看全部
       </wd-button>
     </view>

src/components/warning/filter.vue

@@ -0,0 +1,122 @@
+<script setup lang="ts">
+const activeTab = ref(0)
+const dateRange = ref('')
+const level = ref('')
+
+const tabs = ['全部', '定位异常', '高温异常']
+
+const dateOptions = [
+  { value: 'today', text: '今天' },
+  { value: 'yesterday', text: '昨天' },
+  { value: 'week', text: '本周' },
+  { value: 'month', text: '本月' },
+]
+
+const levelOptions = [
+  { value: 'all', text: '全部级别' },
+  { value: 'critical', text: '严重' },
+  { value: 'warning', text: '警告' },
+  { value: 'info', text: '提醒' },
+]
+
+const totalCount = ref(8)
+const unhandledCount = ref(3)
+</script>
+
+<template>
+  <view class="warning-filter">
+    <!-- 标签页 -->
+    <view class="tabs">
+      <view
+        v-for="(tab, index) in tabs"
+        :key="index"
+        class="tab-item"
+        :class="{ active: activeTab === index }"
+        @tap="activeTab = index"
+      >
+        <text class="tab-text">
+          {{ tab }}
+        </text>
+      </view>
+    </view>
+
+    <!-- 筛选条件 -->
+    <view class="filters">
+      <uni-data-select v-model="dateRange" :localdata="dateOptions" />
+      <uni-data-select v-model="level" :localdata="levelOptions" />
+    </view>
+  </view>
+
+  <!-- 警告统计 -->
+  <view class="warning-summary">
+    <text class="summary-text">
+      共{{ totalCount }}条警告，其中<text class="highlight">
+        {{ unhandledCount }}条
+      </text>未处理
+    </text>
+    <text class="unhandled-title">
+      未处理警告 ({{ unhandledCount }}条)
+    </text>
+  </view>
+</template>
+
+<style scoped>
+.warning-filter {
+  background-color: #ffffff;
+  border-radius: 12px;
+  padding: 16px;
+}
+
+.tabs {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 16px;
+}
+
+.tab-item {
+  flex: 1;
+  background-color: #f5f5f5;
+  border-radius: 8px;
+  padding: 12px 0;
+  text-align: center;
+}
+
+.tab-item.active {
+  background-color: #ff4d4f;
+}
+
+.tab-text {
+  font-size: 18px;
+  color: #333;
+}
+
+.tab-item.active .tab-text {
+  color: #fff;
+}
+
+.filters {
+  display: flex;
+  gap: 12px;
+}
+
+.warning-summary {
+  padding: 16px 0;
+}
+
+.summary-text {
+  font-size: 18px;
+  color: #333;
+  margin-bottom: 12px;
+  display: block;
+}
+
+.highlight {
+  color: #ff4d4f;
+}
+
+.unhandled-title {
+  font-size: 18px;
+  font-weight: bold;
+  color: #333;
+}
+</style>

src/components/warning/item.vue

@@ -0,0 +1,104 @@
+<script setup lang="ts">
+defineProps<{
+  deviceName: string
+  tags: string[]
+  time: string
+  trigger: string
+  status?: '未处理' | '已处理'
+}>()
+</script>
+
+<template>
+  <view class="warning-item">
+    <view class="item-header">
+      <text class="device-name">
+        {{ deviceName }}
+      </text>
+      <text class="status" :class="status === '已处理' ? 'processed' : 'unprocessed'">
+        {{ status || '未处理' }}
+      </text>
+    </view>
+
+    <view class="tags">
+      <view v-for="(tag, index) in tags" :key="index" class="tag">
+        <text class="tag-text">
+          {{ tag }}
+        </text>
+      </view>
+    </view>
+
+    <text class="time">
+      {{ time }}
+    </text>
+    <text class="trigger">
+      {{ trigger }}
+    </text>
+  </view>
+</template>
+
+<style scoped>
+.warning-item {
+  background-color: #ffffff;
+  border-radius: 12px;
+  padding: 16px;
+  /* border-left: 4px solid #ff4d4f; */
+}
+
+.item-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.device-name {
+  font-size: 22px;
+  font-weight: bold;
+  color: #333;
+}
+
+.status {
+  font-size: 14px;
+  padding: 4px 12px;
+  border-radius: 12px;
+}
+
+.unprocessed {
+  background-color: #fff1f0;
+  color: #ff4d4f;
+}
+
+.processed {
+  background-color: #f6ffed;
+  color: #52c41a;
+}
+
+.tags {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+
+.tag {
+  background-color: #fff1f0;
+  border-radius: 8px;
+  padding: 4px 12px;
+}
+
+.tag-text {
+  font-size: 14px;
+  color: #ff4d4f;
+}
+
+.time {
+  font-size: 18px;
+  color: #666;
+  display: block;
+  margin-bottom: 8px;
+}
+
+.trigger {
+  font-size: 18px;
+  color: #666;
+}
+</style>