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

<template>
  <div class="dhrd">
    <div v-if="list.length > 0" 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 style="overflow: hidden" @mouseenter="yiru()" @mouseleave="yichu()">
        <div ref="animation2">
          <div class="dhrd-item" v-for="(item, index) in list" :key="index">
            <div class="time">
              {{ getMomentTime(item.changeTime) }}
              <!-- {{ $moment(item.changeTime).format("HH:mm") }} -->
            </div>
            <div class="title">
              <el-tooltip class="item" effect="dark" :content="item.orgName" placement="top"
                ><span>{{ item.orgName }}</span>
              </el-tooltip>
            </div>
            <!--      <div class="name">{{item.orgName}}</div>-->
            <div class="address">{{ item.content }}</div>
          </div>
          <div v-if="list.length > 4">
            <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">
                <el-tooltip class="item" effect="dark" :content="item.orgName" placement="top"
                  ><span>{{ item.orgName }}</span>
                </el-tooltip>
              </div>
              <!--      <div class="name">{{item.orgName}}</div>-->
              <div class="address">{{ item.content }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-else style="width: 100%; height: 100%; text-align: center; padding-top: 30px">
      <img width="268px" height="128px" src="~@/assets/images/overview/zanwu.png" />
      <div class="zanwuText">近3日暂无更新</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "DynamicHumanRoomData",
  props: {
    currentLevelData: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      org: this.$store.state.chooseArea.chooseName,
      list: [],
    };
  },
  watch: {
    currentLevelData(val) {
      if (val.orgId) {
        this.getList(val);
      }
    },
  },
  mounted() {
    if (this.currentLevelData.orgId) {
      this.getList(this.currentLevelData);
    }
  },
  methods: {
    yichu() {
      this.$refs.animation2.style["animation-play-state"] = "running";
    },
    yiru() {
      this.$refs.animation2.style["animation-play-state"] = "paused";
    },
    getList(item) {
      this.$http.get("/actual/base/streetOverview/residentHouseUpdateRecord?level=" + item.orgLevel + "&orgId=" + item.orgId).then(({ data: { data } }) => {
        this.list = data;
        if (this.list.length > 4) {
          this.$nextTick(() => {
            const aniHeight = this.$refs.animation2.querySelector(".tr").offsetHeight * this.pmList.length;
            this.$refs.animation2.style.animation = `move1 ${this.pmList.length}s linear infinite`;
            document.styleSheets[0].insertRule(`@keyframes move2{0% {transform: translateY(0px);}100% {transform: translateY(-${aniHeight}px);}`, 0);
          });
        } else {
          this.$refs.animation2.style.animation = null;
        }
      });
    },

    getMomentTime(date) {
      if (this.$moment(date).format("YYYY-MM-DD") === this.$moment().format("YYYY-MM-DD")) {
        return this.$moment(date).format("HH:mm");
      } else {
        return this.$moment(date).format("MM-DD");
      }
    },
  },
};
</script>

<style scoped lang="scss">
@import "@/assets/scss/dataBoard/c/common.scss";
.dhrd {
  padding: 0 16px 20px;
}
.zanwuText {
  margin-top: -34px;
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #a3b9da;
}
.dhrd-list {
  height: 150px;
  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>