|
|
@@ -46,73 +46,99 @@
|
|
|
</el-row>
|
|
|
|
|
|
<div class="content">
|
|
|
- <div class="area_content" v-for="area in taskInfo.checkList" :key="area.areaId">
|
|
|
+ <div
|
|
|
+ class="area_content"
|
|
|
+ v-for="area in taskInfo.checkList"
|
|
|
+ :key="area.areaId"
|
|
|
+ >
|
|
|
<div>
|
|
|
{{ area.areaName }}
|
|
|
</div>
|
|
|
<div>
|
|
|
- <div class="safetycheck_item" v-for="(item, index) in area.itemList" :key="item.itemId">
|
|
|
- <span>{{ arabicToChinese (index + 1 )}}、{{ item.itemName }}</span>
|
|
|
- <div class="safetycheck_point" v-for="(point,pIndex) in item.pointList" :key="point.pointId">
|
|
|
- <div>
|
|
|
- <div class="pointName">
|
|
|
- <div style="display: flex; flex-direction: row">
|
|
|
- <pre>{{ (pIndex+1)+". "+point.pointName }}</pre>
|
|
|
- </div>
|
|
|
+ <div
|
|
|
+ class="safetycheck_item"
|
|
|
+ v-for="(item, index) in area.itemList"
|
|
|
+ :key="item.itemId"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ style="background-color: #d1e0f1 !important; padding-left: 10px"
|
|
|
+ >
|
|
|
+ <div class="name namePadding" >
|
|
|
+ {{ arabicToChinese(index + 1) }}、{{ item.itemName }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div
|
|
|
+ class="safetycheck_point"
|
|
|
+ v-for="(point, pIndex) in item.pointList"
|
|
|
+ :key="point.pointId"
|
|
|
+ >
|
|
|
+ <div class="pointContent name">
|
|
|
+ <div class="pointName namePadding">
|
|
|
+ <div class="text_nbsp">{{ pIndex + 1 + ". " + point.pointName }}</div>
|
|
|
+ <!-- <i class="circle" /> -->
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div v-if="point.status == 1">
|
|
|
+ <el-form
|
|
|
+ :ref="'point_' + point.pointId"
|
|
|
+ :model="point"
|
|
|
+ :rules="exceptionRules"
|
|
|
+ label-width="100px"
|
|
|
+ >
|
|
|
+ <el-form-item label="情况描述" prop="remark">
|
|
|
+ <el-input
|
|
|
+ v-model="point.remark"
|
|
|
+ style="width: 250px"
|
|
|
+ placeholder="请输入情况描述"
|
|
|
+ maxlength="255"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="整改期限" prop="rectificationDeadline">
|
|
|
+ <el-select
|
|
|
+ v-model="point.rectificationDeadline"
|
|
|
+ placeholder="请选择整改期限"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in dict.type.rectification_deadline"
|
|
|
+ :key="item.value"
|
|
|
+ :value="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="异常图片" prop="image">
|
|
|
+ <imgUpload
|
|
|
+ type="more"
|
|
|
+ :value="
|
|
|
+ point.imgData
|
|
|
+ ? point.imgData.map((d) => d.imgPath).join(',')
|
|
|
+ : ''
|
|
|
+ "
|
|
|
+ @input="onImageChanged(point, $event)"
|
|
|
+ ></imgUpload>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
</div>
|
|
|
- <el-radio-group v-model="point.status">
|
|
|
+ </div>
|
|
|
+ <div class="point_btn">
|
|
|
+ <el-radio-group
|
|
|
+ v-model="point.status"
|
|
|
+ style="margin-top: 5px; margin-left: 20px"
|
|
|
+ >
|
|
|
<el-radio :label="0">正常</el-radio>
|
|
|
<el-radio :label="1">异常</el-radio>
|
|
|
</el-radio-group>
|
|
|
- <el-button
|
|
|
- type="danger"
|
|
|
- size="mini"
|
|
|
- v-if="point.isAdd"
|
|
|
- style="margin-left: 50px"
|
|
|
- @click="onDeletePoint(area, item, point)"
|
|
|
- >删除</el-button
|
|
|
- >
|
|
|
- </div>
|
|
|
- <div v-if="point.status == 1">
|
|
|
- <el-form
|
|
|
- :ref="'point_' + point.pointId"
|
|
|
- :model="point"
|
|
|
- :rules="exceptionRules"
|
|
|
- label-width="100px"
|
|
|
- >
|
|
|
- <el-form-item label="情况描述" prop="remark">
|
|
|
- <el-input
|
|
|
- v-model.trim="point.remark"
|
|
|
- style="width: 217px"
|
|
|
- placeholder="请输入情况描述"
|
|
|
- maxlength="255"
|
|
|
- ></el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="整改期限" prop="rectificationDeadline">
|
|
|
- <el-select
|
|
|
- v-model="point.rectificationDeadline"
|
|
|
- placeholder="请选择整改期限"
|
|
|
- >
|
|
|
- <el-option
|
|
|
- v-for="item in dict.type.rectification_deadline"
|
|
|
- :key="item.value"
|
|
|
- :value="item.value"
|
|
|
- :label="item.label"
|
|
|
- ></el-option>
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="异常图片" prop="image">
|
|
|
- <imgUpload
|
|
|
- type="more"
|
|
|
- :value="
|
|
|
- point.imgData
|
|
|
- ? point.imgData.map((d) => d.imgPath).join(',')
|
|
|
- : ''
|
|
|
- "
|
|
|
- @input="onImageChanged(point, $event)"
|
|
|
- ></imgUpload>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
+ <div>
|
|
|
+ <el-button
|
|
|
+ type="danger"
|
|
|
+ size="mini"
|
|
|
+ v-if="point.isAdd"
|
|
|
+ style="margin-left: 50px"
|
|
|
+ @click="onDeletePoint(area, item, point)"
|
|
|
+ >删除</el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -422,7 +448,7 @@ export default {
|
|
|
}
|
|
|
|
|
|
.area_content > div:nth-child(1) {
|
|
|
- background-color: #f7f7f7;
|
|
|
+ background-color: #d1e0f1;
|
|
|
border-right: #b8bdc0 1px solid;
|
|
|
padding-top: auto;
|
|
|
width: 250px;
|
|
|
@@ -431,41 +457,68 @@ export default {
|
|
|
justify-content: center;
|
|
|
text-align: center;
|
|
|
}
|
|
|
-
|
|
|
.area_content > div:nth-child(2) {
|
|
|
width: calc(100% - 250px);
|
|
|
- padding-left: 10px;
|
|
|
+ // padding-left: 10px;
|
|
|
}
|
|
|
|
|
|
.safetycheck_item {
|
|
|
- margin: 10px;
|
|
|
- margin-bottom: 20px;
|
|
|
+ // margin: 10px;
|
|
|
+ // padding-bottom: 20px;
|
|
|
}
|
|
|
-.safetycheck_item>div:not(:last-child){
|
|
|
- padding-bottom: 10px;
|
|
|
+
|
|
|
+.safetycheck_item > div:first {
|
|
|
+ // padding-top: 10px;
|
|
|
+ // padding-bottom: 10px;
|
|
|
+}
|
|
|
+.safetycheck_item > div:not(:last-child) {
|
|
|
border-bottom: #b8bdc0 1px solid;
|
|
|
}
|
|
|
.safetycheck_point {
|
|
|
+ // padding-top: 8px;
|
|
|
+ display: flex;
|
|
|
+ padding-left: 40px;
|
|
|
+ background-color: #d1e0f188 !important;
|
|
|
+
|
|
|
+ & > div {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.name {
|
|
|
+ width: calc(100% - 600px);
|
|
|
+ border-right: #b8bdc0 1px solid;
|
|
|
+}
|
|
|
+
|
|
|
+.namePadding {
|
|
|
padding-top: 10px;
|
|
|
- padding-left: 30px;
|
|
|
+ padding-bottom: 10px;
|
|
|
+ padding-right: 20px;
|
|
|
}
|
|
|
-// .safetycheck_point > div:nth-child(1) {
|
|
|
-// margin-bottom: 15px;
|
|
|
-// }
|
|
|
-.pointName {
|
|
|
- width: 400px;
|
|
|
- display: inline-block;
|
|
|
- margin-right: 50px;
|
|
|
+
|
|
|
+.pointContent {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column !important;
|
|
|
+ & > div {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.point_btn {
|
|
|
+ padding-top:5px;
|
|
|
+ width: 600px;
|
|
|
}
|
|
|
|
|
|
-.pointName pre {
|
|
|
- margin-left: 10px;
|
|
|
- width: calc(100% - 15px);
|
|
|
+.pointName {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
}
|
|
|
.dialog-footer {
|
|
|
width: 100%;
|
|
|
text-align: right;
|
|
|
- /* border-top: #b8bdc0 1px solid; */
|
|
|
+ border-top: #b8bdc0 1px solid;
|
|
|
padding-top: 10px;
|
|
|
padding-right: 30px;
|
|
|
position: absolute;
|
|
|
@@ -477,10 +530,10 @@ export default {
|
|
|
width: 5px;
|
|
|
height: 5px;
|
|
|
border-radius: 5px;
|
|
|
- background-color: #b8bdc0;
|
|
|
+ background-color: #000;
|
|
|
border: none;
|
|
|
- margin-bottom: 3px;
|
|
|
- margin-top: 6px;
|
|
|
+ margin-top: 10px;
|
|
|
+ margin-right: 10px;
|
|
|
}
|
|
|
.el-descriptions {
|
|
|
::v-deep .el-descriptions__body {
|
凉纪