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/patrolRecord.vue | 188 +++++++++++++++++++++++++-
src/views/publicSecurity/ninePlaceManage/situationRectification.vue | 165 ++++++++++++++++++++++-
src/api/publicSecurity/ninePlaceManage.js | 18 ++
3 files changed, 354 insertions(+), 17 deletions(-)
diff --git a/src/api/publicSecurity/ninePlaceManage.js b/src/api/publicSecurity/ninePlaceManage.js
index fa82fd8..fdbd666 100644
--- a/src/api/publicSecurity/ninePlaceManage.js
+++ b/src/api/publicSecurity/ninePlaceManage.js
@@ -34,3 +34,21 @@
data
})
}
+
+// 问题类型字典
+export const getPatrolGroupTree = (params) => {
+ return request({
+ url: "/api/patrol/patrolGroup/getPatrolGroupTree",
+ method: "get",
+ params
+ })
+}
+
+// 九小类型字典
+export const getDictBizTree = (params) => {
+ return request({
+ url: "/api/blade-system/dict-biz/tree",
+ method: "get",
+ params
+ })
+}
\ No newline at end of file
diff --git a/src/views/publicSecurity/ninePlaceManage/patrolRecord.vue b/src/views/publicSecurity/ninePlaceManage/patrolRecord.vue
index a4563c0..503fede 100644
--- a/src/views/publicSecurity/ninePlaceManage/patrolRecord.vue
+++ b/src/views/publicSecurity/ninePlaceManage/patrolRecord.vue
@@ -14,11 +14,48 @@
<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.nineTypeName }}</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">
@@ -74,8 +111,8 @@
} from "@/api/patrol/placeChek"
import {
- addPd,
-} from "@/api/discuss/publicDiscuss"
+ getPatrolGroupTree, getDictBizTree
+} from "@/api/publicSecurity/ninePlaceManage"
import website from '@/config/website'
@@ -208,7 +245,12 @@
data: [],
districtTree: [],
- rowDetail: []
+ rowDetail: [],
+ refreshNum: 1,
+ radio: '1',
+ questionTypeList: [],
+ CNNum: ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二', '十三', '十四', '十五'],
+ nineTypeList: []
}
},
watch: {
@@ -247,9 +289,47 @@
},
},
+
+ created () {
+ this.getPatrolGroupTree()
+ this.getDictBizTree()
+ },
+
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
+ }, {})
+ },
+
+ // 九小类型字典接口
+ getDictBizTree () {
+ getDictBizTree({ code: 'nineType' }).then(res => {
+ this.nineTypeList = res.data.data
+ })
+ },
+
+ // 九小类型转换
+ switchNineType (type) {
+ return this.nineTypeList.find(item => item.key === type).title
+ },
+
+ // 获取问题类型
+ getPatrolGroupTree () {
+ getPatrolGroupTree().then(res => {
+ this.questionTypeList = res.data.data
+ })
+ },
+
getDetail (row) {
- console.log('getDetail', row)
if (row.patrolRecordVOList) {
row.patrolRecordVOList.forEach(item => {
item.imageUrlsList = []
@@ -265,11 +345,30 @@
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
+ // 九小类型转换
+ row.nineTypeName = this.switchNineType(row.nineType)
+ this.rowDetail = row
this.isDetail = true
},
+
searchReset () {
this.query = {}
this.onLoad(this.page)
@@ -402,18 +501,87 @@
}
</script>
-<style>
+<style lang="scss" scoped>
.avue-upload__icon {
line-height: 6;
+}
+
+: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 {
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