epmet-work-pc-chengyang/src/views/dataBoard/overview/components/DynamicHumanRoomData.vue

<template>
  <div class="dhrd">
  <div class="dhrd-list">
<!--    <div class="dhrd-item">
      <div class="time blue">
        刚刚
      </div>
      <div class="title ">XX社区第一网格</div>
      <div class="name ">杨波</div>
      <div class="address ">
        修改了新苑小区**的居民信息的居民信息的居民信息
      </div>
    </div>-->
    <div class="dhrd-item" v-for="(item,index) in list" :key="index">
      <div class="time">
        {{$moment(item.changeTime).format('HH:mm')}}
      </div>
      <div class="title">{{item.orgName}}</div>
<!--      <div class="name">{{item.orgName}}</div>-->
      <div class="address">{{item.content}}</div>
    </div>
  </div>
  </div>
</template>

<script>
export default {
  name: "DynamicHumanRoomData",
  data() {
    return {
      org: this.$store.state.chooseArea.chooseName,
      list: []
    }
  },
  watch: {
    "$store.state.chooseArea.chooseName"(val) {
      if (val.orgId) {
        this.getList()
      }
    },
  },
  mounted() {
    if (this.org.orgId) {
      this.getList()
    }
  },
  methods: {
    getList() {
      this.$http.get('/actual/base/streetOverview/residentHouseUpdateRecord?level='+this.$store.state.chooseArea.chooseName.level+'&orgId='+this.$store.state.chooseArea.chooseName.orgId).then(({data: {data}}) => {
        this.list = data
      })
    }
  }
}
</script>

<style scoped lang="scss">
@import "@/assets/scss/dataBoard/c/common.scss";
.dhrd {
  padding: 0 16px 20px;
}
.dhrd-list {
  height: 140px;
  overflow-y: auto;
  @include scrollBar
  .dhrd-item {
    display: flex;
    font-size: 14px;
    font-weight: 400;
    color: #FFFFFF;
    height: 40px;
    align-items: center;
    padding: 0 16px;
    &:nth-of-type(odd) {
      background: rgba(14, 56, 115, 0.4);
    }
    .time {
      flex: 1;
    }
    .title {
      flex: 2;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .name {
      flex: 1;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .address {
      flex: 3;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
.blue {
  color: #0DEEEF;
}
</style>