sunli
/
qingtian-report-ui
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

docs:预警类型设置

master
waibao2 1 month ago
parent
55b726e918
commit
c02469b707
2 changed files with 588 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 270
      src/views/basic/error/index.vue
  2. 318
      src/views/basic/error/rules.vue

270
src/views/basic/error/index.vue
Unescape View File

@ -0,0 +1,270 @@ @@ -0,0 +1,270 @@
<template>
<div class="app-container app-container-bg">
<el-card class="first-card" ref='firstCard' shadow="always">
<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" @submit.native.prevent>
<el-form-item label="站点名称" prop="name">
<el-input v-model="queryParams.name" placeholder="请输入站点名称" clearable @keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item>
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['error:monitor:add']">新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate" v-hasPermi="['error:monitor:edit']">修改</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete" v-hasPermi="['error:monitor:remove']">删除</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['error:monitor:export']">导出</el-button>
</el-col>
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
</el-card>
<div class="el-card-p card-shadow carder-border mt10 pad10 ">
<el-table class="table-box" v-table-height v-loading="loading" :data="monitorList " @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" :align="alignment" />
<el-table-column label="类型" :align="alignment" prop="type" />
<el-table-column label="名称" :align="alignment" prop="name" />
<el-table-column label="备注" :align="alignment" prop="remark" />
<el-table-column label="操作" :align="alignment" class-name="small-padding fixed-width">
<template #default="scope">
<el-button type="text" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['error:monitor:edit']">修改</el-button>
<el-button text type="danger" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['error:monitor:remove']">删除</el-button>
<el-button type="text" icon="Tickets" @click="handleTickets(scope.row)" v-hasPermi="['error:monitor:edit']">规则</el-button>
</template>
</el-table-column>
</el-table>
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.page" v-model:limit="queryParams.limit" @pagination="getList" />
</div>
<!-- 新增修改弹窗 -->
<el-dialog class="custom-dialog" :title="title" v-model="open" width="500px" append-to-body>
<el-form ref="formRef" :model="form" :rules="rules" label-width="auto">
<el-form-item label="类型" prop="type">
<el-select v-model="form.type" placeholder="请选择类型" style="width:100%" :disabled="form.id">
<el-option v-for="t in typeList" :key="t.value" :label="t.label" :value="t.value"></el-option>
</el-select>
</el-form-item>
<el-form-item label="名称" prop="name">
<el-input v-model="form.name" placeholder="请输入名称" :disabled="form.id" />
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input type="textarea" :autosize="{ minRows: 2, maxRows: 99 }" v-model="form.remark" placeholder="请输入备注" />
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="submitForm(formRef)" v-loading='btnLoading'>确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script setup>
import { ref, reactive, onMounted, } from 'vue'
const router = useRouter();
const { proxy } = getCurrentInstance()
const alignment = 'center'
const showSearch = ref(true)
const queryParams = reactive({
page: 1,
limit: 10,
name: '',
})
const typeList = [
{ label: '设备故障', value: '设备故障' },
{ label: '数据异常', value: '数据异常' }
]
const loading = ref(false)
const total = ref(0)
const monitorList = ref([])
const getList = async () => {
loading.value = true;
try {
const res = await proxy.axiosGet('/error/monitor/list', queryParams)
if (res.code == 0) {
monitorList.value = res.data
total.value = res.count
}
loading.value = false
} catch (error) {
loading.value = false
}
}
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.page = 1
getList()
}
const resetQuery = () => {
proxy.resetForm("queryForm");
handleQuery();
}
// 多选框选中数据
let ids = ref([])
let names = ref([])
let single = ref(true)
let multiple = ref(true)
const handleSelectionChange = (selection) => {
ids.value = selection.map(item => item.id)
names.value = selection.map(item => item.name)
single.value = selection.length !== 1
multiple.value = !selection.length
}
/** 新增按钮操作 */
const open = ref(false)
const title = ref("")
const handleAdd = () => {
reset();
open.value = true;
title.value = "添加告警异常类型";
}
/** 修改按钮操作 */
const form = reactive({})
const rules = reactive({})
const handleUpdate = async (row) => {
reset();
let id = row.id || ids.value
try {
let res = await proxy.axiosGet('/error/monitor/info/' + id);
if (res.code === 0) {
Object.assign(form, res.data);
open.value = true;
title.value = "修改告警异常类型";
}
} catch (error) {
console.log(error)
}
}
/** 删除按钮操作 */
const handleDelete = (row) => {
let stnms = row.name || names.value
const stnmIds = row.id || ids.value;
proxy.$modal.confirm('是否确认删除站点名称为"' + stnms + '"的数据项？').then(async function () {
let res = await proxy.axiosDelete('/error/monitor/delete/' + stnmIds);
if (res.code === 0) {
proxy.$modal.msgSuccess("删除成功");
getList();
}
})
}
/** 导出按钮操作 */
const handleExport = async () => {
let p = {
page: 1,
limit: 9999,
name: queryParams.name
}
let res = await proxy.axiosGet('/error/monitor/list', p);
if (res.code === 0) {
let table = [];
table.push({
A: "类型",
B: "名称",
C: "备注"
});
res.data.forEach(d => {
let row = {
A: d.type,
B: d.name,
C: d.remark
};
table.push(row);
});
let header = ["A", "B", "C"];
let fileName = "告警异常类型";
proxy.exportExcel(header, table, fileName);
}
}
/************************************************************* 弹窗 ***************************************/
let formRef = ref(null)
let biaoshi = ref(
[
{ flag: '水库水位', value: '1' }, { flag: '河道水位', value: '2' }
]
)
const stationList = ref([])
const getStnmandStnmId = async () => {
let res = await proxy.axiosGet('/basic/warnlevel/queryStnmandStnmId');
if (res.code === 200) {
stationList.value = res.data
}
}
// 取消按钮
const cancel = () => {
open.value = false;
reset();
}
const reset = () => {
Object.assign(form, {
id: null,
name: null,
remark: null,
type: null,
});
proxy.resetForm("formRef");
}
/** 提交按钮 */
const submitForm = async (formEl) => {
if (!formEl) return
await formEl.validate((valid, fields) => {
if (valid) {
if (form.id != null) {
editMethod();
} else {
addMethod();
}
}
})
}
const btnLoading = ref(false)
// 告警异常类型新增方法
const addMethod = async () => {
btnLoading.value = true
try {
let res = await proxy.axiosPost('/error/monitor/add', form);
if (res.code === 0) {
proxy.$modal.msgSuccess("新增成功");
open.value = false;
getList();
btnLoading.value = false
}
} catch (error) {
btnLoading.value = false
}
}
// 告警异常类型修改方法
const editMethod = async () => {
btnLoading.value = true
try {
let res = await proxy.axiosPut('/error/monitor/edit', form);
if (res.code === 0) {
proxy.$modal.msgSuccess("修改成功");
open.value = false;
getList();
btnLoading.value = false
}
} catch (error) {
btnLoading.value = false
}
}
/** 规则按钮操作 */
const handleTickets = (row => {
const ruleId = row.id;
router.push({ path: "/message/error-rules/index/" + ruleId, query: { remark: row.remark } });
})
onMounted(() => {
getList()
getStnmandStnmId()
})
</script>

318
src/views/basic/error/rules.vue
Unescape View File

@ -0,0 +1,318 @@ @@ -0,0 +1,318 @@
<template>
<div class="app-container app-container-bg">
<el-card class="first-card" ref='firstCard' shadow="always">
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['error:monitor:add']">新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate" v-hasPermi="['error:monitor:edit']">修改</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete" v-hasPermi="['error:monitor:remove']">删除</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="primary" icon="Back" @click="handleBack">返回</el-button>
</el-col>
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
</el-card>
<div class="el-card-p card-shadow carder-border mt10 pad10 ">
<el-table class="table-box" v-table-height v-loading="loading" :data="ruleList " @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" :align="alignment" />
<el-table-column label="名称" :align="alignment" prop="name" />
<el-table-column label="汛期值" :align="alignment" prop="floodValue" />
<el-table-column label="非汛期值" :align="alignment" prop="value" />
<el-table-column label="单位" :align="alignment" prop="unit" />
<el-table-column label="操作" :align="alignment" class-name="small-padding fixed-width">
<template #default="scope">
<el-button type="text" icon="Edit" @click="handleUpdate(scope.row)">修改</el-button>
<el-button text type="danger" 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.page" v-model:limit="queryParams.limit" @pagination="getList" />
</div>
<!-- 新增修改弹窗 -->
<el-dialog class="custom-dialog" :title="title" v-model="open" width="500px" append-to-body>
<el-form ref="formRef" :model="form" :rules="rules" label-width="auto">
<el-form-item label="类型" prop="stnmType" v-if="queryParams.ruleId == 2 || queryParams.ruleId == 3">
<el-select v-model="form.stnmType" placeholder="请选择类型" style="width:100%">
<el-option v-for="t in stnmTypeList" :key="t.value" :label="t.label" :value="t.value"></el-option>
</el-select>
</el-form-item>
<el-form-item label="名称" prop="name">
<el-input v-model="form.name" placeholder="请输入名称" />
</el-form-item>
<el-form-item label="汛期值" prop="floodValue">
<el-input v-model="form.floodValue" placeholder="请输入汛期值" />
</el-form-item>
<el-form-item label="非汛期值" prop="value">
<el-input v-model="form.value" placeholder="请输入非汛期值" />
</el-form-item>
<el-form-item label="单位" prop="unit">
<span>{{form.unit}}</span>
</el-form-item>
<el-form-item label="" prop="remark">
<div style="color: red">* {{remark}}</div>
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="submitForm(formRef)" v-loading='btnLoading'>确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script setup>
import { ref, reactive, onMounted, } from 'vue'
const router = useRouter();
const route = useRoute();
const { proxy } = getCurrentInstance()
const alignment = 'center'
const showSearch = ref(true)
const queryParams = reactive({
page: 1,
limit: 10,
name: '',
})
const loading = ref(false)
const total = ref(0)
const ruleList = ref([])
const getList = async () => {
loading.value = true;
try {
const res = await proxy.axiosGet('/basic/rule/getByErrorId', { errorId: queryParams.ruleId })
if (res.code == 0) {
ruleList.value = res.data
total.value = res.count
}
loading.value = false
} catch (error) {
loading.value = false
}
}
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.pageNum = 1
getList()
}
const resetQuery = () => {
proxy.resetForm("queryForm");
handleQuery();
}
// 多选框选中数据
let ids = ref([])
let names = ref([])
let single = ref(true)
let multiple = ref(true)
const handleSelectionChange = (selection) => {
ids.value = selection.map(item => item.id)
names.value = selection.map(item => item.name)
single.value = selection.length !== 1
multiple.value = !selection.length
}
/** 新增按钮操作 */
const open = ref(false)
const title = ref("")
const handleAdd = () => {
reset();
open.value = true;
title.value = "添加故障规则";
}
/** 修改按钮操作 */
const form = reactive({
errorId: queryParams.ruleId
})
const rules = reactive({})
const handleUpdate = async (row) => {
reset();
let id = row.id || ids.value
try {
let res = await proxy.axiosGet('/basic/rule/info/' + id);
if (res.code === 0) {
Object.assign(form, res.data);
open.value = true;
title.value = "修改故障规则";
}
} catch (error) {
console.log(error)
}
}
/** 删除按钮操作 */
const handleDelete = (row) => {
let stnms = row.name || names.value
const stnmIds = row.id || ids.value;
proxy.$modal.confirm('是否确认删除规则名称为"' + stnms + '"的数据项？').then(async function () {
let res = await proxy.axiosDelete('/basic/rule/delete/' + stnmIds);
if (res.code === 0) {
proxy.$modal.msgSuccess("删除成功");
getList();
}
})
}
/** 返回按钮操作 */
const handleBack = () => {
const obj = { path: "/message/error" };
proxy.$tab.closeOpenPage(obj);
}
/************************************************************* 弹窗 ***************************************/
let formRef = ref(null)
// 取消按钮
const cancel = () => {
open.value = false;
reset();
}
const reset = () => {
Object.assign(form, {
id: null,
stnmType: null,
name: null,
floodValue: null,
value: null,
unit: null
});
proxy.resetForm("formRef");
}
/** 提交按钮 */
const submitForm = async (formEl) => {
if (!formEl) return
await formEl.validate((valid, fields) => {
if (valid) {
if (form.id != null) {
editMethod();
} else {
addMethod();
}
}
})
}
const btnLoading = ref(false)
// 告警异常类型新增方法
const addMethod = async () => {
btnLoading.value = true
try {
let res = await proxy.axiosPost('/basic/rule/add', form);
if (res.code === 0) {
proxy.$modal.msgSuccess("新增成功");
open.value = false;
getList();
btnLoading.value = false
}
} catch (error) {
btnLoading.value = false
}
}
// 告警异常类型修改方法
const editMethod = async () => {
btnLoading.value = true
try {
let res = await proxy.axiosPut('/basic/rule/edit', form);
if (res.code === 0) {
proxy.$modal.msgSuccess("修改成功");
open.value = false;
getList();
btnLoading.value = false
}
} catch (error) {
btnLoading.value = false
}
}
// 定义 remark 变量
const remark = ref('')
onMounted(() => {
const ruleId = route.params && route.params.ruleId;
const remarkParam = route.query && route.query.remark
if (ruleId) {
queryParams.ruleId = ruleId;
form.errorId = ruleId;
getList();
}
if (remarkParam) {
remark.value = remarkParam;
}
})
const stnmTypeList = ref([])
const stnmTypeListRule = [
{
value: 'A',
label: '雨量'
},
{
value: 'B',
label: '河道'
},
{
value: 'C',
label: '水库'
},
{
value: 'D',
label: '潮位'
},
{
value: 'E',
label: '流量'
}
]
const stnmTypeListRuleId3 = [
{
value: 'B',
label: '河道'
},
{
value: 'C',
label: '水库'
},
{
value: 'D',
label: '潮位'
},
{
value: 'E',
label: '流量'
}
]
watch([() => queryParams.ruleId, () => form.stnmType], ([newruleId, newStnmType]) => {
if (newruleId == 3) {
stnmTypeList.value = stnmTypeListRuleId3
} else {
stnmTypeList.value = stnmTypeListRule
}
if (newruleId == 1) {
form.unit = 'h'
} else if (newruleId == 2) {
if (newStnmType === 'A') {
form.unit = 'mm'
} else if (newStnmType === 'E') {
form.unit = 'm³/s'
} else {
form.unit = 'm'
}
} else if (newruleId == 3) {
if (newStnmType === 'E') {
form.unit = 'm³/s'
} else {
form.unit = 'm'
}
}
else if (newruleId == 4) {
form.unit = 'mm'
} else if (newruleId == 5) {
form.unit = 'V'
} else {
form.unit = 'm'
}
}, { immediate: true })
</script>
Write Preview
Loading…
Cancel
Save