|
@@ -1,18 +1,27 @@
|
|
|
<template>
|
|
<template>
|
|
|
<div class="content-container">
|
|
<div class="content-container">
|
|
|
- <el-row class="tool-bar">
|
|
|
|
|
- <el-col :span="4" class="button-group">
|
|
|
|
|
- <div class="page-title">
|
|
|
|
|
- <span> {{ title }} </span>
|
|
|
|
|
|
|
+ <div class="page-title">
|
|
|
|
|
+ <span> {{ title }} </span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="scoreRecord-table">
|
|
|
|
|
+ <div v-for="(checklist,idx) in viewData.itemList" :key="idx" class="checklist">
|
|
|
|
|
+ <div class="title more">{{ checklist.itemTitle }}</div>
|
|
|
|
|
+ <div v-if="checklist.children&&checklist.children.length>0" class="item-cont">
|
|
|
|
|
+ <div v-for="(checklistItem,itemIdx) in checklist.children" :key="itemIdx" class="checklistItem">
|
|
|
|
|
+ <div class="itemTitle more">{{ checklistItem.itemTitle }}</div>
|
|
|
|
|
+ <div v-if="checklist.children&&checklist.children.length>0" class="item-cont">
|
|
|
|
|
+ <div v-if="checklistItem.recordList&&checklistItem.recordList.length>0" class="point-cont">
|
|
|
|
|
+ <div v-for="(point,pointIdx) in checklistItem.recordList" :key="pointIdx" class="point">
|
|
|
|
|
+ <div class="pointContent">{{ point.pointContent }}</div>
|
|
|
|
|
+ <span>{{ point.score }}</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
</div>
|
|
</div>
|
|
|
- </el-col>
|
|
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
|
|
|
- <el-col :span="20" class="button-group">
|
|
|
|
|
- <div class="right" style="min-width:400px;flex: 1;padding-right: 10px">{{ viewData.itemList }}</div>
|
|
|
|
|
- </el-col>
|
|
|
|
|
- </el-row>
|
|
|
|
|
-
|
|
|
|
|
- <el-row class="content-body" />
|
|
|
|
|
</div>
|
|
</div>
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
@@ -91,148 +100,68 @@ export default {
|
|
|
.content-container {
|
|
.content-container {
|
|
|
margin: 0 0 15px 15px;
|
|
margin: 0 0 15px 15px;
|
|
|
height: calc(100vh - 100px);
|
|
height: calc(100vh - 100px);
|
|
|
-
|
|
|
|
|
- .title-bar {
|
|
|
|
|
- border-left: 6px solid #36556B;
|
|
|
|
|
- height: 40px;
|
|
|
|
|
- line-height: 40px;
|
|
|
|
|
- text-indent: 15px;
|
|
|
|
|
- background: #113849;
|
|
|
|
|
- margin-bottom: 15px;
|
|
|
|
|
-
|
|
|
|
|
|
|
+ color: #fff;
|
|
|
.page-title {
|
|
.page-title {
|
|
|
font-size: 18px;
|
|
font-size: 18px;
|
|
|
font-weight: bold;
|
|
font-weight: bold;
|
|
|
color: #FFF;
|
|
color: #FFF;
|
|
|
- margin: 0;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .btn-group {
|
|
|
|
|
- width: 100%;
|
|
|
|
|
- padding-right: 15px;
|
|
|
|
|
- text-align: center;
|
|
|
|
|
-
|
|
|
|
|
- .send-menu {
|
|
|
|
|
- width: 60%;
|
|
|
|
|
- background: #3D5F76;
|
|
|
|
|
- color: #FFF;
|
|
|
|
|
- border-color: #3D5F76;
|
|
|
|
|
-
|
|
|
|
|
- &:hover {
|
|
|
|
|
- background: #283c4c;
|
|
|
|
|
- color: #FFF;
|
|
|
|
|
- border-color: #283c4c;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .list-group {
|
|
|
|
|
- height: calc(100vh - 85px);
|
|
|
|
|
- background: #193142;
|
|
|
|
|
-
|
|
|
|
|
- .sub-title-bar {
|
|
|
|
|
- font-size: 16px;
|
|
|
|
|
- color: #FFF;
|
|
|
|
|
- margin: 0;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- p {
|
|
|
|
|
- text-align:right;
|
|
|
|
|
- margin: 0;
|
|
|
|
|
- padding: 0;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .count {
|
|
|
|
|
- padding: 0;
|
|
|
|
|
- text-align:left;
|
|
|
|
|
- color: #8b8b8b;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .ck-desc {
|
|
|
|
|
- text-align: left;
|
|
|
|
|
- text-indent: 24px;
|
|
|
|
|
- color: #8b8b8b;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .list-item {
|
|
|
|
|
|
|
+ border-left: 6px solid #36556B;
|
|
|
height: 40px;
|
|
height: 40px;
|
|
|
line-height: 40px;
|
|
line-height: 40px;
|
|
|
- color: #FFF;
|
|
|
|
|
- padding: 0 5px;
|
|
|
|
|
- font-size: 13px;
|
|
|
|
|
-
|
|
|
|
|
- &.active {
|
|
|
|
|
- color: #08A6DC;
|
|
|
|
|
- position: relative;
|
|
|
|
|
-
|
|
|
|
|
- &::after {
|
|
|
|
|
- position: absolute;
|
|
|
|
|
- content: "";
|
|
|
|
|
- width: 0;
|
|
|
|
|
- height: 0;
|
|
|
|
|
- top: calc(50% - 3.5px);
|
|
|
|
|
- right: -3px;
|
|
|
|
|
- border-left: 7px solid transparent;
|
|
|
|
|
- border-right: 7px solid transparent;
|
|
|
|
|
- border-bottom: 7px solid #08A6DC;
|
|
|
|
|
- transform: rotate(270deg);
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .ck-table {
|
|
|
|
|
- color: #FFF;
|
|
|
|
|
- background-color: #0C3444;
|
|
|
|
|
- font-size: 14px;
|
|
|
|
|
- text-indent: initial;
|
|
|
|
|
- border-spacing: 1px;
|
|
|
|
|
- border: #1F3C51 1px solid;
|
|
|
|
|
- padding: 10px 20px;
|
|
|
|
|
- flex: 1;
|
|
|
|
|
- width: 100%;
|
|
|
|
|
- max-width: 100%;
|
|
|
|
|
- .tr-head{
|
|
|
|
|
- padding: 10px 5px;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .tr-hazard {
|
|
|
|
|
- font-size: 13px;
|
|
|
|
|
- font-weight: bold;
|
|
|
|
|
- text-indent: 12px;
|
|
|
|
|
- background: #164153;
|
|
|
|
|
- padding: 10px 20px;
|
|
|
|
|
- }
|
|
|
|
|
- .tr-risk {
|
|
|
|
|
- font-size: 12px;
|
|
|
|
|
|
|
+ text-indent: 15px;
|
|
|
|
|
+ background: #113849;
|
|
|
|
|
+ margin-bottom: 15px;
|
|
|
}
|
|
}
|
|
|
- td {
|
|
|
|
|
- box-sizing: border-box;
|
|
|
|
|
- text-overflow: ellipsis;
|
|
|
|
|
- vertical-align: middle;
|
|
|
|
|
- position: relative;
|
|
|
|
|
- padding: 2px 5px;
|
|
|
|
|
- transition: background-color 0.25s ease;
|
|
|
|
|
|
|
+ .scoreRecord-table{
|
|
|
|
|
+ padding-left:20px;
|
|
|
|
|
+ border-top: 1px solid #36556B;
|
|
|
|
|
+ border-right: 1px solid #36556B;
|
|
|
|
|
+ .checklist{
|
|
|
|
|
+ color: #fff;
|
|
|
|
|
+ .title{
|
|
|
|
|
+ color: #fff;
|
|
|
|
|
+ font-size: 16px;
|
|
|
|
|
+ height: 50px;
|
|
|
|
|
+ line-height: 50px;
|
|
|
|
|
+ border-bottom: 1px dashed #36556B;
|
|
|
|
|
+ }
|
|
|
|
|
+ .more{
|
|
|
|
|
+ background-size: 30px 30px;
|
|
|
|
|
+ padding-left: 40px;
|
|
|
|
|
+ background-position: center left;
|
|
|
|
|
+ background-repeat: no-repeat;
|
|
|
|
|
+ }
|
|
|
|
|
+ .item-cont{
|
|
|
|
|
+ padding-left: 20px;
|
|
|
|
|
+ border-bottom: 1px dashed #36556B;
|
|
|
|
|
+ .checklistItem{
|
|
|
|
|
+ .itemTitle{
|
|
|
|
|
+ color: #fff;
|
|
|
|
|
+ font-size: 16px;
|
|
|
|
|
+ height: 50px;
|
|
|
|
|
+ line-height: 50px;
|
|
|
|
|
+ background-color: #113849;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ .point-cont{
|
|
|
|
|
+ padding-left: 30px;
|
|
|
|
|
+ .point{
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ color: #fff;
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
+ height: 50px;
|
|
|
|
|
+ line-height: 50px;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ padding-right: 20px;
|
|
|
|
|
+ .pointContent{
|
|
|
|
|
+ flex: 1;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- .td-sno{ width: 5%; text-align:center; }
|
|
|
|
|
- .td-riskCode{width: 5%; text-align: center; }
|
|
|
|
|
- .td-riskSource{width: 15%; text-align: center; }
|
|
|
|
|
- .td-riskType{width: 5%; text-align: center; }
|
|
|
|
|
- .td-riskLevel{width: 5%; text-align: center; }
|
|
|
|
|
- .td-riskReason{width: 15%; text-align: left; }
|
|
|
|
|
- .td-riskConsequence{width: 10%; text-align: center; }
|
|
|
|
|
- .td-measure{width: 20%; text-align: left; }
|
|
|
|
|
- .td-reference{width: 10%; text-align: left; }
|
|
|
|
|
- .td-checkResult{width: 5%; text-align: left; }
|
|
|
|
|
- .td-action{width: 5%; text-align: left;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- .el-link--inner{
|
|
|
|
|
- color: #08A6DC!important;
|
|
|
|
|
- font-size: 12px!important;
|
|
|
|
|
- }
|
|
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
</style>
|
|
</style>
|