WholeProcessPlatform/frontend/src/modules/diwenshuijianhuansheshileixingzuchengjijieruqingkuang/index.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>