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
73b536bb9f
commit
92e5113f63
3 changed files with 728 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
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 708
      src/components/ZhengBian/index.vue
  2. 10
      src/views/zhengbian/rain/index.vue
  3. 10
      src/views/zhengbian/rsvr/index.vue

708
src/components/ZhengBian/index.vue
Unescape View File

@ -0,0 +1,708 @@
<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="站点">
<ESelectSingle ref="eSelectSingle" :type="'multiple'" :stationType="stationType" :defaultProps="defaultProps" :requestPrefix="requestPrefix" @stationChange="handleStationChange" @loadingChange="handleStationLoading" />
<!-- <el-cascader v-model="defaultOption" placeholder="请选择站点" :options="selectOptions" style="width: 250px;" filterable clearable @change='changeCascader'></el-cascader> -->
</el-form-item>
<el-form-item label="开始时间">
<el-date-picker v-model="queryParams.startTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD HH:mm:ss" placeholder="选择开始时间" :disabled-date="disabledStartDate">
</el-date-picker>
</el-form-item>
<el-form-item label="结束时间">
<el-date-picker v-model="queryParams.endTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="选择结束时间" :disabled-date="disabledEndDate">
</el-date-picker>
</el-form-item>
<el-form-item>
<el-checkbox v-model="queryParams.xindao" @change='handleQuery' :true-label="1" :false-label="0">遥测数据</el-checkbox>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="Search" @click="handleQuery">查询</el-button>
<el-switch class="ml20" v-model="staticType" @change='changeStaticType' size="large" inline-prompt style="--el-switch-on-color: #13ce66; --el-switch-off-color: #1890FF" active-text="逐日显示" active-value="1" inactive-value="0" inactive-text="逐时显示" />
</el-form-item>
<br />
<el-form-item label="对比站点">
<el-select-v2 collapse-tags multiple filterable clearable v-model="compareStation" @change="changeCompareStnmIds" :options="stationOptions" :props="defaultProps" placeholder="请选择对比测站名称" style="width: 360px" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="compareQuery" icon="Search">对比查询</el-button>
<el-button type="success" plain icon="Edit" @click="updateData">数据修改</el-button>
</el-form-item>
</el-form>
</el-card>
<splitpanes v-loading="fullscreenLoading" element-loading-text="正在加载页面......" :horizontal="device === 'mobile'" class="el-card-p card-shadow carder-border mt10 pad10 default-theme container-box" :push-other-panes="false">
<pane :size="firstSize" :min-size="SPLITPANES_CONFIG.MIN_SIZE" max-size="40" ref="firstPane" class="mr10">
<el-collapse v-model="activeName" accordion @change="handleChangeCollapse">
<el-collapse-item title="预处理数据" name="1">
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button type="warning" plain icon="Download" @click="yclExport">导出 </el-button>
</el-col>
<el-col :span="1.5">
<el-button type="success" plain icon="RefreshRight" @click="yclUpdate"> 整编 </el-button>
</el-col>
</el-row>
<div class="pad5" style="font-size: 12px;color:#ccc">点击数值行修改数据</div>
<vxe-grid ref="gridRef1" v-bind="gridOptions1"></vxe-grid>
</el-collapse-item>
<el-collapse-item :title="stationType==='A'?'小时数据':'摘录数据'" name="2">
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button type="warning" plain icon="Download" @click="hourExport">导出 </el-button>
</el-col>
</el-row>
<vxe-grid v-bind="gridOptions2"></vxe-grid>
</el-collapse-item>
<el-collapse-item title="遥测数据" name="3">
<vxe-grid v-bind="gridOptions3"></vxe-grid>
</el-collapse-item>
</el-collapse>
</pane>
<pane :size="100 - firstSize">
<div v-table-height='{bottom:0}' style="width:100%;">
<TimeBarChart v-loading="echartsLoading" :timeType="timeType" :legendData='legendData' :xAxisData="xAxisData" :seriesData="seriesData" :textTitle="textTitle" :unit="unit" :echartType="echartType" />
</div>
</pane>
</splitpanes>
<!-- :rules="rules" -->
<el-dialog class="custom-dialog" title="数据修改" v-model="open" width="500px" append-to-body>
<el-form ref="formRef" :model="form" label-width="150">
<el-form-item label="修改方式" prop="updateType">
<el-select v-model="form.updateType" placeholder="请选择修改方式">
<el-option v-for="dict in update_type_options" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
</el-select>
</el-form-item>
<el-form-item label="开始时间" prop="startTime" v-if="form.updateType!='2'&&form.updateType!=null">
<el-date-picker v-model="form.startTime" type="datetime" placeholder="选择开始时间" value-format="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD HH:mm:ss">
</el-date-picker>
</el-form-item>
<el-form-item label="结束时间" prop="endTime" v-if="form.updateType!='2'&&form.updateType!=null">
<el-date-picker v-model="form.endTime" type="datetime" placeholder="选择结束时间" value-format="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD HH:mm:ss">
</el-date-picker>
</el-form-item>
<el-form-item label="替换值" prop="value1" v-if="form.updateType=='1'">
<el-input v-model="form.value1" placeholder="请输入替换值" style="width:220px" />
</el-form-item>
<div style="width:80%;margin: 0 auto;" v-if="form.updateType=='2'">
<el-upload class="upload-demo" drag :headers="headers" :action='uploadUrl' :on-success="handleFileSuccess" accept=".xls, .xlsx" multiple>
<el-icon class="el-icon--upload"><upload-filled /></el-icon>
<div class="el-upload__text">
将文件拖到此处，或<em>点击上传</em>
</div>
</el-upload>
</div>
</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 dayjs from 'dayjs';
import {
Splitpanes,
Pane
} from 'splitpanes'
import 'splitpanes/dist/splitpanes.css'
import TimeBarChart from '@/components/ChartsTimeBar/index.vue'
import ESelectSingle from '@/components/ESelectSingle/index.vue'
import { getToken } from "@/utils/auth";
import useAppStore from '@/store/modules/app'
const device = computed(() => useAppStore().device);
const props = defineProps({
stationType: {
type: String,
default: 'A'
},
requestPrefix: {
type: String,
default: '/ycraindata'
},
fixed: {
type: Number,
default: 1
}
})
const {
proxy
} = getCurrentInstance()
// const { update_type_options } = proxy.useDict("update_type_options")
// 将 update_type_options 改为计算属性
const update_type_options = computed(() => {
let options = [
{
value: '0',
label: '对比站点替换'
},
{
value: '1',
label: '手动替换'
},
{
value: '2',
label: 'excel导入'
},
{
value: '3',
label: '副设备数据替换'
},
{
value: '5',
label: '重新整编'
}
];
// 只有当 requestPrefix 不是 '/ycraindata' 时才添加直线插补选项
if (props.requestPrefix !== '/ycraindata') {
options.splice(4, 0, {
value: '4',
label: '直线插补'
});
}
return options;
});
const textTitle = computed(() => {
switch (props.stationType) {
case 'A':
return '雨量过程线';
case 'B':
return '水位过程线';
case 'C':
return '水位过程线';
case 'D':
return '潮位过程线';
case 'E':
return '流量过程线';
}
});
const unit = computed(() => {
switch (props.stationType) {
case 'A':
return 'mm';
case 'B':
return 'm';
case 'C':
return 'm';
case 'D':
return 'm';
case 'E':
return 'm³/s';
}
});
const echartType = computed(() => {
switch (props.stationType) {
case 'A':
return 'bar';
case 'B':
return 'line';
case 'C':
return 'line';
case 'D':
return 'line';
case 'E':
return 'line';
}
});
const defaultProps = {
label: 'name',
value: 'stnmId',
}
const staticType = ref('0')
const queryParams = reactive({
startTime: dayjs().subtract(7, 'day').format('YYYY-MM-DD 08:00:00'),
endTime: dayjs().format('YYYY-MM-DD 08:00:00'),
xindao: 1,
stnm: null,
stnmId: null,
stnmIds: null,
dataType: staticType.value,
chartType: echartType.value
});
const timeType = computed(() => {
return staticType.value == '0' ? 'hour' : "day"
})
// 禁用开始时间选择器中大于当前时间和结束时间的日期，以及与结束时间间隔超过15天的日期
const disabledStartDate = (time) => {
const endTime = queryParams.endTime ? dayjs(queryParams.endTime) : null;
const maxStartTime = endTime ? endTime.subtract(15, 'day') : null;
return dayjs(time).isAfter(dayjs()) || // 不能选择未来时间
(endTime && dayjs(time).isAfter(endTime)) // 与结束时间间隔不能超过15天
};
// 禁用结束时间选择器中大于当前时间和小于开始时间的日期，以及与开始时间间隔超过15天的日期
const disabledEndDate = (time) => {
const startTime = queryParams.startTime ? dayjs(queryParams.startTime) : null;
const maxEndTime = startTime ? startTime.add(15, 'day') : null;
return dayjs(time).isAfter(dayjs()) || // 不能选择未来时间
(startTime && dayjs(time).isBefore(startTime)) || // 不能早于开始时间
(startTime && dayjs(time).isAfter(maxEndTime)); // 与开始时间间隔不能超过15天
};
// 获取站点级联选择器数据
const selectOptions = ref([]);
const selectOptions2 = ref([]);
const defaultOption = ref([])
const defaultOption2 = ref([])
const fullscreenLoading = ref(false)
let requestPrefix = '/basic/stype/getNewTreeStationType/'
const eSelectSingle = ref(null)
const handleStationLoading = (loadingState) => {
fullscreenLoading.value = loadingState;
}
const stationOptions = ref([])
let uploadUrl = ref(null)
// 新增处理站点变化的函数:stnmId:是当前选择的站点ID,options:是站点选择器的options,stnm:是当前选择的站点名称
const handleStationChange = async (stnmId, options, stnm) => {
queryParams.stnmId = stnmId
queryParams.stnm = stnm
queryParams.stnmIds = stnmId
const data = options.filter(item => item.stnmId != stnmId)
// const data = options
stationOptions.value = data
if (stnmId == undefined) {
proxy.$modal.msgWarning("请选择站点后查询");
return
} else {
uploadUrl = `${import.meta.env.VUE_APP_BASE_API}${props.requestPrefix}/updatedatabyexcel?stnmId=${queryParams.stnmId}&stationType=${props.stationType}&ycMethod=2`
try {
await Promise.all([
drawTable1(),
drawTable2(),
drawTable3(),
getEchartsData()
]);
} catch (error) {
console.error('请求执行出错:', error);
}
}
}
const getSingleStation = async () => {
fullscreenLoading.value = true
// 省水文：/basic/stype/getTreeStation2New/
// 建德：/basic/stype/getTreeStation/
// 赣县：/basic/stype/getNewTreeStationType/
try {
let url = '/basic/stype/getTreeStation/'
let res = await proxy.axiosGet(url + props.stationType);
if (res.code === 0) {
selectOptions.value = res.data;
defaultOption.value = res.defaultOption
queryParams.stnmId = defaultOption.value.length > 0 ? parseInt(defaultOption.value[2]) : null
queryParams.stnmIds = queryParams.stnmId
await Promise.all([
drawTable1(),
drawTable2(),
drawTable3(),
getEchartsData()
]);
}
} catch (error) {
console.error('请求执行出错:', error);
} finally {
fullscreenLoading.value = false
}
}
// 改变站点
const changeCascader = (val) => {
defaultOption.value = val
queryParams.stnmId = defaultOption.value.length > 0 ? parseInt(defaultOption.value[2]) : null
queryParams.stnmIds = queryParams.stnmId
handleQuery()
}
const firstSize = ref(proxy.SPLITPANES_CONFIG.DEFAULT_SIZE)
const activeName = ref('1')
const tableData1 = ref([])
const tableData2 = ref([])
const tableData3 = ref([])
// 折叠面板事件
const handleChangeCollapse = (val) => { }
// 基础共享配置
const baseGridOptions = {
border: true,
loading: false,
showOverflow: false,
height: 500,
columnConfig: {
resizable: true
},
virtualYConfig: {
enabled: true,
gt: 0
},
rowStyle({ rowIndex, row }) {
if (row.status == '30' || row.status == '31') {
return {
color: '#f00'
}
}
},
}
// 在 script setup 中添加以下 watch 或者利用 vxe-grid 的 edit-closed 事件
const handleCellValueChange = ({ row, column }) => {
if (column.field === 'value') {
const index = yclUpdateTime.value.indexOf(row.tm);
if (index > -1) {
// 如果时间已经存在，则更新对应的值
yclUpdateValue.value[index] = row.value;
} else {
// 否则新增一条记录
yclUpdateTime.value.push(row.tm);
yclUpdateValue.value.push(row.value);
}
}
};
// 预处理数据表格配置
const gridOptions1 = reactive({
...baseGridOptions,
editConfig: {
trigger: 'click',
mode: 'row'
},
columns: [{
title: '时间',
field: 'tm',
width: 160,
align: "center"
},
{
title: '数值',
field: 'value',
align: "center",
editRender: { name: 'VxeNumberInput', props: { type: 'float', digits: props.fixed, min: 0 } }
}
],
data: [],
onEditClosed: handleCellValueChange
})
// 获取预处理数据
const drawTable1 = async () => {
gridOptions1.loading = true
try {
let url = props.requestPrefix + '/originaldata'
let res = await proxy.axiosPost2(url, queryParams);
if (res.code === 0) {
let data = res.data;
// for (var i = 0; i < data.length; i++) {
// data[i].value = data[i].value.toFixed(props.fixed)
// }
gridOptions1.data = data
// selectOptions.value = res.data;
}
} catch (error) {
} finally {
gridOptions1.loading = false
}
}
// 小时/摘录数据表格配置
const gridOptions2 = reactive({
...baseGridOptions,
columns: [{
title: '时间',
field: 'tm',
width: 160,
align: "center"
},
{
title: '数值',
field: 'value',
align: "center"
}
],
data: []
})
// 获取小时数居
const drawTable2 = async () => {
gridOptions2.loading = true
try {
let url = props.requestPrefix + '/countdata'
let res = await proxy.axiosPost2(url, queryParams);
if (res.code === 0) {
let data = res.data;
gridOptions2.data = data
}
gridOptions2.loading = false
} catch (error) {
gridOptions2.loading = false
}
}
// 遥测数据表格配置
const gridOptions3 = reactive({
...baseGridOptions,
columns: [],
data: []
})
// 获取遥测数居
const drawTable3 = async () => {
gridOptions3.loading = true
try {
let url = props.requestPrefix + '/xindaodaydata'
let res = await proxy.axiosPost2(url, queryParams);
if (res.code === 0) {
let data = res.data;
let header = data[0];
let tableColumn = []
tableColumn.push({
field: 'tm',
title: '时间',
width: 160,
align: "center"
});
for (let k in header) {
if (k != 'tm' && k != 'avg') {
tableColumn.push({
field: k,
title: k,
// width: 100,
align: "center"
});
}
}
gridOptions3.columns = tableColumn;
gridOptions3.data = data
}
gridOptions3.loading = false
} catch (error) {
gridOptions3.loading = false
}
}
// 获取echarts数据
const legendData = ref([])
const xAxisData = ref([])
const seriesData = ref([])
const echartsLoading = ref(false)
const getEchartsData = async () => {
echartsLoading.value = true
let baseUrl = '/chartdata'
if (staticType.value == '1' && props.stationType != 'A') {
baseUrl = "/chartdatabyday";
}
try {
let url = props.requestPrefix + baseUrl
let res = await proxy.axiosPost2(url, queryParams);
if (res.code === 0) {
legendData.value = res.data.legend
// 提取每个series中data的第一个元素并格式化时间
if (res.data.series && res.data.series.length > 0) {
// 假设第一个series的data包含完整的时间点
xAxisData.value = res.data.series[0].data.map(item => {
// 如果item是对象且包含时间字段
if (typeof item === 'object' && item !== null) {
// 假设时间字段可能是tm, time, or the first element
const timeValue = item.tm || item.time || item[0];
return dayjs(timeValue).format('YYYY-MM-DD HH:mm');
} else {
// 如果item直接就是时间值
return dayjs(item).format('YYYY-MM-DD HH:mm');
}
});
}
seriesData.value = res.data.series
}
} catch (error) {
console.log(error)
} finally {
echartsLoading.value = false
}
};
// 预处理数据导出
const yclExport = () => {
let url = `${props.requestPrefix}/exportoriginaldata?stnmId=${queryParams.stnmId}&startTime=${queryParams.startTime}&endTime=${queryParams.endTime}`
proxy.download(url, {}, `${queryParams.stnm}${textTitle.value}原始数据.xls`);
}
let yclUpdateTime = ref([])
let yclUpdateValue = ref([])
// 预处理数据整编
const yclUpdate = async () => {
if (yclUpdateTime.value.length == 0) {
proxy.$modal.msg("请修改后再进行整编");
return;
}
let url = props.requestPrefix + "/updateycldata";
let params = queryParams;
params.times = yclUpdateTime.value.join(",");
params.values = yclUpdateValue.value.join(",");
fullscreenLoading.value = true;
try {
let res = await proxy.axiosPost2(url, params);
if (res.code == 0) {
proxy.$modal.msgSuccess("执行成功");
yclUpdateTime.value = [];
yclUpdateValue.value = [];
handleQuery()
}
} catch (error) {
} finally {
fullscreenLoading.value = false;
}
}
// 小时数居导出
const hourExport = () => {
let exName = staticType.value == 0 ? "摘录数据(时).xls" : "摘录数据(日).xls"
let url = `${props.requestPrefix}/exportcountdata?stnmId=${queryParams.stnmId}&startTime=${queryParams.startTime}&endTime=${queryParams.endTime}`
proxy.download(url, {}, `${queryParams.stnm}${textTitle.value}${exName}`);
}
// 查询
const handleQuery = async () => {
try {
await Promise.all([
drawTable1(),
drawTable2(),
drawTable3(),
getEchartsData()
]);
} catch (error) {
console.error('请求执行出错:', error);
}
}
// 逐日查询/逐时查询
const changeStaticType = (val) => {
staticType.value = val
queryParams.dataType = val
handleQuery()
}
// 对比站点改变
let compareStation = ref([])
const changeCompareStnmIds = (val) => {
compareStation.value = val
let list = [queryParams.stnmId, ...val];
let str = list.join(',')
queryParams.stnmIds = str
}
// 对比查询
const compareQuery = () => {
handleQuery()
}
let open = ref(false)
const form = reactive({
updateType: null,
startTime: dayjs().subtract(7, 'day').format('YYYY-MM-DD 08:00:00'),
endTime: dayjs().format('YYYY-MM-DD 08:00:00'),
});
// 数据修改
const updateData = () => {
open.value = true
}
/**************************************************** 数据修改弹窗 ******************************************************/
let formRef = ref(null)
// 取消按钮
const cancel = () => {
open.value = false;
reset();
}
const reset = () => {
Object.assign(form, {});
proxy.resetForm("formRef");
}
let upDateUrl = `${import.meta.env.VUE_APP_BASE_API}${props.requestPrefix}/updatedatabyexcel?stnmId=${queryParams.stnmId}&stationType=${props.stationType}&ycMethod=2`
let headers = reactive({
Authorization: "Bearer " + getToken()
})
/** 文件上传成功处理 */
const handleFileSuccess = (response, file, fileList) => {
open.value = false;
proxy.$refs["uploadRef"].handleRemove(file);
proxy.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true });
};
/** 提交按钮 */
const submitForm = async (formEl) => {
if (!formEl) return
await formEl.validate(async (valid, fields) => {
if (valid) {
try {
let params = {
stnmId: queryParams.stnmId,
startTime: form.startTime,
endTime: form.endTime,
ycMethod: form.updateType,
}
if (form.updateType == 0) {
let url = props.requestPrefix + "/updatedatabyother";
if (compareStation.value.length == 0) {
proxy.$modal.msg("请选择1个对比站点进行替换");
} else {
params.compareStnmId = compareStation.value[0]
dataModification(url, params)
}
} else if (form.updateType == 1) {
let url = props.requestPrefix + "/updatedatabyone";
params.value = form.value1
dataModification(url, params)
} else if (form.updateType == 2) {
} else if (form.updateType == 3) {
let url = props.requestPrefix + "/updatebysecond";
dataModification(url, params)
} else if (form.updateType == 4) {
let url = props.requestPrefix + "/updatebycb";
dataModification(url, params)
} else if (form.updateType == 5) {
let url = props.requestPrefix + "/recal";
dataModification(url, params)
}
} catch (error) { }
}
})
}
const dataModification = async (url, params) => {
let res = await proxy.axiosPost2(url, params);
if (res.code == 0) {
proxy.$modal.msgSuccess("执行成功");
open.value = false
handleQuery()
}
}
onMounted(() => {
// getSingleStation();
})
</script>
<style lang="scss" scoped>
:deep(.el-collapse) {
border-top: none !important;
}
:deep(.el-collapse-item__content) {
padding-bottom: 0 !important;
}
</style>

10
src/views/zhengbian/rain/index.vue
Unescape View File

@ -0,0 +1,10 @@
<template>
<zheng-bian :stationType="stationType" :fixed="fixed" :requestPrefix="requestPrefix"></zheng-bian>
</template>
<script setup>
import ZhengBian from '@/components/ZhengBian/index.vue'
const stationType = ref('A')
const fixed = ref(1)
const requestPrefix = ref('/ycraindata')
</script>

10
src/views/zhengbian/rsvr/index.vue
Unescape View File

@ -0,0 +1,10 @@
<template>
<zheng-bian :stationType="stationType" :fixed="fixed" :requestPrefix="requestPrefix"></zheng-bian>
</template>
<script setup>
import ZhengBian from '@/components/ZhengBian/index.vue'
const stationType = ref('C')
const fixed = ref(2)
const requestPrefix = ref('/ycrsvrdata')
</script>
Write Preview
Loading…
Cancel
Save