|
@@ -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>
|