feat: 水质报警支持搜索

src/views/analyse/WaterView.vue

@@ -1,7 +1,7 @@
 <script setup lang="jsx">
 import { computed, ref, watch } from 'vue';
 import { useRouter } from 'vue-router';
-import { NTabs, NTab, NSelect } from 'naive-ui';
+import { NTabs, NTab, NSelect, NInput, NButton } from 'naive-ui';
 import { useChatStore } from '@/stores/modules/chatStore';
 import { BaseTable, ChatWelcome, RecodeSquareCardItem, TheSubMenu, TheChatView } from "@/components";
 import { useInfinite, useRecommend, useFetchStream, useScroll } from '@/composables';
@@ -47,6 +47,8 @@ const modalData = ref({});
 
 // 菜单水数据类型
 const waterTypeValue = ref('');
+const reasonValue = ref('');
+const topData = ref([]);
 
 const options = [
   { label: '全部', value: '' },
@@ -54,6 +56,15 @@ const options = [
   { label: '出水', value: 1 }
 ]
 
+const inputThemeOverrides = {
+  border: '1px solid #d7d9e5',
+  borderRadius: '8px',
+  borderHover: '1px solid #2454FF',
+  borderFocus: '1px solid #2454FF',
+  boxShadowFocus: '0 0 0 2px rgba(36, 84, 255, 0.2)',
+  text: '#333'
+}
+
 const mockData = [
   {
     "createBy": "task-job",
@@ -201,10 +212,22 @@ const mockData = [
   }
 ]
 
-const topData = computed(() => {
-  console.log( "waterTypeValue.value", waterTypeValue.value );
-  return waterTypeValue.value === '' ? mockData : mockData.filter(({ waterType }) => waterType == waterTypeValue.value);
-})
+const getTopData = () => {
+  let list = [...mockData];
+  if ( waterTypeValue.value ) {
+    list = list.filter(({ waterType }) => waterType == waterTypeValue.value)
+  }
+  if ( reasonValue.value ) {
+    list = list.filter(({ reason }) => reason.includes(reasonValue.value))
+  }
+  console.log( "list", list );
+  topData.value = list;
+}
+
+
+// const topData = computed(() => {
+//   return waterTypeValue.value === '' ? mockData : mockData.filter(({ waterType }) => waterType == waterTypeValue.value);
+// })
 
 watch(() => waterTypeValue.value, curValue => {
   onRestore({ warningStatus: warningActive.value, waterType: curValue });
@@ -389,9 +412,10 @@ const handleOpenContent = async (item) => {
 }
 
 const onChangeTabs = warningStatus => {
+  getTopData();
   resetConfiguration();
   warningActive.value = warningStatus;
-  onRestore({ warningStatus });
+  onRestore({ warningStatus, reason: reasonValue.value });
   subMenuRef.value.scrollToTop();
 }
 
@@ -543,6 +567,24 @@ const handleWelcomeRecommend = question => {
   chatStore.setChatQuestion(question);
   router.push('/answer');
 }
+
+// 增加报警信息搜索
+const onEnterSearch = () => {
+  onRestore({ warningStatus: warningActive.value, waterType: waterTypeValue.value, reason: reasonValue.value });
+  getTopData();
+}
+const onClearSearch = () => {
+  reasonValue.value = '';
+  onEnterSearch();
+  getTopData();
+}
+
+const onChangeWaterType = (e) => {
+  waterTypeValue.value = e;
+  getTopData();
+}
+
+getTopData();
 </script>
 
 <template>
@@ -555,7 +597,10 @@ const handleWelcomeRecommend = question => {
             <n-tab name="thebeatles" tab="历史报警" @click="onChangeTabs(1)"></n-tab>
           </n-tabs>
           <div class="select-card">
-            <n-select v-model:value="waterTypeValue" :options="options" size="tiny" />
+            <NInput v-model:value="reasonValue" size="small" :theme-overrides="inputThemeOverrides" placeholder="请输入指标名称" @clear="onClearSearch" @keyup.enter="onEnterSearch" clearable></NInput>
+          </div>
+          <div class="select-card">
+            <n-select v-model:value="waterTypeValue" :options="options" size="small" :on-update:value="onChangeWaterType" />
           </div>
         </div>
       </template>

src/views/data/DataView.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { onMounted, ref, onUnmounted, computed } from 'vue';
-import { NDatePicker, NScrollbar, NDataTable, NPagination } from 'naive-ui';
+import { NScrollbar, NDataTable, NPagination } from 'naive-ui';
 import dayjs from 'dayjs';
 import { TheChatView } from '@/components';
 import { dataApi } from '@/api/data';
@@ -99,7 +99,7 @@ const initEchartData = async() => {
     { name: "#2缺氧氨氮", data: seriesData5 },
     { name: "#1缺氧硝酸盐", data: seriesData6 },
     { name: "#2缺氧硝酸盐", data: seriesData7 },
-    { name: "二沉池正鳞酸盐", data: seriesData8 },
+    { name: "二沉池正磷酸盐", data: seriesData8 },
   ]
 
   const option = getEchartLineOptions({ xAxisData, seriesData: seriesData });

src/views/data/config.js

@@ -79,7 +79,7 @@ export const columns = [
   //   render: ({ hyzlsyAll }) => formatTofixed(hyzlsyAll)
   // },
   {
-    title: "二沉池正鳞酸盐",
+    title: "二沉池正磷酸盐",
     key: "tpRccJqr",
     width: 100,
     render: ({ tpRccJqr }) => formatTofixed(tpRccJqr)
@@ -311,7 +311,7 @@ export const getEchartLineOptions = ({ xAxisData, seriesData }) => {
       },
       {
         show: !!xAxisData.length,
-        data: ["二沉池正鳞酸盐", "#2好氧池硝酸盐", "#2缺氧氨氮", "#2缺氧硝酸盐"],
+        data: ["二沉池正磷酸盐", "#2好氧池硝酸盐", "#2缺氧氨氮", "#2缺氧硝酸盐"],
         top: 35,
         left: 10,
         icon: "rect",