|
@@ -1,6 +1,6 @@
|
|
|
<template>
|
|
|
<div class="elegant-dash-container">
|
|
|
- <Spin fix v-if="isLoading"></Spin>
|
|
|
+ <Spin fix v-if="isLoading"></Spin>
|
|
|
<!-- <div class="title">
|
|
|
<span>数据总览</span>
|
|
|
<span class="btn-details" @click="goDetails">数据详情 ></span>
|
|
@@ -9,32 +9,32 @@
|
|
|
<div class="count-item">
|
|
|
<p class="label">全部活动数</p>
|
|
|
<p class="value">{{ countArr[0] }}</p>
|
|
|
- <img src="../../assets/source/folder.png">
|
|
|
+ <img src="../../assets/source/folder.png" />
|
|
|
</div>
|
|
|
<div class="count-item">
|
|
|
<p class="label">德育风采数</p>
|
|
|
<p class="value">{{ countArr[1] }}</p>
|
|
|
- <img src="../../assets/mark/5.png" style="width: 70px">
|
|
|
+ <img src="../../assets/mark/5.png" style="width: 70px" />
|
|
|
</div>
|
|
|
<div class="count-item">
|
|
|
<p class="label">艺术特色数</p>
|
|
|
<p class="value">{{ countArr[2] }}</p>
|
|
|
- <img src="../../assets/mark/7.png" style="width: 70px">
|
|
|
+ <img src="../../assets/mark/7.png" style="width: 70px" />
|
|
|
</div>
|
|
|
<div class="count-item">
|
|
|
<p class="label">图片总数</p>
|
|
|
<p class="value">{{ countArr[3] }}</p>
|
|
|
- <img src="../../assets/source/image.png">
|
|
|
+ <img src="../../assets/source/image.png" />
|
|
|
</div>
|
|
|
<div class="count-item">
|
|
|
<p class="label">视频总数</p>
|
|
|
<p class="value">{{ countArr[4] }}</p>
|
|
|
- <img src="../../assets/source/video.png">
|
|
|
+ <img src="../../assets/source/video.png" />
|
|
|
</div>
|
|
|
<div class="count-item">
|
|
|
<p class="label">文档总数</p>
|
|
|
<p class="value">{{ countArr[5] }}</p>
|
|
|
- <img src="../../assets/source/pdf.png">
|
|
|
+ <img src="../../assets/source/pdf.png" />
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="chart-wrap">
|
|
@@ -46,12 +46,12 @@
|
|
|
<BasePie echartsId="pie1" :echartData="artCount"></BasePie>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="chart-block" style="margin: 0 1%;width: 26%">
|
|
|
+ <div class="chart-block" style="margin: 0 1%; width: 26%">
|
|
|
<div class="chart-title">
|
|
|
<p class="title">艺术特色素材文字云</p>
|
|
|
</div>
|
|
|
<div class="chart-content">
|
|
|
- <BaseElegantCloud echartsId="cloud1" :echartData="keyCounts"></BaseElegantCloud>
|
|
|
+ <BaseElegantCloud echartsId="cloud1" :echartData="keyCounts"></BaseElegantCloud>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="chart-block chart-right">
|
|
@@ -64,7 +64,7 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="chart-wrap">
|
|
|
- <div class="chart-block" style="width: 26%;">
|
|
|
+ <div class="chart-block" style="width: 26%">
|
|
|
<div class="chart-title">
|
|
|
<p class="title">德育风采素材类型</p>
|
|
|
</div>
|
|
@@ -72,7 +72,7 @@
|
|
|
<BasePie echartsId="pie2" :echartData="elegantCount"></BasePie>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="chart-block" style="margin: 0 1%;width: 26%">
|
|
|
+ <div class="chart-block" style="margin: 0 1%; width: 26%">
|
|
|
<div class="chart-title">
|
|
|
<p class="title">德育风采素材文字云</p>
|
|
|
</div>
|
|
@@ -126,63 +126,68 @@
|
|
|
import BaseUploadLine from "./BaseUploadLine.vue";
|
|
|
import BaseElegantCloud from "./BaseElegantCloud.vue";
|
|
|
export default {
|
|
|
- props:['schoolCode'],
|
|
|
+ props: ["schoolCode"],
|
|
|
components: {
|
|
|
BasePie,
|
|
|
BaseBar,
|
|
|
BaseUploadLine,
|
|
|
- BaseElegantCloud
|
|
|
+ BaseElegantCloud
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ isLoading: false,
|
|
|
+ elegantCount: [],
|
|
|
+ artCount: [],
|
|
|
+ keyCounts: [],
|
|
|
+ countArr: [0, 0, 0, 0, 0, 0]
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.initDash();
|
|
|
},
|
|
|
- data(){
|
|
|
- return {
|
|
|
- isLoading:false,
|
|
|
- elegantCount:[],
|
|
|
- artCount:[],
|
|
|
- keyCounts:[],
|
|
|
- countArr:[0,0,0,0,0,0]
|
|
|
- }
|
|
|
- },
|
|
|
- created(){
|
|
|
- this.isLoading = true
|
|
|
- this.$api.elegant.findElegantStatistics({
|
|
|
- "scope": "school",
|
|
|
- "code": this.schoolCode || localStorage.getItem("login_schoolCode")
|
|
|
- })
|
|
|
- .then((res) => {
|
|
|
- console.log(res);
|
|
|
- this.isLoading = false
|
|
|
- let artItems = ['艺术特色','课程活动','艺术社团','艺术活动',"理想信念","社会责任","行为习惯","演奏", "影视", "舞蹈", "戏剧", "常规活动", "获奖活动"]
|
|
|
- let elegantItems = ['德育风采',"理想信念","社会责任","行为习惯","读书分享","思想沙龙","文学创作","社会服务","文化交流","思德教育","反思日志","小组合作","行为习惯挑战"]
|
|
|
- let elegantCount = elegantItems.map(item => {
|
|
|
- return {
|
|
|
- name:item,
|
|
|
- count: res.items.find(i => i.id === item) ? res.items.find(i => i.id === item).count : 0
|
|
|
- }
|
|
|
- })
|
|
|
- let artCount = artItems.map(item => {
|
|
|
- return {
|
|
|
- name:item,
|
|
|
- count: res.items.find(i => i.id === item) ? res.items.find(i => i.id === item).count : 0
|
|
|
- }
|
|
|
- })
|
|
|
- this.keyCounts = res.itemKeys
|
|
|
- this.elegantCount = elegantCount
|
|
|
- this.artCount = artCount
|
|
|
- console.error(artCount)
|
|
|
- this.countArr = [
|
|
|
- elegantCount[0].count + artCount[0].count,
|
|
|
- elegantCount[0].count,
|
|
|
- artCount[0].count,
|
|
|
- res.imageCount,
|
|
|
- res.videoCount,
|
|
|
- res.docCount
|
|
|
- ]
|
|
|
- });
|
|
|
- },
|
|
|
methods: {
|
|
|
+ initDash() {
|
|
|
+ this.isLoading = true;
|
|
|
+ this.$api.elegant
|
|
|
+ .findElegantStatistics({
|
|
|
+ scope: "school",
|
|
|
+ code: this.schoolCode || localStorage.getItem("login_schoolCode"),
|
|
|
+ periodId: this.$store.state.user.curPeriod.id
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ console.log(res);
|
|
|
+ this.isLoading = false;
|
|
|
+ let artItems = ["艺术特色", "课程活动", "艺术社团", "艺术活动", "理想信念", "社会责任", "行为习惯", "演奏", "影视", "舞蹈", "戏剧", "常规活动", "获奖活动"];
|
|
|
+ let elegantItems = ["德育风采", "理想信念", "社会责任", "行为习惯", "读书分享", "思想沙龙", "文学创作", "社会服务", "文化交流", "思德教育", "反思日志", "小组合作", "行为习惯挑战"];
|
|
|
+ let elegantCount = elegantItems.map((item) => {
|
|
|
+ return {
|
|
|
+ name: item,
|
|
|
+ count: res.items.find((i) => i.id === item) ? res.items.find((i) => i.id === item).count : 0
|
|
|
+ };
|
|
|
+ });
|
|
|
+ let artCount = artItems.map((item) => {
|
|
|
+ return {
|
|
|
+ name: item,
|
|
|
+ count: res.items.find((i) => i.id === item) ? res.items.find((i) => i.id === item).count : 0
|
|
|
+ };
|
|
|
+ });
|
|
|
+ this.keyCounts = res.itemKeys;
|
|
|
+ this.elegantCount = elegantCount;
|
|
|
+ this.artCount = artCount;
|
|
|
+ this.countArr = [elegantCount[0].count + artCount[0].count, elegantCount[0].count, artCount[0].count, res.imageCount, res.videoCount, res.docCount];
|
|
|
+ });
|
|
|
+ },
|
|
|
goDetails() {
|
|
|
this.$emit("goDetails");
|
|
|
}
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ "$store.state.user.curSemester": {
|
|
|
+ deep: true,
|
|
|
+ handler(n, old) {
|
|
|
+ this.initDash();
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
@@ -220,7 +225,7 @@
|
|
|
flex-direction: column;
|
|
|
justify-content: space-between;
|
|
|
padding: 20px;
|
|
|
- position: relative;
|
|
|
+ position: relative;
|
|
|
.label {
|
|
|
font-size: 14px;
|
|
|
color: #818181;
|
|
@@ -232,13 +237,13 @@
|
|
|
color: #0d78be;
|
|
|
letter-spacing: 1px;
|
|
|
}
|
|
|
- img{
|
|
|
- width: 60px;
|
|
|
- position: absolute;
|
|
|
- bottom: 20px;
|
|
|
- right: 20px;
|
|
|
- opacity: .3;
|
|
|
- }
|
|
|
+ img {
|
|
|
+ width: 60px;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 20px;
|
|
|
+ right: 20px;
|
|
|
+ opacity: 0.3;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
.chart-wrap {
|
|
@@ -258,14 +263,14 @@
|
|
|
|
|
|
.title {
|
|
|
font-size: 14px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
&::before {
|
|
|
content: "";
|
|
|
display: inline-block;
|
|
|
border: 3px solid #0d78be;
|
|
|
border-radius: 4px;
|
|
|
- height: 14px;
|
|
|
+ height: 14px;
|
|
|
margin-right: 10px;
|
|
|
}
|
|
|
}
|
|
@@ -277,7 +282,7 @@
|
|
|
}
|
|
|
|
|
|
.chart-right {
|
|
|
- flex:1;
|
|
|
+ flex: 1;
|
|
|
// width: 71%;
|
|
|
// margin-left: 1%;
|
|
|
}
|