htmlcss
<template>
<view style="position:relative;">
<view style="position:absolute;
width: 100%;
height: 40rpx;
border-bottom-right-radius: 40px;
border-bottom-left-radius: 40px;
background-color: #272b31">
</view>
<view class="a-i">
<view class="a-i-b">
设备号：{
{
tableNo}}
</view>
<!-- 表格数据行 -->
<view class="a-i-c">
<view v-for="(item, index) in eventRuleTypes" :key="index">
<view class="flex">
<span class="event">
{
{
item.typeName}}
</span>
<view class="score2">
{
{
item.score}}
</view>
</view>
</view>
<view class="flex">
<view class="averageScore">
综合得分
</view>
<view class="averageScore2">
{
{
eventScore}}
</view>
</view>
</view>
</view>
<!-- 表格数据行 -->
<view class="a-i-c-1">
<view v-for="(item, index) in itemDetailList" :key="index">
<view class="" v-if="item.isFinished">
<view class="a-i-c-2">
<view class="flex">
<view class="question">
问题
</view>
</view>
<view class="flex">
<span class="event-one">
{
{
item.eventName}}->{
{
item.typeName}}->{
{
item.ruleName}}->{
{
item.falseStr}}
</span>
</view>
<view class="i-split">
</view>
<view class="flex">
<span class="event-one">
正确操作：
</span>
</view>
<span class="event-one">
{
{
item.trueStr}}
</span>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import config from '@/config'
import {
selectDetailRules,
selectDetailRulesList
} from "@/api/ruleDetail";
import {
getToken
} from '@/utils/auth'
export default {
data() {
return {
itemList: {
},
name: this.$store.state.user.name,
eventRuleTypes: [],
ruleTypes: [],
itemDetailList: [],
eventScore: '',
tableNo: ''
}
},
onLoad: function(option) {
this.getList(option.id);
console.log(option.id);
this.eventScore = option.eventScore;
this.tableNo = option.tableNo;
console.log(option.tableNo);
},
methods: {
getList(id) {
selectDetailRules(id).then(response => {
this.itemList = response.data;
this.eventRuleTypes = response.data.eventRuleTypes;
console.log("response.rows:" + response.data);
});
selectDetailRulesList(id).then(response => {
this.itemDetailList = response.data;
});
}
}
}
</script>
<style>
page {
background-color: #191c21;
}
.a-i-c {
position: absolute;
width: 90%;
height: 450rpx;
background-color: #23272c;
align-items: center;
justify-content: center;
margin: 140rpx 40rpx;
}
.a-i-b {
position: absolute;
color: #fff;
padding: 60rpx 80rpx;
}
.a-i-c-1 {
position: absolute;
align-items: center;
justify-content: center;
margin: 600rpx 45rpx;
}
/* 问题背景框 */
.a-i-c-2 {
width: 665rpx;
height: 450rpx;
background-color: #23272c;
align-items: center;
justify-content: center;
margin: 20rpx 0rpx;
}
.flex {
display: flex;
flex-direction: row;
align-items: center;
}
.event {
font-size: 30rpx;
color: #b7bbc2;
padding: 5% 10%;
letter-spacing: 2px
}
.event-one {
font-size: 25rpx;
color: #b7bbc2;
padding: 5% 10%;
letter-spacing: 2px
}
.score {
position: absolute;
width: 150rpx;
height: 50rpx;
background-color: #191c21;
border-radius: 15px;
margin-left: 350rpx;
color: #b7bbc2;
text-align: center;
}
.question {
width: 150rpx;
height: 50rpx;
background-color: #191c21;
border-radius: 15px;
margin-left: 50rpx;
margin-top: 30rpx;
color: #d00000;
text-align: center;
}
.i-split {
position: absolute;
width: 530rpx;
height: 5rpx;
border-radius: 5rpx;
margin: 10rpx 40rpx;
background-color: #191c21;
}
.score1 {
position: absolute;
width: 150rpx;
height: 50rpx;
background-color: #191c21;
border-radius: 15px;
margin-left: 350rpx;
color: #3154da;
text-align: center;
}
.score2 {
position: absolute;
width: 150rpx;
height: 50rpx;
background-color: #191c21;
border-radius: 15px;
margin-left: 450rpx;
color: #dabf3e;
text-align: center;
}
.score3 {
position: absolute;
width: 150rpx;
height: 50rpx;
background-color: #191c21;
border-radius: 15px;
margin-left: 350rpx;
color: #63da3e;
text-align: center;
}
.score4 {
position: absolute;
width: 150rpx;
height: 50rpx;
background-color: #191c21;
border-radius: 15px;
margin-left: 350rpx;
color: #fb4f0c;
text-align: center;
}
.averageScore {
font-size: 35rpx;
color: #b7bbc2;
padding: 5% 10%;
letter-spacing: 2px;
font-weight:bold
}
.averageScore2 {
position: absolute;
width: 150rpx;
height: 50rpx;
background-color: #191c21;
border-radius: 15px;
margin-left: 450rpx;
color: #00df00;
text-align: center;
}
</style>
code js
import request from '@/utils/request'
// 查询列表
export function listRuleDetail(query) {
return request({
url: '/ruleDetail/ruleDetail/list',
method: 'get',
params: query
})
}
// 查询详细
export function getRuleDetail(id) {
return request({
url: '/ruleDetail/ruleDetail/' + id,
method: 'get'
})
}
// 新增
export function addRuleDetail(data) {
return request({
url: '/ruleDetail/ruleDetail',
method: 'post',
data: data
})
}
// 修改
export function updateRuleDetail(data) {
return request({
url: '/ruleDetail/ruleDetail',
method: 'put',
data: data
})
}
// 删除
export function delRuleDetail(id) {
return request({
url: '/ruleDetail/ruleDetail/' + id,
method: 'delete'
})
}
// 查询考核时间详情
export function selectDetailRules(id) {
return request({
url: '/rules/rules/detail/' + id,
method: 'get'
})
}
// 查询考核时间详情(新增)
export function selectDetailRulesList(id) {
return request({
url: '/rules/rules/detailList/' + id,
method: 'get'
})
}