From 5d138235571f8226bde18556528dd468c32e3808 Mon Sep 17 00:00:00 2001
From: guanqb <18720758508@163.com>
Date: Mon, 05 Feb 2024 14:31:35 +0800
Subject: [PATCH] 整改情况、场所检查详情页调整
---
src/views/publicSecurity/ninePlaceManage/situationRectification.vue | 165 ++++++++++++++++++++++++++++++++++++++++++++++++++++--
1 files changed, 158 insertions(+), 7 deletions(-)
diff --git a/src/views/publicSecurity/ninePlaceManage/situationRectification.vue b/src/views/publicSecurity/ninePlaceManage/situationRectification.vue
index 3124548..2857ad6 100644
--- a/src/views/publicSecurity/ninePlaceManage/situationRectification.vue
+++ b/src/views/publicSecurity/ninePlaceManage/situationRectification.vue
@@ -24,11 +24,48 @@
</template>
</avue-crud>
<el-drawer title="整改情况详情" :visible.sync="isDetail" :append-to-body="true" size="46%" direction="rtl">
- <div class="question-list">
- <div class="question-item" v-for="(item, index) in rowDetail" :key='index'>
+ <div class="title">
+ <div class="icon">{{ refreshNum }}</div>
+ 基础信息
+ </div>
+ <div class="basic-info">
+ <div class="info-item">
+ <div class="info-name">场所名称</div>
+ <div class="info-value">{{ rowDetail.placeName }}</div>
+ </div>
+ <div class="info-item">
+ <div class="info-name">场所类型</div>
+ <div class="info-value">{{ rowDetail.$nineType }}</div>
+ </div>
+ <div class="info-item">
+ <div class="info-name">检查人</div>
+ <div class="info-value">{{ rowDetail.name }}</div>
+ </div>
+ <div class="info-item">
+ <div class="info-name">检查时间</div>
+ <div class="info-value">{{ rowDetail.createTime }}</div>
+ </div>
+ </div>
+ <div class="title">
+ <div class="icon"></div>
+ 检查记录
+ </div>
+
+ <div class="question-list" v-for="(tItem, tIndex) in rowDetail.qTypeList" :key='tIndex'>
+ <div class="question-type" @click="flodQL(tIndex)">
+ <div class="type-name">
+ {{ CNNum[tIndex] }}、{{ tItem.questionName }}
+ </div>
+ <div class="icon-box"><i class="el-icon-arrow-down" v-show="tItem.isShowQList"></i><i
+ class="el-icon-arrow-up" v-show="!tItem.isShowQList"></i></div>
+ </div>
+ <div class="question-item" v-for="(item, index) in tItem.questionList" :key='index'
+ v-show="tItem.isShowQList">
<div class="question-name">
<div class="key">{{ index + 1 }}、{{ item.itemsName }}</div>
- <div class="value">存在</div>
+ <div class="value"><el-radio v-model="radio" label="1" disabled>存在</el-radio>
+ <el-radio v-model="radio" label="2" disabled>不存在</el-radio>
+ </div>
</div>
<div class="yh-pic-box">
<div class="yh-pic-name">
@@ -77,7 +114,7 @@
mapGetters
} from "vuex"
import {
- getZGQKList
+ getZGQKList, getPatrolGroupTree
} from "@/api/publicSecurity/ninePlaceManage"
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
@@ -213,7 +250,11 @@
searchLabelWidth: 106,
}],
},
- data: []
+ data: [],
+ refreshNum: 1,
+ radio: '1',
+ questionTypeList: [],
+ CNNum: ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二', '十三', '十四', '十五']
}
},
@@ -236,7 +277,32 @@
},
},
+
+ created () {
+ this.getPatrolGroupTree()
+ },
+
methods: {
+ flodQL (index) {
+ this.rowDetail.qTypeList[index].isShowQList = !this.rowDetail.qTypeList[index].isShowQList
+ this.refreshNum += 1
+ },
+
+ // 对数组按属性分组
+ groupBy (arr, key) {
+ return arr.reduce((acc, curr) => {
+ (acc[curr[key]] = acc[curr[key]] || []).push(curr)
+ return acc
+ }, {})
+ },
+
+ // 获取问题类型
+ getPatrolGroupTree () {
+ getPatrolGroupTree().then(res => {
+ this.questionTypeList = res.data.data
+ })
+ },
+
getDetail (row) {
if (row.patrolRecordVOList) {
row.patrolRecordVOList.forEach(item => {
@@ -253,9 +319,25 @@
return website.minioUrl + ele
})
}
+ // 查询问题类型
+ this.questionTypeList.forEach(qItem => {
+ qItem.children.forEach(qChild => {
+ if (qChild.id == item.itemId) {
+ item.qType = qItem.title
+ }
+ })
+ })
})
}
- this.rowDetail = row.patrolRecordVOList
+ // 把相同类型问题分组
+ let obj = this.groupBy(row.patrolRecordVOList, 'qType')
+ let arr = Object.entries(obj)
+ let newArr = []
+ arr.forEach(part => {
+ newArr.push({ questionName: part[0], questionList: part[1], isShowQList: true })
+ })
+ row.qTypeList = newArr
+ this.rowDetail = row
this.isDetail = true
},
@@ -509,13 +591,82 @@
align-items: center;
}
+:deep(.el-drawer__header) {
+ margin-bottom: 10px;
+}
+
+:deep(.el-radio__input.is-disabled+span.el-radio__label) {
+ color: #000;
+}
+
+:deep(.el-radio__input.is-checked+.el-radio__label) {
+ color: #409EFF !important;
+}
+
+:deep(.el-radio__input.is-checked .el-radio__inner::after) {
+ background-color: #FFF;
+}
+
+:deep(.el-radio__input.is-checked .el-radio__inner) {
+ background-color: #409EFF;
+}
+
+.title {
+ margin: 10px;
+ height: 40px;
+ background-color: #eee;
+ display: flex;
+ align-items: center;
+
+ .icon {
+ width: 4px;
+ height: 18px;
+ background-color: #409dfe;
+ margin: 0 10px;
+ color: transparent;
+ }
+}
+
+.basic-info {
+ padding: 0 20px;
+
+ .info-item {
+ display: flex;
+ padding: 10px;
+
+ .info-name {
+ width: 100px;
+ display: flex;
+ align-items: center;
+ }
+
+ .info-value {
+ display: flex;
+ align-items: center;
+ }
+ }
+}
+
.question-list {
padding: 0 20px;
+
+ .question-type {
+ height: 60px;
+ display: flex;
+ align-items: center;
+ cursor: pointer;
+ justify-content: space-between;
+ padding-right: 20px;
+
+ .type-name {}
+
+ .icon-box {}
+ }
.question-item {
margin-bottom: 20px;
padding: 10px;
- background: #eee;
+ background: #f5f7fa;
border-radius: 8px;
&>div {
--
Gitblit v1.9.3