Merge remote-tracking branch 'origin/master'

fuliqi

2024-03-07 1046f687b35cdcdbafab6e0bbb17cbb3d1982a8b

 src/views/home/data-table/index.vue

New file
@@ -0,0 +1,133 @@
<template>
  <div class="data-table-container">

    <el-card class="data-card" :body-style="{ height: '100%' }">
      <div class="card-content">
        <div class="title-container">
          <h1>运维到期预警</h1>
          <div class="more-button">
            <span>更多</span>
            <i class="el-icon-arrow-right"></i>
          </div>
        </div>

        <el-table :data="tableData" height="400">
          <el-table-column prop="date" label="警报时间" align="center">
          </el-table-column>
          <el-table-column prop="name" label="点位信息" align="center">
          </el-table-column>
          <el-table-column prop="date" label="运维截止时间" align="center">
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button size="mini">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'DataTable',
  data() {
    return {
      tableData: [
        {
          date: '2024.02.28 15:14:01',
          name: '运维公司名称1',
          address: '上海市普陀区金沙江路 1518 弄',
          num: 111,
        },
        {
          date: '2024.02.28 15:14:01',
          name: '运维公司名称1',
          address: '上海市普陀区金沙江路 1518 弄',
          num: 111,
        },
        {
          date: '2024.02.28 15:14:01',
          name: '运维公司名称1',
          address: '上海市普陀区金沙江路 1518 弄',
          num: 111,
        },
        {
          date: '2024.02.28 15:14:01',
          name: '运维公司名称1',
          address: '上海市普陀区金沙江路 1518 弄',
          num: 111,
        },
        {
          date: '2024.02.28 15:14:01',
          name: '运维公司名称1',
          address: '上海市普陀区金沙江路 1518 弄',
          num: 111,
        },
        {
          date: '2024.02.28 15:14:01',
          name: '运维公司名称1',
          address: '上海市普陀区金沙江路 1518 弄',
          num: 111,
        },
        {
          date: '2024.02.28 15:14:01',
          name: '运维公司名称1',
          address: '上海市普陀区金沙江路 1518 弄',
          num: 111,
        },
        {
          date: '2024.02.28 15:14:01',
          name: '运维公司名称1',
          address: '上海市普陀区金沙江路 1518 弄',
          num: 111,
        },
        {
          date: '2024.02.28 15:14:01',
          name: '运维公司名称1',
          address: '上海市普陀区金沙江路 1518 弄',
          num: 111,
        },
        {
          date: '2024.02.28 15:14:01',
          name: '运维公司名称1',
          address: '上海市普陀区金沙江路 1518 弄',
          num: 111,
        },
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.data-table-container {
  height: 450px;
  margin-bottom: 20px;

  .data-card {
    height: 100%;

    .card-content {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
    }
  }
}

.title-container {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .more-button {
    cursor: pointer;
    font-size: 16px;
    padding: 0 10px;
  }
}
</style>