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>-->
    <div style="width: 100%;height: 100%;" ref="container">
      <el-table 
        :data="alarmList" 
        style="width: 100%"
        header-align="center"
        :header-cell-style="{ backgroundColor: '#07162b', color: '#67d4db' }"
        :cell-style="{ color: '#fff' }"
      >
        <el-table-column align="center" prop="checkPoints" label="检查项" ></el-table-column>
        <el-table-column align="center" prop="checkContent" label="检查内容" ></el-table-column>
        <el-table-column align="center" prop="checkTime" label="检查时间" width="100"></el-table-column>
        <el-table-column align="center" prop="rectifyPeopleAme" label="整改人" ></el-table-column>
      </el-table>
    </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: ''
    }
  },
  
  data() {
    return {
      projectSn: this.$store.state.projectSn,
      alarmList: [
        {checkPoints:'施工方案',checkContent:'施工方案整改',checkTime:'2022-12-07',rectifyPeopleAme:'张平江'},
        {checkPoints:'洞口防护',checkContent:'洞口需要防护',checkTime:'2022-12-09',rectifyPeopleAme:'马杰'}
      ],

      // yData: [
      //   '未分类',
      //   '临边防护',
      //   '洞口防护',
      //   '悬挑式脚手架',
      //   '被电箱与开关箱',
      //   '扣件式钢管脚手架',
      //   '现场防火',
      //   '材料管理',
      //   '施工方案'
      // ].reverse(),
      // seriesData: [100, 235, 232, 532, 112, 532, 449, 269, 998]
    }
  },
  mounted() {
    // getNewestSecurityManageDataList2Api({ projectSn: this.projectSn }).then(res => {
    //   console.log('待整改问题: ', res);
    //   this.alarmList = res.result || []
    // })
  },
}
</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: 150px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        &:nth-child(2) {
          // padding-left: 10px;
          // flex: 1;
          width: 100px;
        }
        &:nth-child(3) {
          width: 140px;
        }
        &:nth-child(4) {
          width: 56px;
        }
      }
    }
  }
}

</style>