监控点一栏
This commit is contained in:
parent
5b753b763a
commit
f2b3da079a
|
|
@ -0,0 +1,883 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
|
||||
<el-row>
|
||||
<el-form-item label="预警名称" prop="warningSigns">
|
||||
<el-input v-model="queryParams.warningSigns" placeholder="请输入预警名称" clearable @keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="发布时间" prop="releaseTime">
|
||||
<!-- <el-date-picker clearable v-model="queryParams.releaseTime" type="date" value-format="YYYY-MM-DD"
|
||||
placeholder="请选择发布时间">
|
||||
</el-date-picker> -->
|
||||
<el-date-picker
|
||||
v-model="dateRange"
|
||||
type="datetimerange"
|
||||
unlink-panels
|
||||
range-separator="至"
|
||||
start-placeholder="开始时间"
|
||||
end-placeholder="结束时间"
|
||||
:shortcuts="filterShortcuts"
|
||||
class="custom-date-picker"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="预警状态" prop="warningStatus">
|
||||
<el-select
|
||||
v-model="queryParams.warningStatus"
|
||||
placeholder="预警状态"
|
||||
clearable
|
||||
style="width: 200px"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in event_status"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="预警级别" prop="warningLevel">
|
||||
<el-select
|
||||
v-model="queryParams.warningLevel"
|
||||
placeholder="预警级别"
|
||||
clearable
|
||||
style="width: 200px"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in warning_level"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
<el-row class="dfjb">
|
||||
<!-- <el-row :gutter="10">
|
||||
<el-col :span="1.5">
|
||||
<el-button type="primary" @click="handleAdd" class="circle-plus-btn">
|
||||
新增
|
||||
</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="danger" icon="Delete" plain :disabled="multiple" @click="handleDelete"
|
||||
v-hasPermi="['system:post:remove']">删除</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate"
|
||||
v-hasPermi="['large:information:edit']">修改</el-button>
|
||||
</el-col>
|
||||
</el-row> -->
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="RefreshLeft" class="Refresh" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
</el-form>
|
||||
|
||||
|
||||
<div class="tablebox">
|
||||
<el-table stripe v-loading="loading" @row-click="handleActivityRowClickJK" :data="informationList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="预警名称" align="center" prop="warningSigns" show-overflow-tooltip />
|
||||
<el-table-column label="预警点位" show-overflow-tooltip align="center" prop="pointName" />
|
||||
<el-table-column label="预警摄像" show-overflow-tooltip align="center" prop="cameraName" />
|
||||
<!-- <el-table-column
|
||||
label="发布单位编码"
|
||||
width="140"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
prop="unitCode"
|
||||
/> -->
|
||||
<el-table-column label="发布时间" align="center" prop="releaseTime" show-overflow-tooltip>
|
||||
<template #default="scope">
|
||||
<span>{{ parseTime(scope.row.releaseTime, "{y}-{m}-{d} {h}:{i}:{s}") }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="预警状态" align="center" prop="warningStatus">
|
||||
<template #default="scope">
|
||||
<dict-tag
|
||||
:options="event_status"
|
||||
:value="scope.row.warningStatus"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column label="预警类型" align="center" prop="warningType">
|
||||
<template #default="scope">
|
||||
<dict-tag :options="warning_type" :value="scope.row.warningType" />
|
||||
</template>
|
||||
</el-table-column> -->
|
||||
<!-- <el-table-column label="事件类别" align="center" prop="eventCategory">
|
||||
<template #default="scope">
|
||||
<dict-tag
|
||||
:options="event_category"
|
||||
:value="scope.row.eventCategory"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column> -->
|
||||
<el-table-column label="预警级别" align="center" prop="warningLevel">
|
||||
<template #default="scope">
|
||||
<dict-tag :options="warning_level" :value="scope.row.warningLevel" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column label="经度" align="center" prop="lng" show-overflow-tooltip />
|
||||
<el-table-column label="纬度" align="center" prop="lat" show-overflow-tooltip /> -->
|
||||
<el-table-column label="预计持续时间" align="center" width="140" show-overflow-tooltip prop="expectedDuration" />
|
||||
<el-table-column label="可能波及范围" width="140" show-overflow-tooltip align="center" prop="scopeImpact" />
|
||||
<el-table-column label="异常数据值" align="center" width="140" show-overflow-tooltip prop="abnormalData" />
|
||||
<el-table-column fixed="right" label="操作" align="center" width="280" class-name="small-padding fixed-width">
|
||||
<template #default="scope">
|
||||
<!-- <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)">修改</el-button> -->
|
||||
<!-- <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)">删除</el-button> -->
|
||||
<el-button link type="primary" icon="Warning" :disabled="scope.row.isSupervise == '1'"
|
||||
@click.stop="duban(scope.row)">督办</el-button>
|
||||
<!-- <el-button link type="primary" icon="Share" :disabled="scope.row.eventStatus !== '1'"
|
||||
@click="xiafa(scope.row)">下发</el-button> -->
|
||||
<!-- <el-button link type="primary" icon="Share" @click.stop="handleOpenCall(scope.row)">呼叫</el-button> -->
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
|
||||
v-model:limit="queryParams.pageSize" @pagination="getList" />
|
||||
</div>
|
||||
|
||||
<!-- 添加或修改预警信息对话框 -->
|
||||
<el-dialog :title="title" v-model="open" width="800px" append-to-body>
|
||||
<el-form label-position="top" ref="informationRef" :model="form" :rules="rules" label-width="80px">
|
||||
<el-row :gutter="40">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="预警唯一标识符" prop="warningSigns">
|
||||
<el-input v-model="form.warningSigns" placeholder="请输入预警唯一标识符" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="发布单位名称" prop="unitName">
|
||||
<el-input v-model="form.unitName" placeholder="请输入发布单位名称" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="发生点位" prop="unitCode">
|
||||
<el-select v-model="form.unitCode" placeholder="监控点名称" clearable style="width: 100%">
|
||||
<el-option v-for="dict in jklistCameraList" :key="dict.id" :label="dict.pointName" :value="dict.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="发布时间" prop="releaseTime">
|
||||
<el-date-picker clearable v-model="form.releaseTime" type="date" style="width:100%;"
|
||||
value-format="YYYY-MM-DD" placeholder="请选择发布时间">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- <el-col :span="12">
|
||||
<el-form-item label="预警类型" prop="warningType">
|
||||
<el-select
|
||||
v-model="form.warningType"
|
||||
placeholder="预警类型"
|
||||
clearable
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in warning_type"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="预警状态" prop="warningStatus">
|
||||
<el-select
|
||||
v-model="form.warningStatus"
|
||||
placeholder="预警状态"
|
||||
clearable
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in warning_status"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="事件类别" prop="eventCategory">
|
||||
<el-select
|
||||
v-model="form.eventCategory"
|
||||
placeholder="事件类别"
|
||||
clearable
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in event_category"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col> -->
|
||||
<el-col :span="12">
|
||||
<el-form-item label="预警级别" prop="warningLevel">
|
||||
<el-select v-model="form.warningLevel" placeholder="预警级别" clearable style="width: 100%">
|
||||
<el-option v-for="dict in warning_level" :key="dict.value" :label="dict.label" :value="dict.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="经度" prop="lng">
|
||||
<el-input v-model="form.lng" placeholder="请输入经度" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="纬度" prop="lat">
|
||||
<el-input v-model="form.lat" placeholder="请输入纬度" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="地图帮助">
|
||||
<div class="map" @click="getMap">地图帮助</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="预计持续时间" prop="expectedDuration">
|
||||
<el-input v-model="form.expectedDuration" placeholder="请输入预计持续时间" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="可能波及范围" prop="scopeImpact">
|
||||
<el-input v-model="form.scopeImpact" placeholder="请输入可能波及范围" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="异常数据值" prop="abnormalData">
|
||||
<el-input v-model="form.abnormalData" placeholder="请输入异常数据值" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
<!-- 下发 -->
|
||||
<el-dialog :title="title" v-model="xiafaDialog" width="500px" append-to-body>
|
||||
<el-form label-position="top" ref="xiafaFormRef" :model="xiafaform" label-width="80px" :rules="xiafaRules">
|
||||
<el-row :gutter="40">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="部门" prop="bumen">
|
||||
<el-select v-model="xiafaform.bumen" placeholder="请选择地点" clearable style="width: 100%"
|
||||
@change="TreeCHange">
|
||||
<!-- 递归渲染树形选项 -->
|
||||
<el-option v-for="item in treeData" :key="item.id" :label="item.label" :value="item.id"
|
||||
:disabled="item.disabled" style="font-weight: bold" />
|
||||
<template v-for="group in treeData[0]?.children" :key="group.id">
|
||||
<!-- 父级选项（景区/商场） -->
|
||||
<el-option :label="group.label" :value="group.id" :disabled="group.disabled"
|
||||
style="font-weight: bold" />
|
||||
<!-- 子级选项 -->
|
||||
<el-option v-for="child in group.children" :key="child.id" :label="child.label" :value="child.id"
|
||||
:disabled="child.disabled" />
|
||||
</template>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="人员" prop="renyuan">
|
||||
<el-select :disabled="!xiafaform.bumen" v-model="xiafaform.renyuan" placeholder="请选择人员" clearable
|
||||
style="width: 100%">
|
||||
<el-option v-for="dict in peopleList" :key="dict.value" :label="dict.label" :value="dict.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="规则名称" prop="guizemingcheng">
|
||||
<el-select v-model="xiafaform.guizemingcheng" placeholder="预警类型" clearable style="width: 100%">
|
||||
<el-option v-for="dict in NnameList" :key="dict.value" :label="dict.label" :value="dict.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="委派时间" prop="delegationTime">
|
||||
<el-date-picker clearable v-model="xiafaform.delegationTime" type="date" style="width: 100%;"
|
||||
value-format="YYYY-MM-DD" placeholder="请选择委派时间">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button type="primary" @click="xiafaDialogSure">确 定</el-button>
|
||||
<el-button @click="xiafaDialog = false">取 消</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
<!-- 呼叫 -->
|
||||
<el-dialog :title="callTitle" v-model="callDialog" width="500px" append-to-body>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<div class="callDemo">
|
||||
<!-- 呼叫 -->
|
||||
<Call ref="CallRef" :listRows="callForm" width="100%" height="400px" />
|
||||
</div>
|
||||
|
||||
</el-col>
|
||||
</el-row>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="callDialog = false">关 闭</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="Information">
|
||||
const { proxy } = getCurrentInstance();
|
||||
|
||||
import {
|
||||
listInformation,
|
||||
getInformation,
|
||||
delInformation,
|
||||
addInformation,
|
||||
updateInformation,
|
||||
nameList,
|
||||
xiafaSrue,
|
||||
} from "@/api/WarningInformation";
|
||||
import {
|
||||
jklistCamera,
|
||||
} from "@/api/camera";
|
||||
import {
|
||||
getPoints,
|
||||
} from "@/api/points";
|
||||
import { deptTreeSelect, listUser } from "@/api/system/user";
|
||||
import { ElMessage, ElMessageBox } from "element-plus";
|
||||
import Call from "@/components/call.vue";
|
||||
const dateRange = ref([]);
|
||||
const filterShortcuts = ref([
|
||||
{
|
||||
text: "本周",
|
||||
value: () => {
|
||||
const now = new Date();
|
||||
const firstDay = new Date(
|
||||
now.setDate(
|
||||
now.getDate() - now.getDay() + (now.getDay() === 0 ? -6 : 1)
|
||||
)
|
||||
);
|
||||
const lastDay = new Date(now.setDate(now.getDate() - now.getDay() + 7));
|
||||
return [firstDay, lastDay];
|
||||
},
|
||||
},
|
||||
{
|
||||
text: "本月",
|
||||
value: () => {
|
||||
const now = new Date();
|
||||
const firstDay = new Date(now.getFullYear(), now.getMonth(), 1);
|
||||
const lastDay = new Date(now.getFullYear(), now.getMonth() + 1, 0);
|
||||
return [firstDay, lastDay];
|
||||
},
|
||||
},
|
||||
{
|
||||
text: "本季度",
|
||||
value: () => {
|
||||
const now = new Date();
|
||||
const quarter = Math.floor(now.getMonth() / 3);
|
||||
const firstDay = new Date(now.getFullYear(), quarter * 3, 1);
|
||||
const lastDay = new Date(now.getFullYear(), quarter * 3 + 3, 0);
|
||||
return [firstDay, lastDay];
|
||||
},
|
||||
},
|
||||
{
|
||||
text: "本年",
|
||||
value: () => {
|
||||
const now = new Date();
|
||||
const firstDay = new Date(now.getFullYear(), 0, 1);
|
||||
const lastDay = new Date(now.getFullYear(), 11, 31);
|
||||
return [firstDay, lastDay];
|
||||
},
|
||||
},
|
||||
]);
|
||||
|
||||
const {
|
||||
sys_yes_no,
|
||||
event_category,
|
||||
warning_level,
|
||||
warning_type,
|
||||
warning_status,
|
||||
event_status
|
||||
} = proxy.useDict(
|
||||
"sys_yes_no",
|
||||
"event_category",
|
||||
"warning_level",
|
||||
"warning_type",
|
||||
"warning_status",
|
||||
"event_status"
|
||||
);
|
||||
const jklistCameraList = ref([]);
|
||||
const informationList = ref([]);
|
||||
const open = ref(false);
|
||||
const loading = ref(true);
|
||||
const showSearch = ref(true);
|
||||
const ids = ref([]);
|
||||
const single = ref(true);
|
||||
const multiple = ref(true);
|
||||
const total = ref(0);
|
||||
const title = ref("");
|
||||
const treeData = ref([]);
|
||||
const xiafaDialog = ref(false);
|
||||
const peopleList = ref([]);
|
||||
const NnameList = ref([]);
|
||||
const warningSigns = ref("");
|
||||
const RqID = ref("");
|
||||
// 呼叫
|
||||
const callTitle = ref("");
|
||||
const callDialog = ref(false);
|
||||
const callForm = ref({});
|
||||
const data = reactive({
|
||||
form: {},
|
||||
xiafaform: {},
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
delFlag: 0,
|
||||
warningSigns: null,
|
||||
unitName: null,
|
||||
unitCode: null,
|
||||
releaseTime: null,
|
||||
warningStatus: null,
|
||||
warningType: null,
|
||||
eventCategory: null,
|
||||
warningLevel: null,
|
||||
expectedDuration: null,
|
||||
scopeImpact: null,
|
||||
deptId: null,
|
||||
abnormalData: null,
|
||||
},
|
||||
rules: {
|
||||
warningSigns: [
|
||||
{ required: true, message: "预警唯一标识符不能为空", trigger: "blur" },
|
||||
{ min: 1, max: 30, message: "长度在 1 到 30 个字符", trigger: "blur" },
|
||||
],
|
||||
unitName: [
|
||||
{ required: true, message: "发布单位名称不能为空", trigger: "blur" },
|
||||
{ min: 1, max: 30, message: "长度在 1 到 30 个字符", trigger: "blur" },
|
||||
],
|
||||
unitCode: [
|
||||
{ required: true, message: "发生点位不能为空", trigger: "blur" },
|
||||
],
|
||||
releaseTime: [
|
||||
{ required: true, message: "发布时间不能为空", trigger: "change" },
|
||||
],
|
||||
eventCategory: [
|
||||
{ required: true, message: "事件类别不能为空", trigger: "blur" },
|
||||
],
|
||||
warningStatus: [
|
||||
{ required: true, message: "预警状态不能为空", trigger: "blur" },
|
||||
],
|
||||
warningType: [
|
||||
{ required: true, message: "预警类型不能为空", trigger: "blur" },
|
||||
],
|
||||
warningLevel: [
|
||||
{ required: true, message: "预警级别不能为空", trigger: "blur" },
|
||||
],
|
||||
expectedDuration: [
|
||||
{ required: true, message: "预计持续时间不能为空", trigger: "blur" },
|
||||
],
|
||||
scopeImpact: [
|
||||
{ required: true, message: "可能波及范围不能为空", trigger: "blur" },
|
||||
{ min: 1, max: 30, message: "长度在 1 到 30 个字符", trigger: "blur" },
|
||||
],
|
||||
abnormalData: [
|
||||
{ required: true, message: "异常数据值不能为空", trigger: "blur" },
|
||||
{ min: 1, max: 30, message: "长度在 1 到 30 个字符", trigger: "blur" },
|
||||
],
|
||||
lng: [
|
||||
{ required: true, message: "经度不能为空", trigger: "blur" },
|
||||
{
|
||||
pattern: /^-?\d{1,3}(\.\d+)?$/,
|
||||
message: "请输入有效的经度值（-180~180）",
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
lat: [
|
||||
{ required: true, message: "纬度不能为空", trigger: "blur" },
|
||||
{
|
||||
pattern: /^-?\d{1,2}(\.\d+)?$/,
|
||||
message: "请输入有效的纬度值（-90~90）",
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
},
|
||||
xiafaRules: {
|
||||
bumen: [{ required: true, message: "部门不能为空", trigger: "blur" }],
|
||||
renyuan: [{ required: true, message: "人员不能为空", trigger: "blur" }],
|
||||
guizemingcheng: [
|
||||
{ required: true, message: "规则名称不能为空", trigger: "blur" },
|
||||
],
|
||||
delegationTime: [
|
||||
{ required: true, message: "时间不能为空", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
});
|
||||
const { queryParams, form, rules, xiafaform, xiafaRules } = toRefs(data);
|
||||
import moment from "moment";
|
||||
import { useRouter } from "vue-router";
|
||||
const router = useRouter();
|
||||
// 类型映射关系
|
||||
const typeToTabMap = {
|
||||
重点场所: "venue",
|
||||
景区: "scenic",
|
||||
景点: "scenic",
|
||||
旅游景区: "scenic",
|
||||
安保力量: "security",
|
||||
安保: "security",
|
||||
交通枢纽: "transport",
|
||||
交通: "transport",
|
||||
活动: "activity",
|
||||
大型活动: "activity",
|
||||
预警: "warning",
|
||||
监测预警: "warning",
|
||||
监控: "jiankong",
|
||||
};
|
||||
const handleActivityRowClickJK = (row) => {
|
||||
console.log(row);
|
||||
if (row.warningStatus == "3") {
|
||||
proxy.$modal.msgWarning("该条记录已处理");
|
||||
return;
|
||||
} else {
|
||||
const monitoringTypeName =
|
||||
typeToTabMap[row.monitoringTypeName] || "warning";
|
||||
goToMap(6, row.lat, row.lng, monitoringTypeName);
|
||||
}
|
||||
};
|
||||
function goToMap(screenId, lat, lng, monitoringTypeName, extraParams = {}) {
|
||||
if (!lat || !lng || isNaN(Number(lat)) || isNaN(Number(lng))) {
|
||||
proxy.$modal.msgWarning("该记录缺少有效的经纬度信息，无法定位");
|
||||
return;
|
||||
}
|
||||
|
||||
router.push({
|
||||
path: "/largeScreen",
|
||||
query: {
|
||||
screenId: screenId,
|
||||
latitude: Number(lat).toFixed(6),
|
||||
longitude: Number(lng).toFixed(6),
|
||||
monitoringTypeName: monitoringTypeName,
|
||||
...extraParams,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
/** 查询预警信息列表 */
|
||||
function getList() {
|
||||
loading.value = true;
|
||||
listInformation(queryParams.value).then((response) => {
|
||||
informationList.value = response.rows;
|
||||
console.log(informationList.value,'预警列表');
|
||||
|
||||
total.value = response.total;
|
||||
loading.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
// 取消按钮
|
||||
function cancel() {
|
||||
open.value = false;
|
||||
reset();
|
||||
}
|
||||
|
||||
// 表单重置
|
||||
function reset() {
|
||||
form.value = {
|
||||
id: null,
|
||||
warningSigns: null,
|
||||
unitName: null,
|
||||
unitCode: null,
|
||||
releaseTime: null,
|
||||
warningStatus: null,
|
||||
warningType: null,
|
||||
eventCategory: null,
|
||||
warningLevel: null,
|
||||
createBy: null,
|
||||
createTime: null,
|
||||
updateBy: null,
|
||||
updateTime: null,
|
||||
delFlag: null,
|
||||
expectedDuration: null,
|
||||
scopeImpact: null,
|
||||
deptId: null,
|
||||
abnormalData: null,
|
||||
startTime: undefined,
|
||||
endTime: undefined,
|
||||
};
|
||||
proxy.resetForm("informationRef");
|
||||
}
|
||||
function xiafareset() {
|
||||
xiafaform.value = {
|
||||
bumen: null,
|
||||
renyuan: null,
|
||||
guizemingcheng: null,
|
||||
delegationTime: null,
|
||||
};
|
||||
proxy.resetForm("xiafaFormRef");
|
||||
}
|
||||
/** 搜索按钮操作 */
|
||||
function handleQuery() {
|
||||
queryParams.value.pageNum = 1;
|
||||
// 这里修改为只更新时间参数，而不是覆盖整个queryParams
|
||||
if (dateRange.value && dateRange.value.length === 2) {
|
||||
queryParams.value.startTime = moment(dateRange.value[0]).format(
|
||||
"YYYY-MM-DD HH:mm:ss"
|
||||
);
|
||||
queryParams.value.endTime = moment(dateRange.value[1]).format(
|
||||
"YYYY-MM-DD HH:mm:ss"
|
||||
);
|
||||
} else {
|
||||
// 如果dateRange为空，则清空时间参数
|
||||
queryParams.value.startTime = undefined;
|
||||
queryParams.value.endTime = undefined;
|
||||
}
|
||||
getList();
|
||||
}
|
||||
|
||||
/** 重置按钮操作 */
|
||||
function resetQuery() {
|
||||
proxy.resetForm("queryRef");
|
||||
dateRange.value = [];
|
||||
handleQuery();
|
||||
}
|
||||
|
||||
// 多选框选中数据
|
||||
function handleSelectionChange(selection) {
|
||||
ids.value = selection.map((item) => item.id);
|
||||
single.value = selection.length != 1;
|
||||
multiple.value = !selection.length;
|
||||
}
|
||||
|
||||
/** 新增按钮操作 */
|
||||
function handleAdd() {
|
||||
reset();
|
||||
open.value = true;
|
||||
title.value = "添加预警信息";
|
||||
}
|
||||
|
||||
/** 修改按钮操作 */
|
||||
function handleUpdate(row) {
|
||||
reset();
|
||||
const _id = row.id || ids.value;
|
||||
getInformation(_id).then((response) => {
|
||||
form.value = response.data;
|
||||
open.value = true;
|
||||
title.value = "修改预警信息";
|
||||
});
|
||||
}
|
||||
// 督办
|
||||
function duban(row) {
|
||||
proxy.$modal
|
||||
.confirm("确认督办本条数据吗？", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
})
|
||||
.then(() => {
|
||||
row.isSupervise = 1;
|
||||
form.value = row;
|
||||
updateInformation(form.value).then((response) => {
|
||||
proxy.$modal.msgSuccess("修改成功");
|
||||
open.value = false;
|
||||
getList();
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
console.log("取消");
|
||||
});
|
||||
}
|
||||
// 下发
|
||||
function xiafa(row) {
|
||||
RqID.value = row.id;
|
||||
warningSigns.value = row.warningSigns;
|
||||
xiafareset();
|
||||
xiafaDialog.value = true;
|
||||
title.value = "下发";
|
||||
getNameList();
|
||||
}
|
||||
// select树选择事件
|
||||
function TreeCHange(e) {
|
||||
console.log(e);
|
||||
xiafaform.value.renyuan = "";
|
||||
let params = {
|
||||
pageNum: 1,
|
||||
pageSize: 100,
|
||||
deptId: e,
|
||||
};
|
||||
listUser(params).then((res) => {
|
||||
peopleList.value = [];
|
||||
res.rows.forEach((item) => {
|
||||
peopleList.value.push({
|
||||
label: item.userName,
|
||||
value: item.userId,
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
// 获取树结构
|
||||
function getDeptTree() {
|
||||
deptTreeSelect().then((response) => {
|
||||
treeData.value = response.data;
|
||||
});
|
||||
}
|
||||
// 下发弹出确认事件
|
||||
function xiafaDialogSure() {
|
||||
proxy.$refs["xiafaFormRef"].validate((valid) => {
|
||||
if (valid) {
|
||||
let params = {
|
||||
warningId: RqID.value,
|
||||
warningSigns: warningSigns.value,
|
||||
delegatePersonnel: xiafaform.value.renyuan,
|
||||
delegationTime: xiafaform.value.delegationTime,
|
||||
delegationDept: xiafaform.value.bumen,
|
||||
rulesId: xiafaform.value.guizemingcheng,
|
||||
};
|
||||
xiafaSrue(params).then((res) => {
|
||||
ElMessage.success("下发成功");
|
||||
getList();
|
||||
xiafaDialog.value = false;
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/** 提交按钮 */
|
||||
function submitForm() {
|
||||
proxy.$refs["informationRef"].validate((valid) => {
|
||||
if (valid) {
|
||||
if (form.value.id != null) {
|
||||
updateInformation(form.value).then((response) => {
|
||||
proxy.$modal.msgSuccess("修改成功");
|
||||
open.value = false;
|
||||
getList();
|
||||
});
|
||||
} else {
|
||||
addInformation(form.value).then((response) => {
|
||||
proxy.$modal.msgSuccess("新增成功");
|
||||
open.value = false;
|
||||
getList();
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 重置呼叫弹框信息
|
||||
function resetCall() {
|
||||
callTitle.value = "";
|
||||
callDialog.value = false;
|
||||
callForm.value = {};
|
||||
}
|
||||
|
||||
// 打开呼叫弹框
|
||||
function handleOpenCall(row) {
|
||||
console.log(row);
|
||||
|
||||
resetCall();
|
||||
callTitle.value = "呼叫";
|
||||
callDialog.value = true;
|
||||
// callForm.value = JSON.parse(JSON.stringify(row));
|
||||
const _id = row.unitCode;
|
||||
getPoints(_id).then((response) => {
|
||||
callForm.value = {
|
||||
phone: response.data.dutyPhone
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
/** 删除按钮操作 */
|
||||
function handleDelete(row) {
|
||||
const _ids = row.id || ids.value;
|
||||
proxy.$modal
|
||||
.confirm("是否确认删除所选数据项？")
|
||||
.then(function () {
|
||||
return delInformation(_ids);
|
||||
})
|
||||
.then(() => {
|
||||
getList();
|
||||
proxy.$modal.msgSuccess("删除成功");
|
||||
})
|
||||
.catch(() => { });
|
||||
}
|
||||
|
||||
/** 导出按钮操作 */
|
||||
function handleExport() {
|
||||
proxy.download(
|
||||
"large/information/export",
|
||||
{
|
||||
...queryParams.value,
|
||||
},
|
||||
`information_${new Date().getTime()}.xlsx`
|
||||
);
|
||||
}
|
||||
function getMap() {
|
||||
window.open(
|
||||
"https://lbs.amap.com/tools/picker",
|
||||
"_blank",
|
||||
"width=950,height=700"
|
||||
);
|
||||
}
|
||||
function getNameList() {
|
||||
nameList().then((res) => {
|
||||
NnameList.value = [];
|
||||
console.log(res);
|
||||
res.rows.forEach((item) => {
|
||||
NnameList.value.push({
|
||||
label: item.ruleName,
|
||||
value: item.id,
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
function getjklistCamera() {
|
||||
let params = {
|
||||
delFlag: 0,
|
||||
};
|
||||
jklistCamera(params).then((res) => {
|
||||
jklistCameraList.value = res.rows;
|
||||
});
|
||||
}
|
||||
getList();
|
||||
// getDeptTree();
|
||||
getjklistCamera();
|
||||
</script>
|
||||
<style scoped>
|
||||
.map {
|
||||
cursor: pointer;
|
||||
color: #203f73;
|
||||
}
|
||||
|
||||
/* 修改斑马纹的浅色行背景 */
|
||||
::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td {
|
||||
background-color: #dbe4f5 !important;
|
||||
/* 改为淡蓝色 */
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
.callDemo {
|
||||
&:deep(#demo) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
|
||||
.el-button {
|
||||
max-width: 100px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,313 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<el-form
|
||||
:model="queryParams"
|
||||
ref="queryRef"
|
||||
:inline="true"
|
||||
v-show="showSearch"
|
||||
label-width="120px"
|
||||
>
|
||||
<el-row>
|
||||
<el-form-item label="唯一标识符" prop="warningSigns">
|
||||
<el-input
|
||||
v-model="queryParams.warningSigns"
|
||||
placeholder="请输入预警唯一标识符"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="委派时间" prop="delegationTime">
|
||||
<el-date-picker
|
||||
clearable
|
||||
v-model="queryParams.delegationTime"
|
||||
type="date"
|
||||
value-format="YYYY-MM-DD"
|
||||
placeholder="请选择委派时间"
|
||||
>
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="Search" @click="handleQuery"
|
||||
>搜索</el-button
|
||||
>
|
||||
<el-button icon="RefreshLeft" class="Refresh" @click="resetQuery"
|
||||
>重置</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
<el-row class="dfjb">
|
||||
<el-row :gutter="10"> </el-row>
|
||||
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div class="tablebox">
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="handleList"
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column
|
||||
label="预警唯一标识符"
|
||||
show-overflow-tooltip
|
||||
width="160"
|
||||
align="center"
|
||||
prop="warningSigns"
|
||||
/>
|
||||
<el-table-column label="委派人" align="center" prop="nickName" />
|
||||
<el-table-column
|
||||
label="委派时间"
|
||||
align="center"
|
||||
prop="delegationTime"
|
||||
width="180"
|
||||
>
|
||||
<template #default="scope">
|
||||
<span>{{
|
||||
parseTime(scope.row.delegationTime, "{y}-{m}-{d}")
|
||||
}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="委派部门" align="center" prop="deptName" />
|
||||
<!-- <el-table-column
|
||||
label="处置措施"
|
||||
align="center"
|
||||
prop="disposalMeasures"
|
||||
/>
|
||||
<el-table-column label="处置结果" align="center" prop="disposalResults" /> -->
|
||||
<el-table-column label="处理状态" align="center" prop="disposalStatus">
|
||||
<template #default="scope">
|
||||
<span v-if="scope.row.disposalStatus == 1">已处理</span>
|
||||
<span v-else-if="scope.row.disposalStatus == 2">已回复</span>
|
||||
<span v-else>待处理</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="操作"
|
||||
align="center"
|
||||
class-name="small-padding fixed-width"
|
||||
>
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
:disabled="
|
||||
scope.row.disposalStatus == 1 || scope.row.disposalStatus == 2
|
||||
"
|
||||
icon="Look"
|
||||
@click="shouli(scope.row)"
|
||||
>受理</el-button
|
||||
>
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
:disabled="scope.row.disposalStatus != 1"
|
||||
icon="Look"
|
||||
@click="huifu(scope.row)"
|
||||
>回复</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
v-model:page="queryParams.pageNum"
|
||||
v-model:limit="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 回复对话框 -->
|
||||
<el-dialog :title="title" v-model="open" width="500px" append-to-body>
|
||||
<el-form
|
||||
ref="informationRef"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
label-width="80px"
|
||||
>
|
||||
<el-form-item label="处置措施" prop="disposalMeasures">
|
||||
<el-input
|
||||
v-model="form.disposalMeasures"
|
||||
placeholder="请输入处置措施"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="处置结果" prop="disposalResults">
|
||||
<el-input
|
||||
v-model="form.disposalResults"
|
||||
placeholder="请输入处置结果"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="Handle">
|
||||
import {
|
||||
listHandle,
|
||||
getHandle,
|
||||
delHandle,
|
||||
addHandle,
|
||||
updateHandle,
|
||||
addprocess,
|
||||
} from "@/api/Warningdisposal";
|
||||
import { ElMessage } from "element-plus";
|
||||
|
||||
const { proxy } = getCurrentInstance();
|
||||
|
||||
const handleList = ref([]);
|
||||
const open = ref(false);
|
||||
const loading = ref(true);
|
||||
const showSearch = ref(true);
|
||||
const ids = ref([]);
|
||||
const single = ref(true);
|
||||
const multiple = ref(true);
|
||||
const total = ref(0);
|
||||
const title = ref("");
|
||||
|
||||
const data = reactive({
|
||||
form: {},
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
delFlag: 0,
|
||||
warningSigns: null,
|
||||
delegatePersonnel: null,
|
||||
delegationTime: null,
|
||||
delegationDept: null,
|
||||
disposalMeasures: null,
|
||||
disposalResults: null,
|
||||
disposalStatus: null,
|
||||
},
|
||||
rules: {
|
||||
disposalMeasures: [
|
||||
{ required: true, message: "处置措施不能为空", trigger: "change" },
|
||||
{ min: 1, max: 30, message: "长度在 1 到 30 个字符", trigger: "blur" },
|
||||
],
|
||||
disposalResults: [
|
||||
{ required: true, message: "处置结果不能为空", trigger: "change" },
|
||||
{ min: 1, max: 30, message: "长度在 1 到 30 个字符", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
});
|
||||
|
||||
const { queryParams, form, rules } = toRefs(data);
|
||||
|
||||
/** 查询预警信息处置列表 */
|
||||
function getList() {
|
||||
loading.value = true;
|
||||
listHandle(queryParams.value).then((response) => {
|
||||
handleList.value = response.rows;
|
||||
total.value = response.total;
|
||||
loading.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
// 取消按钮
|
||||
function cancel() {
|
||||
open.value = false;
|
||||
reset();
|
||||
}
|
||||
|
||||
// 表单重置
|
||||
function reset() {
|
||||
form.value = {
|
||||
id: null,
|
||||
warningSigns: null,
|
||||
delegatePersonnel: null,
|
||||
delegationTime: null,
|
||||
delegationDept: null,
|
||||
disposalMeasures: null,
|
||||
disposalResults: null,
|
||||
disposalStatus: null,
|
||||
createBy: null,
|
||||
createTime: null,
|
||||
updateBy: null,
|
||||
updateTime: null,
|
||||
delFlag: null,
|
||||
};
|
||||
proxy.resetForm("informationRef");
|
||||
}
|
||||
|
||||
/** 搜索按钮操作 */
|
||||
function handleQuery() {
|
||||
queryParams.value.pageNum = 1;
|
||||
getList();
|
||||
}
|
||||
|
||||
/** 重置按钮操作 */
|
||||
function resetQuery() {
|
||||
proxy.resetForm("queryRef");
|
||||
handleQuery();
|
||||
}
|
||||
|
||||
// 多选框选中数据
|
||||
function handleSelectionChange(selection) {
|
||||
ids.value = selection.map((item) => item.id);
|
||||
single.value = selection.length != 1;
|
||||
multiple.value = !selection.length;
|
||||
}
|
||||
|
||||
/** 提交按钮 */
|
||||
function submitForm() {
|
||||
console.log(form.value);
|
||||
proxy.$refs["informationRef"].validate((valid) => {
|
||||
if (valid) {
|
||||
form.value.disposalStatus = 2;
|
||||
updateHandle(form.value).then((res) => {
|
||||
if (res.code == 200) {
|
||||
console.log(res);
|
||||
open.value = false;
|
||||
ElMessage.success("回复成功");
|
||||
getList();
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/** 受理操作 */
|
||||
function shouli(row) {
|
||||
const _ids = row.id || ids.value;
|
||||
proxy.$modal
|
||||
.confirm("是否受理本条数据？")
|
||||
.then(function () {})
|
||||
.then(() => {
|
||||
row.disposalStatus = 1;
|
||||
updateHandle(row).then((res) => {
|
||||
if (res.code == 200) {
|
||||
console.log(res);
|
||||
ElMessage.success("受理成功");
|
||||
}
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
console.log("取消");
|
||||
});
|
||||
}
|
||||
// 回复操作
|
||||
function huifu(row) {
|
||||
form.value = row;
|
||||
open.value = true;
|
||||
title.value = "回复";
|
||||
}
|
||||
/** 导出按钮操作 */
|
||||
function handleExport() {
|
||||
proxy.download(
|
||||
"large/handle/export",
|
||||
{
|
||||
...queryParams.value,
|
||||
},
|
||||
`handle_${new Date().getTime()}.xlsx`
|
||||
);
|
||||
}
|
||||
|
||||
getList();
|
||||
</script>
|
||||
|
|
@ -0,0 +1,824 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<el-form
|
||||
:model="queryParams"
|
||||
ref="queryRef"
|
||||
:inline="true"
|
||||
v-show="showSearch"
|
||||
>
|
||||
<el-row>
|
||||
<el-form-item label="预警名称" prop="warningSigns">
|
||||
<el-input
|
||||
v-model="queryParams.warningSigns"
|
||||
placeholder="请输入预警名称"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="发布时间" prop="releaseTime">
|
||||
<el-date-picker
|
||||
clearable
|
||||
v-model="queryParams.releaseTime"
|
||||
type="date"
|
||||
value-format="YYYY-MM-DD"
|
||||
placeholder="请选择发布时间"
|
||||
>
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
<el-row class="dfjb">
|
||||
<!-- <el-row :gutter="10">
|
||||
<el-col :span="1.5">
|
||||
<el-button type="primary" @click="handleAdd" class="circle-plus-btn">
|
||||
新增
|
||||
</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="danger" icon="Delete" plain :disabled="multiple" @click="handleDelete"
|
||||
v-hasPermi="['system:post:remove']">删除</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate"
|
||||
v-hasPermi="['large:information:edit']">修改</el-button>
|
||||
</el-col>
|
||||
</el-row> -->
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="Search" @click="handleQuery"
|
||||
>搜索</el-button
|
||||
>
|
||||
<el-button icon="RefreshLeft" class="Refresh" @click="resetQuery"
|
||||
>重置</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
</el-form>
|
||||
|
||||
<div class="tablebox">
|
||||
<el-table
|
||||
stripe
|
||||
v-loading="loading"
|
||||
:data="informationList"
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column
|
||||
label="预警名称"
|
||||
align="center"
|
||||
prop="warningSigns"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
<el-table-column
|
||||
label="预警点位"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
prop="pointName"
|
||||
/>
|
||||
<el-table-column
|
||||
label="预警摄像"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
prop="cameraName"
|
||||
/>
|
||||
<!-- <el-table-column
|
||||
label="发布单位编码"
|
||||
width="140"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
prop="unitCode"
|
||||
/> -->
|
||||
<el-table-column
|
||||
label="发布时间"
|
||||
align="center"
|
||||
prop="releaseTime"
|
||||
show-overflow-tooltip
|
||||
>
|
||||
<template #default="scope">
|
||||
<span>{{
|
||||
parseTime(scope.row.releaseTime, "{y}-{m}-{d} {h}:{i}:{s}")
|
||||
}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="预警状态" align="center" prop="warningStatus">
|
||||
<template #default="scope">
|
||||
<dict-tag
|
||||
:options="event_status"
|
||||
:value="scope.row.warningStatus"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column label="预警类型" align="center" prop="warningType">
|
||||
<template #default="scope">
|
||||
<dict-tag :options="warning_type" :value="scope.row.warningType" />
|
||||
</template>
|
||||
</el-table-column> -->
|
||||
<!-- <el-table-column label="事件类别" align="center" prop="eventCategory">
|
||||
<template #default="scope">
|
||||
<dict-tag
|
||||
:options="event_category"
|
||||
:value="scope.row.eventCategory"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column> -->
|
||||
<el-table-column label="预警级别" align="center" prop="warningLevel">
|
||||
<template #default="scope">
|
||||
<dict-tag
|
||||
:options="warning_level"
|
||||
:value="scope.row.warningLevel"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column label="经度" align="center" prop="lng" show-overflow-tooltip />
|
||||
<el-table-column label="纬度" align="center" prop="lat" show-overflow-tooltip /> -->
|
||||
<el-table-column
|
||||
label="预计持续时间"
|
||||
align="center"
|
||||
width="140"
|
||||
show-overflow-tooltip
|
||||
prop="expectedDuration"
|
||||
/>
|
||||
<el-table-column
|
||||
label="可能波及范围"
|
||||
width="140"
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
prop="scopeImpact"
|
||||
/>
|
||||
<el-table-column
|
||||
label="异常数据值"
|
||||
align="center"
|
||||
width="140"
|
||||
show-overflow-tooltip
|
||||
prop="abnormalData"
|
||||
/>
|
||||
<el-table-column
|
||||
fixed="right"
|
||||
label="操作"
|
||||
align="center"
|
||||
width="280"
|
||||
class-name="small-padding fixed-width"
|
||||
>
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
:disabled="scope.row.warningStatus != 1"
|
||||
icon="Look"
|
||||
@click="shouli(scope.row)"
|
||||
>受理</el-button
|
||||
>
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
:disabled="scope.row.warningStatus != 2"
|
||||
icon="Look"
|
||||
@click="huifu(scope.row)"
|
||||
>回复</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
v-model:page="queryParams.pageNum"
|
||||
v-model:limit="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 添加或修改预警信息对话框 -->
|
||||
|
||||
<!-- 下发 -->
|
||||
<el-dialog
|
||||
:title="title"
|
||||
v-model="xiafaDialog"
|
||||
width="500px"
|
||||
append-to-body
|
||||
>
|
||||
<el-form
|
||||
label-position="top"
|
||||
ref="xiafaFormRef"
|
||||
:model="xiafaform"
|
||||
label-width="80px"
|
||||
:rules="xiafaRules"
|
||||
>
|
||||
<el-row :gutter="40">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="部门" prop="bumen">
|
||||
<el-select
|
||||
v-model="xiafaform.bumen"
|
||||
placeholder="请选择地点"
|
||||
clearable
|
||||
style="width: 100%"
|
||||
@change="TreeCHange"
|
||||
>
|
||||
<!-- 递归渲染树形选项 -->
|
||||
<el-option
|
||||
v-for="item in treeData"
|
||||
:key="item.id"
|
||||
:label="item.label"
|
||||
:value="item.id"
|
||||
:disabled="item.disabled"
|
||||
style="font-weight: bold"
|
||||
/>
|
||||
<template
|
||||
v-for="group in treeData[0]?.children"
|
||||
:key="group.id"
|
||||
>
|
||||
<!-- 父级选项（景区/商场） -->
|
||||
<el-option
|
||||
:label="group.label"
|
||||
:value="group.id"
|
||||
:disabled="group.disabled"
|
||||
style="font-weight: bold"
|
||||
/>
|
||||
<!-- 子级选项 -->
|
||||
<el-option
|
||||
v-for="child in group.children"
|
||||
:key="child.id"
|
||||
:label="child.label"
|
||||
:value="child.id"
|
||||
:disabled="child.disabled"
|
||||
/>
|
||||
</template>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="人员" prop="renyuan">
|
||||
<el-select
|
||||
:disabled="!xiafaform.bumen"
|
||||
v-model="xiafaform.renyuan"
|
||||
placeholder="请选择人员"
|
||||
clearable
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in peopleList"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="规则名称" prop="guizemingcheng">
|
||||
<el-select
|
||||
v-model="xiafaform.guizemingcheng"
|
||||
placeholder="预警类型"
|
||||
clearable
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in NnameList"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="委派时间" prop="delegationTime">
|
||||
<el-date-picker
|
||||
clearable
|
||||
v-model="xiafaform.delegationTime"
|
||||
type="date"
|
||||
style="width: 100%"
|
||||
value-format="YYYY-MM-DD"
|
||||
placeholder="请选择委派时间"
|
||||
>
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button type="primary" @click="xiafaDialogSure">确 定</el-button>
|
||||
<el-button @click="xiafaDialog = false">取 消</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
<!-- 呼叫 -->
|
||||
<el-dialog
|
||||
:title="callTitle"
|
||||
v-model="callDialog"
|
||||
width="500px"
|
||||
append-to-body
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<div class="callDemo">
|
||||
<!-- 呼叫 -->
|
||||
<Call
|
||||
ref="CallRef"
|
||||
:listRows="callForm"
|
||||
width="100%"
|
||||
height="400px"
|
||||
/>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="callDialog = false">关 闭</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
<!-- 回复对话框 -->
|
||||
<el-dialog :title="title" v-model="open" width="500px" append-to-body>
|
||||
<el-form
|
||||
ref="informationRef"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
label-width="80px"
|
||||
>
|
||||
<el-form-item label="处置措施" prop="disposalMeasures">
|
||||
<el-input
|
||||
v-model="form.disposalMeasures"
|
||||
placeholder="请输入处置措施"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="处置结果" prop="disposalResults">
|
||||
<el-input
|
||||
v-model="form.disposalResults"
|
||||
placeholder="请输入处置结果"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="Information">
|
||||
const { proxy } = getCurrentInstance();
|
||||
|
||||
import {
|
||||
listInformation,
|
||||
getInformation,
|
||||
delInformation,
|
||||
addInformation,
|
||||
updateInformation,
|
||||
nameList,
|
||||
xiafaSrue,
|
||||
} from "@/api/WarningInformation";
|
||||
import {
|
||||
listHandle,
|
||||
getHandle,
|
||||
delHandle,
|
||||
addHandle,
|
||||
updateHandle,
|
||||
addprocess,
|
||||
} from "@/api/Warningdisposal";
|
||||
import { jklistCamera } from "@/api/camera";
|
||||
import { getPoints } from "@/api/points";
|
||||
import { deptTreeSelect, listUser } from "@/api/system/user";
|
||||
import { ElMessage, ElMessageBox } from "element-plus";
|
||||
import Call from "@/components/call.vue";
|
||||
|
||||
const {
|
||||
sys_yes_no,
|
||||
event_category,
|
||||
warning_level,
|
||||
warning_type,
|
||||
warning_status,
|
||||
event_status,
|
||||
} = proxy.useDict(
|
||||
"sys_yes_no",
|
||||
"event_category",
|
||||
"warning_level",
|
||||
"warning_type",
|
||||
"warning_status",
|
||||
"event_status"
|
||||
);
|
||||
const jklistCameraList = ref([]);
|
||||
const informationList = ref([]);
|
||||
const open = ref(false);
|
||||
const loading = ref(true);
|
||||
const showSearch = ref(true);
|
||||
const ids = ref([]);
|
||||
const single = ref(true);
|
||||
const multiple = ref(true);
|
||||
const total = ref(0);
|
||||
const title = ref("");
|
||||
const treeData = ref([]);
|
||||
const xiafaDialog = ref(false);
|
||||
const peopleList = ref([]);
|
||||
const NnameList = ref([]);
|
||||
const warningSigns = ref("");
|
||||
const RqID = ref("");
|
||||
|
||||
// 呼叫
|
||||
const callTitle = ref("");
|
||||
const callDialog = ref(false);
|
||||
const callForm = ref({});
|
||||
const data = reactive({
|
||||
form: {},
|
||||
xiafaform: {},
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
delFlag: 0,
|
||||
warningSigns: null,
|
||||
unitName: null,
|
||||
unitCode: null,
|
||||
releaseTime: null,
|
||||
warningStatus: null,
|
||||
warningType: null,
|
||||
eventCategory: null,
|
||||
warningLevel: null,
|
||||
expectedDuration: null,
|
||||
scopeImpact: null,
|
||||
deptId: null,
|
||||
abnormalData: null,
|
||||
},
|
||||
rules: {
|
||||
disposalMeasures: [
|
||||
{ required: true, message: "处置措施不能为空", trigger: "change" },
|
||||
{ min: 1, max: 30, message: "长度在 1 到 30 个字符", trigger: "blur" },
|
||||
],
|
||||
disposalResults: [
|
||||
{ required: true, message: "处置结果不能为空", trigger: "change" },
|
||||
{ min: 1, max: 30, message: "长度在 1 到 30 个字符", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
xiafaRules: {
|
||||
bumen: [{ required: true, message: "部门不能为空", trigger: "blur" }],
|
||||
renyuan: [{ required: true, message: "人员不能为空", trigger: "blur" }],
|
||||
guizemingcheng: [
|
||||
{ required: true, message: "规则名称不能为空", trigger: "blur" },
|
||||
],
|
||||
delegationTime: [
|
||||
{ required: true, message: "时间不能为空", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
});
|
||||
const { queryParams, form, rules, xiafaform, xiafaRules } = toRefs(data);
|
||||
|
||||
import { useRouter } from "vue-router";
|
||||
const router = useRouter();
|
||||
// 类型映射关系
|
||||
const typeToTabMap = {
|
||||
重点场所: "venue",
|
||||
景区: "scenic",
|
||||
景点: "scenic",
|
||||
旅游景区: "scenic",
|
||||
安保力量: "security",
|
||||
安保: "security",
|
||||
交通枢纽: "transport",
|
||||
交通: "transport",
|
||||
活动: "activity",
|
||||
大型活动: "activity",
|
||||
预警: "warning",
|
||||
监测预警: "warning",
|
||||
监控: "jiankong",
|
||||
};
|
||||
const handleActivityRowClickJK = (row) => {
|
||||
console.log(row);
|
||||
if (row.warningStatus == "3") {
|
||||
proxy.$modal.msgWarning("该条记录已处理");
|
||||
return;
|
||||
} else {
|
||||
const monitoringTypeName =
|
||||
typeToTabMap[row.monitoringTypeName] || "warning";
|
||||
goToMap(6, row.lat, row.lng, monitoringTypeName);
|
||||
}
|
||||
};
|
||||
function goToMap(screenId, lat, lng, monitoringTypeName, extraParams = {}) {
|
||||
if (!lat || !lng || isNaN(Number(lat)) || isNaN(Number(lng))) {
|
||||
proxy.$modal.msgWarning("该记录缺少有效的经纬度信息，无法定位");
|
||||
return;
|
||||
}
|
||||
|
||||
router.push({
|
||||
path: "/largeScreen",
|
||||
query: {
|
||||
screenId: screenId,
|
||||
latitude: Number(lat).toFixed(6),
|
||||
longitude: Number(lng).toFixed(6),
|
||||
monitoringTypeName: monitoringTypeName,
|
||||
...extraParams,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
/** 查询预警信息列表 */
|
||||
function getList() {
|
||||
loading.value = true;
|
||||
listInformation(queryParams.value).then((response) => {
|
||||
informationList.value = response.rows;
|
||||
console.log(informationList.value, "预警列表");
|
||||
|
||||
total.value = response.total;
|
||||
loading.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
// 取消按钮
|
||||
function cancel() {
|
||||
open.value = false;
|
||||
reset();
|
||||
}
|
||||
|
||||
// 表单重置
|
||||
function reset() {
|
||||
form.value = {
|
||||
id: null,
|
||||
warningSigns: null,
|
||||
unitName: null,
|
||||
unitCode: null,
|
||||
releaseTime: null,
|
||||
warningStatus: null,
|
||||
warningType: null,
|
||||
eventCategory: null,
|
||||
warningLevel: null,
|
||||
createBy: null,
|
||||
createTime: null,
|
||||
updateBy: null,
|
||||
updateTime: null,
|
||||
delFlag: null,
|
||||
expectedDuration: null,
|
||||
scopeImpact: null,
|
||||
deptId: null,
|
||||
abnormalData: null,
|
||||
};
|
||||
proxy.resetForm("informationRef");
|
||||
}
|
||||
function xiafareset() {
|
||||
xiafaform.value = {
|
||||
bumen: null,
|
||||
renyuan: null,
|
||||
guizemingcheng: null,
|
||||
delegationTime: null,
|
||||
};
|
||||
proxy.resetForm("xiafaFormRef");
|
||||
}
|
||||
/** 搜索按钮操作 */
|
||||
function handleQuery() {
|
||||
queryParams.value.pageNum = 1;
|
||||
getList();
|
||||
}
|
||||
|
||||
/** 重置按钮操作 */
|
||||
function resetQuery() {
|
||||
proxy.resetForm("queryRef");
|
||||
handleQuery();
|
||||
}
|
||||
|
||||
// 多选框选中数据
|
||||
function handleSelectionChange(selection) {
|
||||
ids.value = selection.map((item) => item.id);
|
||||
single.value = selection.length != 1;
|
||||
multiple.value = !selection.length;
|
||||
}
|
||||
|
||||
/** 新增按钮操作 */
|
||||
function handleAdd() {
|
||||
reset();
|
||||
open.value = true;
|
||||
title.value = "添加预警信息";
|
||||
}
|
||||
|
||||
/** 修改按钮操作 */
|
||||
function handleUpdate(row) {
|
||||
reset();
|
||||
const _id = row.id || ids.value;
|
||||
getInformation(_id).then((response) => {
|
||||
form.value = response.data;
|
||||
open.value = true;
|
||||
title.value = "修改预警信息";
|
||||
});
|
||||
}
|
||||
// 督办
|
||||
function duban(row) {
|
||||
proxy.$modal
|
||||
.confirm("确认督办本条数据吗？", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
})
|
||||
.then(() => {
|
||||
row.isSupervise = 1;
|
||||
form.value = row;
|
||||
updateInformation(form.value).then((response) => {
|
||||
proxy.$modal.msgSuccess("修改成功");
|
||||
open.value = false;
|
||||
getList();
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
console.log("取消");
|
||||
});
|
||||
}
|
||||
// 下发
|
||||
function xiafa(row) {
|
||||
RqID.value = row.id;
|
||||
warningSigns.value = row.warningSigns;
|
||||
xiafareset();
|
||||
xiafaDialog.value = true;
|
||||
title.value = "下发";
|
||||
getNameList();
|
||||
}
|
||||
// select树选择事件
|
||||
function TreeCHange(e) {
|
||||
console.log(e);
|
||||
xiafaform.value.renyuan = "";
|
||||
let params = {
|
||||
pageNum: 1,
|
||||
pageSize: 100,
|
||||
deptId: e,
|
||||
};
|
||||
listUser(params).then((res) => {
|
||||
peopleList.value = [];
|
||||
res.rows.forEach((item) => {
|
||||
peopleList.value.push({
|
||||
label: item.userName,
|
||||
value: item.userId,
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
// 回复操作
|
||||
function huifu(row) {
|
||||
form.value = row;
|
||||
open.value = true;
|
||||
title.value = "回复";
|
||||
}
|
||||
// 获取树结构
|
||||
function getDeptTree() {
|
||||
deptTreeSelect().then((response) => {
|
||||
treeData.value = response.data;
|
||||
});
|
||||
}
|
||||
// 下发弹出确认事件
|
||||
function xiafaDialogSure() {
|
||||
proxy.$refs["xiafaFormRef"].validate((valid) => {
|
||||
if (valid) {
|
||||
let params = {
|
||||
warningId: RqID.value,
|
||||
warningSigns: warningSigns.value,
|
||||
delegatePersonnel: xiafaform.value.renyuan,
|
||||
delegationTime: xiafaform.value.delegationTime,
|
||||
delegationDept: xiafaform.value.bumen,
|
||||
rulesId: xiafaform.value.guizemingcheng,
|
||||
};
|
||||
xiafaSrue(params).then((res) => {
|
||||
ElMessage.success("下发成功");
|
||||
getList();
|
||||
xiafaDialog.value = false;
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
/** 受理操作 */
|
||||
function shouli(row) {
|
||||
const _ids = row.id || ids.value;
|
||||
proxy.$modal
|
||||
.confirm("是否受理本条数据？")
|
||||
.then(function () {})
|
||||
.then(() => {
|
||||
row.disposalStatus = 1;
|
||||
updateHandle(row).then((res) => {
|
||||
if (res.code == 200) {
|
||||
console.log(res);
|
||||
ElMessage.success("受理成功");
|
||||
}
|
||||
getList();
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
console.log("取消");
|
||||
});
|
||||
}
|
||||
/** 提交按钮 */
|
||||
function submitForm() {
|
||||
console.log(form.value);
|
||||
proxy.$refs["informationRef"].validate((valid) => {
|
||||
if (valid) {
|
||||
form.value.disposalStatus = 2;
|
||||
updateHandle(form.value).then((res) => {
|
||||
if (res.code == 200) {
|
||||
console.log(res);
|
||||
open.value = false;
|
||||
ElMessage.success("回复成功");
|
||||
getList();
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 重置呼叫弹框信息
|
||||
function resetCall() {
|
||||
callTitle.value = "";
|
||||
callDialog.value = false;
|
||||
callForm.value = {};
|
||||
}
|
||||
|
||||
// 打开呼叫弹框
|
||||
function handleOpenCall(row) {
|
||||
console.log(row);
|
||||
|
||||
resetCall();
|
||||
callTitle.value = "呼叫";
|
||||
callDialog.value = true;
|
||||
// callForm.value = JSON.parse(JSON.stringify(row));
|
||||
const _id = row.unitCode;
|
||||
getPoints(_id).then((response) => {
|
||||
callForm.value = {
|
||||
phone: response.data.dutyPhone,
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
/** 删除按钮操作 */
|
||||
function handleDelete(row) {
|
||||
const _ids = row.id || ids.value;
|
||||
proxy.$modal
|
||||
.confirm("是否确认删除所选数据项？")
|
||||
.then(function () {
|
||||
return delInformation(_ids);
|
||||
})
|
||||
.then(() => {
|
||||
getList();
|
||||
proxy.$modal.msgSuccess("删除成功");
|
||||
})
|
||||
.catch(() => {});
|
||||
}
|
||||
|
||||
/** 导出按钮操作 */
|
||||
function handleExport() {
|
||||
proxy.download(
|
||||
"large/information/export",
|
||||
{
|
||||
...queryParams.value,
|
||||
},
|
||||
`information_${new Date().getTime()}.xlsx`
|
||||
);
|
||||
}
|
||||
function getMap() {
|
||||
window.open(
|
||||
"https://lbs.amap.com/tools/picker",
|
||||
"_blank",
|
||||
"width=950,height=700"
|
||||
);
|
||||
}
|
||||
function getNameList() {
|
||||
nameList().then((res) => {
|
||||
NnameList.value = [];
|
||||
console.log(res);
|
||||
res.rows.forEach((item) => {
|
||||
NnameList.value.push({
|
||||
label: item.ruleName,
|
||||
value: item.id,
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
function getjklistCamera() {
|
||||
let params = {
|
||||
delFlag: 0,
|
||||
};
|
||||
jklistCamera(params).then((res) => {
|
||||
jklistCameraList.value = res.rows;
|
||||
});
|
||||
}
|
||||
getList();
|
||||
// getDeptTree();
|
||||
getjklistCamera();
|
||||
</script>
|
||||
<style scoped>
|
||||
.map {
|
||||
cursor: pointer;
|
||||
color: #203f73;
|
||||
}
|
||||
|
||||
/* 修改斑马纹的浅色行背景 */
|
||||
::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td {
|
||||
background-color: #dbe4f5 !important;
|
||||
/* 改为淡蓝色 */
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
.callDemo {
|
||||
&:deep(#demo) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
|
||||
.el-button {
|
||||
max-width: 100px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,368 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<el-form
|
||||
:model="queryParams"
|
||||
ref="queryRef"
|
||||
:inline="true"
|
||||
v-show="showSearch"
|
||||
label-width="68px"
|
||||
>
|
||||
<el-row>
|
||||
<el-form-item label="规则名称" prop="ruleName">
|
||||
<el-input
|
||||
v-model="queryParams.ruleName"
|
||||
placeholder="请输入规则名称"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="管控措施" prop="controlMeasures">
|
||||
<el-input
|
||||
v-model="queryParams.controlMeasures"
|
||||
placeholder="请输入管控措施"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="资源调度" prop="resourceScheduling">
|
||||
<el-input
|
||||
v-model="queryParams.resourceScheduling"
|
||||
placeholder="请输入资源调度"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
<el-row class="dfjb">
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="handleAdd"
|
||||
class="circle-plus-btn"
|
||||
>
|
||||
新增
|
||||
</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="danger"
|
||||
icon="Delete"
|
||||
plain
|
||||
:disabled="multiple"
|
||||
@click="handleDelete"
|
||||
>删除</el-button
|
||||
>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
icon="Edit"
|
||||
:disabled="single"
|
||||
@click="handleUpdate"
|
||||
>修改</el-button
|
||||
>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="Search" @click="handleQuery"
|
||||
>搜索</el-button
|
||||
>
|
||||
<el-button icon="RefreshLeft" class="Refresh" @click="resetQuery"
|
||||
>重置</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div class="tablebox">
|
||||
<el-table
|
||||
stripe
|
||||
v-loading="loading"
|
||||
:data="rulesList"
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="规则名称" show-overflow-tooltip align="center" prop="ruleName" />
|
||||
<el-table-column
|
||||
label="管控措施"
|
||||
align="center" show-overflow-tooltip
|
||||
prop="controlMeasures"
|
||||
/>
|
||||
<el-table-column
|
||||
label="资源调度"
|
||||
align="center" show-overflow-tooltip
|
||||
prop="resourceScheduling"
|
||||
/>
|
||||
<el-table-column label="规则级别" align="center" prop="ruleLevel">
|
||||
<template #default="scope">
|
||||
<dict-tag :options="rule_level" :value="scope.row.ruleLevel" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="操作"
|
||||
align="center"
|
||||
class-name="small-padding fixed-width"
|
||||
>
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
icon="Edit"
|
||||
@click="handleUpdate(scope.row)"
|
||||
>修改</el-button
|
||||
>
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
icon="Delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
>删除</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
v-model:page="queryParams.pageNum"
|
||||
v-model:limit="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 添加或修改预警规则对话框 -->
|
||||
<el-dialog :title="title" v-model="open" width="500px" append-to-body>
|
||||
<el-form
|
||||
label-position="top"
|
||||
ref="rulesRef"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
label-width="80px"
|
||||
>
|
||||
<el-form-item label="规则名称" prop="ruleName">
|
||||
<el-input v-model="form.ruleName" placeholder="请输入规则名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="管控措施" prop="controlMeasures">
|
||||
<el-input
|
||||
v-model="form.controlMeasures"
|
||||
placeholder="请输入管控措施"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="资源调度" prop="resourceScheduling">
|
||||
<el-input
|
||||
v-model="form.resourceScheduling"
|
||||
placeholder="请输入资源调度"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="规则级别" prop="ruleLevel">
|
||||
<el-select
|
||||
v-model="form.ruleLevel"
|
||||
placeholder="规则级别"
|
||||
clearable
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in rule_level"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="Rules">
|
||||
import {
|
||||
listRules,
|
||||
getRules,
|
||||
delRules,
|
||||
addRules,
|
||||
updateRules,
|
||||
} from "@/api/Warningrules";
|
||||
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { sys_yes_no, rule_level } = proxy.useDict("sys_yes_no", "rule_level");
|
||||
|
||||
const rulesList = ref([]);
|
||||
const open = ref(false);
|
||||
const loading = ref(true);
|
||||
const showSearch = ref(true);
|
||||
const ids = ref([]);
|
||||
const single = ref(true);
|
||||
const multiple = ref(true);
|
||||
const total = ref(0);
|
||||
const title = ref("");
|
||||
|
||||
const data = reactive({
|
||||
form: {},
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
delFlag: 0,
|
||||
ruleName: null,
|
||||
controlMeasures: null,
|
||||
resourceScheduling: null,
|
||||
ruleLevel: null,
|
||||
},
|
||||
rules: {
|
||||
ruleName: [
|
||||
{ required: true, message: "规则名称不能为空", trigger: "blur" },
|
||||
{ max: 30, message: "长度不能超过30个字符", trigger: "blur" },
|
||||
],
|
||||
controlMeasures: [
|
||||
{ required: true, message: "管控措施不能为空", trigger: "blur" },
|
||||
{ max: 30, message: "长度不能超过30个字符", trigger: "blur" },
|
||||
],
|
||||
resourceScheduling: [
|
||||
{ required: true, message: "资源调度不能为空", trigger: "blur" },
|
||||
{ max: 30, message: "长度不能超过30个字符", trigger: "blur" },
|
||||
],
|
||||
ruleLevel: [
|
||||
{ required: true, message: "规则名称不能为空", trigger: "blur" },
|
||||
|
||||
],
|
||||
},
|
||||
});
|
||||
|
||||
const { queryParams, form, rules } = toRefs(data);
|
||||
|
||||
/** 查询预警规则列表 */
|
||||
function getList() {
|
||||
loading.value = true;
|
||||
listRules(queryParams.value).then((response) => {
|
||||
rulesList.value = response.rows;
|
||||
total.value = response.total;
|
||||
loading.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
// 取消按钮
|
||||
function cancel() {
|
||||
open.value = false;
|
||||
reset();
|
||||
}
|
||||
|
||||
// 表单重置
|
||||
function reset() {
|
||||
form.value = {
|
||||
id: null,
|
||||
ruleName: null,
|
||||
controlMeasures: null,
|
||||
resourceScheduling: null,
|
||||
ruleLevel: null,
|
||||
createBy: null,
|
||||
createTime: null,
|
||||
updateBy: null,
|
||||
updateTime: null,
|
||||
delFlag: null,
|
||||
};
|
||||
proxy.resetForm("rulesRef");
|
||||
}
|
||||
|
||||
/** 搜索按钮操作 */
|
||||
function handleQuery() {
|
||||
queryParams.value.pageNum = 1;
|
||||
getList();
|
||||
}
|
||||
|
||||
/** 重置按钮操作 */
|
||||
function resetQuery() {
|
||||
proxy.resetForm("queryRef");
|
||||
handleQuery();
|
||||
}
|
||||
|
||||
// 多选框选中数据
|
||||
function handleSelectionChange(selection) {
|
||||
ids.value = selection.map((item) => item.id);
|
||||
single.value = selection.length != 1;
|
||||
multiple.value = !selection.length;
|
||||
}
|
||||
|
||||
/** 新增按钮操作 */
|
||||
function handleAdd() {
|
||||
reset();
|
||||
open.value = true;
|
||||
title.value = "添加预警规则";
|
||||
}
|
||||
|
||||
/** 修改按钮操作 */
|
||||
function handleUpdate(row) {
|
||||
reset();
|
||||
const _id = row.id || ids.value;
|
||||
getRules(_id).then((response) => {
|
||||
form.value = response.data;
|
||||
open.value = true;
|
||||
title.value = "修改预警规则";
|
||||
});
|
||||
}
|
||||
|
||||
/** 提交按钮 */
|
||||
function submitForm() {
|
||||
proxy.$refs["rulesRef"].validate((valid) => {
|
||||
if (valid) {
|
||||
if (form.value.id != null) {
|
||||
updateRules(form.value).then((response) => {
|
||||
proxy.$modal.msgSuccess("修改成功");
|
||||
open.value = false;
|
||||
getList();
|
||||
});
|
||||
} else {
|
||||
addRules(form.value).then((response) => {
|
||||
proxy.$modal.msgSuccess("新增成功");
|
||||
open.value = false;
|
||||
getList();
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/** 删除按钮操作 */
|
||||
function handleDelete(row) {
|
||||
const _ids = row.id || ids.value;
|
||||
proxy.$modal
|
||||
.confirm("是否确认删除所选数据项？")
|
||||
.then(function () {
|
||||
return delRules(_ids);
|
||||
})
|
||||
.then(() => {
|
||||
getList();
|
||||
proxy.$modal.msgSuccess("删除成功");
|
||||
})
|
||||
.catch(() => {});
|
||||
}
|
||||
|
||||
/** 导出按钮操作 */
|
||||
function handleExport() {
|
||||
proxy.download(
|
||||
"large/rules/export",
|
||||
{
|
||||
...queryParams.value,
|
||||
},
|
||||
`rules_${new Date().getTime()}.xlsx`
|
||||
);
|
||||
}
|
||||
|
||||
getList();
|
||||
</script>
|
||||
<style scoped>
|
||||
.map {
|
||||
cursor: pointer;
|
||||
color: #203f73;
|
||||
}
|
||||
/* 修改斑马纹的浅色行背景 */
|
||||
::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td {
|
||||
background-color: #dbe4f5 !important; /* 改为淡蓝色 */
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue