<template>
<div id="DutyHours">
<div id="searchBox">
<n-space>
<n-input
placeholder="泵站名称"
v-model:value="searchValue1"
autosize
style="width: 250px"
/>
<n-input
placeholder="人员姓名"
v-model:value="searchValue2"
autosize
style="width: 250px"
/>
<n-button type="primary" @click="handleClick('row', 'search')"
><template #icon>
<n-icon>
<SearchOutline />
</n-icon> </template
>搜索</n-button
>
<n-button type="primary" @click="handleClick('row', 'refresh')"
><template #icon>
<n-icon>
<Refresh />
</n-icon> </template
>重置</n-button
>
</n-space>
</div>
<div id="cententBox">
<div id="leftBox">
<div id="LeftTop">
<div class="BoxTitle">统计年份</div>
<div class="BoxCentent">
<div class="BigYear">
<div class="BigYearList">
<span class="yearNum">{{ yearData.substring(0, 1) }}</span>
</div>
<div class="BigYearList">
<span class="yearNum">{{ yearData.substring(1, 2) }}</span>
</div>
<div class="BigYearList">
<span class="yearNum">{{ yearData.substring(2, 3) }}</span>
</div>
<div class="BigYearList BigYearList4">
<span class="yearNum">{{ yearData.substring(3, 4) }}</span>
</div>
</div>
<div class="ChangeYear">
<div
class="ChangeYearList"
v-for="(item, index) in allyear"
:key="index"
:class="{ ChangeYearListCheck: isCheck == index }"
@click="yearClick(item, index)"
>
{{ item.year }}
</div>
</div>
</div>
</div>
<div id="LeftBom">
<div class="BoxTitle">个人成绩综合得分排名</div>
<div class="BoxCentent">
<div id="PaiMingTitle">
<span class="PaiMingTitleList1">排名</span>
<span class="PaiMingTitleList2">姓名</span>
<span class="PaiMingTitleList3">分数</span>
</div>
<div id="PaiMingCentent">
<div
class="PaiMingCententList"
v-for="(item, index) in paiMingData"
>
<span class="PaiMingCententList1" v-if="index == 0">
<img :src="PaiMing1Img" alt="" class="PaiMingImg" />
</span>
<span class="PaiMingCententList1" v-else-if="index == 1">
<img :src="PaiMing2Img" alt="" class="PaiMingImg"
/></span>
<span class="PaiMingCententList1" v-else-if="index == 2">
<img :src="PaiMing3Img" alt="" class="PaiMingImg"
/></span>
<span class="PaiMingCententList1" v-else>{{ index + 1 }}</span>
<span class="PaiMingCententList2">{{ item.name }}</span>
<span
class="PaiMingCententList3"
:class="[
item.achievement >= 80 ? 'color80' : '',
item.achievement >= 70 && item.achievement < 80
? 'color70'
: '',
item.achievement >= 60 && item.achievement < 70
? 'color60'
: 'color50',
]"
>{{ item.achievement }}分</span
>
</div>
</div>
</div>
</div>
</div>
<div id="rightBox">
<div class="rightBoxList" v-for="item in DutyHoursData">
<div class="BoxList_top">
<div class="BoxList_top_left">
<img :src="item.icon" alt="" class="BoxList_top_left_icon" />
</div>
<div class="BoxList_top_right">
<p class="BoxList_top_right_list">
<span class="ListTitle">姓名:</span>
<span class="ListValue">{{ item.name }}</span>
</p>
<p class="BoxList_top_right_list">
<span class="ListTitle">入职日期:</span>
<span class="ListValue">{{ item.employmentDate }}</span>
</p>
<p class="BoxList_top_right_list">
<span class="ListTitle">值班时长:</span>
<span class="ListValue">{{ item.dutyDuration }}</span>
</p>
<p class="BoxList_top_right_list">
<span class="ListTitle">部门:</span>
<span class="ListValue">
<n-ellipsis style="max-width: 110px">
{{ item.department }}
</n-ellipsis>
</span>
</p>
<p class="BoxList_top_right_list">
<span class="ListTitle">值班次数:</span>
<span class="ListValue">{{ item.dutyTimes }}</span>
</p>
<p class="BoxList_top_right_list">
<span class="ListTitle">日平均:</span>
<span class="ListValue">{{ item.dailyAverage }}</span>
</p>
</div>
</div>
<div class="BoxList_bom">
综合得分:
<span
:class="[
item.comprehensiveScore >= 80 ? 'color80' : '',
item.comprehensiveScore >= 70 && item.comprehensiveScore < 80
? 'color70'
: '',
item.comprehensiveScore >= 60 && item.comprehensiveScore < 70
? 'color60'
: 'color50',
]"
>{{ item.comprehensiveScore }}</span
>
分
</div>
</div>
</div>
</div>
</div>
<div id="DutyHoursFoot">
<n-pagination
v-model:page="page"
:page-count="AllPage"
@update:page="paginationChange"
style="float: right; padding-right: 50px"
/>
</div>
</template>
<script>
import { ref, reactive, toRefs, onMounted } from "vue";
import { SearchOutline, Refresh } from "@vicons/ionicons5";
import PaiMing1Img from "@/assets/Imgs/renYuanZhiBan1.png";
import PaiMing2Img from "@/assets/Imgs/renYuanZhiBan2.png";
import PaiMing3Img from "@/assets/Imgs/renYuanZhiBan3.png";
export default {
name: "DutyHours",
components: { SearchOutline, Refresh },
setup() {
//搜索相关
const searchValue = reactive({
searchValue1: null,
searchValue2: null,
});
const handleClick = (row, type) => {
switch (type) {
case "search":
console.log(`确定`);
getTableData();
break;
case "refresh":
console.log(`重置`);
break;
}
};
// 选择年份相关
const yearData = reactive({
yearData: "2022", //选中的年份
allyear: [
{
year: "2019",
isCheck: false,
},
{
year: "2020",
isCheck: false,
},
{
year: "2021",
isCheck: false,
},
{
year: "2022",
isCheck: true,
},
{
year: "2023",
isCheck: false,
},
], //所有的年份
isCheck: 3, //选中的年份
});
// 点击年份
function yearClick(item, index) {
yearData.isCheck = index;
yearData.yearData = item.year;
}
// 分页
let page = ref(1);
function paginationChange() {
console.log(`分页发生了改变,当前值为 ${page.value}`);
}
// 排名数据
let paiMingData = [
{
name: "胡鹏飞",
achievement: "88",
},
{
name: "胡鹏飞",
achievement: "77",
},
{
name: "胡鹏飞",
achievement: "66",
},
{
name: "胡鹏飞",
achievement: "55",
},
{
name: "胡鹏飞",
achievement: "44",
},
{
name: "胡鹏飞",
achievement: "33",
},
{
name: "胡鹏飞",
achievement: "22",
},
{
name: "胡鹏飞",
achievement: "11",
},
];
// 值班人员详情数据
let DutyHoursData = reactive([]);
//获取值班人员详情数据
async function getTableData() {
DutyHoursData.length = 0;
const res = reactive(
{"code":200,"message":"获取人员管理-人员值班时长统计结果成功","data":{"Totle":10,"data":[{"name":"董敏","employmentDate":"1990-01-29","dutyDuration":52,"department":"泵站运营中心","dutyTimes":8,"dailyAverage":5,"comprehensiveScore":97,"icon":"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2F2021%2Fedpic_360_360%2F80%2F58%2F51%2F8058519bba4d6d6041e176d1149615cc_1.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1644998609&t=78a8e2795e0a1b95c005d849281d996e"},{"name":"邹磊","employmentDate":"1995-12-04","dutyDuration":98,"department":"泵站运营中心","dutyTimes":7,"dailyAverage":9,"comprehensiveScore":94,"icon":"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2F2021%2Fedpic_360_360%2F80%2F58%2F51%2F8058519bba4d6d6041e176d1149615cc_1.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1644998609&t=78a8e2795e0a1b95c005d849281d996e"},{"name":"苏秀英","employmentDate":"2020-05-09","dutyDuration":81,"department":"泵站运营中心","dutyTimes":5,"dailyAverage":6,"comprehensiveScore":93,"icon":"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2F2021%2Fedpic_360_360%2F80%2F58%2F51%2F8058519bba4d6d6041e176d1149615cc_1.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1644998609&t=78a8e2795e0a1b95c005d849281d996e"},{"name":"黎敏","employmentDate":"1990-01-19","dutyDuration":55,"department":"泵站运营中心","dutyTimes":9,"dailyAverage":8,"comprehensiveScore":89,"icon":"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2F2021%2Fedpic_360_360%2F80%2F58%2F51%2F8058519bba4d6d6041e176d1149615cc_1.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1644998609&t=78a8e2795e0a1b95c005d849281d996e"},{"name":"史勇","employmentDate":"2004-10-10","dutyDuration":50,"department":"泵站运营中心","dutyTimes":9,"dailyAverage":7,"comprehensiveScore":81,"icon":"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2F2021%2Fedpic_360_360%2F80%2F58%2F51%2F8058519bba4d6d6041e176d1149615cc_1.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1644998609&t=78a8e2795e0a1b95c005d849281d996e"},{"name":"石霞","employmentDate":"1971-08-09","dutyDuration":64,"department":"泵站运营中心","dutyTimes":5,"dailyAverage":5,"comprehensiveScore":73,"icon":"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2F2021%2Fedpic_360_360%2F80%2F58%2F51%2F8058519bba4d6d6041e176d1149615cc_1.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1644998609&t=78a8e2795e0a1b95c005d849281d996e"},{"name":"罗芳","employmentDate":"1986-06-14","dutyDuration":58,"department":"泵站运营中心","dutyTimes":10,"dailyAverage":5,"comprehensiveScore":93,"icon":"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2F2021%2Fedpic_360_360%2F80%2F58%2F51%2F8058519bba4d6d6041e176d1149615cc_1.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1644998609&t=78a8e2795e0a1b95c005d849281d996e"},{"name":"卢秀兰","employmentDate":"1986-10-02","dutyDuration":40,"department":"泵站运营中心","dutyTimes":6,"dailyAverage":6,"comprehensiveScore":93,"icon":"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2F2021%2Fedpic_360_360%2F80%2F58%2F51%2F8058519bba4d6d6041e176d1149615cc_1.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1644998609&t=78a8e2795e0a1b95c005d849281d996e"},{"name":"程明","employmentDate":"2012-03-16","dutyDuration":80,"department":"泵站运营中心","dutyTimes":6,"dailyAverage":5,"comprehensiveScore":72,"icon":"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2F2021%2Fedpic_360_360%2F80%2F58%2F51%2F8058519bba4d6d6041e176d1149615cc_1.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1644998609&t=78a8e2795e0a1b95c005d849281d996e"},{"name":"熊静","employmentDate":"1982-05-15","dutyDuration":59,"department":"泵站运营中心","dutyTimes":8,"dailyAverage":8,"comprehensiveScore":96,"icon":"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2F2021%2Fedpic_360_360%2F80%2F58%2F51%2F8058519bba4d6d6041e176d1149615cc_1.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1644998609&t=78a8e2795e0a1b95c005d849281d996e"},{"name":"熊杰","employmentDate":"1992-12-10","dutyDuration":79,"department":"泵站运营中心","dutyTimes":8,"dailyAverage":7,"comprehensiveScore":89,"icon":"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2F2021%2Fedpic_360_360%2F80%2F58%2F51%2F8058519bba4d6d6041e176d1149615cc_1.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1644998609&t=78a8e2795e0a1b95c005d849281d996e"},{"name":"何秀兰","employmentDate":"2011-01-31","dutyDuration":64,"department":"泵站运营中心","dutyTimes":8,"dailyAverage":6,"comprehensiveScore":96,"icon":"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2F2021%2Fedpic_360_360%2F80%2F58%2F51%2F8058519bba4d6d6041e176d1149615cc_1.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1644998609&t=78a8e2795e0a1b95c005d849281d996e"}]}}
)
if (res.code == 200) {
DutyHoursData.push(...res.data.data);
}
}
onMounted(() => {
getTableData();
});
return {
...toRefs(searchValue),
...toRefs(yearData),
handleClick,
yearClick,
page,
AllPage: ref(10),
paiMingData,
paginationChange,
PaiMing1Img,
PaiMing2Img,
PaiMing3Img,
DutyHoursData,
getTableData,
};
},
computed: {},
methods: {},
};
</script>
<style lang="less" scoped>
#DutyHours {
width: 100%;
height: calc(100% - 40px);
margin-bottom: 10px;
}
#DutyHoursFoot {
width: 100%;
height: 30px;
}
#searchBox {
width: 100%;
height: 40px;
margin-bottom: 20px;
}
#cententBox {
width: 100%;
height: calc(100% - 60px);
box-sizing: border-box;
padding: 10px;
#leftBox {
width: 370px;
height: 100%;
box-sizing: border-box;
float: left;
// box-shadow: 0px 0px 20px #79bac594;
#LeftTop {
width: 100%;
height: 300px;
margin-bottom: 10px;
box-sizing: border-box;
box-shadow: 0px 0px 20px #79bac594;
}
#LeftBom {
width: 100%;
height: calc(100% - 310px);
box-sizing: border-box;
box-shadow: 0px 0px 20px #79bac594;
}
}
#rightBox {
width: calc(100% - 390px);
height: 100%;
margin-left: 20px;
box-sizing: border-box;
box-shadow: 0px 0px 20px #79bac594;
float: left;
// display: flex;
// flex-wrap: wrap;
// justify-content: space-around;
overflow: auto;
.rightBoxList {
width: calc(25% - 20px);
height: calc(33.33% - 20px);
border: 1px solid #145cf78e;
float: left;
margin: 10px 10px;
box-shadow: 0px 8px 28px 1px rgba(82, 125, 218, 0.67);
.BoxList_top {
width: 100%;
height: calc(100% - 35px);
box-sizing: border-box;
.BoxList_top_left {
width: 90px;
height: 100%;
float: left;
.BoxList_top_left_icon {
width: 70px;
height: 70px;
border-radius: 50%;
margin: 30px 0 0 10px;
}
}
.BoxList_top_right {
width: calc(100% - 90px);
height: 100%;
float: left;
box-sizing: border-box;
padding-top: 15px;
.BoxList_top_right_list {
width: 100%;
height: 20px;
display: inline-block;
.ListTitle {
width: 74px;
height: 20px;
line-height: 20px;
font-size: 14px;
font-family: Alibaba PuHuiTi;
font-weight: 400;
float: left;
}
.ListValue {
width: calc(100% - 74px);
float: left;
}
}
}
}
.BoxList_bom {
width: 100%;
height: 35px;
border-top: 1px solid #748ec8;
box-sizing: border-box;
line-height: 35px;
text-align: center;
}
}
}
.BoxTitle {
width: 100%;
height: 50px;
line-height: 40px;
font-size: 16px;
font-family: Source Han Sans CN;
font-weight: bold;
color: #145bf7;
box-sizing: border-box;
padding-left: 20px;
padding-top: 10px;
}
.BoxCentent {
width: 100%;
height: calc(100% - 50px);
.BigYear {
width: 100%;
height: 120px;
display: flex;
justify-content: space-around;
box-sizing: border-box;
padding-top: 20px;
box-sizing: border-box;
padding: 20px 10px;
.BigYearList {
width: 75px;
height: 75px;
line-height: 75px;
background: #46b3d3;
border-radius: 10px;
position: relative;
}
.BigYearList4 {
position: relative;
}
.BigYearList4::after {
content: "";
width: 75px;
position: absolute;
left: -5px;
top: 37.5px;
border-width: 0 5px 32px 5px;
border-style: none solid solid;
border-color: transparent transparent #27a7cd;
border-radius: 5px;
z-index: 1;
}
.yearNum {
position: absolute;
left: 0;
top: 0;
width: 75px;
height: 75px;
line-height: 75px;
font-size: 48px;
font-family: Arial;
font-weight: bold;
color: #f2f7f8;
text-align: center;
z-index: 2;
}
}
.ChangeYear {
display: flex;
justify-content: space-around;
width: 100%;
height: calc(100% - 120px);
box-sizing: border-box;
padding-top: 30px;
.ChangeYearList {
width: 48px;
height: 48px;
background: #46b3d3;
border-radius: 50%;
font-size: 12px;
font-family: Arial;
font-weight: bold;
color: #f2f7f8;
text-align: center;
line-height: 48px;
cursor: pointer;
position: relative;
}
.ChangeYearListCheck {
width: 70px;
height: 70px;
line-height: 70px;
font-size: 15px;
font-family: Arial;
font-weight: bold;
color: #f2f7f8;
margin-top: -11px;
background: linear-gradient(269deg, #46b3d3 0%, #a58fe8 100%);
}
.ChangeYearList::after {
position: absolute;
content: "";
top: 50%;
color: var(--color-Invert);
left: -10px;
width: 8px;
font-size: 12px;
border-bottom: 1px dashed;
}
.ChangeYearList::before {
position: absolute;
content: "";
top: 50%;
color: var(--color-Invert);
right: -10px;
width: 8px;
font-size: 12px;
border-bottom: 1px dashed;
}
.ChangeYearList:hover {
animation: move 0.5s linear infinite;
animation-iteration-count: 1;
}
@keyframes move {
0% {
box-shadow: 0px 0px 30px aqua;
}
100% {
box-shadow: 0px 0px 0px aqua;
}
}
}
#PaiMingTitle {
width: 100%;
height: 40px;
list-style: 40px;
box-sizing: border-box;
padding: 10px 20px;
.PaiMingTitleList1 {
float: left;
width: 20%;
font-size: 18px;
font-family: Alibaba PuHuiTi;
font-weight: 400;
text-align: center;
}
.PaiMingTitleList2 {
float: left;
width: 60%;
font-size: 18px;
font-family: Alibaba PuHuiTi;
font-weight: 400;
text-align: left;
box-sizing: border-box;
padding-left: 30px;
}
.PaiMingTitleList3 {
float: left;
width: 20%;
font-size: 18px;
font-family: Alibaba PuHuiTi;
font-weight: 400;
}
}
#PaiMingCentent {
width: 100%;
height: calc(100% - 40px);
box-sizing: border-box;
padding: 2px 20px;
overflow: auto;
.PaiMingCententList {
width: 100%;
height: 39px;
line-height: 39px;
.PaiMingCententList1 {
float: left;
width: 20%;
font-size: 18px;
font-family: Alibaba PuHuiTi;
font-weight: 400;
text-align: center;
height: 39px;
line-height: 39px;
.PaiMingImg {
width: 35px;
height: 30px;
}
}
.PaiMingCententList2 {
float: left;
width: 60%;
font-size: 18px;
font-family: Alibaba PuHuiTi;
font-weight: 400;
text-align: left;
box-sizing: border-box;
padding-left: 20px;
height: 39px;
line-height: 39px;
}
.PaiMingCententList3 {
float: left;
width: 20%;
font-size: 18px;
font-family: Alibaba PuHuiTi;
font-weight: 400;
height: 39px;
line-height: 39px;
}
}
}
}
.color50 {
color: rgb(128, 128, 128);
}
.color60 {
color: #e39924;
}
.color70 {
color: #26c84f;
}
.color80 {
color: #ed2880;
}
}
</style>
