easydo-zcgx-web/src/views/home/home.vue

<template>
  <div class="main">
    <div class="top-area">
      <div class="left">
        <div class="flex-box">
          <div class="top-card" style="margin-right: 2%">
            <div class="title">早安,陈兆雪，开始您工作的一天吧！</div>
            <div class="btn-box">
              <div>
                <div class="top">
                  <img src="@/assets/images/home-ring.png" alt="" />
                  <div>全部消息</div>
                </div>
                <div class="bottom">4</div>
              </div>
              <div>
                <div class="top">
                  <img src="@/assets/images/home-book.png" alt="" />
                  <div>完成消息</div>
                </div>
                <div class="bottom">7</div>
              </div>
              <div>
                <div class="top">
                  <img src="@/assets/images/home-file.png" alt="" />
                  <div>代办消息</div>
                </div>
                <div class="bottom">11</div>
              </div>
              <div>
                <div class="top">
                  <img src="@/assets/images/home-email.png" alt="" />
                  <div>未读消息</div>
                </div>
                <div class="bottom">12</div>
              </div>
            </div>
          </div>
          <div class="top-card" style="padding: 0 24px;">
            <el-tabs v-model="activeName">
              <el-tab-pane label="快速操作" name="first">
                <div class="flex-row">
                  <div class="fast-btn">
                    <div class="circle"></div>
                    <div class="label">角色管理</div>
                  </div>
                  <div class="fast-btn">
                    <div class="circle"></div>
                    <div class="label">部门管理</div>
                  </div>
                  <div class="fast-btn">
                    <div class="circle"></div>
                    <div class="label">新增</div>
                  </div>
                </div>
              </el-tab-pane>
              <el-tab-pane label="最近访问" name="second">
                <div class="flex-row">
                  <div class="fast-btn">
                    <div class="circle"></div>
                    <div class="label">角色管理</div>
                  </div>
                  <div class="fast-btn">
                    <div class="circle"></div>
                    <div class="label">部门管理</div>
                  </div>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
        <div class="flex-box" style="margin-top: 14px;">
          <div class="center-card" style="margin-right: 2%">
            <div class="title">今日生产KPI</div>
            <pie-chart />
          </div>
          <div class="center-card">
            <div class="title">已办流程</div>
            <line-chart />
          </div>
        </div>
        <div class="flex-box" style="margin-top: 14px;">
          <div class="bottom-card">
            <div class="title">数据总览</div>
            <cut-line-chart></cut-line-chart>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="top-card">
          <div class="top-bar">
            <div class="left">最新公告</div>
            <div class="right">查看全部</div>
          </div>
          <div class="cell line">
            <div class="time">2024-01-02</div>
            <div class="content">网站于某月某日开始测试上线，请各部门...</div>
            <div class="tag">公告</div>
          </div>
          <div class="cell line">
            <div class="time">2024-01-02</div>
            <div class="content">网站于某月某日开始测试上线，请各部门...</div>
            <div class="tag">公告</div>
          </div>
          <div class="cell line">
            <div class="time">2024-01-02</div>
            <div class="content">网站于某月某日开始测试上线，请各部门...</div>
            <div class="tag">公告</div>
          </div>
          <div class="cell line">
            <div class="time">2024-01-02</div>
            <div class="content">网站于某月某日开始测试上线，请各部门...</div>
            <div class="tag">公告</div>
          </div>
          <div class="cell line">
            <div class="time">2024-01-02</div>
            <div class="content">网站于某月某日开始测试上线，请各部门...</div>
            <div class="tag">公告</div>
          </div>
          <div class="cell">
            <div class="time">2024-01-02</div>
            <div class="content">网站于某月某日开始测试上线，请各部门...</div>
            <div class="tag">公告</div>
          </div>
        </div>
        <div class="bottom-card">
          <div class="top-bar">
            <div class="left">代办事项</div>
            <div class="right">查看全部</div>
          </div>
          <div class="cell">
            <div class="content">
              <div class="title">港口某个项目需要修改某个地方，请尽快尽快尽快修...</div>
              <el-tag class="ml-2" type="success">已通过</el-tag>
            </div>
            <div class="time">提交时间：2024-01-12 | 提交人：张三</div>
          </div>
          <div class="cell">
            <div class="content">
              <div class="title">港口某个项目需要修改某个地方，请尽快尽快尽快修...</div>
              <el-tag class="ml-2" type="success">已通过</el-tag>
            </div>
            <div class="time">提交时间：2024-01-12 | 提交人：张三</div>
          </div>
          <div class="cell">
            <div class="content">
              <div class="title">港口某个项目需要修改某个地方，请尽快尽快尽快修...</div>
              <el-tag class="ml-2" type="success">已通过</el-tag>
            </div>
            <div class="time">提交时间：2024-01-12 | 提交人：张三</div>
          </div>
          <div class="cell">
            <div class="content">
              <div class="title">港口某个项目需要修改某个地方，请尽快尽快尽快修...</div>
              <el-tag class="ml-2" type="success">已通过</el-tag>
            </div>
            <div class="time">提交时间：2024-01-12 | 提交人：张三</div>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom-area">
      <div class="title">今日工作量</div>
      <div class="table">
        <el-table
          :data="tableData"
          border
          style="width: 100%"
          row-key="id"
        >
          <el-table-column prop="name" label="姓名" />
          <el-table-column prop="step" label="进度条">
            <template #default>
              <el-progress :percentage="11" />
            </template>
          </el-table-column>
          <el-table-column prop="num" label="数量" />
          <el-table-column prop="state" label="状态展示">
            <template #default="scope">
              <el-tag
                :type="scope.row.state === 1 ? 'info' : 'success'"
                disable-transitions
              >{{ scope.row.state === 1 ? '进行中' : '已完成' }}
              </el-tag
              >
            </template>
          </el-table-column>
          <el-table-column prop="number" label="完成量" />
        </el-table>
      </div>
      <div class="page-bottom">
        <el-pagination background layout="prev, pager, next" :total="0" />
      </div>
    </div>
  </div>
</template>

<script setup>
import PieChart from '@/views/home/components/PieChart.vue'
import LineChart from '@/views/home/components/LineChart.vue'
import cutLineChart from '@/views/home/components/cutLineChart.vue'

const activeName = ref('first')
const tableData = ref([{ name: '小明', num: '123', number: '11', step: '0.1', state: 1 }, {
  name: '小明',
  num: '123',
  number: '11',
  step: '0.1',
  state: 1
}, { name: '小明', num: '123', number: '11', step: '0.1', state: 1 }])
</script>

<style scoped lang="scss">
.main {
  min-width: 1066px;
  padding: 4px;

  .top-area {
    display: flex;

    .left {
      width: 70%;

      .flex-box {
        display: flex;
        justify-content: flex-start;
      }

      .top-card {
        width: 48%;
        height: 146px;
        border-radius: 10px;
        background-color: white;
        box-sizing: border-box;
        overflow: hidden;

        .title {
          color: #999;
          font-family: 'PingFang HK';
          font-size: 12px;
          font-style: normal;
          font-weight: 600;
          line-height: normal;
          margin-left: 16px;
          margin-top: 10px;
        }

        .btn-box {
          display: flex;
          justify-content: space-around;
          align-items: center;
          margin-top: 30px;
          font-size: 13px;

          .top {
            display: flex;
            align-items: center;
          }

          .bottom {
            font-size: 32px;
            font-weight: bold;
            margin-top: 7px;
          }

          img {
            height: 17px;
            width: 17px;
            margin-right: 10px;
          }
        }

        .fast-btn {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          margin-right: 30px;

          .circle {
            height: 48px;
            width: 48px;
            background-color: lightgrey;
            border-radius: 50%;
          }

          .label {
            margin-top: 5px;
            color: #666;
            font-family: 'Alibaba PuHuiTi 3.0';
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
          }
        }
      }

      .center-card {
        width: 48%;
        height: 238px;
        border-radius: 10px;
        background-color: white;
        padding: 12px 14px;
        box-sizing: border-box;
        overflow: hidden;
        .title {
          color: #000;
          font-family: 'PingFang SC';
          font-size: 14px;
          font-style: normal;
          font-weight: 500;
          line-height: normal;
        }
      }

      .bottom-card {
        width: 98%;
        height: 373px;
        border-radius: 10px;
        background-color: white;
        padding: 12px 14px;
        box-sizing: border-box;
        overflow: hidden;

        .title {
          color: #000;
          font-family: 'PingFang SC';
          font-size: 14px;
          font-style: normal;
          font-weight: 500;
          line-height: normal;
        }
      }
    }

    .right {
      width: 30%;

      .top-card {
        width: 100%;
        height: 398px;
        border-radius: 10px;
        background-color: white;
        padding: 12px;
        box-sizing: border-box;

        .top-bar {
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 100%;
          margin-bottom: 10px;

          .left {
            margin-left: 7px;
            color: #000;
            font-family: 'PingFang SC';
            font-size: 14px;
            font-style: normal;
            font-weight: 500;
            line-height: normal;
          }

          .right {
            width: fit-content;
            color: #999;
            font-family: 'Alibaba PuHuiTi 3.0';
            font-size: 12px;
            font-style: normal;
            font-weight: 500;
            line-height: normal;
            margin-right: 4px;
            cursor: pointer;
          }
        }

        .cell {
          height: 56px;
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;

          &.line {
            border-bottom: 1px solid #ebebeb;
          }

          .time {
            color: #999;
            font-family: 'Alibaba PuHuiTi 3.0';
            font-size: 12px;
            font-style: normal;
            font-weight: 500;
          }

          .content {
            width: 60%;
            height: 20px;
            color: #333;
            font-family: 'Alibaba PuHuiTi 3.0';
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
            white-space: nowrap; /* 保持文本在一行 */
            overflow: hidden; /* 隐藏超出容器的文本 */
            text-overflow: ellipsis; /* 超出部分显示省略号 */
          }

          .tag {
            width: 44px;
            height: 17px;
            font-size: 12px;
            line-height: 17px;
            text-align: center;
            color: white;
            border-radius: 4px;
            background: #ff852e;
          }
        }
      }

      .bottom-card {
        width: 100%;
        height: 373px;
        border-radius: 10px;
        background-color: white;
        margin-top: 14px;
        padding: 12px;
        box-sizing: border-box;

        .top-bar {
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 100%;
          margin-bottom: 20px;

          .left {
            margin-left: 7px;
            color: #000;
            font-family: 'PingFang SC';
            font-size: 14px;
            font-style: normal;
            font-weight: 500;
            line-height: normal;
          }

          .right {
            width: fit-content;
            color: #999;
            font-family: 'Alibaba PuHuiTi 3.0';
            font-size: 12px;
            font-style: normal;
            font-weight: 500;
            line-height: normal;
            margin-right: 4px;
            cursor: pointer;
          }
        }

        .cell {
          width: 100%;
          height: 67px;
          border: 1px solid #eeeeee;
          border-radius: 10px;
          margin-bottom: 10px;
          padding: 12px 20px;
          box-sizing: border-box;

          .content {
            display: flex;
            align-items: center;
            justify-content: space-between;

            .title {
              color: #000;
              font-family: 'Alibaba PuHuiTi 3.0';
              font-size: 14px;
              font-style: normal;
              font-weight: 400;
              line-height: normal;
              white-space: nowrap; /* 保持文本在一行 */
              overflow: hidden; /* 隐藏超出容器的文本 */
              text-overflow: ellipsis; /* 超出部分显示省略号 */
              margin-right: 4px;
            }
          }

          .time {
            color: #999;
            font-family: 'Alibaba PuHuiTi 3.0';
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
            margin-top: 5px;
          }
        }
      }
    }
  }

  .bottom-area {
    width: 100%;
    margin-top: 14px;
    height: 412px;
    border-radius: 10px;
    background-color: white;
    padding: 12px 14px;
    box-sizing: border-box;

    .title {
      color: #000;
      font-family: 'PingFang SC';
      font-size: 14px;
      font-style: normal;
      font-weight: 500;
      line-height: normal;
    }

    .table {
      margin-top: 20px;
      height: 285px;
      overflow-y: scroll;
    }

    .page-bottom {
      display: flex;
      justify-content: flex-end;
      margin-top: 10px;
    }
  }
}
</style>