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

<template>

  <div class="div_community_info"
       @click="handleShowAllUser()">
    <div class="div_select">

      <img src="../../../../assets/img/shuju/title-tip.png"
           alt />
      <div class="customer_select">
        <!-- <span>{{neighborHoodName+'-'}}</span> -->
        <el-select v-model="selBuildingId"
                   :popper-append-to-body="false"
                   placeholder="请选择">
          <el-option v-for="(item,index) in buildingArray"
                     :key="item.buildingId"
                     :label="item.buildingName"
                     :value="item.buildingId"
                     @click.native="handleClickBuilding(index)">
          </el-option>
        </el-select>
      </div>
    </div>
    <div class="div_room_bar">
      <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.stop="handleShowAllUser(index)"
                 class="div_user">

              <span>全部成员</span>
              <img src="../../../../assets/img/xiala.png"
                   alt />

              <div class="user_list"
                   v-show="item.showAllUser&&userArray.length>0">
                <div v-for="(userItem,userIndex) in userArray"
                     :key="userIndex"
                     class="user_item"
                     @click.stop="handleClickUser(userItem.userId)">
                  <div class="user_item_content">
                    <div class="name">{{userItem.name}}</div>

                    <img src="../../../../assets/img/jinru.png"
                         alt />

                  </div>
                  <div :class="['item_line',{'last_line':userIndex==(userArray.length-1)}]"></div>
                </div>

              </div>
            </div>

          </div>

        </div>
      </el-scrollbar>
    </div>
  </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: [],//楼栋下拉框数据
      selBuildingId: '',
      selBuildingName: '',

      roomLoaded: false,
      roomArray: [],
      selHouseId: '',
      selHouseName: '',
      selHouseIndex: 0,

      userArray: [],
      selUserName: '',
      selUserId: '',

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

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

    }
  },
  async mounted () {


  },
  methods: {
    //小区id，小区名称
    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

      }

    },

    //切换楼栋
    async handleClickBuilding (index) {

      this.selBuildingId = this.buildingArray[index].buildingId
      this.selBuildingName = this.buildingArray[index].buildingName

      await this.loadRoom()
      this.roomLoaded = true

      this.$emit('refreshInfoList', this.selBuildingId, 'building')
    },
    //选择房间
    handleClickRoom (index) {
      this.selHouseIndex = index
      this.selHouseId = this.roomArray[index].houseId
      this.selHouseName = this.roomArray[index].houseName

      // this.$emit('refreshInfoList', this.selHouseId, 'room')
    },
    //点击全部成员
    async handleShowAllUser (selIndex) {
      // this.startLoading()
      await this.loadUser(this.roomArray[selIndex].houseId, 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)


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

    },

    //点击用户
    handleClickUser (userId) {
      this.$emit('toSubAgency', 'people', userId, "")
    },
    //获取右侧infolist数据
    async loadList () {

    },

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

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

      if (code === 0) {
        this.buildingArray = data
        this.buildingArray.forEach(item => {
          if (!this.buildingArray[0].buildingName) {
            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.roomArray.forEach(roomItem => {
            let iconArrayShow = JSON.parse(JSON.stringify(roomItem.categoryList))
            let iconArray = []

            if (iconArrayShow.length > 0) {
              if (iconArrayShow[0].isSpecial === '1') {//第一个图标是党员
                roomItem.isParty = true
                roomItem.partyUrl = iconArrayShow[0].iconUrl
                iconArrayShow.shift();//删除第一个数据
              } else {
                roomItem.isParty = false
              }
            }
            if (iconArrayShow.length > 4) {//去前四个
              for (let i = 0; i < 4; i++) {
                iconArray.push(iconArrayShow[i])
              }
            } else {
              iconArray = iconArrayShow
            }
            this.$nextTick(() => {
              // ref_tree 元素的ref   value 绑定的node-key
              roomItem.iconArrayShow = iconArray
            });

            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
        if (this.userArray.length === 0) {
          this.$message.warning('该房间下没有住户')
        }

      } 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: {
    // selectWidth () {
    //   let width = this.selHouseName.length * 200
    //   console.log(width)
    //   return width + 'px';
    // },

    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::before {
    color: #fff;
    content: "";
    background: url("../../../../assets/img/xiala.png") center center no-repeat;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

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

  /* 修改选项整体的样式 */
  /deep/ .el-select-dropdown__list {
    padding: 6px 0 20px 0;
  }
  /* 修改单个的选项的样式 */
  /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>