Gyyq-Upstairs/src/views/components/analysis/projectList.vue

<template>
    <div class="card-container">
        <!-- 卡片内容区 -->
        <div v-loading="loading" class="card-wrapper">
            <!-- 每个项目卡片 -->
            <div v-for="(item, index) in postList" :key="index" class="project-card">
                <!-- 标题 -->
                <div class="card-header">
                    <span class="project-name" @click="getInfo(item, 'detail')">{{ item.name }}</span>
                </div>
                
                <!-- 第一行内容 -->
                <div class="card-row">
                    <div class="card-item">
                        <span class="label">状态</span>
                        <span class="value" :style="{ color: xzflColors[xzflMap[item.xzfl]] }">
                            {{ xzflMap[item.xzfl] }}
                        </span>
                    </div>
                    <div class="card-item">
                        <span class="label">总投资额</span>
                        <span class="value">{{ item.ztze || 0 }} 万元</span>
                    </div>
                    <div class="card-item">
                        <span class="label">建筑面积</span>
                        <span class="value">{{ item.zydmj || 0 }} 平方米</span>
                    </div>
                </div>
                
                <!-- 第二行内容 -->
                <div class="card-row">
                    <div class="card-item">
                        <span class="label">所在区域</span>
                        <span class="value">{{ ssgnqMap[item.ssgnq] || "未填写" }}</span>
                    </div>
                    <div class="card-item">
                        <span class="label">联系人</span>
                        <span class="value">{{ item.projectLeader || "未填写" }}</span>
                    </div>
                    <div class="card-item">
                        <span class="label">联系方式</span>
                        <span class="value">{{ item.phone || "未填写" }}</span>
                    </div>
                </div>
            </div>
            <div class="project-name" style="width: 100%;text-align: right;" @click="getInfotwo()"><span>查看更多</span></div>
        </div>
    </div>
</template>

<script>
import { getBasicInformationPage } from "@/api/ManageApi/index";
import { checkPermi, checkRole } from "@/utils/permission";

export default {
    name: "CardContent",
    dicts: ["xzfl"],
    data() {
        return {
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 项目表格数据
            postList: [],
            // 状态颜色映射
            xzflColors: {
                '在建': '#6EDABE',
                '拟建': '#FFBF6B',
                '已建': '#2B62F1'
            },
            //状态文本映射
            ssgnqMap: {
                1: '高贸区',
                2: '科创区',
                3: '度假区',
                4: '商务区',
                5: '苏相合作区'
            },
            xzflMap: {
                1: '已建',
                2: '在建',
                3: '拟建'
            },
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                xzfl: '',
                name: '',
                xmfrdwxz: '',
                dateRange: '',
                status: ''
            },
        };
    },
    created() {
        this.getList();
    },
    methods: {
        checkPermi,
        checkRole,
        /** 查询项目列表 */
        getList() {
            this.loading = true;

            // 处理日期范围参数
            const params = {
                ...this.queryParams,
                begainTime: this.queryParams.dateRange ? this.queryParams.dateRange[0] : undefined,
                endTime: this.queryParams.dateRange ? this.queryParams.dateRange[1] : undefined
            };

            // console.log('【查询参数】', params); 

            getBasicInformationPage(params).then((response) => {
                this.postList = response.data.records;
                this.total = response.data.total;
                this.loading = false;
            }).catch(error => {
                console.error('查询失败:', error);
                this.loading = false;
            });
        },

        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.id);
            this.single = selection.length !== 1;
            this.multiple = !selection.length;
        },

        /** 详情按钮操作 */
        getInfo(row, type) {
            this.$store.commit("SET_CRUMBS", "项目详情");
            const id = row.id || this.ids[0];
            this.$router.push({ path: `/manage-add/${id}`, query: { action: type } });
        },
        getInfotwo() {
            this.$router.push({ path: `/manage` });
        },
    },
};
</script>

<style scoped>
.card-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 1rem;
    border-radius: 0.5rem;
    height: 26rem;
    padding: .5rem;
}

.project-card {
    border: 1px solid #ebeef5;
    border-radius: 0.5rem;
    padding: 1rem 1rem 0 1rem;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    transition: all 0.3s;
}

.project-card:hover {
    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.15);
}

.card-header {
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #f0f0f0;
}

.project-name {
    color: #2B62F1;
    cursor: pointer;
    font-family: aliregular;
    font-size: 0.8rem;
}

.project-name:hover {
    text-decoration: underline;
}

.card-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.card-item {
    flex: 1;
    padding: 0 0.5rem;
    display: flex;
    flex-direction: column;
    gap: .3rem;
    margin-bottom: 0.5rem;
}

.label {
    color: #9E9E9E;
    font-family: aliregular;
    font-size: 0.8rem;
}

.value {
    color: #3D424C;
    font-size: 0.8rem;
    font-family:aliregular ;
}
</style>