<template>
|
<div v-if="Object.keys(detailData).length">
|
<div class="top-box-header">
|
<div class="top-box-header-title">
|
<div>项目组总积分表</div>
|
<div class="top-box-header-time">
|
<div>评定开始时间：{{ detailData.startTime }}</div>
|
<div>评定结束始时间：{{ detailData.endTime }}</div>
|
</div>
|
</div>
|
<div class="top-box-integral">
|
<div :style="{ backgroundColor: ['rgba(232, 250, 246, 1)', 'rgba(254, 237, 220, 1)', 'rgba(239, 248, 255, 1)', 'rgba(255, 237, 238, 1)'][item - 1] }"
|
v-for="item in 4" :key="item" class="top-box-integral-card">
|
<div class="top-box-integral-card-title">{{ ['项目组总积分', '菌种工程师积分', '菌种实验员积分', '菌种实验失败次数'][item -
|
1] }}</div>
|
<div :style="{ color: ['rgba(4, 156, 154, 1)', 'rgba(255, 147, 0, 1)', 'rgba(23, 119, 213, 1)', 'rgba(255, 73, 85, 1)'][item - 1] }"
|
class="top-box-integral-card-num">{{
|
detailData[['teamIntegral', 'engineerIntegral', 'experimenterIntegral', 'failCount'][item - 1]]
|
}}
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="integral-content">
|
<div class="integral-content-box">
|
<div class="integral-content-box-left">
|
<div @click="changeActiveItem(item)" class="integral-content-box-left-item"
|
:class="actionsLeftTab == item && 'activeItem'" v-for="item in 2" :key="item">
|
<div>{{ ['菌种工程师', '菌种实验员'][item - 1] }}</div>
|
</div>
|
</div>
|
<div class="integral-content-box-right">
|
<div v-show="actionsLeftTab != 1" @wheel.prevent="handleWheel"
|
class="integral-content-box-right-nameTab">
|
<div @click="changeActiveName(item.userName)"
|
:class="activeNameTab == item.userName && 'activeName'"
|
class="integral-content-box-right-nameTab-name"
|
v-for="{ item, index } in detailData.detailExperimentVOS" :key="index">{{ item.userName }}
|
</div>
|
</div>
|
<div class="integral-content-box-right-thead">
|
<div>评定项</div>
|
<div>评定情况</div>
|
<div>开始时间</div>
|
<div>结束时间</div>
|
</div>
|
<div class="integral-content-box-right-body">
|
<div v-for="(item, index) in itemList" :key="index"
|
class="integral-content-box-right-body-item">
|
<div>{{ item.gainer }}</div>
|
<div>
|
<div>{{ item.situationOne }}{{
|
actionsLeftTab === 2 ?
|
(selectedExperimenter || {})[item.keys[0]] :
|
detailData[item.keys[0]]
|
}}</div>
|
<div>{{ item.situationTwo }}{{
|
actionsLeftTab === 2 ?
|
(selectedExperimenter || {})[item.keys[1]] :
|
detailData[item.keys[1]]
|
}}</div>
|
</div>
|
<div>{{
|
actionsLeftTab === 2 ?
|
(selectedExperimenter || {})[item.keys[2]] :
|
detailData[item.keys[2]]
|
}}</div>
|
<div>{{
|
actionsLeftTab === 2 ?
|
(selectedExperimenter || {})[item.keys[3]] :
|
detailData[item.keys[3]]
|
}}</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { getDetailData } from './service'
|
export default {
|
data() {
|
return {
|
actionsLeftTab: 1,
|
activeNameTab: '',
|
craftList: [
|
{
|
gainer: '1、创新型课题',
|
situationOne: '课题数：',
|
situationTwo: '积分数：',
|
keys: ['innovateCount', 'innovateIntegral', 'innovateStartTime', 'innovateEndTime']
|
},
|
{
|
gainer: '2、规程型课题',
|
situationOne: '课题数：',
|
situationTwo: '积分数：',
|
keys: ['regulationCount', 'regulationIntegral', 'regulationStartTime', 'regulationEndTime']
|
},
|
{
|
gainer: '3、实验操作评定',
|
situationOne: '考核数：',
|
situationTwo: '积分数：',
|
keys: ['handleCount', 'handleIntegral', 'handleStartTime', 'handleEndTime']
|
},
|
],//菌种工程师
|
assayList: [
|
{
|
gainer: '1、实验操作评定',
|
situationOne: '考核数：',
|
situationTwo: '积分数：',
|
keys: ['handleCount', 'handleIntegral', 'handleStartTime', 'handleEndTime']
|
},
|
],//菌种实验员
|
detailData: {},
|
selectedExperimenter: null
|
}
|
},
|
computed: {
|
itemList() {
|
switch (this.actionsLeftTab) {
|
case 1:
|
return this.craftList
|
case 2:
|
return this.assayList
|
default:
|
return this.craftList
|
}
|
}
|
},
|
created() {
|
getDetailData(this.$route.query.id).then(res => {
|
this.detailData = res;
|
// 确保detailExperimentVOS存在且是数组
|
this.detailData.detailExperimentVOS = this.detailData.detailExperimentVOS || [];
|
if (this.detailData.detailExperimentVOS.length) {
|
this.selectedExperimenter = this.detailData.detailExperimentVOS[0];
|
this.activeNameTab = this.selectedExperimenter.userName;
|
} else {
|
// 设置空对象保护
|
this.selectedExperimenter = {};
|
this.activeNameTab = '';
|
}
|
})
|
},
|
methods: {
|
changeActiveItem(item) {
|
this.actionsLeftTab = item
|
},
|
changeActiveName(userName) {
|
this.activeNameTab = userName;
|
this.selectedExperimenter = this.detailData.detailExperimentVOS.find(
|
item => item.userName === userName
|
);
|
},
|
handleWheel(e) {
|
if (this.scrollTimer) {
|
this.scrollAmount += e.deltaY;
|
return;
|
}
|
|
const container = e.currentTarget;
|
this.scrollAmount = e.deltaY;
|
|
const scroll = () => {
|
container.scrollLeft += this.scrollAmount * 1.2; // 增加滚动速度
|
this.scrollAmount = 0;
|
this.scrollTimer = null;
|
};
|
|
this.scrollTimer = setTimeout(scroll, 8); // 减少延迟时间
|
}
|
}
|
}
|
</script>
|
|
<style scope lang="less">
|
.top-box-header {
|
&-title {
|
color: #FFFFFF;
|
padding: 0 20px;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
flex-wrap: wrap;
|
min-height: 58px;
|
padding-bottom: 12px;
|
font-size: 20px;
|
background: linear-gradient(180deg, #05A0C1 0%, #05F2C2 100%);
|
border-radius: 16px 16px 0px 0px;
|
font-family: 'Source Han Sans CN Bold Bold';
|
}
|
|
&-time {
|
display: flex;
|
align-items: center;
|
flex-wrap: wrap;
|
font-family: 'SourceHanSansCN-Medium';
|
font-size: 16px;
|
|
div:first-child {
|
margin-right: 57px;
|
}
|
}
|
|
.top-box-integral {
|
padding: 42px 30px 38px 30px;
|
margin-top: -12px;
|
background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0.2) 100%);
|
box-shadow: 0px 10px 19px 0px rgba(0, 0, 0, 0.06);
|
border-radius: 16px;
|
border: 4px solid #FFFFFF;
|
display: flex;
|
justify-content: space-between;
|
flex-wrap: wrap;
|
gap: 28px;
|
|
&-card {
|
flex: 1;
|
background: #E8FAF6;
|
box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.06);
|
border-radius: 10px;
|
padding: 21px 20px;
|
|
&-title {
|
font-family: 'SourceHanSansCN-Medium';
|
font-size: 14px;
|
color: rgba(0, 0, 0, 0.8);
|
}
|
|
&-num {
|
font-family: 'SF Compact Display Black';
|
text-align: center;
|
font-weight: 900;
|
font-size: 50px;
|
color: #049C9A;
|
line-height: 60px;
|
}
|
}
|
}
|
}
|
|
.integral-content {
|
margin-top: 20px;
|
padding: 30px 30px 95px 30px;
|
background: rgba(255, 255, 255, 0.8);
|
box-shadow: 0px 10px 19px 0px rgba(0, 0, 0, 0.06);
|
border-radius: 16px;
|
border: 4px solid #FFFFFF;
|
|
&-box {
|
display: flex;
|
|
&-left {
|
display: flex;
|
flex-direction: column;
|
gap: 10px;
|
margin-right: 30px;
|
margin-top: 50px;
|
|
.activeItem {
|
background: linear-gradient(180deg, rgba(5, 160, 193, 0.4) 0%, rgba(5, 242, 194, 0) 100%);
|
border-image: linear-gradient(180deg, rgba(10, 203, 202, 1), rgba(4, 156, 154, 0.2)) 1 1;
|
clip-path: inset(0 round 10px);
|
filter: hue-rotate(360deg);
|
}
|
|
&-item {
|
cursor: pointer;
|
width: 160px;
|
height: 170px;
|
font-family: 'Source Han Sans CN Bold Bold';
|
font-weight: bold;
|
font-size: 20px;
|
color: #049C9A;
|
display: flex;
|
text-align: center;
|
flex-direction: column;
|
justify-content: center;
|
line-height: 30px;
|
background: #EFF8FA;
|
border-radius: 10px;
|
border: 1px solid;
|
clip-path: inset(0px round 10px);
|
filter: hue-rotate(360deg);
|
border-image: linear-gradient(180deg, rgba(220, 223, 230, 1), rgba(220, 223, 230, 1)) 1 1;
|
|
&:hover {
|
background: linear-gradient(180deg, rgba(5, 160, 193, 0.4) 0%, rgba(5, 242, 194, 0) 100%);
|
border-image: linear-gradient(180deg, rgba(10, 203, 202, 1), rgba(4, 156, 154, 0.2)) 1 1;
|
clip-path: inset(0 round 10px);
|
filter: hue-rotate(360deg);
|
}
|
}
|
}
|
|
&-right {
|
flex: 1;
|
min-width: 0;
|
overflow: hidden;
|
|
&-nameTab {
|
flex: 1;
|
min-width: 0;
|
display: flex;
|
overflow-x: auto;
|
gap: 10px;
|
scroll-behavior: auto; // 移除平滑滚动，提高性能
|
-webkit-overflow-scrolling: touch;
|
|
&-name {
|
cursor: pointer;
|
text-align: center;
|
font-weight: 400;
|
font-size: 18px;
|
color: #606266;
|
background: #FAFAFC;
|
border-radius: 8px 8px 0px 0px;
|
border: 1px solid #DCDFE6;
|
line-height: 50px;
|
min-width: 94px;
|
margin-bottom: 10px;
|
}
|
|
.activeName {
|
border: 1px solid #049C9A;
|
background: #FFFFFF;
|
font-weight: bold;
|
font-size: 18px;
|
color: #049C9A;
|
}
|
}
|
|
&-thead {
|
display: flex;
|
flex-wrap: wrap;
|
|
div {
|
font-family: 'SourceHanSansCN-Medium';
|
font-weight: 500;
|
font-size: 20px;
|
color: #FFFFFF;
|
text-align: center;
|
line-height: 40px;
|
flex: 1;
|
background: linear-gradient(270deg, #0ACBCA 0%, #049C9A 100%);
|
box-shadow: 0px 6px 10px 0px rgba(4, 156, 154, 0.09);
|
border-radius: 10px;
|
}
|
}
|
|
&-body {
|
margin-top: 10px;
|
display: flex;
|
flex-direction: column;
|
gap: 10px;
|
|
&-item {
|
display: flex;
|
flex-wrap: wrap;
|
|
&>div {
|
padding-left: 23px;
|
font-family: 'SourceHanSansCN-Medium';
|
flex: 1;
|
font-weight: 500;
|
font-size: 16px;
|
color: #606266;
|
display: flex;
|
align-items: center;
|
min-height: 50px;
|
background: #D7EFF4;
|
box-shadow: 0px 6px 10px 0px rgba(4, 156, 154, 0.09);
|
border-radius: 10px;
|
|
&:nth-child(2) {
|
display: flex;
|
align-items: center;
|
flex-wrap: wrap;
|
justify-content: space-between;
|
|
& div:last-child {
|
flex-shrink: 0;
|
margin-right: 84px;
|
}
|
}
|
}
|
|
}
|
}
|
}
|
}
|
}
|
</style>
|
