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

 <!--
    *@description: 可视化进度
    *@author: yh Fu
    *@date: 2023-12-25 13:27:19
    *@version: V1.0.5
    -->

<template>
    <div class="progresVisualContainer">
        <el-radio-group v-model="currentMenu" style="margin-bottom: 20px;" @input="toModule">
            <el-radio-button label="0">用料统计</el-radio-button>
            <el-radio-button label="1">进度统计</el-radio-button>
          <el-radio-button label="2">可视化统计</el-radio-button>
          <el-radio-button label="3">可视化进度</el-radio-button>
        </el-radio-group>
        <div class="topContain">
            <el-form :model="searchParam" ref="searchForm" class="searchForm">
                <el-form-item label="行政区" prop="district">
                    <el-select v-model="info.district" placeholder="请选择行政区" clearable
                            @change="searchParam.areaId = undefined;getAreaList(info.district)"
                            @clear="searchParam.areaId = undefined;areaList=[];
                            searchParam.buildingId = undefined;buildingList=[];
                            searchParam.unitId = undefined;unitList=[]">
                    <el-option
                        v-for="dict in dict.type.district"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                    />
                    </el-select>
                </el-form-item>
                <el-form-item label="小区名称" prop="areaId">
                    <el-select v-model="searchParam.areaId" filterable clearable placeholder="请选择小区"
                            @change="searchParam.buildingId = undefined;getBuildingList1(searchParam.areaId)"
                            @clear="searchParam.buildingId = undefined;buildingList=[];
                            searchParam.unitId = undefined;unitList=[]">
                    <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="buildingId">
                    <el-select v-model="searchParam.buildingId" filterable clearable placeholder="请选择楼宇"
                            @change="searchParam.unitId = undefined;getUnitList1(searchParam.buildingId)"
                            @clear="searchParam.unitId = undefined;unitList=[]"
                    >
                    <el-option
                        v-for="item in buildingList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                    </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="单元" prop="unitId">
                    <el-select v-model="searchParam.unitId" placeholder="请选择单元" filterable clearable>
                    <el-option
                        v-for="obj in unitList"
                        :key="obj.id"
                        :label="obj.name"
                        :value="obj.id"
                    ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="工程周期" prop="enginCycle">
                    <el-select
                        :disabled="title == '添加用料' "
                        v-model="searchParam.enginCycle"
                        placeholder="请填写工程周期"
                    >
                        <el-option
                        v-for="e in dict.type.engin_cycle"
                        :key="e.value"
                        :label="e.label"
                        :value="e.value"
                        ></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <!-- <div style="width: 100%;height: 100%;">
                <el-select
                    v-model="currentCommunity"
                    placeholder="请选择行政区"
                    class="projectSelect"
                    popper-class="projectDropDown"
                    :popper-append-to-body="false"
                    >
                    <el-option
                        v-for="e in communityOptions"
                        :key="e.value"
                        :label="e.label"
                        :value="e.value">
                    </el-option>
                </el-select>
                <el-select
                    v-model="currentCommunity"
                    placeholder="请选择小区"
                    class="projectSelect"
                    popper-class="projectDropDown"
                    :popper-append-to-body="false"
                    >
                    <el-option
                        v-for="e in communityOptions"
                        :key="e.value"
                        :label="e.label"
                        :value="e.value">
                    </el-option>
                </el-select>
                <el-select
                    v-model="currentType"
                    placeholder="请选择工程类型"
                    class="projectSelect"
                    popper-class="projectDropDown"
                    :popper-append-to-body="false"
                    >
                    <el-option
                        v-for="e in typeOptions"
                        :key="e.value"
                        :label="e.label"
                        :value="e.value">
                    </el-option>
                </el-select>
                <el-date-picker
                    v-model="currentDate"
                    class="projectSelect"
                    popper-class="projectDropDown"
                    :popper-append-to-body="false"
                    type="date"
                    placeholder="选择日期">
                </el-date-picker>
            </div> -->
            <el-button class="searchBtn" @click="searchCompletionInfo">查询</el-button>
            <el-button class="searchBtn">导出</el-button>
            <div class="unitStatus">
                <div
                    v-for="(e,idx) in unitStatusOption"
                    :key="idx"
                    :style="`background-color:${e.color};width: 22%;height: 35px;position: absolute;right:${idx*130}px;box-shadow:0 5px 5px 0 #CDCDCD`"
                    >
                    <div
                        style="position: relative;left: 107%;width: 116%;top: 20%;"
                        >
                        {{ e.label }}
                    </div>
                </div>
            </div>
        </div>
        <!-- 房间集合 -->
          <!-- 楼栋 or 单元 -->
          <div style="min-width: 1618px;display: flex;overflow: hidden;overflow-x: scroll;">
            <div 
                v-for="(e,idx) in roomsInfo"
                :key="idx"
                class="buildingContain"
            > 
                <h2 style="text-align: center;">{{ e.unitName + '单元' }}</h2>
                <!-- 楼层 -->
                <div
                    v-for="(v,vdx) in e.roomStatusVoList"
                    :key="vdx"
                    class="unitFloor"
                >   
                    {{ v.notstart || '' }}
                    <!-- 房间 -->
                    <div
                        v-for="(k,kdx) in v"
                        :key="kdx"
                        class="room"
                        @click="toDetail(k)"
                        :style="`background-color:${k.roomStatus == '未开工' ? '#999999' : k.roomStatus == '未完工' ? '#FFFF66' : '#009900'}`"
                    >
                        {{ k.roomName || '' }}
                    </div>
                </div>
            </div>
          </div>
          <ConstructionDetails
            ref="ConstructionDetails"
            :currentCollapses="currentCollapses"
            :type="nodeDetailType"
            :status="status"
            enginType="民用工程"
          />
    </div>
</template>

<script>
import ConstructionDetails from '@/components/ConstructionDetails'
import {getAreaList} from "@/api/zdsz/area";
import {getBuildingList} from "@/api/zdsz/building";
import {getUnits} from "@/api/zdsz/unit";
import {getDicts} from "@/api/system/dict/data";
import { getObtainRoomcCompletionInformationList ,viewQueryProcessSource} from "@/api/zdsz/enginee"
export default {
    name:'ProgreVisual',
    components:{
        ConstructionDetails
    },
    dicts:['district','engin_cycle','new_built'],
    data(){
        return {
            currentMenu:3,   // 0:用料管理 1:进度统计 2:可视化进度
            currentCollapses:[],
            status:'',
            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: '龙腾香格里'
                },
            ],
            unitStatusOption:[
                {
                    label:'竣工',
                    color:'#009900'
                },
                {
                    label:'未完工',
                    color:'#FFFF66'
                },
                {
                    label:'未开工',
                    color:'#999999'
                },
            ],
            currentType:null,
            currentCommunity:null,
            areaList:[],
            buildingList:[],
            unitList:[],
            info:{
                district: undefined,
            },
            searchParam:{
                enginCycle:null,
                areaId: null,
                buildingId: null,
                unitId: null,
            },
            roomsInfo:[],
            updateParams:{},
            currentRoomId:null,
            currentEnginType:null,
            currentEnginClassification:'indoor_engin',
        }
    },
    methods:{
        toDetail(e){
            this.currentRoomId = e.roomId
            let dictValue 
            // 拼接字典
            this.dict.type[e.enginCycle].forEach(v => {
                if(v.label.includes('室内')){
                    this.currentEnginType = e.enginCycle
                    dictValue = e.enginCycle + '_' + v.value
                }
            })
            // 加工字典
            getDicts(dictValue).then(res => {
                let dict = []
                for (let i = 0; i < res.data.length; i++) {
                    dict.push({
                        "label": res.data[i].dictLabel,
                        "value": res.data[i].dictValue,
                    })
                }
                console.log(dict)
                this.$refs.ConstructionDetails.open(dict)
            })
            this.status = 'read-only'
        },
        viewNodeSource(e) {
            let params = {
                type:e,
                houseId:this.currentRoomId,
                enginClassification:this.currentEnginClassification,
                enginType:this.currentEnginType
            }
            viewQueryProcessSource(params).then(res => {
                console.log('______',res)
                try {
                this.updateParams = res.data
                this.currentCollapses = res.data.zEngineeringNodeBo.zEngineeringInfoBoList
                } catch (error) {
                this.currentCollapses = [];
                }
                console.log('折叠面板info',this.currentCollapses)
            })
            this.$forceUpdate()
        },
        // 查询进度
        searchCompletionInfo(){
            getObtainRoomcCompletionInformationList(this.searchParam).then(res => {
                let info = []
                info = res.data
                info.forEach(e => {
                    e.roomStatusVoList = e.roomStatusVoList.reverse()
                })
                this.roomsInfo = info
            })
        },
        getAreaList(district) {
            if (district === undefined || district == null || district === '')
                return
            console.log(getAreaList)
            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)
        },
        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>
.progresVisualContainer{
    width: 100%;
    height: 100%;
    padding: 1%;
    .topContain{
        display: flex;
        justify-content: space-between;
        width: 60%;
        .searchBtn{
            height: 100%;
            width: 11%;
            background-color: #1890FF;
            color: #fff;
        }
        ::v-deep .projectSelect{
            width: 20% !important;
            .el-input__inner{
                background-color: #1890FF;
                color: #fff;
            }
        }
        .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;
        }
        .unitStatus{
            width: 13%;
            display: flex;
            position: absolute;
            right: 7%;
            height: 5%;
        }
    }
}
.buildingContain{
    height: 100%;
    .unitFloor{
        display: flex;
        justify-content: space-around;
        border: 1px solid #000;
        .room{
            flex: 1;
            width: 50px;
            height: 25px;
            text-align: center;
            line-height: 25px;
            cursor: pointer;
            box-shadow: inset 0px 0px 10px rgba(0,0,0,.6);
        }
    }

    .unitFloor >div:not(:nth-child(1)){
        margin-left: 2%;
    }
}
.buildingContain:not(:nth-child(1)){
    margin-left: 5%;
}
.buildingContain .unitFloor:not(:nth-child(1)){
    margin-top: 2%;
}
::v-deep .searchForm{
    display: flex;
    .el-form-item{
        width: 205px;
    }
    .el-select{
        width: 135px;
    }
}
</style>