工业、市政、基建、顶管 用料统计 init

src/api/zdsz/countIndustry.js

@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 查询工程用料统计列表
+export function materialStatistics(query) {
+  return request({
+    url: '/zdsz/materialStatistics/list',
+    method: 'post',
+    data: query
+  })
+}
+export function getAreaCompletionInformationList(query) {
+  return request({
+    url: '/zdsz/engineeringCivil/getAreaCompletionInformationList',
+    method: 'get',
+    params: query
+  })
+}
+export function getEnginMaterialQualityList() {
+  return request({
+    url: '/zdsz/enginMaterialQuality/getEnginMaterialQualityList',
+    method: 'get',
+    params: {enginType:'基建工程'}
+  })
+}
+export function getEnginSpecificationsList(materId) {
+  return request({
+    url: '/zdsz/enginSpecifications/getEnginSpecificationsList',
+    method: 'get',
+     params: {materId:materId}
+  })
+}
+export function getsumStatus(district) {
+  return request({
+    url: `/zdsz/engineeringCivil/getsumStatus?district=`+district,
+    method: 'get',
+  })
+}
+
+export function selectByDistrictStatistics(district) {
+  return request({
+    url: `/zdsz/engineeringCivil/selectByDistrictStatistics?district=`+district,
+    method: 'get',
+  })
+}

src/api/zdsz/countInfrastructure.js

@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 查询工程用料统计列表
+export function materialStatistics(query) {
+  return request({
+    url: '/zdsz/materialStatistics/list',
+    method: 'post',
+    data: query
+  })
+}
+export function getAreaCompletionInformationList(query) {
+  return request({
+    url: '/zdsz/engineeringCivil/getAreaCompletionInformationList',
+    method: 'get',
+    params: query
+  })
+}
+export function getEnginMaterialQualityList() {
+  return request({
+    url: '/zdsz/enginMaterialQuality/getEnginMaterialQualityList',
+    method: 'get',
+    params: {enginType:'工业工程'}
+  })
+}
+export function getEnginSpecificationsList(materId) {
+  return request({
+    url: '/zdsz/enginSpecifications/getEnginSpecificationsList',
+    method: 'get',
+     params: {materId:materId}
+  })
+}
+export function getsumStatus(district) {
+  return request({
+    url: `/zdsz/engineeringCivil/getsumStatus?district=`+district,
+    method: 'get',
+  })
+}
+
+export function selectByDistrictStatistics(district) {
+  return request({
+    url: `/zdsz/engineeringCivil/selectByDistrictStatistics?district=`+district,
+    method: 'get',
+  })
+}

src/api/zdsz/countMunicipal.js

@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 查询工程用料统计列表
+export function materialStatistics(query) {
+  return request({
+    url: '/zdsz/materialStatistics/list',
+    method: 'post',
+    data: query
+  })
+}
+export function getAreaCompletionInformationList(query) {
+  return request({
+    url: '/zdsz/engineeringCivil/getAreaCompletionInformationList',
+    method: 'get',
+    params: query
+  })
+}
+export function getEnginMaterialQualityList() {
+  return request({
+    url: '/zdsz/enginMaterialQuality/getEnginMaterialQualityList',
+    method: 'get',
+    params: {enginType:'市政工程'}
+  })
+}
+export function getEnginSpecificationsList(materId) {
+  return request({
+    url: '/zdsz/enginSpecifications/getEnginSpecificationsList',
+    method: 'get',
+     params: {materId:materId}
+  })
+}
+export function getsumStatus(district) {
+  return request({
+    url: `/zdsz/engineeringCivil/getsumStatus?district=`+district,
+    method: 'get',
+  })
+}
+
+export function selectByDistrictStatistics(district) {
+  return request({
+    url: `/zdsz/engineeringCivil/selectByDistrictStatistics?district=`+district,
+    method: 'get',
+  })
+}

src/api/zdsz/countPipeJacking.js

@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 查询工程用料统计列表
+export function materialStatistics(query) {
+  return request({
+    url: '/zdsz/materialStatistics/list',
+    method: 'post',
+    data: query
+  })
+}
+export function getAreaCompletionInformationList(query) {
+  return request({
+    url: '/zdsz/engineeringCivil/getAreaCompletionInformationList',
+    method: 'get',
+    params: query
+  })
+}
+export function getEnginMaterialQualityList() {
+  return request({
+    url: '/zdsz/enginMaterialQuality/getEnginMaterialQualityList',
+    method: 'get',
+    params: {enginType:'顶管工程'}
+  })
+}
+export function getEnginSpecificationsList(materId) {
+  return request({
+    url: '/zdsz/enginSpecifications/getEnginSpecificationsList',
+    method: 'get',
+     params: {materId:materId}
+  })
+}
+export function getsumStatus(district) {
+  return request({
+    url: `/zdsz/engineeringCivil/getsumStatus?district=`+district,
+    method: 'get',
+  })
+}
+
+export function selectByDistrictStatistics(district) {
+  return request({
+    url: `/zdsz/engineeringCivil/selectByDistrictStatistics?district=`+district,
+    method: 'get',
+  })
+}

src/views/zdsz/enginee/industry/industry_statistics/index.vue

@@ -1,5 +1,671 @@
+
 <template>
-    <div>
-        工业工程
+    <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-option
+                            v-for="dict in dict.type.industry_engin_type"
+                            :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-option
+                            v-for="dict in dict.type.engin_classification"
+                            :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.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="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="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 id="zhuzhuangtu" style="width: 100%;height: 75vh"></div>
     </div>
-</template>
+</template>
+
+<script>
+    import {
+        getAreaList,                            // 获取当前小区集合
+        getBuildingList, getHousesList,                        // 获取当前楼栋集合
+        getUnitList,                            // 获取当前单元集合
+    } from '@/api/zdsz/enginee'
+    import {
+        getAreaCompletionInformationList,
+        getEnginMaterialQualityList, getEnginSpecificationsList,
+        materialStatistics                           // 获取当前单元集合
+    } from '@/api/zdsz/countIndustry'
+    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', 'industry_engin_type', 'engin_classification'],
+        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: '新建'
+                    },
+                ],
+                EngineepipeType_abandon: [
+                    {
+                        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()
+            {
+
+                materialStatistics(this.queryParams).then(res=>{
+                    this.tableData=res.data;
+                    let seriesData = [];
+                    for (let item in res.data) {
+                        seriesData.push({
+                            name: res.data[item].realityQuality+'\n'+res.data[item].realitySpecifications,
+                            type: 'bar',
+                            stack: res.data[item].realityQuality,
+                            label:{
+                                show:true,
+                                formatter:'{a}\n{c}米'
+                            },
+                            data: [res.data[item].realitySize]
+                        },);
+                    }
+                    let option = {
+                        xAxis: [
+                            {
+                                type: 'category',
+                                data: ['A'],
+                                show:false,
+                            }
+                        ],
+                        yAxis: [
+                            {
+                                type: 'value'
+                            }
+                        ],
+                        series: seriesData
+                    };
+
+                    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
+                })
+            },
+            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>

src/views/zdsz/enginee/infrastructure/infrastructure_statistics/index.vue

@@ -0,0 +1,650 @@
+
+<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="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="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 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()
+            {
+
+                materialStatistics(this.queryParams).then(res=>{
+                    this.tableData=res.data;
+                    let seriesData = [];
+                    for (let item in res.data) {
+                        seriesData.push({
+                            name: res.data[item].realityQuality+'\n'+res.data[item].realitySpecifications,
+                            type: 'bar',
+                            stack: res.data[item].realityQuality,
+                            label:{
+                                show:true,
+                                formatter:'{a}\n{c}米'
+                            },
+                            data: [res.data[item].realitySize]
+                        },);
+                    }
+                    let option = {
+                        xAxis: [
+                            {
+                                type: 'category',
+                                data: ['A'],
+                                show:false,
+                            }
+                        ],
+                        yAxis: [
+                            {
+                                type: 'value'
+                            }
+                        ],
+                        series: seriesData
+                    };
+
+                    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
+                })
+            },
+            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>

src/views/zdsz/enginee/municipal/municipal_statistics/index.vue

@@ -0,0 +1,650 @@
+
+<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 dict.type.municipal_engineering"
+                            :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="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="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 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/countMunicipal'
+    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', 'municipal_engineering'],
+        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()
+            {
+
+                materialStatistics(this.queryParams).then(res=>{
+                    this.tableData=res.data;
+                    let seriesData = [];
+                    for (let item in res.data) {
+                        seriesData.push({
+                            name: res.data[item].realityQuality+'\n'+res.data[item].realitySpecifications,
+                            type: 'bar',
+                            stack: res.data[item].realityQuality,
+                            label:{
+                                show:true,
+                                formatter:'{a}\n{c}米'
+                            },
+                            data: [res.data[item].realitySize]
+                        },);
+                    }
+                    let option = {
+                        xAxis: [
+                            {
+                                type: 'category',
+                                data: ['A'],
+                                show:false,
+                            }
+                        ],
+                        yAxis: [
+                            {
+                                type: 'value'
+                            }
+                        ],
+                        series: seriesData
+                    };
+
+                    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
+                })
+            },
+            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>

src/views/zdsz/enginee/pipeJacking/pipeJacking_statistics/index.vue

@@ -0,0 +1,650 @@
+
+<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="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="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 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/countPipeJacking'
+    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()
+            {
+
+                materialStatistics(this.queryParams).then(res=>{
+                    this.tableData=res.data;
+                    let seriesData = [];
+                    for (let item in res.data) {
+                        seriesData.push({
+                            name: res.data[item].realityQuality+'\n'+res.data[item].realitySpecifications,
+                            type: 'bar',
+                            stack: res.data[item].realityQuality,
+                            label:{
+                                show:true,
+                                formatter:'{a}\n{c}米'
+                            },
+                            data: [res.data[item].realitySize]
+                        },);
+                    }
+                    let option = {
+                        xAxis: [
+                            {
+                                type: 'category',
+                                data: ['A'],
+                                show:false,
+                            }
+                        ],
+                        yAxis: [
+                            {
+                                type: 'value'
+                            }
+                        ],
+                        series: seriesData
+                    };
+
+                    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
+                })
+            },
+            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>