276 lines
7.5 KiB
Vue
276 lines
7.5 KiB
Vue
<!-- SidePanelItem.vue -->
|
||
<template>
|
||
<SidePanelItem title="设施类型及接入情况">
|
||
<a-spin :spinning="loading">
|
||
<div v-if="dataJson.length > 0" class="card-container">
|
||
<div v-for="(item) in dataJson" class="facility-card" @click="imgclick(item)">
|
||
<div class="img_icon">
|
||
<i class="icon iconfont" :class="item?.icon" />
|
||
</div>
|
||
<div class="img_text">
|
||
<div>{{ item.name }}</div>
|
||
<div class="text_num">{{ item.totalNum }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div v-else style="width: 100%;height: 158px;display: flex; align-items: center; justify-content: center;">
|
||
<a-empty description="暂无数据" />
|
||
</div>
|
||
</a-spin>
|
||
</SidePanelItem>
|
||
|
||
<!-- 自定义弹框 -->
|
||
<a-modal v-model:open="modalVisible" title="设施类型及接入情况" width="1536px" :footer="null">
|
||
<div class="modal-content">
|
||
|
||
<DiwenshuijianhuansheshileixingzuchengjijieruqingkuangTwoLayers :datas="jiDiList" :BID="baseid"
|
||
:data="selectedItem" :res="res">
|
||
</DiwenshuijianhuansheshileixingzuchengjijieruqingkuangTwoLayers>
|
||
</div>
|
||
</a-modal>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { ref, onMounted, watch } from 'vue';
|
||
import SidePanelItem from '@/components/SidePanelItem/index.vue';
|
||
import { dwInfoGetKendoListCust } from "@/api/sw";
|
||
import { useJidiSelectEventStore } from "@/store/modules/jidiSelectEvent";
|
||
import DiwenshuijianhuansheshileixingzuchengjijieruqingkuangTwoLayers from "./TwoLayers/diwenshuijianhuansheshileixingzuchengjijieruqingkuangTwoLayers.vue"
|
||
const JidiSelectEventStore = useJidiSelectEventStore();
|
||
// 定义组件名（便于调试和递归）
|
||
defineOptions({
|
||
name: 'diwenshuijianhuansheshileixingzuchengjijieruqingkuang'
|
||
});
|
||
|
||
// 数据类型定义
|
||
interface DataString {
|
||
icon?: string;
|
||
name: string;
|
||
totalNum?: number;
|
||
[key: string]: any;
|
||
}
|
||
|
||
// 图标映射配置（根据dwtp值对应icon）
|
||
const iconMap: Record<string, string> = {
|
||
'1': 'icon-dwsjhDieliangmen',
|
||
'2': 'icon-dwsjhQianzhidangqiang',
|
||
'3': 'icon-dwsjhGeshuimuqiang',
|
||
'4': 'icon-dwsjhQita'
|
||
};
|
||
|
||
const jiDiList: any = ref([
|
||
{
|
||
"baseid": "all",
|
||
"basename": "当前全部",
|
||
"id": "9BFEC848-83EA-AD22-6DE2-10E969476693"
|
||
},
|
||
{
|
||
"baseid": "01",
|
||
"basename": "金沙江干流",
|
||
"id": "A33040B7-8977-D9F1-5E02-D7F0241AB8AA"
|
||
},
|
||
{
|
||
"baseid": "02",
|
||
"basename": "雅砻江干流",
|
||
"id": "C63D6020-995D-FE97-2F4A-F619A7142C79"
|
||
},
|
||
{
|
||
"baseid": "03",
|
||
"basename": "大渡河干流",
|
||
"id": "CCB0766B-F1D4-7DD6-650F-5C556B7231B3"
|
||
},
|
||
{
|
||
"baseid": "04",
|
||
"basename": "乌江干流",
|
||
"id": "E8A66641-B4F4-CC85-0815-38C5B2F93DBD"
|
||
},
|
||
{
|
||
"baseid": "05",
|
||
"basename": "长江上游干流",
|
||
"id": "E02C11E9-CEA5-A030-202F-3BFE84465D03"
|
||
},
|
||
{
|
||
"baseid": "10",
|
||
"basename": "湘西",
|
||
"id": "B1D1D52D-CEEF-6DC4-27DF-9990EB572F8D"
|
||
},
|
||
{
|
||
"baseid": "08",
|
||
"basename": "黄河上游干流",
|
||
"id": "BC6AF135-263D-09A9-D5CA-C99B2598FE6E"
|
||
},
|
||
{
|
||
"baseid": "09",
|
||
"basename": "黄河中游干流",
|
||
"id": "60EEEC28-128F-A2A8-44F3-6EAAC8FD8BB6"
|
||
},
|
||
{
|
||
"baseid": "06",
|
||
"basename": "南盘江-红水河",
|
||
"id": "7BB9A8F4-34B5-42B4-A7FC-CE910AD7F203"
|
||
},
|
||
{
|
||
"baseid": "12",
|
||
"basename": "东北",
|
||
"id": "47F8EF06-924E-E161-FCAF-62A66BBF252D"
|
||
},
|
||
{
|
||
"baseid": "07",
|
||
"basename": "澜沧江干流",
|
||
"id": "A966A4C9-278C-B0DA-2B97-2D10B7A6E96A"
|
||
},
|
||
{
|
||
"baseid": "13",
|
||
"basename": "怒江干流",
|
||
"id": "FA89E8CB-67A8-76DA-DC1E-23AE4C54F9E4"
|
||
},
|
||
{
|
||
"baseid": "11",
|
||
"basename": "闽浙赣",
|
||
"id": "CD98F995-EEB2-1021-D807-DA1B1AD9E49A"
|
||
},
|
||
{
|
||
"baseid": "other",
|
||
"basename": "其他",
|
||
"id": "AFBDFC67-B955-4EFD-959A-014CFB59EBFC"
|
||
}
|
||
]);
|
||
const res = ref({
|
||
hydrodtin: '',
|
||
bldstt: ''
|
||
})
|
||
// 响应式数据
|
||
const dataJson = ref<DataString[]>([]);
|
||
|
||
// 加载状态
|
||
const loading = ref(false);
|
||
const baseid = ref('')
|
||
|
||
// 弹框相关
|
||
const modalVisible = ref(false);
|
||
const selectedItem: any = ref<DataString | null>(null);
|
||
|
||
|
||
const getListData = async () => {
|
||
loading.value = true;
|
||
try {
|
||
const params = {
|
||
"filter": {
|
||
"logic": "and",
|
||
"filters": [
|
||
baseid.value == 'all' ? null : {
|
||
"field": "baseId",
|
||
"operator": "contains",
|
||
"dataType": "string",
|
||
"value": baseid.value
|
||
}
|
||
].filter(Boolean),
|
||
}
|
||
}
|
||
|
||
let res = await dwInfoGetKendoListCust(params)
|
||
let data = res?.data?.data || res?.data || []
|
||
|
||
// 合并接口数据和icon配置
|
||
if (Array.isArray(data) && data.length > 0) {
|
||
dataJson.value = data.map((item: any) => ({
|
||
...item,
|
||
icon: iconMap[item.dwtp] || 'icon-dwsjhQita' // 根据dwtp匹配icon，默认使用"其他"图标
|
||
}))
|
||
} else {
|
||
dataJson.value = [];
|
||
}
|
||
} catch (error) {
|
||
console.error('获取设施类型数据失败:', error);
|
||
dataJson.value = [];
|
||
} finally {
|
||
loading.value = false;
|
||
}
|
||
};
|
||
watch(
|
||
() => JidiSelectEventStore.selectedItem,
|
||
(newVal) => {
|
||
baseid.value = newVal.wbsCode;
|
||
getListData()
|
||
},
|
||
{ deep: true, immediate: true }
|
||
);
|
||
// 卡片点击事件处理
|
||
// const handleCardClick = (item: DataString) => {
|
||
// clickList.value = item;
|
||
// // dialog.current?.open() - 需要根据实际的对话框实现调整
|
||
// res.value = {
|
||
// bldstt: '',
|
||
// hydrodtin: ''
|
||
// };
|
||
// };
|
||
const imgclick = (item: DataString) => {
|
||
// 点击图片处理逻辑
|
||
console.log(item)
|
||
selectedItem.value = item;
|
||
modalVisible.value = true;
|
||
}
|
||
|
||
// 页面加载时执行的逻辑
|
||
onMounted(() => {
|
||
// 可以在这里加载实际的图片数据
|
||
// getListData();
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.card-container {
|
||
width: 406px;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
overflow-x: auto;
|
||
justify-content: space-between;
|
||
cursor: pointer;
|
||
|
||
.facility-card {
|
||
width: 95.5px;
|
||
height: 158px;
|
||
border: 1px solid rgb(229, 236, 245);
|
||
border-radius: 2px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
|
||
.img_icon {
|
||
margin-top: 25px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 40px;
|
||
background-color: rgb(83, 137, 181);
|
||
line-height: 40px;
|
||
color: rgb(255, 255, 255);
|
||
}
|
||
|
||
.img_text {
|
||
margin-top: 20px;
|
||
font-size: 14px;
|
||
color: #333;
|
||
|
||
.text_num {
|
||
width: 100%;
|
||
margin-top: 3px;
|
||
text-align: center;
|
||
// font-size: 16px;
|
||
color: #2f6b98;
|
||
font-size: 18px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
:deep(.ant-spin-nested-loading) {
|
||
height: 158px !important;
|
||
}
|
||
|
||
.modal-content {
|
||
padding: 20px;
|
||
}
|
||
</style> |