|
@@ -2,26 +2,26 @@
|
|
|
<view class="chart-list-container">
|
|
|
<!-- 头部区域 -->
|
|
|
<top-box></top-box>
|
|
|
-
|
|
|
+
|
|
|
<!-- 缩略图区域 -->
|
|
|
<view class="mini-chart-list">
|
|
|
-
|
|
|
- <view class="mini-chart-item" @click="navMainLineChart">
|
|
|
+
|
|
|
+ <view class="mini-chart-item">
|
|
|
<mainline-mini-chart></mainline-mini-chart>
|
|
|
</view>
|
|
|
-
|
|
|
+
|
|
|
<view class="mini-chart-item" @click="navLineChart">
|
|
|
<line-mini-chart></line-mini-chart>
|
|
|
</view>
|
|
|
-
|
|
|
+
|
|
|
<view class="mini-chart-item" @click="navAreaChart">
|
|
|
<area-mini-chart></area-mini-chart>
|
|
|
</view>
|
|
|
-
|
|
|
+
|
|
|
<view class="mini-chart-item" @click="navColumnChart">
|
|
|
<column-mini-chart></column-mini-chart>
|
|
|
</view>
|
|
|
-
|
|
|
+
|
|
|
<!-- 按钮区域 -->
|
|
|
<view class="mini-chart-item">
|
|
|
<view class="item-i" @click="navRoseChart">
|
|
@@ -32,7 +32,7 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
-
|
|
|
+
|
|
|
<view class="item-i" @click="navRadarChart">
|
|
|
<view class="item-container">
|
|
|
<view class="chart-name">
|
|
@@ -41,7 +41,7 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
-
|
|
|
+
|
|
|
<view class="item-i" @click="navArcbarChart">
|
|
|
<view class="item-container">
|
|
|
<view class="chart-name">
|
|
@@ -51,32 +51,23 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
-
|
|
|
-
|
|
|
+
|
|
|
+
|
|
|
<view class="mini-chart-item" @click="navMainRadarChart">
|
|
|
<radar-mini-chart></radar-mini-chart>
|
|
|
-
|
|
|
- <!-- <view class="item-i" @click="navArcbarChart">
|
|
|
- <view class="item-container">
|
|
|
- <view class="chart-name">
|
|
|
- <view class="t-icon t-icon-xtubiao-6"></view>
|
|
|
- <text class="chart-name-text">排名分析</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view> -->
|
|
|
-
|
|
|
</view>
|
|
|
-
|
|
|
+
|
|
|
<view class="mini-chart-item" @click="navBarChart">
|
|
|
<bar-mini-chart></bar-mini-chart>
|
|
|
</view>
|
|
|
-
|
|
|
</view>
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
+ <!-- 成绩表单 -->
|
|
|
+ <view class="table-card">
|
|
|
+ <view class="table-name">
|
|
|
+ <view class="t-icon t-icon-xtubiao-5"></view>
|
|
|
+ <text class="table-name-text">成绩概览</text>
|
|
|
+ </view>
|
|
|
+ <z-table class="table" :tableData="tableData" :columns="columns" stickSide="true" showBottomSum="true"></z-table>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
@@ -85,88 +76,147 @@
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
-
|
|
|
+ tableData: [
|
|
|
+ {
|
|
|
+ 'name':'数学',
|
|
|
+ 'open':83,
|
|
|
+ 'mid':95,
|
|
|
+ 'final':96
|
|
|
+ },
|
|
|
+ {
|
|
|
+ 'name':'语文',
|
|
|
+ 'open':93,
|
|
|
+ 'mid':90,
|
|
|
+ 'final':96
|
|
|
+ },
|
|
|
+ {
|
|
|
+ 'name':'英语',
|
|
|
+ 'open':99,
|
|
|
+ 'mid':82,
|
|
|
+ 'final':96
|
|
|
+ },
|
|
|
+ {
|
|
|
+ 'name':'体育',
|
|
|
+ 'open':99,
|
|
|
+ 'mid':97,
|
|
|
+ 'final':96
|
|
|
+ },
|
|
|
+ {
|
|
|
+ 'name':'科学',
|
|
|
+ 'open':99,
|
|
|
+ 'mid':92,
|
|
|
+ 'final':96
|
|
|
+ },
|
|
|
+ {
|
|
|
+ 'name':'思品',
|
|
|
+ 'open':99,
|
|
|
+ 'mid':94,
|
|
|
+ 'final':96
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ columns: [
|
|
|
+ {
|
|
|
+ 'title':'科目',
|
|
|
+ 'key':'name',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ 'title':'开学',
|
|
|
+ 'key':'open',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ 'title':'期中',
|
|
|
+ 'key':'mid',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ 'title':'期末',
|
|
|
+ 'key':'final',
|
|
|
+ }
|
|
|
+ ]
|
|
|
+
|
|
|
+
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
|
|
|
|
},
|
|
|
methods: {
|
|
|
- open(e){
|
|
|
+ open(e) {
|
|
|
console.log(e);
|
|
|
},
|
|
|
//导航柱状图页面
|
|
|
- navColumnChart(e){
|
|
|
+ navColumnChart(e) {
|
|
|
console.log(e);
|
|
|
uni.navigateTo({
|
|
|
- url:"/gradepkg/column-chart/column-chart"
|
|
|
+ url: "/gradepkg/column-chart/column-chart"
|
|
|
})
|
|
|
},
|
|
|
//导航面积折线图页面
|
|
|
- navAreaChart(e){
|
|
|
+ navAreaChart(e) {
|
|
|
console.log(e);
|
|
|
uni.navigateTo({
|
|
|
- url:"/gradepkg/area-chart/area-chart"
|
|
|
+ url: "/gradepkg/area-chart/area-chart"
|
|
|
})
|
|
|
},
|
|
|
//导航折线图页面
|
|
|
- navLineChart(e){
|
|
|
+ navLineChart(e) {
|
|
|
console.log(e);
|
|
|
uni.navigateTo({
|
|
|
- url:"/gradepkg/line-chart/line-chart"
|
|
|
+ url: "/gradepkg/line-chart/line-chart"
|
|
|
})
|
|
|
},
|
|
|
//导航玫瑰图页面
|
|
|
- navRoseChart(e){
|
|
|
+ navRoseChart(e) {
|
|
|
console.log(e);
|
|
|
uni.navigateTo({
|
|
|
- url:"/gradepkg/rose-chart/rose-chart"
|
|
|
+ url: "/gradepkg/rose-chart/rose-chart"
|
|
|
})
|
|
|
},
|
|
|
//导航雷达图页面
|
|
|
- navRadarChart(e){
|
|
|
+ navRadarChart(e) {
|
|
|
console.log(e);
|
|
|
uni.navigateTo({
|
|
|
- url:"/gradepkg/radar-chart/radar-chart"
|
|
|
+ url: "/gradepkg/radar-chart/radar-chart"
|
|
|
})
|
|
|
},
|
|
|
//导航到进度条页面
|
|
|
- navArcbarChart(e){
|
|
|
+ navArcbarChart(e) {
|
|
|
console.log(e);
|
|
|
uni.navigateTo({
|
|
|
- url:"/gradepkg/arcbar-chart/arcbar-chart"
|
|
|
+ url: "/gradepkg/arcbar-chart/arcbar-chart"
|
|
|
})
|
|
|
},
|
|
|
//导航到条状图页
|
|
|
- navBarChart(e){
|
|
|
+ navBarChart(e) {
|
|
|
console.log(e);
|
|
|
uni.navigateTo({
|
|
|
- url:"/gradepkg/bar-chart/bar-chart"
|
|
|
+ url: "/gradepkg/bar-chart/bar-chart"
|
|
|
})
|
|
|
},
|
|
|
//导航到学年雷达图页
|
|
|
- navMainRadarChart(e){
|
|
|
+ navMainRadarChart(e) {
|
|
|
console.log(e);
|
|
|
uni.navigateTo({
|
|
|
- url:"/gradepkg/mainradar-chart/mainradar-chart"
|
|
|
+ url: "/gradepkg/mainradar-chart/mainradar-chart"
|
|
|
})
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
},
|
|
|
- onLoad(){
|
|
|
-
|
|
|
+ onLoad() {
|
|
|
+
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
- .chart-list-container{
|
|
|
+ .chart-list-container {
|
|
|
height: 100%;
|
|
|
overflow-x: hidden;
|
|
|
- .home-topinfo{
|
|
|
+
|
|
|
+ .home-topinfo {
|
|
|
background: linear-gradient(#FFC600, #f1f3f5);
|
|
|
}
|
|
|
- .mini-chart-list{
|
|
|
+
|
|
|
+ .mini-chart-list {
|
|
|
display: flex;
|
|
|
flex-direction: row;
|
|
|
justify-content: center;
|
|
@@ -174,26 +224,30 @@
|
|
|
flex-wrap: wrap;
|
|
|
margin: -100rpx 22rpx 0 22rpx;
|
|
|
justify-content: space-between;
|
|
|
-
|
|
|
- .mini-chart-item{
|
|
|
+
|
|
|
+ .mini-chart-item {
|
|
|
margin-top: 22rpx;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
justify-content: space-between;
|
|
|
- .item-i{
|
|
|
+
|
|
|
+ .item-i {
|
|
|
margin: -10rpx 0;
|
|
|
- .item-container{
|
|
|
+
|
|
|
+ .item-container {
|
|
|
border-radius: 20rpx;
|
|
|
background-color: #FFFFFF;
|
|
|
- box-shadow: 0 4rpx 8rpx rgba(0,0,0,0.05);
|
|
|
+ box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.05);
|
|
|
width: 340rpx;
|
|
|
height: auto;
|
|
|
+
|
|
|
.chart-name {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: flex-start;
|
|
|
width: 100%;
|
|
|
margin: 20rpx 0rpx 20rpx 40rpx;
|
|
|
+
|
|
|
.chart-name-text {
|
|
|
margin: 26rpx;
|
|
|
font-size: 30rpx;
|
|
@@ -202,12 +256,41 @@
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .t-icon{
|
|
|
+
|
|
|
+ .t-icon {
|
|
|
width: 40rpx;
|
|
|
height: 40rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .table-card{
|
|
|
+ margin: 40rpx 22rpx;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ flex-direction: column;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ box-shadow: 0 4rpx 8rpx rgba(0,0,0,0.05);
|
|
|
+
|
|
|
+ .table-name{
|
|
|
+ width: 100%;
|
|
|
+ text-align: left;
|
|
|
+ margin: 20rpx 0 0 50rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #3B4144;
|
|
|
+ .table-name-text {
|
|
|
+ font-size: 30rpx;
|
|
|
+ margin-left: 20rpx;
|
|
|
}
|
|
|
}
|
|
|
+ .table{
|
|
|
+ margin: 20rpx;
|
|
|
+ width: 90%;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
</style>
|