2 changed files with 367 additions and 0 deletions
@ -0,0 +1,15 @@ |
|||||||
|
import request from "@/api/request"; |
||||||
|
|
||||||
|
export function alarmNotificationPages(query) { |
||||||
|
return request.post({ |
||||||
|
url: `/alarm/notification/pages`, |
||||||
|
body: query |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
export function alarmNotificationReply(data) { |
||||||
|
return request.post({ |
||||||
|
url: `/alarm/notification/reply`, |
||||||
|
body: data |
||||||
|
}); |
||||||
|
} |
||||||
@ -0,0 +1,352 @@ |
|||||||
|
<template> |
||||||
|
<div class="container"> |
||||||
|
<header> |
||||||
|
<el-form :label-width="120"> |
||||||
|
<el-row> |
||||||
|
<el-col :span="6"> |
||||||
|
<el-form-item label="预警类型"> |
||||||
|
<div class="flex gap"> |
||||||
|
<el-select |
||||||
|
v-model="query.alarmTypeId" |
||||||
|
style="min-width: 185px" |
||||||
|
> |
||||||
|
<el-option :value="-1" label="全部"/> |
||||||
|
<el-option :value="1" label="预警问题"/> |
||||||
|
<el-option :value="2" label="风险问题"/> |
||||||
|
</el-select> |
||||||
|
</div> |
||||||
|
</el-form-item> |
||||||
|
</el-col> |
||||||
|
<el-col :span="6"> |
||||||
|
<el-form-item label="预警时间"> |
||||||
|
<date-time-range-picker-ext |
||||||
|
v-model="query.discoveryTime" |
||||||
|
/> |
||||||
|
</el-form-item> |
||||||
|
</el-col> |
||||||
|
<el-col :span="6"> |
||||||
|
<el-form-item label="回复情况"> |
||||||
|
<div class="flex gap"> |
||||||
|
<el-select |
||||||
|
v-model="query.replyState" |
||||||
|
style="min-width: 185px" |
||||||
|
> |
||||||
|
<el-option :value="-1" label="全部"/> |
||||||
|
<el-option :value="1" label="已回复"/> |
||||||
|
<el-option :value="0" label="未回复"/> |
||||||
|
</el-select> |
||||||
|
</div> |
||||||
|
</el-form-item> |
||||||
|
</el-col> |
||||||
|
<el-col :span="6"> |
||||||
|
<el-form-item |
||||||
|
label="被通知单位" |
||||||
|
prop="involveDepartId" |
||||||
|
:rules="{ |
||||||
|
message: '请选择问题涉及单位', |
||||||
|
trigger: ['blur'], |
||||||
|
}" |
||||||
|
> |
||||||
|
<depart-tree-select |
||||||
|
v-model="formData.involveDepartId" |
||||||
|
:check-strictly="true" |
||||||
|
@node-click=" |
||||||
|
(row) => |
||||||
|
(formData.involveDepartName = |
||||||
|
row.shortName) |
||||||
|
" |
||||||
|
/> |
||||||
|
</el-form-item> |
||||||
|
</el-col> |
||||||
|
<el-col :span="6"> |
||||||
|
<el-form-item label="预警内容"> |
||||||
|
<el-input |
||||||
|
placeholder="请输入" |
||||||
|
v-model="query.alarmContent" |
||||||
|
clearable |
||||||
|
/> |
||||||
|
</el-form-item> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
</el-form> |
||||||
|
<div class="flex between mt-20 mb-26"> |
||||||
|
<div></div> |
||||||
|
<div> |
||||||
|
<el-button type="primary" @click="getList"> |
||||||
|
<template #icon |
||||||
|
> |
||||||
|
<icon name="el-icon-Search" |
||||||
|
/> |
||||||
|
</template> |
||||||
|
查询 |
||||||
|
</el-button |
||||||
|
> |
||||||
|
<el-button @click="reset">重置</el-button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</header> |
||||||
|
<main> |
||||||
|
<div class="table-container" v-loading="loading"> |
||||||
|
<el-table :data="list" ref="tableRef"> |
||||||
|
<el-table-column |
||||||
|
label="预警时间" |
||||||
|
prop="alarmTime" |
||||||
|
width="150" |
||||||
|
/> |
||||||
|
<el-table-column |
||||||
|
label="预警类型" |
||||||
|
prop="alarmType" |
||||||
|
width="90" |
||||||
|
/> |
||||||
|
<el-table-column |
||||||
|
label="被通知单位" |
||||||
|
prop="notificationDepartName" |
||||||
|
width="150" |
||||||
|
/> |
||||||
|
<el-table-column |
||||||
|
label="预警内容" |
||||||
|
prop="alarmContent" |
||||||
|
/> |
||||||
|
<el-table-column label="回复情况" width="110"> |
||||||
|
<template #default="{ row }"> |
||||||
|
<el-text v-if="row.replyState==1" class="mx-1">已回复</el-text> |
||||||
|
<el-text v-else type="warning" class="mx-1">未回复</el-text> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="操作" width="160"> |
||||||
|
<template #default="{ row }"> |
||||||
|
<el-button |
||||||
|
type="primary" |
||||||
|
link |
||||||
|
@click="handleAction(row)" |
||||||
|
>查看详情 |
||||||
|
</el-button> |
||||||
|
<el-button |
||||||
|
type="primary" |
||||||
|
link |
||||||
|
@click="handleEdit(row)" |
||||||
|
v-perms="['negative:edit']" |
||||||
|
>立即回复 |
||||||
|
</el-button> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
</div> |
||||||
|
<div class="flex end mt-8"> |
||||||
|
<el-pagination |
||||||
|
@size-change="getList" |
||||||
|
@current-change="getList" |
||||||
|
:current-page="query.current" |
||||||
|
:page-sizes="[10, 20, 50]" |
||||||
|
:page-size="query.size" |
||||||
|
v-model:current-page="query.current" |
||||||
|
layout="total, sizes, prev, pager, next" |
||||||
|
:total="total" |
||||||
|
> |
||||||
|
</el-pagination> |
||||||
|
</div> |
||||||
|
</main> |
||||||
|
<el-dialog v-model="editShow" title="回复问题" width="900px"> |
||||||
|
<el-form label-width="148" :model="formData" ref="formRef"> |
||||||
|
<el-form-item |
||||||
|
label="回复问题" |
||||||
|
prop="thingDesc" |
||||||
|
:rules="{ |
||||||
|
required: true, |
||||||
|
message: '请输入回复内容', |
||||||
|
trigger: ['blur'], |
||||||
|
}" |
||||||
|
> |
||||||
|
<el-input |
||||||
|
type="textarea" |
||||||
|
placeholder="请输入回复内容" |
||||||
|
v-model="formData.thingDesc" |
||||||
|
:autosize="{ minRows: 4 }" |
||||||
|
/> |
||||||
|
</el-form-item> |
||||||
|
</el-form> |
||||||
|
<footer class="flex end"> |
||||||
|
<el-button @click="editShow = false" size="large">取消</el-button> |
||||||
|
<el-button type="primary" @click="handleSumbit" size="large" |
||||||
|
>确定</el-button |
||||||
|
> |
||||||
|
</footer> |
||||||
|
</el-dialog> |
||||||
|
</div> |
||||||
|
|
||||||
|
</template> |
||||||
|
<script setup> |
||||||
|
import moment from "moment"; |
||||||
|
import {ElLoading} from "element-plus"; |
||||||
|
import { |
||||||
|
alarmNotificationPages, |
||||||
|
alarmNotificationReply |
||||||
|
} from "@/api/work/alarm"; |
||||||
|
import feedback from "@/utils/feedback"; |
||||||
|
|
||||||
|
import useCatchStore from "@/stores/modules/catch"; |
||||||
|
|
||||||
|
const catchStore = useCatchStore(); |
||||||
|
|
||||||
|
const query = ref({ |
||||||
|
current: 1, |
||||||
|
size: 10, |
||||||
|
alarmTypeId: -1, |
||||||
|
replyState: -1 |
||||||
|
}); |
||||||
|
|
||||||
|
const list = ref([]); |
||||||
|
const total = ref(0); |
||||||
|
|
||||||
|
const loading = ref(true); |
||||||
|
|
||||||
|
function getList() { |
||||||
|
let param = { |
||||||
|
current: query.value.current, |
||||||
|
size: query.value.size, |
||||||
|
} |
||||||
|
if(query.value.alarmTypeId != -1) { |
||||||
|
param['alarmTypeId'] = query.value.alarmTypeId |
||||||
|
} |
||||||
|
if(query.value.replyState != -1) { |
||||||
|
param['replyState'] = query.value.replyState |
||||||
|
} |
||||||
|
if(query.value.discoveryTime != undefined && query.value.discoveryTime != null) { |
||||||
|
param['startTime'] = query.value.discoveryTime[0] |
||||||
|
param['endTime'] = query.value.discoveryTime[1] |
||||||
|
} |
||||||
|
if(formData.value.involveDepartId != undefined) { |
||||||
|
param['notificationDepartCode'] = formData.value.involveDepartId |
||||||
|
} |
||||||
|
if(query.value.alarmContent != undefined) { |
||||||
|
param['alarmContent'] = query.value.alarmContent; |
||||||
|
} |
||||||
|
loading.value = true; |
||||||
|
alarmNotificationPages(param).then((data) => { |
||||||
|
list.value = data.records; |
||||||
|
total.value = data.total; |
||||||
|
loading.value = false; |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
function handleTableSort(orderObj) { |
||||||
|
if (orderObj.order) { |
||||||
|
query.value.order = orderObj.order |
||||||
|
query.value.orderProp = orderObj.prop |
||||||
|
} else { |
||||||
|
query.value.order = '' |
||||||
|
query.value.orderProp = '' |
||||||
|
} |
||||||
|
getList() |
||||||
|
} |
||||||
|
|
||||||
|
const tableRef = ref() |
||||||
|
|
||||||
|
function reset() { |
||||||
|
query.value = { |
||||||
|
current: 1, |
||||||
|
size: 10, |
||||||
|
responderKey: "name", |
||||||
|
}; |
||||||
|
tableRef.value.clearSort() |
||||||
|
getList(); |
||||||
|
// 重置路由 |
||||||
|
router.push("/query"); |
||||||
|
} |
||||||
|
|
||||||
|
const route = useRoute(); |
||||||
|
watch( |
||||||
|
() => route.query, |
||||||
|
() => { |
||||||
|
updateQuery(); |
||||||
|
getList(); |
||||||
|
} |
||||||
|
); |
||||||
|
|
||||||
|
function updateQuery() { |
||||||
|
if (route.query.processingStatus) { |
||||||
|
query.value.processingStatus = [route.query.processingStatus]; |
||||||
|
} else { |
||||||
|
query.value.processingStatus = []; |
||||||
|
} |
||||||
|
if (route.query.crtTime === "today") { |
||||||
|
query.value.crtTime = [ |
||||||
|
moment().startOf("day").format("YYYY-MM-DD HH:mm:ss"), |
||||||
|
moment().endOf("day").format("YYYY-MM-DD HH:mm:ss"), |
||||||
|
]; |
||||||
|
} else { |
||||||
|
query.value.crtTime = []; |
||||||
|
} |
||||||
|
if (route.query.extensionFlag === "true") { |
||||||
|
query.value.extensionFlag = true |
||||||
|
} else { |
||||||
|
query.value.extensionFlag = ''; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
onMounted(() => { |
||||||
|
updateQuery(); |
||||||
|
getList(); |
||||||
|
}); |
||||||
|
|
||||||
|
const show = ref(false); |
||||||
|
|
||||||
|
function handleAction(row) { |
||||||
|
show.value = true; |
||||||
|
} |
||||||
|
|
||||||
|
const router = useRouter(); |
||||||
|
|
||||||
|
|
||||||
|
const editShow = ref(false); |
||||||
|
const formData = ref({}); |
||||||
|
const formRef = ref(null); |
||||||
|
|
||||||
|
function handleEdit(row) { |
||||||
|
editShow.value = true; |
||||||
|
formData.value = {...row}; |
||||||
|
} |
||||||
|
|
||||||
|
async function handleSumbit() { |
||||||
|
await formRef.value.validate(); |
||||||
|
let data = { |
||||||
|
replyResultContent: formData.value.replyResultContent, |
||||||
|
id: formData.value.id |
||||||
|
} |
||||||
|
await alarmNotificationReply(data); |
||||||
|
editShow.value = false; |
||||||
|
feedback.msgSuccess("操作成功"); |
||||||
|
getList(); |
||||||
|
} |
||||||
|
|
||||||
|
</script> |
||||||
|
<style lang="scss" scoped> |
||||||
|
.form-row { |
||||||
|
padding: 8px 0; |
||||||
|
box-shadow: inset 0px -1px 0px 0px #ebebeb; |
||||||
|
|
||||||
|
label { |
||||||
|
width: 120px; |
||||||
|
line-height: 24px; |
||||||
|
padding-right: 12px; |
||||||
|
box-sizing: border-box; |
||||||
|
text-align: right; |
||||||
|
|
||||||
|
& + * { |
||||||
|
width: calc(100% - 126px); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.btn-box { |
||||||
|
width: 70px; |
||||||
|
} |
||||||
|
|
||||||
|
.el-form-item { |
||||||
|
margin-bottom: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.query-box { |
||||||
|
gap: 10px 20px; |
||||||
|
} |
||||||
|
</style> |
||||||
Loading…
Reference in new issue