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	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	84	</template>
40	85
41	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	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	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	457	</style>
189	458	\ No newline at end of file
...	...