From 1c328d7233aaa6ea48fbdfb73b415eb9837956a6 Mon Sep 17 00:00:00 2001 From: zhouwenxuan <1175765986@qq.com> Date: 星期五, 11 八月 2023 10:20:08 +0800 Subject: [PATCH] 预警管理、基础信息管理页面 --- src/types/warning.d.ts | 101 ++++ src/views/basicDataManage/areaManage/component/areaDialog.vue | 143 +++++ src/types/areaManage.d.ts | 46 + src/types/gasManage.d.ts | 34 + src/views/warningManage/warningSet/index.vue | 46 + src/views/warningManage/warningPeople/index.vue | 129 ++++ src/views/basicDataManage/areaManage/component/lngDialog.vue | 80 +++ src/views/basicDataManage/areaManage/index.vue | 140 +++++ src/views/warningManage/warningPeople/component/peopleDialog.vue | 141 +++++ src/views/warningManage/warningSet/component/setDialog.vue | 74 ++ src/views/warningManage/warningInfo/index.vue | 251 +++++++++ src/views/warningManage/warningInfo/component/infoDialog.vue | 123 ++++ src/views/basicDataManage/gasManage/component/gasDialog.vue | 90 +++ src/views/basicDataManage/gasManage/index.vue | 101 +++ 14 files changed, 1,468 insertions(+), 31 deletions(-) diff --git a/src/types/areaManage.d.ts b/src/types/areaManage.d.ts new file mode 100644 index 0000000..a432465 --- /dev/null +++ b/src/types/areaManage.d.ts @@ -0,0 +1,46 @@ +export interface TableDataRow { + id: string; + areaName: string; + areaLngLat: Array<LngLat> ; + areaColor: string; +} +export interface TableDataState { + tableData: { + data: Array<TableDataRow> + total: number; + loading: boolean; + listQuery: { + pageIndex: number; + pageSize: number; + searchParams:{ + areaName: string + } + }; + } +} + +export interface AreaState { + disabled: boolean; + title: string; + isShowUserDialog: boolean; + areaForm: { + areaName: string; + areaLngLat: Array<LngLat>; + areaColor: string; + }; + areaFormRules:{}, +} + +export interface LngLat { + lng: string; + lat: string; +} + +export interface LngState { + isShowUserDialog: boolean; + lngForm: { + lng: string; + lat: string; + }; + lngFormRules:{}, +} \ No newline at end of file diff --git a/src/types/gasManage.d.ts b/src/types/gasManage.d.ts new file mode 100644 index 0000000..94b7f7b --- /dev/null +++ b/src/types/gasManage.d.ts @@ -0,0 +1,34 @@ +export interface TableDataRow { + id: string; + gasName: string; + gasMolecularFormula: string; + gasThreshold: string; + gasUnit: string; +} +export interface TableDataState { + tableData: { + data: Array<TableDataRow> + total: number; + loading: boolean; + listQuery: { + pageIndex: number; + pageSize: number; + searchParams:{ + gasName: string + } + }; + } +} + +export interface GasState { + disabled: boolean; + title: string; + isShowUserDialog: boolean; + gasForm: { + gasName: string; + gasMolecularFormula: string; + gasThreshold: string; + gasUnit: string; + }; + gasFormRules:{}, +} \ No newline at end of file diff --git a/src/types/warning.d.ts b/src/types/warning.d.ts new file mode 100644 index 0000000..82748e5 --- /dev/null +++ b/src/types/warning.d.ts @@ -0,0 +1,101 @@ +interface TableDataRow { + name: string; + points: number; +} +export interface TableDataState { + tableData: { + data: Array<TableDataRow> + } +} +export interface SetState { + title: string; + isShowUserDialog: boolean; + disabled: boolean; + setForm: { + name: string; + points: number; + }; + setFormRules:{}, +} + +export interface TableDataPeople { + id: string; + name: string; + phone: string; +} +export interface PeopleDataState { + tableData: { + data: Array<TableDataPeople> + total: number; + loading: boolean; + listQuery: { + pageIndex: number; + pageSize: number; + searchParams:{ + name: string + } + }; + } +} + +export interface PeopleState { + title: string; + isShowUserDialog: boolean; + disabled: boolean; + peopleForm: { + name: string; + phone: string; + }; + setFormRules:{}, + peopleList: Array<TableDataPeople> +} + +export interface TableDataInfo { + id: string; + content: string; + warningTime: string; + name: string; + ppm: string; + level: string; + notifier: string; + managePeople: string; + manageTime: string; + status: string; + method?: string; +} +export interface InfoDataState { + tableData: { + data: Array<TableDataInfo> + total: number; + loading: boolean; + listQuery: { + pageIndex: number; + pageSize: number; + searchParams:{ + time: []; + level: string; + status: string; + gas: string; + } + }; + levelList: Array<any>; + statusList: Array<any>; + gasList: Array<any>; + } +} + +export interface people { + id: string; + name: string; +} +export interface InfoState { + title: string; + isShowUserDialog: boolean; + disabled: boolean; + infoForm: { + name: string; + method: string; + }; + setFormRules:{}, + peopleList: Array<people> +} \ No newline at end of file diff --git a/src/views/basicDataManage/areaManage/component/areaDialog.vue b/src/views/basicDataManage/areaManage/component/areaDialog.vue new file mode 100644 index 0000000..2223cf0 --- /dev/null +++ b/src/views/basicDataManage/areaManage/component/areaDialog.vue @@ -0,0 +1,143 @@ +<template> + <div class="system-add-gas-container"> + <el-dialog + :title="state.title" + v-model="state.isShowUserDialog" + width="600px" + > + <el-form :model="state.areaForm" size="default" ref="areaRef" :rules="state.areaFormRules" label-width="110px"> + <el-form-item label="区域名称:" prop="areaName"> + <el-input v-model.trim="state.areaForm.areaName" :disabled="state.disabled" ></el-input> + </el-form-item> + <el-form-item label="区域经纬度:" prop="areaLngLat"> + <div style="display: flex;justify-content: space-between;width: 100%"> + <el-table :data="state.areaForm.areaLngLat" border style="width: 70%"> + <el-table-column prop="lng" label="经度" > + <template #default="scope"> + <input + :disabled="state.disabled" + style="width: 100%;border: none;" + type="text" v-model="scope.row.lng" + oninput="value=value.replace(/[^0-9.]/g,'').replace(/\.{22,}/g,'.')" + /> + </template> + </el-table-column> + <el-table-column prop="lat" label="纬度" > + <template #default="scope"> + <input + :disabled="state.disabled" + style="width: 100%;border: none;" type="text" + v-model="scope.row.lat" + oninput="value=value.replace(/[^0-9.]/g,'').replace(/\.{22,}/g,'.')" + /> + </template> + </el-table-column> + </el-table> + <el-button size="default" style="width: 100px" type="success" @click="addLng" :disabled="state.disabled"> + <el-icon> + <ele-FolderAdd /> + </el-icon> + 添加经纬度 + </el-button> + </div> + </el-form-item> + <el-form-item label="区域颜色:" prop="areaColor"> + <el-input class="input-with-select" v-model.trim="state.areaForm.areaColor" :disabled="!state.areaForm.areaColor || state.disabled" > + <template #prepend> + <el-color-picker v-model="state.areaForm.areaColor" :disabled="state.disabled" /> + </template> + </el-input> + </el-form-item> + </el-form> + <template #footer> + <span class="dialog-footer"> + <el-button @click="handleClose" size="default" v-if="state.title!= '查看区域'">取 消</el-button> + <el-button type="primary" @click="onSubmit" size="default">确 定</el-button> + </span> + </template> + </el-dialog> + <lng-dialog ref="lngRef" @getLngData="getLngData"></lng-dialog> + + </div> +</template> + +<script setup lang="ts"> +import {reactive, ref} from "vue"; +import { AreaState } from "/@/types/areaManage"; +import lngDialog from "./lngDialog.vue"; + +const areaRef = ref(); +const lngRef = ref(); +const emit = defineEmits(["getAreaData"]); +const state = reactive<AreaState>({ + disabled: false, + title: '', + isShowUserDialog: false, + areaForm: { + areaName: '', + areaLngLat: [], + areaColor: '', + }, + areaFormRules:{ + areaName: [{ required: true, message: '请填写区域名称', trigger: 'blur' }], + areaColor: [{ required: true, message: '请选择区域颜色', trigger: 'blur' }], + areaLngLat: [{ required: true, message: '请填写经纬度', trigger: 'blur' }], + }, +}); +const openDialog = (type: string, value: any) => { + state.isShowUserDialog = true; + if (type === '新增') { + state.disabled = false; + state.title = '新增区域'; + } else if (type === '修改'){ + state.disabled = false; + state.title = '修改区域'; + state.areaForm = JSON.parse(JSON.stringify(value)); + }else { + state.disabled = true; + state.title = '查看区域'; + state.areaForm = JSON.parse(JSON.stringify(value)); + } +}; +const onSubmit = () => { + console.log("form",state.areaForm) + areaRef.value.clearValidate(); + state.isShowUserDialog = false; + reset(); + emit('getAreaData'); +}; + +const handleClose = () => { + areaRef.value.clearValidate(); + state.isShowUserDialog = false; + reset(); + emit('getAreaData'); +} +const reset = () => { + state.areaForm = { + areaName: '', + areaLngLat: [], + areaColor: '', + }; +} + +const addLng = () => { + lngRef.value.openDialog(); +} +const getLngData = (data: any) => { + state.areaForm.areaLngLat.push(data) + console.log("区域",state.areaForm.areaLngLat) +} + +defineExpose({ + openDialog +}); +</script> +<style scoped lang="scss"> +:deep(.input-with-select .el-input-group__prepend) { + background-color: white; + width: 25px; + box-shadow: none; + margin-left: -3px; +} +</style> \ No newline at end of file diff --git a/src/views/basicDataManage/areaManage/component/lngDialog.vue b/src/views/basicDataManage/areaManage/component/lngDialog.vue new file mode 100644 index 0000000..b0b4d8a --- /dev/null +++ b/src/views/basicDataManage/areaManage/component/lngDialog.vue @@ -0,0 +1,80 @@ +<template> + <div class="system-add-gas-container"> + <el-dialog + title="添加经纬度" + v-model="state.isShowUserDialog" + width="300px" + > + <el-form :model="state.lngForm" size="default" ref="lngRef" :rules="state.lngFormRules" label-width="110px"> + <el-form-item label="经度:" prop="lng"> + <el-input v-model.trim="state.lngForm.lng" oninput="value=value.replace(/[^0-9.]/g,'').replace(/\.{22,}/g,'.')"></el-input> + </el-form-item> + <el-form-item label="纬度:" prop="lng"> + <el-input v-model.trim="state.lngForm.lat" oninput="value=value.replace(/[^0-9.]/g,'').replace(/\.{22,}/g,'.')"></el-input> + </el-form-item> + </el-form> + <template #footer> + <span class="dialog-footer"> + <el-button @click="handleClose" size="default">取 消</el-button> + <el-button type="primary" @click="onSubmit" size="default">确 定</el-button> + </span> + </template> + </el-dialog> + </div> +</template> + +<script setup lang="ts"> +import {reactive, ref} from "vue"; +import {AreaState, LngState} from "/@/types/areaManage"; +const lngRef = ref(); +const emit = defineEmits(["getLngData"]); +const state = reactive<LngState>({ + isShowUserDialog: false, + lngForm: { + lng: '', + lat: '', + }, + lngFormRules:{ + lng: [{ required: true, message: '请填写经度', trigger: 'blur' }], + lat: [{ required: true, message: '请选择纬度', trigger: 'blur' }], + }, +}); +const openDialog = () => { + state.isShowUserDialog = true; +}; +const onSubmit = () => { + lngRef.value.clearValidate(); + state.isShowUserDialog = false; + if(state.lngForm.lng !='' && state.lngForm.lat !=''){ + emit('getLngData',state.lngForm); + } + + reset(); +}; + +const handleClose = () => { + lngRef.value.clearValidate(); + state.isShowUserDialog = false; + if(state.lngForm.lng !='' && state.lngForm.lat !=''){ + emit('getLngData',state.lngForm); + } + reset(); +} +const reset = () => { + state.lngForm = { + lng: '', + lat: '' + } +} +defineExpose({ + openDialog +}); +</script> +<style scoped lang="scss"> +:deep(.input-with-select .el-input-group__prepend) { + background-color: white; + width: 25px; + box-shadow: none; + margin-left: -3px; +} +</style> \ No newline at end of file diff --git a/src/views/basicDataManage/areaManage/index.vue b/src/views/basicDataManage/areaManage/index.vue index 70059fa..9af8277 100644 --- a/src/views/basicDataManage/areaManage/index.vue +++ b/src/views/basicDataManage/areaManage/index.vue @@ -1,15 +1,143 @@ <template> - <div> - 区域管理 - </div> + <div class="system-gas-container"> + <el-card shadow="hover"> + <div class="system-menu-search mb15"> + <el-form :inline="true" > + <el-form-item label="气体名称:"> + <el-input v-model="state.tableData.listQuery.searchParams.areaName" placeholder="区域名称" ></el-input> + </el-form-item> + <el-button size="default" type="primary" class="ml10"> + <el-icon> + <ele-Search /> + </el-icon> + 查询 + </el-button> + <el-button size="default" class="ml10" @click="reset()"> + <el-icon> + <RefreshLeft /> + </el-icon> + 重置 + </el-button> + </el-form> + </div> + <el-button size="default" class="mb10" type="success" @click="openDialog('新增',{})"> + <el-icon> + <ele-FolderAdd /> + </el-icon> + 新增区域 + </el-button> + + <el-table :data="state.tableData.data" style="width: 100%"> + <el-table-column align="center" prop="areaName" label="区域名称"/> + <el-table-column align="center" label="区域经纬度"> + <template #default="scope"> + <div v-for="(item, index) in scope.row.areaLngLat" :key="index"> + [{{item.lng}},{{item.lat}}] + </div> + </template> + </el-table-column> + <el-table-column label="操作" show-overflow-tooltip width="140"> + <template #default="scope"> + <el-button size="small" text type="primary" @click="openDialog('查看', scope.row)">查看</el-button> + <el-button size="small" text type="primary" @click="openDialog('修改', scope.row)">修改</el-button> + <el-button size="small" text type="danger" @click="del(scope.row)">删除</el-button> + </template> + </el-table-column> + </el-table> + <br /> + <el-pagination + @size-change="onHandleSizeChange" + @current-change="onHandleCurrentChange" + class="page-position" + :pager-count="5" + :page-sizes="[10, 20, 30]" + v-model:current-page="state.tableData.listQuery.pageIndex" + background + v-model:page-size="state.tableData.listQuery.pageSize" + layout="total, sizes, prev, pager, next, jumper" + :total="state.tableData.total"> + </el-pagination> + <br /> + <br /> + </el-card> + <area-dialog ref="areaRef" @getAreaData="initAreaData"></area-dialog> + </div> </template> <script setup lang="ts"> +import {reactive, ref} from "vue"; +import { TableDataState } from "/@/types/areaManage"; +import areaDialog from "./component/areaDialog.vue"; +import {ElMessage, ElMessageBox} from "element-plus"; +const areaRef = ref(); +const state = reactive<TableDataState>({ + tableData: { + data: [ + // { + // id: 'xxx', + // areaName: 'xxx', + // areaLngLat: [ + // { + // lng: '11', + // lat:'22' + // }, + // { + // lng: '11', + // lat:'22' + // } + // ], + // areaColor: "#ffffff" + // } + ], + total: 0, + loading: false, + listQuery: { + pageIndex: 1, + pageSize: 10, + searchParams:{ + areaName:'' + } + } + } +}); + +const initAreaData = () => { + console.log("数据列表") +}; +const onHandleSizeChange = (val: number) => { + state.tableData.listQuery.pageSize = val; + initAreaData(); +}; +// 分页改变 +const onHandleCurrentChange = (val: number) => { + state.tableData.listQuery.pageIndex = val; + initAreaData(); +}; +const openDialog = (type: string, value: any) => { + areaRef.value.openDialog(type, value); +}; +const del = (val: any) => { + ElMessageBox.confirm( + '确定删除此条数据?', + '提示', + { + confirmButtonText: '确定', + cancelButtonText: '取消', + type: 'warning', + } + ) + .then(() => { + ElMessage({ + type: 'success', + message: '删除成功', + }) + }) +}; +const reset = () => { + state.tableData.listQuery.searchParams.areaName = ''; +} </script> - - - <style scoped lang="scss"> </style> \ No newline at end of file diff --git a/src/views/basicDataManage/gasManage/component/gasDialog.vue b/src/views/basicDataManage/gasManage/component/gasDialog.vue new file mode 100644 index 0000000..1878d0a --- /dev/null +++ b/src/views/basicDataManage/gasManage/component/gasDialog.vue @@ -0,0 +1,90 @@ +<template> + <div class="system-add-gas-container"> + <el-dialog + :title="state.title" + v-model="state.isShowUserDialog" + width="500px" + > + <el-form :model="state.gasForm" size="default" ref="gasRef" :rules="state.gasFormRules" label-width="110px"> + <el-form-item label="气体名称:" prop="gasName"> + <el-input v-model.trim="state.gasForm.gasName" :disabled="state.disabled" ></el-input> + </el-form-item> + <el-form-item label="气体分子式:" prop="gasMolecularFormula"> + <el-input v-model.trim="state.gasForm.gasMolecularFormula" :disabled="state.disabled"></el-input> + </el-form-item> + <el-form-item label="气体阈值:" prop="gasThreshold"> + <el-input v-model.trim="state.gasForm.gasThreshold" :disabled="state.disabled"></el-input> + </el-form-item> + <el-form-item label="气体单位:" prop="gasUnit"> + <el-input v-model.trim="state.gasForm.gasUnit" :disabled="state.disabled"></el-input> + </el-form-item> + </el-form> + <template #footer> + <span class="dialog-footer"> + <el-button @click="handleClose" size="default">取 消</el-button> + <el-button type="primary" @click="onSubmit" size="default">确 定</el-button> + </span> + </template> + </el-dialog> + </div> +</template> + +<script setup lang="ts"> +import {reactive, ref} from "vue"; +import { GasState } from "/@/types/gasManage"; + +const gasRef = ref(); +const emit = defineEmits(["getGasData"]); +const state = reactive<GasState>({ + disabled: false, + title: '', + isShowUserDialog: false, + gasForm: { + gasName: '', + gasMolecularFormula: '', + gasThreshold: '', + gasUnit: '' + }, + gasFormRules:{ + gasName: [{ required: true, message: '请填写气体名称', trigger: 'blur' }], + gasMolecularFormula: [{ required: true, message: '请填写气体分子式', trigger: 'blur' }], + gasThreshold: [{ required: true, message: '请填写阈值', trigger: 'blur' }], + gasUnit: [{ required: true, message: '请选择气体单位', trigger: 'blur' }], + }, +}); +const openDialog = (type: string, value: any) => { + state.isShowUserDialog = true; + if (type === '新增') { + state.disabled = false; + state.title = '新增气体'; + state.gasForm = { + gasName: '', + gasMolecularFormula: '', + gasThreshold: '', + gasUnit: '' + }; + } else { + state.disabled = true; + state.title = '查看气体'; + state.gasForm = JSON.parse(JSON.stringify(value)); + } +}; +const onSubmit = () => { + gasRef.value.clearValidate(); + state.isShowUserDialog = false; + emit('getGasData'); +}; + +const handleClose = () => { + gasRef.value.clearValidate(); + state.isShowUserDialog = false; + emit('getGasData'); +} + +defineExpose({ + openDialog +}); +</script> +<style scoped lang="scss"> + +</style> \ No newline at end of file diff --git a/src/views/basicDataManage/gasManage/index.vue b/src/views/basicDataManage/gasManage/index.vue index 9f8b0ea..d80628e 100644 --- a/src/views/basicDataManage/gasManage/index.vue +++ b/src/views/basicDataManage/gasManage/index.vue @@ -1,15 +1,104 @@ <template> - <div> - 气体管理 - </div> + <div class="system-gas-container"> + <el-card shadow="hover"> + <div class="system-menu-search mb15"> + <el-form :inline="true" > + <el-form-item label="气体名称:"> + <el-input v-model="state.tableData.listQuery.searchParams.gasName" placeholder="气体名称" ></el-input> + </el-form-item> + <el-button size="default" type="primary" class="ml10"> + <el-icon> + <ele-Search /> + </el-icon> + 查询 + </el-button> + <el-button size="default" class="ml10" @click="reset()"> + <el-icon> + <RefreshLeft /> + </el-icon> + 重置 + </el-button> + </el-form> + </div> + <el-button size="default" class="mb10" type="success" @click="openDialog('新增',{})"> + <el-icon> + <ele-FolderAdd /> + </el-icon> + 新增气体 + </el-button> + + <el-table :data="state.tableData.data" style="width: 100%"> + <el-table-column align="center" type="index" label="序号" width="60" /> + <el-table-column align="center" prop="gasName" label="气体名称"/> + <el-table-column align="center" prop="gasMolecularFormula" label="气体分子式"/> + <el-table-column align="center" prop="gasThreshold" label="气体阈值"/> + <el-table-column align="center" prop="gasUnit" label="气体单位"/> + <el-table-column label="操作" show-overflow-tooltip width="140"> + <template #default="scope"> + <el-button size="small" text type="primary" @click="openDialog('查看', scope.row)">查看</el-button> + </template> + </el-table-column> + </el-table> + <br /> + <el-pagination + @size-change="onHandleSizeChange" + @current-change="onHandleCurrentChange" + class="page-position" + :pager-count="5" + :page-sizes="[10, 20, 30]" + v-model:current-page="state.tableData.listQuery.pageIndex" + background + v-model:page-size="state.tableData.listQuery.pageSize" + layout="total, sizes, prev, pager, next, jumper" + :total="state.tableData.total"> + </el-pagination> + <br /> + <br /> + </el-card> + <gas-dialog ref="gasRef" @getGasData="initGasData"></gas-dialog> + </div> </template> <script setup lang="ts"> +import {reactive, ref} from "vue"; +import { TableDataState } from "/@/types/gasManage"; +import gasDialog from "./component/gasDialog.vue"; +const gasRef = ref(); +const state = reactive<TableDataState>({ + tableData: { + data: [], + total: 0, + loading: false, + listQuery: { + pageIndex: 1, + pageSize: 10, + searchParams:{ + gasName:'' + } + } + } +}); + +const initGasData = () => { + console.log("数据列表") +}; +const onHandleSizeChange = (val: number) => { + state.tableData.listQuery.pageSize = val; + initGasData(); +}; +// 分页改变 +const onHandleCurrentChange = (val: number) => { + state.tableData.listQuery.pageIndex = val; + initGasData(); +}; +const openDialog = (type: string, value: any) => { + gasRef.value.openDialog(type, value); +}; +const reset = () => { + state.tableData.listQuery.searchParams.gasName = ''; +} </script> - - - <style scoped lang="scss"> </style> \ No newline at end of file diff --git a/src/views/warningManage/warningInfo/component/infoDialog.vue b/src/views/warningManage/warningInfo/component/infoDialog.vue new file mode 100644 index 0000000..df40d83 --- /dev/null +++ b/src/views/warningManage/warningInfo/component/infoDialog.vue @@ -0,0 +1,123 @@ +<template> + <div class="system-add-gas-container"> + <el-dialog + :title="state.title" + v-model="state.isShowUserDialog" + width="550px" + > + <el-form :model="state.infoForm" size="default" ref="gasRef" :rules="state.setFormRules" label-width="150px"> + <el-form-item label="处理人:" prop="name"> + <el-select + v-model="state.infoForm.name" + filterable + class="w100" + style="max-width: 180px" + size="default" + :disabled="state.disabled" + > + <el-option v-for="item in state.peopleList" :key="item.id" :label="item.name" :value="item.id"></el-option> + </el-select> + </el-form-item> + <el-form-item label="处理方式:" prop="points"> + <el-input type="textarea" v-model.trim="state.infoForm.method" :disabled="state.disabled" ></el-input> + </el-form-item> + </el-form> + <template #footer> + <span class="dialog-footer"> + <el-button @click="handleClose" size="default" v-if="!state.disabled">取 消</el-button> + <el-button type="primary" @click="onSubmit" size="default">确 定</el-button> + </span> + </template> + </el-dialog> + </div> +</template> + +<script setup lang="ts"> +import {reactive, ref} from "vue"; +import {InfoState} from "/@/types/warning"; + +const gasRef = ref(); +const emit = defineEmits(["getInfoData"]); +const state = reactive<InfoState>({ + title: '', + isShowUserDialog: false, + disabled: false, + infoForm: { + name: '', + method: '' + }, + setFormRules:{ + name: [{ required: true, message: '请选择预警人员', trigger: 'blur' }], + }, + peopleList: [ + // { + // id: '1', + // name: '张三', + // }, + // { + // id: '2', + // name: '李四', + // } + ] +}); +const openDialog = (type: string, value: any) => { + state.isShowUserDialog = true; + if (type === '查看') { + state.disabled = true; + state.infoForm = JSON.parse(JSON.stringify(value)); + state.infoForm.name = state.infoForm.managePeople; + console.log("info",state.infoForm) + } else if (type === '处理'){ + state.disabled = false; + state.infoForm = { + name: '', + method: '' + } + } + state.title = type; +}; + +const onSubmit = () => { + gasRef.value.clearValidate(); + state.isShowUserDialog = false; + emit('getInfoData'); +}; + +const handleClose = () => { + gasRef.value.clearValidate(); + state.isShowUserDialog = false; + emit('getInfoData'); +} +defineExpose({ + openDialog +}); +</script> +<style scoped lang="scss"> +.valueTable{ + line-height: 18px; + &>div{ + line-height: 1; + margin-bottom: 6px; + display: flex; + align-items: center; + + div{ + color: #999; + } + + span{ + font-weight: bolder; + } + + &:last-of-type{ + margin-bottom: 0; + margin-top: 10px; + } + } +} +.el-select-dropdown__item { + height: 50px; + line-height: 50px; + margin-top: 6px; +} +</style> \ No newline at end of file diff --git a/src/views/warningManage/warningInfo/index.vue b/src/views/warningManage/warningInfo/index.vue index 086f67f..3ad31f8 100644 --- a/src/views/warningManage/warningInfo/index.vue +++ b/src/views/warningManage/warningInfo/index.vue @@ -1,15 +1,252 @@ <template> - <div> - 预警信息 - </div> + <div class="system-gas-container"> + <el-card shadow="hover"> + <div class="system-menu-search mb15"> + <el-form :inline="true" style="display: flex;align-items: flex-start;flex-wrap: wrap" > + <el-form-item label="日期:" > + <el-date-picker + v-model="state.tableData.listQuery.searchParams.time" + type="datetimerange" + format="YYYY-MM-DD HH:mm:ss" + value-format="YYYY-MM-DD HH:mm:ss" + range-separator="~" + start-placeholder="开始时间" + end-placeholder="结束时间" + /> + </el-form-item> + <el-form-item label="预警级别:"> + <el-select + v-model="state.tableData.listQuery.searchParams.level" + class="w100" + style="max-width: 180px" + size="default" + > + <el-option v-for="item in state.tableData.levelList" :key="item.label" :label="item.value" :value="item.label"></el-option> + </el-select> + </el-form-item> + <el-form-item label="处理状态:"> + <el-select + v-model="state.tableData.listQuery.searchParams.status" + class="w100" + style="max-width: 180px" + size="default" + > + <el-option v-for="item in state.tableData.statusList" :key="item.label" :label="item.value" :value="item.label"></el-option> + </el-select> + </el-form-item> + <el-form-item label="气体:"> + <el-select + v-model="state.tableData.listQuery.searchParams.gas" + class="w100" + style="max-width: 180px" + size="default" + > + <el-option v-for="item in state.tableData.gasList" :key="item.label" :label="item.value" :value="item.label"></el-option> + </el-select> + </el-form-item> + <el-button size="default" type="primary" class="ml10" @click="search()"> + <el-icon> + <ele-Search /> + </el-icon> + 查询 + </el-button> + <el-button size="default" class="ml10" @click="reset()"> + <el-icon> + <RefreshLeft /> + </el-icon> + 重置 + </el-button> + </el-form> + </div> + <el-table :data="state.tableData.data" style="width: 100%"> + <el-table-column align="center" prop="content" label="预警内容"/> + <el-table-column align="center" prop="warningTime" label="预警时间"/> + <el-table-column align="center" prop="name" label="气体名称"/> + <el-table-column align="center" prop="ppm" label="气体浓度"/> + <el-table-column align="center" prop="level" label="预警级别" height="100"> + <template #default="scope"> + <span class="yellow" v-if="scope.row.level == '1'">黄色预警</span> + <span class="red" v-if="scope.row.level == '2'">红色预警</span> + </template> + </el-table-column> + <el-table-column align="center" prop="notifier" label="通知人员"/> + <el-table-column align="center" prop="managePeople" label="处理人"/> + <el-table-column align="center" prop="manageTime" label="处理时间"/> + <el-table-column align="center" prop="status" label="处理状态"> + <template #default="scope"> + <span v-if="scope.row.status == '1'">未处理</span> + <span v-if="scope.row.status == '2'">已处理</span> + </template> + </el-table-column> + <el-table-column label="操作" show-overflow-tooltip width="140"> + <template #default="scope"> + <el-button size="small" text type="primary" v-if="scope.row.status == '2'" @click="openDialog('查看', scope.row)">查看</el-button> + <el-button size="small" text type="primary" v-if="scope.row.status == '1'" @click="openDialog('处理', scope.row)">处理</el-button> + </template> + </el-table-column> + </el-table> + <br /> + <el-pagination + @size-change="onHandleSizeChange" + @current-change="onHandleCurrentChange" + class="page-position" + :pager-count="5" + :page-sizes="[10, 20, 30]" + v-model:current-page="state.tableData.listQuery.pageIndex" + background + v-model:page-size="state.tableData.listQuery.pageSize" + layout="total, sizes, prev, pager, next, jumper" + :total="state.tableData.total"> + </el-pagination> + <br /> + <br /> + </el-card> + <info-dialog ref="infoRef" @getInfoData="initInfoData"></info-dialog> + </div> </template> <script setup lang="ts"> +import {reactive, ref} from "vue"; +import { ElMessage, ElMessageBox } from 'element-plus' +import {InfoDataState, PeopleDataState} from "/@/types/warning"; +import infoDialog from "./component/infoDialog.vue"; +const infoRef = ref(); +const state = reactive<InfoDataState>({ + tableData: { + data: [ + // { + // id: '1', + // content: '【气体监测预警提示】2023年10月20日8:30 甲烷气体浓度连续超标系统判断为黄色预警,请相关负责人及时检查处置。', + // warningTime: '2023年10月20日 8:30', + // name: '甲烷', + // ppm: '5ppm', + // level: '1', + // notifier: '老娄、老程', + // managePeople: '张三', + // manageTime: '2023年10月20日 11:30', + // status: '1', + // }, + // { + // id: '1', + // content: '【气体监测预警提示】2023年10月20日8:30 甲烷气体浓度连续超标系统判断为黄色预警,请相关负责人及时检查处置。', + // warningTime: '2023年10月20日 8:30', + // name: '甲烷', + // ppm: '5ppm', + // level: '2', + // notifier: '老娄、老程', + // managePeople: '张三', + // manageTime: '2023年10月20日 11:30', + // status: '2', + // method:'xxx' + // }, + + ], + total: 0, + loading: false, + listQuery: { + pageIndex: 1, + pageSize: 10, + searchParams:{ + time: [], + level: '', + status:'', + gas: '' + } + }, + levelList: [ + { + label: '1', + value: '黄色预警' + }, + { + label: '2', + value: '红色预警' + } + ], + statusList: [ + { + label: '1', + value: '未处理' + }, + { + label: '2', + value: '已处理' + } + ], + gasList: [ + { + label: '1', + value: '甲醛' + }, + { + label: '2', + value: '甲烷' + } + ] + } +}); + +const initInfoData = () => { + console.log("数据列表") +}; +const onHandleSizeChange = (val: number) => { + state.tableData.listQuery.pageSize = val; + initInfoData(); +}; +// 分页改变 +const onHandleCurrentChange = (val: number) => { + state.tableData.listQuery.pageIndex = val; + initInfoData(); +}; +const openDialog = (type: string, value: any) => { + infoRef.value.openDialog(type, value); +}; +const del = (val: any) => { + ElMessageBox.confirm( + '确定删除此条数据?', + '提示', + { + confirmButtonText: '确定', + cancelButtonText: '取消', + type: 'warning', + } + ) + .then(() => { + ElMessage({ + type: 'success', + message: '删除成功', + }) + }) +}; + +const search = () => { + console.log("vla",state.tableData.listQuery.searchParams) +} +const reset = () => { + state.tableData.listQuery.searchParams.time = []; + state.tableData.listQuery.searchParams.level = ''; + state.tableData.listQuery.searchParams.status = ''; + state.tableData.listQuery.searchParams.gas = ''; +} </script> - - - <style scoped lang="scss"> - +.yellow{ + width: 80px; + height: 30px; + background-color: rgb(255,223,37); + line-height: 30px; + color: white; + box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2); + padding: 3px +} +.red{ + width: 80px; + height: 30px; + background-color: rgb(239,90,161); + line-height: 30px; + color: white; + box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2); + padding: 3px +} </style> \ No newline at end of file diff --git a/src/views/warningManage/warningPeople/component/peopleDialog.vue b/src/views/warningManage/warningPeople/component/peopleDialog.vue new file mode 100644 index 0000000..41562f6 --- /dev/null +++ b/src/views/warningManage/warningPeople/component/peopleDialog.vue @@ -0,0 +1,141 @@ +<template> + <div class="system-add-gas-container"> + <el-dialog + :title="state.title" + v-model="state.isShowUserDialog" + width="550px" + > + <el-form :model="state.peopleForm" size="default" ref="gasRef" :rules="state.setFormRules" label-width="150px"> + <el-form-item label="预警人员:" prop="name"> + <el-select + v-model="state.peopleForm.name" + filterable + class="w100" + style="max-width: 180px" + size="default" + @change="changePeople" + :disabled="state.disabled" + > + <el-option v-for="item in state.peopleList" :key="item.id" :label="item.name" :value="item.id"> + <div class="valueTable"> + <div><div>姓名:</div><span>{{item.name}}</span></div> + <div><div>手机号:</div><span>{{item.phone}}</span></div> + </div> + </el-option> + </el-select> + </el-form-item> + <el-form-item label="手机号:" prop="points"> + <el-input v-model.trim="state.peopleForm.phone" disabled ></el-input> + </el-form-item> + </el-form> + <template #footer> + <span class="dialog-footer"> + <el-button @click="handleClose" size="default" v-if="!state.disabled">取 消</el-button> + <el-button type="primary" @click="onSubmit" size="default">确 定</el-button> + </span> + </template> + </el-dialog> + </div> +</template> + +<script setup lang="ts"> +import {reactive, ref} from "vue"; +import {PeopleState} from "/@/types/warning"; + +const gasRef = ref(); +const emit = defineEmits(["getPeopleData"]); +const state = reactive<PeopleState>({ + title: '', + isShowUserDialog: false, + disabled: false, + peopleForm: { + name: '', + phone: '' + }, + setFormRules:{ + name: [{ required: true, message: '请选择预警人员', trigger: 'blur' }], + phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }], + }, + peopleList: [ + // { + // id: '1', + // name: '张三', + // phone: '112554566666' + // }, + // { + // id: '2', + // name: '李四', + // phone: '11254212321' + // } + ] +}); +const openDialog = (type: string, value: any) => { + state.isShowUserDialog = true; + if (type === '查看') { + state.disabled = true; + state.title = '查看预警人员'; + state.peopleForm = JSON.parse(JSON.stringify(value)); + } else if (type === '修改'){ + state.disabled = false; + state.title = '修改预警人员'; + state.peopleForm = JSON.parse(JSON.stringify(value)); + }else { + state.disabled = false; + state.title = '新增预警人员'; + state.peopleForm = { + name: '', + phone: '' + } + } +}; + +const changePeople = (val:any) => { + const obj = state.peopleList.find(item => item.id === val); + if(obj){ + state.peopleForm.phone = obj.phone; + } +} +const onSubmit = () => { + gasRef.value.clearValidate(); + state.isShowUserDialog = false; + emit('getPeopleData'); +}; + +const handleClose = () => { + gasRef.value.clearValidate(); + state.isShowUserDialog = false; + emit('getPeopleData'); +} +defineExpose({ + openDialog +}); +</script> +<style scoped lang="scss"> +.valueTable{ + line-height: 18px; + &>div{ + line-height: 1; + margin-bottom: 6px; + display: flex; + align-items: center; + + div{ + color: #999; + } + + span{ + font-weight: bolder; + } + + &:last-of-type{ + margin-bottom: 0; + margin-top: 10px; + } + } +} +.el-select-dropdown__item { + height: 50px; + line-height: 50px; + margin-top: 6px; +} +</style> \ No newline at end of file diff --git a/src/views/warningManage/warningPeople/index.vue b/src/views/warningManage/warningPeople/index.vue index c1d2ba9..0e8274e 100644 --- a/src/views/warningManage/warningPeople/index.vue +++ b/src/views/warningManage/warningPeople/index.vue @@ -1,15 +1,132 @@ <template> - <div> - 预警通知 - </div> + <div class="system-gas-container"> + <el-card shadow="hover"> + <div class="system-menu-search mb15"> + <el-form :inline="true" > + <el-form-item label="姓名:"> + <el-input v-model="state.tableData.listQuery.searchParams.name" placeholder="姓名" ></el-input> + </el-form-item> + <el-button size="default" type="primary" class="ml10"> + <el-icon> + <ele-Search /> + </el-icon> + 查询 + </el-button> + <el-button size="default" class="ml10" @click="reset()"> + <el-icon> + <RefreshLeft /> + </el-icon> + 重置 + </el-button> + </el-form> + </div> + <el-button size="default" class="mb10" type="success" @click="openDialog('新增',{})"> + <el-icon> + <ele-FolderAdd /> + </el-icon> + 新增预警人员 + </el-button> + + <el-table :data="state.tableData.data" style="width: 100%"> + <el-table-column align="center" prop="name" label="预警人员"/> + <el-table-column align="center" prop="phone" label="手机号"/> + <el-table-column label="操作" show-overflow-tooltip width="140"> + <template #default="scope"> + <el-button size="small" text type="primary" @click="openDialog('查看', scope.row)">查看</el-button> + <el-button size="small" text type="primary" @click="openDialog('修改', scope.row)">修改</el-button> + <el-button size="small" text type="primary" style="color:red;" @click="del(scope.row)">删除</el-button> + </template> + </el-table-column> + </el-table> + <br /> + <el-pagination + @size-change="onHandleSizeChange" + @current-change="onHandleCurrentChange" + class="page-position" + :pager-count="5" + :page-sizes="[10, 20, 30]" + v-model:current-page="state.tableData.listQuery.pageIndex" + background + v-model:page-size="state.tableData.listQuery.pageSize" + layout="total, sizes, prev, pager, next, jumper" + :total="state.tableData.total"> + </el-pagination> + <br /> + <br /> + </el-card> + <people-dialog ref="peopleRef" @getPeopleData = initPeopleData></people-dialog> + </div> </template> <script setup lang="ts"> +import {reactive, ref} from "vue"; +import { ElMessage, ElMessageBox } from 'element-plus' +import { PeopleDataState } from "/@/types/warning"; +import peopleDialog from "./component/peopleDialog.vue"; +const peopleRef = ref(); +const state = reactive<PeopleDataState>({ + tableData: { + data: [ + // { + // id: '1', + // name: '张三', + // phone: '112554566666' + // }, + // { + // id: '2', + // name: '李四', + // phone: '11254212321' + // } + ], + total: 0, + loading: false, + listQuery: { + pageIndex: 1, + pageSize: 10, + searchParams:{ + name: '' + } + } + } +}); + +const initPeopleData = () => { + console.log("数据列表") +}; +const onHandleSizeChange = (val: number) => { + state.tableData.listQuery.pageSize = val; + initPeopleData(); +}; +// 分页改变 +const onHandleCurrentChange = (val: number) => { + state.tableData.listQuery.pageIndex = val; + initPeopleData(); +}; +const openDialog = (type: string, value: any) => { + peopleRef.value.openDialog(type, value); +}; +const del = (val: any) => { + ElMessageBox.confirm( + '确定删除此条数据?', + '提示', + { + confirmButtonText: '确定', + cancelButtonText: '取消', + type: 'warning', + } + ) + .then(() => { + ElMessage({ + type: 'success', + message: '删除成功', + }) + }) +}; +const reset = () => { + state.tableData.listQuery.searchParams.name = ''; +} </script> - - - <style scoped lang="scss"> </style> \ No newline at end of file diff --git a/src/views/warningManage/warningSet/component/setDialog.vue b/src/views/warningManage/warningSet/component/setDialog.vue new file mode 100644 index 0000000..87cedd9 --- /dev/null +++ b/src/views/warningManage/warningSet/component/setDialog.vue @@ -0,0 +1,74 @@ +<template> + <div class="system-add-gas-container"> + <el-dialog + :title="state.title" + v-model="state.isShowUserDialog" + width="550px" + > + <el-form :model="state.setForm" size="default" ref="gasRef" :rules="state.setFormRules" label-width="150px"> + <el-form-item label="预警名称:" prop="name"> + <span>{{state.setForm.name}}</span> + </el-form-item> + <el-form-item label="连续超过阈值点数:" prop="points"> + <el-input v-model.trim="state.setForm.points" :disabled="state.disabled"></el-input> + </el-form-item> + </el-form> + <template #footer> + <span class="dialog-footer"> + <el-button @click="handleClose" size="default" v-if="!state.disabled">取 消</el-button> + <el-button type="primary" @click="onSubmit" size="default">确 定</el-button> + </span> + </template> + </el-dialog> + </div> +</template> + +<script setup lang="ts"> +import {reactive, ref} from "vue"; +import {SetState} from "/@/types/warning"; + +const gasRef = ref(); +const emit = defineEmits(["getSetData"]); +const state = reactive<SetState>({ + title: '', + isShowUserDialog: false, + disabled: false, + setForm: { + name: '', + points: 0 + }, + setFormRules:{ + points: [{ required: true, message: '请填写连续超过阈值点数', trigger: 'blur' }], + } +}); +const openDialog = (type: string, value: any) => { + state.isShowUserDialog = true; + if (type === '查看') { + state.disabled = true; + state.title = '查看'; + state.setForm = JSON.parse(JSON.stringify(value)); + } else { + state.disabled = false; + state.title = '修改'; + state.setForm = JSON.parse(JSON.stringify(value)); + } +}; +const onSubmit = () => { + gasRef.value.clearValidate(); + state.isShowUserDialog = false; + emit('getSetData'); +}; + +const handleClose = () => { + gasRef.value.clearValidate(); + state.isShowUserDialog = false; + emit('getSetData'); +} + +defineExpose({ + openDialog +}); +</script> +<style scoped lang="scss"> + +</style> \ No newline at end of file diff --git a/src/views/warningManage/warningSet/index.vue b/src/views/warningManage/warningSet/index.vue index d98ff85..e7eae42 100644 --- a/src/views/warningManage/warningSet/index.vue +++ b/src/views/warningManage/warningSet/index.vue @@ -1,15 +1,49 @@ <template> - <div> - 预警设置 - </div> + <div class="system-warning-container"> + <el-card shadow="hover"> + <el-table :data="state.tableData.data" style="width: 100%"> + <el-table-column align="center" prop="name" label="预警名称"/> + <el-table-column align="center" prop="points" label="连续超过阈值点数"/> + <el-table-column label="操作" show-overflow-tooltip width="140"> + <template #default="scope"> + <el-button size="small" text type="primary" @click="openDialog('查看', scope.row)">查看</el-button> + <el-button size="small" text type="primary" @click="openDialog('修改', scope.row)">修改</el-button> + </template> + </el-table-column> + </el-table> + </el-card> + <set-dialog ref="setRef" @getSetData=initSetData></set-dialog> + </div> </template> <script setup lang="ts"> +import {reactive, ref} from "vue"; +import { TableDataState } from "/@/types/warning"; +import setDialog from "./component/setDialog.vue"; +const setRef = ref(); +const state = reactive<TableDataState>({ + tableData: { + data: [ + { + name: '黄色预警', + points: 1 + }, + { + name: '红色预警', + points: 2 + }, + ] + } +}); + +const initSetData = () => { + console.log("数据列表") +}; +const openDialog = (type: string, value: any) => { + setRef.value.openDialog(type, value); +}; </script> - - - <style scoped lang="scss"> </style> \ No newline at end of file -- Gitblit v1.9.2