393 lines
10 KiB
Vue
393 lines
10 KiB
Vue
<template>
|
|
<div class="leftTop">
|
|
<Card :title="activeTab == 0 ? '人员情况' : '三色评价'">
|
|
<div class="top-content">
|
|
<span :class="activeTab == 0 ? 'active' : ''" @click="activeChange(0)">人员情况</span>
|
|
<span :class="activeTab == 1 ? 'active' : ''" @click="activeChange(1)">三色评价</span>
|
|
</div>
|
|
<div class="box-content" v-show="activeTab == 0">
|
|
<div class="member-top-data">
|
|
<div class="top-data-item">
|
|
<span>未履职人员</span>
|
|
<span>{{ performanceAnalysisObj.notPerformNum || 0 }}/{{ performanceAnalysisObj.inServiceNum || 0 }}</span>
|
|
</div>
|
|
<div class="top-data-item">
|
|
<span>项目经理</span>
|
|
<span>{{ performanceAnalysisObj.xmjlNotPerformNum || 0 }}/{{ performanceAnalysisObj.xmjlInServiceNum || 0 }}</span>
|
|
</div>
|
|
<div class="top-data-item">
|
|
<span>安全员</span>
|
|
<span>{{ performanceAnalysisObj.aqyNotPerformNum || 0 }}/{{ performanceAnalysisObj.aqyInServiceNum || 0 }}</span>
|
|
</div>
|
|
<div class="top-data-item">
|
|
<span>质量员</span>
|
|
<span>{{ performanceAnalysisObj.zlyNotPerformNum || 0 }}/{{ performanceAnalysisObj.zlyInServiceNum || 0 }}</span>
|
|
</div>
|
|
<div class="top-data-item">
|
|
<span>监理</span>
|
|
<span>{{ performanceAnalysisObj.jlNotPerformNum || 0 }}/{{ performanceAnalysisObj.jlInServiceNum || 0 }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="member-bottom-table">
|
|
<div class="list-content">
|
|
<div class="tab-list">
|
|
<div>企业名称</div>
|
|
<div>未履职人数</div>
|
|
<div>项目经理</div>
|
|
<div>安全员</div>
|
|
<div>质量员</div>
|
|
<div>监理</div>
|
|
</div>
|
|
<el-scrollbar class="list-box">
|
|
<div v-for="(item, index) in performanceAnalysisList" class="listStyle" :key="item.id">
|
|
<!-- <div style="width: 5%">{{ index + 1 }}</div> -->
|
|
<div>{{ item.enterpriseName || "" }}</div>
|
|
<div>{{ item.notPerformNum || 0 }}/{{ item.inServiceNum || 0 }}</div>
|
|
<div>{{ item.xmjlNotPerformNum || 0 }}/{{ item.xmjlInServiceNum || 0 }}</div>
|
|
<div>{{ item.aqyNotPerformNum || 0 }}/{{ item.aqyInServiceNum || 0 }}</div>
|
|
<div>{{ item.zlyNotPerformNum || 0 }}/{{ item.zlyInServiceNum || 0 }}</div>
|
|
<div>{{ item.jlNotPerformNum || 0 }}/{{ item.jlInServiceNum || 0 }}</div>
|
|
</div>
|
|
</el-scrollbar>
|
|
</div>
|
|
<div class="not-data" v-if="performanceAnalysisList.length == 0">
|
|
<img src="@/assets/images/noData.png" alt="" />
|
|
<p>暂无数据</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="box-content" v-show="activeTab == 1">
|
|
<div class="remark-top-data">
|
|
<div class="top-data-item">
|
|
<span>低风险</span>
|
|
<span style="color: #45c0b9">{{ statsEnterpriseRiskObj.lowRiskNum }}</span>
|
|
</div>
|
|
<div class="top-data-item">
|
|
<span>中风险</span>
|
|
<span style="color: #e8bc21">{{ statsEnterpriseRiskObj.mediumRiskNum }}</span>
|
|
</div>
|
|
<div class="top-data-item">
|
|
<span>高风险</span>
|
|
<span style="color: #fa2a31">{{ statsEnterpriseRiskObj.highRiskNum }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="remark-bottom-table">
|
|
<div class="list-content">
|
|
<div class="tab-list">
|
|
<div>企业名称</div>
|
|
<div>低风险人数</div>
|
|
<div>中风险人数</div>
|
|
<div>高风险人数</div>
|
|
</div>
|
|
<el-scrollbar class="list-box">
|
|
<div v-for="(item, index) in statsEnterpriseRiskList" class="listStyle" :key="item.id">
|
|
<!-- <div style="width: 5%">{{ index + 1 }}</div> -->
|
|
<div>{{ item.enterpriseName || "" }}</div>
|
|
<div>{{ item.lowRiskNum || 0 }}</div>
|
|
<div>{{ item.mediumRiskNum || 0 }}</div>
|
|
<div>{{ item.highRiskNum || 0 }}</div>
|
|
</div>
|
|
</el-scrollbar>
|
|
</div>
|
|
<div class="not-data" v-if="statsEnterpriseRiskList.length == 0">
|
|
<img src="@/assets/images/noData.png" alt="" />
|
|
<p>暂无数据</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import Card from "@/components/card.vue";
|
|
import { ref, watch, onMounted } from "vue";
|
|
import { GlobalStore } from "@/stores";
|
|
import { performanceAnalysisApi, statsEnterpriseRiskApi } from "@/api/modules/agjtCommandApi";
|
|
const store = GlobalStore();
|
|
const activeTab = ref(0);
|
|
const performanceAnalysisObj = ref({
|
|
aqyInServiceNum: 0,
|
|
aqyNotPerformNum: 0,
|
|
enterpriseName: 0,
|
|
inServiceNum: 0,
|
|
jlInServiceNum: 0,
|
|
jlNotPerformNum: 0,
|
|
notPerformNum: 0,
|
|
xmjlInServiceNum: 0,
|
|
xmjlNotPerformNum: 0,
|
|
zlyInServiceNum: 0,
|
|
zlyNotPerformNum: 0
|
|
});
|
|
const performanceAnalysisList = ref([] as any);
|
|
const statsEnterpriseRiskObj = ref({
|
|
lowRiskNum: 0,
|
|
mediumRiskNum: 0,
|
|
highRiskNum: 0
|
|
});
|
|
const statsEnterpriseRiskList = ref([] as any);
|
|
// tab切换
|
|
const activeChange = (index: any) => {
|
|
activeTab.value = index;
|
|
if (index == 0) {
|
|
performanceAnalysisFn(true);
|
|
} else {
|
|
statsEnterpriseRiskFn(true);
|
|
}
|
|
};
|
|
// 人员情况
|
|
const performanceAnalysisFn = async (showLoading: boolean) => {
|
|
const res: any = await performanceAnalysisApi(
|
|
{
|
|
projectSn: store.sn
|
|
},
|
|
showLoading
|
|
);
|
|
if (res.result) {
|
|
console.log(res.result, "人员情况");
|
|
performanceAnalysisObj.value = res.result;
|
|
performanceAnalysisList.value = res.result.list || [];
|
|
}
|
|
};
|
|
// 三色评价
|
|
const statsEnterpriseRiskFn = async (showLoading: boolean) => {
|
|
const res: any = await statsEnterpriseRiskApi(
|
|
{
|
|
projectSn: store.sn
|
|
},
|
|
showLoading
|
|
);
|
|
if (res.result) {
|
|
console.log(res.result, "三色评价");
|
|
// performanceAnalysisObj.value = res.result;
|
|
statsEnterpriseRiskList.value = res.result || [];
|
|
let dealData = {
|
|
lowRiskNum: 0,
|
|
mediumRiskNum: 0,
|
|
highRiskNum: 0
|
|
};
|
|
statsEnterpriseRiskList.value.map((item: any) => {
|
|
dealData.lowRiskNum += item.lowRiskNum;
|
|
dealData.mediumRiskNum += item.mediumRiskNum;
|
|
dealData.highRiskNum += item.highRiskNum;
|
|
});
|
|
statsEnterpriseRiskObj.value = dealData;
|
|
}
|
|
};
|
|
onMounted(async () => {
|
|
performanceAnalysisFn(true);
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.leftTop {
|
|
width: 100%;
|
|
height: 100%;
|
|
.top-content {
|
|
width: 18%;
|
|
position: absolute;
|
|
top: 3%;
|
|
right: 0px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
span {
|
|
font-family: ABeeZee, ABeeZee;
|
|
font-weight: normal;
|
|
font-size: 16px;
|
|
color: rgba(255, 255, 255, 0.6);
|
|
letter-spacing: 1px;
|
|
text-shadow: 0px 4px 4px #14346c;
|
|
text-align: center;
|
|
font-style: italic;
|
|
text-transform: none;
|
|
cursor: pointer;
|
|
}
|
|
.active {
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
.box-content {
|
|
width: 100%;
|
|
height: 100%;
|
|
padding-top: 1%;
|
|
.remark-top-data {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
margin-bottom: 2%;
|
|
.top-data-item {
|
|
width: 135px;
|
|
height: 51px;
|
|
background: url("@/assets/images/comprehensiveManage/bgOne.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 0.5% 0;
|
|
padding-left: 2%;
|
|
span:nth-child(1) {
|
|
font-size: 16px;
|
|
color: #fff;
|
|
font-family: ABeeZee-Regular;
|
|
margin-bottom: 1%;
|
|
}
|
|
span:nth-child(2) {
|
|
font-size: 24px;
|
|
color: #65d7f9;
|
|
font-family: ABeeZee-Regular;
|
|
}
|
|
}
|
|
.top-data-item:not(:last-child) {
|
|
margin-right: 2%;
|
|
}
|
|
}
|
|
.remark-bottom-table {
|
|
height: 62%;
|
|
box-sizing: border-box;
|
|
margin: 0 2%;
|
|
position: relative;
|
|
.list-content {
|
|
height: 95%;
|
|
width: 100%;
|
|
.tab-list {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
height: 31px;
|
|
background: rgba(0, 122, 255, 0.19);
|
|
// position: absolute;
|
|
left: 75.5%;
|
|
top: 75%;
|
|
color: #ccc;
|
|
font-size: 16px;
|
|
// justify-content: space-around;
|
|
div {
|
|
width: 25%;
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
.list-box {
|
|
height: 82%;
|
|
.listStyle {
|
|
display: flex;
|
|
align-items: center;
|
|
color: #fff;
|
|
font-size: 14px;
|
|
line-height: 30px;
|
|
margin-top: 0.5%;
|
|
cursor: pointer;
|
|
background: rgba(0, 122, 255, 0.06);
|
|
div {
|
|
width: 25%;
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
.listStyle:hover {
|
|
background: rgba(0, 122, 255, 0.43);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.member-top-data {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 2%;
|
|
.top-data-item {
|
|
width: 135px;
|
|
height: 51px;
|
|
background: url("@/assets/images/comprehensiveManage/bgOne.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 0.5% 0;
|
|
padding-left: 2%;
|
|
span:nth-child(1) {
|
|
font-size: 16px;
|
|
color: #fff;
|
|
font-family: ABeeZee-Regular;
|
|
margin-bottom: 1%;
|
|
}
|
|
span:nth-child(2) {
|
|
font-size: 24px;
|
|
color: #65d7f9;
|
|
font-family: ABeeZee-Regular;
|
|
}
|
|
}
|
|
.top-data-item:not(:last-child) {
|
|
margin-right: 2%;
|
|
}
|
|
}
|
|
.member-bottom-table {
|
|
height: 62%;
|
|
box-sizing: border-box;
|
|
margin: 0 2%;
|
|
position: relative;
|
|
.list-content {
|
|
height: 95%;
|
|
width: 100%;
|
|
.tab-list {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
height: 31px;
|
|
background: rgba(0, 122, 255, 0.19);
|
|
// position: absolute;
|
|
left: 75.5%;
|
|
top: 75%;
|
|
color: #ccc;
|
|
font-size: 16px;
|
|
// justify-content: space-around;
|
|
div {
|
|
width: 17%;
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
.list-box {
|
|
height: 82%;
|
|
.listStyle {
|
|
display: flex;
|
|
align-items: center;
|
|
color: #fff;
|
|
font-size: 14px;
|
|
line-height: 30px;
|
|
margin-top: 0.5%;
|
|
cursor: pointer;
|
|
background: rgba(0, 122, 255, 0.06);
|
|
div {
|
|
width: 17%;
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
.listStyle:hover {
|
|
background: rgba(0, 122, 255, 0.43);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.not-data {
|
|
top: 40%;
|
|
width: 30%;
|
|
left: 35%;
|
|
position: absolute;
|
|
text-align: center;
|
|
img {
|
|
width: 50%;
|
|
}
|
|
p {
|
|
color: #fff;
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
::v-deep .h-card .content {
|
|
height: 80%;
|
|
margin-top: 1.8%;
|
|
}
|
|
</style>
|