zdsz_vue/src/views/zdsz/enginee/infrastructure/infrastructure_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="enginName">
                    <el-input v-model="queryParams.enginName" placeholder="请输入工程名称" clearable></el-input>
                </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="请选择规格"-->
                    <!--&gt;-->
                        <!--<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
            v-if="false"
            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="notInstall"
                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"
                style="width: 100%">
                <el-table-column
                    prop="enginName"
                    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="actualityPE"
                    label="PE实际用料">
                </el-table-column>
                <el-table-column
                    prop="anticipationPE"
                    label="PE预计用料">
                </el-table-column>
                <el-table-column
                    prop="percentagePE"
                    label="PE用料占比">
                </el-table-column>
                <el-table-column
                    prop="actualityIron"
                    label="钢材实际用料">
                </el-table-column>
                <el-table-column
                    prop="anticipationIron"
                    label="钢材预计用料">
                </el-table-column>
                <el-table-column
                    prop="percentageIron"
                    label="钢材用料占比">
                </el-table-column>
            </el-table>
        </div>
        <div id="zhuzhuangtu" style="width: 100%;height: 75vh"></div>
    </div>
</template>

<script>
    import {
        getAreaList,                            // 获取当前小区集合
        getBuildingList, getHousesList,                        // 获取当前楼栋集合
        getUnitList,                            // 获取当前单元集合
    } from '@/api/zdsz/enginee'
    import {
        getAreaCompletionInformationList,
        getEnginMaterialQualityList, getEnginSpecificationsList,
        materialStatistics                           // 获取当前单元集合
    } from '@/api/zdsz/countInfrastructure'
    import {getUnits} from "@/api/zdsz/unit";
    import {getDicts} from "@/api/system/dict/data";
    import * as echarts from "echarts";
    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
                })
            },
            getLongestCollectionLength(jsonObj) {
                let longestLength = 0;
                for (let key in jsonObj) {
                    if (Array.isArray(jsonObj[key])) {
                        longestLength = Math.max(longestLength, jsonObj[key].length);
                    }
                }
                return longestLength;
            },
            getList(){
                this.queryParams.enginSort = this.queryParams.enginClassification; // 工程分类
                this.queryParams.materialStatistics = this.queryParams.realityQuality; // 工程材质
                console.log('this.queryParams=',this.queryParams)
                materialStatistics(this.queryParams).then(res=>{
                    this.tableData=res.data;
                    let seriesData = [];
                    let names = [];
                    let dataG = [];
                    let dataGP = [];
                    let dataPE = [];
                    let dataPEP = [];

                    for (let item in res.data) {
                        names.push(res.data[item].enginName)
                        dataG.push(res.data[item].actualityIron)
                        dataGP.push(res.data[item].percentageIron.replace("%",""))
                        dataPE.push(res.data[item].actualityPE)
                        dataPEP.push(res.data[item].percentagePE.replace("%",""))
                    }
                    const colors = ['#5470C6', '#91CC75', '#EE6666'];
                    let option = {
                        color: colors,
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'cross'
                            }
                        },
                        grid: {
                            left:'10%',
                            right: '10%'
                        },
                        toolbox: {
                            feature: {
                                saveAsImage: { show: true }
                            }
                        },
                        legend: {
                            data: ['Evaporation', 'Precipitation', 'Temperature']
                        },
                        xAxis: [
                            {
                                type: 'category',
                                axisTick: {
                                    alignWithLabel: true
                                },
                                // prettier-ignore
                                // data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
                                data: names
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value',
                                name: '数量',
                                position: 'right',
                                alignTicks: true,
                                axisLine: {
                                    show: true,
                                    lineStyle: {
                                        color: colors[0]
                                    }
                                },
                                axisLabel: {
                                    formatter: '{value}'
                                }
                            },
                            {
                                type: 'value',
                                name: '占比',
                                position: 'left',
                                alignTicks: true,
                                axisLine: {
                                    show: true,
                                    lineStyle: {
                                        color: colors[2]
                                    }
                                },
                                axisLabel: {
                                    formatter: '{value} %'
                                }
                            }
                        ],
                        series: [
                            {
                                name: '钢材实际用料',
                                type: 'bar',
                                // data: [
                                //     2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
                                // ]
                                data: dataG
                            },
                            {
                                name: '钢材用料占比',
                                type: 'line',
                                yAxisIndex: 1,
                                // data: [
                                //     20,10,50,60
                                // ]
                                data: dataGP,
                            },
                            {
                                name: 'PE实际用料',
                                type: 'bar',
                                data: dataPE
                            },
                            {
                                name: 'PE用料占比',
                                type: 'line',
                                yAxisIndex: 1,
                                data: dataPEP                            }
                        ]
                    };

                    var myChart = echarts.init(document.getElementById('zhuzhuangtu'));
                    myChart.clear()
                    myChart.setOption(option);
                })
            },
            getAreaCompletionInformationList()
            {
                getAreaCompletionInformationList(this.queryParams).then(res=>{
                    //this.AreaCompletionInformationList=res.total
                    this.AreaCompletionInformationList=res.rows
                })
            },
            getEnginMaterialQualityList()
            {
                getEnginMaterialQualityList().then(res=>{
                    this.EnginMaterialQualityList=res.data
                    this.getList();
                })
            },
            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();
                this.getList();
            },
            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>