zdsz_vue/src/views/zdsz/enginee/material/material_statistics/index.vue

<template>
    <div class="MaterialStatistics_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">-->
            <div style="width: 100%;height: 100%;display: flex;">
              <el-form :model="queryParams" :rules="searchRules" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px" class="searchForm">
                <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" label-width="80px">
                  <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="enginType">
                  <el-select v-model="queryParams.enginType" placeholder="请选择工程类型" clearable
                             @change="enginTypeHasChangeds"
                             @clear="currentEnginTypeChangeOptions1=[];queryParams.enginClassification=undefined;queryParams.enginType=undefined">
                    <el-option
                      v-for="dict in enginTypeOption"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item label="工程分类" prop="enginClassification">
                  <el-select v-model="queryParams.enginClassification" placeholder="请选择工程分类" clearable
                             @change="nodeTypeHasChangeds"
                             @clear="currentEnginTypeChangeOptions1=[];queryParams.enginClassification=undefined;queryParams.enginType=undefined">
                    <el-option
                      v-for="dict in currentEnginTypeChangeOptions1"
                      :key="dict.dictValue"
                      :label="dict.dictLabel"
                      :value="dict.dictValue"
                    />
                  </el-select>
                </el-form-item>
<!--                <el-form-item label="工程步骤" prop="enginClassification">-->
<!--                  <el-select v-model="queryParams.nodeType" placeholder="请选择工程步骤" clearable-->
<!--                             @clear="currentEnginTypeChangeOptions2=[];queryParams.enginClassification=undefined;queryParams.enginType=undefined;queryParams.nodeType=undefined">-->
<!--                    <el-option-->
<!--                      v-for="dict in currentEnginTypeChangeOptions2"-->
<!--                      :key="dict.dictValue"-->
<!--                      :label="dict.dictLabel"-->
<!--                      :value="dict.dictValue"-->
<!--                    />-->
<!--                  </el-select>-->
<!--                </el-form-item>-->
                <el-form-item label="材质" prop="realityQuality" label-width="45px">
                  <el-select v-model="queryParams.realityQuality" placeholder="请选择材质" filterable clearable
                             @change="queryParams.realityQuality != undefined;getEnginSpecificationsList(queryParams.realityQuality)"
                             @clear="queryParams.realityQuality = undefined;"
                  >
                    <el-option
                      v-for="obj in EnginMaterialQualityList"
                      :key="obj.id"
                      :label="obj.name"
                      :value="obj.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="规格" prop="realitySpecifications"label-width="45px">
                  <el-select v-model="queryParams.realitySpecifications" filterable clearable placeholder="请选择规格"
                  >
                    <el-option
                      v-for="item in EnginSpecificationsList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
<!--                <el-form-item label="工程周期" prop="enginCycle" label-width="80px">-->
<!--                  <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-button
                    icon="el-icon-download"
                    @click="handleExport"
                    size="mini"
                    v-hasPermi="['zdsz:visual_house:export']"
                  >导出</el-button>
                </el-form-item>
              </el-form>

        </div>
      <el-table
        class="materialStatisticsTable"
        :data="AreaCompletionInformationList"
        style="width: 100%">
        <el-table-column
          prop="areaName"
          width="250"
          label="小区"
        >
        </el-table-column>
        <el-table-column
          prop="scale"
          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>
        <div style="width: 100%; height: 100%;">
            <el-table
                class="materialStatisticsTable"
                :data="tableData"
                show-summary
                style="width: 100%">
              <el-table-column
                prop="areaName"
                label="小区"
              >
              </el-table-column>
              <el-table-column
                prop="enginType"
                label="工程类型">
              </el-table-column>
              <el-table-column
                prop="enginClassification"
                label="工程分类">
              </el-table-column>
<!--              <el-table-column-->
<!--                prop="nodeType"-->
<!--                label="工程步骤">-->
<!--              </el-table-column>-->
              <el-table-column
                prop="realityQuality"
                label="材质"
              >
              </el-table-column>
                <el-table-column
                prop="realitySpecifications"
                label="规格"
                >
                </el-table-column>
                <el-table-column
                prop="estimatedSize"
                label="预计用料">
                </el-table-column>
              <el-table-column
                prop="realitySize"
                label="实际用料">
              </el-table-column>

            </el-table>

        </div>

    </div>
</template>

<script>
import {
  getAreaList,                            // 获取当前小区集合
  getBuildingList, getHousesList,                        // 获取当前楼栋集合
  getUnitList,                            // 获取当前单元集合
} from '@/api/zdsz/enginee'
import {
  getAreaCompletionInformationList,
  getEnginMaterialQualityList, getEnginSpecificationsList,
  materialStatistics                           // 获取当前单元集合
} from '@/api/zdsz/overhead'
import {getUnits} from "@/api/zdsz/unit";
import {getDicts} from "@/api/system/dict/data";
export default {

    name:'MaterialStatistics',
    dicts:['district','engin_cycle'],
    data(){
        return {
          currentEnginTypeChangeOptions1: [],
          currentEnginTypeChangeOptions2: [],
          buildingList: [],
          areaList:[],
          unitList: [],
          showSearch: true,
            currentDate:null,
            currentMenu:0,   // 0:用料管理 1:进度统计 2:可视化进度
            typeOptions:[
                {
                    value: '0',
                    label: '市政工程'
                },
                {
                    value: '1',
                    label: '工业工程'
                },
                {
                    value: '2',
                    label: '民用工程'
                },
                {
                    value: '3',
                    label: '危险作业'
                },
                {
                    value: '4',
                    label: '顶管工程'
                },
                {
                    value: '5',
                    label: '基建工程'
                }
            ],
            communityOptions:[
                {
                    value: '0',
                    label: '领秀世家'
                },
                {
                    value: '1',
                    label: '上东府里'
                },
                {
                    value: '2',
                    label: '清华园'
                },
                {
                    value: '3',
                    label: '万科蓝山'
                },
                {
                    value: '4',
                    label: '龙腾香格里'
                },
            ],
            buildingOptions:[],         // 楼栋集合
            unitOptions:[],             // 单元集合
            currentType:null,
            currentDistrict:null,       // 当前行政区
            currentCommunity:null,      // 当前小区
            currentBuilding:null,       // 当前楼宇
            currentUnit:null,// 当前单元
          AreaCompletionInformationList:[],
          queryParams:{
            pageNum:1,
            pageSize:10,
            district:null,
            areaId:undefined,
            realityQuality:undefined,
            realitySpecifications:undefined,
            enginClassification:undefined,
            enginType:undefined,
            nodeType:undefined,
            enginCycle:0
          },
          EnginMaterialQualityList:[],
          EnginSpecificationsList:[],
          tableData: [],
          searchRules:{
              district: [
                  {required: true, message: "行政区不能为空", trigger: ['change']}
              ],
              areaId: [
                  {required: true, message: "小区不能为空", trigger: ['change']}
              ],
          },
          enginTypeOption: [
            {
              value: 'old_renovation',
              label: '旧改'
            }, {
              value: 'new_built',
              label: '新建'
            },
          ]

        }
    },
    mounted(){
        console.log(this.dict)
      this.getEnginMaterialQualityList()
      //this.getEnginSpecificationsList()
    },
    methods:{
      enginTypeHasChangeds(enginType = null) {
        if (this.queryParams.enginType == undefined || this.queryParams.enginType == null || this.queryParams.enginType == '')
          return
        this.currentCheckList = []
        this.queryParams.enginClassification = ''
        this.currentEnginTypeChangeOptions1 = []
        getDicts(enginType || this.queryParams1.enginType).then(res => {
          this.currentEnginTypeChangeOptions1 = res.data
        })
      },
      nodeTypeHasChangeds(enginType = null,enginClassification = null) {
        if ((this.queryParams.enginType == undefined || this.queryParams.enginType == null || this.queryParams.enginType == '')&&(this.queryParams.enginClassification == undefined || this.queryParams.enginClassification == null || this.queryParams.enginClassification == ''))
          return
        this.currentCheckList = []
        this.queryParams.nodeType = ''
        this.currentEnginTypeChangeOptions2 = []
        getDicts(enginType&&enginClassification || this.queryParams.enginType+'_'+this.queryParams.enginClassification).then(res => {
          this.currentEnginTypeChangeOptions2 = res.data
        })
      },
      enginTypeHasChanged(enginType = null) {
        this.currentCheckList = []
        this.queryParams.enginClassification = ''
        this.currentEnginTypeChangeOptions = []
        getDicts(enginType || this.queryParams.enginType).then(res => {
          this.currentEnginTypeChangeOptions = res.data
        })
      },
      getList()
      {

        materialStatistics(this.queryParams).then(res=>{
          this.tableData=res.data
        })
      },
      getAreaCompletionInformationList()
      {
        getAreaCompletionInformationList(this.queryParams).then(res=>{
          //this.AreaCompletionInformationList=res.total
          this.AreaCompletionInformationList=res.rows
        })
      },
      getEnginMaterialQualityList()
      {
      getEnginMaterialQualityList().then(res=>{
        this.EnginMaterialQualityList=res.data
      })
      },
      getEnginSpecificationsList(materId)
      {
        getEnginSpecificationsList(materId).then(res=>{
          this.EnginSpecificationsList=res.data
        })
      },

      /** 搜索按钮操作 */
      handleQuery() {
        this.$refs.queryForm.validate(valid => {
            if(valid){
                // 校验 pass
                this.getList();
              this.getAreaCompletionInformationList()
            } else {
                this.$message.error('请填写必填项!')
            }
        })
        // this.queryParams = 1;
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.queryParams = {
            district:null,
            areaId:undefined,
            realityQuality:undefined,
            realitySpecifications:undefined,
            enginCycle:0
          }
          this.AreaCompletionInformationList=[]
        this.tableData=[]
        //this.handleQuery();
      },
      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(buildingId).then(res => this.unitList = res.data)
      },
      currentEnginTypeChange(val){
        const enginDict = val[1]
        const enginType = val[0]
        this.queryParams.enginType = enginType
        this.enginClassification=enginDict
        this.enginClassificationOption = this.dict.type[enginDict]
        console.log(this.value)
      },
      // 当前所选行政区发生改变 查询当前小区集合
      districtHasChanged(district){
        this.queryParams.areaId = null
        this.queryParams.buildingId = null
        this.queryParams.unitId = null
        getAreaList({district}).then(res => {
          this.communityOptions = res.data
        })
      },
      // 当前所选小区发生改变 查询当前楼栋集合
      communityHasChanged(areaId){
        this.queryParams.buildingId = null
        this.queryParams.unitId = null
        getBuildingList({areaId}).then(res => {
          this.buildingOptions = res.data
        })
      },
      buildingHasChanged(buildingId){
        console.log(buildingId)
        this.queryParams.unitId = null
        getUnitList({buildingId}).then(res => {
          this.unitOptions = res.data
        })
      },
      unitHasChanged(unitId){
        getHousesList({unitId}).then(res => {
          console.log(res)
          this.houseOptions = res.data
        })
      },
        // // 当前所选行政区发生改变 查询当前小区集合
        // districtHasChanged(district){
        //     this.currentCommunity = null
        //     getAreaList({district}).then(res => {
        //         this.communityOptions = res.data
        //     })
        // },
        // // 当前所选小区发生改变 查询当前楼栋集合
        // communityHasChanged(areaId){
        //     this.currentBuilding = null
        //     getBuildingList({areaId}).then(res => {
        //         this.buildingOptions = res.data
        //     })
        // },
        // buildingHasChanged(buildingId){
        //     this.currentUnit = null
        //     getUnitList({buildingId}).then(res => {
        //         console.log(res)
        //         this.unitOptions = res.data
        //     })
        // },
        /** 导出按钮操作 */
        handleExport() {
            this.download('zdsz/materialStatistics/export', {
                ...this.queryParams
            }, `用料统计${new Date().getTime()}.xlsx`)
        },
        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' :this.currentMenu == 2 ? 'echarts_statistics': 'progres_visual'
        this.$router.push({
          path:`/${currentPage}`
        })
      }

    }
}
</script>

<style lang="scss" scoped>

::v-deep .searchForm{
  .el-input__inner{
    width: 190px;
  }
}
.tags-view-container{
    display: none;
}
.MaterialStatistics_Contain{
    width: 100%;
    height: 100%;
    padding: 1%;
    .topContain{
        display: flex;
        justify-content: space-between;
        width: 100%;
         height: 40px;

        ::v-deep .projectSelect{
            width: 16%;
            .el-input__inner{
                // font-size: 15px;
                // height: 40px ;
                // background-color: #1890FF;
                background: linear-gradient(to right, #2197F2, #0BB0DE);
                color: #fff;
            }
        }

        ::v-deep .districtSelect{
            width: 200px;
        }
        ::v-deep .communitySelect{
            margin-left: 2%;
            width: 200px;
        }
        ::v-deep .projectSelect:not(:nth-child(1)){
            margin-left: 1%;
        }
        ::v-deep .projectSelect:nth-child(3){
            width: 10%;
        }
        ::v-deep .projectSelect:nth-child(4){
            width: 10%;
        }
        .projectDropDown{
            background-color: #1890FF;
            .el-select-dropdown__item{
                background-color: #1890FF;
                color: #fff;
            }
            ::v-deep .el-select-dropdown__list {
                padding-top: 0 !important;
                padding-bottom: 0;
            }
        }
        .projectDropDown >ul{
            padding-top: 0 ;
            padding-bottom: 0;
        }
    }
    .materialStatisticsTable{
        margin-top: 1%;
        // border: 2px solid #000066 !important;

    }
    .materialStatisticsTable::before{
        background-color:#000066 ;
    }
    .materialStatisticsTable::after{
        background-color:#000066 ;
    }
}
</style>

<style lang="scss" scoped>
.customTable{
    .el-table__header-wrapper th{
    background-color: #199ED8;
}
.el-table--border th.el-table__cell{
    // border: 2px solid #000066 !important;
}
.el-table__empty-block{
    background-color: #199ED8;
}
.el-table__empty-text{
    color: #000066;
}
.el-table__cell{
    background-color: #199ED8 ;
    // border: 2px solid #000066 !important;
}
.el-table__cell >div{
    text-align: center;
}
.el-button{
    background-color: #169BD5;
    color: #fff;
}
}

</style>