Browse Source

问题线索关联问题预警

main
kami 1 year ago
parent
commit
a1548e4d5b
  1. 12
      src/api/work/alarm.ts
  2. 524
      src/views/sensitivePerception/ModelClue.vue
  3. 220
      src/views/work/Alarm.vue

12
src/api/work/alarm.ts

@ -21,3 +21,15 @@ export function alarmNotificationCommit(data) {
}); });
} }
export function alarmFiles(id) {
return request.get({
url: `/alarm/notification/files?alarmId=${id}`
});
}
export function alarmDetails(id) {
return request.get({
url: `/alarm/notification/details?alarmId=${id}`
});
}

524
src/views/sensitivePerception/ModelClue.vue

@ -1,260 +1,358 @@
<template> <template>
<div class="container h100"> <div class="container h100">
<el-row :gutter="20" class="h100"> <el-row :gutter="20" class="h100">
<el-col :span="6" class="h100"> <el-col :span="6" class="h100">
<model-tree v-model="query.modelIds" /> <model-tree v-model="query.modelIds"/>
</el-col> </el-col>
<el-col :span="18"> <el-col :span="18">
<header> <header>
<el-form :label-width="140"> <el-form :label-width="140">
<el-row> <el-row>
<el-col :span="8"> <el-col :span="8">
<el-form-item label="预警时间"> <el-form-item label="预警时间">
<date-time-range-picker-ext <date-time-range-picker-ext
v-model="query.createTime" v-model="query.createTime"
/> />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="8"> <el-col :span="8">
<el-form-item label="涉及单位"> <el-form-item label="涉及单位">
<depart-tree-select <depart-tree-select
v-model="query.involveDepartId" v-model="query.involveDepartId"
:check-strictly="false" :check-strictly="false"
/> />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="8"> <el-col :span="8">
<el-form-item label="预警内容"> <el-form-item label="预警内容">
<el-input <el-input
placeholder="请输入" placeholder="请输入"
v-model="query.thingDesc" v-model="query.thingDesc"
clearable clearable
/> />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="8"> <el-col :span="8">
<el-form-item label="分发状态"> <el-form-item label="分发状态">
<el-select <el-select
v-model="query.distributionState" v-model="query.distributionState"
clearable clearable
> >
<el-option <el-option
v-for="item in dict.distributionState" v-for="item in dict.distributionState"
:label="item.dictLabel" :label="item.dictLabel"
:value="item.dictValue" :value="item.dictValue"
/> />
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
</el-form> </el-form>
<div class="flex end mb-20"> <div class="flex end mb-20">
<div> <div>
<el-button type="primary" @click="getList"> <el-button type="primary" @click="getList">
<template #icon> <template #icon>
<icon name="el-icon-Search" /> <icon name="el-icon-Search"/>
</template> </template>
查询</el-button 查询
> </el-button
<el-button @click="reset">重置</el-button> >
</div> <el-button @click="reset">重置</el-button>
</div> </div>
</header> </div>
<div class="table-container"> </header>
<el-table :data="list"> <div class="table-container">
<el-table-column <el-table :data="list">
label="预警时间" <el-table-column
prop="createTime" label="预警时间"
width="150" prop="createTime"
/> width="150"
<!-- <el-table-column--> />
<!-- label="预警模型"--> <!-- <el-table-column-->
<!-- prop="modelName"--> <!-- label="预警模型"-->
<!-- width="160"--> <!-- prop="modelName"-->
<!-- show-overflow-tooltip--> <!-- width="160"-->
<!-- />--> <!-- show-overflow-tooltip-->
<el-table-column <!-- />-->
label="涉及单位" <el-table-column
show-overflow-tooltip label="涉及单位"
width="200" show-overflow-tooltip
> width="200"
<template #default="{ row }"> >
<span>{{ row.involveParentDepartName }}</span><span v-if="row.involveDepartName"><br>{{ row.involveDepartName }}</span> <template #default="{ row }">
</template> <span>{{ row.involveParentDepartName }}</span><span
</el-table-column> v-if="row.involveDepartName"><br>{{ row.involveDepartName }}</span>
<el-table-column </template>
label="涉及人员" </el-table-column>
prop="involvePoliceName" <el-table-column
width="100" label="涉及人员"
> prop="involvePoliceName"
<template #default="{ row }"> width="100"
<div v-if="row.involvePoliceName"> >
<div v-for="item in row.involvePoliceName.split(' ')" class="text-nowrap">{{ <template #default="{ row }">
item }}</div> <div v-if="row.involvePoliceName">
</div> <div v-for="item in row.involvePoliceName.split(' ')" class="text-nowrap">{{
<div v-else></div> item
</template> }}
</el-table-column> </div>
<el-table-column </div>
label="预警内容" <div v-else></div>
prop="thingDesc" </template>
show-overflow-tooltip </el-table-column>
/> <el-table-column
<el-table-column label="预警内容"
label="分发状态" prop="thingDesc"
align="center" show-overflow-tooltip
width="120" />
> <el-table-column
<template #default="{ row }"> label="分发状态"
align="center"
width="120"
>
<template #default="{ row }">
<span>{{ <span>{{
getDictLable( getDictLable(
dict.distributionState, dict.distributionState,
row.distributionState row.distributionState
) )
}}</span> }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="操作" width="180"> <el-table-column label="操作" width="180">
<template #default="{ row }"> <template #default="{ row }">
<el-button <el-button
type="primary" type="primary"
link link
@click="handleShowDetail(row)" @click="handleShowDetail(row)"
>查看详情</el-button >查看详情
> </el-button
<el-button >
v-if="row.negativeId" <el-button
type="primary" v-if="row.negativeId"
link type="primary"
@click="handleAction(row)" link
>处理详情</el-button @click="handleAction(row)"
> >处理详情
</template> </el-button
</el-table-column> >
</el-table> <el-button
</div> type="primary"
<div class="flex end mt-8"> link
<el-pagination :disabled="row.distributionState!='1'"
@size-change="getList" @click="handleClue(row)"
@current-change="getList" >查看提醒
:current-page="query.current" </el-button
:page-sizes="[9, 18, 36]" >
v-model:page-size="query.size" </template>
v-model:current-page="query.current" </el-table-column>
layout="total, sizes, prev, pager, next" </el-table>
:total="total" </div>
v-if="list.length" <div class="flex end mt-8">
> <el-pagination
</el-pagination> @size-change="getList"
</div> @current-change="getList"
</el-col> :current-page="query.current"
</el-row> :page-sizes="[9, 18, 36]"
</div> v-model:page-size="query.size"
v-model:current-page="query.current"
layout="total, sizes, prev, pager, next"
:total="total"
v-if="list.length"
>
</el-pagination>
</div>
</el-col>
</el-row>
</div>
<el-dialog title="预警线索数据详情" v-model="show" width="80vw"> <el-dialog title="预警线索数据详情" v-model="show" width="80vw">
<div class="dialog-container"> <div class="dialog-container">
<div class="row mt-10"> <div class="row mt-10">
<div class="col col-6"> <div class="col col-6">
<label>预警时间</label> <label>预警时间</label>
<span>{{ activeModelClue.createTime }}</span> <span>{{ activeModelClue.createTime }}</span>
</div> </div>
<div class="col col-6"> <div class="col col-6">
<label>预警模型</label> <label>预警模型</label>
<span>{{ activeModelClue.modelName }}</span> <span>{{ activeModelClue.modelName }}</span>
</div> </div>
<div class="col col-6"> <div class="col col-6">
<label>涉及单位</label> <label>涉及单位</label>
<span> <span>
<span>{{ activeModelClue.involveParentDepartName }}</span><span>{{ activeModelClue.involveDepartName ? '/' + activeModelClue.involveDepartName : '' }}</span> <span>{{
activeModelClue.involveParentDepartName
}}</span><span>{{
activeModelClue.involveDepartName ? '/' + activeModelClue.involveDepartName : ''
}}</span>
</span> </span>
</div>
<div class="col col-6">
<label>涉及人员</label>
<span>{{ activeModelClue.involvePoliceName }}</span>
</div>
</div>
<div class="row mt-10">
<div class="col col-24">
<label>预警内容</label>
<span>{{ activeModelClue.thingDesc }}</span>
</div>
</div>
<div class="row mt-10">
<div class="col col-6">
<label>分发状态</label>
<span>{{
getDictLable(
dict.distributionState,
activeModelClue.distributionState
)
}}</span>
</div>
</div>
<h3>详细信息</h3>
<div style="min-height: 200px">
<el-empty description="无数据" />
</div>
</div> </div>
</el-dialog> <div class="col col-6">
<label>涉及人员</label>
<span>{{ activeModelClue.involvePoliceName }}</span>
</div>
</div>
<div class="row mt-10">
<div class="col col-24">
<label>预警内容</label>
<span>{{ activeModelClue.thingDesc }}</span>
</div>
</div>
<div class="row mt-10">
<div class="col col-6">
<label>分发状态</label>
<span>{{
getDictLable(
dict.distributionState,
activeModelClue.distributionState
)
}}</span>
</div>
</div>
<h3>详细信息</h3>
<div style="min-height: 200px">
<el-empty description="无数据"/>
</div>
</div>
</el-dialog>
<el-dialog
title="查看详情"
v-model="dialogShow"
width="800"
>
<el-form :model="showData" :label-width="120" ref="fomrRef">
<el-row>
<el-col :span="12">
<el-form-item
label="提醒类型"
>
<div>{{ showData.alarmType }}</div>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item
label="提醒时间"
>
<el-text>{{ showData.alarmTime }}</el-text>
</el-form-item>
</el-col>
</el-row>
<el-row style="margin-top: 5px;">
<el-col :span="12">
<el-form-item
label="被通知单位"
>
<el-text>{{ showData.notificationDepartName }}</el-text>
</el-form-item>
</el-col>
<el-col :span="12" v-if="showData.policeName != undefined">
<el-form-item
label="被通知民警"
>
<el-text>{{ showData.policeName }}</el-text>
</el-form-item>
</el-col>
</el-row>
<el-row style="margin-top: 5px;">
<el-form-item
label="提醒内容"
>
<el-text style="width: 588px;">{{ showData.alarmContent }}</el-text>
</el-form-item>
</el-row>
<el-row style="margin-top: 5px;" v-if="showData.replyState == 1">
<el-form-item
label="回复内容"
>
<el-text style="width: 588px;">{{ showData.replyResultContent }}</el-text>
</el-form-item>
</el-row>
<el-row style="margin-top: 10px;" v-if="showData.files != undefined && showData.files.length > 0">
<el-form-item
label="问题附件"
>
<div v-for="(item, index) in showData.files" :key="index" style="margin-top: 10px;">
<el-image style="width: 100px; height: 100px;margin-right: 8px" :src="item.path" fit="cover"
:hide-on-click-modal="true" :lazy="true" :z-index="index"/>
</div>
</el-form-item>
</el-row>
</el-form>
<footer class="flex end">
<el-button @click="dialogShow = false">关闭</el-button>
</footer>
</el-dialog>
<negative-dialog <negative-dialog
v-model="negativeShow" v-model="negativeShow"
:id="activeNegativeId" :id="activeNegativeId"
@close="negativeShow = false" @close="negativeShow = false"
/> />
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { listModelClue } from "@/api/sensitivePerception/modelClue"; import {listModelClue} from "@/api/sensitivePerception/modelClue";
import {alarmDetails} from "@/api/work/alarm"
import useCatchStore from "@/stores/modules/catch"; import useCatchStore from "@/stores/modules/catch";
import { getDictLable } from "@/utils/util"; import {getDictLable} from "@/utils/util";
const catchStore = useCatchStore(); const catchStore = useCatchStore();
const dict = catchStore.getDicts(["distributionState","handleState"]); const dict = catchStore.getDicts(["distributionState", "handleState"]);
const query = ref({}); const query = ref({});
const list = ref([]); const list = ref([]);
const total = ref(0); const total = ref(0);
let showData = ref({})
let dialogShow = ref(false)
const handleClue = (row) => {
alarmDetails(row.notificationId).then(res => {
showData.value = res
dialogShow.value = true
})
}
onMounted(() => { onMounted(() => {
getList(); getList();
}); });
const route = useRoute(); const route = useRoute();
watch( watch(
() => route.query.modelId, () => route.query.modelId,
(val) => { (val) => {
query.value.modelIds = [val]; query.value.modelIds = [val];
} }
); );
watch( watch(
() => query.value.modelIds, () => query.value.modelIds,
(newVal, oldVal) => { (newVal, oldVal) => {
if (newVal !== oldVal) { if (newVal !== oldVal) {
query.value.current = 1; query.value.current = 1;
getList(); getList();
} }
} }
); );
function getList() { function getList() {
listModelClue(query.value).then((data) => { listModelClue(query.value).then((data) => {
list.value = data.records; list.value = data.records;
total.value = data.total; total.value = data.total;
}); });
} }
function reset() { function reset() {
query.value = {}; query.value = {};
getList(); getList();
} }
const show = ref(false); const show = ref(false);
const activeModelClue = ref({}); const activeModelClue = ref({});
function handleShowDetail(row) { function handleShowDetail(row) {
activeModelClue.value = row; activeModelClue.value = row;
show.value = true; show.value = true;
} }
const activeNegativeId = ref('') const activeNegativeId = ref('')
@ -262,8 +360,8 @@ const negativeShow = ref(false)
function handleAction(row) { function handleAction(row) {
negativeShow.value = true; negativeShow.value = true;
activeNegativeId.value = row.negativeId; activeNegativeId.value = row.negativeId;
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

220
src/views/work/Alarm.vue

@ -125,7 +125,7 @@
<el-button <el-button
type="primary" type="primary"
link link
@click="showDetail(row)" @click="showFiles(row)"
>查看详情 >查看详情
</el-button> </el-button>
<el-button <el-button
@ -155,53 +155,45 @@
</main> </main>
<el-dialog v-model="editShow" title="回复问题" width="900px"> <el-dialog v-model="editShow" title="回复问题" width="900px">
<el-form label-width="148" :model="formData" ref="formRef"> <el-form label-width="148" :model="formData" ref="formRef">
<el-form-item <el-row>
label="提醒类型" <el-col :span="12">
> <el-form-item
<el-input label="提醒类型"
v-model="formData.alarmType" >
style="width: 280px" <div >{{formData.alarmType}}</div>
disabled </el-form-item>
/> </el-col>
</el-form-item> <el-col :span="12">
<el-form-item <el-form-item
label="提醒时间" label="提醒时间"
> >
<el-input <el-text>{{formData.alarmTime}}</el-text>
v-model="formData.alarmTime" </el-form-item>
disabled </el-col>
style="width: 280px" </el-row>
/> <el-row style="margin-top: 5px;">
</el-form-item> <el-col :span="12">
<el-form-item <el-form-item
label="被通知单位" label="被通知单位"
> >
<el-input <el-text>{{formData.notificationDepartName}}</el-text>
v-model="formData.notificationDepartName" </el-form-item>
disabled </el-col>
style="width: 280px" <el-col :span="12" v-if="formData.policeName != undefined">
/> <el-form-item
</el-form-item> label="被通知民警"
<el-form-item >
label="被通知单位" <el-text>{{formData.policeName}}</el-text>
> </el-form-item>
<el-input </el-col>
v-model="formData.policeName" </el-row>
disabled <el-row style="margin-top: 5px;">
style="width: 280px" <el-form-item
/> label="提醒内容"
</el-form-item> >
<el-form-item <el-text style="width: 588px;">{{formData.alarmContent}}</el-text>
label="提醒内容" </el-form-item>
> </el-row>
<el-input
type="textarea"
v-model="formData.alarmContent"
:autosize="{ minRows: 6 }"
disabled
style="width: 280px"
/>
</el-form-item>
<el-form-item <el-form-item
label="回复问题" label="回复问题"
:rules="{ :rules="{
@ -230,69 +222,65 @@
<el-dialog <el-dialog
title="查看详情" title="查看详情"
v-model="dialogShow" v-model="dialogShow"
width="600" width="800"
> >
<el-form :model="showData" :label-width="120" ref="fomrRef"> <el-form :model="showData" :label-width="120" ref="fomrRef">
<el-form-item <el-row>
label="提醒类型" <el-col :span="12">
> <el-form-item
<el-input label="提醒类型"
v-model="showData.alarmType" >
style="width: 280px" <div >{{showData.alarmType}}</div>
disabled </el-form-item>
/> </el-col>
</el-form-item> <el-col :span="12">
<el-form-item <el-form-item
label="提醒时间" label="提醒时间"
> >
<el-input <el-text>{{showData.alarmTime}}</el-text>
v-model="showData.alarmTime" </el-form-item>
disabled </el-col>
style="width: 280px" </el-row>
/> <el-row style="margin-top: 5px;">
</el-form-item> <el-col :span="12">
<el-form-item <el-form-item
label="被通知单位" label="被通知单位"
> >
<el-input <el-text>{{showData.notificationDepartName}}</el-text>
v-model="showData.notificationDepartName" </el-form-item>
disabled </el-col>
style="width: 280px" <el-col :span="12" v-if="showData.policeName != undefined">
/> <el-form-item
</el-form-item> label="被通知民警"
<el-form-item >
label="被通知单位" <el-text>{{showData.policeName}}</el-text>
> </el-form-item>
<el-input </el-col>
v-model="showData.policeName" </el-row>
disabled <el-row style="margin-top: 5px;">
style="width: 280px" <el-form-item
/> label="提醒内容"
</el-form-item> >
<el-form-item <el-text style="width: 588px;">{{showData.alarmContent}}</el-text>
label="提醒内容" </el-form-item>
> </el-row>
<el-input <el-row style="margin-top: 5px;" v-if="showData.replyState == 1">
type="textarea" <el-form-item
v-model="showData.alarmContent"
:autosize="{ minRows: 6 }"
disabled
style="width: 280px"
/>
</el-form-item>
<el-form-item label="回复内容"
v-if="showData.replyState == 1" >
label="回复内容" <el-text style="width: 588px;">{{showData.replyResultContent}}</el-text>
> </el-form-item>
<el-input </el-row>
type="textarea" <el-row style="margin-top: 10px;" v-if="showData.files != undefined && showData.files.length > 0">
v-model="showData.replyResultContent" <el-form-item
disabled label="问题附件"
:autosize="{ minRows: 4 }" >
style="width: 280px" <div v-for="(item, index) in showData.files" :key="index" style="margin-top: 10px;">
/> <el-image style="width: 100px; height: 100px;margin-right: 8px" :src="item.path" fit="cover" :hide-on-click-modal="true" :lazy="true" :z-index="index"/>
</el-form-item> </div>
</el-form-item>
</el-row>
</el-form> </el-form>
<footer class="flex end"> <footer class="flex end">
<el-button @click="dialogShow = false">关闭</el-button> <el-button @click="dialogShow = false">关闭</el-button>
@ -303,10 +291,12 @@
</template> </template>
<script setup> <script setup>
import moment from "moment"; import moment from "moment";
import {ElLoading} from "element-plus"; import { Clock } from '@element-plus/icons-vue'
import { import {
alarmNotificationPages, alarmNotificationPages,
alarmNotificationReply alarmNotificationReply,
alarmFiles
} from "@/api/work/alarm"; } from "@/api/work/alarm";
import feedback from "@/utils/feedback"; import feedback from "@/utils/feedback";
@ -329,9 +319,13 @@ let dialogShow = ref(false)
const loading = ref(true); const loading = ref(true);
const showDetail = (data) => { const showFiles = (data) => {
showData.value = data; alarmFiles(data.id).then(res => {
dialogShow.value = true; showData.value = data;
showData.value['files'] = res;
console.log(showData.value)
dialogShow.value = true;
})
} }
function getList() { function getList() {

Loading…
Cancel
Save