|
@@ -93,12 +93,34 @@
|
|
|
</div>
|
|
|
<div class="main-content-item">
|
|
|
<div class="map-item">
|
|
|
- <div v-for="(item, index) in mapData" :key="index" class="map-item-unit">
|
|
|
- <div class="point"></div>
|
|
|
- <div class="text">
|
|
|
- {{ item.institution_name }}:
|
|
|
- {{ item.warnNum }}个
|
|
|
+ <template v-for="(item, index) in mapData">
|
|
|
+ <div :key="index" class="map-item-unit" :class="`${item.institution_no}`">
|
|
|
+ <div class="point"
|
|
|
+ :class="{
|
|
|
+ green: item.warnNum === 0,
|
|
|
+ blue: item.warnNum > 0 && item.warnNum <= 4,
|
|
|
+ orange: item.warnNum > 4 && item.warnNum <= 8,
|
|
|
+ red: item.warnNum > 8
|
|
|
+ }"></div>
|
|
|
+ <div class="text"
|
|
|
+ :class="{
|
|
|
+ green: item.warnNum === 0,
|
|
|
+ blue: item.warnNum > 0 && item.warnNum < 4,
|
|
|
+ orange: item.warnNum >= 4 && item.warnNum < 8,
|
|
|
+ red: item.warnNum >= 8
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ {{ item.institution_name }}:
|
|
|
+ {{ item.warnNum }}个
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <div class="legend-area">
|
|
|
+ <div class="legend"><div class="green"></div><span>0</span></div>
|
|
|
+ <div class="legend"><div class="blue"></div><span>0 < 风险数 ≤ 4</span></div>
|
|
|
+ <div class="legend"><div class="orange"></div><span>4 < 风险数 ≤ 8</span></div>
|
|
|
+ <div class="legend"><div class="red"></div><span>风险数 > 8</span></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="bor-8 text-bg">
|
|
@@ -199,14 +221,6 @@ export default {
|
|
|
}
|
|
|
|
|
|
this.groupEvaluationRatioData = await this.groupEvaluationRatio()
|
|
|
- this.groupEvaluationRatioData = [
|
|
|
- { name: '一年级', value: 10 },
|
|
|
- { name: '二年级', value: 10 },
|
|
|
- { name: '三年级', value: 10 },
|
|
|
- { name: '四年级', value: 10 },
|
|
|
- { name: '五年级', value: 10 },
|
|
|
- { name: '六年级', value: 10 }
|
|
|
- ]
|
|
|
|
|
|
let { xData, yData } = await this.recentDetail()
|
|
|
this.dynamicData = {
|
|
@@ -229,9 +243,7 @@ export default {
|
|
|
// 查询测评总次数
|
|
|
getAllTestNum() {
|
|
|
return new Promise((resolve, reject) => {
|
|
|
- this.$http.get(`/index/allTestNum`, {
|
|
|
- institutionNo: this.institutionNo
|
|
|
- }, (res) => {
|
|
|
+ this.$http.get(`/index/allTestNum?institutionNo=${this.institutionNo}`, {}, (res) => {
|
|
|
resolve(res.data.allTestNum)
|
|
|
})
|
|
|
})
|
|
@@ -240,9 +252,7 @@ export default {
|
|
|
// 查询测评总人数
|
|
|
getAllUserNum() {
|
|
|
return new Promise((resolve, reject) => {
|
|
|
- this.$http.get(`/index/allUserNum`, {
|
|
|
- institutionNo: this.institutionNo
|
|
|
- }, (res) => {
|
|
|
+ this.$http.get(`/index/allUserNum?institutionNo=${this.institutionNo}`, {}, (res) => {
|
|
|
resolve(res.data.allUserNum)
|
|
|
})
|
|
|
})
|
|
@@ -251,9 +261,7 @@ export default {
|
|
|
// 查询学生完成进度
|
|
|
finishUserNum() {
|
|
|
return new Promise((resolve, reject) => {
|
|
|
- this.$http.get(`/index/finishUserNum`, {
|
|
|
- institutionNo: this.institutionNo
|
|
|
- }, (res) => {
|
|
|
+ this.$http.get(`/index/finishUserNum?institutionNo=${this.institutionNo}`, {}, (res) => {
|
|
|
resolve(roundToFixed(res.data.finishNum / res.data.allNum, 2))
|
|
|
})
|
|
|
})
|
|
@@ -262,9 +270,7 @@ export default {
|
|
|
// 查询学校完成进度
|
|
|
finishInstitutionNum() {
|
|
|
return new Promise((resolve, reject) => {
|
|
|
- this.$http.get(`/index/finishInstitutionNum`, {
|
|
|
- institutionNo: this.institutionNo
|
|
|
- }, (res) => {
|
|
|
+ this.$http.get(`/index/finishInstitutionNum?institutionNo=${this.institutionNo}`, {}, (res) => {
|
|
|
resolve(res.data.map((item) => {
|
|
|
return {
|
|
|
name: item.institution_name,
|
|
@@ -278,10 +284,13 @@ export default {
|
|
|
// 各个年龄段(年级)学生参与测评的比例
|
|
|
groupEvaluationRatio() {
|
|
|
return new Promise((resolve, reject) => {
|
|
|
- this.$http.get(`/index/groupEvaluationRatio`, {
|
|
|
- institutionNo: this.institutionNo
|
|
|
- }, (res) => {
|
|
|
- resolve(res.data)
|
|
|
+ this.$http.get(`/index/groupEvaluationRatio?institutionNo=${this.institutionNo}`, {}, (res) => {
|
|
|
+ resolve(res.data.map((item) => {
|
|
|
+ return {
|
|
|
+ name: item.group_name,
|
|
|
+ value: item.count
|
|
|
+ }
|
|
|
+ }))
|
|
|
})
|
|
|
})
|
|
|
},
|
|
@@ -289,9 +298,7 @@ export default {
|
|
|
// 动态数据图表(近段时间测评活动情况)
|
|
|
recentDetail() {
|
|
|
return new Promise((resolve, reject) => {
|
|
|
- this.$http.get(`/index/recentDetail`, {
|
|
|
- institutionNo: this.institutionNo
|
|
|
- }, (res) => {
|
|
|
+ this.$http.get(`/index/recentDetail?institutionNo=${this.institutionNo}`, {}, (res) => {
|
|
|
resolve(res.data)
|
|
|
})
|
|
|
})
|
|
@@ -300,9 +307,7 @@ export default {
|
|
|
// 近段时间主要使用量表:index/recentSubjectDetail
|
|
|
recentSubjectDetail() {
|
|
|
return new Promise((resolve, reject) => {
|
|
|
- this.$http.get(`/index/recentSubjectDetail`, {
|
|
|
- institutionNo: this.institutionNo
|
|
|
- }, (res) => {
|
|
|
+ this.$http.get(`/index/recentSubjectDetail?institutionNo=${this.institutionNo}`, {}, (res) => {
|
|
|
resolve(res.data)
|
|
|
})
|
|
|
})
|
|
@@ -311,9 +316,7 @@ export default {
|
|
|
// 近段时间主要使用认知任务:index/recentTaskDetail
|
|
|
recentTaskDetail() {
|
|
|
return new Promise((resolve, reject) => {
|
|
|
- this.$http.get(`/index/recentTaskDetail`, {
|
|
|
- institutionNo: this.institutionNo
|
|
|
- }, (res) => {
|
|
|
+ this.$http.get(`/index/recentTaskDetail?institutionNo=${this.institutionNo}`, {}, (res) => {
|
|
|
resolve(res.data)
|
|
|
})
|
|
|
})
|
|
@@ -322,9 +325,7 @@ export default {
|
|
|
// 紧急关注的学生个体:index/urgentAttentionUser
|
|
|
urgentAttentionUser() {
|
|
|
return new Promise((resolve, reject) => {
|
|
|
- this.$http.get(`/index/urgentAttentionUser`, {
|
|
|
- institutionNo: this.institutionNo
|
|
|
- }, (res) => {
|
|
|
+ this.$http.get(`/index/urgentAttentionUser?institutionNo=${this.institutionNo}`, {}, (res) => {
|
|
|
resolve(res.data)
|
|
|
})
|
|
|
})
|
|
@@ -333,9 +334,7 @@ export default {
|
|
|
// 紧急关注的群体信息:index/urgentAttentionGroup
|
|
|
urgentAttentionGroup() {
|
|
|
return new Promise((resolve, reject) => {
|
|
|
- this.$http.get(`/index/urgentAttentionGroup`, {
|
|
|
- institutionNo: this.institutionNo
|
|
|
- }, (res) => {
|
|
|
+ this.$http.get(`/index/urgentAttentionGroup?institutionNo=${this.institutionNo}`, {}, (res) => {
|
|
|
resolve(res.data)
|
|
|
})
|
|
|
})
|
|
@@ -344,9 +343,7 @@ export default {
|
|
|
// 测评结果风险等级柱状图:index/resultRiskLevel
|
|
|
resultRiskLevel() {
|
|
|
return new Promise((resolve, reject) => {
|
|
|
- this.$http.get(`/index/resultRiskLevel`, {
|
|
|
- institutionNo: this.institutionNo
|
|
|
- }, (res) => {
|
|
|
+ this.$http.get(`/index/resultRiskLevel?institutionNo=${this.institutionNo}`, {}, (res) => {
|
|
|
resolve([res.data.warnNum, res.data.unWarnNum])
|
|
|
})
|
|
|
})
|
|
@@ -356,9 +353,7 @@ export default {
|
|
|
// 风险变化趋势折线图:index/riskChangeChart
|
|
|
riskChangeChart() {
|
|
|
return new Promise((resolve, reject) => {
|
|
|
- this.$http.get(`/index/riskChangeChart`, {
|
|
|
- institutionNo: this.institutionNo
|
|
|
- }, (res) => {
|
|
|
+ this.$http.get(`/index/riskChangeChart?institutionNo=${this.institutionNo}`, {}, (res) => {
|
|
|
resolve(res.data)
|
|
|
})
|
|
|
})
|
|
@@ -367,9 +362,7 @@ export default {
|
|
|
// 心理风险地图:index/psychologicalRiskMap
|
|
|
psychologicalRiskMap() {
|
|
|
return new Promise((resolve, reject) => {
|
|
|
- this.$http.get(`/index/psychologicalRiskMap`, {
|
|
|
- institutionNo: this.institutionNo
|
|
|
- }, (res) => {
|
|
|
+ this.$http.get(`/index/psychologicalRiskMap?institutionNo=${this.institutionNo}`, {}, (res) => {
|
|
|
resolve(res.data)
|
|
|
})
|
|
|
})
|
|
@@ -519,28 +512,203 @@ export default {
|
|
|
background-position: center; /* 可选,让图片居中对齐 */
|
|
|
position: relative;
|
|
|
|
|
|
+ .legend-area {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ bottom: 0;
|
|
|
+
|
|
|
+ .legend {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 14px;
|
|
|
+
|
|
|
+ div {
|
|
|
+ width: 24px;
|
|
|
+ height: 15px;
|
|
|
+ border-radius: 4px;
|
|
|
+ margin-right: 6px;
|
|
|
+
|
|
|
+ &.green {
|
|
|
+ background-color: #09fb84;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.blue {
|
|
|
+ background-color: #5695DD;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.orange {
|
|
|
+ background-color: #dd8a56;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.red {
|
|
|
+ background-color: #e66060;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
.map-item-unit {
|
|
|
- width: 180px;
|
|
|
- height: 100px;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
position: absolute;
|
|
|
- top: 50%;
|
|
|
- left: 60%;
|
|
|
- transform: translate(-50%, -50%);
|
|
|
font-size: 15px;
|
|
|
z-index: 29;
|
|
|
+ cursor: pointer;
|
|
|
|
|
|
.point {
|
|
|
width: 12px;
|
|
|
height: 12px;
|
|
|
border-radius: 50%;
|
|
|
- background-color: #f68181;
|
|
|
}
|
|
|
|
|
|
.text {
|
|
|
margin: 4px 0 0;
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .green {
|
|
|
+ color: #09fb84;
|
|
|
+ &.point {
|
|
|
+ background-color: #09fb84;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .blue {
|
|
|
+ color: #5695DD;
|
|
|
+ &.point {
|
|
|
+ background-color: #5695DD;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .orange {
|
|
|
+ color: #dd8a56;
|
|
|
+ &.point {
|
|
|
+ background-color: #dd8a56;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .red {
|
|
|
+ color: #e66060;
|
|
|
+ &.point {
|
|
|
+ background-color: #e66060;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ .point {
|
|
|
+ scale: 1.5;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text {
|
|
|
+ opacity: 1 !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &.sh001 {
|
|
|
+ top: 44%;
|
|
|
+ left: 45%;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.sh002 {
|
|
|
+ top: 39%;
|
|
|
+ left: 44%;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.sh003 {
|
|
|
+ top: 36%;
|
|
|
+ left: 55%;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.sh004 {
|
|
|
+ top: 40%;
|
|
|
+ left: 53%;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.sh005 {
|
|
|
+ top: 27%;
|
|
|
+ left: 23%;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.sh006 {
|
|
|
+ top: 21%;
|
|
|
+ left: 30%;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.sh007 {
|
|
|
+ top: 19%;
|
|
|
+ left: 26%;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.sh008 {
|
|
|
+ top: 39%;
|
|
|
+ left: 34%;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.sh009 {
|
|
|
+ top: 17%;
|
|
|
+ left: 21%;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.sh010 {
|
|
|
+ top: 39%;
|
|
|
+ left: 56%;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.sh011 {
|
|
|
+ top: 44%;
|
|
|
+ left: 55%;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.sh012 {
|
|
|
+ top: 51%;
|
|
|
+ left: 57%;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.sh013 {
|
|
|
+ top: 51%;
|
|
|
+ left: 61%;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.sh014 {
|
|
|
+ top: 31%;
|
|
|
+ left: 60%;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.sh015 {
|
|
|
+ top: 38%;
|
|
|
+ left: 60%;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.sh016 {
|
|
|
+ top: 19%;
|
|
|
+ left: 61%;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.sh017 {
|
|
|
+ top: 14%;
|
|
|
+ left: 65%;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.sh018 {
|
|
|
+ top: 75%;
|
|
|
+ left: 60%;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.sh019 {
|
|
|
+ top: 85%;
|
|
|
+ left: 56%;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.sh020 {
|
|
|
+ top: 75%;
|
|
|
+ left: 68%;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.sh021 {
|
|
|
+ top: 80%;
|
|
|
+ left: 76%;
|
|
|
}
|
|
|
}
|
|
|
}
|