Przeglądaj źródła

Merge branch 'dev' of https://gogs.tjp.com.cn/maoming/yjhtgl-web into dev

libushang 1 miesiąc temu
rodzic
commit
4aa7e8e98f

+ 8 - 1
src/components/VideoTagEdit/index.vue

@@ -4,7 +4,7 @@
       <div class="title">当前标签</div>
     </div>
     <div v-if="selectTags && selectTags.length > 0" class="tags">
-      <div v-for="(item, index) in selectTags" :key="index" class="tagActive">{{ item.label }}</div>
+      <div v-for="(item, index) in selectTags" :key="index" class="tagActive" @click="cancelSelect(item)">{{ item.label }}</div>
     </div>
     <div v-else class="empty-text">暂无标签</div>
     <div class="title-box" style="margin-top: 20px">
@@ -64,6 +64,13 @@ const handleSelect = (item) => {
     }
   }
 };
+const cancelSelect = (item) => {
+  item.checked = !item.checked;
+  const index = selectTags.value.findIndex((item2) => item2.value === item.value);
+  if (index >= 0) {
+    selectTags.value.splice(index, 1);
+  }
+}
 const handleAdd = () => {
   const tagsId = [];
   selectTags.value.forEach((item) => {

+ 28 - 9
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>