From de382ae895fc7ebf97259826727c41b5683617ab Mon Sep 17 00:00:00 2001
From: yangzhi <765157588@qq.com>
Date: Wed, 23 Nov 2022 17:57:37 +0800
Subject: [PATCH] 首页修改

---
 src/views/dashboard/index.vue | 629 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
 1 file changed, 449 insertions(+), 180 deletions(-)

diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index a17e6a8..90795d6 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,188 +1,457 @@
 <template>
-	<div class="dashboard-container">
-		<div class="dashboard-text"
-			style="background-color: #334056;border-radius: 5px;color: #FFF;font-size: 16px;padding: 5px 5px 5px 15px;">
-			<div style="font-size: 20px;">欢迎使用面试考试系统后台</div>
-		</div>
-		<el-row :gutter="20" v-if="isAdmin">
-			<el-col :span="6">
-				<div class="grid-content bg-purple">
-					<label class="grid-content-number">{{total.PriceNumber/100}}<span
-							style="font-size: 16px;">元</span></label>
-					<div>总收益</div>
-				</div>
-			</el-col>
-			<el-col :span="6">
-				<div class="grid-content bg-purple">
-					<label class="grid-content-number">{{total.questiontotal}}</label>
-					<div>题目数量</div>
-				</div>
-			</el-col>
-			<el-col :span="6">
-				<div class="grid-content bg-purple">
-					<label class="grid-content-number">{{total.testpapertotal}}</label>
-					<div>试卷数量</div>
-				</div>
-			</el-col>
-			<el-col :span="6">
-				<div class="grid-content bg-purple">
-					<label class="grid-content-number">{{total.Count}}</label>
-					<div>总人数</div>
-				</div>
-			</el-col>
-		</el-row>
-
-		<div style="width:100%">
-			<el-image :src="imageUrl"  style="width:100%"></el-image> 
-		</div>
-	</div>
+  <div class="dashboard-container">
+    <div class="left-container">
+      <div class="panel">
+        <div class="panel-title">学历分布</div>
+        <div class="panel-body">
+          <div class="echart-box" style="height: 35vh" id="echart1"></div>
+        </div>
+      </div>
+      <div class="panel">
+        <div class="panel-body">
+          <el-calendar v-model="currentDate" style="height:35vh">
+			<template
+				slot="dateCell"
+				slot-scope="{date, data}">
+				<p :class="data.isSelected ? 'is-selected' : ''">
+					{{ data.day.split('-')[2] }} 
+				</p>
+			</template>
+		</el-calendar>
+        </div>
+      </div>
+      <div class="panel">
+        <div class="panel-title">面试进度</div>
+        <div class="panel-body">
+          <div id="echart2" style="height: 35vh"></div>
+        </div>
+      </div>
+      <div class="panel">
+        <div class="panel-title">当日面试</div>
+        <div class="panel-body">
+          <el-table :data="userList" :show-header="false">
+            <el-table-column width="120">
+              <template>
+                <div class="table-td-list">
+                  <span>张三</span>
+                  <span>男</span>
+                  <span>32</span>
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column width="280">
+              <template>
+                <div class="table-td-list">
+                  <span>西南石油大学</span>
+                  <span>计算机科学与技术</span>
+                  <span>本科</span>
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column>
+              <template> 2022/11/23 17:20 </template>
+            </el-table-column>
+            <el-table-column>
+              <template> 面试前端岗位 </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </div>
+    </div>
+    <div class="right-container">
+      <ul class="sta-list">
+        <li v-for="item in staList" :key="item.title">
+          <div style="justify-content: flex-start">
+            <img
+              style="height: 20px; margin-right: 10px"
+              :src="item.icon"
+              alt=""
+            />
+            <span class="sub-title">{{ item.title }}</span>
+          </div>
+          <div>
+            <h3>{{ item.count }}</h3>
+            <img
+              src="/static/images/index/icon9.png"
+              style="height: 30px"
+              alt=""
+            />
+          </div>
+        </li>
+      </ul>
+    </div>
+  </div>
 </template>
 
 <script>
-	import {
-		GetQuestionTotal,
-		GetTestPaperTotal
-	} from '@/api/index'
-	import {
-		OrderGetPriceNumber
-	} from '@/api/order.js'
-	import {
-		mapGetters
-	} from 'vuex'
-	import {
-		GetUserList
-	} from '@/api/user'
-
-
-	import {
-		GetInfo
-	} from '@/api/setting'
-
-
-
-	export default {
-		name: '安第斯考试系统',
-		data() {
-			return {
-				isAdmin: false,
-				imageUrl: '',
-				total: {
-					questiontotal: 0,
-					testpapertotal: 0,
-					PriceNumber: 0,
-					Count: 0,
-				},
-				query: {
-					UserTypeEnum: 1, //0：管理员，1普通用户
-					PageIndex: 1,
-					PageSize: 10,
-
-				}
-			}
-		},
-		computed: {
-			...mapGetters([
-				'name'
-			])
-		},
-		created() {
-
-		},
-		mounted() {
-			try {
-				if (this.$store.state.user.userInfo.UserType == 0) this.isAdmin = true;
-			} catch { }
-			this.init();
-			this.GetTotalHeadler();
-		},
-		methods: {
-			init() {
-				var _this = this;
-				GetInfo(1).then(res => {
-					var d = res.data;
-					if (d && d.data) {
-						if (d.data.home_images) {
-							_this.imageUrl = _this.BASE_URL + d.data.home_images;
-						}
-					}
-				});
-			},
-			GetTotalHeadler() {
-				GetQuestionTotal().then(res => {
-					this.total.questiontotal = res.data.data;
-				});
-				GetTestPaperTotal().then(res => {
-					this.total.testpapertotal = res.data.data;
-				});
-				OrderGetPriceNumber().then(res => {
-					this.total.PriceNumber = res.data.data;
-				})
-				GetUserList(this.query).then(res => {
-					this.total.Count = res.data.data.total
-				})
-			}
-		}
-	}
+import { GetQuestionTotal, GetTestPaperTotal } from "@/api/index";
+import { OrderGetPriceNumber } from "@/api/order.js";
+import { mapGetters } from "vuex";
+import { GetUserList } from "@/api/user";
+
+import { GetInfo } from "@/api/setting";
+
+import * as echarts from "echarts";
+
+export default {
+  data() {
+    return {
+      currentDate: new Date(),
+      staList: [
+        {
+          title: "入库/人",
+          count: 198,
+          icon: "/static/images/index/icon1.png",
+        },
+        {
+          title: "面试邀请/人",
+          count: 123,
+          icon: "/static/images/index/icon2.png",
+        },
+        {
+          title: "正在面试/人",
+          count: 21,
+          icon: "/static/images/index/icon3.png",
+        },
+        {
+          title: "面试完成/人",
+          count: 100,
+          icon: "/static/images/index/icon4.png",
+        },
+        {
+          title: "线下面试/人",
+          count: 98,
+          icon: "/static/images/index/icon5.png",
+        },
+        {
+          title: "已录用/人",
+          count: 898,
+          icon: "/static/images/index/icon6.png",
+        },
+        {
+          title: "未录用/人",
+          count: 1088,
+          icon: "/static/images/index/icon7.png",
+        },
+        { title: "禁用/人", count: 39, icon: "/static/images/index/icon8.png" },
+      ],
+      userList: [{}, {}, {}, {}, {}, {}	],
+      echartOption1: {
+        legend: {
+          top: "bottom",
+        },
+        series: [
+          {
+            name: "学历分布",
+            type: "pie",
+            radius: [0, "80%"],
+            center: ["50%", "50%"],
+            roseType: "area",
+            data: [
+              { value: 40, name: "博士" },
+              { value: 38, name: "硕士" },
+              { value: 32, name: "本科" },
+              { value: 30, name: "大专" },
+              { value: 28, name: "中专" },
+              { value: 26, name: "高中" },
+              { value: 22, name: "初中" },
+              { value: 18, name: "小学" },
+            ],
+          },
+        ],
+      },
+      echartOption2: {
+        grid: {
+          top: 20,
+          bottom: 40,
+        },
+        tooltip: {},
+        xAxis: {
+          type: "category",
+          axisLabel: {
+            color: "#999999",
+            fontSize: 16,
+          },
+          data: [
+            "入库",
+            "面试邀请",
+            "正在面试",
+            "面试完成",
+            "线下面试",
+            "已录用",
+            "未录用",
+            "禁用",
+          ],
+        },
+        yAxis: {
+          type: "value",
+        },
+        series: [
+          {
+            data: [120, 150, 150, 80, 70, 110, 130, 90],
+            type: "bar",
+            label: {
+              show: true,
+              color: "#4e95ff",
+              position: "top",
+              formatter: "{c}人",
+            },
+            itemStyle: {
+              normal: {
+                color: "#4e95ff",
+                barBorderRadius: [10, 10, 0, 0],
+              },
+            },
+          },
+        ],
+      },
+
+      isAdmin: false,
+      imageUrl: "",
+      total: {
+        questiontotal: 0,
+        testpapertotal: 0,
+        PriceNumber: 0,
+        Count: 0,
+      },
+      query: {
+        UserTypeEnum: 1, //0：管理员，1普通用户
+        PageIndex: 1,
+        PageSize: 10,
+      },
+    };
+  },
+  computed: {
+    ...mapGetters(["name"]),
+  },
+  created() {},
+  mounted() {
+    try {
+      if (this.$store.state.user.userInfo.UserType == 0) this.isAdmin = true;
+    } catch {}
+    this.init();
+    this.GetTotalHeadler();
+  },
+  methods: {
+    initEchart() {
+      this.initEchartXueli();
+      this.initEchartJindu();
+    },
+    initEchartXueli() {
+      let myChart = echarts.init(document.getElementById("echart1"));
+      myChart.setOption(this.echartOption1);
+    },
+    initEchartJindu() {
+      let myChart = echarts.init(document.getElementById("echart2"));
+      myChart.setOption(this.echartOption2);
+    },
+    init() {
+      var _this = this;
+      GetInfo(1).then((res) => {
+        var d = res.data;
+        if (d && d.data) {
+          if (d.data.home_images) {
+            _this.imageUrl = _this.BASE_URL + d.data.home_images;
+          }
+        }
+      });
+      this.initEchart();
+    },
+    GetTotalHeadler() {
+      GetQuestionTotal().then((res) => {
+        this.total.questiontotal = res.data.data;
+      });
+      GetTestPaperTotal().then((res) => {
+        this.total.testpapertotal = res.data.data;
+      });
+      OrderGetPriceNumber().then((res) => {
+        this.total.PriceNumber = res.data.data;
+      });
+      GetUserList(this.query).then((res) => {
+        this.total.Count = res.data.data.total;
+      });
+    },
+  },
+};
 </script>
 
+<style scoped>
+>>>.el-calendar-table td.next{
+	display: none;
+}
+>>>.el-calendar-day{
+	height: auto;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+>>>.el-calendar-day p{
+	margin: 0;
+	text-align: center;
+	height: 40px;
+	width: 40px;
+	line-height: 40px;
+}
+>>>.el-calendar-table .el-calendar-day:hover{
+	background-color: transparent;
+}
+>>>.el-calendar-table .el-calendar-day:hover p{
+	background-color: #F2F8FE;
+	border-radius: 30%;
+}
+>>>.el-calendar-table td.is-selected{
+	background-color: transparent;
+}
+>>>.el-calendar-table td.is-selected .el-calendar-day p{
+	background-color: #F2F8FE;
+	border-radius: 30%;
+}
+>>>.el-calendar-table td.is-today .el-calendar-day p{
+	color: #fff;
+	background-color: #409EFF;
+	border-radius: 30%;
+}
+>>>.el-calendar-table td{
+	border: none;
+}
+>>>.el-calendar-table tr td:first-child{
+	border-left: none;
+}
+>>>.el-calendar-table tr:first-child td{
+	border: none;
+}
+</style>
+<style lang="scss" scoped>
+.dashboard {
+  &-container {
+    margin: 30px;
+  }
+
+  &-text {
+    font-size: 30px;
+    line-height: 46px;
+  }
+}
+
+.el-row {
+  margin-bottom: 20px;
+  margin-top: 20px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.el-col {
+  border-radius: 5px;
+}
+
+.bg-purple-dark {
+  background: #99a9bf;
+}
+
+.bg-purple {
+  background: #d3dce6;
+  box-shadow: 0 0 10px #cdcdcd;
+}
+
+.bg-purple-light {
+  background: #e5e9f2;
+}
+
+.grid-content {
+  border-radius: 5px;
+  min-height: 36px;
+  text-align: center;
+  padding-top: 20px;
+  padding-bottom: 20px;
+
+  .grid-content-number {
+    font-size: 40px;
+    color: red;
+  }
+
+  div {
+    font-size: 20px;
+    margin-top: 10px;
+  }
+}
+
+.row-bg {
+  padding: 10px 0;
+  background-color: #f9fafc;
+}
+</style>
 <style lang="scss" scoped>
-	.dashboard {
-		&-container {
-			margin: 30px;
-		}
-
-		&-text {
-			font-size: 30px;
-			line-height: 46px;
-		}
-	}
-
-	.el-row {
-		margin-bottom: 20px;
-		margin-top: 20px;
-
-		&:last-child {
-			margin-bottom: 0;
-		}
-	}
-
-	.el-col {
-		border-radius: 5px;
-	}
-
-	.bg-purple-dark {
-		background: #99a9bf;
-	}
-
-	.bg-purple {
-		background: #d3dce6;
-		box-shadow: 0 0 10px #cdcdcd;
-	}
-
-	.bg-purple-light {
-		background: #e5e9f2;
-	}
-
-	.grid-content {
-		border-radius: 5px;
-		min-height: 36px;
-		text-align: center;
-		padding-top: 20px;
-		padding-bottom: 20px;
-
-		.grid-content-number {
-			font-size: 40px;
-			color: red;
-		}
-
-		div {
-			font-size: 20px;
-			margin-top: 10px;
-		}
-	}
-
-	.row-bg {
-		padding: 10px 0;
-		background-color: #f9fafc;
-	}
+.table-td-list {
+  display: flex;
+  align-items: center;
+  span {
+    margin-right: 10px;
+  }
+}
+.dashboard-container {
+  display: flex;
+  justify-content: space-between;
+  background-color: #f9f9f9;
+  margin: 0;
+  padding: 20px;
+}
+.left-container {
+  flex: 1;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  .panel {
+    width: 49%;
+    flex: none;
+  }
+}
+.right-container {
+}
+.panel {
+  background-color: #fff;
+  border-radius: 10px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  padding: 10px 20px;
+  margin-bottom: 20px;
+  .panel-title {
+    height: 3em;
+    line-height: 3em;
+    font-size: 18px;
+    font-weight: bold;
+  }
+}
+.sta-list {
+  display: flex;
+  flex-direction: column;
+  padding-left: 20px;
+  width: 200px;
+  flex: none;
+  margin: 0;
+  li {
+    list-style: none;
+    background-color: #fff;
+    border: 10px;
+    border-radius: 10px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    padding: 15px 15px 5px;
+    margin-bottom: 20px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    min-height: 9vh;
+    .sub-title {
+      color: #999;
+    }
+    & > div {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+    h3 {
+      margin: 0;
+    }
+  }
+}
 </style>
\ No newline at end of file
--
libgit2 0.21.4