卢龙巡查上报
This commit is contained in:
		
							
								
								
									
										55
									
								
								project/lulong/AppReportAiWill/AppReportAtWill.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										55
									
								
								project/lulong/AppReportAiWill/AppReportAtWill.vue
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,55 @@ | ||||
| <template> | ||||
|   <section class="AppReportAtWill"> | ||||
|     <component ref="component" :is="currentPage" @change="onChange" :params="params" :instance="instance" :dict="dict" :menuName="menuName" /> | ||||
|   </section> | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
| import List from './components/List' | ||||
| import Detail from './components/Detail' | ||||
| import Setting from './components/Setting' | ||||
|  | ||||
| export default { | ||||
|   name: 'AppReportAtWill', | ||||
|   label: '巡查上报', | ||||
|  | ||||
|   props: { | ||||
|     instance: Function, | ||||
|     dict: Object, | ||||
|     menuName: {default: '巡查上报'} | ||||
|   }, | ||||
|  | ||||
|   data() { | ||||
|     return { | ||||
|       component: 'List', | ||||
|       params: {} | ||||
|     } | ||||
|   }, | ||||
|   computed: { | ||||
|     currentPage() { | ||||
|       let {hash, query: {id}} = this.$route | ||||
|       return hash == "#Setting" ? Setting : | ||||
|           !!id ? Detail : List | ||||
|     } | ||||
|   }, | ||||
|   components: { | ||||
|     List, | ||||
|     Detail, | ||||
|     Setting | ||||
|   }, | ||||
|  | ||||
|   methods: { | ||||
|     onChange(data) { | ||||
|       this.$router.push({query: data.params, hash: data.type == "Setting" ? "#Setting" : ""}) | ||||
|     } | ||||
|   } | ||||
| } | ||||
| </script> | ||||
|  | ||||
| <style lang="scss"> | ||||
| .AppReportAtWill { | ||||
|   height: 100%; | ||||
|   background: #F3F6F9; | ||||
|   overflow: auto; | ||||
| } | ||||
| </style> | ||||
							
								
								
									
										590
									
								
								project/lulong/AppReportAiWill/components/Detail.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										590
									
								
								project/lulong/AppReportAiWill/components/Detail.vue
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,590 @@ | ||||
| <template> | ||||
|   <ai-detail class="reportAtWillDetail" v-loading="isLoading"> | ||||
|     <template #title> | ||||
|       <ai-title title="详情" isShowBack isShowBottomBorder @onBackClick="cancel(false)"> | ||||
|         <template #rightBtn> | ||||
|           <div class="title-btns"> | ||||
|             <el-button type="primary" icon="iconfont iconPerson_Transfered" @click="isShowForward = true" v-if="detail.eventStatus < 2">指派事件</el-button> | ||||
|             <el-button type="primary" icon="iconfont iconRegister" @click="isShowAdd = true" v-if="detail.eventStatus < 2">处理事件</el-button> | ||||
|           </div> | ||||
|         </template> | ||||
|       </ai-title> | ||||
|     </template> | ||||
|     <template #content> | ||||
|       <div class="detail-content__wrapper"> | ||||
|         <div class="detail-content__wrapper--left"> | ||||
|           <ai-card title="基础信息"> | ||||
|             <template #content> | ||||
|               <ai-wrapper> | ||||
|                 <ai-info-item label="上报人员" :value="detail.name"></ai-info-item> | ||||
|                 <ai-info-item label="当前状态" :value="dict.getLabel('clapEventStatus', detail.eventStatus)"></ai-info-item> | ||||
|                 <ai-info-item label="联系方式">{{ detail.phone }}</ai-info-item> | ||||
|                 <ai-info-item label="上报时间">{{ detail.createTime }}</ai-info-item> | ||||
|                 <ai-info-item label="事件来源">{{ dict.getLabel('residentEventSource', detail.eventSource) }}</ai-info-item> | ||||
|                 <ai-info-item label="事件类型">{{ detail.groupName }}</ai-info-item> | ||||
|                 <ai-info-item label="事件描述" isLine>{{ detail.content }}</ai-info-item> | ||||
|                 <ai-info-item label="现场照片" isLine> | ||||
|                   <ai-uploader :instance="instance" disabled v-model="detail.files"></ai-uploader> | ||||
|                 </ai-info-item> | ||||
|                 <ai-info-item label="所属网格">{{ detail.girdName }}</ai-info-item> | ||||
|                 <ai-info-item label="事件位置" isLine> | ||||
|                   <div id="map" style="width: 500px; height: 280px;"></div> | ||||
|                 </ai-info-item> | ||||
|               </ai-wrapper> | ||||
|             </template> | ||||
|           </ai-card> | ||||
|           <ai-evaluation v-if="!!detail.id" :bid="detail.id" :info.sync="evaluation"/> | ||||
|         </div> | ||||
|         <div class="rightZone"> | ||||
|           <ai-card title="办理进度"> | ||||
|             <template #content> | ||||
|               <el-steps direction="vertical" :active="1"> | ||||
|                 <el-step | ||||
|                     v-for="(item, i) in process" | ||||
|                     :key="i" | ||||
|                     :title="item.systemExplain" | ||||
|                     :description="item.doTime"> | ||||
|                   <template #title> | ||||
|                     <h2 class="step-title" style="font-weight: 500; font-size: 14px;"> | ||||
|                       {{ item.systemExplain }} | ||||
|                     </h2> | ||||
|                   </template> | ||||
|                   <template #description> | ||||
|                     <p style="color: #888; margin: 0 4px 10px 0; font-size: 14px;">{{ item.doTime }}</p> | ||||
|                     <div style="color: #444;margin-bottom: 10px;" v-if="item.doExplain">{{ item.doExplain }}</div> | ||||
|                     <ai-uploader :instance="instance" disabled v-model="item.files"></ai-uploader> | ||||
|                   </template> | ||||
|                 </el-step> | ||||
|               </el-steps> | ||||
|             </template> | ||||
|           </ai-card> | ||||
|         </div> | ||||
|       </div> | ||||
|       <ai-dialog | ||||
|           :visible.sync="isShowAdd" | ||||
|           width="800px" | ||||
|           title="事件处理" | ||||
|           @closed="onClose" | ||||
|           @onConfirm="handleEvent"> | ||||
|         <el-form class="ai-form" label-width="120px" :model="form" ref="form"> | ||||
|           <el-form-item label="事件分类" prop="groupId" style="width: 100%;" :rules="[{ required: true, message: '请选择事件分类' }]"> | ||||
|             <ai-select | ||||
|                 v-model="form.groupId" | ||||
|                 placeholder="请选择事件分类" | ||||
|                 :selectList="dictList"> | ||||
|             </ai-select> | ||||
|           </el-form-item> | ||||
|           <el-form-item label="处理结果" prop="eventStatus" style="width: 100%;" :rules="[{ required: true, message: '请选择处理结果' }]"> | ||||
|             <el-radio-group v-model="form.eventStatus"> | ||||
|               <el-radio label="1">已办结</el-radio> | ||||
|               <el-radio label="0">已拒绝</el-radio> | ||||
|             </el-radio-group> | ||||
|           </el-form-item> | ||||
|           <el-form-item label="处理意见" prop="content" style="width: 100%;" :rules="[{ required: true, message: '请输入处理意见' }]"> | ||||
|             <el-input type="textarea" :rows="5" :maxlength="500" v-model="form.content" clearable placeholder="请输入处理意见" show-word-limit></el-input> | ||||
|           </el-form-item> | ||||
|           <el-form-item label="图片" prop="files" style="width: 100%;"> | ||||
|             <ai-uploader | ||||
|                 :instance="instance" | ||||
|                 isShowTip | ||||
|                 v-model="form.files" | ||||
|                 :limit="9"> | ||||
|             </ai-uploader> | ||||
|           </el-form-item> | ||||
|         </el-form> | ||||
|       </ai-dialog> | ||||
|       <ai-dialog | ||||
|           :visible.sync="isShowForward" | ||||
|           width="800px" | ||||
|           @close="onClose" | ||||
|           title="事件指派" | ||||
|           @onConfirm="onForwardConfirm"> | ||||
|         <el-form class="ai-form" label-width="120px" :model="forwardForm" ref="forwardForm"> | ||||
|           <el-form-item label="转交" prop="name" style="width: 100%;" :rules="[{ required: true, message: '请选择网格员或网格' }]"> | ||||
|             <el-input disabled size="small" v-model="forwardForm.name" clearable placeholder="请选择网格员或网格"> | ||||
|               <template slot="append"> | ||||
|                 <el-button @click="getGirdList().then(()=>isShowUser=true )">选择</el-button> | ||||
|               </template> | ||||
|             </el-input> | ||||
|           </el-form-item> | ||||
|           <el-form-item label="办理意见" prop="content" style="width: 100%;" :rules="[{ required: true, message: '请输入办理意见' }]"> | ||||
|             <el-input type="textarea" :rows="5" :maxlength="500" v-model="forwardForm.content" clearable placeholder="请输入办理意见" show-word-limit></el-input> | ||||
|           </el-form-item> | ||||
|           <el-form-item label="图片" prop="files" style="width: 100%;"> | ||||
|             <ai-uploader | ||||
|                 :instance="instance" | ||||
|                 v-model="forwardForm.files" | ||||
|                 isShowTip | ||||
|                 :limit="9"> | ||||
|             </ai-uploader> | ||||
|           </el-form-item> | ||||
|         </el-form> | ||||
|       </ai-dialog> | ||||
|       <ai-dialog | ||||
|           :visible.sync="isShowUser" | ||||
|           width="800px" | ||||
|           title="选择网格员" | ||||
|           @onConfirm="onConfirm"> | ||||
|         <div class="grid-wrapper"> | ||||
|           <el-input | ||||
|               style="margin-bottom: 10px;" | ||||
|               size="small" | ||||
|               placeholder="请输入网格名称/网格员姓名/网格员电话" | ||||
|               v-model="name" @change="$refs.tree.filter(name)" | ||||
|               suffix-icon="iconfont iconSearch"> | ||||
|           </el-input> | ||||
|           <el-tree | ||||
|               :filter-node-method="filterNode" | ||||
|               ref="tree" | ||||
|               :props="defaultProps" | ||||
|               node-key="id" | ||||
|               :data="tree" | ||||
|               highlight-current | ||||
|               @current-change="onTreeChange"> | ||||
|             <div class="tree-container" slot-scope="{ data }"> | ||||
|               <div class="tree-container__user"> | ||||
|                 <div class="tree-user__item"> | ||||
|                   <span v-if="!data.isUser">{{ data.girdName }}</span> | ||||
|                   <span v-else>{{data.name}}<span v-if="data.phone">-{{data.phone}}</span></span> | ||||
|                 </div> | ||||
|               </div> | ||||
|             </div> | ||||
|           </el-tree> | ||||
|         </div> | ||||
|       </ai-dialog> | ||||
|     </template> | ||||
|   </ai-detail> | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
| import AMapLoader from '@amap/amap-jsapi-loader' | ||||
| import {mapState} from 'vuex' | ||||
|  | ||||
| export default { | ||||
|   name: 'Detail', | ||||
|   props: ['dict', 'instance'], | ||||
|  | ||||
|   data() { | ||||
|     return { | ||||
|       forwardForm: { | ||||
|         content: '', | ||||
|         girdId: '', | ||||
|         girdName: '', | ||||
|         girdMemberId: '', | ||||
|         girdMemberName: '', | ||||
|         name: '' | ||||
|       }, | ||||
|       isLoading: true, | ||||
|       name: '', | ||||
|       detail: {}, | ||||
|       isShowUser: false, | ||||
|       eventList: [], | ||||
|       isShowAdd: false, | ||||
|       userList: [], | ||||
|       processList: [], | ||||
|       dictList: [], | ||||
|       defaultProps: { | ||||
|         label: 'girdName' | ||||
|       }, | ||||
|       isShowForward: false, | ||||
|       tree: [], | ||||
|       gridInfo: {}, | ||||
|       form: { | ||||
|         files: [], | ||||
|         groupId: '', | ||||
|         groupName: '', | ||||
|         content: [], | ||||
|         eventStatus: '1' | ||||
|       }, | ||||
|       evaluation: {} | ||||
|     } | ||||
|   }, | ||||
|  | ||||
|   computed: { | ||||
|     ...mapState(['user']), | ||||
|     process: v => [v.evaluation.id ? { | ||||
|       systemExplain: `${v.evaluation.createUserName}完成评价 (${v.evaluation.score}星评价)`, | ||||
|       doTime: v.evaluation.createTime, | ||||
|       doExplain: v.evaluation.rateText, | ||||
|     } : null, v.processList].flat().filter(Boolean) | ||||
|   }, | ||||
|  | ||||
|   created() { | ||||
|     this.getDict() | ||||
|     this.dict.load('clapEventStatus', 'residentEventSource').then(() => { | ||||
|       this.getDetail() | ||||
|     }) | ||||
|   }, | ||||
|  | ||||
|   methods: { | ||||
|     getDetail() { | ||||
|       this.instance.post('/app/apppatrolreportinfo/queryDetailById', null, { | ||||
|         params: {id: this.$route.query.id} | ||||
|       }).then(res => { | ||||
|         if (res?.data) { | ||||
|           this.detail = res.data | ||||
|           this.processList = res.data.processList | ||||
|           this.form.groupId = res.data.groupId | ||||
|  | ||||
|           this.$nextTick(() => { | ||||
|             this.initMap() | ||||
|           }) | ||||
|           this.isLoading = false | ||||
|         } | ||||
|       }).catch(() => { | ||||
|         this.isLoading = false | ||||
|       }) | ||||
|     }, | ||||
|  | ||||
|     getGirdList() { | ||||
|       return this.instance.post(`/app/apppatrolreportinfo/listGirdInfoByTransfer?id=${this.$route.query.id}`).then(res => { | ||||
|         if (res?.data) { | ||||
|           // return this.tree = this.formatList([res.data]) | ||||
|           this.tree = res.data | ||||
|           this.tree.map((item) => { | ||||
|             item.children = [item.girdMemberList?.map(e => ({ | ||||
|               ...e, isUser: true, girdName: item.girdName | ||||
|             })) || []].flat() | ||||
|           }) | ||||
|         } | ||||
|       }) | ||||
|     }, | ||||
|  | ||||
|     onClose() { | ||||
|       this.form.files = [] | ||||
|       this.form.groupId = '' | ||||
|       this.form.groupName = '' | ||||
|       this.form.content = '' | ||||
|       this.form.eventStatus = '' | ||||
|       this.forwardForm.content = '' | ||||
|       this.forwardForm.girdId = '' | ||||
|       this.forwardForm.girdName = '' | ||||
|       this.forwardForm.girdMemberId = '' | ||||
|       this.forwardForm.girdMemberName = '' | ||||
|       this.forwardForm.name = '' | ||||
|     }, | ||||
|  | ||||
|     formatList(list) { | ||||
|       for (let item of list) { | ||||
|         item.children = [item.girdList, item.girdMemberList?.map(e => ({ | ||||
|           ...e, isUser: true, girdName: item.girdName, | ||||
|           girdId: item.id | ||||
|         })) || []].flat() | ||||
|         if (item.girdList?.length > 0) { | ||||
|           this.formatList(item.girdList) | ||||
|         } | ||||
|       } | ||||
|       return list | ||||
|     }, | ||||
|  | ||||
|     filterNode(value, data) { | ||||
|       if (!value) return true | ||||
|  | ||||
|       return (data.girdName && data.girdName.indexOf(value) !== -1) || (data.name && data.name.indexOf(value) !== -1) || (data.name && data.phone.indexOf(value) !== -1) | ||||
|     }, | ||||
|  | ||||
|     onTreeChange(e) { | ||||
|       this.gridInfo = e | ||||
|     }, | ||||
|  | ||||
|     onForwardConfirm() { | ||||
|       this.$refs.forwardForm.validate(v => { | ||||
|         if (v) { | ||||
|           this.instance.post('/app/apppatrolreportinfo/transfer', { | ||||
|             ...this.forwardForm, | ||||
|             id: this.$route.query.id | ||||
|           }).then(res => { | ||||
|             if (res?.code == 0) { | ||||
|               this.isShowForward = false | ||||
|               this.getDetail() | ||||
|               this.$message.success('转交成功!') | ||||
|             } | ||||
|           }) | ||||
|         } | ||||
|       }) | ||||
|     }, | ||||
|  | ||||
|     onConfirm() { | ||||
|       // if (this.gridInfo.userId) { | ||||
|       //   this.forwardForm.girdId = this.gridInfo.girdId | ||||
|       //   this.forwardForm.girdName = this.gridInfo.girdName | ||||
|       //   this.forwardForm.girdMemberId = this.gridInfo.id | ||||
|       //   this.forwardForm.girdMemberName = this.gridInfo.name | ||||
|       // } else { | ||||
|       //   this.forwardForm.girdId = this.gridInfo.id | ||||
|       // } | ||||
|       // this.forwardForm.girdName = this.gridInfo.girdName | ||||
|       // this.forwardForm.name = `${this.gridInfo.girdName}${this.gridInfo.name ? '-' + this.gridInfo.name : ''}` | ||||
|       // this.isShowUser = false | ||||
|       if(!this.gridInfo.userId) { | ||||
|         return this.$message.error('请选择网格员!') | ||||
|       }  | ||||
|       this.forwardForm.girdId = this.gridInfo.girdId | ||||
|       this.forwardForm.girdName = this.gridInfo.girdName | ||||
|       this.forwardForm.girdMemberId = this.gridInfo.id | ||||
|       this.forwardForm.girdMemberName = this.gridInfo.name | ||||
|       this.forwardForm.name = `${this.gridInfo.girdName}${this.gridInfo.name ? '-' + this.gridInfo.name : ''}` | ||||
|       this.isShowUser = false | ||||
|     }, | ||||
|     getDict() { | ||||
|       this.instance.post(`/app/apppatrolreportgroup/list?current=1&size=100000`).then(res => { | ||||
|         if (res.code == 0) { | ||||
|           this.dictList = res.data.records.map(v => { | ||||
|             return { | ||||
|               dictValue: v.id, | ||||
|               dictName: v.groupName | ||||
|             } | ||||
|           }) | ||||
|         } | ||||
|       }) | ||||
|     }, | ||||
|  | ||||
|     close() { | ||||
|       this.$confirm('确定关闭该事件?').then(() => { | ||||
|         this.instance.post(`/app/apppatrolreportinfo/delete?ids=${this.$route.query.id}`).then(res => { | ||||
|           if (res.code == 0) { | ||||
|             this.$message.success('删除成功!') | ||||
|             this.getList() | ||||
|           } | ||||
|         }) | ||||
|       }) | ||||
|     }, | ||||
|  | ||||
|     cancel(isRefresh) { | ||||
|       this.$emit('change', { | ||||
|         type: 'list', | ||||
|         isRefresh: !!isRefresh | ||||
|       }) | ||||
|     }, | ||||
|  | ||||
|     initMap() { | ||||
|       let {lng, lat} = this.detail | ||||
|       let center = [lng, lat] | ||||
|       AMapLoader.load({ | ||||
|         key: 'b553334ba34f7ac3cd09df9bc8b539dc', | ||||
|         version: '2.0' | ||||
|       }).then(AMap => { | ||||
|         let map = new AMap.Map('map', { | ||||
|           center, | ||||
|           zoom: 14 | ||||
|         }) | ||||
|         let marker = new AMap.Marker({ | ||||
|           position: new AMap.LngLat(lng, lat), | ||||
|           title: this.detail.address | ||||
|         }) | ||||
|         map.add(marker) | ||||
|       }) | ||||
|     }, | ||||
|  | ||||
|     handleEvent() { | ||||
|       this.$refs.form.validate(v => { | ||||
|         if (v) { | ||||
|           this.instance.post('/app/apppatrolreportinfo/finishByGirdMember', { | ||||
|             ...this.form, | ||||
|             groupName: this.dictList.filter(v => v.dictValue === this.form.groupId)[0].dictName, | ||||
|             id: this.$route.query.id | ||||
|           }).then(res => { | ||||
|             if (res?.code == 0) { | ||||
|               this.isShowAdd = false | ||||
|               this.getDetail() | ||||
|               this.$message.success('处理成功!') | ||||
|             } | ||||
|           }) | ||||
|         } | ||||
|       }) | ||||
|     } | ||||
|   } | ||||
| } | ||||
| </script> | ||||
|  | ||||
| <style lang="scss" scoped> | ||||
| .reportAtWillDetail { | ||||
|   height: 100%; | ||||
|  | ||||
|   .grid-wrapper { | ||||
|     min-height: 360px; | ||||
|   } | ||||
|  | ||||
|   .title-btns { | ||||
|     display: flex; | ||||
|     align-items: center; | ||||
|   } | ||||
|  | ||||
|   :deep( .el-tree ) { | ||||
|     background: transparent; | ||||
|  | ||||
|     .el-tree-node__expand-icon.is-leaf { | ||||
|       color: transparent !important; | ||||
|     } | ||||
|  | ||||
|     .el-tree-node__content > .el-tree-node__expand-icon { | ||||
|       padding: 4px; | ||||
|     } | ||||
|  | ||||
|     .el-tree-node__content { | ||||
|       height: 32px; | ||||
|     } | ||||
|  | ||||
|     .el-tree__empty-text { | ||||
|       color: #222; | ||||
|       font-size: 14px; | ||||
|     } | ||||
|  | ||||
|     .el-tree-node__children .el-tree-node__content { | ||||
|       height: 32px; | ||||
|     } | ||||
|  | ||||
|     .el-tree-node__content:hover { | ||||
|       background: #E8EFFF; | ||||
|       color: #222222; | ||||
|       border-radius: 2px; | ||||
|     } | ||||
|  | ||||
|     .is-current > .el-tree-node__content { | ||||
|       &:hover { | ||||
|         background: #2266FF; | ||||
|         color: #fff; | ||||
|       } | ||||
|  | ||||
|       background: #2266FF; | ||||
|  | ||||
|       span { | ||||
|         color: #fff; | ||||
|       } | ||||
|     } | ||||
|   } | ||||
|  | ||||
|   .el-steps { | ||||
|     :deep( .el-step__icon ) { | ||||
|       font-size: 12px; | ||||
|       color: #555555; | ||||
|       border-color: #d0d4dc; | ||||
|     } | ||||
|  | ||||
|     :deep( .el-step__head.is-finish ) { | ||||
|       .el-step__icon.is-text { | ||||
|         border: none; | ||||
|         color: #fff; | ||||
|         font-size: 12px; | ||||
|         background: #2266ff; | ||||
|       } | ||||
|     } | ||||
|  | ||||
|     :deep( .el-step__line ) { | ||||
|       background-color: #d0d4dc; | ||||
|     } | ||||
|   } | ||||
|  | ||||
|   .imgs { | ||||
|     font-size: 0; | ||||
|  | ||||
|     img { | ||||
|       width: 108px; | ||||
|       height: 108px; | ||||
|       margin-right: 4px; | ||||
|       margin-bottom: 4px; | ||||
|       cursor: pointer; | ||||
|       user-select: none; | ||||
|  | ||||
|       &:hover { | ||||
|         opacity: 0.8; | ||||
|       } | ||||
|  | ||||
|       &:nth-of-type(2n) { | ||||
|         margin-right: 0; | ||||
|       } | ||||
|     } | ||||
|   } | ||||
|  | ||||
|   :deep( .report-dialog ) { | ||||
|     .el-select { | ||||
|       width: 100%; | ||||
|     } | ||||
|   } | ||||
|  | ||||
|   :deep( .el-step__head.is-process ) { | ||||
|     color: #555; | ||||
|     border-color: #555; | ||||
|   } | ||||
|  | ||||
|   :deep( .is-finish h2 ) { | ||||
|     color: #2266ff; | ||||
|   } | ||||
|  | ||||
|   .step-title { | ||||
|     color: #555; | ||||
|   } | ||||
|  | ||||
|   .detail-content__wrapper { | ||||
|     display: flex; | ||||
|     width: 100%; | ||||
|     flex-wrap: wrap; | ||||
|  | ||||
|     .detail-content__wrapper--left { | ||||
|       flex: 1; | ||||
|       margin-right: 20px; | ||||
|     } | ||||
|   } | ||||
|  | ||||
|   :deep( .ai-detail__content ) { | ||||
|     background: #f3f6f9; | ||||
|  | ||||
|     .ai-detail__content--wrapper { | ||||
|       display: flex; | ||||
|       gap: 16px; | ||||
|       width: 100%; | ||||
|       max-width: 100%; | ||||
|       padding: 16px; | ||||
|       box-sizing: border-box; | ||||
|  | ||||
|       & > .el-card { | ||||
|         flex: 1; | ||||
|         min-width: 0; | ||||
|       } | ||||
|  | ||||
|       .rightZone { | ||||
|         width: 400px; | ||||
|         flex-shrink: 0; | ||||
|         display: flex; | ||||
|         flex-direction: column; | ||||
|         gap: 16px; | ||||
|       } | ||||
|     } | ||||
|   } | ||||
|  | ||||
|   :deep( .el-card ) { | ||||
|     .el-card__header { | ||||
|       padding: 12px 16px; | ||||
|       font-weight: bold; | ||||
|     } | ||||
|  | ||||
|     .el-card__body { | ||||
|       padding: 8px; | ||||
|     } | ||||
|  | ||||
|     #amap { | ||||
|       width: 466px; | ||||
|       height: 232px; | ||||
|     } | ||||
|  | ||||
|     .el-steps { | ||||
|       margin-left: 8px; | ||||
|     } | ||||
|  | ||||
|     .imgFormItem > .el-form-item__content { | ||||
|       display: flex; | ||||
|       gap: 16px; | ||||
|       flex-wrap: wrap; | ||||
|  | ||||
|       &:before { | ||||
|         content: none; | ||||
|       } | ||||
|  | ||||
|       .el-image__inner { | ||||
|         width: 82px; | ||||
|         height: 82px; | ||||
|       } | ||||
|     } | ||||
|   } | ||||
| } | ||||
| </style> | ||||
							
								
								
									
										245
									
								
								project/lulong/AppReportAiWill/components/List.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										245
									
								
								project/lulong/AppReportAiWill/components/List.vue
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,245 @@ | ||||
| <template> | ||||
|   <ai-list> | ||||
|     <template #title> | ||||
|       <ai-title :title="menuName" isShowBottomBorder> | ||||
|         <el-button type="primary" slot="rightBtn" @click="toSetting">事件类型设置</el-button> | ||||
|       </ai-title> | ||||
|     </template> | ||||
|     <template #content> | ||||
|       <ai-search-bar> | ||||
|         <template #left> | ||||
|           <ai-select | ||||
|             v-model="search.eventStatus" | ||||
|             clearable | ||||
|             placeholder="处理状态" | ||||
|             :selectList="dict.getDict('clapEventStatus')" | ||||
|             @change="search.current = 1, getList()"> | ||||
|           </ai-select> | ||||
|           <ai-select | ||||
|             v-model="search.eventSource" | ||||
|             clearable | ||||
|             placeholder="事件来源" | ||||
|             :selectList="dict.getDict('residentEventSource')" | ||||
|             @change="search.current = 1, getList()"> | ||||
|           </ai-select> | ||||
|           <ai-select | ||||
|             v-model="search.groupId" | ||||
|             clearable | ||||
|             placeholder="事件类型" | ||||
|             :selectList="typeList" | ||||
|             @change="search.current = 1, getList()"> | ||||
|           </ai-select> | ||||
|           <el-cascader ref="cascader1" v-model="girdArr" :options="girdOptions" placeholder="所属网格" size="small" | ||||
|             :props="defaultProps" :show-all-levels="false" @change="gridChange" clearable></el-cascader> | ||||
|           <el-date-picker size="small" v-model="searchDotime" type="daterange" range-separator="至" @change="timeChange" | ||||
|             start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd"></el-date-picker> | ||||
|         </template> | ||||
|         <template #right> | ||||
|           <el-input | ||||
|               v-model="search.content" | ||||
|               class="search-input" | ||||
|               size="small" | ||||
|               v-throttle="() => {search.current = 1, getList()}" | ||||
|               placeholder="请输入内容描述/上报人员/联系方式" | ||||
|               clearable | ||||
|               @change="getList" | ||||
|               @clear="search.current = 1, search.content = '', getList()" | ||||
|               suffix-icon="iconfont iconSearch"> | ||||
|           </el-input> | ||||
|         </template> | ||||
|       </ai-search-bar> | ||||
|       <ai-table :tableData="tableData" :colConfigs="colConfigs" :total="total" :current.sync="search.current" :size.sync="search.size" @getList="getList"> | ||||
|         <el-table-column slot="options" label="操作" fixed="right" width="120" align="center"> | ||||
|           <div class="table-options" slot-scope="{row}"> | ||||
|             <el-button type="text" title="详情" @click="toDetail(row.id)">详情</el-button> | ||||
|             <el-button type="text" title="删除" @click="handleDelete(row.id)">删除</el-button> | ||||
|           </div> | ||||
|         </el-table-column> | ||||
|       </ai-table> | ||||
|     </template> | ||||
|   </ai-list> | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
| import {mapState} from 'vuex' | ||||
|  | ||||
| export default { | ||||
|   name: 'List', | ||||
|   label: "巡查上报", | ||||
|  | ||||
|   props: { | ||||
|     instance: Function, | ||||
|     dict: Object, | ||||
|     menuName: String | ||||
|   }, | ||||
|  | ||||
|   data() { | ||||
|     return { | ||||
|       userList: [], | ||||
|       search: { | ||||
|         current: 1, | ||||
|         size: 10, | ||||
|         eventStatus: '', | ||||
|         content: '', | ||||
|         eventSource: '', | ||||
|         groupId: '', | ||||
|         createTimeStart: '', | ||||
|         createTimeEnd: '', | ||||
|         girdId: '' | ||||
|       }, | ||||
|       total: 0, | ||||
|       tableData: [], | ||||
|       content: '', | ||||
|       id: '', | ||||
|       girdId: '', | ||||
|       girdArr: [], | ||||
|       girdOptions: [], | ||||
|       defaultProps: { | ||||
|         label: 'girdName', | ||||
|         value: 'id', | ||||
|         children: 'children', | ||||
|         checkStrictly: true, | ||||
|       }, | ||||
|       searchDotime: [], | ||||
|       typeList: [] | ||||
|     } | ||||
|   }, | ||||
|  | ||||
|   computed: { | ||||
|     ...mapState(['user']), | ||||
|  | ||||
|     colConfigs() { | ||||
|       return [ | ||||
|         {prop: 'content', label: '内容描述', width: '300px'}, | ||||
|         {prop: 'eventSource', label: '事件来源', align: 'center', dict: 'residentEventSource'}, | ||||
|         {prop: 'groupName', label: '事件类型', align: 'center'}, | ||||
|         {prop: 'girdName', label: '所属网格', align: 'center'}, | ||||
|         {prop: 'createTime', label: '上报时间', align: 'center'}, | ||||
|         {prop: 'name', label: '上报人员', align: 'center'}, | ||||
|         {prop: 'phone', label: '联系方式', align: 'center'}, | ||||
|         {prop: 'eventStatus', label: '处理状态', align: 'center', format: v => this.dict.getLabel('clapEventStatus', v)}, | ||||
|         {prop: 'processTime', label: '处理时长', align: 'center'}, | ||||
|         {slot: 'options'} | ||||
|       ] | ||||
|     }, | ||||
|  | ||||
|     handleStatusOps() { | ||||
|       return this.dict.getDict("reportAtWillHandleStatus").map(e => ({label: e.dictName, value: e.dictValue})) | ||||
|     } | ||||
|   }, | ||||
|  | ||||
|   created() { | ||||
|     this.dict.load('clapEventStatus', 'residentEventSource').then(() => { | ||||
|       this.getList() | ||||
|       this.getGridList() | ||||
|       this.getTypeList() | ||||
|     }) | ||||
|   }, | ||||
|  | ||||
|   methods: { | ||||
|     timeChange() { | ||||
|       if (this.searchDotime) { | ||||
|         this.search.createTimeStart = this.searchDotime[0] | ||||
|         this.search.createTimeEnd = this.searchDotime[1] | ||||
|       } else { | ||||
|         this.search.createTimeStart = null | ||||
|         this.search.createTimeEnd = null | ||||
|       } | ||||
|       this.search.current = 1 | ||||
|       this.getList() | ||||
|     }, | ||||
|     // 所有网格 | ||||
|     getGridList() { | ||||
|       this.instance.post(`/app/apppatrolreportinfo/listAll3`).then((res) => { | ||||
|         if (res?.code == 0) { | ||||
|           this.girdOptions = this.toTree(res.data) | ||||
|         } | ||||
|       }) | ||||
|     }, | ||||
|     // 转树形结构 | ||||
|     toTree(data) { | ||||
|       let result = []; | ||||
|       if (!Array.isArray(data)) { | ||||
|         return result | ||||
|       } | ||||
|       let map = {}; | ||||
|       data.forEach(item => { | ||||
|         map[item.id] = item; | ||||
|       }); | ||||
|       data.forEach(item => { | ||||
|         let parent = map[item.parentGirdId]; | ||||
|         if (parent) { | ||||
|           (parent.children || (parent.children = [])).push(item); | ||||
|         } else { | ||||
|           result.push(item); | ||||
|         } | ||||
|       }); | ||||
|       return result; | ||||
|     }, | ||||
|     gridChange(val) { | ||||
|       this.girdArr = val | ||||
|       this.search.girdId = val?.[val.length - 1] | ||||
|       this.$refs.cascader1.dropDownVisible = false; | ||||
|       this.search.current = 1 | ||||
|       this.getList() | ||||
|     }, | ||||
|     getList() { | ||||
|       this.instance.post(`/app/apppatrolreportinfo/list`, null, { | ||||
|         params: { | ||||
|           ...this.search | ||||
|         } | ||||
|       }).then(res => { | ||||
|         if (res.code == 0) { | ||||
|           this.tableData = res.data.records | ||||
|           this.total = res.data.total | ||||
|         } | ||||
|       }) | ||||
|     }, | ||||
|  | ||||
|     toDetail(id) { | ||||
|       this.$emit('change', { | ||||
|         type: 'Detail', | ||||
|         params: { | ||||
|           id: id || '' | ||||
|         } | ||||
|       }) | ||||
|     }, | ||||
|  | ||||
|     toSetting() { | ||||
|       this.$emit('change', { | ||||
|         type: 'Setting', | ||||
|         params: { | ||||
|           id: '' | ||||
|         } | ||||
|       }) | ||||
|     }, | ||||
|     handleDelete(ids) { | ||||
|       this.$confirm("是否要进行删除?").then(() => { | ||||
|         this.instance.post("/app/apppatrolreportinfo/delete", null, { | ||||
|           params: {ids} | ||||
|         }).then(res => { | ||||
|           if (res?.code == 0) { | ||||
|             this.$message.success("删除成功!") | ||||
|             this.getList() | ||||
|           } | ||||
|         }) | ||||
|       }).catch(() => 0) | ||||
|     }, | ||||
|     getTypeList() { | ||||
|       this.instance.post(`/app/apppatrolreportgroup/list?size=10000`).then(res => { | ||||
|         if (res.code == 0) { | ||||
|           res.data.records.map((item) => { | ||||
|             item.dictName = item.groupName | ||||
|             item.dictValue = item.id | ||||
|           }) | ||||
|           this.typeList = res.data.records | ||||
|         } | ||||
|       }) | ||||
|     } | ||||
|   }, | ||||
|    | ||||
| } | ||||
| </script> | ||||
|  | ||||
| <style lang="scss" scoped> | ||||
| </style> | ||||
							
								
								
									
										178
									
								
								project/lulong/AppReportAiWill/components/Setting.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										178
									
								
								project/lulong/AppReportAiWill/components/Setting.vue
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,178 @@ | ||||
| <template> | ||||
|   <ai-list class="notice"> | ||||
|     <template slot="title"> | ||||
|       <ai-title  isShowBack isShowBottomBorder title="事件类型" @onBackClick="cancel(false)"></ai-title> | ||||
|     </template> | ||||
|     <template slot="content"> | ||||
|       <ai-search-bar class="search-bar"> | ||||
|         <template #left> | ||||
|           <el-button size="small" type="primary" icon="iconfont iconAdd" @click="isShowAdd = true">添加事件类型</el-button> | ||||
|         </template> | ||||
|         <template slot="right"> | ||||
|           <el-input | ||||
|             v-model="search.groupName" | ||||
|             class="search-input" | ||||
|             size="small" | ||||
|             v-throttle="() => {search.current = 1, getList()}" | ||||
|             placeholder="请输入事件类型名称" | ||||
|             clearable | ||||
|             @change="getList" | ||||
|             @clear="search.current = 1, search.groupName = '', getList()" | ||||
|             suffix-icon="iconfont iconSearch"> | ||||
|           </el-input> | ||||
|         </template> | ||||
|       </ai-search-bar> | ||||
|       <ai-table | ||||
|         :tableData="tableData" | ||||
|         :col-configs="colConfigs" | ||||
|         :total="total" | ||||
|         style="margin-top: 6px;" | ||||
|         :current.sync="search.current" | ||||
|         :size.sync="search.size" | ||||
|         @getList="getList"> | ||||
|         <el-table-column slot="tags" label="标签"> | ||||
|           <template slot-scope="{ row }"> | ||||
|             <div class="table-tags"> | ||||
|               <el-tag type="info" v-for="(item, index) in row.tags" size="small" :key="index">{{ item }}</el-tag> | ||||
|             </div> | ||||
|           </template> | ||||
|         </el-table-column> | ||||
|         <el-table-column slot="options" width="120px" fixed="right" label="操作" align="center"> | ||||
|           <div class="table-options" slot-scope="{ row }"> | ||||
|             <el-button type="text" @click="edit(row)">编辑</el-button> | ||||
|             <el-button type="text" @click="remove(row.id)">删除</el-button> | ||||
|           </div> | ||||
|         </el-table-column> | ||||
|       </ai-table> | ||||
|       <ai-dialog | ||||
|         :visible.sync="isShowAdd" | ||||
|         width="780px" | ||||
|         height="580px" | ||||
|         :title="id ? '编辑事件类型' : '添加事件类型'" | ||||
|         @close="onClose" | ||||
|         @onConfirm="onConfirm"> | ||||
|         <el-form ref="form" class="ai-form" :model="form" label-width="110px" label-position="right"> | ||||
|           <el-form-item label="事件类型" prop="groupName" style="width: 100%;" :rules="[{ required: true, message: '请输入事件类型名称', trigger: 'blur' }]"> | ||||
|             <el-input size="small" :maxlength="10" show-word-limit placeholder="请输入事件类型名称" v-model="form.groupName"></el-input> | ||||
|           </el-form-item> | ||||
|           <el-form-item label="排序" prop="showIndex" style="width: 100%;" :rules="[{ required: true, message: '请输入排序', trigger: 'blur' }]"> | ||||
|             <el-input-number size="small" v-model="form.showIndex" :min="1" :max="100" label="请输入排序"></el-input-number> | ||||
|           </el-form-item> | ||||
|         </el-form> | ||||
|       </ai-dialog> | ||||
|     </template> | ||||
|   </ai-list> | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
|   import { mapState } from 'vuex' | ||||
|   export default { | ||||
|     name: 'List', | ||||
|  | ||||
|     props: { | ||||
|       instance: Function, | ||||
|       dict: Object | ||||
|     }, | ||||
|  | ||||
|     data() { | ||||
|       return { | ||||
|         search: { | ||||
|           current: 1, | ||||
|           size: 10, | ||||
|           groupName: '' | ||||
|         }, | ||||
|         form: { | ||||
|           groupName: '', | ||||
|           showIndex: '' | ||||
|         }, | ||||
|         id: '', | ||||
|         isShowAdd: false, | ||||
|         total: 0, | ||||
|         colConfigs: [ | ||||
|           {prop: 'groupName', label: '事件类型', align: 'left'}, | ||||
|           {prop: 'showIndex', label: '排序', align: 'center'}, | ||||
|           {slot: 'options', label: '操作'} | ||||
|         ], | ||||
|         tableData: [] | ||||
|       } | ||||
|     }, | ||||
|  | ||||
|     computed: { | ||||
|       ...mapState(['user']) | ||||
|     }, | ||||
|  | ||||
|     mounted() { | ||||
|       this.getList() | ||||
|     }, | ||||
|  | ||||
|     methods: { | ||||
|       getList() { | ||||
|         this.instance.post(`/app/apppatrolreportgroup/list`, null, { | ||||
|           params: { | ||||
|             ...this.search | ||||
|           } | ||||
|         }).then(res => { | ||||
|           if (res.code == 0) { | ||||
|             this.tableData = res.data.records | ||||
|             this.total = res.data.total | ||||
|           } | ||||
|         }) | ||||
|       }, | ||||
|  | ||||
|       edit (e) { | ||||
|         this.id = e.id | ||||
|         this.form.groupName = e.groupName | ||||
|         this.form.showIndex = '' | ||||
|  | ||||
|         this.$nextTick(() => { | ||||
|           this.isShowAdd = true | ||||
|         }) | ||||
|       }, | ||||
|  | ||||
|       onClose () { | ||||
|         this.id = '' | ||||
|         this.form.showIndex = '' | ||||
|         this.form.groupName = '' | ||||
|       }, | ||||
|  | ||||
|       onConfirm () { | ||||
|         this.$refs.form.validate((valid) => { | ||||
|           if (valid) { | ||||
|             this.instance.post(`/app/apppatrolreportgroup/addOrUpdate`, { | ||||
|               ...this.form, | ||||
|               id: this.id || null | ||||
|             }).then(res => { | ||||
|               if (res.code === 0) { | ||||
|                 this.$message.success('添加成功') | ||||
|                 this.isShowAdd = false | ||||
|  | ||||
|                 this.getList() | ||||
|               } | ||||
|             }) | ||||
|           } | ||||
|         }) | ||||
|       }, | ||||
|  | ||||
|       cancel (isRefresh) { | ||||
|         this.$emit('change', { | ||||
|           type: 'list', | ||||
|           isRefresh: !!isRefresh | ||||
|         }) | ||||
|       }, | ||||
|  | ||||
|       remove(id) { | ||||
|         this.$confirm('确定删除该数据?').then(() => { | ||||
|           this.instance.post(`/app/apppatrolreportgroup/delete?ids=${id}`).then(res => { | ||||
|             if (res.code == 0) { | ||||
|               this.$message.success('删除成功!') | ||||
|               this.getList() | ||||
|             } | ||||
|           }) | ||||
|         }) | ||||
|       } | ||||
|     } | ||||
|   } | ||||
| </script> | ||||
|  | ||||
| <style lang="scss" scoped> | ||||
| </style> | ||||
		Reference in New Issue
	
	Block a user