|
@@ -1,66 +1,125 @@
|
|
|
<template>
|
|
<template>
|
|
|
- <div class="app-container">
|
|
|
|
|
- <el-form :model="queryParams" :inline="true" v-show="showSearch">
|
|
|
|
|
- <el-form-item label="行政区划">
|
|
|
|
|
- <el-input v-model="queryParams.adCode" placeholder="请输入行政区划编码" clearable style="width:180px" />
|
|
|
|
|
- </el-form-item>
|
|
|
|
|
- <el-form-item label="事件类型">
|
|
|
|
|
- <el-input v-model="queryParams.evType" placeholder="请输入事件类型" clearable style="width:150px" />
|
|
|
|
|
- </el-form-item>
|
|
|
|
|
- <el-form-item label="关键词">
|
|
|
|
|
- <el-input v-model="queryParams.keyWord" placeholder="河段名/描述/区划" clearable style="width:200px" @keyup.enter="getList" />
|
|
|
|
|
- </el-form-item>
|
|
|
|
|
- <el-form-item>
|
|
|
|
|
- <el-button type="primary" icon="Search" @click="getList">搜索</el-button>
|
|
|
|
|
- <el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
|
|
|
|
- </el-form-item>
|
|
|
|
|
- </el-form>
|
|
|
|
|
|
|
+ <div class="eventclear-page">
|
|
|
|
|
+ <!-- 搜索 -->
|
|
|
|
|
+ <el-card shadow="never" class="search-card">
|
|
|
|
|
+ <el-form :model="q" :inline="true" size="small">
|
|
|
|
|
+ <el-form-item label="所在河湖">
|
|
|
|
|
+ <el-select v-model="q.objectType" placeholder="全部" clearable style="width:130px" @change="getList">
|
|
|
|
|
+ <el-option label="太湖" value="0" /><el-option label="望虞河" value="1" /><el-option label="太浦河" value="2" />
|
|
|
|
|
+ </el-select>
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ <el-form-item label="处理状态">
|
|
|
|
|
+ <el-select v-model="q.status" placeholder="全部" clearable style="width:110px" @change="getList">
|
|
|
|
|
+ <el-option label="待处理" value="0" /><el-option label="处理中" value="1" /><el-option label="完成" value="2" /><el-option label="完结" value="3" />
|
|
|
|
|
+ </el-select>
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ <el-form-item label="事件类型">
|
|
|
|
|
+ <el-select v-model="q.evType" placeholder="全部" clearable style="width:110px" @change="getList">
|
|
|
|
|
+ <el-option label="乱占" value="1" /><el-option label="乱采" value="2" /><el-option label="乱堆" value="3" /><el-option label="乱建" value="4" /><el-option label="其他" value="5" />
|
|
|
|
|
+ </el-select>
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ <el-form-item label="关键词"><el-input v-model="q.keyWord" placeholder="河段名/描述" clearable style="width:160px" @keyup.enter="getList" /></el-form-item>
|
|
|
|
|
+ <el-form-item><el-button type="primary" icon="Search" @click="getList">搜索</el-button></el-form-item>
|
|
|
|
|
+ <el-form-item><el-button @click="resetQ">重置</el-button></el-form-item>
|
|
|
|
|
+ </el-form>
|
|
|
|
|
+ </el-card>
|
|
|
|
|
|
|
|
- <el-row :gutter="10" class="mb8">
|
|
|
|
|
- <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" />
|
|
|
|
|
- </el-row>
|
|
|
|
|
|
|
+ <!-- 列表 -->
|
|
|
|
|
+ <el-card shadow="never">
|
|
|
|
|
+ <el-table :data="list" border size="small" v-loading="loading" @row-click="showDetail">
|
|
|
|
|
+ <el-table-column type="index" label="#" width="50" />
|
|
|
|
|
+ <el-table-column prop="objectName" label="河段名称" show-overflow-tooltip width="140" />
|
|
|
|
|
+ <el-table-column prop="adName" label="所属地区" width="100" />
|
|
|
|
|
+ <el-table-column label="事件类型" width="80">
|
|
|
|
|
+ <template #default="{row}">{{ evTypeMap[row.evType] || row.evType }}</template>
|
|
|
|
|
+ </el-table-column>
|
|
|
|
|
+ <el-table-column prop="eventDesc" label="问题描述" show-overflow-tooltip min-width="200" />
|
|
|
|
|
+ <el-table-column label="状态" width="80">
|
|
|
|
|
+ <template #default="{row}">{{ statusMap[row.status] || row.status }}</template>
|
|
|
|
|
+ </el-table-column>
|
|
|
|
|
+ <el-table-column prop="dealDesc" label="整改情况" show-overflow-tooltip width="150" />
|
|
|
|
|
+ <el-table-column prop="findTs" label="发现时间" width="120" />
|
|
|
|
|
+ <el-table-column prop="userName" label="上报人" width="100" />
|
|
|
|
|
+ </el-table>
|
|
|
|
|
+ <pagination v-show="total>0" :total="total" v-model:page="pageNum" v-model:limit="pageSize" @pagination="getList" />
|
|
|
|
|
+ </el-card>
|
|
|
|
|
|
|
|
- <el-table v-loading="loading" :data="eventList" border>
|
|
|
|
|
- <el-table-column label="序号" type="index" width="55" align="center" />
|
|
|
|
|
- <el-table-column label="河段名称" prop="OBJECT_NAME" :show-overflow-tooltip="true" width="150" />
|
|
|
|
|
- <el-table-column label="事件类型" prop="EV_TYPE" width="110" />
|
|
|
|
|
- <el-table-column label="事件类别" prop="EVENT_TYPES" width="110" />
|
|
|
|
|
- <el-table-column label="问题描述" prop="EVENT_DESC" :show-overflow-tooltip="true" min-width="200" />
|
|
|
|
|
- <el-table-column label="当前情况" prop="STATUS" width="100" />
|
|
|
|
|
- <el-table-column label="整改情况" prop="DEAL_DESC" :show-overflow-tooltip="true" width="150" />
|
|
|
|
|
- <el-table-column label="检查情况" width="100">
|
|
|
|
|
- <template #default="scope">{{ scope.row.STATUS === '1' ? '已整改' : '未整改' }}</template>
|
|
|
|
|
- </el-table-column>
|
|
|
|
|
- <el-table-column label="发现时间" prop="FIND_TS" width="160" />
|
|
|
|
|
- <el-table-column label="整改完成" prop="DONE_DATE" width="160" />
|
|
|
|
|
- <el-table-column label="上报人" prop="USER_NAME" width="100" />
|
|
|
|
|
- <el-table-column label="行政区域" prop="AD_NAME" width="150" />
|
|
|
|
|
- </el-table>
|
|
|
|
|
- <pagination v-show="total > 0" :total="total" v-model:page="pageNum" v-model:limit="pageSize" @pagination="getList" />
|
|
|
|
|
|
|
+ <!-- 详情弹窗 -->
|
|
|
|
|
+ <el-dialog v-model="dlg" :title="cur?.objectName || '事件详情'" width="900px" top="5vh">
|
|
|
|
|
+ <div class="detail-grid" v-if="cur">
|
|
|
|
|
+ <div class="detail-left">
|
|
|
|
|
+ <table class="info-table">
|
|
|
|
|
+ <tr><td class="lbl">河段名称</td><td>{{ cur.objectName }}</td></tr>
|
|
|
|
|
+ <tr><td class="lbl">问题描述</td><td>{{ cur.eventDesc }}</td></tr>
|
|
|
|
|
+ <tr><td class="lbl">当前情况</td><td>{{ cur.curs || '-' }}</td></tr>
|
|
|
|
|
+ <tr><td class="lbl">整改情况</td><td>{{ cur.dealDesc || '-' }}</td></tr>
|
|
|
|
|
+ <tr><td class="lbl">检查情况</td><td>{{ cur.checkQk || '-' }}</td></tr>
|
|
|
|
|
+ <tr><td class="lbl">所属省份</td><td>{{ cur.adName }}</td><td class="lbl">事件类型</td><td>{{ evTypeMap[cur.evType] }}</td></tr>
|
|
|
|
|
+ <tr><td class="lbl">发现日期</td><td>{{ cur.findTs }}</td><td class="lbl">完成日期</td><td>{{ cur.doneDate }}</td></tr>
|
|
|
|
|
+ <tr><td class="lbl">经度</td><td>{{ cur.longitude }}</td><td class="lbl">纬度</td><td>{{ cur.latitude }}</td></tr>
|
|
|
|
|
+ </table>
|
|
|
|
|
+ <!-- 图片轮播 -->
|
|
|
|
|
+ <div v-if="cur.images?.length" style="margin-top:12px">
|
|
|
|
|
+ <el-carousel height="220px" indicator-position="outside">
|
|
|
|
|
+ <el-carousel-item v-for="(img,i) in cur.images" :key="i">
|
|
|
|
|
+ <img :src="img" style="width:100%;height:100%;object-fit:contain;cursor:pointer" @click="previewImg(img)" />
|
|
|
|
|
+ </el-carousel-item>
|
|
|
|
|
+ </el-carousel>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="detail-right">
|
|
|
|
|
+ <h4>检查记录</h4>
|
|
|
|
|
+ <div v-if="cur.checks?.length">
|
|
|
|
|
+ <div v-for="(c,i) in cur.checks" :key="i" class="check-item">
|
|
|
|
|
+ <p><strong>检查人:</strong>{{ c.fPerson }} <strong>日期:</strong>{{ c.cDate }}</p>
|
|
|
|
|
+ <p><strong>情况:</strong>{{ c.cState }}</p>
|
|
|
|
|
+ <div v-if="c.files?.length" style="display:flex;gap:6px;flex-wrap:wrap">
|
|
|
|
|
+ <img v-for="(f,j) in c.files" :key="j" :src="f" style="width:80px;height:60px;object-fit:cover;cursor:pointer" @click="previewImg(f)" />
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <el-empty v-else description="暂无检查记录" :image-size="40" />
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
</div>
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<script setup>
|
|
<script setup>
|
|
|
-import { ref, onMounted } from 'vue'
|
|
|
|
|
-import { listEventClear } from '@/api/hzz/eventclear'
|
|
|
|
|
|
|
+import {ref, onMounted} from 'vue'
|
|
|
|
|
+import {listEventClear} from '@/api/hzz/eventclear'
|
|
|
|
|
|
|
|
-const showSearch = ref(true)
|
|
|
|
|
-const loading = ref(false)
|
|
|
|
|
-const total = ref(0)
|
|
|
|
|
-const pageNum = ref(1)
|
|
|
|
|
-const pageSize = ref(10)
|
|
|
|
|
-const eventList = ref([])
|
|
|
|
|
-const queryParams = ref({ adCode: '', evType: '', keyWord: '', objectType: '' })
|
|
|
|
|
|
|
+const loading=ref(false),list=ref([]),total=ref(0),pageNum=ref(1),pageSize=ref(10)
|
|
|
|
|
+const q=ref({objectType:'',status:'',evType:'',keyWord:''})
|
|
|
|
|
+const dlg=ref(false),cur=ref(null)
|
|
|
|
|
|
|
|
-const getList = async () => {
|
|
|
|
|
- loading.value = true
|
|
|
|
|
- try {
|
|
|
|
|
- const res = await listEventClear({ ...queryParams.value, pageNum: pageNum.value, pageSize: pageSize.value })
|
|
|
|
|
- eventList.value = res.rows || []
|
|
|
|
|
- total.value = res.total || 0
|
|
|
|
|
- } finally { loading.value = false }
|
|
|
|
|
-}
|
|
|
|
|
-const resetQuery = () => { queryParams.value = { adCode: '', evType: '', keyWord: '', objectType: '' }; getList() }
|
|
|
|
|
|
|
+const evTypeMap={1:'乱占',2:'乱采',3:'乱堆',4:'乱建',5:'其他'}
|
|
|
|
|
+const statusMap={0:'待处理',1:'处理中',2:'完成',3:'完结'}
|
|
|
|
|
|
|
|
-onMounted(() => getList())
|
|
|
|
|
|
|
+const getList=async()=>{
|
|
|
|
|
+ loading.value=true
|
|
|
|
|
+ try{const r=await listEventClear({...q.value,pageNum:pageNum.value,pageSize:pageSize.value});list.value=r.rows||[];total.value=r.total||0}
|
|
|
|
|
+ finally{loading.value=false}
|
|
|
|
|
+}
|
|
|
|
|
+const resetQ=()=>{q.value={objectType:'',status:'',evType:'',keyWord:''};getList()}
|
|
|
|
|
+const showDetail=(row)=>{
|
|
|
|
|
+ cur.value={...row,images:row.images||[],checks:row.checks||[]}
|
|
|
|
|
+ dlg.value=true
|
|
|
|
|
+}
|
|
|
|
|
+const previewImg=(url)=>{window.open(url)}
|
|
|
|
|
+onMounted(()=>getList())
|
|
|
</script>
|
|
</script>
|
|
|
|
|
+
|
|
|
|
|
+<style scoped>
|
|
|
|
|
+.eventclear-page{padding:16px 20px;height:calc(100vh - 84px);overflow-y:auto;background:#f0f2f5}
|
|
|
|
|
+.search-card{margin-bottom:12px;border-radius:8px}
|
|
|
|
|
+.detail-grid{display:flex;gap:20px}
|
|
|
|
|
+.detail-left{flex:6}
|
|
|
|
|
+.detail-right{flex:4;border-left:1px solid #eee;padding-left:16px}
|
|
|
|
|
+.detail-right h4{margin:0 0 10px;font-size:14px;color:#333}
|
|
|
|
|
+.info-table{width:100%;border-collapse:collapse}
|
|
|
|
|
+.info-table td{padding:6px 8px;border:1px solid #e8e8e8;font-size:13px}
|
|
|
|
|
+.info-table .lbl{background:#f5f7fa;width:80px;text-align:right;color:#888}
|
|
|
|
|
+.check-item{background:#fafbfc;padding:10px;border-radius:6px;margin-bottom:8px}
|
|
|
|
|
+.check-item p{margin:4px 0;font-size:13px}
|
|
|
|
|
+</style>
|