指标体系-搜索功能BUG修复

src/views/riskPrevention/SafetyProductionManagement/IndexSystem.vue

@@ -12,11 +12,14 @@
       </el-form>
     </div>
     <div class="card-container">
-      <div v-for="(item, index) in cards" :key="index" class="card">
-        <div class="icon-placeholder">icon</div>
-        <div class="card-title">{{ item.title }}</div>
-        <el-button type="primary" @click="viewDetails(item)">查看详情</el-button>
-      </div>
+      <template v-if="showCards.length > 0">
+        <div v-for="(item, index) in showCards" :key="index" class="card">
+          <div class="icon-placeholder">icon</div>
+          <div class="card-title">{{ item.title }}</div>
+          <el-button type="primary" @click="viewDetails(item)">查看详情</el-button>
+        </div>
+      </template>
+      <div v-else class="no-data">没有找到匹配的模型</div>
     </div>
   </div>
 </template>
@@ -28,19 +31,28 @@ const queryParams = ref({
   search: ''
 });
 
-const cards = ref([
+const allCards = [
   { title: '安全生产综合指数风险评估模型' },
   { title: '风险指数风险评估模型' },
   { title: '强度评估模型' },
   { title: '减灾能力评估模型' }
-]);
+];
+
+const showCards = ref([...allCards]);
 
 const handleQuery = () => {
-  console.log('搜索', queryParams.value.search);
+  if (!queryParams.value.search) {
+    showCards.value = [...allCards];
+    return;
+  }
+
+  const searchText = queryParams.value.search.toLowerCase();
+  showCards.value = allCards.filter((card) => card.title.toLowerCase().includes(searchText));
 };
 
 const resetQuery = () => {
   queryParams.value.search = '';
+  showCards.value = [...allCards];
 };
 
 const viewDetails = (item: any) => {
@@ -61,8 +73,8 @@ const viewDetails = (item: any) => {
 
 .card-container {
   display: flex;
-  justify-content: space-between;
   flex-wrap: wrap;
+  gap: 2.66%;
 }
 
 .card {
@@ -90,4 +102,11 @@ const viewDetails = (item: any) => {
 .card-title {
   margin-bottom: 10px;
 }
+
+.no-data {
+  width: 100%;
+  text-align: center;
+  padding: 20px;
+  color: #999;
+}
 </style>