WholeProcessPlatform/frontend/src/modules/diwenshuijianhuansheshileixingzuchengjijieruqingkuang/index.vue

<!-- SidePanelItem.vue -->
<template>
    <SidePanelItem title="设施类型及接入情况">
        <div class="card-container">
            <div v-for="(item) in dataJson" class="facility-card">
                <div class="img_icon">
                    <i class="icon iconfont" :class="item?.icon" />
                </div>
                <div class="img_text">
                    <div>{{ item.nameString }}</div>
                    <div class="text_num">{{ item.total + item.zj }}</div>
                </div>
            </div>
            <!-- <a-card v-for="(item, index) in dataJson" :key="index" class="facility-card" type="inner" size="small"
                @click="handleCardClick(item)">
                <template #title>
                    <i class="icon iconfont" :class="item?.icon" style="
                            display: block;
                            margin: 0 auto;
                            width: 40px;
                            height: 40px;
                            border-radius: 40px;
                            background-color: #5389B5;
                            line-height: 40px;
                            color: #FFFFFF;
                        " />
                </template>
<a-tooltip>
    <div style="font-size: 14px; color: #333">{{ item.nameString }}</div>
    <div style="padding: 4px 0" class="showNum">
        <span>{{ item.total + item.zj }}</span>
    </div>
</a-tooltip>
</a-card> -->
        </div>

        <!-- <div v-else>
            <a-empty />
        </div> -->
    </SidePanelItem>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import SidePanelItem from '@/components/SidePanelItem/index.vue';

// 定义组件名（便于调试和递归）
defineOptions({
    name: 'diwenshuijianhuansheshileixingzuchengjijieruqingkuang'
});

// 数据类型定义
interface DataString {
    icon?: string;
    nameString: string;
    num?: number;
    total: number;
    zj: number;
    [key: string]: any;
}

// 响应式数据
const dataJson = ref<DataString[]>([
    {
        icon: 'icon-dwsjhDieliangmen',
        nameString: '叠梁门',
        num: 18,
        total: 18,
        zj: 0
    },
    {
        icon: 'icon-dwsjhQianzhidangqiang',
        nameString: '前置挡墙',
        num: 4,
        total: 4,
        zj: 0
    },
    {
        icon: 'icon-dwsjhGeshuimuqiang',
        nameString: '隔水幕墙',
        num: 1,
        total: 1,
        zj: 0
    },
    {
        icon: 'icon-dwsjhQita',
        nameString: '其他',
        num: 1,
        total: 1,
        zj: 0
    }
]);

// 卡片点击事件处理
// const handleCardClick = (item: DataString) => {
//     clickList.value = item;
//     // dialog.current?.open() - 需要根据实际的对话框实现调整
//     res.value = {
//         bldstt: '',
//         hydrodtin: ''
//     };
// };

// 页面加载时执行的逻辑
onMounted(() => {
    // 可以在这里加载实际的图片数据
    // loadData();
});
</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;
            }
        }
    }
}
</style>