Merge remote-tracking branch 'origin/master'

luohairen

2024-11-25 87e3d52c62233ad44bd7bac3f43e5348a2de4e94

 src/views/components/projectOverview.vue

New file
@@ -0,0 +1,339 @@
<template>
    <div class="overview-bottom">
        <div class="abnormal" @click="showAbnormal">
            <div style="margin-bottom: 30px">异常项目情况统计</div>
            <div>
                <div class="abnormal-center">
                    流程异常项目：<span
                        style="font-size: 16px; font-weight: 700"
                        >{{
                            countExceptionProjectData.processExceptionProject
                        }}</span
                    >
                </div>
                <div class="abnormal-center">
                    资金异常项目：<span
                        style="font-size: 16px; font-weight: 700"
                        >0</span
                    >
                </div>
                <div class="abnormal-center">
                    进度异常项目：<span
                        style="font-size: 16px; font-weight: 700"
                        >0</span
                    >
                </div>
            </div>
            <div class="abnormal-img"></div>
        </div>
        <div class="overview-div custom-min-width">
            <div
                v-for="i in calculation"
                :key="i.text"
                :style="setbcStyle(i.text)"
                class="listings"
                @click="showDetail(i.text)"
            >
                <div :style="setTextStyle(i.text)" class="title">
                    {{ i.text }}
                </div>
                <div class="conter">
                    <div :style="setTextColor(i.text)" class="mun">
                        {{ i.mun }}
                    </div>
                    <div class="statistics">
                        <div>{{ i.statistics }}</div>
                        <div :style="setTextColor(i.text)">
                            {{ i.statisticsMun
                            }}<span style="font-size: 18px">亿</span>
                        </div>
                    </div>
                </div>
            </div>
            <!-- <div class="listings">
                <div class="title">
                    储
                </div>
                <div class="conter">
                    <div class="mun">44</div>
                    <div class="statistics">
                        <div>储备项目数量统计</div>
                        <div class="statistics-mun">1233<span style="font-size: 18px;">亿</span></div>
                    </div>
                </div>
            </div>
            <div class="listings">
                <div class="title">
                    储
                </div>
                <div class="conter">
                    <div class="mun">44</div>
                    <div class="statistics">
                        <div>储备项目数量统计</div>
                        <div class="statistics-mun">1233<span style="font-size: 18px;">亿</span></div>
                    </div>
                </div>
            </div>
            <div class="listings">
                <div class="title">
                    储
                </div>
                <div class="conter">
                    <div class="mun">44</div>
                    <div class="statistics">
                        <div>储备项目数量统计</div>
                        <div class="statistics-mun">1233<span style="font-size: 18px;">亿</span></div>
                    </div>
                </div>
            </div>
            <div class="listings">
                <div class="title">
                    储
                </div>
                <div class="conter">
                    <div class="mun">44</div>
                    <div class="statistics">
                        <div>储备项目数量统计</div>
                        <div class="statistics-mun">1233<span style="font-size: 18px;">亿</span></div>
                    </div>
                </div>
            </div>
            <div class="listings">
                <div class="title">
                    储
                </div>
                <div class="conter">
                    <div class="mun">44</div>
                    <div class="statistics">
                        <div>储备项目数量统计</div>
                        <div class="statistics-mun">1233<span style="font-size: 18px;">亿</span></div>
                    </div>
                </div>
            </div>
            <div class="listings">
                <div class="title">
                    储
                </div>
                <div class="conter">
                    <div class="mun">44</div>
                    <div class="statistics">
                        <div>储备项目数量统计</div>
                        <div class="statistics-mun">1233<span style="font-size: 18px;">亿</span></div>
                    </div>
                </div>
            </div>
            <div class="listings">
                <div class="title active">
                    储
                </div>
                <div class="conter">
                    <div class="mun">44</div>
                    <div class="statistics">
                        <div>储备项目数量统计</div>
                        <div class="statistics-mun">1233<span style="font-size: 18px;">亿</span></div>
                    </div>
                </div>
            </div> -->
        </div>
    </div>
</template>

<script >
export default {
    name: "Index",
    data() {
        return {}
    },
    props: {
        calculation: Array,
        countExceptionProjectData: Object,
    },
    watch: {
        // calculation: {
        //     handler(val) {
        //         console.log("11111" + val);

        //     },
        // },
        // countExceptionProjectData: {
        //     handler(val) {
        //         console.log("22222" + val);

        //     },
        // },
    },
    methods: {
        setTextStyle(text) {
            if (text === '储') return 'background-color:#3369FF';
            if (text === '建') return 'background-color:#64ADFD';
            if (text === '省') return 'background-color:#FF5E57';
            if (text === '市') return 'background-color:#FFA83F';
            if (text === '新') return 'background-color:#5DD1E5';
            if (text === '竣') return 'background-color:#576BF5';
            if (text === '县') return 'background-color:#3369FF';
            if (text === '普') return 'background-color:#64ADFD';
            return '';
        },

        setTextColor(text) {
            if (text === '储') return 'color:#3369FF';
            if (text === '建') return 'color:#64ADFD';
            if (text === '省') return 'color:#FF5E57';
            if (text === '市') return 'color:#FFA83F';
            if (text === '新') return 'color:#5DD1E5';
            if (text === '竣') return 'color:#576BF5';
            if (text === '县') return 'color:#3369FF';
            if (text === '普') return 'color:#64ADFD';
            return '';
        },

        setbcStyle(text) {
            if (text === '储') return 'background-color:#EAF0FF';
            if (text === '建') return 'background-color:#EFF7FF';
            if (text === '省') return 'background-color:#FEEEED';
            if (text === '市') return 'background-color:#FFF6EB';
            if (text === '新') return 'background-color:#EEFAFC';
            if (text === '竣') return 'background-color:#EEF0FE';
            if (text === '县') return 'background-color:#EAF0FF';
            if (text === '普') return 'background-color:#EFF7FF';
            return '';
        },
        // 跳转到异常项目
        showAbnormal() {
            console.log('跳转异常项目');
            this.$router.push({
                path: 'projectEngineering/project/abnormalProject'
            });
        },

        // 跳转到对应的项目库
        showDetail(text) {
            console.log('跳转到对应的项目库', text);
            switch (text) {
                case '储':
                    this.$router.push({
                        path: '/projectEngineering/project/reserveProjects',
                        query: {
                            projectCategory: '1'
                        }
                    });
                    break;
                case '新':
                    this.$router.push({
                        path: '/projectEngineering/project/previousProjects',
                        query: {
                            projectCategory: '2'
                        }
                    });
                    break;
                case '建':
                    this.$router.push({
                        path: '/projectEngineering/project/implementationProject',
                        query: {
                            projectCategory: '3'
                        }
                    });
                    break;
                case '竣':
                    this.$router.push({
                        path: '/projectEngineering/project/completedProjects',
                        query: {
                            projectCategory: '4'
                        }
                    });
                    break;
                default:
                    break;
            }
        }
    }
}
</script>
<style lang="scss" scoped>
.overview-bottom {
    display: flex;
    justify-content: space-between;

    .abnormal {
        position: relative;
        width: 25%;
        min-width: 342px;
        height: 200px;
        background-image: url(../../assets/images/b.png);
        background-size: 100% auto;
        border-radius: 6px;
        font-size: 16px;
        color: #ffffff;
        padding: 20px 0 0 20px;

        .abnormal-center {
            margin-bottom: 15px;
        }

        .abnormal-img {
            position: absolute;
            right: 50px;
            bottom: 20px;
            width: 100px;
            height: 100px;
            background-image: url(../../assets/images/c.png);
        }
    }

    .custom-min-width {
        min-width: 1250px;
        width: 1250px;
    }

    .listings {
        width: 300px;
        height: 90px;
        border-radius: 6px;
        display: flex;
        align-items: center;

        .title {
            width: 45px;
            height: 45px;
            font-size: 24px;
            border-radius: 8px;
            line-height: 45px;
            text-align: center;
            margin-left: 15px;
            color: #ffffff;
        }

        .active {
            background-color: #3369ff;
        }

        .conter {
            margin-left: 10px;

            .mun {
                font-size: 30px;
                line-height: 32px;
            }

            .statistics {
                width: 200px;
                display: flex;
                justify-content: space-between;
                align-items: center;

                // .statistics-mun {
                //     // color: #3369FF;
                // }
            }
        }
    }
}
.overview-div {
    min-width: 1250px;
    width: 1250px;
    gap: 10px;
    flex-wrap: wrap;
    display: flex;
    margin-left: 10px;
}
</style>