feat：首页考核报表

龚焕茏

2024-08-05 5873cfe2ce41359b7a55eacb75cfa79f8361c019

feat：首页考核报表

 src/api/platform/home.js

@@ -40,4 +40,12 @@
    url: '/home/ywUnitCount',
    method: 'get'
  })
}

// 核算报表
export function calculate() {
  return request({
    url: '/home/calculate',
    method: 'get'
  })
}

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

@@ -1,115 +1,50 @@
<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">
          <h1>考核报表</h1>
          <div class="more-button" @click="$router.push({ path: '/contract/report' })">
            <span>更多</span>
            <i class="el-icon-arrow-right"></i>
          </div>
        </div>
        <div class="table-container">
          <div class="table-content">
            <el-table :data="tableData" :show-header="false" class="data-table">
              <el-table-column>
                <template slot-scope="scope">
                  <p>{{ scope.row.name }}</p>
                  <p>{{ scope.row.date }}</p>
                </template>
              </el-table-column>
              <el-table-column align="center" width="80px">

                <template slot-scope="scope">
                  <div class="more-info">
                    <span>详情</span>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <el-table :data="tableData" style="width: 100%" height="350">
          <el-table-column prop="name" label="规则名称" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="num" label="数量" align="center">
          </el-table-column>
          <el-table-column prop="score" label="分数" align="center">
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script>
import { calculate } from "@/api/platform/home";
export default {
  name: 'DataCheck',
  name: 'DataRank',

  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,
        },
      ]
      tableData: []
    }
  },
  mounted() {
    calculate().then(res => {
      this.tableData = res.data;
    })
  }
}
</script>

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

  .data-card {
    height: 100%;
@@ -120,6 +55,19 @@
      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;
  }
}

@@ -137,53 +85,7 @@
  }
}

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

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

.more-info {
  cursor: pointer;
  font-size: 16px;
  padding: 0 10px;
}

.data-table {
  width: 100%;
}

::v-deep .data-table>>>.el-table__row>td {
  /* 去除表格线 */
  border: none;
}

::v-deep .data-table th {
  border: none;
}

::v-deep .data-table td,
::v-deep .data-table th.is-leaf {
  border: none;
}

// 表格最外边框
::v-deep .el-table--border,
::v-deep .el-table--group {
  border: none;

}

::v-deep .el-table--border::after,
::v-deep .el-table--group::after,
::v-deep .el-table::before {
  background-color: transparent;
}
</style>