<template>
<div class="yearAssessment">
<n-form
inline
:label-width="80"
label-placement="left"
:model="queryForm"
size="medium"
ref="queryFormRef"
class="formBox"
>
<n-form-item label="泵站名称" path="bengName">
<n-select
v-model:value="queryForm.bengName"
filterable
:options="options"
placeholder="请选择泵站名称"
/>
</n-form-item>
<n-form-item label="角色名" path="name">
<n-input
v-model:value="queryForm.roleName"
clearable
placeholder="请输入角色名"
/>
</n-form-item>
<n-form-item label="人员姓名" path="name">
<n-input
v-model:value="queryForm.name"
clearable
placeholder="请输入人员姓名"
/>
</n-form-item>
<n-button
type="primary"
style="margin-right: 10px"
@click="handleClick('search')"
>搜索</n-button
>
<n-button>验证</n-button>
</n-form>
<div class="content">
<div class="left">
<div class="LeftTop shadow">
<div class="BoxTitle sh">统计年份</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 class="leftBot shadow">
<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"
:key="index"
>
<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 class="right">
<div class="listBox">
<div v-for="v in personInfo" :key="v.id" class="single shadow">
<div class="infoBox">
<img src="../../../assets/Imgs/jixiao2.png" alt="" />
<ul class="info">
<li>姓名：{{ v.name }}</li>
<li>岗位：{{ v.station }}</li>
<li>岗级：{{ v.level }}</li>
<li>角色：{{ v.role }}</li>
</ul>
</div>
<ul class="scoreBox">
<li>绩效得分：{{ v.score }} 分</li>
<li class="modify">
<span>绩效考评：</span>
<img
src="../../../assets/Imgs/jixiao3.png"
alt=""
@click="modify(v.id)"
/>
</li>
</ul>
</div>
</div>
<div id="DutyHoursFoot">
<n-pagination
v-model:page="page"
:page-count="AllPage"
@update:page="paginationChange"
style="float: right; padding-right: 50px"
/>
</div>
</div>
</div>
<n-modal
v-model:show="showModal"
:show-icon="false"
preset="card"
:title="modelTitle"
style="width: 70%"
>
<n-data-table
ref="tableRef"
:bordered="false"
:columns="columns"
:data="modelData"
:pagination="pagination"
></n-data-table>
<template #action>
<n-space>
<n-button @click="() => (showModal = false)">取消</n-button>
<n-button
type="primary"
@click="handleClick('sure')"
>确定</n-button
>
</n-space>
</template>
</n-modal>
</div>
</template>
<script>
import { ref, reactive, toRefs, onMounted,h } from "vue";
import MoreBar from "./components/MoreBar.vue";
import Bar from "./components/BarChart.vue";
import PaiMing1Img from "@/assets/Imgs/renYuanZhiBan1.png";
import PaiMing2Img from "@/assets/Imgs/renYuanZhiBan2.png";
import PaiMing3Img from "@/assets/Imgs/renYuanZhiBan3.png";
import { NInput } from "naive-ui";
export default {
nama: "yearAssessment",
components: {
MoreBar,
Bar,
},
setup() {
const queryForm = ref({
bengName: "西渠闸门",
roleName: "",
name: "",
});
const options = ref([
{ label: "西渠闸门", value: "0" },
{ label: "解放大道澳门路闸", value: "1" },
{ label: "中山大道前进四路闸", value: "2" },
{ label: "王家墩污水泵站", value: "3" },
{ label: "后湖二期泵站", value: "4" },
{ label: "铁路桥泵站", value: "5" },
{ label: "机场河补水泵站", value: "6" },
{ label: "常青公园地下调蓄池", value: "7" },
{ label: "黄孝河CSO调蓄", value: "8" },
{ label: "机场河CSO调蓄", value: "9" },
]);
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, //选中的年份
});
const state = reactive({
//排名数据
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",
},
],
personInfo: [
{
id:0,
name: "胡鹏飞",
station: "操作工",
level: "中级工",
role: "班组组长",
score: 88,
},
{
id:1,
name: "胡鹏飞",
station: "操作工",
level: "中级工",
role: "班组组长",
score: 88,
},
{
id:2,
name: "胡鹏飞",
station: "操作工",
level: "中级工",
role: "班组组长",
score: 88,
},
{
id:3,
name: "胡鹏飞",
station: "操作工",
level: "中级工",
role: "班组组长",
score: 88,
},
{
id:4,
name: "胡鹏飞",
station: "操作工",
level: "中级工",
role: "班组组长",
score: 88,
},
{
id:5,
name: "胡鹏飞",
station: "操作工",
level: "中级工",
role: "班组组长",
score: 88,
},
{
id:6,
name: "胡鹏飞",
station: "操作工",
level: "中级工",
role: "班组组长",
score: 88,
},
{
id:7,
name: "胡鹏飞",
station: "操作工",
level: "中级工",
role: "班组组长",
score: 88,
},
{
id:8,
name: "胡鹏飞",
station: "操作工",
level: "中级工",
role: "班组组长",
score: 88,
},
{
id:9,
name: "胡鹏飞",
station: "操作工",
level: "中级工",
role: "班组组长",
score: 88,
},
{
id:10,
name: "胡鹏飞",
station: "操作工",
level: "中级工",
role: "班组组长",
score: 88,
},
],
// 弹窗相关
showModal: false,
columns: [
{
title: "序号",
key: "id",
align: "center",
width: "60",
},
{
title: "考核指标",
key: "type",
align: "center",
width: "150",
ellipsis: true,
},
{
title: "分值",
key: "score",
align: "center",
width: "60",
},
{
title: "指标解释",
key: "explain",
align: "center",
ellipsis: true,
},
{
title: "评分标准",
key: "standard",
align: "center",
ellipsis: true,
},
{
title: "评分",
key: "remark",
width: "150",
align: "center",
render(row, index) {
return h(NInput, {
value: row.name,
onUpdateValue(v) {
data.value[index].name = v;
},
});
},
},
],
modelData: [
{
id: 1,
type: "重点设备的保证率",
score: 20,
explain: "根据规定方法对重点设备的保证率进行统计,计算结果考核",
standard:
"A: ———。B: 站点工作安排合理，班组保质保量有效完成各项工作任务；月度班组人员排班合理，能有效根据情况变化调整。C: 站点工作安排较为合理，班组拖延或未能完成工作任务的情况少于2次；月度班组人员排班计划较为合理，能基本满足完成工作任务需要。D: 站点工作安排存在一定问题，班组拖延或未能完成工作任务的情况大于2次；月度班组人员排班计划存在一定问题，经常性出现代班、调班和连班情况",
remark: 20,
},
{
id: 2,
type: "工作计划完成情况",
score: 20,
explain:
"班组工作安排情况；每月（系统）维护保养工作完成情况；计划外工作完成情况；",
standard:
"A: 100%按规定巡检,规范填写巡检记录，规范交接班，及时发现重要问题和隐患，及时报告并积极处理问题；B: 严格按规定巡检和交接班,规范填写巡检记录，能及时发现问题，及时报告并采取处理措施；C: 未按规定巡检或交接班不超过1次；或1-2次记录缺项或错误；或出现不超过1次未能及时发现问题；尚未造成损失；D: 1次以上未按规定巡检或交接班；或3次记录缺项或错误、或记录丢失或做虚假记录；或1次及以上漏报、瞒报,造成一定损失",
remark: 20,
},
{
id: 3,
type: "设备维护、保养工作信息系统数据填报情况",
score: 20,
explain:
"对当班期间设备保养、维护数据在信息系统填报的及时性、准确性和完整性进行评分",
standard:
"A: 工艺指令完成情况良好；设备操作遵守操作规范,并按要求进行隐患排查，有效发现问题并及时报告和主动处理B: 工艺指令完成情况良好；设备操作遵守操作规范,并按要求进行隐患排查，有效发现问题并及时报告C: 工艺指令未完成情况出现1次；或有不超过2次违规作业或不合理操作；无直接损失，未造成较大原材料浪费，设备无重大隐患D: 工艺指令未完成情况出现超过1次；或有2次以上违规作业或不合理操作；出现一定损失或造成一定的原材料浪费，或导致设备有重大隐患；",
remark: 20,
},
{
id: 4,
type: "设备维修成本节约情况",
score: 20,
explain:
"在保证质量完成维护维修工作任务，保证设备设施安全稳定运行的前提下，考核维修成本节约情况",
standard:
"A: 在完成维修任务中积极主动，不怕困难，表现突出B: 有效完成设备维护保养任务，积极主动配合完成设备大修工作；C: 设备维护保养工作未完成情况出现不超过2次；或1次配合完成大修工作不到位；D: 设备维护保养工作未完成情况出现超过2次；或2次配合大修工作不到位；",
remark: 20,
},
{
id: 5,
type: "安全操作及隐患排查情况",
score: 20,
explain: "对安全操作和隐患排查工作情况进行考核",
standard:
"A: ———。B: 站点工作安排合理，班组保质保量有效完成各项工作任务；月度班组人员排班合理，能有效根据情况变化调整。C: 站点工作安排较为合理，班组拖延或未能完成工作任务的情况少于2次；月度班组人员排班计划较为合理，能基本满足完成工作任务需要。D: 站点工作安排存在一定问题，班组拖延或未能完成工作任务的情况大于2次；月度班组人员排班计划存在一定问题，经常性出现代班、调班和连班情况",
remark: 20,
},
{
id: 6,
type: "生产责任区设备、环境的卫生和整洁状况",
score: 20,
explain: "生产责任区设备、环境的卫生和整洁状况",
standard:
"绩效目标: 作业现场物规范有序，作业状态标识清楚明了，维修后现场及时清理；公司设备、辅助设备、线路布置等规范整齐、无安全隐患、无松垮无乱贴乱绑现象；维修房、机电房等负责区域物品摆放有序、整洁卫生,考核计分: 作业现场和责任区域不符合规范、整齐、卫生标准的情况出现1次扣3分；以此类推，直至本项的8分扣完为止；",
remark: 20,
},
{
id: 7,
type: "出勤情况",
score: 12,
explain: "出勤情况",
standard:
"绩效目标: 全勤，无迟到早退现象考核计分: 1次迟到或早退扣6分，事假每天扣2分，以此类推，直至本项的12分全部扣完为止",
remark: 20,
},
],
});
// 点击年份
function yearClick(item, index) {
yearData.isCheck = index;
yearData.yearData = item.year;
}
const handleClick = (type) => {
switch (type) {
case "search":
console.log(queryForm);
break;
case "sure":
state.showModal = false;
break;
}
};
const modify = (i) => {
console.log(i)
state.showModal = true;
};
return {
queryForm,
options,
...toRefs(yearData),
...toRefs(state),
yearClick,
PaiMing1Img,
PaiMing2Img,
PaiMing3Img,
modify,
handleClick,
};
},
};
</script>
<style lang='less' scoped>
.yearAssessment {
width: 100%;
height: 100%;
.formBox {
height: 50px;
}
.content {
display: flex;
.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;
}
.shadow {
width: calc(100% - 20px);
margin: 10px;
box-sizing: border-box;
box-shadow: 0px 0px 20px #79bac594;
}
.left {
margin-right: 20px;
width: 410px;
height: 100%;
.LeftTop {
height: 280px;
.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;
}
}
}
}
}
.leftBot {
.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);
.color50 {
color: rgb(128, 128, 128);
}
.color60 {
color: #e39924;
}
.color70 {
color: #26c84f;
}
.color80 {
color: #ed2880;
}
.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;
}
}
}
}
}
}
.right {
width: calc(100% - 400px);
height: 100%;
.listBox {
width: 100%;
height: calc(100% - 30px);
display: flex;
flex-wrap: wrap;
.single {
width: calc(25% - 20px);
height: 226px;
border: 1px solid #145bf7;
.infoBox {
display: flex;
padding: 20px 0 10px 10px;
border-bottom: 1px solid #748ec8;
img {
margin-right: 20px;
width: 73px;
height: 73px;
}
.info {
li {
line-height: 40px;
font-size: 16px;
font-family: Alibaba PuHuiTi;
}
}
}
.scoreBox {
display: flex;
justify-content: space-around;
align-items: center;
height: 30px;
.modify {
display: flex;
align-items: center;
img {
width: 24px;
height: 24px;
cursor: pointer;
}
}
}
}
}
#DutyHoursFoot {
width: 100%;
height: 30px;
}
}
}
}
</style>
