123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201 |
- <!--
- *@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>
|