|
@@ -3,7 +3,7 @@
|
|
|
<view class="back">
|
|
|
<view class="t-icon t-icon-fanhui2-copy" @click="returnList"></view>
|
|
|
</view>
|
|
|
-
|
|
|
+
|
|
|
<view class="children-box">
|
|
|
<image class="children-avatar" :src="childreninfo.avatar"></image>
|
|
|
<view class="children-msg">
|
|
@@ -11,18 +11,41 @@
|
|
|
<view class="children-class">{{childreninfo.class}}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
-<!-- 图表列表 -->
|
|
|
-<!-- 走势 -->
|
|
|
-<view class="chart-container">
|
|
|
- <view class="chart-name">
|
|
|
- <view class="t-icon t-icon-xianxinglanqiu"></view>
|
|
|
- <text class="chart-name-text">{{semester}} 排行占比走势对比</text>
|
|
|
+
|
|
|
+ <!-- 数据分析模块 -->
|
|
|
+ <view class="data-box">
|
|
|
+ <view class="data-box-item" v-bind:style="{background: gradeData.rankArcbarChart.recentAnalyse.series[0].color}">
|
|
|
+ <view class="item-text">{{gradeData.rankArcbarChart.recentAnalyse.series[0].name}}</view>
|
|
|
+ <view class="item-number">{{gradeData.rankArcbarChart.recentAnalyse.series[0].data/0.01}}%</view>
|
|
|
+ <view style="display: flex;align-items: center;padding-bottom: 15rpx;padding: 0 15rpx 10rpx 15rpx;">
|
|
|
+ <view v-if="gradeData.rankArcbarChart.recentAnalyse.series[0].data<0.4" class="t-icon t-icon-jiangbei-20"></view>
|
|
|
+ <view v-if="gradeData.rankArcbarChart.recentAnalyse.series[0].data>=0.4 && gradeData.rankArcbarChart.recentAnalyse.series[0].data<0.7"
|
|
|
+ class="t-icon t-icon-jiangbei-19"></view>
|
|
|
+ <view v-if="gradeData.rankArcbarChart.recentAnalyse.series[0].data>=0.7" class="t-icon t-icon-jiangbei-18"></view>
|
|
|
+ <view v-if="gradeData.rankArcbarChart.recentAnalyse.series[0].data<0.4" class="icon-text-item">要加把劲!</view>
|
|
|
+ <view v-if="gradeData.rankArcbarChart.recentAnalyse.series[0].data>=0.4 && gradeData.rankArcbarChart.recentAnalyse.series[0].data<0.7"
|
|
|
+ class="icon-text-item">再接再厉!</view>
|
|
|
+ <view v-if="gradeData.rankArcbarChart.recentAnalyse.series[0].data>=0.7" class="icon-text-item">非常优秀!</view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <view class="charts-box">
|
|
|
- <qiun-data-charts type="area" :chartData="listChartData" :loadingType="4" :opts="{dataLabel: false}"
|
|
|
- :canvas2d='true' canvasId='canvans899' />
|
|
|
+
|
|
|
+ <view class="data-box-item" v-bind:style="{background: gradeData.rankArcbarChart.recentAnalyse.series[1].color}">
|
|
|
+ <view class="item-text">{{gradeData.rankArcbarChart.recentAnalyse.series[1].name}}</view>
|
|
|
+ <view class="item-number">{{gradeData.rankArcbarChart.recentAnalyse.series[1].data/0.01}}%</view>
|
|
|
+ <view style="display: flex;align-items: center;padding-bottom: 15rpx;padding: 0 15rpx 10rpx 15rpx;">
|
|
|
+ <view v-if="gradeData.rankArcbarChart.recentAnalyse.series[1].data<0.4" class="t-icon t-icon-jiangbei-20"></view>
|
|
|
+ <view v-if="gradeData.rankArcbarChart.recentAnalyse.series[1].data>=0.4 && gradeData.rankArcbarChart.recentAnalyse.series[1].data<0.7"
|
|
|
+ class="t-icon t-icon-jiangbei-19"></view>
|
|
|
+ <view v-if="gradeData.rankArcbarChart.recentAnalyse.series[1].data>=0.7" class="t-icon t-icon-jiangbei-18"></view>
|
|
|
+ <view v-if="gradeData.rankArcbarChart.recentAnalyse.series[1].data<0.4" class="icon-text-item">要加把劲!</view>
|
|
|
+ <view v-if="gradeData.rankArcbarChart.recentAnalyse.series[1].data>=0.4 && gradeData.rankArcbarChart.recentAnalyse.series[1].data<0.7"
|
|
|
+ class="icon-text-item">再接再厉!</view>
|
|
|
+ <view v-if="gradeData.rankArcbarChart.recentAnalyse.series[1].data>=0.7" class="icon-text-item">非常优秀!</view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
+
|
|
|
+ <!-- 图表列表 -->
|
|
|
<!-- 单次分析 -->
|
|
|
<view class="chart-container">
|
|
|
<view class="chart-name">
|
|
@@ -30,115 +53,47 @@
|
|
|
<text class="chart-name-text">近期排行占比分析</text>
|
|
|
</view>
|
|
|
<view class="charts-box">
|
|
|
- <qiun-data-charts type="arcbar" :chartData="arcbarChartData" :loadingType="4"/>
|
|
|
+ <qiun-data-charts type="arcbar" :chartData="gradeData.rankArcbarChart.recentAnalyse" :loadingType="4" />
|
|
|
</view>
|
|
|
</view>
|
|
|
- <!-- 数据分析模块 -->
|
|
|
- <view class="data-box">
|
|
|
- <view class="data-box-item" v-bind:style="{background: arcbarChartData.series[0].color}">
|
|
|
- <view class="item-text">{{arcbarChartData.series[0].name}}</view>
|
|
|
- <view class="item-number">{{arcbarChartData.series[0].data/0.01}}%</view>
|
|
|
- <view style="display: flex;align-items: center;padding-bottom: 15rpx;padding: 5rpx 15rpx;">
|
|
|
- <view v-if="arcbarChartData.series[0].data<0.4" class="t-icon t-icon-jiangbei-20"></view>
|
|
|
- <view v-if="arcbarChartData.series[0].data>=0.4 && arcbarChartData.series[0].data<0.7" class="t-icon t-icon-jiangbei-19"></view>
|
|
|
- <view v-if="arcbarChartData.series[0].data>=0.7" class="t-icon t-icon-jiangbei-18"></view>
|
|
|
- <view v-if="arcbarChartData.series[0].data<0.4" class="icon-text-item">要加把劲!</view>
|
|
|
- <view v-if="arcbarChartData.series[0].data>=0.4 && arcbarChartData.series[0].data<0.7" class="icon-text-item">再接再厉!</view>
|
|
|
- <view v-if="arcbarChartData.series[0].data>=0.7" class="icon-text-item">非常优秀!</view>
|
|
|
- </view>
|
|
|
+ <!-- 走势 -->
|
|
|
+ <view class="chart-container">
|
|
|
+ <view class="chart-name">
|
|
|
+ <view class="t-icon t-icon-xianxinglanqiu"></view>
|
|
|
+ <text class="chart-name-text">{{semester}} 排行占比走势对比</text>
|
|
|
</view>
|
|
|
-
|
|
|
- <view class="data-box-item" v-bind:style="{background: arcbarChartData.series[1].color}">
|
|
|
- <view class="item-text">{{arcbarChartData.series[1].name}}</view>
|
|
|
- <view class="item-number">{{arcbarChartData.series[1].data/0.01}}%</view>
|
|
|
- <view style="display: flex;align-items: center;padding-bottom: 15rpx;padding: 5rpx 15rpx;">
|
|
|
- <view v-if="arcbarChartData.series[1].data<0.4" class="t-icon t-icon-jiangbei-20"></view>
|
|
|
- <view v-if="arcbarChartData.series[1].data>=0.4 && arcbarChartData.series[1].data<0.7" class="t-icon t-icon-jiangbei-19"></view>
|
|
|
- <view v-if="arcbarChartData.series[1].data>=0.7" class="t-icon t-icon-jiangbei-18"></view>
|
|
|
- <view v-if="arcbarChartData.series[1].data<0.4" class="icon-text-item">要加把劲!</view>
|
|
|
- <view v-if="arcbarChartData.series[1].data>=0.4 && arcbarChartData.series[1].data<0.7" class="icon-text-item">再接再厉!</view>
|
|
|
- <view v-if="arcbarChartData.series[1].data>=0.7" class="icon-text-item">非常优秀!</view>
|
|
|
- </view>
|
|
|
+ <view class="charts-box">
|
|
|
+ <qiun-data-charts type="area" :chartData="gradeData.rankArcbarChart.semesterAnalyse" :loadingType="4" :opts="{dataLabel: false}"
|
|
|
+ :canvas2d='true' canvasId='canvans899' />
|
|
|
</view>
|
|
|
-
|
|
|
</view>
|
|
|
+
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import {mapState} from 'vuex'
|
|
|
-
|
|
|
+ import {
|
|
|
+ mapState
|
|
|
+ } from 'vuex'
|
|
|
+
|
|
|
export default {
|
|
|
- computed:{
|
|
|
- ...mapState('m_children',['childreninfo','semester'])
|
|
|
+ computed: {
|
|
|
+ ...mapState('m_children', ['childreninfo', 'semester']),
|
|
|
+ ...mapState('m_chart',['gradeData'])
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- arcbarChartData: {
|
|
|
- series: [{
|
|
|
- "name": "超过年级中",
|
|
|
- "data": 0.6,
|
|
|
- "color": "#0052d4"
|
|
|
- },
|
|
|
- {
|
|
|
- "name": "超过班级中",
|
|
|
- "data": 0.92,
|
|
|
- "color": "#ff5959"
|
|
|
- }
|
|
|
- ],
|
|
|
- },
|
|
|
- listChartData: {
|
|
|
- categories: [
|
|
|
- "测验1",
|
|
|
- "测验2",
|
|
|
- "测验3",
|
|
|
- "测验4",
|
|
|
- "测验5",
|
|
|
- "测验6"
|
|
|
- ],
|
|
|
- series: [{
|
|
|
- "name": "超过年级中百分之",
|
|
|
- "data": [
|
|
|
- 90,
|
|
|
- 95,
|
|
|
- 92,
|
|
|
- 100,
|
|
|
- 88,
|
|
|
- 99
|
|
|
- ]
|
|
|
- },
|
|
|
- {
|
|
|
- "name": "超过班级中百分之",
|
|
|
- "data": [
|
|
|
- 95,
|
|
|
- 98,
|
|
|
- 84,
|
|
|
- 92,
|
|
|
- 93,
|
|
|
- 79
|
|
|
- ]
|
|
|
- }
|
|
|
- ]
|
|
|
- },
|
|
|
- //查询参数
|
|
|
- queryObj: {},
|
|
|
-
|
|
|
};
|
|
|
},
|
|
|
- methods:{
|
|
|
+ methods: {
|
|
|
//返回成绩页面
|
|
|
- returnList(){
|
|
|
+ returnList() {
|
|
|
uni.switchTab({
|
|
|
url: '/pages/grade/grade'
|
|
|
})
|
|
|
},
|
|
|
- //获取表格数据
|
|
|
- // async getChartData(){
|
|
|
-
|
|
|
- // },
|
|
|
},
|
|
|
- onLoad(){
|
|
|
- // this.getChartData()
|
|
|
+ onLoad() {
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
@@ -147,19 +102,21 @@
|
|
|
.page-box {
|
|
|
height: 600rpx;
|
|
|
background: linear-gradient(#ffd071, #f1f3f5);
|
|
|
-
|
|
|
+
|
|
|
.back {
|
|
|
padding: 100rpx 0 30rpx 40rpx;
|
|
|
- .t-icon{
|
|
|
- width:50rpx;
|
|
|
- height:50rpx;
|
|
|
+
|
|
|
+ .t-icon {
|
|
|
+ width: 50rpx;
|
|
|
+ height: 50rpx;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- .children-box{
|
|
|
+
|
|
|
+ .children-box {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- .children-avatar{
|
|
|
+
|
|
|
+ .children-avatar {
|
|
|
margin-left: 40rpx;
|
|
|
width: 96rpx;
|
|
|
height: 96rpx;
|
|
@@ -167,16 +124,18 @@
|
|
|
border: 4rpx solid #FFFFFF;
|
|
|
box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.2);
|
|
|
}
|
|
|
- .children-msg{
|
|
|
+
|
|
|
+ .children-msg {
|
|
|
margin-left: 30rpx;
|
|
|
-
|
|
|
- .children-name{
|
|
|
+
|
|
|
+ .children-name {
|
|
|
color: #3B4144;
|
|
|
font-size: 32rpx;
|
|
|
font-weight: bold;
|
|
|
margin-bottom: 10rpx;
|
|
|
}
|
|
|
- .children-class{
|
|
|
+
|
|
|
+ .children-class {
|
|
|
color: #696969;
|
|
|
font-size: 32rpx;
|
|
|
font-weight: bold;
|
|
@@ -184,6 +143,7 @@
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.chart-container {
|
|
|
margin: 40rpx 20rpx 0 20rpx;
|
|
|
padding: 0rpx 10rpx 0rpx 0rpx;
|
|
@@ -193,8 +153,8 @@
|
|
|
justify-content: center;
|
|
|
flex-direction: column;
|
|
|
background-color: #FFFFFF;
|
|
|
- box-shadow: 0 4rpx 8rpx rgba(0,0,0,0.1);
|
|
|
-
|
|
|
+ box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
|
|
|
+
|
|
|
.chart-name {
|
|
|
width: 100%;
|
|
|
display: flex;
|
|
@@ -202,7 +162,7 @@
|
|
|
align-items: center;
|
|
|
margin-left: 40rpx;
|
|
|
margin-top: 20rpx;
|
|
|
-
|
|
|
+
|
|
|
.chart-name-text {
|
|
|
font-size: 30rpx;
|
|
|
font-weight: bold;
|
|
@@ -210,37 +170,43 @@
|
|
|
margin-left: 10rpx;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.charts-box {
|
|
|
width: 100%;
|
|
|
height: 500rpx;
|
|
|
}
|
|
|
}
|
|
|
- .data-box{
|
|
|
+
|
|
|
+ .data-box {
|
|
|
display: flex;
|
|
|
flex-direction: row;
|
|
|
align-items: center;
|
|
|
flex-wrap: wrap;
|
|
|
justify-content: space-between;
|
|
|
margin: 20rpx;
|
|
|
- .data-box-item{
|
|
|
+
|
|
|
+ .data-box-item {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
background-color: #FFFFFF;
|
|
|
border-radius: 15rpx;
|
|
|
width: 340rpx;
|
|
|
height: 290rpx;
|
|
|
- box-shadow: 0 4rpx 8rpx rgba(0,0,0,0.1);
|
|
|
- .item-text{
|
|
|
+ box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
|
|
|
+
|
|
|
+ .item-text {
|
|
|
font-size: 30rpx;
|
|
|
font-weight: bold;
|
|
|
color: #FFFFFF;
|
|
|
margin: 30rpx 0 0 30rpx;
|
|
|
}
|
|
|
- .t-icon{
|
|
|
+
|
|
|
+ .t-icon {
|
|
|
width: 100rpx;
|
|
|
height: 100rpx;
|
|
|
}
|
|
|
- .item-number{
|
|
|
+
|
|
|
+ .item-number {
|
|
|
font-size: 60rpx;
|
|
|
margin: 20rpx 0 10rpx 30rpx;
|
|
|
color: #FFFFFF;
|
|
@@ -249,7 +215,8 @@
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .icon-text-item{
|
|
|
+
|
|
|
+ .icon-text-item {
|
|
|
font-size: 30rpx;
|
|
|
font-weight: bold;
|
|
|
color: #FFFFFF;
|