examTeamApp/pages/score/report.vue

166 lines
3.3 KiB
Vue

<template>
<view class="content">
<!-- 估分 -->
<view class="box">
<view class="title bold">本次估分成绩为</view>
<view class="charts">
<qiun-data-charts type="arcbar" :opts="opts" :chartData="chartData" />
</view>
<view class="time text_c">2024年5月10日14:01:38</view>
</view>
<!-- -->
<view class="indexCarList">
<view v-for="(ite,ind) in selectllist">
<!-- 大标签 -->
<view class="card box">
<view class="title border-bottom" @click="handleHistory(ite.key)">
<view class="name"><text>{{ite.name}}</text></view>
<view>小计得分:<text class="cblue">85</text></view>
</view>
<!-- 身体数据 -->
<view class="item title" v-if="ite.name=='身体数据'">
<view>
<text>身高</text>
<view class="weight"><text>176</text>cm</view>
<view class="standardBtn">标准</view>
</view>
<view>
<text>体重</text>
<view class="weight"><text>76</text>kg</view>
<view class="standardBtn">标准</view>
</view>
<view>
<text>BMI</text>
<view class="weight"><text>26</text></view>
<view class="standardBtn">标准</view>
</view>
</view>
<!-- 其他数据 -->
<view class="item title" style="justifyContent:center" v-else>
<view class="item2">
<text class="name">本次数据</text>
<view class="weight"><text>{{ite.cnt?ite.cnt:'-'}}</text>{{ite.unit}}</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import qiunDataCharts from '@/uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue';
export default {
data() {
return {
opts: {
title: {
name: "75",
fontSize: 35,
color: "#4687F9"
},
},
chartData: {
series: [{
name: "正确率",
color: "#4687F9",
data: 0.75
}]
},
rtype: "",
}
},
components: {
qiunDataCharts
},
onLoad() {
this.selectllist = this.$json.selectllist
},
methods: {
// 手动添加
handlerRecord(name) {
this.rtype = name
this.$store.commit('changeRecord', true)
},
// 选择数据
handleHistory(key) {
console.log("1111", key)
uni.navigateTo({
url: "/pages/history/history?type=edit&key=" + key
})
},
navTo(url) {
uni.navigateTo({
url: url
})
},
}
}
</script>
<style scoped lang="scss">
.content {
min-height: 100vh;
padding-bottom: 15px;
background-color: #f7f7f7;
}
.box {
margin: 0 10px 0;
padding: 15px 10px 10px;
background-color: #fff;
width: calc(100% - 40px);
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
border-radius: 10px;
position: relative;
}
.btn {
width: auto;
color: #fff;
padding: 2px 10px;
border-radius: 10px;
margin: 0 auto;
background: $maincolor;
}
.zhan {
position: absolute;
right: 10px;
top: 10px;
color: #fff;
padding: 10px;
border-radius: 10px;
background: $maincolor;
}
.item {
padding-bottom: 0 !important;
position: relative;
.iconfont {
position: absolute;
bottom: 15px;
right: 15px;
font-size: 22px;
color: $btncolor;
}
}
.charts {
width: 100%;
height: 150px;
margin: 15px 0;
}
.gfbtn {
width: calc(100% - 40px);
margin-top: 20px;
margin-bottom: 20px;
}
</style>