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" :rules="searchRules">
        <el-form-item label="行政区" prop="district">
          <el-select v-model="searchParam.district" placeholder="请选择行政区" clearable
                     @change="searchParam.areaId = undefined;getAreaList(searchParam.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" style="width: 218px;">
          <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" style="width: 218px;">-->
<!--          <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;align-items: end;">
      <div
        v-for="(e,idx) in roomsInfo"
        :key="idx"
        class="buildingContain"
      >
        <!-- 楼层 -->
        <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 == '未施工' ? '#fec880' : k.roomStatus == '施工中' ? '#5ad3fe' : '#81d9af'};
             border: solid 1px ${k.roomStatus == '未施工' ? '#ffa938' : k.roomStatus == '施工中' ? '#30b3e1' : '#62b98f'}`"
          >
            {{ k.roomName || '' }}
          </div>
        </div>

        <h2 style="text-align: center; font-size: 1.1em;">{{ e.unitName }}</h2>
      </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', 'old_renovation'],
  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: '#81d9af'
        },
        {
          label: '施工中',
          color: '#5ad3fe'
        },
        {
          label: '未施工',
          color: '#fec880'
        },
      ],
      currentType: null,
      currentCommunity: null,
      areaList: [],
      buildingList: [],
      unitList: [],
      info: {
        district: undefined,
      },
      searchParam: {
        district: null,
        enginCycle: 0,
        areaId: null,
        buildingId: null,
        unitId: null,
      },
      roomsInfo: [],
      updateParams: {},
      currentRoomId: null,
      currentEnginType: null,
      currentEnginClassification: 'indoor_engin',
      searchRules: {
        district: [
          {required: true, message: "行政区不能为空", trigger: ['change']}
        ],
        areaId: [
          {required: true, message: "小区不能为空", trigger: ['change']}
        ],
        // enginCycle: [
        //   {required: true, message: "工程周期不能为空", trigger: ['change']}
        // ],
      }
    }
  },
  methods: {
    toDetail(e) {
      this.currentRoomId = e.roomId
      let dictValue
      // 拼接字典
      console.log(e)
      console.log(e.enginCycle)
      e.enginCycle = 0
      console.log(this.dict.type[e.enginCycle])
      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)
        setTimeout(() => {
          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() {
      this.$refs.searchForm.validate(valid => {
        if (valid) {
          // 校验 pass
          let params = {
            enginCycle: this.searchParam.enginCycle,
            areaId: this.searchParam.areaId,
            buildingId: this.searchParam.buildingId,
            unitId: this.searchParam.unitId,
          }
          getObtainRoomcCompletionInformationList(params).then(res => {
            let info = []
            info = res.data
            info.forEach(e => {
              e.roomStatusVoList = e.roomStatusVoList.reverse()
            })
            this.roomsInfo = info
          })
        } else {
          this.$message.error('请填写必填项!')
        }
      })
    },
    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%;
  border: solid 5px #c7eafe;
  padding: 10px;
  background: #e2f4ff;

  .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;
      font-size: 1em;
      //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>