zdsz_vue/src/views/zdsz/enginee/material/progres_statistics/progres_statistics.vue

 <!-- 
    *@description: 进度统计
    *@author: yh Fu
    *@date: 2023-12-25 13:26:18
    *@version: V1.0.5 
    -->

<template>
    <div class="ProgreStatistics_Contain">
        <el-radio-group v-model="currentMenu" style="margin-bottom: 20px;" @input="toModule">
            <el-radio-button label="0">用料统计</el-radio-button>
            <el-radio-button label="1">进度统计</el-radio-button>
            <el-radio-button label="2">可视化进度</el-radio-button>
        </el-radio-group>
        <div class="topContain">
            <el-select 
                v-model="currentType" 
                placeholder="请选择"
                class="projectSelect" 
                popper-class="projectDropDown" 
                :popper-append-to-body="false"
                >
            <el-option
                v-for="e in typeOptions"
                :key="e.value"
                :label="e.label"
                :value="e.value">
                </el-option>
            </el-select>
            <el-button class="searchBtn">查询</el-button>
        </div>
        <el-table
            class="materialStatisticsTable"
            :data="tableData"
            header-cell-style="background-color:#199ED8;border: 2px solid #000066"
            border
            :cell-style="tableRowClassName"
            style="width: 100%">
            <el-table-column
            prop="name"
            width="250"
            label="小区名称"
            >
            </el-table-column>
            <el-table-column
            prop="doing"
            label="未开工（户）"
            >
            </el-table-column>
            <el-table-column
            prop="willDone"
            label="施工（户）">
            </el-table-column>
            <el-table-column
            prop="done"
            label="完工（户）">
            </el-table-column>

        </el-table>
    </div>
</template>

<script>
export default {
    name:'ProgreStatistics',
    data(){
        return {
            currentMenu:1,   // 0:用料管理 1:进度统计 2:可视化进度
            typeOptions:[
                {
                    value: '0',
                    label: '市政工程'
                }, 
                {
                    value: '1',
                    label: '工业工程'
                },
                {
                    value: '2',
                    label: '民用工程'
                }, 
                {
                    value: '3',
                    label: '危险作业'
                }, 
                {
                    value: '4',
                    label: '顶管工程'
                },
                {
                    value: '5',
                    label: '基建工程'
                }
            ],
            tableData: [
                {
                    name: '兰亭湖畔',
                    doing: '30',
                    willDone:'19',
                    done:'20'
                }, 
                {
                    name: '清华园',
                    doing: '30',
                    willDone:'19',
                    done:'20'
                }, 
                {
                    name: '领秀世家',
                    doing: '30',
                    willDone:'19',
                    done:'20'
                }, 
                {
                    name: '上东府里',
                    doing: '30',
                    willDone:'19',
                    done:'20'
                }, 
                {
                    name: '龙腾香格里',
                    doing: '30',
                    willDone:'19',
                    done:'20'
                }, 
            ],
            currentType:'管'
        }
    },
    methods:{
        tableRowClassName(){
            return "background:#199ED8;border: 2px solid #000066"
        },
        toModule(){
            console.log(this.$router)
            const currentPage = this.currentMenu == 0 ? 'material_statistics' : this.currentMenu == 1 ? 'progres_statistics' : 'progres_visual'
            this.$router.push({
                path:`/${currentPage}`
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.ProgreStatistics_Contain{
    width: 100%;
    height: 100%;
    padding: 1%;
    .topContain{  
        display: flex;
        justify-content: space-between;
        width: 38%;
        .searchBtn{
            width: 11%;
            background: linear-gradient(to right , #2197F2, #0BB0DE);
            color: #fff;
        }
        ::v-deep .projectSelect{
            .el-input__inner{
                 background: linear-gradient(to right , #2197F2, #0BB0DE);
                color: #fff;
            }
        }
        .projectDropDown{
            background: linear-gradient(to right , #2197F2, #0BB0DE);
            .el-select-dropdown__item{
                background: linear-gradient(to right , #2197F2, #0BB0DE);
                color: #fff;
            }
            ::v-deep .el-select-dropdown__list {
                padding-top: 0 !important;
                padding-bottom: 0;
            }

        }
    }
    .materialStatisticsTable{
        margin-top: 1%;
        border: 2px solid #000066 !important;
        cursor: pointer;
        ::v-deep .el-table__row{
            background-color: #2F4280;
        }
        ::v-deep tbody tr:hover>td { 
            transform: translateX(8px) translateY(-8px);
            z-index: 100;
            box-shadow: 10px 10px 10px 10px #182652;
            background-color: #30478E;
            color: #fff;
        }	
    }
    .materialStatisticsTable::before{
        background-color:#000066 ;
    }
    .materialStatisticsTable::after{
        background-color:#000066 ;
    }
}
</style>