From fe91cc994c78b15bbc4e974e4d7c0eb1177a7a10 Mon Sep 17 00:00:00 2001
From: fuliqi <fuliqi@qq.com>
Date: 星期三, 29 五月 2024 14:44:21 +0800
Subject: [PATCH] 页面整合
---
src/views/dashboard/index.vue | 561 +++++++++++++++++++++++++++++---------------------------
1 files changed, 290 insertions(+), 271 deletions(-)
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index df4a797..4e4ab66 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,297 +1,316 @@
<template>
- <div class="dashboard-container">
- <el-row :gutter="40" class="panel-group">
- <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
- <div class="card-panel">
- <div class="card-panel-icon-wrapper icon-people">
- <svg-icon icon-class="exam" class-name="card-panel-icon"/>
- </div>
- <div class="card-panel-description">
- <div class="card-panel-text">
- 璇曞嵎鎬绘暟
+ <div class="c">
+ <div class="bg">
+ <div class="main">
+ <div class="m1">
+ <div
+ class="card"
+ style="width:310px; margin-bottom:20px;"
+ >
+ <p class="card-title">瀛︾敓鎬绘暟</p>
+ <p class="card-num">3250</p>
+ <div class="bar">
+ <div
+ class="bar-r"
+ style="width:75%; background:rgb(99,1,190)"
+ ></div>
</div>
- <count-to :start-val="0" :end-val="examPaperCount" :duration="2600" class="card-panel-num" v-loading="loading"/>
+ <p class="card-d">20澶╁唴澧炲姞75%</p>
+ </div>
+ <div
+ class="card"
+ style="width:310px;"
+ >
+ <p class="card-title">鏂扮敓</p>
+ <p class="card-num">230</p>
+ <div class="bar">
+ <div
+ class="bar-r"
+ style="width:50%;"
+ ></div>
+ </div>
+ <p class="card-d">20澶╁唴澧炲姞50%</p>
+ </div>
+ <div
+ class="card"
+ style="width:310px;"
+ >
+ <p class="card-title">鎬昏绋�</p>
+ <p class="card-num">3</p>
+ <div class="bar">
+ <div
+ class="bar-r"
+ style="width:76%; background:rgb(16,71,247)"
+ ></div>
+ </div>
+ <p class="card-d">20澶╁唴澧炲姞75%</p>
+ </div>
+ <div
+ class="card"
+ style="width:310px;"
+ >
+ <p class="card-title">鏀惰垂</p>
+ <p class="card-num">锟�355000.00</p>
+ <div class="bar">
+ <div
+ class="bar-r"
+ style="width:56%; background:rgb(245,155,34)"
+ ></div>
+ </div>
+ <p class="card-d">20澶╁唴澧炲姞56%</p>
</div>
</div>
- </el-col>
- <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
- <div class="card-panel" >
- <div class="card-panel-icon-wrapper icon-message">
- <svg-icon icon-class="question" class-name="card-panel-icon"/>
- </div>
- <div class="card-panel-description">
- <div class="card-panel-text">
- 棰樼洰鎬绘暟
+ <div class="m2 card">
+ <p class="card-title">鏀跺叆/璐圭敤鎶ュ憡</p>
+ <img
+ src="@/assets/img/1.jpg"
+ alt=""
+ >
+ </div>
+ <div class="m3 card">
+ <p
+ class="card-title"
+ style="margin-bottom:20px;"
+ >鑰佸笀鍚嶅崟</p>
+ <div class="scrollBar">
+ <div
+ class="m3-con"
+ v-for="(item) in state.listTeachers"
+ :key="item.id"
+ >
+ <div style="display:flex">
+ <img
+ src="https://img1.baidu.com/it/u=842647274,1455615798&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
+ alt=""
+ >
+ <div style="margin-left:10px;">
+ <p class="m3-con-name">{{item.name}}</p>
+ <p class="m3-con-d">宸ラ緞锛歿{item.workTIme}}骞�<span style="margin-left:50px;">瀛︾敓锛歿{item.students}}涓�</span></p>
+ </div>
+ </div>
+ <div class="m3-con-b">
+ <el-button type="text">鏌ョ湅</el-button>
+ </div>
</div>
- <count-to :start-val="0" :end-val="questionCount" :duration="3000" class="card-panel-num" v-loading="loading"/>
+ </div>
+ <div
+ class="m3-btn"
+ style="border-top:1px solid #EBEEF5"
+ >
+ <button
+ class="content_padding"
+ @click="$router.push('/manage/teacher-manage')"
+ >鏌ョ湅鎵�鏈�</button>
</div>
</div>
- </el-col>
- <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
- <div class="card-panel">
- <div class="card-panel-icon-wrapper icon-shopping">
- <svg-icon icon-class="doexampaper" class-name="card-panel-icon"/>
- </div>
- <div class="card-panel-description">
- <div class="card-panel-text">
- 绛斿嵎鎬绘暟
- </div>
- <count-to :start-val="0" :end-val="doExamPaperCount" :duration="3600" class="card-panel-num" v-loading="loading"/>
+ <div class="m4 card">
+ <p
+ class="card-title"
+ style="margin-bottom:20px;"
+ >瀛︾敓鍚嶅崟</p>
+ <el-table
+ :data="state.listStudents"
+ height="80%"
+ >
+ <el-table-column
+ label="瀛︾敓鍚嶇О"
+ prop="name"
+ ></el-table-column>
+ <el-table-column
+ label="鐝骇"
+ prop="className"
+ ></el-table-column>
+ <el-table-column
+ label="鐝富浠�"
+ prop="teacher"
+ ></el-table-column>
+ <el-table-column
+ label="鍏ュ鏃堕棿"
+ prop="inTime"
+ ></el-table-column>
+ <el-table-column
+ label="鎿嶄綔"
+ width="60px"
+ >
+ <template slot-scope="scope">
+ <el-button
+ style="color:#f59b22"
+ type="text"
+ @click="viewDetails(1)"
+ >鏌ョ湅</el-button>
+ </template>
+ </el-table-column>
+ </el-table>
+ <div class="m3-btn m4-btn content_padding">
+ <button>鏌ョ湅鎵�鏈�</button>
</div>
</div>
- </el-col>
- <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
- <div class="card-panel">
- <div class="card-panel-icon-wrapper icon-money">
- <svg-icon icon-class="doquestion" class-name="card-panel-icon"/>
- </div>
- <div class="card-panel-description">
- <div class="card-panel-text">
- 绛旈鎬绘暟
- </div>
- <count-to :start-val="0" :end-val="doQuestionCount" :duration="3200" class="card-panel-num" v-loading="loading"/>
- </div>
- </div>
- </el-col>
- </el-row>
- <el-row class="echarts-line">
- <div id="echarts-moth-user" style="width: 100%;height:400px;" v-loading="loading"/>
- </el-row>
- <el-row class="echarts-line">
- <div id="echarts-moth-question" style="width: 100%;height:400px;" v-loading="loading"/>
- </el-row>
+ </div>
+ </div>
</div>
</template>
<script>
-import resize from './components/mixins/resize'
-import CountTo from 'vue-count-to'
-import dashboardApi from '@/api/dashboard'
+// import { createNamespacedHelpers } from "vuex";
+// const a = createNamespacedHelpers("home");
+// console.log(a, "a");
+// 闅忔満 mock
+import { listStudent, listTeacher, countStudent } from "@/utils/mock/home";
export default {
- mixins: [resize],
- components: {
- CountTo
- },
- data () {
+ data() {
return {
- examPaperCount: 0,
- questionCount: 0,
- doExamPaperCount: 0,
- doQuestionCount: 0,
- echartsUserAction: null,
- echartsQuestion: null,
- loading: false
- }
+ state: {
+ // 瀛︾敓鍚嶅崟
+ listStudents: listStudent.studentsArr,
+ // 鑰佸笀鍚嶅崟
+ listTeachers: listTeacher.TeachersArr,
+ // 瀛︾敓鎬绘暟
+ countStudents: countStudent.countStudent,
+ },
+ };
},
- mounted () {
- // eslint-disable-next-line no-undef
- this.echartsUserAction = echarts.init(document.getElementById('echarts-moth-user'), 'macarons')
- // eslint-disable-next-line no-undef
- this.echartsQuestion = echarts.init(document.getElementById('echarts-moth-question'), 'macarons')
- let _this = this
- this.loading = true
- dashboardApi.index().then(re => {
- let response = re.response
- _this.examPaperCount = response.examPaperCount
- _this.questionCount = response.questionCount
- _this.doExamPaperCount = response.doExamPaperCount
- _this.doQuestionCount = response.doQuestionCount
- _this.echartsUserAction.setOption(this.option('鐢ㄦ埛娲昏穬搴�', '{b}鏃c}搴�', response.mothDayText, response.mothDayUserActionValue))
- _this.echartsQuestion.setOption(this.option('棰樼洰鏈堟暟閲�', '{b}鏃c}棰�', response.mothDayText, response.mothDayDoExamQuestionValue))
- this.loading = false
- })
+ computed: {
+ // ...mapState(["listStudents", "listTeachers", "countStudents"]),
},
methods: {
- option (title, formatter, label, vaule) {
- return {
- title: {
- text: title,
- x: 'center'
- },
- tooltip: {
- trigger: 'item',
- formatter: formatter
- },
- xAxis: {
- type: 'category',
- data: label
- },
- grid: {
- left: 10,
- right: 10,
- bottom: 20,
- top: 30,
- containLabel: true
- },
- yAxis: {
- type: 'value'
- },
- series: [{
- data: vaule,
- type: 'line'
- }]
+ // ...mapActions(["getListStudents", "getListTeachers", "getCountStudents"]),
+ // 鏌ョ湅璇︽儏
+ viewDetails(v) {
+ console.log(v);
+ },
+ },
+ mounted() {
+ // this.getListStudents();
+ // this.getListTeachers();
+ // this.getCountStudents();
+ // console.log(this.listStudents, "+++++++++++++++");
+ // this.getAll();
+ },
+ created() {},
+};
+</script>
+<style scoped lang="scss">
+.main {
+ margin-top: 100px;
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: space-between;
+ width: 1300px;
+}
+.m1 {
+ display: flex;
+ flex-wrap: wrap;
+ width: 640px;
+ justify-content: space-between;
+ align-items: baseline;
+ margin-bottom: 20px;
+}
+.card {
+ background: white;
+ border-radius: 10px;
+ padding: 10px 20px;
+ box-sizing: border-box;
+ display: inline-block;
+
+ &-title {
+ font-size: 16px;
+ color: #777;
+ margin-bottom: 0;
+ }
+ &-num {
+ font-size: 32px;
+ font-weight: 700;
+ margin: 5px 0;
+ }
+ &-d {
+ color: #777;
+ font-size: 12px;
+ margin-top: 5px;
+ }
+}
+.bar {
+ width: 100%;
+ height: 10px;
+ background-color: rgb(242, 242, 242);
+ &-r {
+ background-color: red;
+ height: 100%;
+ }
+}
+.m2 {
+ width: 630px;
+ height: 324px;
+ margin-bottom: 20px;
+}
+.m3 {
+ width: 467px;
+ height: 590px;
+ &-con {
+ display: flex;
+ align-items: center;
+ width: 100%;
+ margin-bottom: 15px;
+ justify-content: space-between;
+ & img {
+ width: 34px;
+ height: 34px;
+ border-radius: 34px;
+ }
+ & p {
+ margin: 0;
+ }
+ &-d {
+ color: #777;
+ font-size: 12px;
+ }
+ &-b {
+ // margin-left: ;
+ color: #f59b22;
+ }
+ }
+ &-btn {
+ display: flex;
+ justify-content: center;
+ & > button {
+ width: 175px;
+ height: 39px;
+ border-color: rgba(16, 71, 247, 1);
+ background: none;
+ border-radius: 5px;
+ color: rgba(16, 71, 247, 1);
+ transition: 0.2s;
+ cursor: pointer;
+ &:hover {
+ background: rgba(16, 71, 247, 1);
+ color: white;
}
}
}
}
-</script>
-
-<style lang="scss" scoped>
-
- .dashboard-container {
- padding: 32px;
- background-color: rgb(240, 242, 245);
- position: relative;
-
- .chart-wrapper {
- background: #fff;
- padding: 16px 16px 0;
- margin-bottom: 32px;
- }
+.m4 {
+ width: 790px;
+ height: 590px;
+ &-btn {
+ margin-top: 10px;
}
+}
+.scrollBar {
+ height: 80%;
+ overflow: auto;
+}
+// 婊氬姩鏉�
+.scrollBar::-webkit-scrollbar {
+ width: 0px;
+ height: 0px;
+}
- @media (max-width: 1024px) {
- .chart-wrapper {
- padding: 8px;
- }
- }
+//闅愯棌婊氬姩鏉�
+/deep/.el-table__body-wrapper::-webkit-scrollbar {
+ width: 0;
+}
- .dashboard-editor-container {
- padding: 32px;
- background-color: rgb(240, 242, 245);
- position: relative;
-
- .github-corner {
- position: absolute;
- top: 0px;
- border: 0;
- right: 0;
- }
-
- .chart-wrapper {
- background: #fff;
- padding: 16px 16px 0;
- margin-bottom: 32px;
- }
- }
-
- @media (max-width: 1024px) {
- .chart-wrapper {
- padding: 8px;
- }
- }
-
- .panel-group {
- margin-top: 18px;
-
- .card-panel-col {
- margin-bottom: 32px;
- }
-
- .card-panel {
- height: 108px;
- cursor: pointer;
- font-size: 12px;
- position: relative;
- overflow: hidden;
- color: #666;
- background: #fff;
- box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
- border-color: rgba(0, 0, 0, .05);
-
- &:hover {
- .card-panel-icon-wrapper {
- color: #fff;
- }
-
- .icon-people {
- background: #40c9c6;
- }
-
- .icon-message {
- background: #36a3f7;
- }
-
- .icon-money {
- background: #f4516c;
- }
-
- .icon-shopping {
- background: #34bfa3
- }
- }
-
- .icon-people {
- color: #40c9c6;
- }
-
- .icon-message {
- color: #36a3f7;
- }
-
- .icon-money {
- color: #f4516c;
- }
-
- .icon-shopping {
- color: #34bfa3
- }
-
- .card-panel-icon-wrapper {
- float: left;
- margin: 14px 0 0 14px;
- padding: 16px;
- transition: all 0.38s ease-out;
- border-radius: 6px;
- }
-
- .card-panel-icon {
- float: left;
- font-size: 48px;
- }
-
- .card-panel-description {
- float: right;
- font-weight: bold;
- margin: 26px;
- margin-left: 0px;
-
- .card-panel-text {
- line-height: 18px;
- color: rgba(0, 0, 0, 0.45);
- font-size: 16px;
- margin-bottom: 12px;
- }
-
- .card-panel-num {
- font-size: 20px;
- }
- }
- }
- }
-
- @media (max-width: 550px) {
- .card-panel-description {
- display: none;
- }
-
- .card-panel-icon-wrapper {
- float: none !important;
- width: 100%;
- height: 100%;
- margin: 0 !important;
-
- .svg-icon {
- display: block;
- margin: 14px auto !important;
- float: none !important;
- }
- }
- }
-
- .echarts-line{
- background:#fff;
- padding:16px 16px 0;
- margin-bottom:32px;
- }
+.content_padding {
+ margin: 20px 0;
+}
</style>
--
Gitblit v1.8.0