flx:新增月份选择

This commit is contained in:
X_Rian 2024-10-31 15:30:06 +08:00
parent 207817a6c2
commit 578ced4860

View File

@ -1,34 +1,60 @@
<template>
<Card title="承包商考核">
<div class="leftBox">
<div @click="particularDetail({
typeUnit: 2,
title: 'EPC'
})">
<img src="@/assets/images/bthgIcon/civilizedConstruction_icon1.png" alt="">
<div>
<div>EPC</div>
<div>{{ rankEnterpriseInfo.epc && rankEnterpriseInfo.epc.enterpriseName }}</div>
<div class="main_box">
<div class="right-top_header">
<div class="right-top_header_left">
<div
@click="onContractorClick(item)"
:class="{ active: contractorAssessmentInfo.id == item.id }"
v-for="item in contractorAssessmentList"
:key="item.id"
>
{{ item.contractorAssessmentName }}
</div>
</div>
</div>
<div @click="particularDetail({
typeUnit: 1,
title: '监理单位'
})">
<img src="@/assets/images/bthgIcon/civilizedConstruction_icon2.png" alt="">
<div>
<div>监理单位</div>
<div>{{ rankEnterpriseInfo.supervisor && rankEnterpriseInfo.supervisor.enterpriseName }}</div>
<div class="leftBox">
<div
@click="
particularDetail({
typeUnit: 2,
title: 'EPC'
})
"
>
<img src="@/assets/images/bthgIcon/civilizedConstruction_icon1.png" alt="" />
<div>
<div>EPC</div>
<div>{{ rankEnterpriseInfo.epc && rankEnterpriseInfo.epc.enterpriseName }}</div>
</div>
</div>
</div>
<div @click="particularDetail({
typeUnit: 3,
title: '施工单位'
})">
<img src="@/assets/images/bthgIcon/civilizedConstruction_icon3.png" alt="">
<div>
<div>施工单位</div>
<div>{{ rankEnterpriseInfo.construction && rankEnterpriseInfo.construction.enterpriseName }}</div>
<div
@click="
particularDetail({
typeUnit: 1,
title: '监理单位'
})
"
>
<img src="@/assets/images/bthgIcon/civilizedConstruction_icon2.png" alt="" />
<div>
<div>监理单位</div>
<div>{{ rankEnterpriseInfo.supervisor && rankEnterpriseInfo.supervisor.enterpriseName }}</div>
</div>
</div>
<div
@click="
particularDetail({
typeUnit: 3,
title: '施工单位'
})
"
>
<img src="@/assets/images/bthgIcon/civilizedConstruction_icon3.png" alt="" />
<div>
<div>施工单位</div>
<div>{{ rankEnterpriseInfo.construction && rankEnterpriseInfo.construction.enterpriseName }}</div>
</div>
</div>
</div>
</div>
@ -50,23 +76,40 @@ const particularDetail = (obj: any) => {
type: 1,
typeUnit: obj.typeUnit,
title: obj.title,
rankEnterpriseInfo: rankEnterpriseInfo.value,
rankEnterpriseInfo: rankEnterpriseInfo.value
});
};
const contractorAssessmentList = ref([
{
id: 1,
contractorAssessmentName: "本月"
},
{
id: 2,
contractorAssessmentName: "上月"
}
]);
const contractorAssessmentInfo = ref({ id: 1 });
const onContractorClick = (row: any) => {
contractorAssessmentInfo.value.id = row.id;
getHomePageRankEnterprise();
};
const rankEnterpriseInfo = ref({} as any);
const getHomePageRankEnterprise = () => {
let data = {
projectSn: store.sn,
type: 1
};
getHomePageRankEnterpriseApi(data).then((res: any) => {
if (res.code == 200) {
rankEnterpriseInfo.value = res.result;
console.log('承包商考核排名', res);
}
});
}
projectSn: store.sn,
type: contractorAssessmentInfo.value.id
};
getHomePageRankEnterpriseApi(data).then((res: any) => {
if (res.code == 200) {
rankEnterpriseInfo.value = res.result;
console.log("承包商考核排名", res);
}
});
};
onMounted(() => {
getHomePageRankEnterprise();
@ -74,14 +117,52 @@ onMounted(() => {
</script>
<style scoped lang="scss">
.main_box {
width: 100%;
height: 100%;
}
.right-top_header {
width: calc(100% - 32px);
height: calc(20% - 24px);
padding: 12px 16px;
display: flex;
align-items: center;
justify-content: flex-end;
position: relative;
.right-top_header_left {
display: flex;
> div {
border: 1px solid #0056a8;
padding: 2px 6px;
font-size: 12px;
color: #0056a8;
cursor: pointer;
position: relative;
}
> div:not(:first-child) {
margin-left: 10px;
}
> div.active {
background-color: #0056a8;
color: white;
}
.el-icon-close {
position: absolute;
font-size: 8px;
top: -1px;
right: -1px;
background-color: #ff0000;
}
}
}
.leftBox {
width: calc( 100% - 24px);
height: calc(100% - 32px);
width: calc(100% - 32px);
height: calc(80% - 12px);
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 16px;
padding: 0 16px 12px;
color: white;
> div {
width: 32%;
@ -107,6 +188,13 @@ onMounted(() => {
> div:last-child {
margin-top: 4px;
font-size: 16px;
padding: 0 12px;
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
}
}
}