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

<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-button label="3">可视化进度</el-radio-button>
        </el-radio-group>
        <div class="topContain">
          <el-form :model="queryParams" ref="queryForm" size="small" :inline="true"  v-show="showSearch" label-width="68px">
            <el-form-item label="行政区" prop="district">
              <el-select v-model="queryParams.district" placeholder="请选择行政区" clearable
                         @change="queryParams.areaId = undefined;getAreaList(queryParams.district)"
                         @clear="queryParams.areaId = undefined;areaList=[];
                   queryParams.buildingId = undefined;buildingList=[];
                   queryParams.unitId = undefined;unitList=[]">
                <el-option
                  v-for="dict in dict.type.district"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="小区名称" prop="areaId">
              <el-select v-model="queryParams.areaId" filterable clearable placeholder="请选择小区">
                <el-option
                  v-for="item in areaList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="工程周期" prop="enginCycle">
              <el-select v-model="queryParams.enginCycle" filterable clearable placeholder="请选择规格">
                <el-option
                  v-for="dict in dict.type.engin_cycle"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>
<!--            <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:#FFFFFF;border: 1px solid #000066"
            border
            :cell-style="tableRowClassName"
            style="width: 100%">
            <el-table-column
            prop="areaName"
            width="250"
            label="小区名称"
            >
            </el-table-column>
            <el-table-column
            prop="notstart"
            label="未开工（户）"
            >
            </el-table-column>
            <el-table-column
            prop="willDone"
            label="施工（户）">
            </el-table-column>
            <el-table-column
            prop="done"
            label="完工（户）">
            </el-table-column>

        </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
</template>

<script>
import  {
  getAreaCompletionInformationList
} from '@/api/zdsz/overhead'
import {getAreaList, getBuildingList} from "@/api/zdsz/enginee";
import {getUnits} from "@/api/zdsz/unit";
export default {
    name:'ProgreStatistics',
   dicts:['engin_cycle','district'],
    data(){
        return {
          showSearch: true,
          buildingList: [],
          areaList:[],
          unitList: [],
          total:0,
          queryParams:{pageNum:1,pageSize:10, areaId:undefined,enginCycle:"0"},
            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:'管'
        }
    },
  mounted() {
      this.getList()
  },
  methods:{
    getAreaList(district) {
      if (district === undefined || district == null || district === '')
        return
      getAreaList({district: district}).then(res => this.areaList = res.data)
    },
    getBuildingList1(areaId) {
      if (areaId === undefined || areaId == null || areaId === '')
        return
      getBuildingList({areaId: areaId}).then(res => this.buildingList = res.data)
    },
    getUnitList1(buildingId) {
      if (buildingId === undefined || buildingId == null || buildingId === '')
        return
      getUnits(this.queryParams.areaId, buildingId).then(res => this.unitList = res.data)
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.tableData=[]
      this.queryParams = {pageNum:1,pageSize:10, areaId:undefined,enginCycle:"0"};
      this.handleQuery();
    },
      getList()
      {
        getAreaCompletionInformationList(this.queryParams).then(res=>{
          this.total=res.total
          this.tableData=res.rows
          })
      },
        tableRowClassName(){
            return "background:#FFFFFF;border: 1px solid #000066"
        },
    toModule(){
      console.log(this.$router)
      const currentPage = this.currentMenu == 0 ? 'material_statistics' : this.currentMenu == 1 ? 'progres_statistics' :this.currentMenu == 2 ? 'echarts_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: 100%;
        .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(3px) translateY(-3px);
            z-index: 100;
            box-shadow: 3px 3px 3px 3px rgba(82, 82, 82, 0.5);
            background-color: rgba(98, 98, 98, 0.52);
          font-size: 15px;
            color: #ea0404;
        }
    }
    .materialStatisticsTable::before{
        background-color:#000066 ;
    }
    .materialStatisticsTable::after{
        background-color:#000066 ;
    }
}
</style>