soc_app/src/views/menu/iot/envMonitor/components/item.vue

<template>
  <div class="flex flex-col justify-center k-app-list__item van-clearfix">
    <van-cell-group @click="itemClick">
      <van-cell :title="data.deviceName" value-class="cell-title-value" title-style="width:100% ;">
        <template #right-icon>
          <van-tag type="danger" v-if="data.state === 1" @click.stop="alarmClick">{{ data.stateText }}</van-tag>
          <van-tag color="gray" text-color="black" v-else-if="data.state == null">未上报</van-tag>
          <van-tag type="primary" v-else>{{ data.stateText }}</van-tag>
        </template>
      </van-cell>
      <van-cell title="所属机构" :value="data.orgName"></van-cell>
      <van-cell title="上报时间" v-if="data.state != null" :value="stateUpdateTimeText"></van-cell>
    </van-cell-group>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import dayjs from 'dayjs'
export default {
  components: {},
  data() {
    return {}
  },
  computed: {
    ...mapGetters(['orgName', 'orgId', 'dictionary']),
    stateUpdateTimeText() {
      if (this.data.stateUpdateTime == null) {
        return '未上报'
      }

      return dayjs(this.data.stateUpdateTime).format('YYYY年M月D日H时m分');
    },
  },
  watch: {},
  props: {
    data: {},
    statusOptions: {}
  },
  methods: {
    itemClick() {
      this.$router.push('/iot/envMonitor/detail?id=' + this.data.id)
    },
    alarmClick(){
      this.$router.push('/iot/envMonitor/alarmIndex?id=' + this.data.id)
    }
  },
  async created() {},
  async mounted() {}
}
</script>
<style lang="scss" scoped>
.cell-title-value {
  display: none;
}
.k-app-list__item {
  //   height: 11.85rem;
  background: #ffffff;
  margin: 0.3rem 0.325rem 0;
  font-size: 3.733333vw;
  .top {
    // min-height: 3rem;
    padding: 0.05rem 0.05rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    border-bottom: 1px solid #f3f4f5;
    > label {
      //   height: 1.38rem;
      // font-size: 1rem;
      //   line-height: 1.25rem;
      color: #323233;
      opacity: 1;
    }
  }
  .bottom {
    min-height: 7.75rem;
    padding: 0 1rem;
    span {
      height: 1.25rem;
      font-size: 0.88rem;
      line-height: 1.25rem;
      color: #000000;
      opacity: 0.61;
    }
  }
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.time-cell-default {
  min-width: 60vw;
}
</style>