|
|
@@ -1,536 +1,10 @@
|
|
|
<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>
|
|
|
</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 lang="scss" scoped>
|
|
|
</style>
|