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
c02469b707
commit
7491e2e74d
1 changed files with 594 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. 594
      src/views/basic/yuzhi/index.vue

594
src/views/basic/yuzhi/index.vue
Unescape View File

@ -0,0 +1,594 @@ @@ -0,0 +1,594 @@
<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="stnm">
<el-input v-model="queryParams.stnm" placeholder="请输入站点名称" clearable @keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item label="故障类型" prop="errorId">
<el-select v-model="queryParams.errorId" placeholder="请选择故障类型" @change="handleQuery">
<el-option v-for="t in errorList" :key="t.id" :label="t.name" :value="t.id"></el-option>
</el-select>
</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="['basic:yuzhi:add']">新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate" v-hasPermi="['basic:yuzhi:edit']">修改</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete" v-hasPermi="['basic:yuzhi:remove']">删除</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['basic:yuzhi:export']">导出</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="danger" plain icon="Lock" :disabled="multiple" @click="handleIsLock(0)" v-hasPermi="['basic:yuzhi:remove']">加锁</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="success" plain icon="Unlock" :disabled="multiple" @click="handleIsLock(1)" v-hasPermi="['basic:yuzhi:remove']">解锁</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="success" plain icon="Edit" @click="handleBatchSystem" v-hasPermi="['basic:yuzhi:edit']">批量设置</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="primary" plain icon="Refresh" @click="handleRefreshRules" v-hasPermi="['basic:yuzhi:edit']">刷新规则</el-button>
</el-col>
</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" border @selection-change="handleSelectionChange" :span-method="objectSpanMethod">
<el-table-column type="selection" width="55" :align="alignment" />
<el-table-column label="测站名称" :align="alignment" prop="stnm" />
<el-table-column label="故障名称" :align="alignment" prop="errorName" />
<el-table-column label="汛期阈值" :align="alignment" prop="floodValue" />
<el-table-column label="非汛期阈值" :align="alignment" prop="value" />
<el-table-column label="说明" :align="alignment" prop="comment" />
<el-table-column label="状态" :align="alignment" prop="locked">
<template #default="scope">
<el-tag v-if="scope.row.locked == 0" type="success">未加锁</el-tag>
<el-tag v-if="scope.row.locked == 1" type="danger">加锁</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" :align="alignment" class-name="small-padding fixed-width">
<template #default="scope">
<el-button type="text" icon="Edit" v-if="scope.row.locked == 0" @click="handleUpdate(scope.row)" v-hasPermi="['error:monitor:edit']">修改</el-button>
<el-button text type="danger" icon="Delete" v-if="scope.row.locked == 0" @click="handleDelete(scope.row)" v-hasPermi="['error:monitor:remove']">删除</el-button>
<el-button type="text" icon="Lock" v-if="scope.row.locked == 0" @click="handleIsLock(scope.row)" v-hasPermi="['error:monitor:edit']">加锁</el-button>
<el-button type="text" icon="Unlock" v-if="scope.row.locked == 1" @click="handleIsLock(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="errorName" v-if="form.id==null">
<el-select v-model="form.errorName" placeholder="请选择故障类型" style="width:100%" @change="changeErrorType">
<el-option v-for="t in errorTypeList" :key="t.value" :label="t.label" :value="t.value"></el-option>
</el-select>
</el-form-item>
<el-form-item label="故障名称" prop="errorId" v-if="form.id==null">
<el-select v-model="form.errorId" placeholder="请选择故障类型" style="width:100%" @change="changeErrorName">
<el-option v-for="t in errorNameList" :key="t.id" :label="t.name" :value="t.id"></el-option>
</el-select>
</el-form-item>
<el-form-item label="规则" prop="rule" v-if="form.id==null">
<el-select v-model="form.rule" placeholder="请选择规则" style="width:100%" @change="changeRules">
<el-option v-for="t in errorRules" :key="t.id" :label="t.name" :value="t.id"></el-option>
</el-select>
</el-form-item>
<el-form-item label="数据类型" prop="stnmType" v-if="form.id==null">
<el-select v-model="form.stnmType" placeholder="请选择数据类型" style="width:100%" @change="changeStnmType">
<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="stnmId" v-if="form.id==null">
<el-select :multiple="isBatch" clearable collapse-tags v-model="form.stnmId" placeholder="请选择测站" style="width:100%" @change="changeStnmId">
<template #header v-if="isBatch">
<el-checkbox v-model="checkAll" :indeterminate="indeterminate" @change="handleCheckAll">
全选
</el-checkbox>
</template>
<el-option v-for="t in stnmIdList" :key="t.stnmId" :label="t.stnm" :value="t.stnmId"></el-option>
</el-select>
</el-form-item>
<el-form-item label="汛期阈值" prop="floodValue">
<el-input-number controls-position="right" style="width:90%" v-model="form.floodValue" placeholder="请输入汛期阈值" />
<span class="ml10" v-if="form.id == null">{{unit}}</span>
</el-form-item>
<el-form-item label="非汛期阈值" prop="value">
<el-input-number controls-position="right" style="width:90%" v-model="form.value" placeholder="请输入非汛期阈值" />
<span class="ml10" v-if="form.id == null">{{unit}}</span>
</el-form-item>
<el-form-item label="说明" prop="comment">
<el-input type="textarea" :autosize="{ minRows: 2, maxRows: 99 }" v-model="form.comment" 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,
stnm: '',
errorId: ""
})
const errorTypeList = ref([
{ 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('/basic/yuzhi/list', queryParams)
if (res.code == 0) {
monitorList.value = res.data
total.value = res.count
}
} catch (error) {
} finally {
loading.value = false
}
}
const errorList = ref([])
const getErrorList = async () => {
try {
const res = await proxy.axiosGet('/error/monitor/getlist')
if (res.code == 0) {
errorList.value = res.data
}
} catch (error) {
}
}
/** 搜索按钮操作 */
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.stnm)
single.value = selection.length !== 1
multiple.value = !selection.length
}
/** 新增按钮操作 */
const open = ref(false)
const title = ref("")
const handleAdd = () => {
isBatch.value = false
reset();
open.value = true;
title.value = "添加阈值";
}
/** 修改按钮操作 */
const form = reactive({})
const rules = reactive({})
const handleUpdate = async (row) => {
isBatch.value = false
reset();
let id = row.id || ids.value
try {
let res = await proxy.axiosGet('/basic/yuzhi/info/' + id);
if (res.code === 0) {
Object.assign(form, res.data);
open.value = true;
title.value = "修改阈值";
}
} catch (error) {
console.log(error)
}
}
const changeRules = (val) => {
errorRules.value.forEach(function (e) {
console.log(errorRules.value, e, val)
if (e.id === val) {
form.floodValue = e.floodValue;
form.value = e.value;
unit.value = e.unit;
}
});
}
const changeStnmId = (val) => {
}
// 批量设置按钮操作
const checkAll = ref(false)
const indeterminate = ref(false)
const isBatch = ref(false)
const handleBatchSystem = () => {
isBatch.value = true
open.value = true;
title.value = "批量设置阈值";
}
watch(form.stnmId, (val) => {
if (val.length === 0) {
checkAll.value = false
indeterminate.value = false
} else if (val.length === stnmIdList.value.length) {
checkAll.value = true
indeterminate.value = false
} else {
indeterminate.value = true
}
})
const handleCheckAll = (val) => {
indeterminate.value = false
if (val) {
form.stnmId = stnmIdList.value.map(item => item.stnmId);
} else {
form.stnmId = []
}
form.stnmId = [...form.stnmId];
}
/** 删除按钮操作 */
const handleDelete = (row) => {
let stnms = row.stnm || names.value
const stnmIds = row.id || ids.value;
proxy.$modal.confirm('是否确认删除站点名称为"' + stnms + '"的数据项？').then(async function () {
let res = await proxy.axiosDelete('/basic/yuzhi/delete/' + stnmIds);
if (res.code === 0) {
proxy.$modal.msgSuccess("删除成功");
getList();
resetCacheConfirm()
}
})
}
/** 加锁--解锁 按钮操作*/
const handleIsLock = (row) => {
let stnms = row.stnm || names.value
const stnmIds = row.id || ids.value;
let text = (row.locked == 0 || row == 0) ? '加锁' : '解锁'
let url = (row.locked == 0 || row == 0) ? '/basic/yuzhi/lock/' : '/basic/yuzhi/unlock/'
proxy.$modal.confirm(`是否确认给站点名称为"${stnms}"的数据项${text}？`).then(async function () {
let res = await proxy.axiosDelete(url + stnmIds);
if (res.code === 0) {
proxy.$modal.msgSuccess(`${text}成功`);
getList();
}
})
}
/** 导出按钮操作 */
const handleExport = async () => {
let p = {
page: 1,
limit: 9999,
stnm: queryParams.stnm,
errorId: queryParams.errorId
}
let res = await proxy.axiosGet('/basic/yuzhi/list', p);
if (res.code === 0) {
let table = [];
table.push({
A: "测站名称",
B: "故障名称",
C: "汛期阈值",
D: "非汛期阈值",
E: "说明",
});
res.data.forEach(d => {
let row = {
A: d.stnm,
B: d.errorName,
C: d.floodValue,
D: d.value,
E: d.comment,
};
table.push(row);
});
let header = ["A", "B", "C", 'D', 'E'];
let fileName = "告警阈值";
proxy.exportExcel(header, table, fileName);
}
}
// 刷新规则按钮操作
const handleRefreshRules = async () => {
try {
let res = await proxy.axiosPost('/basic/yuzhi/resetCache');
if (res.code == 0) {
proxy.$modal.msgSuccess(`刷新成功`);
}
} catch (error) {
proxy.$modal.msgError(`刷新失败`);
}
}
/************************************************************* 弹窗 ***************************************/
let formRef = ref(null)
const errorNameList = ref([])
const changeErrorType = (val) => {
form.errorId = null;
form.rule = null;
getStnmTypeList(val)
// 根据选择的错误类型筛选数据
errorNameList.value = errorList.value.filter(item => {
// 假设 item.type 字段表示错误类型
// 如果你的数据结构不同，请根据实际情况调整
return item.type === val
})
}
const stnmTypeList = ref([])
const getStnmTypeList = (val) => {
console.log(val, '===')
switch (val) {
case '设备故障':
stnmTypeList.value = [{
value: 'ALL',
label: '全部'
},
{
value: 'A',
label: '雨量'
},
{
value: 'B',
label: '河道水位'
},
{
value: 'C',
label: '水库水位'
},
{
value: 'D',
label: '潮位'
},
{
value: 'S',
label: '风速'
}
]
form.stnmType = 'ALL'
break;
default:
stnmTypeList.value = [
{
value: 'A',
label: '雨量'
},
{
value: 'B',
label: '河道水位'
},
{
value: 'C',
label: '水库水位'
},
{
value: 'D',
label: '潮位'
},
{
value: 'S',
label: '风速'
}
]
form.stnmType = 'A'
break;
}
getStnmIdList()
}
const errorRules = ref([])
const unit = ref('')
const changeErrorName = async (val) => {
if (val == 1) {
unit.value = 'h'
} else if (val == 4) {
unit.value = 'mm'
} else if (val == 5) {
unit.value = 'V'
} else {
if (form.stnmType == 'A') {
unit.value = 'mm'
} else if (form.stnmType == 'E') {
unit.value = 'm³/s';
} else if (form.stnmType == 'S') {
unit.value = 'm/s';
} else {
unit.value = 'm'
}
}
try {
let res = await proxy.axiosGet('/basic/rule/getByErrorId', { errorId: val });
if (res.code == 0) {
errorRules.value = res.data
}
} catch (error) {
}
}
// 切换数据类型
const changeStnmType = (val) => {
form.stnmType = val
getStnmIdList()
}
// 获取测站下拉框数据
const stnmIdList = ref([])
const getStnmIdList = async () => {
let param = {
sType: form.stnmType || 'ALL'
}
try {
let res = await proxy.axiosGet('/basic/info/queryMapStationList', param);
if (res.code == 0) {
stnmIdList.value = res.data
}
} catch (error) {
}
}
// 取消按钮
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 {
if (isBatch.value) {
batchAddMethod()
} else {
addMethod();
}
}
}
})
}
const btnLoading = ref(false)
// 阈值新增方法
const addMethod = async () => {
btnLoading.value = true
try {
let res = await proxy.axiosPost('/basic/yuzhi/add', form);
if (res.code === 0) {
proxy.$modal.msgSuccess("新增成功");
open.value = false;
getList();
btnLoading.value = false
}
} catch (error) {
btnLoading.value = false
}
}
// 批量设置
const batchAddMethod = async () => {
btnLoading.value = true
let formBatch = {
...form,
stnmIds: form.stnmId.join(','),
deleted: null,
ids: null,
stnmId: null,
stnm: null,
}
try {
let res = await proxy.axiosPost('/basic/yuzhi/batchEdit', formBatch);
if (res.code === 0) {
proxy.$modal.msgSuccess("批量设置成功");
open.value = false;
getList();
btnLoading.value = false
resetCacheConfirm()
}
} catch (error) {
btnLoading.value = false
}
}
const resetCacheConfirm = () => {
proxy.$modal.confirm('规则是否立即生效?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
handleRefreshRules();
}).catch(() => {
});
}
// 阈值修改方法
const editMethod = async () => {
btnLoading.value = true
try {
let res = await proxy.axiosPut('/basic/yuzhi/edit', form);
if (res.code === 0) {
proxy.$modal.msgSuccess("修改成功");
open.value = false;
getList();
btnLoading.value = false
}
} catch (error) {
btnLoading.value = false
}
}
const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
// 只对"测站名称"列进行合并处理
if (columnIndex === 1) { // 测站名称列索引为1（type列是0，测站名称列是1）
if (rowIndex === 0) {
// 对于第一行，计算连续相同stnm的行数
let count = 1;
for (let i = rowIndex + 1; i < monitorList.value.length; i++) {
if (monitorList.value[i].stnm === row.stnm) {
count++;
} else {
break;
}
}
return [count, 1];
} else {
// 对于其他行，检查是否与前一行相同
if (monitorList.value[rowIndex - 1].stnm === row.stnm) {
// 与上一行相同时，返回[0, 0]表示不显示单元格
return [0, 0];
} else {
// 与上一行不同时，计算连续相同stnm的行数
let count = 1;
for (let i = rowIndex + 1; i < monitorList.value.length; i++) {
if (monitorList.value[i].stnm === row.stnm) {
count++;
} else {
break;
}
}
return [count, 1];
}
}
}
}
onMounted(() => {
getList()
getErrorList()
getStnmIdList()
})
</script>
Write Preview
Loading…
Cancel
Save