Merge branch 'dev' of http://222.212.85.86:8222/bdzl2/bxztApp into dev
This commit is contained in:
commit
dc60c14891
@ -159,6 +159,28 @@ const routes = [
|
||||
parentRoute: 'warningManagement2'
|
||||
}
|
||||
},
|
||||
// 响应预警 - 法规处
|
||||
{
|
||||
path: '/warningManagement3',
|
||||
name: 'warningManagement3',
|
||||
component: () => import('../views/WarningManagement/law/index.vue'),
|
||||
meta: {
|
||||
title: '响应预警',
|
||||
breadcrumb: true
|
||||
}
|
||||
},
|
||||
// 线下帮扶台账 - 法规处
|
||||
// {
|
||||
// path: '/ledgerManagement3',
|
||||
// name: 'ledgerManagement3',
|
||||
// component: () => import('../views/LedgerManagement/index.vue'),
|
||||
// meta: {
|
||||
// title: '驻地台账',
|
||||
// breadcrumb: true,
|
||||
// parentRoute: 'warningManagement3'
|
||||
// }
|
||||
// },
|
||||
|
||||
|
||||
// 项目管理 - 区县
|
||||
{
|
||||
|
||||
@ -4,11 +4,11 @@
|
||||
<el-input v-model="script.filterData.headline" style="width: 240px; margin-right: 10px" size="large"
|
||||
placeholder="预警标题" :suffix-icon="Search" />
|
||||
<el-select v-model="script.filterData.eventType" style="width: 240px; margin-right: 10px" size="large"
|
||||
placeholder="预警类型" :suffix-icon="Search" :options="script.eventTypeOptions" clearable />
|
||||
placeholder="预警类型" :suffix-icon="ArrowDown" :options="script.eventTypeOptions" clearable />
|
||||
<el-select v-model="script.filterData.severity" style="width: 240px; margin-right: 10px" size="large"
|
||||
placeholder="预警级别" :suffix-icon="Search" :options="script.severityOptions" clearable />
|
||||
<el-select v-model="script.filterData.responseStatus" style="width: 240px; margin-right: 10px" size="large"
|
||||
placeholder="响应情况" :suffix-icon="Search" :options="script.responseOptions" clearable />
|
||||
placeholder="预警级别" :suffix-icon="ArrowDown" :options="script.severityOptions" clearable />
|
||||
<el-select v-model="script.filterData.responseStatus" style="width: 240px; margin-right: 10px" size="large"
|
||||
placeholder="响应情况" :suffix-icon="ArrowDown" :options="script.responseOptions" clearable />
|
||||
</div>
|
||||
<div class="event-box">
|
||||
<el-button type="primary" @click="script.gotoLedgerPage">驻地台账</el-button>
|
||||
@ -38,7 +38,7 @@
|
||||
|
||||
<script setup>
|
||||
import DynamicTable from "../../../component/DynamicTable/index.js";
|
||||
import { Search } from "@element-plus/icons-vue";
|
||||
import { Search, ArrowDown, } from "@element-plus/icons-vue";
|
||||
import MyDialog from "../../../component/MyDialog/index.js";
|
||||
import MyDrawer from "../../../component/MyDrawer/index.js";
|
||||
import scriptFn from "./index.js";
|
||||
|
||||
@ -1,12 +1,14 @@
|
||||
<template>
|
||||
<div class="root">
|
||||
<div class="search-box">
|
||||
<el-input v-model="script.filterData.title" style="width: 240px; margin-right: 10px" size="large"
|
||||
<el-input v-model="script.filterData.headline" style="width: 240px; margin-right: 10px" size="large"
|
||||
placeholder="预警标题" :suffix-icon="Search" />
|
||||
<el-select v-model="script.filterData.type" style="width: 240px; margin-right: 10px" size="large"
|
||||
placeholder="预警类型" :suffix-icon="Search" :options="script.typeOptions" clearable />
|
||||
<el-select v-model="script.filterData.warningLevel" style="width: 240px; margin-right: 10px" size="large"
|
||||
placeholder="预警级别" :suffix-icon="Search" :options="script.warningLevelOptions" clearable />
|
||||
<el-select v-model="script.filterData.eventType" style="width: 240px; margin-right: 10px" size="large"
|
||||
placeholder="预警类型" :suffix-icon="ArrowDown" :options="script.eventTypeOptions" clearable />
|
||||
<el-select v-model="script.filterData.severity" style="width: 240px; margin-right: 10px" size="large"
|
||||
placeholder="预警级别" :suffix-icon="ArrowDown" :options="script.severityOptions" clearable />
|
||||
<el-select v-model="script.filterData.responseStatus" style="width: 240px; margin-right: 10px" size="large"
|
||||
placeholder="响应情况" :suffix-icon="ArrowDown" :options="script.responseOptions" clearable />
|
||||
</div>
|
||||
<div class="event-box">
|
||||
<el-button type="primary" @click="script.gotoLedgerPage">驻地台账</el-button>
|
||||
@ -33,7 +35,7 @@
|
||||
|
||||
<script setup>
|
||||
import DynamicTable from "../../../component/DynamicTable/index.js";
|
||||
import { Search } from "@element-plus/icons-vue";
|
||||
import { Search, ArrowDown } from "@element-plus/icons-vue";
|
||||
import MyDialog from "../../../component/MyDialog/index.js";
|
||||
import MyDrawer from "../../../component/MyDrawer/index.js";
|
||||
import scriptFn from "./index.js";
|
||||
|
||||
392
packages/screen/src/views/WarningManagement/law/addDialog.vue
Normal file
392
packages/screen/src/views/WarningManagement/law/addDialog.vue
Normal file
@ -0,0 +1,392 @@
|
||||
<template>
|
||||
<div class="detail-container">
|
||||
<el-form ref="formRef" :model="form" label-position="right" label-width="auto"
|
||||
style="max-height: 60vh; overflow-y: auto; padding-right: 50px" :rules="rules">
|
||||
<div class="form-part">
|
||||
<el-row>
|
||||
<h4 style="margin: 20px 0;">项目信息</h4>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="工程状态" prop="工程状态">
|
||||
<el-radio-group v-model="form.zt">
|
||||
<el-radio value="1">在建</el-radio>
|
||||
<el-radio value="2">停工</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="所属区县" prop="所属区县">
|
||||
<el-select v-model="qx" filterable remote reserve-keyword clearable placeholder="输入区县名称查询"
|
||||
:remote-method="remoteMethod_qx" :loading="loading" @change="handleSelect_qx" value-key="index">
|
||||
<el-option v-for="(item, index) in qxList" :key="index" :label="item.qxmc" :value="item.qxmc" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="项目名称" prop="项目名称">
|
||||
<el-input />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="驻地名称" prop="驻地名称">
|
||||
<el-input />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="驻地类型" prop="驻地类型">
|
||||
<el-select>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="坐标点位" prop="坐标点位">
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="12">
|
||||
<el-input aria-label="经度" placeholder="经度" />
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-input aria-label="纬度" placeholder="纬度" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="所属项目名称:">
|
||||
<el-input />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="项目类型:">
|
||||
<el-select>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="建设单位:">
|
||||
<el-input />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="施工单位:">
|
||||
<el-input />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="行政区域:">
|
||||
<el-select></el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="驻地人数:">
|
||||
<el-input />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="驻地风险等级:">
|
||||
<el-select></el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="房建类型:">
|
||||
<el-select></el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="搬迁状态:">
|
||||
<el-select></el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="form-part">
|
||||
<el-row>
|
||||
<h4 style="margin: 20px 0;">项目联系人信息</h4>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="吹哨人姓名:">
|
||||
<el-input />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="吹哨人电话:">
|
||||
<el-input />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="建设单位包保责任人姓名:">
|
||||
<el-input />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="建设单位包保责任人电话:">
|
||||
<el-input />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="施工单位包保责任人姓名:">
|
||||
<el-input />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="施工单位包保责任人电话:">
|
||||
<el-input />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="驻地包保责任人姓名:">
|
||||
<el-input />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="驻地包保责任人电话:">
|
||||
<el-input />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="区县级包保责任人姓名:">
|
||||
<el-input />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="区县级包保责任人电话:">
|
||||
<el-input />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="市级包保责任人姓名:">
|
||||
<el-input />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="市级包保责任人电话:">
|
||||
<el-input />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="form-part">
|
||||
<el-row>
|
||||
<h4 style="margin: 20px 0;">驻地情况</h4>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<FileUpload type="image" :limit="9" :fileType=6 />
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="form-part">
|
||||
<el-row>
|
||||
<h4 style="margin: 20px 0;">现场情况</h4>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<el-input></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, watch, computed } from "vue";
|
||||
import { request } from "@/utils/request";
|
||||
import FileUpload from '@/component/FileUpload/FileUpload.vue'
|
||||
const formRef = ref(null);
|
||||
defineExpose({ formRef });
|
||||
|
||||
const props = defineProps({
|
||||
form: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
});
|
||||
const sfjwd = ref("是");
|
||||
const qx = ref("");
|
||||
const loading = ref(false);
|
||||
const selectOptions = ref([]);
|
||||
const qxList = ref([]);
|
||||
|
||||
// 根据用户信息 查询角色列表
|
||||
const getUserList = async (key) => {
|
||||
try {
|
||||
const keyword = key;
|
||||
let url = "";
|
||||
if (keyword) {
|
||||
url = `/snow-ops-platform/yhzry/getUserByKey?key=${keyword}`;
|
||||
} else {
|
||||
url = `/snow-ops-platform/yhzry/getUserByKey?key=`;
|
||||
}
|
||||
const res = await request({
|
||||
url: url,
|
||||
method: "GET",
|
||||
});
|
||||
if (res.code === "00000") {
|
||||
return res.data;
|
||||
} else {
|
||||
throw new Error(res.message);
|
||||
}
|
||||
} catch (error) {
|
||||
ElMessage.error(error.message);
|
||||
console.log(error);
|
||||
}
|
||||
};
|
||||
|
||||
// 选择人员筛选
|
||||
const remoteMethod = async (query) => {
|
||||
if (query === "") {
|
||||
selectOptions.value = [];
|
||||
return [];
|
||||
}
|
||||
loading.value = true;
|
||||
const res = await getUserList(query);
|
||||
if (res) {
|
||||
selectOptions.value = res;
|
||||
}
|
||||
loading.value = false;
|
||||
};
|
||||
|
||||
// 根据区县名称 查询区县列表
|
||||
const getQxList = async (key) => {
|
||||
try {
|
||||
const keyword = key;
|
||||
let url = "";
|
||||
if (keyword) {
|
||||
url = `/snow-ops-platform/district/listDistricts?qxmc=${keyword}`;
|
||||
} else {
|
||||
url = `/snow-ops-platform/district/listDistricts?qxmc=`;
|
||||
}
|
||||
const res = await request({
|
||||
url: url,
|
||||
method: "GET",
|
||||
});
|
||||
if (res.code === "00000") {
|
||||
return res.data;
|
||||
} else {
|
||||
throw new Error(res.message);
|
||||
}
|
||||
} catch (error) { }
|
||||
};
|
||||
|
||||
// 选择区县筛选
|
||||
const remoteMethod_qx = async (query) => {
|
||||
loading.value = true;
|
||||
const res = await getQxList(query);
|
||||
if (res) {
|
||||
qxList.value = res;
|
||||
}
|
||||
loading.value = false;
|
||||
};
|
||||
|
||||
// 选择区县
|
||||
const handleSelect_qx = (value) => {
|
||||
props.form.qxmc = value;
|
||||
};
|
||||
|
||||
// 选择人员
|
||||
const handleSelect = (value) => {
|
||||
console.log("value", value);
|
||||
props.form.fzrXm = value.realName;
|
||||
props.form.fzrSjhm = value.phone;
|
||||
props.form.fzrUserId = value.userId;
|
||||
};
|
||||
|
||||
const rules = computed(() => {
|
||||
return {
|
||||
mc: [
|
||||
{
|
||||
required: true,
|
||||
validator: (rule, value, callback) => {
|
||||
if (props.form.mc) {
|
||||
callback();
|
||||
} else {
|
||||
callback(new Error("请输入服务站名称"));
|
||||
}
|
||||
},
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
qxmc: [
|
||||
{
|
||||
required: true,
|
||||
validator: (rule, value, callback) => {
|
||||
if (props.form.qxmc) {
|
||||
callback();
|
||||
} else {
|
||||
callback(new Error("请选择所属区县"));
|
||||
}
|
||||
},
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
fzr: [
|
||||
{
|
||||
required: true,
|
||||
validator: (rule, value, callback) => {
|
||||
if (props.form.fzrUserId && props.form.fzrXm && props.form.fzrSjhm) {
|
||||
callback();
|
||||
} else {
|
||||
callback(new Error("请选择负责人"));
|
||||
}
|
||||
},
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
jd: [
|
||||
{
|
||||
required: sfjwd.value === "否",
|
||||
validator: (rule, value, callback) => {
|
||||
if (props.form.jd) {
|
||||
callback();
|
||||
} else {
|
||||
callback(new Error("请输入站点经度"));
|
||||
}
|
||||
},
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
wd: [
|
||||
{
|
||||
required: sfjwd.value === "否",
|
||||
validator: (rule, value, callback) => {
|
||||
if (props.form.wd) {
|
||||
callback();
|
||||
} else {
|
||||
callback(new Error("请输入站点纬度"));
|
||||
}
|
||||
},
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.form-part{
|
||||
padding: 20px;
|
||||
}
|
||||
</style>
|
||||
159
packages/screen/src/views/WarningManagement/law/detailDrawer.vue
Normal file
159
packages/screen/src/views/WarningManagement/law/detailDrawer.vue
Normal file
@ -0,0 +1,159 @@
|
||||
<template>
|
||||
<div class="detail-container">
|
||||
<el-card class="basic-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>基本信息</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-descriptions column="3">
|
||||
<el-descriptions-item label="预警标题">{{ detailData.headline }}</el-descriptions-item>
|
||||
<el-descriptions-item label="预警类型">{{ '大雾预警' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="发送时间">{{ detailData.createTime }}</el-descriptions-item>
|
||||
<el-descriptions-item label="生效时间">{{ detailData.onset }}</el-descriptions-item>
|
||||
<el-descriptions-item label="接收时间">{{ detailData.receiveTime }}</el-descriptions-item>
|
||||
<el-descriptions-item label="预警转发时间">{{ detailData.forwardTime }}</el-descriptions-item>
|
||||
<el-descriptions-item span="3" label="预警结束时间">{{ detailData.expires }}</el-descriptions-item>
|
||||
<el-descriptions-item span="3" label="预警描述">{{ detailData.description }}</el-descriptions-item>
|
||||
<el-descriptions-item span="3" label="响应措施">{{ }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-card>
|
||||
<el-card class="sites-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>影响情况</span>
|
||||
</div>
|
||||
</template>
|
||||
<DynamicTable :dataSource="sitesList" :columns="columns" :autoHeight="true"></DynamicTable>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, watch, computed, h } from "vue";
|
||||
import { request } from "@/utils/request";
|
||||
import DynamicTable from "../../../component/DynamicTable/index.js";
|
||||
|
||||
const props = defineProps({
|
||||
id: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
});
|
||||
|
||||
const detailData = ref({})
|
||||
const sitesList = ref([])
|
||||
|
||||
// 根据预警ID获取预警详情
|
||||
const getDetailData = async (id) => {
|
||||
try {
|
||||
const res = await request({
|
||||
url: '/snow-ops-platform/weatherWarning/getById',
|
||||
method: 'GET',
|
||||
params: {
|
||||
id: id
|
||||
}
|
||||
})
|
||||
if (res.code === '00000') {
|
||||
detailData.value = res.data
|
||||
} else {
|
||||
throw new Error(res.message)
|
||||
}
|
||||
} catch (error) {
|
||||
ElMessage.error(error.message)
|
||||
console.log(error)
|
||||
}
|
||||
}
|
||||
|
||||
// 根据预警ID查询受影响的驻地列表
|
||||
const getAffectedSites = async (id) => {
|
||||
try {
|
||||
const res = await request({
|
||||
url: '/snow-ops-platform/weatherWarning/affected-sites',
|
||||
method: 'GET',
|
||||
params: {
|
||||
warningId: id
|
||||
}
|
||||
})
|
||||
if (res.code === '00000') {
|
||||
sitesList.value = res.data
|
||||
} else {
|
||||
throw new Error(res.message)
|
||||
}
|
||||
} catch (error) {
|
||||
ElMessage.error(error.message)
|
||||
console.log(error)
|
||||
}
|
||||
}
|
||||
|
||||
const columns = [
|
||||
{
|
||||
prop: "county",
|
||||
label: "所属区县",
|
||||
},
|
||||
{
|
||||
prop: "siteName",
|
||||
label: "驻地名称",
|
||||
},
|
||||
{
|
||||
prop: "siteAddress",
|
||||
label: "驻地地址",
|
||||
},
|
||||
{
|
||||
prop: "sitePopulation",
|
||||
label: "驻地人数",
|
||||
},
|
||||
{
|
||||
prop: "xxx",
|
||||
label: "首次响应时间",
|
||||
},
|
||||
{
|
||||
prop: "xxx",
|
||||
label: "最新响应时间",
|
||||
},
|
||||
{
|
||||
prop: "xxx",
|
||||
label: "最近催告时间",
|
||||
},
|
||||
{
|
||||
prop: "xxx",
|
||||
label: "响应情况",
|
||||
},
|
||||
{
|
||||
label: "操作",
|
||||
fixed: "right",
|
||||
width: 80,
|
||||
render: (row) => () =>
|
||||
h("div", { class: "action-btns" }, [
|
||||
h(
|
||||
ElButton,
|
||||
{
|
||||
type: "primary",
|
||||
link: true,
|
||||
onClick: async () => {
|
||||
|
||||
},
|
||||
},
|
||||
() => "巡查记录"
|
||||
),
|
||||
]),
|
||||
},
|
||||
|
||||
]
|
||||
|
||||
onMounted(async () => {
|
||||
await getDetailData(props.id);
|
||||
await getAffectedSites(props.id)
|
||||
})
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.detail-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
</style>
|
||||
251
packages/screen/src/views/WarningManagement/law/index.js
Normal file
251
packages/screen/src/views/WarningManagement/law/index.js
Normal file
@ -0,0 +1,251 @@
|
||||
import { h, ref, onMounted, reactive, watch, toRaw, nextTick } from "vue";
|
||||
import { request } from "@/utils/request";
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import AddDialog from "./addDialog.vue";
|
||||
import DetailDrawer from "./detailDrawer.vue";
|
||||
|
||||
const tableData = ref([]); // 表格数据
|
||||
const modelVisible = ref(false); // 弹窗状态
|
||||
const drawerVisible = ref(false); // 抽屉状态
|
||||
// 弹窗内容
|
||||
const model = reactive({
|
||||
title: '',
|
||||
content: null,
|
||||
props: {},
|
||||
onCancel: null,
|
||||
onConfirm: null,
|
||||
width: '',
|
||||
});
|
||||
const form = reactive({
|
||||
});
|
||||
const INIT_FORM = {
|
||||
|
||||
};
|
||||
// 抽屉内容
|
||||
const drawer = reactive({
|
||||
title: '',
|
||||
content: null,
|
||||
props: {},
|
||||
onCancel: null,
|
||||
onConfirm: null,
|
||||
direction: 'rtl',
|
||||
size: '50%'
|
||||
});
|
||||
const dialogRef = ref(null); // 弹窗实例
|
||||
const drawerRef = ref(null); // 抽屉实例
|
||||
|
||||
const columns = [
|
||||
{
|
||||
prop: "headline",
|
||||
label: "预警标题",
|
||||
},
|
||||
{
|
||||
// prop: "xxx",
|
||||
label: "预警类型",
|
||||
formatter: (row) => {
|
||||
return h(ElText, { style: {} }, '大雾预警');
|
||||
}
|
||||
},
|
||||
{
|
||||
prop: "createTime",
|
||||
label: "发送时间",
|
||||
},
|
||||
{
|
||||
prop: "onset",
|
||||
label: "生效时间",
|
||||
},
|
||||
{
|
||||
prop: "receiveTime",
|
||||
label: "接收时间",
|
||||
},
|
||||
{
|
||||
prop: "forwardTime",
|
||||
label: "预警转发时间",
|
||||
},
|
||||
{
|
||||
prop: "expires",
|
||||
label: "预警结束时间",
|
||||
},
|
||||
{
|
||||
prop: "affectedSiteCount",
|
||||
label: "影响数量",
|
||||
},
|
||||
{
|
||||
prop: "responseStatus",
|
||||
label: "响应情况",
|
||||
},
|
||||
{
|
||||
label: "操作",
|
||||
fixed: "right",
|
||||
width: 150,
|
||||
render: (row) => () =>
|
||||
h("div", { class: "action-btns" }, [
|
||||
h(
|
||||
ElButton,
|
||||
{
|
||||
type: "primary",
|
||||
link: true,
|
||||
onClick: async () => {
|
||||
openDetailDrawer(row);
|
||||
},
|
||||
},
|
||||
() => "详情"
|
||||
),
|
||||
]),
|
||||
},
|
||||
]
|
||||
|
||||
// 过滤条件
|
||||
const filterData = reactive({})
|
||||
// 分页
|
||||
const pagination = reactive({
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
pageSizes: [10, 20, 50],
|
||||
layout: "prev, pager, next, jumper",
|
||||
onChange: (page, pageSize) => {
|
||||
pagination.current = page;
|
||||
pagination.pageSize = pageSize;
|
||||
getTableData(filterData);
|
||||
},
|
||||
});
|
||||
|
||||
// 获取预警列表
|
||||
const getTableData = async (filterData = {}) => {
|
||||
try {
|
||||
// 过滤空字符串属性
|
||||
const filteredParams = {};
|
||||
Object.keys(filterData).forEach(key => {
|
||||
if (filterData[key] !== '' && filterData[key] != null) {
|
||||
filteredParams[key] = filterData[key];
|
||||
}
|
||||
});
|
||||
const res = await request({
|
||||
url: '/snow-ops-platform/weatherWarning/response-list',
|
||||
method: "GET",
|
||||
params: {
|
||||
...filteredParams,
|
||||
pageNum: pagination.current,
|
||||
pageSize: pagination.pageSize,
|
||||
}
|
||||
})
|
||||
if (res.code === '00000') {
|
||||
tableData.value = res.data.records
|
||||
pagination.total = res.data.total
|
||||
} else {
|
||||
throw new Error(res.message)
|
||||
}
|
||||
} catch (error) {
|
||||
ElMessage.error('获取预警列表失败');
|
||||
console.error('获取预警列表失败:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// 预警类型选项
|
||||
const eventTypeOptions = [
|
||||
{ label: "全部", value: "" },
|
||||
{ label: "台风预警", value: "台风预警" },
|
||||
{ label: "暴雨预警", value: "暴雨预警" },
|
||||
{ label: "寒潮预警", value: "寒潮预警" },
|
||||
{ label: "大雾预警", value: "大雾预警" },
|
||||
{ label: "暴雪预警", value: "暴雪预警" },
|
||||
{ label: "道路结冰预警", value: "道路结冰预警" },
|
||||
{ label: "雷电预警", value: "雷电预警" },
|
||||
{ label: "强对流预警", value: "强对流预警" },
|
||||
];
|
||||
|
||||
// 预警级别选项
|
||||
const severityOptions = [
|
||||
{ label: "全部", value: "" },
|
||||
{ label: "红色预警", value: "红色预警" },
|
||||
{ label: "橙色预警", value: "橙色预警" },
|
||||
{ label: "黄色预警", value: "黄色预警" },
|
||||
{ label: "蓝色预警", value: "蓝色预警" },
|
||||
]
|
||||
|
||||
// 响应情况选项
|
||||
const responseOptions = [
|
||||
{ label: "全部", value: "" },
|
||||
{ label: "未响应", value: "未响应" },
|
||||
{ label: "部分响应", value: "部分响应" },
|
||||
{ label: "全部响应", value: "全部响应" },
|
||||
]
|
||||
|
||||
// 打开填报项目弹窗
|
||||
const openAddDialog = () => {
|
||||
model.title = '填报项目';
|
||||
Object.assign(form, INIT_FORM);
|
||||
model.props = {
|
||||
form: form,
|
||||
};
|
||||
model.content = AddDialog;
|
||||
model.onCancel = () => {
|
||||
modelVisible.value = false;
|
||||
};
|
||||
model.onConfirm = async () => {
|
||||
dialogType.value = '';
|
||||
await dialogRef?.value?.dynamicComponentRef?.formRef.validate().then(() => {
|
||||
console.log('@@@@@填报项目', form);
|
||||
})
|
||||
.catch((err) => {
|
||||
ElMessage.error('请处理表单中的错误项');
|
||||
});
|
||||
};
|
||||
model.width = "70%"
|
||||
modelVisible.value = true;
|
||||
}
|
||||
|
||||
// 打开详情弹窗
|
||||
const openDetailDrawer = (row) => {
|
||||
drawer.title = '预警详情';
|
||||
drawer.props = {
|
||||
id: row.id,
|
||||
};
|
||||
drawer.content = DetailDrawer;
|
||||
drawerVisible.value = true;
|
||||
}
|
||||
|
||||
|
||||
|
||||
export default () => {
|
||||
|
||||
const router = useRouter();
|
||||
const gotoLedgerPage = () => {
|
||||
router.push({
|
||||
path: '/ledgerManagement2'
|
||||
});
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getTableData();
|
||||
})
|
||||
|
||||
|
||||
watch(filterData, (val) => {
|
||||
getTableData(filterData);
|
||||
}, { deep: true })
|
||||
|
||||
|
||||
|
||||
return {
|
||||
tableData,
|
||||
filterData,
|
||||
|
||||
eventTypeOptions,
|
||||
severityOptions,
|
||||
responseOptions,
|
||||
|
||||
pagination,
|
||||
columns,
|
||||
gotoLedgerPage,
|
||||
|
||||
modelVisible,
|
||||
model,
|
||||
drawerVisible,
|
||||
drawer,
|
||||
dialogRef,
|
||||
drawerRef,
|
||||
openAddDialog,
|
||||
}
|
||||
}
|
||||
61
packages/screen/src/views/WarningManagement/law/index.vue
Normal file
61
packages/screen/src/views/WarningManagement/law/index.vue
Normal file
@ -0,0 +1,61 @@
|
||||
<template>
|
||||
<div class="root">
|
||||
<div class="search-box">
|
||||
<el-input v-model="script.filterData.headline" style="width: 240px; margin-right: 10px" size="large"
|
||||
placeholder="预警标题" :suffix-icon="Search" />
|
||||
<el-select v-model="script.filterData.eventType" style="width: 240px; margin-right: 10px" size="large"
|
||||
placeholder="预警类型" :suffix-icon="ArrowDown" :options="script.eventTypeOptions" clearable />
|
||||
<el-select v-model="script.filterData.severity" style="width: 240px; margin-right: 10px" size="large"
|
||||
placeholder="预警级别" :suffix-icon="ArrowDown" :options="script.severityOptions" clearable />
|
||||
<el-select v-model="script.filterData.responseStatus" style="width: 240px; margin-right: 10px" size="large"
|
||||
placeholder="响应情况" :suffix-icon="ArrowDown" :options="script.responseOptions" clearable />
|
||||
</div>
|
||||
<div class="event-box">
|
||||
<el-button type="primary" @click="">生成报告</el-button>
|
||||
<el-button type="primary" @click="">发布预警</el-button>
|
||||
<el-button type="primary" @click="">上传线下帮扶</el-button>
|
||||
<el-button type="primary" @click="">线下帮扶台账</el-button>
|
||||
<el-button type="primary" color="#952DE6" @click="">导出</el-button>
|
||||
<!-- <el-button type="primary" @click="script.gotoLedgerPage">驻地台账</el-button> -->
|
||||
<!-- <el-button type="primary" @click="script.openAddDialog">上报项目</el-button> -->
|
||||
</div>
|
||||
<DynamicTable :dataSource="script.tableData.value" :columns="script.columns" :autoHeight="true"
|
||||
:pagination="script.pagination">
|
||||
|
||||
</DynamicTable>
|
||||
<div class="model-box">
|
||||
<MyDialog v-model="script.modelVisible.value" :title="script.model?.title"
|
||||
:dynamicComponent="script.model?.content" :component-props="script.model?.props"
|
||||
:onConfirm="script.model?.onConfirm" :onCancel="script.model?.onCancel" ref="dialogRef"
|
||||
:width="script.model?.width">
|
||||
</MyDialog>
|
||||
<MyDrawer v-model="script.drawerVisible.value" :title="script.drawer?.title"
|
||||
:dynamicComponent="script.drawer?.content" :component-props="script.drawer?.props"
|
||||
:onConfirm="script.drawer?.onConfirm" :onCancel="script.drawer?.onCancel" ref="drawerRef"
|
||||
:direction="script.drawer?.direction" :size="script.drawer?.size">
|
||||
</MyDrawer>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import DynamicTable from "../../../component/DynamicTable/index.js";
|
||||
import { Search, ArrowDown } from "@element-plus/icons-vue";
|
||||
import MyDialog from "../../../component/MyDialog/index.js";
|
||||
import MyDrawer from "../../../component/MyDrawer/index.js";
|
||||
import scriptFn from "./index.js";
|
||||
const script = scriptFn();
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.root {
|
||||
height: 100%;
|
||||
padding: 25px;
|
||||
}
|
||||
|
||||
.event-box {
|
||||
margin: 20px 0;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user