feat: 置顶数据支持select条件筛选

src/views/analyse/WaterView.vue

@@ -1,5 +1,5 @@
 <script setup lang="jsx">
-import { ref, watch } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { useRouter } from 'vue-router';
 import { NTabs, NTab, NSelect } from 'naive-ui';
 import { useChatStore } from '@/stores/modules/chatStore';
@@ -135,7 +135,7 @@ const mockData = [
   "remark": null,
   "id": 4469,
   "type": 0,
-  "category": "出水氨氮",
+  "category": "出水氨氮3",
   "time": "2025-03-04 09:08",
   "reason": "出水氨氮仪表故障-连续不变",
   "warningVal": 0.28,
@@ -200,6 +200,12 @@ const mockData = [
   "timeEnd": null
   }
 ]
+
+const topData = computed(() => {
+  console.log( "waterTypeValue.value", waterTypeValue.value );
+  return waterTypeValue.value === '' ? mockData : mockData.filter(({ waterType }) => waterType == waterTypeValue.value);
+})
+
 watch(() => waterTypeValue.value, curValue => {
   onRestore({ warningStatus: warningActive.value, waterType: curValue });
 })
@@ -558,7 +564,7 @@ const handleWelcomeRecommend = question => {
         <p v-show="!recordList.length" class="pt-[30px] text-[12px] text-[#999] text-center">暂无报警数据</p>
         <div class="grid grid-cols-1 gap-[12px]">
           <div v-show="warningActive == 1">
-            <RecodeSquareCardItem v-for="item, index in mockData" :key="item.id" :item="item"
+            <RecodeSquareCardItem v-for="item, index in topData" :key="item.id" :item="item"
               @on-click="handleOpenContent" :style="{ marginBottom: index < 3 ? '10px' : '' }" />
           </div>
           <RecodeSquareCardItem v-for="item in recordList" :key="item.id" :item="item" @on-click="handleOpenContent" />