laishajiang
2 years ago
4 changed files with 789 additions and 0 deletions
@ -0,0 +1,26 @@ |
|||||||
|
import request from '@/utils/request' |
||||||
|
|
||||||
|
export function getReport(query: any) { |
||||||
|
return request.get({ url: '/report/list',query }) |
||||||
|
} |
||||||
|
|
||||||
|
export function getReportDetail(params: Record<string, any>) { |
||||||
|
return request.get({ url: '/report/detail?',params}) |
||||||
|
} |
||||||
|
export function addIntoMail(body) { |
||||||
|
return request.post({ url: '/report/addIntoMail', body}) |
||||||
|
} |
||||||
|
export function addIntoBadMail(body) { |
||||||
|
return request.post({ url: '/report/addIntoBadMail', body}) |
||||||
|
} |
||||||
|
export function typelist() { |
||||||
|
return request.get({ url: '/report/typelist'}) |
||||||
|
} |
||||||
|
|
||||||
|
export function naturelist() { |
||||||
|
return request.get({ url: '/report/naturelist'}) |
||||||
|
} |
||||||
|
|
||||||
|
export function unitlist() { |
||||||
|
return request.get({ url: '/report/unitlist'}) |
||||||
|
} |
||||||
@ -0,0 +1,63 @@ |
|||||||
|
<template> |
||||||
|
<el-dialog width="50vw" title="不纳入信件" > |
||||||
|
<el-form |
||||||
|
label-position="top" |
||||||
|
:model="form" |
||||||
|
:rules="rules" |
||||||
|
ref="formRef" |
||||||
|
style="height: 50vh" |
||||||
|
> |
||||||
|
<el-form-item label="不纳入信件理由" prop="reason"> |
||||||
|
<el-input |
||||||
|
v-model="form.reason" |
||||||
|
type="textarea" |
||||||
|
:rows="3" |
||||||
|
:placeholder=" |
||||||
|
'请输入不纳入信件理由' |
||||||
|
" |
||||||
|
></el-input> |
||||||
|
</el-form-item> |
||||||
|
</el-form> |
||||||
|
<footer class="flex end"> |
||||||
|
<el-button type="primary" size="large" @click="submit" |
||||||
|
>提交</el-button |
||||||
|
> |
||||||
|
</footer> |
||||||
|
</el-dialog> |
||||||
|
</template> |
||||||
|
<script setup> |
||||||
|
const form = reactive({}); |
||||||
|
const rules = { |
||||||
|
reason: [ |
||||||
|
{ |
||||||
|
required: true, |
||||||
|
message: "请填写不纳入信件原因", |
||||||
|
}, |
||||||
|
], |
||||||
|
}; |
||||||
|
const formRef = ref(); |
||||||
|
|
||||||
|
const props = defineProps({ |
||||||
|
data: { |
||||||
|
type: Object, |
||||||
|
default: {}, |
||||||
|
}, |
||||||
|
|
||||||
|
}); |
||||||
|
|
||||||
|
const emits = defineEmits(["update:data", "submit", "close"]); |
||||||
|
|
||||||
|
function submit() { |
||||||
|
formRef.value.validate((valid) => { |
||||||
|
if (valid) { |
||||||
|
// 提交审批逻辑 |
||||||
|
const data = { ...form }; |
||||||
|
emits("update:data", data); |
||||||
|
emits("submit", "returnSubmit"); |
||||||
|
emits("close"); |
||||||
|
} |
||||||
|
}); |
||||||
|
} |
||||||
|
</script> |
||||||
|
<style lang="scss" scoped> |
||||||
|
</style> |
||||||
@ -0,0 +1,521 @@ |
|||||||
|
<template> |
||||||
|
<el-dialog |
||||||
|
v-model="visible" |
||||||
|
:show-close="false" |
||||||
|
width="84vw" |
||||||
|
top="2vh" |
||||||
|
class="dialog-header-nopadding" |
||||||
|
style="--el-dialog-padding-primary: 10px; margin-bottom: 2vh" |
||||||
|
> |
||||||
|
<template #header="{ close, titleId, titleClass }"> |
||||||
|
<header class="flex between v-center dialog-header"> |
||||||
|
<div class="ml-16"> |
||||||
|
<span class="mr-8 second">{{report.contactName}} 的110举报投诉</span> |
||||||
|
</div> |
||||||
|
<div class="flex"> |
||||||
|
<!-- #FA8695 --> |
||||||
|
<el-button |
||||||
|
link |
||||||
|
circle |
||||||
|
size="large" |
||||||
|
@click="close" |
||||||
|
class="close-btn" |
||||||
|
> |
||||||
|
<template #icon> |
||||||
|
<icon |
||||||
|
name="el-icon-close" |
||||||
|
:size="26" |
||||||
|
:color="'#fff'" |
||||||
|
/> |
||||||
|
</template> |
||||||
|
</el-button> |
||||||
|
</div> |
||||||
|
</header> |
||||||
|
</template> |
||||||
|
<main v-loading="loading"> |
||||||
|
<el-row :gutter="20" style="height: 100%"> |
||||||
|
<el-col :span="8" style="height: 100%"> |
||||||
|
<div class="left-container h100"> |
||||||
|
</div> |
||||||
|
</el-col> |
||||||
|
<el-col :span="16" style="height: 100%"> |
||||||
|
<el-scrollbar max-height="100%" class="main-container"> |
||||||
|
<div> |
||||||
|
<div class="ml-20 mt-20 mt-15 mr-20 report-card"> |
||||||
|
<el-row > |
||||||
|
<h3>报警信息</h3> |
||||||
|
</el-row> |
||||||
|
<el-row class="my-cow"> |
||||||
|
<el-col :span="2" > |
||||||
|
<span>电话机主</span> |
||||||
|
</el-col> |
||||||
|
<el-col :span="6"> |
||||||
|
<span class="span-item"></span> |
||||||
|
</el-col> |
||||||
|
<el-col :span="2"> |
||||||
|
<span>报警电话</span> |
||||||
|
</el-col> |
||||||
|
<el-col :span="6"> |
||||||
|
<span class="span-item">{{report.contactPhone}}</span> |
||||||
|
</el-col> |
||||||
|
<el-col :span="2"> |
||||||
|
<span>摘机时间</span> |
||||||
|
</el-col> |
||||||
|
<el-col :span="6"> |
||||||
|
<span class="span-item"></span> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
<el-row class="my-cow"> |
||||||
|
<el-col :span="2"> |
||||||
|
<span>话终时间</span> |
||||||
|
</el-col> |
||||||
|
<el-col :span="6"> |
||||||
|
<span class="span-item">{{report.hzsj}}</span></el-col> |
||||||
|
<el-col :span="2"> |
||||||
|
<span>报警类型</span> |
||||||
|
</el-col> |
||||||
|
<el-col :span="6"> |
||||||
|
<span class="span-item">{{report.jjlxdmms}}</span> |
||||||
|
</el-col> |
||||||
|
<el-col :span="2"> |
||||||
|
<span>报警坐标</span> |
||||||
|
</el-col> |
||||||
|
<el-col :span="6"> |
||||||
|
<span class="span-item">{{report.bjzb}}</span> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
<el-row class="my-cow"> |
||||||
|
<el-col :span="2"> |
||||||
|
<span>案发地址</span> |
||||||
|
</el-col> |
||||||
|
<el-col :span="6"> |
||||||
|
<span class="span-item">{{report.afdd}}</span> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
<el-row class="my-cow"> |
||||||
|
<el-col :span="2"> |
||||||
|
<span>报警人名</span> |
||||||
|
</el-col> |
||||||
|
<el-col :span="6"> |
||||||
|
<span class="span-item">{{report.contactName}}</span></el-col> |
||||||
|
<el-col :span="2"> |
||||||
|
<span>性别</span> |
||||||
|
</el-col> |
||||||
|
<el-col :span="6"> |
||||||
|
<span class="span-item"></span> |
||||||
|
</el-col> |
||||||
|
<el-col :span="2"> |
||||||
|
<span>身份</span> |
||||||
|
</el-col> |
||||||
|
<el-col :span="6"> |
||||||
|
<span class="span-item"></span> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
<el-row class="my-cow"> |
||||||
|
<el-col :span="2"> |
||||||
|
<span>联系电话</span> |
||||||
|
</el-col> |
||||||
|
<el-col :span="6"> |
||||||
|
<span class="span-item">{{report.bjrlxdh}}</span></el-col> |
||||||
|
<el-col :span="2"> |
||||||
|
<span>警情标签</span> |
||||||
|
</el-col> |
||||||
|
<el-col :span="6"> |
||||||
|
<span class="span-item"></span> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
<el-row class="my-cow"> |
||||||
|
<el-col :span="2"> |
||||||
|
<span>结警性质</span> |
||||||
|
</el-col> |
||||||
|
<el-col :span="6"> |
||||||
|
<span class="span-item"></span> |
||||||
|
</el-col> |
||||||
|
<el-col :span="2"> |
||||||
|
<span>接警性质</span> |
||||||
|
</el-col> |
||||||
|
<el-col :span="6"> |
||||||
|
<span class="span-item">{{report.ysjqxzmc}}</span> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
<el-row class="my-cow"> |
||||||
|
<el-col :span="2"> |
||||||
|
<span>管辖单位</span> |
||||||
|
</el-col> |
||||||
|
<el-col :span="6"> |
||||||
|
<span class="span-item">{{report.gxdwmc}}</span> |
||||||
|
</el-col> |
||||||
|
<el-col :span="2"> |
||||||
|
<span>所属警区</span> |
||||||
|
</el-col> |
||||||
|
<el-col :span="6"> |
||||||
|
<span class="span-item"></span> |
||||||
|
</el-col> |
||||||
|
<el-col :span="2"> |
||||||
|
<span>乡镇街道</span> |
||||||
|
</el-col> |
||||||
|
<el-col :span="6"> |
||||||
|
<span class="span-item"></span> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
<el-row class="my-cow" > |
||||||
|
<el-col :span="2"> |
||||||
|
<span>警情级别</span> |
||||||
|
</el-col> |
||||||
|
<el-col :span="6"> |
||||||
|
<span class="span-item">{{report.jqjbms}}</span> |
||||||
|
</el-col> |
||||||
|
<el-col :span="2"> |
||||||
|
<span>警情阶段</span> |
||||||
|
</el-col> |
||||||
|
<el-col :span="6"> |
||||||
|
<span class="span-item">{{report.jjdztms}}</span> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
</div> |
||||||
|
<div class="ml-20 mt-20 mt-15 mr-20 report-card"> |
||||||
|
<el-row > |
||||||
|
<h3>报警内容</h3> |
||||||
|
</el-row> |
||||||
|
<el-row class="cow-content" > |
||||||
|
<el-col :span="20"> |
||||||
|
<span class="span-item">{{report.content}}</span> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
</div> |
||||||
|
<div class="ml-20 mt-20 mt-15 mr-20 report-card"> |
||||||
|
<el-row > |
||||||
|
<h3>反馈结警</h3> |
||||||
|
</el-row> |
||||||
|
<el-row class="cow-content"> |
||||||
|
<el-col :span="20"> |
||||||
|
<span class="span-item">{{report.xchfnr}}</span> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div style="height: 20px"></div> |
||||||
|
</el-scrollbar> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
</main> |
||||||
|
<footer class="flex between"> |
||||||
|
<div></div> |
||||||
|
<div style="margin-left: auto;"> |
||||||
|
<el-button |
||||||
|
type="danger" |
||||||
|
size="large" |
||||||
|
@click="addIntoBad" |
||||||
|
>不纳入信件</el-button |
||||||
|
> |
||||||
|
<el-button |
||||||
|
type="primary" |
||||||
|
size="large" |
||||||
|
@click="addInto" |
||||||
|
>纳入信件</el-button |
||||||
|
> |
||||||
|
</div> |
||||||
|
</footer> |
||||||
|
|
||||||
|
</el-dialog> |
||||||
|
<Message ref="messageRef" /> |
||||||
|
<IntoBad |
||||||
|
v-model="returnShow" |
||||||
|
v-model:data="requestData" |
||||||
|
@submit="submitAction()" |
||||||
|
@close="returnShow = false" |
||||||
|
/> |
||||||
|
</template> |
||||||
|
<script setup> |
||||||
|
import IntoBad from "./IntoBad.vue"; |
||||||
|
import { useDictData } from "@/hooks/useDictOptions"; |
||||||
|
import feedback from "@/utils/feedback"; |
||||||
|
import { timeDiffSeconds, formatTimeText, getDictLable } from "@/utils/util"; |
||||||
|
import { getReportDetail,addIntoMail,addIntoBadMail } from "@/api/report"; |
||||||
|
const loading = ref(false); |
||||||
|
const messageRef = ref(); |
||||||
|
|
||||||
|
const emits = defineEmits(["update:show", "update"]); |
||||||
|
const props = defineProps({ |
||||||
|
show: { |
||||||
|
type: Boolean, |
||||||
|
default: false, |
||||||
|
}, |
||||||
|
reportId: { |
||||||
|
type: String, |
||||||
|
default: "", |
||||||
|
}, |
||||||
|
}); |
||||||
|
const returnShow = ref(false); |
||||||
|
const visible = ref(props.show); |
||||||
|
const requestData = ref({}); |
||||||
|
watch(visible, (val) => { |
||||||
|
emits("update:show", val); |
||||||
|
}); |
||||||
|
watch( |
||||||
|
() => props.show, |
||||||
|
(val) => { |
||||||
|
visible.value = val; |
||||||
|
} |
||||||
|
); |
||||||
|
const report = ref({}); |
||||||
|
async function getDetail() { |
||||||
|
loading.value = true; |
||||||
|
// 信件详情 |
||||||
|
let data; |
||||||
|
data = await getReportDetail({id : props.reportId}); |
||||||
|
loading.value = false; |
||||||
|
report.value = data; |
||||||
|
} |
||||||
|
|
||||||
|
function addInto() { |
||||||
|
loading.value = true; |
||||||
|
addIntoMail({id : props.reportId}).then(() => { |
||||||
|
messageRef.value.showMessage("已成功纳入信件"); |
||||||
|
visible.value = false; |
||||||
|
emits("update"); |
||||||
|
loading.value = false; |
||||||
|
return; |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
function addIntoBad() { |
||||||
|
returnShow.value = true; |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
function submitAction() { |
||||||
|
loading.value = true; |
||||||
|
returnShow.value = false; |
||||||
|
addIntoBadMail({id:props.reportId,reason:requestData.value.reason}).then(() => { |
||||||
|
messageRef.value.showMessage("不纳入信件成功"); |
||||||
|
emits("update"); |
||||||
|
visible.value = false; |
||||||
|
loading.value = false; |
||||||
|
return; |
||||||
|
}); |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
watch( |
||||||
|
() => props.reportId, |
||||||
|
(val) => { |
||||||
|
getDetail(); |
||||||
|
} |
||||||
|
); |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</script> |
||||||
|
<style lang="scss" scoped> |
||||||
|
|
||||||
|
|
||||||
|
.cow-content{ |
||||||
|
margin-left: 20px; |
||||||
|
margin-bottom: 8px; |
||||||
|
} |
||||||
|
.my-cow{ |
||||||
|
margin-left: 100px; |
||||||
|
margin-bottom: 15px; |
||||||
|
} |
||||||
|
.span-item{ |
||||||
|
color: #333333; |
||||||
|
} |
||||||
|
.report-card{ |
||||||
|
border-bottom: 1px solid #F0F0F0; |
||||||
|
} |
||||||
|
.dialog-header { |
||||||
|
--dialog-header-font-color: #acb7ff; |
||||||
|
--dialog-header-font-size: 16px; |
||||||
|
background-color: var(--primary-color); |
||||||
|
color: #fff; |
||||||
|
padding: 1em; |
||||||
|
font-size: var(--dialog-header-font-size); |
||||||
|
.second { |
||||||
|
color: var(--dialog-header-font-color); |
||||||
|
} |
||||||
|
.step-box { |
||||||
|
.step { |
||||||
|
--setp-background-color: #3a4dc1; |
||||||
|
--setp-border-color: #4b60e4; |
||||||
|
--setp-font-color: var(--dialog-header-font-color); |
||||||
|
--setp-font-size: var(--dialog-header-font-size); |
||||||
|
padding-left: 30px; |
||||||
|
padding-right: 16px; |
||||||
|
&::after { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
&:first-child { |
||||||
|
padding-left: 16px; |
||||||
|
} |
||||||
|
&[active="true"] { |
||||||
|
--setp-background-color: #ff4242; |
||||||
|
--setp-border-color: #ff7474; |
||||||
|
--setp-font-color: #fff; |
||||||
|
} |
||||||
|
.bloder { |
||||||
|
font-size: 24px; |
||||||
|
font-weight: 700; |
||||||
|
margin-right: 8px; |
||||||
|
} |
||||||
|
span { |
||||||
|
z-index: 2; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.fav-btn { |
||||||
|
--el-font-size-base: 18px; |
||||||
|
--el-button-bg-color: #283aac; |
||||||
|
--el-button-hover-bg-color: #c20921; |
||||||
|
--el-button-hover-border-color: #fa8695; |
||||||
|
&.active { |
||||||
|
--el-button-bg-color: #c20921; |
||||||
|
} |
||||||
|
&:focus { |
||||||
|
background-color: var(--el-button-bg-color); |
||||||
|
} |
||||||
|
} |
||||||
|
.close-btn:hover { |
||||||
|
:deep() { |
||||||
|
.el-icon { |
||||||
|
color: #c20921; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.left-container { |
||||||
|
padding: 0 20px 0 40px; |
||||||
|
} |
||||||
|
.timer { |
||||||
|
--large-font-color: var(--primary-color); |
||||||
|
--default-font-color: #999; |
||||||
|
color: var(--default-font-color); |
||||||
|
.error { |
||||||
|
--large-font-color: #fff; |
||||||
|
--default-font-color: #fff; |
||||||
|
background: linear-gradient(180deg, #ff7158 0%, #f40000 100%); |
||||||
|
border: 4px solid #ffcdcd; |
||||||
|
border-radius: 11px; |
||||||
|
box-sizing: border-box; |
||||||
|
margin-bottom: 20px; |
||||||
|
height: 190px; |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
} |
||||||
|
.timer-box { |
||||||
|
height: 210px; |
||||||
|
} |
||||||
|
.flow { |
||||||
|
.flow-header { |
||||||
|
background: #f5f6ff; |
||||||
|
padding: 8px; |
||||||
|
font-size: 12px; |
||||||
|
} |
||||||
|
.flow-container { |
||||||
|
background-color: #eff0f5; |
||||||
|
padding: 12px 8px; |
||||||
|
min-height: 120px; |
||||||
|
font-size: 12px; |
||||||
|
.second { |
||||||
|
color: #999; |
||||||
|
} |
||||||
|
.primary { |
||||||
|
color: var(--primary-color); |
||||||
|
font-weight: 500; |
||||||
|
} |
||||||
|
.flow-time { |
||||||
|
display: inline-flex; |
||||||
|
padding: 6px; |
||||||
|
margin-left: 6px; |
||||||
|
background-color: #f5f6ff; |
||||||
|
border-left: 2px solid #00d050; |
||||||
|
padding-left: 20px; |
||||||
|
&[danger="true"] { |
||||||
|
border-color: #ff0000; |
||||||
|
span { |
||||||
|
color: #ff0000; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.flow-info { |
||||||
|
position: relative; |
||||||
|
padding-left: 20px; |
||||||
|
&::before { |
||||||
|
display: block; |
||||||
|
content: ""; |
||||||
|
width: 10px; |
||||||
|
height: 10px; |
||||||
|
border-radius: 50%; |
||||||
|
background-color: #bfbfbf; |
||||||
|
position: absolute; |
||||||
|
left: 0; |
||||||
|
top: 50%; |
||||||
|
transform: translateY(-50%); |
||||||
|
} |
||||||
|
} |
||||||
|
& > div:first-child .flow-info::before { |
||||||
|
width: 12px; |
||||||
|
height: 12px; |
||||||
|
background-color: var(--primary-color); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
main { |
||||||
|
height: calc(96vh - 180px); |
||||||
|
} |
||||||
|
.main-container { |
||||||
|
margin-top: -30px; |
||||||
|
padding: 0 20px; |
||||||
|
} |
||||||
|
footer { |
||||||
|
padding: 10px 20px 0; |
||||||
|
} |
||||||
|
:deep() { |
||||||
|
h2 { |
||||||
|
font-size: 24px; |
||||||
|
font-weight: 500; |
||||||
|
color: var(--primary-color); |
||||||
|
margin: 12px 0; |
||||||
|
} |
||||||
|
h3 { |
||||||
|
font-size: 16px; |
||||||
|
font-weight: 500; |
||||||
|
color: var(--primary-color); |
||||||
|
} |
||||||
|
.content { |
||||||
|
font-size: 15px; |
||||||
|
padding: 8px; |
||||||
|
color: #333; |
||||||
|
white-space: pre-wrap; |
||||||
|
} |
||||||
|
|
||||||
|
.file-box { |
||||||
|
img { |
||||||
|
width: 80px; |
||||||
|
height: 80px; |
||||||
|
} |
||||||
|
} |
||||||
|
.el-button.is-disabled { |
||||||
|
--el-button-disabled-bg-color: #b0b0b0; |
||||||
|
--el-button-disabled-border-color: #b0b0b0; |
||||||
|
--el-button-disabled-text-color: #fff; |
||||||
|
} |
||||||
|
.card-info { |
||||||
|
background: #f4f5ff; |
||||||
|
border: 1px solid rgba(195, 202, 245, 1); |
||||||
|
padding: 12px 20px; |
||||||
|
} |
||||||
|
span[danger="true"] { |
||||||
|
color: var(--danger-color); |
||||||
|
} |
||||||
|
.timer-box .el-progress-circle { |
||||||
|
height: 240px !important; |
||||||
|
width: 240px !important; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,179 @@ |
|||||||
|
<template> |
||||||
|
<div class="container"> |
||||||
|
<header> |
||||||
|
<el-form :label-width="120"> |
||||||
|
<el-row> |
||||||
|
<el-col :span="6"> |
||||||
|
<el-form-item label="报警电话"> |
||||||
|
<el-input |
||||||
|
v-model="query.contactPhone" |
||||||
|
placeholder="请输入报警电话" |
||||||
|
clearable |
||||||
|
/> |
||||||
|
</el-form-item> |
||||||
|
</el-col> |
||||||
|
<el-col :span="6"> |
||||||
|
<el-form-item label="话终时间"> |
||||||
|
<el-date-picker v-model="query.searchTime" value-format="YYYY-MM-DD HH:mm:ss" |
||||||
|
type="datetimerange" format="YYYY-MM-DD HH:mm:ss" range-separator="~" |
||||||
|
start-placeholder="开始日期" end-placeholder="结束日期" @change="handleMailTimeQuery" /> |
||||||
|
</el-form-item> |
||||||
|
</el-col> |
||||||
|
<el-col :span="6"> |
||||||
|
<el-form-item label="报警类型"> |
||||||
|
<el-select v-model="query.type" placeholder="请选择层级" clearable filterable> |
||||||
|
<el-option v-for="item in optionsData.type" :key="item.id" :label="item.labelName" |
||||||
|
:value="item.labelName" /> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
</el-col> |
||||||
|
<el-col :span="6"> |
||||||
|
<el-form-item label="报警人名"> |
||||||
|
<el-input |
||||||
|
v-model="query.contactName" |
||||||
|
placeholder="请输入报警人名" |
||||||
|
clearable |
||||||
|
/> |
||||||
|
</el-form-item> |
||||||
|
</el-col> |
||||||
|
<el-col :span="6"> |
||||||
|
<el-form-item label="接警性质"> |
||||||
|
<el-select v-model="query.nature" placeholder="请选择层级" clearable filterable> |
||||||
|
<el-option v-for="item in optionsData.nature" :key="item.id" :label="item.labelName" |
||||||
|
:value="item.labelName" /> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
</el-col> |
||||||
|
<el-col :span="6"> |
||||||
|
<el-form-item label="管辖单位"> |
||||||
|
<el-input |
||||||
|
v-model="query.unit" |
||||||
|
placeholder="请输入管辖单位" |
||||||
|
clearable |
||||||
|
/> |
||||||
|
</el-form-item> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
<div class="flex end mb-20"> |
||||||
|
<el-button type="primary" @click="getList">查询</el-button> |
||||||
|
<el-button @click="reset">重置</el-button> |
||||||
|
</div> |
||||||
|
</el-form> |
||||||
|
</header> |
||||||
|
<main> |
||||||
|
|
||||||
|
<div class="table-container"> |
||||||
|
<el-table :data="report" style="width: 100%" > |
||||||
|
<el-table-column prop="contactPhone" label="报警电话" align="center" width="160" /> |
||||||
|
<el-table-column prop="hzsj" label="话终时间" align="center" width="160" /> |
||||||
|
<el-table-column prop="contactName" label="报警人名" align="center" /> |
||||||
|
<el-table-column prop="jjlxdmms" label="报警类型" align="center"/> |
||||||
|
<el-table-column prop="ysjqxzmc" label="接警性质" align="center"/> |
||||||
|
<el-table-column prop="gxdwmc" label="管辖单位" align="center"/> |
||||||
|
<el-table-column prop="content" show-overflow-tooltip label="报警内容" align="center"/> |
||||||
|
<el-table-column prop="xchfnr" show-overflow-tooltip label="反馈结警" align="center"/> |
||||||
|
<el-table-column label="操作" fixed="right" align="center"> |
||||||
|
<template #default="{ row }"> |
||||||
|
<el-button |
||||||
|
type="primary" |
||||||
|
link |
||||||
|
@click="handleMail(row)" |
||||||
|
>立即处理</el-button |
||||||
|
> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
</div> |
||||||
|
<div class="flex mt-4 end"> |
||||||
|
<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, jumper" :total="totalSize.total"> |
||||||
|
</el-pagination> |
||||||
|
</div> |
||||||
|
</main> |
||||||
|
</div> |
||||||
|
|
||||||
|
<ReportDialog v-model:show="showModel" :disabled="true" :reportId="activeReportId" |
||||||
|
@update="getList" /> |
||||||
|
</template> |
||||||
|
<script lang="ts" setup> |
||||||
|
import ReportDialog from "./ReportDialog.vue"; |
||||||
|
import { getReport,naturelist,typelist } from '@/api/report' |
||||||
|
import { ref, reactive, watchEffect } from "vue"; |
||||||
|
import { useDictOptions } from '@/hooks/useDictOptions' |
||||||
|
|
||||||
|
const activeReportId = ref(""); |
||||||
|
const query = ref({ |
||||||
|
size: 10, |
||||||
|
current: 1 |
||||||
|
}); |
||||||
|
const totalSize = reactive({ |
||||||
|
total: 0, |
||||||
|
pages: 0 |
||||||
|
}) |
||||||
|
const activeTab = ref('table1'); |
||||||
|
const report = ref([]); |
||||||
|
const showModel = ref(false); |
||||||
|
function handleMail(row) { |
||||||
|
showModel.value = true; |
||||||
|
activeReportId.value = row.id; |
||||||
|
} |
||||||
|
function getList() { |
||||||
|
getReport(query.value).then((data) => { |
||||||
|
console.log("dddddddddddddddddddddddddddddddddddddddd") |
||||||
|
report.value = data.records; |
||||||
|
totalSize.total = data.total; |
||||||
|
totalSize.pages = data.pages; |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
function reset() { |
||||||
|
query.value = {} |
||||||
|
getList() |
||||||
|
} |
||||||
|
|
||||||
|
getList() |
||||||
|
|
||||||
|
const handleMailTimeQuery = (val: any) => { |
||||||
|
if (val) { |
||||||
|
query.value.searchStartTime = val[0]; |
||||||
|
query.value.searchEndTime = val[1]; |
||||||
|
} else { |
||||||
|
delete query.value.searchStartTime |
||||||
|
delete query.value.searchEndTime |
||||||
|
} |
||||||
|
} |
||||||
|
const { optionsData } = useDictOptions<{ |
||||||
|
type: any[] |
||||||
|
nature:any[] |
||||||
|
}>({ |
||||||
|
type: { |
||||||
|
api: typelist |
||||||
|
}, |
||||||
|
nature: { |
||||||
|
api: naturelist |
||||||
|
}, |
||||||
|
}) |
||||||
|
</script> |
||||||
|
<style lang="scss" scoped> |
||||||
|
.success { |
||||||
|
padding: 0 8px; |
||||||
|
height: 24px; |
||||||
|
line-height: 24px; |
||||||
|
text-align: center; |
||||||
|
|
||||||
|
.text { |
||||||
|
color: #128009; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.error { |
||||||
|
background-color: #ff0000; |
||||||
|
color: #fff; |
||||||
|
padding: 0 8px; |
||||||
|
height: 24px; |
||||||
|
line-height: 24px; |
||||||
|
border-radius: 20px; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
</style> |
||||||
Loading…
Reference in new issue