<template>
|
<div>
|
<div class="evaluateTable-header">
|
<el-row>
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="18">
|
<el-row style="width: 100%;">
|
<el-col style="color: transparent;cursor: default;" :xs="11" :sm="11" :md="11" :lg="11"
|
:xl="11">
|
占位字
|
</el-col>
|
<el-col :offset="1" :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
<el-row style="width: 100%;">
|
<el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
|
<div class="evaluateTable-header-text">良好</div>
|
</el-col>
|
<el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
|
<div class="evaluateTable-header-text">正确</div>
|
</el-col>
|
<el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
|
<div class="evaluateTable-header-text">失误</div>
|
</el-col>
|
</el-row>
|
</el-col>
|
</el-row>
|
</el-col>
|
<el-col style="color: transparent;cursor: default;" :xs="24" :sm="24" :md="24" :lg="24" :xl="6">
|
占位字
|
</el-col>
|
</el-row>
|
</div>
|
<div class="evaluateTable-body">
|
<el-row>
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="18">
|
<div class="evaluateTable-body-left">
|
<div v-for="(item, index) in list" :key="index" class="evaluateTable-body-left-item">
|
<el-row style="width: 100%;">
|
<el-col :xs="11" :sm="11" :md="11" :lg="11" :xl="11">
|
<div class="evaluateTable-body-left-item-text">
|
{{ item }}
|
</div>
|
</el-col>
|
<el-col :offset="1" :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
|
<div class="evaluateTable-body-left-item-score">
|
<el-row v-if="index != 5" style="width: 100%;">
|
<el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
|
<div class="evaluateTable-body-left-item-score-num"
|
:class="yesOrNoActive(sort(2, index)) && 'activeScore'">
|
<img v-if="yesOrNoActive(sort(2, index))"
|
src="@/assets/public/active.png" />
|
<img v-else @click="selectNum(index, 2, sort(2, index))"
|
src="@/assets/public/noActive.png" />
|
<div>2分</div>
|
</div>
|
</el-col>
|
<el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
|
<div class="evaluateTable-body-left-item-score-num"
|
:class="yesOrNoActive(sort(1, index)) && 'activeScore'">
|
<img v-if="yesOrNoActive(sort(1, index))"
|
src="@/assets/public/active.png" />
|
<img v-else @click="selectNum(index, 1, sort(1, index))"
|
src="@/assets/public/noActive.png" />
|
<div>1分</div>
|
</div>
|
</el-col>
|
<el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
|
<div class="evaluateTable-body-left-item-score-num"
|
:class="yesOrNoActive(sort(0, index)) && 'activeScore'">
|
<img v-if="yesOrNoActive(sort(0, index))"
|
src="@/assets/public/active.png" />
|
<img v-else @click="selectNum(index, 0, sort(0, index))"
|
src="@/assets/public/noActive.png" />
|
<div>0分</div>
|
</div>
|
</el-col>
|
</el-row>
|
<el-row v-else style="width: 100%;">
|
<el-col :xs="16" :sm="16" :md="16" :lg="16" :xl="16">
|
<div class="evaluateTable-body-left-item-score-num"
|
:class="yesOrNoActive(sort(2, index)) && 'activeScore'">
|
<img v-if="yesOrNoActive(sort(2, index))"
|
src="@/assets/public/active.png" />
|
<img v-else @click="selectNum(index, -3, sort(2, index))"
|
src="@/assets/public/noActive.png" />
|
<div>是（-3分）</div>
|
</div>
|
</el-col>
|
<el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
|
<div class="evaluateTable-body-left-item-score-num"
|
:class="yesOrNoActive(sort(1, index)) && 'activeScore'">
|
<img v-if="yesOrNoActive(sort(1, index))"
|
src="@/assets/public/active.png" />
|
<img v-else @click="selectNum(index, 0, sort(1, index))"
|
src="@/assets/public/noActive.png" />
|
<div>否（0分）</div>
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
</div>
|
</el-col>
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="6">
|
<div class="evaluateTable-body-right">
|
<div class="evaluateTable-body-right-title">总分</div>
|
<div class="evaluateTable-body-right-num">
|
<div>{{ total != null ? total : '[自动计算]' }}</div>
|
</div>
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import store from "../../store";
|
export default {
|
props: {
|
type: {
|
type: Number,
|
default: 1 //1 化验师 2 实验员 3 工艺工程师
|
},
|
isReadonly: {
|
type: Boolean,
|
default: false // 是否只读
|
},
|
viewJson: {
|
type: String,
|
default: '' //回显
|
}
|
},
|
computed: {
|
list() {
|
if (this.type == 1) return store.state.assay
|
if (this.type == 2) return store.state.experiment
|
if (this.type == 3) return store.state.craft
|
return store.state.assay
|
},
|
},
|
watch: {
|
activeIndex: {
|
handler(newVal, oldVal) {
|
this.total = null
|
this.activeIndex.map(item => {
|
this.total += item.score
|
})
|
},
|
deep: true
|
},
|
viewJson: {
|
handler(newVal, oldVal) {
|
if (newVal) {
|
try {
|
const parsedData = JSON.parse(newVal)
|
this.activeIndex = parsedData
|
} catch (e) {
|
}
|
}
|
},
|
immediate: true
|
}
|
},
|
data() {
|
return {
|
total: null,
|
activeIndex: [
|
{
|
num: null,
|
score: 0
|
},
|
{
|
num: null,
|
score: 0
|
},
|
{
|
num: null,
|
score: 0
|
},
|
{
|
num: null,
|
score: 0
|
},
|
{
|
num: null,
|
score: 0
|
},
|
{
|
num: null,
|
score: 0
|
},
|
]
|
}
|
},
|
methods: {
|
selectNum(index, score, num) {
|
if (this.isReadonly) return
|
this.activeIndex[index].score = score
|
this.activeIndex[index].num = num
|
},
|
yesOrNoActive(num) {
|
let arr = this.activeIndex.filter(item => item.num == num)
|
return arr.length
|
},
|
sort(num, index) {
|
return (index + 1) * 3 - num
|
},
|
resetData() {
|
this.total = null
|
this.activeIndex = this.activeIndex.map(() => ({
|
num: null,
|
score: 0
|
}))
|
}
|
},
|
beforeDestroy() {
|
this.resetData()
|
}
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.evaluateTable-header {
|
font-weight: 500;
|
font-size: 20px;
|
color: #FFFFFF;
|
height: 70px;
|
background: linear-gradient(270deg, #0ACBCA 0%, #049C9A 100%);
|
box-shadow: 0px 6px 10px 0px rgba(4, 156, 154, 0.09);
|
border-radius: 10px;
|
font-family: 'SourceHanSansCN-Medium';
|
padding: 0 23px 0 17px;
|
|
&-text {
|
line-height: 70px;
|
}
|
}
|
|
.evaluateTable-body {
|
background: #FFFFFF;
|
box-shadow: 0px 6px 10px 0px rgba(4, 156, 154, 0.09);
|
border-radius: 10px;
|
margin-top: -10px;
|
padding: 0 23px 27px 17px;
|
height: 100%;
|
|
&-left {
|
margin-top: 21px;
|
|
&-item {
|
background: #D7EFF4;
|
box-shadow: 0px 6px 10px 0px rgba(4, 156, 154, 0.09);
|
border-radius: 29px;
|
margin-bottom: 20px;
|
|
&-text {
|
flex-shrink: 0;
|
line-height: 44px;
|
background: radial-gradient(0% 50% at 50% 50%, #0ACBCA 0%, #049C9A 100%);
|
box-shadow: 0px 6px 10px 0px rgba(4, 156, 154, 0.09);
|
border-radius: 29px;
|
text-align: center;
|
font-weight: bold;
|
font-family: 'Source Han Sans CN Bold Bold';
|
font-size: 16px;
|
color: #FFFFFF;
|
letter-spacing: 1px;
|
}
|
|
&-score {
|
line-height: 44px;
|
display: flex;
|
align-items: center;
|
|
.activeScore {
|
color: #049C9A;
|
}
|
|
&-num {
|
display: flex;
|
align-items: center;
|
|
img {
|
width: 16px;
|
height: 16px;
|
margin-right: 13px;
|
cursor: pointer;
|
}
|
|
div {
|
flex-shrink: 0;
|
}
|
}
|
}
|
}
|
|
&-item:last-child {
|
margin-bottom: unset;
|
}
|
}
|
|
.evaluateTable-body-right {
|
margin-top: 21px;
|
background: linear-gradient(to top, #0ACBCA 0%, #049C9A 100%);
|
border-radius: 10px;
|
padding-top: 35px;
|
min-height: 329px;
|
display: flex;
|
align-items: center;
|
flex-direction: column;
|
margin-left: 16px;
|
|
&-title {
|
font-family: 'Source Han Sans CN Normal';
|
font-weight: 400;
|
font-size: 24px;
|
color: #FFFFFF;
|
line-height: 24px;
|
}
|
|
&-num {
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
font-family: 'SourceHanSansCN-Medium';
|
font-weight: 500;
|
font-size: 44px;
|
color: #FFFFFF;
|
}
|
}
|
}
|
</style>
|
