You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
333 lines
10 KiB
333 lines
10 KiB
<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" @submit.native.prevent> |
|
<el-form-item label="站点" prop="stnmId"> |
|
<el-select clearable filterable v-model="queryParams.stnmId" placeholder="请选择站点" @change="dataChange"> |
|
<el-option v-for="dict in stationList" :key="dict.stnmId" :label="dict.stnm" :value="dict.stnmId"></el-option> |
|
</el-select> |
|
</el-form-item> |
|
<el-form-item label="归属地区" prop="code"> |
|
<el-select class="menu-panel-select-item" v-model="queryParams.code" filterable placeholder="请选择" style="width: 200px" :popper-append-to-body="false"> |
|
<el-option v-for="item in stcdAreaOption" :label="item.fullName" :value="item.code" :key="item.code"></el-option> |
|
</el-select> |
|
</el-form-item> |
|
|
|
<el-form-item label="开始时间"> |
|
<el-date-picker v-model="queryParams.startTime" type="date" placeholder="选择开始时间" value-format="YYYY-MM-DD" class="w200"> |
|
</el-date-picker> |
|
</el-form-item> |
|
<el-form-item label="结束时间"> |
|
<el-date-picker v-model="queryParams.endTime" type="date" placeholder="选择结束时间" value-format="YYYY-MM-DD" class="w200"> |
|
</el-date-picker> |
|
</el-form-item> |
|
<el-form-item label="数据类型" prop="type"> |
|
<el-select v-model="queryParams.type" placeholder="请选择状态" @change="dataChange"> |
|
<el-option v-for="item in types" :key="item.value" :label="item.label" :value="item.value"> |
|
</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-card> |
|
<div class="el-card-p card-shadow carder-border mt10 pad10 "> |
|
<el-table class="table-box" v-table-height v-loading="loading" :data="dataList" @selection-change="handleSelectionChange"> |
|
<el-table-column type="index" width="60" :align="alignment" label="序号" /> |
|
<el-table-column label="站点名称" :align="alignment" prop="stnm" /> |
|
<el-table-column label="时间" :align="alignment" prop="startTime" /> |
|
<el-table-column label="数据类型" :align="alignment" prop="type"> </el-table-column> |
|
<el-table-column label="未处理" :align="alignment" prop="dealValue" /> |
|
<el-table-column label="已处理" :align="alignment" prop="unDealValue" /> |
|
<el-table-column label="数据插补" :align="alignment" prop="errOneValue" /> |
|
<el-table-column label="副站数据填充" :align="alignment" prop="errTwoValue" /> |
|
<el-table-column label="操作" :align="alignment" class-name="small-padding fixed-width"> |
|
<template #default="scope"> |
|
<el-button type="text" icon="View" @click="handleShow(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-table v-loading="loadingDetail" border :data="dataListDetail" height="500"> |
|
<el-table-column min-width="50" :align="alignment" label="序号"> </el-table-column> |
|
<el-table-column label="站点名称" :align="alignment" prop="stnm" /> |
|
<el-table-column label="时间" :align="alignment" width="180"> |
|
<template #default="scope"> |
|
<span>{{ parseTime(scope.row.tm) }}</span> |
|
</template> |
|
</el-table-column> |
|
<el-table-column label="整编信息" width="200" :align="alignment" prop="comment" /> |
|
<el-table-column label="数据类型" :align="alignment" prop="type"> |
|
<template #default="scope"> |
|
<div v-for="item in types"> |
|
<span v-if="item.value === scope.row.type">{{item.label}}</span> |
|
</div> |
|
</template> |
|
</el-table-column> |
|
<el-table-column label="数值" :align="alignment" prop="value" /> |
|
<el-table-column label="状态" :align="alignment" prop="isDeal"> |
|
<template #default="scope"> |
|
<span v-if="scope.row.isDeal != 'y'" class="red">待确认</span> |
|
<span v-if="scope.row.isDeal == 'y'" class="green">已确认</span> |
|
</template> |
|
</el-table-column> |
|
<el-table-column label="操作" :align="alignment" class-name="small-padding fixed-width" width="120"> |
|
<template #default="scope"> |
|
<el-button type="text" icon="View" @click="handleShow(scope.row)">详情</el-button> |
|
<el-button v-if="scope.row.isDeal !== 'y'" type="text" icon="Check" @click="handleUpdate(scope.row)">确认</el-button> |
|
</template> |
|
</el-table-column> |
|
</el-table> |
|
</el-dialog> |
|
</div> |
|
</template> |
|
<script setup> |
|
import dayjs from 'dayjs' |
|
import { |
|
ref, |
|
reactive, |
|
onMounted, |
|
} from 'vue' |
|
|
|
const { |
|
proxy |
|
} = getCurrentInstance() |
|
// const { } = proxy.useDict('') |
|
const alignment = 'center' |
|
const showSearch = ref(true) |
|
const queryParams = reactive({ |
|
page: 1, |
|
limit: 10, |
|
stnmId: "", |
|
pType: "", |
|
startTime: dayjs().subtract(1, 'day').format('YYYY-MM-DD'), |
|
endTime: dayjs().format('YYYY-MM-DD'), |
|
isDeal: 'n', |
|
type: 'yc_pd_rain', |
|
}) |
|
const loading = ref(false) |
|
const total = ref(0) |
|
const dataList = ref([]) |
|
const getList = async () => { |
|
loading.value = true; |
|
try { |
|
const res = await proxy.axiosGet('/zb/message/infoList', queryParams) |
|
if (res.code == 200) { |
|
dataList.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) |
|
console.log(ids.value, '===') |
|
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 = () => { |
|
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('/basic/warnlevel/' + id); |
|
if (res.code === 200) { |
|
Object.assign(form, res.data); |
|
open.value = true; |
|
title.value = "修改警戒水位信息"; |
|
} |
|
} catch (error) { |
|
console.log(error) |
|
} |
|
} |
|
/** 删除按钮操作 */ |
|
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/warnlevel/' + stnmIds); |
|
if (res.code === 200) { |
|
proxy.$modal.msgSuccess("删除成功"); |
|
getList(); |
|
} |
|
}) |
|
} |
|
/** 导出按钮操作 */ |
|
const handleExport = async () => { |
|
var p = { |
|
pageNum: 1, |
|
pageSize: 9999, |
|
stnm: queryParams.stnm |
|
} |
|
var res = await proxy.axiosGet('/basic/warnlevel/list', p); |
|
if (res.code === 200) { |
|
var table = []; |
|
table.push({ |
|
A: "站点编码", |
|
B: "站点名称", |
|
C: "开始日期", |
|
D: "结束日期", |
|
E: "警戒水位值" |
|
}); |
|
res.rows.forEach(d => { |
|
var row = { |
|
A: d.staid, |
|
B: d.stnm, |
|
C: d.startTime, |
|
D: d.endTime, |
|
E: d.value |
|
}; |
|
table.push(row); |
|
}); |
|
var header = ["A", "B", "C", "D", "E"]; |
|
var 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, { |
|
tm: null, |
|
stnmId: null, |
|
correctionValue: 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/warnlevel', form); |
|
if (res.code === 200) { |
|
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/warnlevel', form); |
|
if (res.code === 200) { |
|
proxy.$modal.msgSuccess("修改成功"); |
|
open.value = false; |
|
getList(); |
|
btnLoading.value = false |
|
} |
|
} catch (error) { |
|
btnLoading.value = false |
|
} |
|
} |
|
|
|
|
|
// 获取归属地区下拉框数据 |
|
const stcdAreaOption = ref([]) |
|
const getDivision = async () => { |
|
try { |
|
const res = await proxy.axiosGet('/basic/info/getDivision') |
|
stcdAreaOption.value = res.data; |
|
} catch (error) { |
|
|
|
} |
|
} |
|
onMounted(() => { |
|
getList() |
|
getStnmandStnmId() |
|
// getDivision() |
|
}) |
|
const types = ref([ |
|
{ |
|
value: "yc_pd_rain", |
|
label: "雨情" |
|
}, |
|
{ |
|
value: "yc_pd_rsvr", |
|
label: "水库" |
|
}, |
|
{ |
|
value: "yc_pd_river", |
|
label: "河道" |
|
}, |
|
{ |
|
value: "yc_pd_q_qflow", |
|
label: "流量" |
|
}, |
|
{ |
|
value: "yc_pd_tide", |
|
label: "潮位" |
|
}, |
|
]) |
|
</script> |