chuangte/smartmeter-app
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
cf5bd9045e
smartmeter-app/pages/Mystudent/Mystudent.vue

981 lines
25 KiB
Vue
Raw Normal View History

新建分支提交
2023-12-05 16:45:28 +08:00
<template>
<view class="pagebox">
<view class="topbox">
<u-navbar title="LILY"
:border-bottom="false"
:background="bgc"
title-color='#FFFFFF'
title-size='36'
height='36'></u-navbar>
<view class="echarts">
<!-- <mpvue-echarts id="main" ref="pieChart" :echarts="echarts" @onInit="initChart" /> -->
<l-echart ref="chart"
@finished="initChart"></l-echart>
</view>
<view class="infobigbox">
<view class="logo">
<image src="https://file.langsi.online/yasiimg/web/static/ubtuFZZ3dgSoSc444qIg"
style="z-index: 0;"></image>
</view>
<view class="infobox">
<view class="infobox_top">
<view class="infobox_top_left">
<view class="infobox_top_lefttop">
今日学习（分）
</view>
<view class="infobox_top_leftbot">
320
</view>
</view>
<view class="infobox_top_right">
<view class="infobox_top_righttop">
较昨日
</view>
<view class="infobox_top_rightbot">
20%
</view>
</view>
</view>
<view class="infobox_bot">
<view class="infobox_bot_cont">
<view class="infobox_bot_cont_top">
总学习（时）
</view>
<view class="infobox_bot_cont_bot">
320
</view>
</view>
<view class="infobox_bot_cont">
<view class="infobox_bot_cont_top">
今日做题（道）
</view>
<view class="infobox_bot_cont_bot">
4300
</view>
</view>
<view class="infobox_bot_cont">
<view class="infobox_bot_cont_top">
今日问AI（次）
</view>
<view class="infobox_bot_cont_bot">
43
</view>
</view>
</view>
</view>
</view>
<view class="study_info_box">
<view class="study_info_top">
<view class="study_info_top_left">
作业完成情况
</view>
<view class="study_info_top_right">
本周
<view class="iconfont icon-arow_down"></view>
</view>
</view>
<view class="study_info_cont_box">
<view class="study_info_cont">
<view class="data">Mon</view>
<view class="study_box">
<view class="study"
v-for="(item, index) in sdydata"
:key="index"
:style="{ backgroundColor: item.background }"></view>
</view>
</view>
<view class="study_info_cont">
<view class="data">Tue</view>
<view class="study_box">
<view class="study"
v-for="(item, index) in sdydata"
:key="index"
:style="{ backgroundColor: item.background }"></view>
</view>
</view>
<view class="study_info_cont">
<view class="data">Wed</view>
<view class="study_box">
<view class="study"
v-for="(item, index) in sdydata"
:key="index"
:style="{ backgroundColor: item.background }"></view>
</view>
</view>
<view class="study_info_cont">
<view class="data">Thu</view>
<view class="study_box">
<view class="study"
v-for="(item, index) in sdydata"
:key="index"
:style="{ backgroundColor: item.background }"></view>
</view>
</view>
<view class="study_info_cont">
<view class="data">Fri</view>
<view class="study_box">
<view class="study"
v-for="(item, index) in sdydata"
:key="index"
:style="{ backgroundColor: item.background }"></view>
</view>
</view>
<view class="study_info_cont">
<view class="data">Sat</view>
<view class="study_box">
<view class="study"
v-for="(item, index) in sdydata"
:key="index"
:style="{ backgroundColor: item.background }"></view>
</view>
</view>
<view class="study_info_cont">
<view class="data">Sun</view>
<view class="study_box">
<view class="study"
v-for="(item, index) in sdydata"
:key="index"
:style="{ backgroundColor: item.background }"></view>
</view>
</view>
</view>
</view>
作业详情 数据渲染 数据处理 页面修改 确少页面添加
2023-12-20 22:11:29 +08:00
新建分支提交
2023-12-05 16:45:28 +08:00
</view>
<view class="work_info">
<view class="work_info_top">
<view class="work_info_top_text">
作业记录
</view>
<view class="work_info_top_right">
作业记录
<view class="iconfont icon-arow_down"></view>
</view>
</view>
<view class="work_card">
<view class="work_card_top">
<view class="work_card_top_left">
<view class="work_card_top_left_img">
<image src="https://file.langsi.online/yasiimg/web/static/u07sCQb6mW6OSamVr1Va"></image>
</view>
课后作业
</view>
<view class="work_card_top_right">
进行中
</view>
</view>
<view class="work_card_cont_box">
<view class="work_card_cont">
<view class="work_card_cont_point"></view>
<view class="work_card_cont_text">
IELTS 18-Test 2-Part 1
</view>
<view class="work_card_cont_tag">
听力
</view>
</view>
<view class="work_card_cont">
<view class="work_card_cont_point"></view>
<view class="work_card_cont_text">
IELTS 18-Test 2-Part 1
</view>
<view class="work_card_cont_tag">
听力
</view>
</view>
<view class="work_card_cont">
<view class="work_card_cont_point"></view>
<view class="work_card_cont_text">
IELTS 18-Test 2-Part 1
</view>
<view class="work_card_cont_tag">
听力
</view>
</view>
</view>
<view class="work_card_info_box">
<view class="work_card_info_top">
<view class="work_card_info_topimg">
<image src="https://file.langsi.online/yasiimg/web/static/uw2jJ5BraHhwDDaIZ0MC"></image>
</view>
描述
</view>
<view class="work_card_info_bot">
最好在中午十二点之前完成交上作业，过期不候
</view>
</view>
<view class="work_card_info_box">
<view class="work_card_info_top">
<view class="work_card_info_topimg">
<image src="https://file.langsi.online/yasiimg/web/static/uhApaomh5maFP29oecp3">
</image>
</view>
时间
</view>
<view class="work_card_info_bot">
02-12 12:00
</view>
</view>
</view>
<view class="work_card"
:class="isalready == true ? 'act1' : ''">
<view class="work_card_top">
<view class="work_card_top_left">
<view class="work_card_top_left_img">
<image src="https://file.langsi.online/yasiimg/web/static/u07sCQb6mW6OSamVr1Va"></image>
</view>
课后作业
</view>
<view class="work_card_top_right"
:class="isalready == true ? 'act2' : ''">
进行中
</view>
</view>
<view class="work_card_cont_box">
<view class="work_card_cont">
<view class="work_card_cont_point"></view>
<view class="work_card_cont_text">
IELTS 18-Test 2-Part 1
</view>
<view class="work_card_cont_tag">
听力
</view>
</view>
<view class="work_card_cont">
<view class="work_card_cont_point"></view>
<view class="work_card_cont_text">
IELTS 18-Test 2-Part 1
</view>
<view class="work_card_cont_tag">
听力
</view>
</view>
<view class="work_card_cont">
<view class="work_card_cont_point"></view>
<view class="work_card_cont_text">
IELTS 18-Test 2-Part 1
</view>
<view class="work_card_cont_tag">
听力
</view>
</view>
</view>
<view class="work_card_info_box">
<view class="work_card_info_top">
<view class="work_card_info_topimg">
<image src="https://file.langsi.online/yasiimg/web/static/uw2jJ5BraHhwDDaIZ0MC"></image>
</view>
描述
</view>
<view class="work_card_info_bot">
最好在中午十二点之前完成交上作业，过期不候
</view>
</view>
<view class="work_card_info_box">
<view class="work_card_info_top">
<view class="work_card_info_topimg">
<image src="https://file.langsi.online/yasiimg/web/static/uhApaomh5maFP29oecp3">
</image>
</view>
时间
</view>
<view class="work_card_info_bot">
02-12 12:00
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
// import echarts from '@/common/echarts.min2.js' /*chart.min.js为在线定制*/
import mpvueEcharts from '@/components/mpvue-echarts/src/echarts.vue'
import LEchart from '@/uni_modules/lime-echart/components/l-echart/l-echart.vue';
export default {
components: {
mpvueEcharts, LEchart
},
data() {
return {
// echarts,
totalScore: 10,
grammaticalScore: 8,
vocabularyScore: 8,
pronounceScore: 8,
fluencyScore: 8,
bgc: {
backgroundColor: "transparent",
},
sdydata: [],
isalready: true,
// https://file.langsi.online/yasiimg/web/static/uBHiWpVS8LQdX241DdjX
}
},
onLoad(option) {
this.changedata()
},
methods: {
async initChart() {
let _this = this
const option = {
color: ['#d1f7ff', '#95c6fd'],
legend: { // 图例组件
},
backgroundColor: 'transparent',
radar: [{ // 雷达图坐标系组件，只适用于雷达图。
center: ['50%', '50%'],
// 圆中心坐标，数组的第一项是横坐标，第二项是纵坐标。[ default: ['50%', '50%'] ]
radius: '70rpx',
// 圆的半径，数组的第一项是内半径，第二项是外半径。
startAngle: 90,
// 坐标系起始角度，也就是第一个指示器轴的角度。[ default: 90 ]
name: { // (圆外的标签)雷达图每个指示器名称的配置项。
formatter: '{value}',
textStyle: {
fontSize: '24rpx',
color: '#4DA1FF'
}
},
nameGap: 5,
// 指示器名称和指示器轴的距离。[ default: 15 ]
splitNumber: 1,
// (这里是圆的环数)指示器轴的分割段数。[ default: 5 ]
shape: 'circle',
// 雷达图绘制类型，支持 'polygon'(多边形) 和 'circle'(圆)。[ default: 'polygon' ]
axisLine: { // (圆内的几条直线)坐标轴轴线相关设置
lineStyle: {
color: '#daedff',
// 坐标轴线线的颜色。
width: 1,
// 坐标轴线线宽。
type: 'solid',
// 坐标轴线线的类型。
}
},
splitLine: { // (这里是指所有圆环)坐标轴在 grid 区域中的分隔线。
lineStyle: {
color: ['#daedff', '#daedff', '#daedff', '#daedff', '#daedff', '#91c5ff'],
// 分隔线颜色
width: 1,
// 分隔线线宽
type: ['solid', 'dashed'],
// 坐标轴线线的类型
}
},
splitArea: { // 坐标轴在 grid 区域中的分隔区域，默认不显示。
show: true,
areaStyle: { // 分隔区域的样式设置。
color: ' #E1F0FF',
// 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
}
},
indicator: [
{ // 雷达图的指示器，用来指定雷达图中的多个变量（维度）,跟data中 value 对应
name: '平均成绩/分' + ' ' + Number(_this.totalScore).toFixed(1),
// 指示器名称
max: 100,
// 指示器的最大值，可选，建议设置
color: '#FFFFFF ' // 标签特定的颜色。
},
{
name: '写作' + ' ' + Number(_this.grammaticalScore).toFixed(1),
max: 100,
color: '#FFFFFF' // 标签特定的颜色。
},
{
name: '阅读' + ' ' + Number(_this.vocabularyScore).toFixed(1),
max: 100,
color: '#FFFFFF' // 标签特定的颜色。
},
{
name: '口语' + ' ' + Number(_this.pronounceScore).toFixed(1),
max: 100,
color: '#FFFFFF' // 标签特定的颜色。
},
{
name: '听力' + ' ' + Number(_this.fluencyScore).toFixed(1),
max: 100,
color: '#FFFFFF' // 标签特定的颜色。
}]
}],
series: [{
name: '雷达图',
// 系列名称,用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
type: 'radar',
// 系列类型: 雷达图
itemStyle: { // 折线拐点标志的样式。
normal: { // 普通状态时的样式
lineStyle: {
width: 2,
color: '#3F9AFF',
},
opacity: 1
},
emphasis: { // 高亮时的样式
lineStyle: {
width: 0,
color: '#60abff',
},
opacity: 1
}
},
data: [
// { // 雷达图的数据是多变量（维度）的
// name: '',
// // 数据项名称
// value: [100, 100, 100, 100, 100],
// // 其中的value项数组是具体的数据，每个值跟 radar.indicator 一一对应。
// symbol: 'circle',
// // 单个数据标记的图形。
// symbolSize: 0,
// // 单个数据标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。
// // label: { // 单个拐点文本的样式设置
// // normal: {
// // show: false,
// // // 单个拐点文本的样式设置。[ default: false ]
// // position: 'top',
// // // 标签的位置。[ default: top ]
// // distance: 5,
// // // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。[ default: 5 ]
// // color: '#d1f7ff',
// // // 文字的颜色。如果设置为 'auto'，则为视觉映射得到的颜色，如系列色。[ default: "#fff" ]
// // fontSize: 14,
// // // 文字的字体大小
// // formatter: function(params) {
// // return params.value;
// // }
// // }
// // },
// itemStyle: { // 单个拐点标志的样式设置。
// normal: {
// borderColor: '#d1f7ff',
// // 拐点的描边颜色。[ default: '#000' ]
// borderWidth: 0,
// // 拐点的描边宽度，默认不描边。[ default: 0 ]
// }
// },
// lineStyle: { // 单项线条样式。
// normal: {
// opacity: 0.5,// 图形透明度
// width: 2,
// color: '#d1f7ff',
// },
// emphasis: { // 高亮时的样式
// width: 2,
// color: '#d1f7ff',
// opacity: 1
// }
// },
// areaStyle: { // 单项区域填充样式
// normal: {
// color: '#d1f7ff' // 填充的颜色。[ default: "#000" ]
// }
// }
// },
{
name: '',
value: [Number(_this.grammaticalScore).toFixed(1) * 10, Number(_this.grammaticalScore).toFixed(1) * 10, Number(_this.vocabularyScore).toFixed(1) * 10, Number(_this.pronounceScore).toFixed(1) * 10, Number(_this.fluencyScore).toFixed(1) * 10],
symbol: 'circle',
symbolSize: 0,
// label: {
// normal: {
// show: false,
// position: 'top',
// distance: 5,
// color: '#95c6fd',
// fontSize: 14,
// formatter: function(params) {
// return params.value;
// }
// }
// },
itemStyle: {
normal: {
borderColor: '##3F9AFF',
borderWidth: 0,
}
},
lineStyle: {
normal: {
opacity: 0.5,
width: 2,
color: '#2D7CE6',
},
emphasis: { // 高亮时的样式
width: 2,
color: '#2D7CE6',
opacity: 1
}
},
areaStyle: {
normal: {
color: '#2D7CE6'
}
}
}]
},
]
};
const chart = await this.$refs.chart.init(echarts);
chart.setOption(option)
//return chart
},
changedata() {
this.sdydata = [];
for (let i = 0; i < 10; i++) {
const isStudy = Math.random() < 0.5;
let totalNum = "0";
let alreadyNum = "0";
if (isStudy) {
totalNum = String(Math.floor(Math.random() * 100));
alreadyNum = String(Math.floor(Math.random() * (parseInt(totalNum) + 1)));
}
this.sdydata.push({
isStudy,
totalNum,
alreadyNum,
});
}
for (let i = 0; i < this.sdydata.length; i++) {
const item = this.sdydata[i];
if (item.isStudy) {
const percentage = (parseInt(item.alreadyNum) / parseInt(item.totalNum)) * 100;
const color = this.getColorByPercentage(percentage);
item.background = color;
} else {
item.background = '#F6F6F6';
}
}
console.log(this.sdydata, 'this.sdydata');
},
getColorByPercentage(percentage) {
// 将百分比转换为透明度
const alpha = percentage / 100;
// 返回颜色值，使用计算得到的透明度
return `rgba(61, 202, 211, ${alpha})`;
}
}
}
</script>
<style lang="scss">
page {
background: #F7F9FC;
padding-bottom: 50rpx;
}
.pagebox {
width: 750rpx;
.topbox {
// display: flex;
// flex-wrap: wrap;
padding: 0 32rpx;
width: 750rpx;
height: 1345.92rpx;
background-image: url("https://file.langsi.online/yasiimg/web/static/uBHiWpVS8LQdX241DdjX");
background-size: cover;
background-position: center;
.echarts {
margin-top: 70rpx;
margin-left: auto;
margin-right: 20rpx;
width: 400rpx;
height: 300rpx;
// background:transparent;
}
.infobigbox {
width: 686rpx;
position: relative;
.logo {
position: absolute;
left: 20rpx;
top: -342rpx;
width: 220rpx;
height: 485.82rpx;
z-index: 0 !important;
}
.infobox {
position: relative;
width: 686rpx;
background: rgba(255, 255, 255, 0.7);
border-radius: 20rpx 20rpx 20rpx 20rpx;
border: 2rpx solid #FFFFFF;
// z-index: 999;
.infobox_top {
display: flex;
flex-wrap: nowrap;
// align-items: center;
.infobox_top_left {
width: 196rpx;
margin-top: 48rpx;
margin-left: 100rpx;
.infobox_top_lefttop {
font-size: 28rpx;
font-family: 'PingFang';
font-weight: 400;
color: #2E4975;
}
.infobox_top_leftbot {
font-size: 76rpx;
font-family: 'PingFang';
font-weight: 800;
color: #2E4975;
margin-top: 12rpx;
}
}
.infobox_top_right {
margin-left: 112rpx;
margin-top: 78rpx;
.infobox_top_righttop {
font-size: 24rpx;
font-family:'PingFang','PingFang';
font-weight: 800;
color: #2E4975;
}
.infobox_top_rightbot {
margin-top: 4rpx;
font-size: 40rpx;
font-family:'PingFang','PingFang';
font-weight: 800;
color: #F18F21;
}
}
}
.infobox_bot {
margin-left: 32rpx;
margin-top: 32rpx;
margin-bottom: 32rpx;
width: 622rpx;
height: 126rpx;
background: #F6F6F6;
border-radius: 20rpx 20rpx 20rpx 20rpx;
display: flex;
flex-wrap: nowrap;
justify-content: space-around;
align-items: center;
.infobox_bot_cont {
width: 140rpx;
display: flex;
flex-wrap: wrap;
justify-content: center;
.infobox_bot_cont_top {
font-size: 20rpx;
font-family:'PingFang','PingFang';
font-weight: 500;
color: #2E4975;
}
.infobox_bot_cont_bot {
margin-top: 8rpx;
font-size: 36rpx;
font-family:'PingFang','PingFang';
font-weight: 800;
color: #2E4975;
}
}
}
}
}
.study_info_box {
// position: absolute;
margin-top: 20rpx;
width: 686rpx;
padding: 32rpx;
// height: 365rpx;
background: #FFFFFF;
border-radius: 20rpx 20rpx 20rpx 20rpx;
.study_info_top {
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
.study_info_top_left {
font-size: 28rpx;
font-family:'PingFang','PingFang';
font-weight: 800;
color: #2E4975;
}
.study_info_top_right {
display: flex;
flex-wrap: nowrap;
align-items: center;
font-size: 24rpx;
font-family:'PingFang','PingFang';
font-weight: 500;
color: rgba(46, 73, 117, 0.65);
line-height: 38rpx;
.icon-arow_down {
margin-left: 8rpx;
font-size: 16rpx;
color: #2E4975;
}
}
}
.study_info_cont_box {
margin-top: 32rpx;
display: flex;
// flex-wrap: warp;
flex-wrap: wrap;
.study_info_cont {
margin-top: 4rpx;
display: flex;
flex-wrap: nowrap;
align-content: center;
// justify-content: space-between;
.data {
width: 40rpx;
font-size: 20rpx;
font-family:'PingFang','PingFang';
font-weight: 500;
color: #2E4975;
}
.study_box {
margin-left: 12rpx;
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
.study {
margin-right: 2rpx;
width: 57.4rpx;
height: 32.41rpx;
background: #F6F6F6;
}
}
}
}
}
}
.work_info {
margin-top: 40rpx;
padding: 0 32rpx;
.work_info_top {
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
.work_info_top_text {
font-size: 32rpx;
font-family:'PingFang','PingFang';
font-weight: 800;
color: #2E4975;
}
.work_info_top_right {
display: flex;
flex-wrap: nowrap;
align-items: center;
font-size: 24rpx;
font-family:'PingFang','PingFang';
font-weight: 500;
color: rgba(7, 47, 90, 0.6);
.icon-arow_down {
margin-left: 8rpx;
font-size: 16rpx;
color: #2E4975;
}
}
}
.work_card {
margin-top: 20rpx;
display: flex;
flex-wrap: wrap;
width: 686rpx;
padding: 32rpx;
background: #FFFFFF;
border-radius: 20rpx 20rpx 20rpx 20rpx;
border-left: 8rpx solid #F18F21;
.work_card_top {
width: 100%;
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
.work_card_top_left {
display: flex;
flex-wrap: nowrap;
align-items: center;
font-size: 28rpx;
font-family:'PingFang','PingFang';
font-weight: 800;
color: #2E4975;
.work_card_top_left_img {
margin-right: 8rpx;
width: 38rpx;
height: 32rpx;
}
}
.work_card_top_right {
font-size: 24rpx;
font-family:'PingFang','PingFang';
font-weight: 500;
color: #F18F21;
}
.act2 {
color: #2D7CE6;
}
}
.work_card_cont_box {
margin-top: 16rpx;
padding: 24rpx;
width: 100%;
background: #F9F9F9;
border-radius: 20rpx 20rpx 20rpx 20rpx;
.work_card_cont:last-child {
margin-bottom: 0;
}
.work_card_cont {
margin-bottom: 24rpx;
display: flex;
flex-wrap: nowrap;
align-items: center;
.work_card_cont_point {
width: 8rpx;
height: 8rpx;
background: #2E4975;
border-radius: 50%;
}
.work_card_cont_text {
margin-left: 20rpx;
font-size: 24rpx;
font-family:'PingFang','PingFang';
font-weight: 500;
color: #2E4975;
}
.work_card_cont_tag {
margin-left: 30rpx;
padding: 8rpx 18rpx;
background: #FFF2E4;
border-radius: 20rpx 20rpx 20rpx 20rpx;
font-size: 20rpx;
font-family:'PingFang','PingFang';
font-weight: 500;
color: #F18F21;
}
}
}
.work_card_info_box {
display: flex;
flex-wrap: wrap;
margin-top: 22rpx;
.work_card_info_top {
display: flex;
flex-wrap: nowrap;
align-items: center;
width: 100%;
font-size: 20rpx;
font-family:'PingFang','PingFang';
font-weight: 500;
color: rgba(46, 73, 117, 0.6);
.work_card_info_topimg {
margin-right: 8rpx;
width: 18.74rpx;
height: 20rpx;
}
}
.work_card_info_bot {
margin-top: 4rpx;
font-size: 24rpx;
font-family:'PingFang','PingFang';
font-weight: 500;
color: #2E4975;
}
}
}
.act1 {
border-left: 8rpx solid #2D7CE6;
}
}
}</style>
Reference in New Issue Copy Permalink