soc_web/src/views/iot/videoDay/dialog.detail.vue

<template>
  <div class="videoDaysDetail">
    <el-dialog title="录像天数详情" :visible.sync="isShow" width="1000px" :destroy-on-close="true">
      <el-descriptions  :column="2" border>
        <el-descriptions-item label="组织机构" >{{data.orgName}}</el-descriptions-item>
        <el-descriptions-item label="上报时间" >{{data.updateTime}}</el-descriptions-item>
        <el-descriptions-item label="监控主机" >{{data.equipmentName}}</el-descriptions-item>
        <el-descriptions-item label="摄像头" >{{data.channelName}}</el-descriptions-item>
        <el-descriptions-item label="通道号" >{{data.channelCode}}</el-descriptions-item>
        <el-descriptions-item label="计划存储天数" >{{data.planDays}}</el-descriptions-item>
        <el-descriptions-item label="实际存储天数" >{{data.realDays}}</el-descriptions-item>
        <el-descriptions-item label="计划录像开始时间" >{{data.planStartTime}}</el-descriptions-item>
        <el-descriptions-item label="计划录像结束时间" >{{data.planEndTime}}</el-descriptions-item>
      </el-descriptions>

      <div class="time-line">
        <el-timeline :reverse="false">
          <el-timeline-item v-for="(activity, index) in data.loseDateList" :key="index" color="rgb(208 230 253)"
                            size="large" type="primary">
            <div class="time">
              <div>
                      <span class="year">
                        {{ activity.month }}
                      </span>
              </div>
              <!-- <div class="day">{{ activity.time.substring(0, 4) }}年</div> -->
            </div>
            <div class="ml10">

              <el-tag v-for="(date, number) in activity.lostDates" :key="number">
                <div>{{ date }}
                  <div class="reTip">
                  </div>
                </div>
              </el-tag>
            </div>
          </el-timeline-item>
        </el-timeline>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="onHide">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>

export default {
  data() {
    return {
      isShow: false,
      data: {},
      id: null,
    };
  },
  methods: {
    async show(id) {
      this.id = id;
      //this.data = await this.$api.videoDaysCheck.one(id);
      this.isShow = true;
    },
    onHide() {
      this.isShow = false;
    },
  },
};
</script>

<style lang="scss">
.videoDaysDetail {
  .block {
    display: block;
  }

  .time-line {
    margin-top: 10px;
    margin-left: 80px;
  }

  .list-title {
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #181b1e;
  }

  .list-company {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #2991ff;
    margin-top: 15px;
    margin-bottom: 15px;
  }

  .list-desc {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #596878;
  }

  .el-tag--small {
    margin-bottom: 10px;
  }

  .reTip {
    display: block;
    background: #f00;
    border-radius: 50%;
    width: 4px;
    height: 4px;
    top: -21px;
    right: -26px;
    position: relative;
    z-index: 4;
  }

  //左侧时间
  .time {
    color: rgb(181 215 251);
    position: absolute;
    left: -35px;
    top: -1px;

    .year {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #20354a;
    }

    .day {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #596878;
      text-align: center;
      margin-top: 10px;
    }
  }
}
</style>