|
@@ -0,0 +1,238 @@
|
|
|
+<template>
|
|
|
+ <div class="body-box moral-dash-container">
|
|
|
+ <!-- 左侧 -->
|
|
|
+ <div class="left-box">
|
|
|
+ <div class="left-box-top">
|
|
|
+ <dv-border-box-12>
|
|
|
+ <div class="dashboard-block">
|
|
|
+ <div class="block-content">
|
|
|
+ <div class="static-wrap">
|
|
|
+ <div class="item" v-for="(item,index) in staticArr">
|
|
|
+ <span class="num" :style="{color:item.color}">
|
|
|
+ <countTo :startVal='0' :endVal='item.val' :duration='1000' class="count-num"></countTo>
|
|
|
+ </span>
|
|
|
+ <span class="label">{{ item.label }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- <BaseLine></BaseLine> -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </dv-border-box-12>
|
|
|
+ </div>
|
|
|
+ <div class="left-box-bottom">
|
|
|
+ <div class="left-bottom-left">
|
|
|
+ <dv-border-box-13>
|
|
|
+ <div class="dashboard-block">
|
|
|
+ <div class="block-title">
|
|
|
+ <span>关键指标分布</span>
|
|
|
+ <dv-decoration-1 style="width:150px;height:20px;" />
|
|
|
+ </div>
|
|
|
+ <div class="block-content">
|
|
|
+ <BaseWordCloud></BaseWordCloud>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </dv-border-box-13>
|
|
|
+ <dv-border-box-13>
|
|
|
+ <div class="dashboard-block">
|
|
|
+ <div class="block-title">
|
|
|
+ <span>学生德育常规表现</span>
|
|
|
+ <dv-decoration-1 style="width:150px;height:20px;" />
|
|
|
+ </div>
|
|
|
+ <div class="block-content">
|
|
|
+ <BaseScoreBar></BaseScoreBar>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </dv-border-box-13>
|
|
|
+ </div>
|
|
|
+ <div class="left-bottom-right">
|
|
|
+ <div class="top">
|
|
|
+ <dv-border-box-13>
|
|
|
+ <div class="dashboard-block">
|
|
|
+ <div class="block-title">
|
|
|
+ <span>德育风采展示</span>
|
|
|
+ <dv-decoration-1 style="width:150px;height:20px;" />
|
|
|
+ </div>
|
|
|
+ <div class="block-content">
|
|
|
+ <BaseCarousel></BaseCarousel>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </dv-border-box-13>
|
|
|
+ <dv-border-box-13>
|
|
|
+ <div class="dashboard-block">
|
|
|
+ <div class="block-title">
|
|
|
+ <span>班级荣誉表现</span>
|
|
|
+ <dv-decoration-1 style="width:150px;height:20px;" />
|
|
|
+ </div>
|
|
|
+ <div class="block-content">
|
|
|
+ <dv-scroll-board :config="classRankConfig" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </dv-border-box-13>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 右侧 -->
|
|
|
+ <div class="right-box">
|
|
|
+ <div class="right-box-top">
|
|
|
+ <dv-border-box-13>
|
|
|
+ <div class="dashboard-block">
|
|
|
+ <div class="block-title">
|
|
|
+ <span>德育加减分</span>
|
|
|
+ <dv-decoration-1 style="width:150px;height:20px;" />
|
|
|
+ </div>
|
|
|
+ <div class="block-content" style="display:flex;flex-direction:column;align-items: center">
|
|
|
+ <BaseScorePie></BaseScorePie>
|
|
|
+ <p style="text-align:center;font-weight:bold;margin-top:-5px;margin-bottom:5px">
|
|
|
+ <span> - 102 扣分</span>
|
|
|
+ <span style="display:inline-block;margin: 0 10px"></span>
|
|
|
+ <span> 加分 + 722</span>
|
|
|
+ </p>
|
|
|
+ <BaseScoreLine></BaseScoreLine>
|
|
|
+ <br>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </dv-border-box-13>
|
|
|
+ </div>
|
|
|
+ <div class="right-box-middle">
|
|
|
+ <dv-border-box-13>
|
|
|
+ <div class="dashboard-block">
|
|
|
+ <div class="block-title">
|
|
|
+ <span>问题预警</span>
|
|
|
+ <dv-decoration-1 style="width:150px;height:20px;" />
|
|
|
+ </div>
|
|
|
+ <div class="block-content">
|
|
|
+ <dv-scroll-ranking-board :config="warningRank" style="width:90%;margin-left:5%" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </dv-border-box-13>
|
|
|
+ </div>
|
|
|
+ <div class="right-box-bottom">
|
|
|
+ <dv-border-box-13>
|
|
|
+ <div class="dashboard-block">
|
|
|
+ <div class="block-title">
|
|
|
+ <span>德育表现TOP5</span>
|
|
|
+ <dv-decoration-1 style="width:150px;height:20px;" />
|
|
|
+ </div>
|
|
|
+ <div class="block-content">
|
|
|
+ <div class="moral-honor-avatar">
|
|
|
+ <div class="honor-item" v-for="(item,index) in stuTopArr" :key="index">
|
|
|
+ <img class="img-avatar" @click="goStudent()" src="https://paas-admin.xydqq.cn/img/avatar.647bbbfe.png" alt="" width="60">
|
|
|
+ <img class="img-crown" src="@/assets/dashboard/student/icon_crown.png" alt="" v-show="index === 0">
|
|
|
+ <img class="img-crown" src="@/assets/dashboard/student/icon_crown2.png" alt="" v-show="index === 1">
|
|
|
+ <img class="img-crown" src="@/assets/dashboard/student/icon_crown3.png" alt="" v-show="index === 2">
|
|
|
+ <span style="margin-top:5px">学生姓名</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </dv-border-box-13>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import countTo from 'vue-count-to'
|
|
|
+import BaseCircle from '@/components/dashboard/student/BaseCircle'
|
|
|
+import BaseScoreBar from './BaseScoreBar'
|
|
|
+import BaseScorePie from './BaseScorePie'
|
|
|
+import BaseScoreLine from './BaseScoreLine'
|
|
|
+import BaseCarousel from './BaseCarousel'
|
|
|
+import BaseExamLine from './BaseExamLine'
|
|
|
+import BaseSubLine from './BaseSubLine'
|
|
|
+import BaseStudyRadar from './BaseRadar'
|
|
|
+import BaseWordCloud from '@/components/dashboard/studentAll/BaseWordCloud'
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ countTo,
|
|
|
+ BaseCircle,
|
|
|
+ BaseCarousel,
|
|
|
+ BaseExamLine,
|
|
|
+ BaseScorePie,
|
|
|
+ BaseScoreLine,
|
|
|
+ BaseScoreBar,
|
|
|
+ BaseSubLine,
|
|
|
+ BaseStudyRadar,
|
|
|
+ BaseWordCloud
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ staticArr: [
|
|
|
+ {
|
|
|
+ label: '学生总数',
|
|
|
+ color: '#7ec4ff',
|
|
|
+ val: 7944
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '教师参与数',
|
|
|
+ color: '#7ec4ff',
|
|
|
+ val: 135
|
|
|
+ }, {
|
|
|
+ label: '家长参与数',
|
|
|
+ color: '#ff8e2e',
|
|
|
+ val: 44
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '德育活动总数',
|
|
|
+ color: '#20d99d',
|
|
|
+ val: 12
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ stuTopArr: new Array(5),
|
|
|
+ classRankConfig: {
|
|
|
+ header: ['<span style="color:#32c5e9;font-weight: bold;">班级</span>', '<span style="color:#32c5e9;font-weight: bold;">德育总分</span>', '<span style="color:#32c5e9;font-weight: bold;">流动红旗(次)</span>', '<span style="color:#32c5e9;font-weight: bold;">星级班级(次)</span>'],
|
|
|
+ data: [
|
|
|
+ ['五年级1班', '84.3 分', '8', '5'],
|
|
|
+ ['五年级2班', '82.6 分', '10', '5'],
|
|
|
+ ['五年级3班', '76.0 分', '6', '3'],
|
|
|
+ ['五年级4班', '74.1 分', '4', '1'],
|
|
|
+ ['五年级5班', '64.3 分', '2', '0'],
|
|
|
+ ['五年级6班', '54.3 分', '2', '0'],
|
|
|
+ ],
|
|
|
+ align: ['center', 'center', 'center', 'center', 'center'],
|
|
|
+ rowNum: 6,
|
|
|
+ index: true,
|
|
|
+ headerHeight: 30,
|
|
|
+ headerBGC: "transparent", //表头
|
|
|
+ oddRowBGC: "transparent", //奇数行
|
|
|
+ evenRowBGC: "transparent", //偶数行
|
|
|
+ },
|
|
|
+ warningRank: {
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ name: '破坏公物',
|
|
|
+ value: 55
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '不讲卫生',
|
|
|
+ value: 96
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '大声喧哗',
|
|
|
+ value: 78
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '乱丢垃圾',
|
|
|
+ value: 66
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '欺负同学',
|
|
|
+ value: 6
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ unit: ' 次'
|
|
|
+ },
|
|
|
+ }
|
|
|
+ }, methods: {
|
|
|
+ goStudent() {
|
|
|
+ this.$router.push('/stuDetails')
|
|
|
+ },
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less">
|
|
|
+@import "MoralDash.less";
|
|
|
+// @import "../fiveEdu/FiveEdu.less";
|
|
|
+</style>
|