ShibeiWorkPlatform_Frontend/src/views/modules/visual/basicinfo/basicInfoCommunity.vue

<template>

  <div class="div_community_info">
    <div class="div_select">

      <img src="../../../../assets/img/shuju/title-tip.png"
           alt />
      <div class="customer_select">
        <el-select v-model="selBuildingId"
                   :popper-append-to-body="false"
                   style="width:100%"
                   placeholder="请选择">
          <el-option v-for="item in buildingArray"
                     :key="item.buildingId"
                     :label="item.buildingName"
                     :value="item.buildingId">
          </el-option>
        </el-select>
      </div>
    </div>
    <el-scrollbar style="height:100%">

      <div v-if="roomLoaded"
           class="div_room">
        <div v-for="(item,index) in roomArray"
             :key="index"
             :class="['item',{'item_sel':selHouseIndex==index}]"
             @click="handleClickRoom(index)">
          <span>{{item.houseName}}</span>

          <div class="icon_party">
            <img :src="item.partyUrl"
                 alt />
          </div>
          <div class="icon_category">
            <img v-for="(iconItem,iconIndex) in item.iconArrayShow"
                 :key="iconIndex"
                 :src="iconItem.iconUrl"
                 alt />
          </div>
          <div @click="handleShowAllUser(index)"
               class="div_user">
            <span>全部成员</span>
            <img src="../../../../assets/img/shuju/xiala.png"
                 alt />

            <div class="user_list"
                 v-show="item.showAllUser">
              <div v-for="(userItem,userIndex) in userArray"
                   :key="userIndex"
                   class="user_item"
                   @click.stop="handleClickUser(userIndex)">
                {{userItem.name}}
                <div :class="['item_line',{'last_line':userIndex==(userArray.length-1)}]"></div>
              </div>

            </div>
          </div>

        </div>

      </div>
    </el-scrollbar>
  </div>

</template>

<script>
import { mapGetters } from "vuex";
import { Loading } from 'element-ui'; //引入Loading服务
import { requestPost } from "@/js/dai/request";

let loading;//加载动画

export default {

  data () {
    return {
      //父组件传过来的小区id
      neighborHoodId: '',
      neighborHoodName: '',
      buildingArray: [
        {
          buildingId: "1",
          buildingName: '1号楼'
        },
        {
          buildingId: "2",
          buildingName: '2号楼'
        },
        {
          buildingId: "3",
          buildingName: '3号楼'
        },
        {
          buildingId: "4",
          buildingName: '4号楼'
        },
        {
          buildingId: "5",
          buildingName: '5号楼'
        },
        {
          buildingId: "6",
          buildingName: '6号楼'
        }
      ],//楼栋下拉框数据
      selBuildingId: '',
      selBuildingName: '',

      roomLoaded: false,
      roomArray: [
        {
          houseId: "1",
          houseName: "101室",
          categoryList: [
            {
              name: '党员',
              iconUrl: require('../../../../assets/img/shuju/dangyuan.png'),
              isSpecial: '1',
            },
            {
              name: '低保',
              iconUrl: require('../../../../assets/img/modules/visual/dabing.png'),
              isSpecial: '0',
            }
          ]
        },
        {
          houseId: "2",
          houseName: "102室",
          categoryList: [
            {
              name: '低保',
              iconUrl: require('../../../../assets/img/modules/visual/dabing.png'),
              isSpecial: '0',
            },
            {
              name: '低保',
              iconUrl: require('../../../../assets/img/modules/visual/dabing.png'),
              isSpecial: '0',
            },
            {
              name: '低保',
              iconUrl: require('../../../../assets/img/modules/visual/dabing.png'),
              isSpecial: '0',
            },
            {
              name: '低保',
              iconUrl: require('../../../../assets/img/modules/visual/dabing.png'),
              isSpecial: '0',
            }
          ]
        },
        {
          houseId: "3",
          houseName: "103室",
          categoryList: [
            {
              name: '低保',
              iconUrl: require('../../../../assets/img/modules/visual/dabing.png'),
              isSpecial: '0',
            }
          ]
        },
        {
          houseId: "4",
          houseName: "104室",
          categoryList: [
            {
              name: '低保',
              iconUrl: require('../../../../assets/img/modules/visual/dabing.png'),
              isSpecial: '0',
            }
          ]
        },
        {
          houseId: "5",
          houseName: "105室",
          categoryList: [
            {
              name: '低保',
              iconUrl: require('../../../../assets/img/modules/visual/dabing.png'),
              isSpecial: '0',
            }
          ]
        },
        {
          houseId: "6",
          houseName: "106室",
          categoryList: [
            {
              name: '低保',
              iconUrl: require('../../../../assets/img/modules/visual/dabing.png'),
              isSpecial: '0',
            }
          ]
        }
      ],
      selHouseId: '',
      selHouseName: '',
      selHouseIndex: 0,

      userArray: [
        {
          name: '张三',
          userId: '1',
        },
        {
          name: '李四',
          userId: '2',
        },
        {
          name: '王婷婷',
          userId: '3',
        }
      ],
      selUserName: '',
      selUserId: '',


      orgData: {},//当前组织对象
      orgId: '',
      orgLevel: '',



      //下钻层级记录
      runNum: 0,
      runAgencyArray: [],

    }
  },
  async mounted () {


  },
  methods: {
    async initData (neighborHoodId, neighborHoodName) {
      this.roomLoaded = false
      this.neighborHoodId = neighborHoodId
      this.neighborHoodName = neighborHoodName
      //加载楼栋数据
      await this.loadBuilding()

      if (this.selBuildingId) {
        await this.loadRoom()
        this.roomLoaded = true

      }

    },

    //选择房间
    handleClickRoom (index) {
      this.selHouseIndex = index
    },
    //点击全部成员
    async handleShowAllUser (selIndex) {



      this.roomArray.forEach((element, index) => {
        let obj = JSON.parse(JSON.stringify(element))


        if (index === selIndex) {
          obj.showAllUser = !obj.showAllUser
          this.$set(this.roomArray, selIndex, obj)

          this.loadUser(element.houseId, selIndex)
        } else {
          obj.showAllUser = false
          this.$set(this.roomArray, index, obj)
          // element.showAllUser = false
        }
      });


    },

    //点击用户
    handleClickUser (index) {

    },
    //获取右侧infolist数据
    async loadList () {

    },

    //下钻到下一级
    toSubAgency (e) {
      //点击小区neighborHood显示楼栋，点击非小区，进入下一级地图
      this.runNum++
      this.runAgencyArray.push(this.orgData)

      this.subAgencyArray.forEach(item => {
        if (item.id === e.selected[0].id_) {
          this.selPolygonId = item.id
          this.selPolygon = item
          this.orgId = item.id
          this.orgLevel = item.level
        }
      });

      console.log(this.runNum)
      console.log(this.runAgencyArray)
      if (this.orgLevel === 'neighborHood') {

      } else {
        this.refreshMap(true)
      }

    },


    //返回所选组织
    handleClickAgency (index) {

      const cutNum = this.runAgencyArray.length - index//要减去的长度
      this.runNum = this.runNum - cutNum
      this.orgData = this.runAgencyArray[index]
      for (let i = 0; i < cutNum; i++) {
        this.runAgencyArray.pop()
      }

      this.orgId = this.orgData.id
      this.orgLevel = this.orgData.level

      console.log(this.runAgencyArray)
      console.log(this.orgData)

      if (this.orgLevel === 'neighborHood') {//显示小区

      } else {
        this.refreshMap(true)
      }

    },

    //加载楼栋数据
    async loadBuilding () {
      // const url = "/gov/org/agency/baseinfofamilybuilding"
      const url = "http://yapi.elinkservice.cn/mock/245/gov/org/agency/baseinfofamilybuilding"
      let params = {
        neighborHoodId: this.orgId
      }

      const { data, code, msg } = await requestPost(url, params)

      if (code === 0) {
        // this.buildingArray = data
        this.buildingArray.forEach(item => {
          item.buildingName = this.neighborHoodName + "-" + item.buildingName
        });
        if (this.buildingArray.length > 0) {
          this.selBuildingId = this.buildingArray[0].buildingId
          this.selBuildingName = this.buildingArray[0].buildingName
        } else {
          this.selBuildingId = ''
          this.selBuildingName = ''
        }


      } else {
        this.$message.error(msg)
      }

    },

    //加载房间数据
    async loadRoom () {
      // const url = "/gov/org/ichouse/houselist"
      const url = "http://yapi.elinkservice.cn/mock/245/gov/org/ichouse/houselist"
      let params = {
        buildingId: this.selBuildingId
      }

      const { data, code, msg } = await requestPost(url, params)

      if (code === 0) {
        // this.roomArray = data

        if (this.roomArray.length > 0) {
          this.selHouseId = this.roomArray[0].houseId
          this.selHouseName = this.roomArray[0].houseName

          this.roomArray.forEach(roomItem => {
            let iconArrayShow = JSON.parse(JSON.stringify(roomItem.categoryList))
            // debugger
            if (iconArrayShow.length > 0) {
              if (iconArrayShow[0].isSpecial === '1') {//第一个图标是党员
                roomItem.isParty = true
                roomItem.partyUrl = iconArrayShow[0].iconUrl
                iconArrayShow.shift();//删除第一个数据
              } else {
                roomItem.isParty = false
              }
            }
            this.$nextTick(() => {
              // ref_tree 元素的ref   value 绑定的node-key
              roomItem.iconArrayShow = iconArrayShow
            });

            roomItem.showAllUser = false

          });

        }


      } else {
        this.$message.error(msg)
      }

    },

    //加载成员数据
    async loadUser (houseId, index) {
      // const url = "/epmetuser/icresiuser/getpeoplebyroom"
      const url = "http://yapi.elinkservice.cn/mock/245/epmetuser/icresiuser/getpeoplebyroom"
      let params = {
        homeId: houseId
      }

      const { data, code, msg } = await requestPost(url, params)

      if (code === 0) {
        // this.userArray = data


      } else {
        this.$message.error(msg)
      }

    },


    //开启加载动画
    startLoading () {
      loading = Loading.service({
        lock: true, //是否锁定
        text: '正在加载……', //加载中需要显示的文字
        background: 'rgba(0,0,0,.7)' //背景颜色
      });

    },

    //结束加载动画
    endLoading () {
      //clearTimeout(timer);
      if (loading) {
        loading.close();
      }
    },
  },
  props: {

  },
  computed: {

    mapHeight () {

      return this.clientHeight - 120;

    },
    // zoom: {
    //   get () {
    //     //根据不同屏幕分辨率，控制zoom大小
    //     if (this.clientHeight < 900) {
    //       return 2.3
    //     } else {
    //       return 2.8
    //     }
    //   },
    //   set (value) {
    //   }
    // },
    ...mapGetters(["clientHeight"])

  },
  components: {},
}

</script>

<style
  lang="scss"
  src="@/assets/scss/modules/visual/basicInfoMain.scss"
  scoped
></style>

<style lang=scss scoped>
.customer_select {
  /* 未选中任何选项的时候 placeholder的样式 需要先选中父元素 增加权重 */
  /deep/ input::-webkit-input-placeholder {
    color: #fff;
  }
  /deep/ input::-moz-input-placeholder {
    color: #fff;
  }
  /deep/ input::-ms-input-placeholder {
    color: #fff;
  }

  /* 修改的是el-input的样式 */
  /* 一种方法是设置最里层el-input__inner的背景色 外层的两级父元素设置为透明色 */
  /* 另一种方法是从el-select到el-input__inenr的背景色都设置为需要的颜色 */
  /deep/ .el-select,
  /deep/ .el-input,
  /deep/ .el-input__inner {
    background-color: #08164d00;
    color: #fff;
    border: 0px;
    border-radius: 0px;
    text-align: left;
    font-size: 22px;
    font-family: PingFang SC;
    font-weight: 800;
    color: #ffffff;
    display: flex;
  }

  /* el-input聚焦的时候 外层的border会有一个样式 */
  /deep/ .el-select .el-input.is-focus .el-input__inner {
    border: 0px;
  }

  /* 修改的是el-input上下的小图标的颜色 */
  /deep/ .el-select .el-input .el-select__caret {
    color: #fff;
  }

  /* 修改总体选项的样式 最外层 */
  /deep/ .el-select-dropdown {
    background-color: #08164d;
    margin: 0px;
    border: 0px;
    border-radius: 0px;
  }

  /* 修改单个的选项的样式 */
  /deep/ .el-select-dropdown__item {
    background-color: transparent;
    color: #fff;
  }

  /* item选项的hover样式 */
  /deep/ .el-select-dropdown__item.hover,
  /deep/ .el-select-dropdown__item:hover {
    color: #409eff;
  }

  /* 修改的是下拉框选项内容上方的尖角 */
  /deep/ .el-popper .popper__arrow,
  .el-popper .popper__arrow::after {
    display: none;
  }
}
</style> 

<style lang=scss >
.el-scrollbar__wrap {
  overflow-x: hidden !important;
}
</style>