510 lines
13 KiB
Vue
510 lines
13 KiB
Vue
<template>
|
||
<div class="political-outlook">
|
||
<div class="content">
|
||
<div class="all-score">
|
||
<span>综合得分：{{ tableInfo.score || 0 }}</span>
|
||
</div>
|
||
<div class="all-title">
|
||
<span>月度安全综合评分表</span>
|
||
</div>
|
||
<div class="all-subTitle">
|
||
<span>工程名称：{{ projectData.projectName || "" }}</span>
|
||
<!-- <span>表格日期：{{ currentDate }}</span> -->
|
||
<span
|
||
>按月筛选：<el-date-picker @change="getScores" v-model="currentDate" type="month" placeholder="Pick a month"
|
||
/></span>
|
||
</div>
|
||
<div class="table-one">
|
||
<div class="tabList">
|
||
<div>项目名称及分值<text>(点击进入各分项查看扣分详情)</text></div>
|
||
</div>
|
||
<div class="tabbody">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th></th>
|
||
<th v-for="item in tableInfo.tableBody" :key="item" @click="openPeopleCountDialog(item)">{{ item.name }}</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>单模块权重</td>
|
||
<td v-for="item in tableInfo.tableBody.map(ele => ele.weight)" :key="item">{{ item }}%</td>
|
||
</tr>
|
||
<tr>
|
||
<td style="color: #ff0000">单项扣分</td>
|
||
<td style="color: #ff0000" v-for="item in tableInfo.tableBody.map(ele => ele.deductScore)" :key="item">
|
||
{{ item }}
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>单项得分</td>
|
||
<td v-for="item in tableInfo.tableBody.map(ele => ele.score)" :key="item">{{ item }}</td>
|
||
</tr>
|
||
</tbody>
|
||
<tfoot>
|
||
<tr>
|
||
<td>总计得分</td>
|
||
<td :colspan="tableInfo.tableBody.length">{{ tableInfo.score }}</td>
|
||
</tr>
|
||
</tfoot>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<dataDialog ref="partyBuildRefMore"></dataDialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { ref, onMounted, reactive } from "vue";
|
||
import { GlobalStore } from "@/stores";
|
||
import { getStatScoreApi, getScoresApi } from "@/api/modules/agjtCommandApi";
|
||
import { getProjectDetail } from "@/api/modules/projectOverview";
|
||
import dataDialog from "./data-dialog.vue";
|
||
import moment from "moment";
|
||
const store = GlobalStore();
|
||
const props = defineProps(["tip"]);
|
||
const currentDate = ref("" as any);
|
||
|
||
// 表单
|
||
const tableInfo = reactive({
|
||
tableBody: [] as any[],
|
||
score: 0
|
||
});
|
||
|
||
const partyBuildRefMore = ref();
|
||
// 弹窗
|
||
const openPeopleCountDialog = (obj: any) => {
|
||
partyBuildRefMore.value.openDialog({
|
||
index: 14,
|
||
type: 5,
|
||
title: "检查评分表",
|
||
tableItem: obj,
|
||
currentDate: currentDate.value
|
||
});
|
||
// console.log(partyBuildRef.value);
|
||
};
|
||
|
||
// let pageNo = ref(1 as any);
|
||
// let moreScroll = ref(true as any);
|
||
// const refScrollbar = ref(null as any); // 绑定到滚动的盒子上
|
||
// const partyMemberList = ref({} as any);
|
||
const value = ref({});
|
||
const countData = ref({} as any);
|
||
const projectData = ref({} as any);
|
||
//获取项目信息
|
||
const getProjectInfo = async () => {
|
||
const res = await getProjectDetail({ projectSn: store.sn }, false);
|
||
projectData.value = res.result;
|
||
};
|
||
// 获取统计数据
|
||
const getStatScoreFn = async () => {
|
||
let requestData: any = {
|
||
projectSn: store.sn
|
||
};
|
||
const res: any = await getStatScoreApi(requestData, false);
|
||
countData.value = res.result;
|
||
value.value = {
|
||
隐患治理排查: {
|
||
隐患整改率: {
|
||
name: "隐患整改率=已整改（除了待整改和已撤回）/隐患总数（不包含排查记录）x100%",
|
||
value: "40%",
|
||
score: res.result.hiddenDangerScoreClz.zgl ? res.result.hiddenDangerScoreClz.zgl : 0,
|
||
deduction: res.result.hiddenDangerScoreClz.zglkf ? res.result.hiddenDangerScoreClz.zglkf : 0
|
||
},
|
||
隐患及时整改率: {
|
||
name: "及时整改率=状态是已整改（除了待整改和已撤回）的未超期整改的隐患记录数/状态是已整改（除了待整改和已撤回）的隐患总数x100%",
|
||
value: "30%",
|
||
score: res.result.hiddenDangerScoreClz.jszgl ? res.result.hiddenDangerScoreClz.jszgl : 0,
|
||
deduction: res.result.hiddenDangerScoreClz.jszglkf ? res.result.hiddenDangerScoreClz.jszglkf : 0
|
||
},
|
||
隐患闭合率: {
|
||
name: "隐患闭合率=状态是合格的隐患记录/隐患总数x100%",
|
||
value: "30%",
|
||
score: res.result.hiddenDangerScoreClz.bhl ? res.result.hiddenDangerScoreClz.bhl : 0,
|
||
deduction: res.result.hiddenDangerScoreClz.bhlkf ? res.result.hiddenDangerScoreClz.bhlkf : 0
|
||
},
|
||
项目自检数量: {
|
||
name: "每周完成项目自检次数\n每周正常7次自检",
|
||
value: "0%",
|
||
score: res.result.hiddenDangerScoreClz.zj ? res.result.hiddenDangerScoreClz.zj : 0,
|
||
deduction: res.result.hiddenDangerScoreClz.zjkf ? res.result.hiddenDangerScoreClz.zjkf : 0
|
||
}
|
||
},
|
||
危大工程: {
|
||
危大工程排查覆盖率: {
|
||
name: "危大工程排查覆盖率=实际排查天数/应排查天数x100%(在施危大工程应每天排查)",
|
||
value: "60%",
|
||
score: res.result.dangerEngScoreClz.pcfgl ? res.result.dangerEngScoreClz.pcfgl : 0,
|
||
deduction: res.result.dangerEngScoreClz.pcfglkf ? res.result.dangerEngScoreClz.pcfglkf : 0
|
||
},
|
||
旁站记录更新: {
|
||
name: "实际旁站记录次数/应完成旁站记录x100%(在施危大工程应每天旁站)",
|
||
value: "40%",
|
||
score: res.result.dangerEngScoreClz.pzjl ? res.result.dangerEngScoreClz.pzjl : 0,
|
||
deduction: res.result.dangerEngScoreClz.pzjlkf ? res.result.dangerEngScoreClz.pzjlkf : 0
|
||
}
|
||
},
|
||
风险管理: {
|
||
风险排查执行率: {
|
||
name: "有排查记录不同的风险/生成待办任务不同的风险x100%",
|
||
value: "99%",
|
||
score: res.result.riskScoreClz.fxpczxl ? res.result.riskScoreClz.fxpczxl : 0,
|
||
deduction: res.result.riskScoreClz.fxpczxlkf ? res.result.riskScoreClz.fxpczxlkf : 0
|
||
},
|
||
风险辨识数量: {
|
||
name: "排查和待办任务中至少识别3个不同的风险",
|
||
value: "1%",
|
||
score: res.result.riskScoreClz.fxbsull ? res.result.riskScoreClz.fxbsull : 0,
|
||
deduction: res.result.riskScoreClz.fxbsullkf ? res.result.riskScoreClz.fxbsullkf : 0
|
||
}
|
||
},
|
||
安全教育: {
|
||
三级入场教育完成率: {
|
||
name: "三级入场教育完成率=三级教育完成人数/所有在岗人数",
|
||
value: "100%",
|
||
score: res.result.eduModuleScore ? res.result.eduModuleScore : 0,
|
||
deduction: res.result.eduModuleDeScore ? res.result.eduModuleDeScore : 0
|
||
}
|
||
}
|
||
};
|
||
};
|
||
|
||
// 获取月度安全综合评分（十种）
|
||
const getScores = async () => {
|
||
let requestData: any = {
|
||
projectSn: store.sn,
|
||
month: currentDate.value
|
||
};
|
||
const res: any = await getScoresApi(requestData);
|
||
tableInfo.tableBody = res.result.safetyTypeScores;
|
||
tableInfo.score = res.result.score;
|
||
console.log(res);
|
||
};
|
||
|
||
onMounted(async () => {
|
||
currentDate.value = moment(new Date()).format("YYYY-MM");
|
||
getProjectInfo();
|
||
getStatScoreFn();
|
||
getScores();
|
||
// refScrollbar.value.wrapRef.addEventListener("scroll", (e: any) => {
|
||
// const scrollTop = e.target.scrollTop;
|
||
// const scrollHeight = e.target.scrollHeight;
|
||
// const clientHeight = e.target.clientHeight;
|
||
// // 向上加载更多
|
||
// if (scrollTop >= scrollHeight - clientHeight - 1) {
|
||
// if (moreScroll.value) {
|
||
// getMemberCountList("more");
|
||
// }
|
||
// }
|
||
// });
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.tabbody {
|
||
margin-top: 20px;
|
||
table {
|
||
width: 100%;
|
||
height: 100%;
|
||
font-size: 16px;
|
||
}
|
||
tr {
|
||
height: 60px;
|
||
}
|
||
td {
|
||
text-align: center;
|
||
}
|
||
th:not(:first-child) {
|
||
cursor: pointer;
|
||
}
|
||
table,
|
||
td,
|
||
th {
|
||
border: 1px solid #dbdbdb;
|
||
border-collapse: collapse;
|
||
color: white;
|
||
}
|
||
}
|
||
|
||
@mixin flex {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.political-outlook {
|
||
height: 97%;
|
||
margin: 0 20px;
|
||
padding: 0 40px;
|
||
// background-color: #fff;
|
||
transform: translateY(40px) translateX(-13px);
|
||
.content {
|
||
height: 95%;
|
||
width: 100%;
|
||
margin-top: 10px;
|
||
// background: url("@/assets/images/cardImg.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
padding: 20px 15px;
|
||
.all-subTitle {
|
||
font-size: 16px;
|
||
color: white;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-top: 0px;
|
||
}
|
||
.all-title {
|
||
text-align: center;
|
||
font-size: 18px;
|
||
color: white;
|
||
margin-top: 10px;
|
||
}
|
||
.all-score {
|
||
width: 100%;
|
||
height: 31px;
|
||
line-height: 31px;
|
||
background: linear-gradient(90deg, rgba(52, 146, 252, 0.43) 0%, #3186e8 31%, rgba(21, 43, 78, 0.02) 100%);
|
||
margin-top: 10px;
|
||
text-indent: 2em;
|
||
span {
|
||
font-size: 18px;
|
||
color: white;
|
||
font-style: italic;
|
||
}
|
||
}
|
||
.table-one {
|
||
height: 88%;
|
||
.tabList {
|
||
display: flex;
|
||
// width: 100%;
|
||
height: 8%;
|
||
background: url("@/assets/images/vehicleManagement/ListTitleImg.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
// position: absolute;
|
||
left: 75.5%;
|
||
top: 75%;
|
||
color: #ccc;
|
||
font-size: calc(100vw * 14 / 1920);
|
||
line-height: 30px;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 16px;
|
||
margin-top: 2%;
|
||
text {
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
.listBox {
|
||
height: 73%;
|
||
// background-color: #fff;
|
||
.listStyle {
|
||
display: flex;
|
||
align-items: center;
|
||
text-align: center;
|
||
color: #fff;
|
||
font-size: 12px;
|
||
padding: 5px 0px;
|
||
.list-img {
|
||
.el-img {
|
||
width: 30px;
|
||
height: 30px;
|
||
img {
|
||
display: flex;
|
||
align-items: center;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
div {
|
||
width: 17%;
|
||
white-space: nowrap; //单行
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
}
|
||
.listStyle:hover {
|
||
background: #091f3f;
|
||
}
|
||
}
|
||
.table-head-nine {
|
||
display: flex;
|
||
flex-direction: column;
|
||
.table-head-nine-part1 {
|
||
display: flex;
|
||
// align-items: center;
|
||
text-align: center;
|
||
color: white;
|
||
font-size: 14px;
|
||
margin-bottom: 5px;
|
||
.category-title {
|
||
width: 17%;
|
||
height: auto;
|
||
display: flex;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
background-color: #102959;
|
||
// overflow-wrap: anywhere;
|
||
// text-align: left !important;
|
||
}
|
||
.category-other {
|
||
width: 17%;
|
||
height: auto;
|
||
display: flex;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
background-color: #041e51;
|
||
}
|
||
.category-content {
|
||
width: 49%;
|
||
> div:nth-child(2n - 1) {
|
||
background-color: #041e51;
|
||
}
|
||
> div:nth-child(2n) {
|
||
background-color: #102959;
|
||
}
|
||
> div {
|
||
width: 100%;
|
||
height: auto;
|
||
display: flex;
|
||
> div {
|
||
width: 33.3%;
|
||
height: auto;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
> div:nth-child(2) {
|
||
line-height: 20px;
|
||
text-align: left;
|
||
justify-content: flex-start;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.table-head-nine-part2 {
|
||
display: flex;
|
||
text-align: center;
|
||
color: white;
|
||
font-size: 14px;
|
||
margin-bottom: 5px;
|
||
> div {
|
||
height: 30px;
|
||
line-height: 30px;
|
||
}
|
||
> div:nth-child(1) {
|
||
width: 17%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
white-space: nowrap;
|
||
background-color: #102959;
|
||
}
|
||
> div:not(:first-child) {
|
||
background-color: #041e51;
|
||
}
|
||
> div:nth-child(2) {
|
||
width: 17%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
white-space: nowrap;
|
||
}
|
||
> div:nth-child(3) {
|
||
width: 32%;
|
||
text-align: left;
|
||
display: flex;
|
||
flex-direction: column;
|
||
white-space: nowrap;
|
||
}
|
||
> div:nth-child(4) {
|
||
width: 17%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
white-space: nowrap;
|
||
}
|
||
> div:nth-child(5) {
|
||
width: 17%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
white-space: nowrap;
|
||
}
|
||
}
|
||
.table-head-nine-part3 {
|
||
display: flex;
|
||
text-align: center;
|
||
color: white;
|
||
font-size: 14px;
|
||
> div {
|
||
height: 30px;
|
||
line-height: 30px;
|
||
}
|
||
> div:nth-child(1) {
|
||
width: 17%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
white-space: nowrap;
|
||
background-color: #102959;
|
||
> span:not(:first-child) {
|
||
border-top: 1px solid #086d93;
|
||
}
|
||
}
|
||
> div:nth-child(2) {
|
||
width: 83%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
white-space: nowrap;
|
||
background-color: #041e51;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
:deep() {
|
||
.el-tabs__item {
|
||
color: white;
|
||
}
|
||
.el-tabs__item.is-active {
|
||
color: white;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.notoDta {
|
||
top: 35%;
|
||
width: 20%;
|
||
left: 40%;
|
||
position: absolute;
|
||
text-align: center;
|
||
img {
|
||
width: 40%;
|
||
margin: 5% 30%;
|
||
}
|
||
p {
|
||
color: #fff;
|
||
font-size: calc(100vw * 14 / 1920);
|
||
margin: -6% 37%;
|
||
}
|
||
}
|
||
// element 组件样式
|
||
:deep() {
|
||
.el-date-editor .el-range-input,
|
||
.el-range-separator {
|
||
color: #fff;
|
||
}
|
||
.el-input__wrapper {
|
||
background: #112d59;
|
||
}
|
||
.el-input__inner {
|
||
color: #fff;
|
||
}
|
||
.el-button {
|
||
background-color: #2758c0;
|
||
color: white;
|
||
border-color: transparent;
|
||
}
|
||
}
|
||
// ::v-deep .el-select .el-input .el-select__caret {
|
||
// color: #fff;
|
||
// }
|
||
</style>
|