zhgdyun/src/views/projectAdmin/jlw/safeManage/leftTop.vue

<template>
  <Card :title="title">
    <!-- <JProgressChart :seriesData="seriesData" :yData="yData" /> -->

    <div class="table">
      <div class="thead">
        <div class="row">
          <div class="td">检查项</div>
          <div class="td">检查内容</div>
          <div class="td">检查时间</div>
          <div class="td">整改人</div>
        </div>
      </div>
      <div class="tbody">
        <vue-scroll>
          <div class="row" v-for="(alarm, index) in alarmList" :key="index">
            <div class="td">{{ alarm.checkPoints }}</div>
            <div class="td">{{ alarm.checkContent }}</div>
            <div class="td">{{ alarm.checkTime }}</div>
            <div class="td">{{ alarm.rectifyPeopleAme }}</div>
          </div>
          <div v-if="!alarmList.length">无数据</div>
        </vue-scroll>
      </div>
    </div>
  </Card>
</template>

<script>
import Card from '../components/Card.vue'
import JProgressChart from '../jChart/bar/JProgressChart.vue'
import { getNewestSecurityManageDataList2Api } from '@/assets/js/api/dataBoard'
export default {
  components: { Card, JProgressChart },
  props: {
    title: {
      type: String,
      default: ''
    }
  },
  mounted() {
    getNewestSecurityManageDataList2Api({ projectSn: this.projectSn }).then(res => {
      this.alarmList = res.result || []
    })
  },
  data() {
    return {
      projectSn: this.$store.state.projectSn,
      alarmList: []
      // yData: [
      //   '未分类',
      //   '临边防护',
      //   '洞口防护',
      //   '悬挑式脚手架',
      //   '被电箱与开关箱',
      //   '扣件式钢管脚手架',
      //   '现场防火',
      //   '材料管理',
      //   '施工方案'
      // ].reverse(),
      // seriesData: [100, 235, 232, 532, 112, 532, 449, 269, 998]
    }
  }
}
</script>

<style lang="less" scoped>
.table {
  padding: 0 6px;
  height: 100%;
  font-size: 14px;
  color: #fff;
  .thead,
  .tbody {
    &.thead {
      margin-bottom: 5px;
      padding-bottom: 5px;
      color: #6ee4f0;
    }
    &.tbody {
      height: calc(100% - 42px);
    }
    .row {
      width: 100%;
      display: flex;
      .td {
        height: 30px;
        line-height: 30px;
        &:nth-child(1) {
          width: 160px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        &:nth-child(2) {
          padding-left: 10px;
          flex: 1;
        }
        &:nth-child(3) {
          width: 140px;
        }
        &:nth-child(4) {
          width: 56px;
        }
      }
    }
  }
}
</style>