antissoft / antissoft.dati.admin

Browse Code »

Commit de382ae895fc7ebf97259826727c41b5683617ab

Authored by yangzhi 2022-11-23 17:57:37 +0800

1 parent 6a7a6127

首页修改

Inline Side-by-side

Showing 1 changed file with 449 additions and 180 deletions

src/views/dashboard/index.vue

View file @de382ae

1	<template>	1	<template>
2	- <div class="dashboard-container">
3	- <div class="dashboard-text"
4	- style="background-color: #334056;border-radius: 5px;color: #FFF;font-size: 16px;padding: 5px 5px 5px 15px;">
5	- <div style="font-size: 20px;">欢迎使用面试考试系统后台</div>
6	- </div>
7	- <el-row :gutter="20" v-if="isAdmin">
8	- <el-col :span="6">
9	- <div class="grid-content bg-purple">
10	- <label class="grid-content-number">{{total.PriceNumber/100}}<span
11	- style="font-size: 16px;">元</span></label>
12	- <div>总收益</div>
13	- </div>
14	- </el-col>
15	- <el-col :span="6">
16	- <div class="grid-content bg-purple">
17	- <label class="grid-content-number">{{total.questiontotal}}</label>
18	- <div>题目数量</div>
19	- </div>
20	- </el-col>
21	- <el-col :span="6">
22	- <div class="grid-content bg-purple">
23	- <label class="grid-content-number">{{total.testpapertotal}}</label>
24	- <div>试卷数量</div>
25	- </div>
26	- </el-col>
27	- <el-col :span="6">
28	- <div class="grid-content bg-purple">
29	- <label class="grid-content-number">{{total.Count}}</label>
30	- <div>总人数</div>
31	- </div>
32	- </el-col>
33	- </el-row>
34	-
35	- <div style="width:100%">
36	- <el-image :src="imageUrl" style="width:100%"></el-image>
37	- </div>
38	- </div>	2	+ <div class="dashboard-container">
		3	+ <div class="left-container">
		4	+ <div class="panel">
		5	+ <div class="panel-title">学历分布</div>
		6	+ <div class="panel-body">
		7	+ <div class="echart-box" style="height: 35vh" id="echart1"></div>
		8	+ </div>
		9	+ </div>
		10	+ <div class="panel">
		11	+ <div class="panel-body">
		12	+ <el-calendar v-model="currentDate" style="height:35vh">
		13	+ <template
		14	+ slot="dateCell"
		15	+ slot-scope="{date, data}">
		16	+ <p :class="data.isSelected ? 'is-selected' : ''">
		17	+ {{ data.day.split('-')[2] }}
		18	+ </p>
		19	+ </template>
		20	+ </el-calendar>
		21	+ </div>
		22	+ </div>
		23	+ <div class="panel">
		24	+ <div class="panel-title">面试进度</div>
		25	+ <div class="panel-body">
		26	+ <div id="echart2" style="height: 35vh"></div>
		27	+ </div>
		28	+ </div>
		29	+ <div class="panel">
		30	+ <div class="panel-title">当日面试</div>
		31	+ <div class="panel-body">
		32	+ <el-table :data="userList" :show-header="false">
		33	+ <el-table-column width="120">
		34	+ <template>
		35	+ <div class="table-td-list">
		36	+ <span>张三</span>
		37	+ <span>男</span>
		38	+ <span>32</span>
		39	+ </div>
		40	+ </template>
		41	+ </el-table-column>
		42	+ <el-table-column width="280">
		43	+ <template>
		44	+ <div class="table-td-list">
		45	+ <span>西南石油大学</span>
		46	+ <span>计算机科学与技术</span>
		47	+ <span>本科</span>
		48	+ </div>
		49	+ </template>
		50	+ </el-table-column>
		51	+ <el-table-column>
		52	+ <template> 2022/11/23 17:20 </template>
		53	+ </el-table-column>
		54	+ <el-table-column>
		55	+ <template> 面试前端岗位 </template>
		56	+ </el-table-column>
		57	+ </el-table>
		58	+ </div>
		59	+ </div>
		60	+ </div>
		61	+ <div class="right-container">
		62	+ <ul class="sta-list">
		63	+ <li v-for="item in staList" :key="item.title">
		64	+ <div style="justify-content: flex-start">
		65	+ <img
		66	+ style="height: 20px; margin-right: 10px"
		67	+ :src="item.icon"
		68	+ alt=""
		69	+ />
		70	+ <span class="sub-title">{{ item.title }}</span>
		71	+ </div>
		72	+ <div>
		73	+ <h3>{{ item.count }}</h3>
		74	+ <img
		75	+ src="/static/images/index/icon9.png"
		76	+ style="height: 30px"
		77	+ alt=""
		78	+ />
		79	+ </div>
		80	+ </li>
		81	+ </ul>
		82	+ </div>
		83	+ </div>
39	</template>	84	</template>
40		85
41	<script>	86	<script>
42	- import {
43	- GetQuestionTotal,
44	- GetTestPaperTotal
45	- } from '@/api/index'
46	- import {
47	- OrderGetPriceNumber
48	- } from '@/api/order.js'
49	- import {
50	- mapGetters
51	- } from 'vuex'
52	- import {
53	- GetUserList
54	- } from '@/api/user'
55	-
56	-
57	- import {
58	- GetInfo
59	- } from '@/api/setting'
60	-
61	-
62	-
63	- export default {
64	- name: '安第斯考试系统',
65	- data() {
66	- return {
67	- isAdmin: false,
68	- imageUrl: '',
69	- total: {
70	- questiontotal: 0,
71	- testpapertotal: 0,
72	- PriceNumber: 0,
73	- Count: 0,
74	- },
75	- query: {
76	- UserTypeEnum: 1, //0：管理员，1普通用户
77	- PageIndex: 1,
78	- PageSize: 10,
79	-
80	- }
81	- }
82	- },
83	- computed: {
84	- ...mapGetters([
85	- 'name'
86	- ])
87	- },
88	- created() {
89	-
90	- },
91	- mounted() {
92	- try {
93	- if (this.$store.state.user.userInfo.UserType == 0) this.isAdmin = true;
94	- } catch { }
95	- this.init();
96	- this.GetTotalHeadler();
97	- },
98	- methods: {
99	- init() {
100	- var _this = this;
101	- GetInfo(1).then(res => {
102	- var d = res.data;
103	- if (d && d.data) {
104	- if (d.data.home_images) {
105	- _this.imageUrl = _this.BASE_URL + d.data.home_images;
106	- }
107	- }
108	- });
109	- },
110	- GetTotalHeadler() {
111	- GetQuestionTotal().then(res => {
112	- this.total.questiontotal = res.data.data;
113	- });
114	- GetTestPaperTotal().then(res => {
115	- this.total.testpapertotal = res.data.data;
116	- });
117	- OrderGetPriceNumber().then(res => {
118	- this.total.PriceNumber = res.data.data;
119	- })
120	- GetUserList(this.query).then(res => {
121	- this.total.Count = res.data.data.total
122	- })
123	- }
124	- }
125	- }	87	+import { GetQuestionTotal, GetTestPaperTotal } from "@/api/index";
		88	+import { OrderGetPriceNumber } from "@/api/order.js";
		89	+import { mapGetters } from "vuex";
		90	+import { GetUserList } from "@/api/user";
		91	+
		92	+import { GetInfo } from "@/api/setting";
		93	+
		94	+import * as echarts from "echarts";
		95	+
		96	+export default {
		97	+ data() {
		98	+ return {
		99	+ currentDate: new Date(),
		100	+ staList: [
		101	+ {
		102	+ title: "入库/人",
		103	+ count: 198,
		104	+ icon: "/static/images/index/icon1.png",
		105	+ },
		106	+ {
		107	+ title: "面试邀请/人",
		108	+ count: 123,
		109	+ icon: "/static/images/index/icon2.png",
		110	+ },
		111	+ {
		112	+ title: "正在面试/人",
		113	+ count: 21,
		114	+ icon: "/static/images/index/icon3.png",
		115	+ },
		116	+ {
		117	+ title: "面试完成/人",
		118	+ count: 100,
		119	+ icon: "/static/images/index/icon4.png",
		120	+ },
		121	+ {
		122	+ title: "线下面试/人",
		123	+ count: 98,
		124	+ icon: "/static/images/index/icon5.png",
		125	+ },
		126	+ {
		127	+ title: "已录用/人",
		128	+ count: 898,
		129	+ icon: "/static/images/index/icon6.png",
		130	+ },
		131	+ {
		132	+ title: "未录用/人",
		133	+ count: 1088,
		134	+ icon: "/static/images/index/icon7.png",
		135	+ },
		136	+ { title: "禁用/人", count: 39, icon: "/static/images/index/icon8.png" },
		137	+ ],
		138	+ userList: [{}, {}, {}, {}, {}, {} ],
		139	+ echartOption1: {
		140	+ legend: {
		141	+ top: "bottom",
		142	+ },
		143	+ series: [
		144	+ {
		145	+ name: "学历分布",
		146	+ type: "pie",
		147	+ radius: [0, "80%"],
		148	+ center: ["50%", "50%"],
		149	+ roseType: "area",
		150	+ data: [
		151	+ { value: 40, name: "博士" },
		152	+ { value: 38, name: "硕士" },
		153	+ { value: 32, name: "本科" },
		154	+ { value: 30, name: "大专" },
		155	+ { value: 28, name: "中专" },
		156	+ { value: 26, name: "高中" },
		157	+ { value: 22, name: "初中" },
		158	+ { value: 18, name: "小学" },
		159	+ ],
		160	+ },
		161	+ ],
		162	+ },
		163	+ echartOption2: {
		164	+ grid: {
		165	+ top: 20,
		166	+ bottom: 40,
		167	+ },
		168	+ tooltip: {},
		169	+ xAxis: {
		170	+ type: "category",
		171	+ axisLabel: {
		172	+ color: "#999999",
		173	+ fontSize: 16,
		174	+ },
		175	+ data: [
		176	+ "入库",
		177	+ "面试邀请",
		178	+ "正在面试",
		179	+ "面试完成",
		180	+ "线下面试",
		181	+ "已录用",
		182	+ "未录用",
		183	+ "禁用",
		184	+ ],
		185	+ },
		186	+ yAxis: {
		187	+ type: "value",
		188	+ },
		189	+ series: [
		190	+ {
		191	+ data: [120, 150, 150, 80, 70, 110, 130, 90],
		192	+ type: "bar",
		193	+ label: {
		194	+ show: true,
		195	+ color: "#4e95ff",
		196	+ position: "top",
		197	+ formatter: "{c}人",
		198	+ },
		199	+ itemStyle: {
		200	+ normal: {
		201	+ color: "#4e95ff",
		202	+ barBorderRadius: [10, 10, 0, 0],
		203	+ },
		204	+ },
		205	+ },
		206	+ ],
		207	+ },
		208	+
		209	+ isAdmin: false,
		210	+ imageUrl: "",
		211	+ total: {
		212	+ questiontotal: 0,
		213	+ testpapertotal: 0,
		214	+ PriceNumber: 0,
		215	+ Count: 0,
		216	+ },
		217	+ query: {
		218	+ UserTypeEnum: 1, //0：管理员，1普通用户
		219	+ PageIndex: 1,
		220	+ PageSize: 10,
		221	+ },
		222	+ };
		223	+ },
		224	+ computed: {
		225	+ ...mapGetters(["name"]),
		226	+ },
		227	+ created() {},
		228	+ mounted() {
		229	+ try {
		230	+ if (this.$store.state.user.userInfo.UserType == 0) this.isAdmin = true;
		231	+ } catch {}
		232	+ this.init();
		233	+ this.GetTotalHeadler();
		234	+ },
		235	+ methods: {
		236	+ initEchart() {
		237	+ this.initEchartXueli();
		238	+ this.initEchartJindu();
		239	+ },
		240	+ initEchartXueli() {
		241	+ let myChart = echarts.init(document.getElementById("echart1"));
		242	+ myChart.setOption(this.echartOption1);
		243	+ },
		244	+ initEchartJindu() {
		245	+ let myChart = echarts.init(document.getElementById("echart2"));
		246	+ myChart.setOption(this.echartOption2);
		247	+ },
		248	+ init() {
		249	+ var _this = this;
		250	+ GetInfo(1).then((res) => {
		251	+ var d = res.data;
		252	+ if (d && d.data) {
		253	+ if (d.data.home_images) {
		254	+ _this.imageUrl = _this.BASE_URL + d.data.home_images;
		255	+ }
		256	+ }
		257	+ });
		258	+ this.initEchart();
		259	+ },
		260	+ GetTotalHeadler() {
		261	+ GetQuestionTotal().then((res) => {
		262	+ this.total.questiontotal = res.data.data;
		263	+ });
		264	+ GetTestPaperTotal().then((res) => {
		265	+ this.total.testpapertotal = res.data.data;
		266	+ });
		267	+ OrderGetPriceNumber().then((res) => {
		268	+ this.total.PriceNumber = res.data.data;
		269	+ });
		270	+ GetUserList(this.query).then((res) => {
		271	+ this.total.Count = res.data.data.total;
		272	+ });
		273	+ },
		274	+ },
		275	+};
126	</script>	276	</script>
127		277
		278	+<style scoped>
		279	+>>>.el-calendar-table td.next{
		280	+ display: none;
		281	+}
		282	+>>>.el-calendar-day{
		283	+ height: auto;
		284	+ display: flex;
		285	+ justify-content: center;
		286	+ align-items: center;
		287	+}
		288	+>>>.el-calendar-day p{
		289	+ margin: 0;
		290	+ text-align: center;
		291	+ height: 40px;
		292	+ width: 40px;
		293	+ line-height: 40px;
		294	+}
		295	+>>>.el-calendar-table .el-calendar-day:hover{
		296	+ background-color: transparent;
		297	+}
		298	+>>>.el-calendar-table .el-calendar-day:hover p{
		299	+ background-color: #F2F8FE;
		300	+ border-radius: 30%;
		301	+}
		302	+>>>.el-calendar-table td.is-selected{
		303	+ background-color: transparent;
		304	+}
		305	+>>>.el-calendar-table td.is-selected .el-calendar-day p{
		306	+ background-color: #F2F8FE;
		307	+ border-radius: 30%;
		308	+}
		309	+>>>.el-calendar-table td.is-today .el-calendar-day p{
		310	+ color: #fff;
		311	+ background-color: #409EFF;
		312	+ border-radius: 30%;
		313	+}
		314	+>>>.el-calendar-table td{
		315	+ border: none;
		316	+}
		317	+>>>.el-calendar-table tr td:first-child{
		318	+ border-left: none;
		319	+}
		320	+>>>.el-calendar-table tr:first-child td{
		321	+ border: none;
		322	+}
		323	+</style>
		324	+<style lang="scss" scoped>
		325	+.dashboard {
		326	+ &-container {
		327	+ margin: 30px;
		328	+ }
		329	+
		330	+ &-text {
		331	+ font-size: 30px;
		332	+ line-height: 46px;
		333	+ }
		334	+}
		335	+
		336	+.el-row {
		337	+ margin-bottom: 20px;
		338	+ margin-top: 20px;
		339	+
		340	+ &:last-child {
		341	+ margin-bottom: 0;
		342	+ }
		343	+}
		344	+
		345	+.el-col {
		346	+ border-radius: 5px;
		347	+}
		348	+
		349	+.bg-purple-dark {
		350	+ background: #99a9bf;
		351	+}
		352	+
		353	+.bg-purple {
		354	+ background: #d3dce6;
		355	+ box-shadow: 0 0 10px #cdcdcd;
		356	+}
		357	+
		358	+.bg-purple-light {
		359	+ background: #e5e9f2;
		360	+}
		361	+
		362	+.grid-content {
		363	+ border-radius: 5px;
		364	+ min-height: 36px;
		365	+ text-align: center;
		366	+ padding-top: 20px;
		367	+ padding-bottom: 20px;
		368	+
		369	+ .grid-content-number {
		370	+ font-size: 40px;
		371	+ color: red;
		372	+ }
		373	+
		374	+ div {
		375	+ font-size: 20px;
		376	+ margin-top: 10px;
		377	+ }
		378	+}
		379	+
		380	+.row-bg {
		381	+ padding: 10px 0;
		382	+ background-color: #f9fafc;
		383	+}
		384	+</style>
128	<style lang="scss" scoped>	385	<style lang="scss" scoped>
129	- .dashboard {
130	- &-container {
131	- margin: 30px;
132	- }
133	-
134	- &-text {
135	- font-size: 30px;
136	- line-height: 46px;
137	- }
138	- }
139	-
140	- .el-row {
141	- margin-bottom: 20px;
142	- margin-top: 20px;
143	-
144	- &:last-child {
145	- margin-bottom: 0;
146	- }
147	- }
148	-
149	- .el-col {
150	- border-radius: 5px;
151	- }
152	-
153	- .bg-purple-dark {
154	- background: #99a9bf;
155	- }
156	-
157	- .bg-purple {
158	- background: #d3dce6;
159	- box-shadow: 0 0 10px #cdcdcd;
160	- }
161	-
162	- .bg-purple-light {
163	- background: #e5e9f2;
164	- }
165	-
166	- .grid-content {
167	- border-radius: 5px;
168	- min-height: 36px;
169	- text-align: center;
170	- padding-top: 20px;
171	- padding-bottom: 20px;
172	-
173	- .grid-content-number {
174	- font-size: 40px;
175	- color: red;
176	- }
177	-
178	- div {
179	- font-size: 20px;
180	- margin-top: 10px;
181	- }
182	- }
183	-
184	- .row-bg {
185	- padding: 10px 0;
186	- background-color: #f9fafc;
187	- }	386	+.table-td-list {
		387	+ display: flex;
		388	+ align-items: center;
		389	+ span {
		390	+ margin-right: 10px;
		391	+ }
		392	+}
		393	+.dashboard-container {
		394	+ display: flex;
		395	+ justify-content: space-between;
		396	+ background-color: #f9f9f9;
		397	+ margin: 0;
		398	+ padding: 20px;
		399	+}
		400	+.left-container {
		401	+ flex: 1;
		402	+ display: flex;
		403	+ flex-wrap: wrap;
		404	+ justify-content: space-between;
		405	+ .panel {
		406	+ width: 49%;
		407	+ flex: none;
		408	+ }
		409	+}
		410	+.right-container {
		411	+}
		412	+.panel {
		413	+ background-color: #fff;
		414	+ border-radius: 10px;
		415	+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
		416	+ padding: 10px 20px;
		417	+ margin-bottom: 20px;
		418	+ .panel-title {
		419	+ height: 3em;
		420	+ line-height: 3em;
		421	+ font-size: 18px;
		422	+ font-weight: bold;
		423	+ }
		424	+}
		425	+.sta-list {
		426	+ display: flex;
		427	+ flex-direction: column;
		428	+ padding-left: 20px;
		429	+ width: 200px;
		430	+ flex: none;
		431	+ margin: 0;
		432	+ li {
		433	+ list-style: none;
		434	+ background-color: #fff;
		435	+ border: 10px;
		436	+ border-radius: 10px;
		437	+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
		438	+ padding: 15px 15px 5px;
		439	+ margin-bottom: 20px;
		440	+ display: flex;
		441	+ flex-direction: column;
		442	+ justify-content: space-between;
		443	+ min-height: 9vh;
		444	+ .sub-title {
		445	+ color: #999;
		446	+ }
		447	+ & > div {
		448	+ display: flex;
		449	+ align-items: center;
		450	+ justify-content: space-between;
		451	+ }
		452	+ h3 {
		453	+ margin: 0;
		454	+ }
		455	+ }
		456	+}
188	</style>	457	</style>
189	\ No newline at end of file	458	\ No newline at end of file