waibao2
6 days ago
58 changed files with 5171 additions and 282 deletions
@ -0,0 +1,744 @@
@@ -0,0 +1,744 @@
|
||||
<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> |
||||
<el-form-item v-if="staticType==1"> |
||||
<div style="font-size: 12px;color:#ccc"> |
||||
逐日天表统计的是当日早八点到次日早八点 |
||||
</div> |
||||
</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-if="stationType !== 'A' && staticType == '1'" v-loading="echartsLoading" :timeType="timeType" :legendData='legendData' :xAxisData="xAxisData" :seriesData="seriesData" :textTitle="textTitle" :unit="unit" :baseOptionData='baseOptionData' :key="`${staticType}-${props.stationType}`" :fixed="fixed" /> |
||||
<DataZoomChart v-else v-loading="echartsLoading" :timeType="timeType" :legendData='legendData' :xAxisData="xAxisData" :seriesData="seriesData" :textTitle="textTitle" :unit="unit" :echartType="echartType" :key="`${staticType}-${props.stationType}`" /> |
||||
</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> |
||||
<template #tip> |
||||
<div class="el-upload__tip "> |
||||
模板就是预处理数据表格导出的文件。 |
||||
</div> |
||||
</template> |
||||
</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 DataZoomChart from '@/components/ChartsDataZoom/index.vue' |
||||
import TimeBarChart from '@/components/ChartsTimeLine/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; |
||||
data.forEach(item => { |
||||
item.value = item.value.toFixed(props.fixed) |
||||
}); |
||||
gridOptions1.data = 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 baseOptionData = ref([]) |
||||
const echartsLoading = ref(false) |
||||
const getEchartsData = async () => { |
||||
legendData.value = [] |
||||
seriesData.value = [] |
||||
baseOptionData.value = [] |
||||
xAxisData.value = [] |
||||
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 |
||||
|
||||
if (props.stationType !== 'A' && staticType.value == '1') { |
||||
|
||||
seriesData.value = res.data.data |
||||
baseOptionData.value = res.data.baseOptionData |
||||
xAxisData.value = ['08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00'] |
||||
console.log(props.stationType, staticType.value,) |
||||
console.log('seriesData.value', seriesData.value) |
||||
console.log('baseOptionData.value', baseOptionData.value) |
||||
console.log('xAxisData.value', xAxisData.value) |
||||
} else { |
||||
// 提取每个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 |
||||
} |
||||
}; |
||||
|
||||
watch(staticType.value, (newVal, oldVal) => { |
||||
if (oldVal !== undefined) { // 避免首次初始化时触发 |
||||
// 更新查询参数中的 dataType |
||||
queryParams.dataType = newVal |
||||
|
||||
// 重新获取图表数据 |
||||
getEchartsData() |
||||
} |
||||
}) |
||||
// 预处理数据导出 |
||||
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> |
||||
@ -0,0 +1,800 @@
@@ -0,0 +1,800 @@
|
||||
<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="测站类型" v-if='showStationTypeSelector'> |
||||
<el-select v-model="queryParams.isState" placeholder="请选择测站类型" style="width:160px" @change="changeIsState"> |
||||
<el-option v-for="item in mainTypes" :key="item.value" :label="item.label" :value="item.value"> |
||||
</el-option> |
||||
</el-select> |
||||
</el-form-item> |
||||
<el-form-item label="站点"> |
||||
<el-tree-select filterable :props="{ value: 'stnmId', label: 'name' }" v-model="queryParams.stnmId" style="width: 240px" :data="treeSelectOptions" node-key="id" /> |
||||
</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> |
||||
<el-form-item v-if="staticType==1"> |
||||
<div style="font-size: 12px;color:#ccc"> |
||||
逐日天表统计的是当日早八点到次日早八点 |
||||
</div> |
||||
</el-form-item> |
||||
|
||||
<br /> |
||||
<el-form-item label="对比站点"> |
||||
<el-tree-select filterable multiple show-checkbox collapse-tags :props="{ value: 'id', label: 'name' }" @change="changeCompareStnmIds" v-model="compareStation" style="width: 240px" :data="compareTreeSelectOptions" node-key="id" placeholder="请选择对比测站名称" /> |
||||
<!-- <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-if="stationType !== 'A' && staticType == '1'" v-loading="echartsLoading" :timeType="timeType" :legendData='legendData' :xAxisData="xAxisData" :seriesData="seriesData" :textTitle="textTitle" :unit="unit" :baseOptionData='baseOptionData' :key="`${staticType}-${props.stationType}`" :fixed="fixed" /> |
||||
<DataZoomChart v-else v-loading="echartsLoading" :timeType="timeType" :legendData='legendData' :xAxisData="xAxisData" :seriesData="seriesData" :textTitle="textTitle" :unit="unit" :echartType="echartType" :key="`${staticType}-${props.stationType}`" /> |
||||
</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> |
||||
<template #tip> |
||||
<div class="el-upload__tip "> |
||||
模板就是预处理数据表格导出的文件。 |
||||
</div> |
||||
</template> |
||||
</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 DataZoomChart from '@/components/ChartsDataZoom/index.vue' |
||||
import TimeBarChart from '@/components/ChartsTimeLine/index.vue' |
||||
import ESelectSingle from '@/components/ESelectSingle/index.vue' |
||||
import { getToken } from "@/utils/auth"; |
||||
import useAppStore from '@/store/modules/app' |
||||
import { getStationConfig } from '@/config/stationConfig' |
||||
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 currentStationConfig = computed(() => { |
||||
return getStationConfig(import.meta.env.VITE_APP_BASE_API); |
||||
}); |
||||
|
||||
// 是否显示测站类型选择器 |
||||
const showStationTypeSelector = computed(() => { |
||||
return currentStationConfig.value.showStationType; |
||||
}); |
||||
|
||||
// 测站类型选项 |
||||
const mainTypes = computed(() => { |
||||
return currentStationConfig.value.stationTypes; |
||||
}); |
||||
|
||||
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'), |
||||
isState: '0', // 余姚站才有测站类型的区分 |
||||
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 changeIsState = (val) => { |
||||
queryParams.isState = val |
||||
getTreeStation() |
||||
} |
||||
|
||||
const treeSelectOptions = ref([]) |
||||
const getTreeStation = async () => { |
||||
fullscreenLoading.value = true; |
||||
try { |
||||
let res = await proxy.axiosGet('basic/stype/getNewTreeStationType/', { 'type': proxy.stationType, 'isState': queryParams.isState }); |
||||
if (res.code == 0) { |
||||
treeSelectOptions.value = res.data |
||||
// 设置默认值为第一个叶子节点的stnmId |
||||
if (treeSelectOptions.value.length > 0) { |
||||
const firstLeafNode = findFirstLeafNode(treeSelectOptions.value); |
||||
if (firstLeafNode) { |
||||
queryParams.stnmId = firstLeafNode.stnmId; |
||||
queryParams.stnmIds = queryParams.stnmId; |
||||
await Promise.all([ |
||||
drawTable1(), |
||||
drawTable2(), |
||||
drawTable3(), |
||||
getEchartsData() |
||||
|
||||
]); |
||||
} |
||||
} |
||||
} |
||||
} catch (error) { |
||||
|
||||
} finally { |
||||
fullscreenLoading.value = false |
||||
} |
||||
} |
||||
// 查找树结构中的第一个叶子节点 |
||||
const findFirstLeafNode = (nodes) => { |
||||
for (let node of nodes) { |
||||
// 如果节点有子节点，则递归查找 |
||||
if (node.children && node.children.length > 0) { |
||||
const leaf = findFirstLeafNode(node.children); |
||||
if (leaf) { |
||||
return leaf; |
||||
} |
||||
} |
||||
// 如果节点没有子节点，则为叶子节点 |
||||
else if (node.stnmId) { |
||||
return node; |
||||
} |
||||
} |
||||
return null; |
||||
} |
||||
// 对比测站下拉框数据 |
||||
const compareTreeSelectOptions = ref([]) |
||||
const getCompareTreeStation = async () => { |
||||
try { |
||||
let res = await proxy.axiosGet('/basic/stype/getTreeStation/' + proxy.stationType); |
||||
if (res.code == 0) { |
||||
compareTreeSelectOptions.value = res.data |
||||
} |
||||
} catch (error) { |
||||
|
||||
} |
||||
} |
||||
|
||||
|
||||
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 baseOptionData = ref([]) |
||||
const echartsLoading = ref(false) |
||||
const getEchartsData = async () => { |
||||
legendData.value = [] |
||||
seriesData.value = [] |
||||
baseOptionData.value = [] |
||||
xAxisData.value = [] |
||||
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 |
||||
|
||||
if (props.stationType !== 'A' && staticType.value == '1') { |
||||
|
||||
seriesData.value = res.data.data |
||||
baseOptionData.value = res.data.baseOptionData |
||||
xAxisData.value = ['08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00'] |
||||
console.log(props.stationType, staticType.value,) |
||||
console.log('seriesData.value', seriesData.value) |
||||
console.log('baseOptionData.value', baseOptionData.value) |
||||
console.log('xAxisData.value', xAxisData.value) |
||||
} else { |
||||
// 提取每个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 |
||||
} |
||||
}; |
||||
|
||||
watch(staticType.value, (newVal, oldVal) => { |
||||
if (oldVal !== undefined) { // 避免首次初始化时触发 |
||||
// 更新查询参数中的 dataType |
||||
queryParams.dataType = newVal |
||||
|
||||
// 重新获取图表数据 |
||||
getEchartsData() |
||||
} |
||||
}) |
||||
// 预处理数据导出 |
||||
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) => { |
||||
console.log(val, '======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(() => { |
||||
getTreeStation() |
||||
getCompareTreeStation() |
||||
}) |
||||
</script> |
||||
<style lang="scss" scoped> |
||||
:deep(.el-collapse) { |
||||
border-top: none !important; |
||||
} |
||||
|
||||
:deep(.el-collapse-item__content) { |
||||
padding-bottom: 0 !important; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,74 @@
@@ -0,0 +1,74 @@
|
||||
// src/config/stationConfig.js
|
||||
|
||||
export const STATION_CONFIGS = { |
||||
// 余姚配置
|
||||
yuyao: { |
||||
showStationType: true,// 是否显示站点类型（在线整编模块）
|
||||
stationTypes: [ // 站点类型列表
|
||||
{ label: '国家站', value: '1' }, |
||||
{ label: '遥测站', value: '0' } |
||||
], |
||||
showDeviceStcd: true,// 是否显示设备编码（遥测数据-设备数据）
|
||||
}, |
||||
|
||||
// 建德配置
|
||||
jiande: { |
||||
showStationType: false, |
||||
stationTypes: [], |
||||
showDeviceStcd: true,// 是否显示设备编码（遥测数据-设备数据）
|
||||
}, |
||||
|
||||
// 青田配置
|
||||
qingtian: { |
||||
showStationType: false, |
||||
stationTypes: [], |
||||
showDeviceStcd: true,// 是否显示设备编码（遥测数据-设备数据）
|
||||
}, |
||||
// 赣县配置
|
||||
ganxian: { |
||||
showStationType: false, |
||||
stationTypes: [], |
||||
showDeviceStcd: true,// 是否显示设备编码（遥测数据-设备数据）
|
||||
} |
||||
}; |
||||
|
||||
/** |
||||
* 根据API地址获取站点配置 |
||||
* @param {string} apiUrl - API基础地址 |
||||
* @returns {Object} 站点配置 |
||||
*/ |
||||
export function getStationConfig(apiUrl) { |
||||
const identifier = getStationIdentifier(apiUrl); |
||||
return STATION_CONFIGS[identifier] || { |
||||
showStationType: false, |
||||
stationTypes: [], |
||||
features: ['basicComparison'] |
||||
}; |
||||
} |
||||
|
||||
/** |
||||
* 根据API地址获取站点标识 |
||||
* @param {string} apiUrl - API基础地址 |
||||
* @returns {string} 站点标识 |
||||
*/ |
||||
export function getStationIdentifier(apiUrl) { |
||||
const url = apiUrl || import.meta.env.VUE_APP_BASE_API || ''; |
||||
|
||||
if (url.includes('yyzb')) { |
||||
return 'yuyao'; |
||||
} else if (url.includes('165')) { |
||||
return 'jiande'; |
||||
} else if (url.includes('165')) { |
||||
return 'qingtian'; |
||||
} else if (url.includes('216')) { |
||||
return 'ganxian'; |
||||
} |
||||
|
||||
// 默认返回主机名作为标识
|
||||
try { |
||||
const urlObj = new URL(url); |
||||
return urlObj.hostname.replace(/\./g, '_'); |
||||
} catch { |
||||
return 'default'; |
||||
} |
||||
} |
||||
@ -0,0 +1,162 @@
@@ -0,0 +1,162 @@
|
||||
<!-- 各站月年降水量对照表<template> --> |
||||
<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="年份"> |
||||
<el-date-picker v-model="queryParams.year" type="year" value-format="YYYY" placeholder="选择年" :clearable="false"> |
||||
</el-date-picker> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button> |
||||
<el-button type="warning" icon="Download" @click="handleExport">下载</el-button> |
||||
</el-form-item> |
||||
</el-form> |
||||
</el-card> |
||||
<splitpanes :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="SPLITPANES_CONFIG.MAX_SIZE" ref="firstPane" class="mr10"> |
||||
<e-tree ref="eTreeRef" :stationType="stationType" @stationChange="handleStationChange" @loadingChange="handleStationLoading"></e-tree> |
||||
</pane> |
||||
<pane :size="100 - firstSize" class="pad10" style="height:100%"> |
||||
<div class="main-table-header"> |
||||
<div class="table-title">{{tableTitle}}</div> |
||||
<div class="table-time mb5"> |
||||
<div> |
||||
<span>年份: </span><span id="title1">{{ queryParams.year}}</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<el-table class="report-table" v-table-height="{bottom:100}" v-loading="loading" border :data="tableData" style="width: 100%;" :fit="true" :flexible="true"> |
||||
<el-table-column fixed label="序号" :align="alignment" type="index"> |
||||
</el-table-column> |
||||
<el-table-column fixed prop="c1" label="河名" width="100" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column fixed prop="c2" label="站名" width="100" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column label="月 降 水 量 (mm)" :align="alignment"> |
||||
<el-table-column prop="c3" label="一月" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="c4" label="二月" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="c5" label="三月" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="c6" label="四月" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="c7" label="五月" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="c8" label="六月" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="c9" label="七月" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="c10" label="八月" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="c11" label="九月" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="c12" label="十月" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="c13" label="十一月" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="c14" label="十二月" :align="alignment"> |
||||
</el-table-column> |
||||
</el-table-column> |
||||
<el-table-column prop="c15" label="年降水量(mm)" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="c16" label="年降水日数" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column label="一日最大" :align="alignment"> |
||||
<el-table-column prop="c17" :align="alignment"> |
||||
<template #header> |
||||
<div>降水量</div> |
||||
<div>(mm)</div> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="出现日期" :align="alignment"> |
||||
<el-table-column prop="c18" label="月" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="c19" label="日" :align="alignment"> |
||||
</el-table-column> |
||||
</el-table-column> |
||||
</el-table-column> |
||||
<el-table-column label="1-12月" :align="alignment"> |
||||
<el-table-column prop="c20" :align="alignment"> |
||||
<template #header> |
||||
<div>降水量</div> |
||||
<div>(mm)</div> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="c21" label="降水日数" :align="alignment"> |
||||
</el-table-column> |
||||
</el-table-column> |
||||
</el-table> |
||||
</pane> |
||||
</splitpanes> |
||||
</div> |
||||
</template> |
||||
<script setup> |
||||
import dayjs from 'dayjs'; |
||||
import { Splitpanes, Pane } from 'splitpanes' |
||||
import 'splitpanes/dist/splitpanes.css' |
||||
import ETree from '@/components/ETree/index.vue' |
||||
import { ref, reactive, onMounted, computed } from 'vue'; |
||||
import useAppStore from '@/store/modules/app' |
||||
const device = computed(() => useAppStore().device); |
||||
|
||||
const props = defineProps({ |
||||
tableTitle: { |
||||
type: String, |
||||
default: '各站月年降水量对照表' |
||||
}, |
||||
|
||||
}) |
||||
const { proxy } = getCurrentInstance() |
||||
const alignment = 'center' |
||||
const firstSize = ref(proxy.SPLITPANES_CONFIG.DEFAULT_SIZE) |
||||
const stationType = 'A' |
||||
const eTreeRef = ref(null) |
||||
let stnmIdsList = [] |
||||
const handleStationLoading = (loadingState) => { |
||||
loading.value = loadingState; |
||||
} |
||||
// 新增处理站点变化的函数 |
||||
const handleStationChange = (stnmIds) => { |
||||
stnmIdsList = stnmIds |
||||
queryParams.stnmIds = stnmIds.join(',') |
||||
if (stnmIdsList.length == 0) { |
||||
proxy.$modal.msgWarning("请选择站点后查询"); |
||||
return |
||||
} else if (stnmIdsList.length > 50) { |
||||
proxy.$modal.msg("站点最多可选择50个"); |
||||
return |
||||
} else { |
||||
getList() |
||||
} |
||||
} |
||||
|
||||
const loading = ref(false); |
||||
const tableData = ref([]); |
||||
const queryParams = reactive({ |
||||
year: dayjs(new Date()).format('YYYY'), |
||||
stnmIds: '', |
||||
}); |
||||
const getList = async () => { |
||||
loading.value = true; |
||||
try { |
||||
const res = await proxy.axiosGet('/report/gzynjsldzbdata', queryParams) |
||||
if (res.code == 0) { |
||||
tableData.value = res.data |
||||
} |
||||
loading.value = false |
||||
} catch (error) { |
||||
loading.value = false |
||||
} |
||||
} |
||||
// 搜索按钮操作 |
||||
const handleQuery = () => { |
||||
getList() |
||||
} |
||||
</script> |
||||
<style lang="scss" scoped> |
||||
/* :deep(.report-table td.el-table__cell){ |
||||
border-bottom: none !important; |
||||
} */ |
||||
</style> |
||||
@ -0,0 +1,163 @@
@@ -0,0 +1,163 @@
|
||||
<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="年份"> |
||||
<el-date-picker v-model="queryParams.year" type="year" value-format="YYYY" placeholder="选择年" :clearable="false"> |
||||
</el-date-picker> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button> |
||||
<el-button type="warning" icon="Download" @click="handleExport">下载</el-button> |
||||
</el-form-item> |
||||
</el-form> |
||||
</el-card> |
||||
<splitpanes :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="SPLITPANES_CONFIG.MAX_SIZE" ref="firstPane" class="mr10"> |
||||
<e-tree ref="eTreeRef" :stationType="stationType" @stationChange="handleStationChange" @loadingChange="handleStationLoading"></e-tree> |
||||
</pane> |
||||
<pane :size="100 - firstSize" class="pad10"> |
||||
<div class="main-table-header"> |
||||
<div class="table-title">{{tableTitle}}</div> |
||||
<div class="table-time mb5"> |
||||
<div> |
||||
<span>年份: </span><span id="title1">{{ queryParams.year }}</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<el-table class="report-table" v-table-height="{bottom:100}" v-loading="loading" border :data="tableData" style="width: 100%;"> |
||||
<el-table-column fixed label="序号" prop="c0" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column fixed prop="c1" label="河名" width="120" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column fixed prop="c2" label="站名" width="120" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column fixed prop="c3" label="集水面积(k㎡)" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column label="月 平 均 流 量 (m³/s)" :align="alignment"> |
||||
<el-table-column prop="c4" label="一月" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="c5" label="二月" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="c6" label="三月" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="c7" label="四月" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="c8" label="五月" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="c9" label="六月" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="c10" label="七月" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="c11" label="八月" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="c12" label="九月" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="c13" label="十月" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="c14" label="十一月" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="c15" label="十二月" :align="alignment"> |
||||
</el-table-column> |
||||
</el-table-column> |
||||
<el-table-column prop="c16" label="年平均流量(m³/s)" width="100" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="c17" :align="alignment"> |
||||
<template slot="header" slot-scope="scope"> |
||||
年径流量(10<sup>8</sup>m³) |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="c18" label="年径流深度(mm)" width="100" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="c19" :align="alignment"> |
||||
<template slot="header" slot-scope="scope"> |
||||
年径流模数(10<sup>-3</sup>m³/(s·m³)) |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="c20" label="年最大流量(m³/s)" width="100" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column label="发生日期" :align="alignment"> |
||||
<el-table-column prop="c21" label="月" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="c22" label="日" :align="alignment"> |
||||
</el-table-column> |
||||
</el-table-column> |
||||
<el-table-column prop="c23" label="年最小流量(m³/s)" width="100" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column label="发生日期" :align="alignment"> |
||||
<el-table-column prop="c24" label="月" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="c25" label="日" :align="alignment"> |
||||
</el-table-column> |
||||
</el-table-column> |
||||
</el-table> |
||||
</pane> |
||||
</splitpanes> |
||||
|
||||
</div> |
||||
</template> |
||||
<script setup> |
||||
import dayjs from 'dayjs'; |
||||
import { Splitpanes, Pane } from 'splitpanes' |
||||
import 'splitpanes/dist/splitpanes.css' |
||||
import ETree from '@/components/ETree/index.vue' |
||||
import { ref, reactive, onMounted } from 'vue'; |
||||
import useAppStore from '@/store/modules/app' |
||||
const device = computed(() => useAppStore().device); |
||||
|
||||
const props = defineProps({ |
||||
tableTitle: { |
||||
type: String, |
||||
default: '表格标题' |
||||
}, |
||||
|
||||
}) |
||||
const { proxy } = getCurrentInstance() |
||||
const alignment = 'center' |
||||
const firstSize = ref(proxy.SPLITPANES_CONFIG.DEFAULT_SIZE) |
||||
const stationType = 'E' |
||||
const eTreeRef = ref(null) |
||||
let stnmIdsList = [] |
||||
const handleStationLoading = (loadingState) => { |
||||
loading.value = loadingState; |
||||
} |
||||
// 新增处理站点变化的函数 |
||||
const handleStationChange = (stnmIds) => { |
||||
stnmIdsList = stnmIds |
||||
queryParams.stnmIds = stnmIds.join(',') |
||||
if (stnmIdsList.length == 0) { |
||||
proxy.$modal.msgWarning("请选择站点后查询"); |
||||
return |
||||
} else if (stnmIdsList.length > 50) { |
||||
proxy.$modal.msg("站点最多可选择50个"); |
||||
return |
||||
} else { |
||||
getList() |
||||
} |
||||
} |
||||
|
||||
const loading = ref(false); |
||||
const tableData = ref([]); |
||||
const queryParams = reactive({ |
||||
year: dayjs(new Date()).format('YYYY'), |
||||
stnmIds: '', |
||||
}); |
||||
const getList = async () => { |
||||
loading.value = true; |
||||
try { |
||||
const res = await proxy.axiosGet('/report/gzynlldzbdata', queryParams) |
||||
if (res.code == 0) { |
||||
tableData.value = res.data |
||||
} |
||||
loading.value = false |
||||
} catch (error) { |
||||
loading.value = false |
||||
} |
||||
} |
||||
// 搜索按钮操作 |
||||
const handleQuery = () => { |
||||
getList() |
||||
} |
||||
// 下载按钮操作 |
||||
const handleExport = () => { } |
||||
</script> |
||||
@ -0,0 +1,170 @@
@@ -0,0 +1,170 @@
|
||||
<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="类型"> |
||||
<el-select v-model="stationType" placeholder="请选择类型" class="w150" @change="changeStationType"> |
||||
<el-option label="水库" value="C"></el-option> |
||||
<el-option label="河道" value="B"></el-option> |
||||
</el-select> |
||||
</el-form-item> |
||||
<el-form-item label="年份"> |
||||
<el-date-picker v-model="queryParams.year" type="year" value-format="YYYY" placeholder="选择年" :clearable="false"> |
||||
</el-date-picker> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button> |
||||
<el-button type="warning" icon="Download" @click="handleExport">下载</el-button> |
||||
</el-form-item> |
||||
</el-form> |
||||
</el-card> |
||||
<splitpanes :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="SPLITPANES_CONFIG.MAX_SIZE" ref="firstPane" class="mr10"> |
||||
<e-tree ref="eTreeRef" :stationType="stationType" @stationChange="handleStationChange"></e-tree> |
||||
</pane> |
||||
<pane :size="100 - firstSize" class="pad10"> |
||||
<div class="main-table-header"> |
||||
<div class="table-title">{{tableTitle}}</div> |
||||
<div class="table-time mb5"> |
||||
<div> |
||||
<span>年份: </span><span id="title1">{{ queryParams.year }}</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<el-table class="report-table" v-table-height="{bottom:100}" v-loading="loading" :data="tableData" style="width: 100%;"> |
||||
<el-table-column fixed label="序号" prop="c0" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column fixed prop="c1" label="河名" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column fixed prop="c2" label="站名" width="120" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column label="月 平 均 水 位 (mm)" :align="alignment"> |
||||
<el-table-column prop="c3" label="一月" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="c4" label="二月" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="c5" label="三月" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="c6" label="四月" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="c7" label="五月" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="c8" label="六月" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="c9" label="七月" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="c10" label="八月" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="c11" label="九月" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="c12" label="十月" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="c13" label="十一月" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="c14" label="十二月" :align="alignment"> |
||||
</el-table-column> |
||||
</el-table-column> |
||||
<el-table-column prop="c15" label="年平均水位(m)" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="c16" label="年最高水位(m)" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column label="发生日期" :align="alignment"> |
||||
<el-table-column prop="c17" label="月" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="c18" label="日" :align="alignment"> |
||||
</el-table-column> |
||||
</el-table-column> |
||||
<el-table-column prop="c19" label="年最低水位(m)" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column label="发生日期" :align="alignment"> |
||||
<el-table-column prop="c20" label="月" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="c21" label="日" :align="alignment"> |
||||
</el-table-column> |
||||
</el-table-column> |
||||
<el-table-column prop="c22" label="冻结基面与绝对基面高差(m)" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="c23" label="绝对或假定基面名称" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="c24" label="附注" :align="alignment"> |
||||
</el-table-column> |
||||
</el-table> |
||||
</pane> |
||||
</splitpanes> |
||||
|
||||
</div> |
||||
</template> |
||||
<script setup> |
||||
import dayjs from 'dayjs'; |
||||
import { Splitpanes, Pane } from 'splitpanes' |
||||
import 'splitpanes/dist/splitpanes.css' |
||||
import ETree from '@/components/ETree/index.vue' |
||||
import { ref, reactive, onMounted } from 'vue'; |
||||
import useAppStore from '@/store/modules/app' |
||||
const device = computed(() => useAppStore().device); |
||||
|
||||
const props = defineProps({ |
||||
tableTitle: { |
||||
type: String, |
||||
default: '表格标题' |
||||
}, |
||||
|
||||
}) |
||||
const { proxy } = getCurrentInstance() |
||||
const alignment = 'center' |
||||
const firstSize = ref(proxy.SPLITPANES_CONFIG.DEFAULT_SIZE) |
||||
const stationType = ref('C') |
||||
let stnmIdsList = [] |
||||
// 新增处理站点变化的函数 |
||||
const handleStationChange = (stnmIds) => { |
||||
stnmIdsList = stnmIds |
||||
queryParams.stnmIds = stnmIds.join(',') |
||||
if (stnmIdsList.length == 0) { |
||||
proxy.$modal.msgWarning("请选择站点后查询"); |
||||
return |
||||
} else if (stnmIdsList.length > 50) { |
||||
proxy.$modal.msg("站点最多可选择50个"); |
||||
return |
||||
} else { |
||||
loading.value = true; |
||||
getList() |
||||
} |
||||
} |
||||
|
||||
const loading = ref(false); |
||||
const tableData = ref([]); |
||||
const queryParams = reactive({ |
||||
year: dayjs(new Date()).format('YYYY'), |
||||
stnmIds: '', |
||||
}); |
||||
const getList = async () => { |
||||
loading.value = true; |
||||
try { |
||||
const res = await proxy.axiosGet('/report/gzynswdzbdata', queryParams) |
||||
if (res.code == 0) { |
||||
tableData.value = res.data |
||||
} |
||||
loading.value = false |
||||
} catch (error) { |
||||
loading.value = false |
||||
} |
||||
} |
||||
// 搜索按钮操作 |
||||
const handleQuery = () => { |
||||
getList() |
||||
} |
||||
// 改变类型 |
||||
const eTreeRef = ref(null) |
||||
const changeStationType = (val) => { |
||||
stationType.value = val |
||||
nextTick(() => { |
||||
if (eTreeRef.value) { |
||||
eTreeRef.value.getTreeStation(); |
||||
} |
||||
}) |
||||
|
||||
} |
||||
// 下载按钮操作 |
||||
const handleExport = () => { } |
||||
|
||||
</script> |
||||
@ -0,0 +1,154 @@
@@ -0,0 +1,154 @@
|
||||
<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="年份"> |
||||
<el-date-picker v-model="queryParams.year" type="year" value-format="YYYY" placeholder="选择年" :clearable="false"> |
||||
</el-date-picker> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button> |
||||
<el-button type="warning" icon="Download" @click="handleExport">下载</el-button> |
||||
</el-form-item> |
||||
</el-form> |
||||
</el-card> |
||||
<splitpanes :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="SPLITPANES_CONFIG.MAX_SIZE" ref="firstPane" class="mr10"> |
||||
<e-tree ref="eTreeRef" :stationType="stationType" @stationChange="handleStationChange"></e-tree> |
||||
</pane> |
||||
<pane :size="100 - firstSize" class="pad10"> |
||||
<div class="main-table-header"> |
||||
<div class="table-title">{{tableTitle}}</div> |
||||
<div class="table-time mb5"> |
||||
<div> |
||||
<span>年份: </span><span id="title1">{{ queryParams.year }}</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<el-table class="report-table" v-table-height="{bottom:100}" v-loading="loading" :data="tableData" style="width: 100%;"> |
||||
<el-table-column fixed label="序号" prop="c0" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column fixed prop="c1" label="河名" width="120" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column fixed prop="c2" label="站名" width="120" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column label="月 平 均 潮 位 (mm)" :align="alignment"> |
||||
<el-table-column prop="c3" label="一月" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="c4" label="二月" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="c5" label="三月" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="c6" label="四月" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="c7" label="五月" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="c8" label="六月" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="c9" label="七月" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="c10" label="八月" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="c11" label="九月" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="c12" label="十月" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="c13" label="十一月" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="c14" label="十二月" :align="alignment"> |
||||
</el-table-column> |
||||
</el-table-column> |
||||
<el-table-column prop="c15" label="年平均潮位(m)" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="c16" label="年最高潮位(m)" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column label="发生日期" :align="alignment"> |
||||
<el-table-column prop="c17" label="月" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="c18" label="日" :align="alignment"> |
||||
</el-table-column> |
||||
</el-table-column> |
||||
<el-table-column prop="c19" label="年最低潮位(m)" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column label="发生日期" :align="alignment"> |
||||
<el-table-column prop="c20" label="月" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="c21" label="日" :align="alignment"> |
||||
</el-table-column> |
||||
</el-table-column> |
||||
<el-table-column prop="c22" label="冻结基面与绝对基面高差(m)" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="c23" label="绝对或假定基面名称" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="c24" label="附注" :align="alignment"> |
||||
</el-table-column> |
||||
</el-table> |
||||
</pane> |
||||
</splitpanes> |
||||
|
||||
</div> |
||||
</template> |
||||
<script setup> |
||||
import dayjs from 'dayjs'; |
||||
import { Splitpanes, Pane } from 'splitpanes' |
||||
import 'splitpanes/dist/splitpanes.css' |
||||
import ETree from '@/components/ETree/index.vue' |
||||
import { ref, reactive, onMounted } from 'vue'; |
||||
import useAppStore from '@/store/modules/app' |
||||
const device = computed(() => useAppStore().device); |
||||
|
||||
const props = defineProps({ |
||||
tableTitle: { |
||||
type: String, |
||||
default: '表格标题' |
||||
}, |
||||
|
||||
}) |
||||
const { proxy } = getCurrentInstance() |
||||
const alignment = 'center' |
||||
const firstSize = ref(proxy.SPLITPANES_CONFIG.DEFAULT_SIZE) |
||||
const stationType = 'D' |
||||
const eTreeRef = ref(null) |
||||
let stnmIdsList = [] |
||||
// 新增处理站点变化的函数 |
||||
const handleStationChange = (stnmIds) => { |
||||
stnmIdsList = stnmIds |
||||
queryParams.stnmIds = stnmIds.join(',') |
||||
if (stnmIdsList.length == 0) { |
||||
proxy.$modal.msgWarning("请选择站点后查询"); |
||||
return |
||||
} else if (stnmIdsList.length > 50) { |
||||
proxy.$modal.msg("站点最多可选择50个"); |
||||
return |
||||
} else { |
||||
loading.value = true; |
||||
getList() |
||||
} |
||||
} |
||||
|
||||
const loading = ref(false); |
||||
const tableData = ref([]); |
||||
const queryParams = reactive({ |
||||
year: dayjs(new Date()).format('YYYY'), |
||||
stnmIds: '', |
||||
}); |
||||
const getList = async () => { |
||||
loading.value = true; |
||||
try { |
||||
const res = await proxy.axiosGet('/report/gzyntidedzbdata', queryParams) |
||||
if (res.code == 0) { |
||||
tableData.value = res.data |
||||
} |
||||
loading.value = false |
||||
} catch (error) { |
||||
loading.value = false |
||||
} |
||||
} |
||||
// 搜索按钮操作 |
||||
const handleQuery = () => { |
||||
getList() |
||||
} |
||||
// 下载按钮操作 |
||||
const handleExport = () => { } |
||||
|
||||
</script> |
||||
@ -0,0 +1,133 @@
@@ -0,0 +1,133 @@
|
||||
<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="warning" icon="Download" @click="handleExport">下载</el-button> |
||||
</el-col> |
||||
</el-row> |
||||
</el-card> |
||||
<div class="el-card-p card-shadow carder-border mt10 pad10 "> |
||||
<div class="main-table-header"> |
||||
<div class="table-title">{{tableTitle}}</div> |
||||
<div class="table-time mb5"> |
||||
<div> |
||||
<span>年份: </span><span id="title1">{{ dayjs(new Date()).format('YYYY') }}</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<el-table class="report-table" v-table-height="{bottom:100}" v-loading="loading" border :data="tableData" style="width: 100%;" ref="tableRef" @scroll="handleScroll"> |
||||
<el-table-column label="站次" :align="alignment" type="index"> |
||||
</el-table-column> |
||||
<el-table-column prop="c1" label="测站编码" width="180" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="c2" label="水系" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="c3" label="河名" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="c4" label="站名" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="c5" label="站别" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="c6" label="观测场地点" width="180" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column label="坐标" :align="alignment"> |
||||
<el-table-column label="东经" :align="alignment"> |
||||
<el-table-column prop="c7" width="100" label="度分" :align="alignment"> |
||||
</el-table-column> |
||||
</el-table-column> |
||||
<el-table-column label="北纬" :align="alignment"> |
||||
<el-table-column prop="c8" label="度分" width="100" :align="alignment"> |
||||
</el-table-column> |
||||
</el-table-column> |
||||
</el-table-column> |
||||
<el-table-column label="设立日期" :align="alignment"> |
||||
<el-table-column prop="c9" label="年" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="c10" label="月" :align="alignment"> |
||||
</el-table-column> |
||||
</el-table-column> |
||||
<el-table-column label="测雨仪器" :align="alignment"> |
||||
<el-table-column prop="c11" label="绝对高程" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="c12" label="器口离地面高度" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="c13" label="型式" :align="alignment"> |
||||
</el-table-column> |
||||
</el-table-column> |
||||
<el-table-column label="资料项目" :align="alignment"> |
||||
<el-table-column prop="c14" label="降水量" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="c15" label="水面蒸发" :align="alignment"> |
||||
</el-table-column> |
||||
</el-table-column> |
||||
<el-table-column prop="c16" label="领导机关" :align="alignment"> |
||||
</el-table-column> |
||||
</el-table> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup> |
||||
import dayjs from 'dayjs'; |
||||
import { ref, reactive, onMounted, onBeforeUnmount, nextTick } from 'vue'; |
||||
|
||||
const props = defineProps({ |
||||
tableTitle: { |
||||
type: String, |
||||
default: '降水量、水面蒸发量站一览表' |
||||
}, |
||||
}) |
||||
|
||||
const { proxy } = getCurrentInstance() |
||||
const alignment = 'center' |
||||
const loading = ref(false); |
||||
const tableData = ref([]); |
||||
const queryParams = reactive({ |
||||
page: 1, |
||||
limit: 20 |
||||
}); |
||||
|
||||
// 获取数据 |
||||
const getList = async () => { |
||||
if (!hasMore.value || loading.value) return; // 如果没有更多数据或正在加载则返回 |
||||
|
||||
loading.value = true; |
||||
try { |
||||
const res = await proxy.axiosGet('/ycraindata/getAreaStationByType/A', queryParams) |
||||
if (res.code == 0) { |
||||
// 如果是第一页，替换数据；否则追加数据 |
||||
if (queryParams.page === 1) { |
||||
tableData.value = res.data; |
||||
} else { |
||||
tableData.value = [...tableData.value, ...res.data]; |
||||
} |
||||
|
||||
// 如果返回数据少于限制数量，说明没有更多数据了 |
||||
if (res.data.length < queryParams.limit) { |
||||
hasMore.value = false; |
||||
} |
||||
} |
||||
loading.value = false; |
||||
} catch (error) { |
||||
loading.value = false; |
||||
} |
||||
} |
||||
|
||||
const tableRef = ref(null); |
||||
const hasMore = ref(true); // 标识是否还有更多数据 |
||||
|
||||
// 滚动加载处理 |
||||
const handleScroll = () => { |
||||
|
||||
}; |
||||
|
||||
// 初始化加载 |
||||
onMounted(() => { |
||||
getList(); |
||||
}); |
||||
// 下载按钮操作 |
||||
const handleExport = () => { } |
||||
|
||||
|
||||
</script> |
||||
@ -0,0 +1,95 @@
@@ -0,0 +1,95 @@
|
||||
<template> |
||||
<div class="report-rain"> |
||||
<div class="tjfx-menu"> |
||||
<el-select v-model="menu" placeholder="请选择"> |
||||
<el-option v-for="dict in tjfxMenus" :key="dict.value" :label="dict.label" :value="dict.value" /> |
||||
</el-select> |
||||
</div> |
||||
<!-- 添加加载状态和错误提示 --> |
||||
<div v-if="componentError" class="error-message"> |
||||
<el-empty description="组件加载失败，请刷新页面重试" /> |
||||
</div> |
||||
<component v-else :is="currentComponent" :tableTitle="tableTitle"></component> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup> |
||||
import { ref, computed, defineAsyncComponent } from 'vue' |
||||
|
||||
|
||||
// 定义菜单选项 |
||||
const tjfxMenus = [ |
||||
{ |
||||
value: '1', |
||||
label: '月年平均流量对照表' |
||||
}, |
||||
{ |
||||
value: '2', |
||||
label: '逐日平均流量表' |
||||
}, |
||||
{ |
||||
value: '3', |
||||
label: '实测大断面成果表' |
||||
}, |
||||
{ |
||||
value: '4', |
||||
label: '实测流量成果表' |
||||
}, |
||||
// { |
||||
// value: '5', |
||||
// label: '逐日平均含沙量表' |
||||
// } |
||||
] |
||||
|
||||
// 当前选中的菜单 |
||||
const menu = ref(tjfxMenus.length > 0 ? tjfxMenus[0].value : '') |
||||
|
||||
// 动态组件映射 |
||||
const componentMap = { |
||||
'1': defineAsyncComponent(() => import('@/views/report/gzynlldzb/index.vue')), |
||||
'2': defineAsyncComponent(() => import('@/views/report/zrll/index.vue')), |
||||
'3': defineAsyncComponent(() => import('@/views/report/scddm/index.vue')), |
||||
'4': defineAsyncComponent(() => import('@/views/report/scllcgb/index.vue')), |
||||
'5': defineAsyncComponent(() => import('@/views/report/pjhsl/index.vue')), |
||||
} |
||||
// 添加错误处理 |
||||
const componentError = ref(false) |
||||
|
||||
onErrorCaptured((error) => { |
||||
componentError.value = true |
||||
return true |
||||
}) |
||||
|
||||
// 计算当前应该显示的组件 |
||||
const currentComponent = computed(() => { |
||||
return componentMap[menu.value] |
||||
}) |
||||
// 原代码有误，tjfxMenus 中的对象没有 name 属性 |
||||
const tableTitle = computed(() => { |
||||
const currentItem = tjfxMenus.find(item => item.value === menu.value); |
||||
return currentItem ? currentItem.label : ''; |
||||
}) |
||||
</script> |
||||
|
||||
<style lang="scss"> |
||||
.tjfx-menu { |
||||
position: absolute; |
||||
right: 25px; |
||||
top: 30px; |
||||
z-index: 999999; |
||||
|
||||
.el-input__wrapper { |
||||
background: #10163A; |
||||
} |
||||
|
||||
.el-input__inner { |
||||
background: #10163A; |
||||
color: #fff; |
||||
border-color: #10163A; |
||||
} |
||||
|
||||
.el-select .el-input .el-select__caret { |
||||
color: #fff !important; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,187 @@
@@ -0,0 +1,187 @@
|
||||
<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="类型"> |
||||
<el-select v-model="stationType" placeholder="请选择类型" class="w150" @change="changeStationType"> |
||||
<el-option label="水库" value="C"></el-option> |
||||
<el-option label="河道" value="B"></el-option> |
||||
</el-select> |
||||
</el-form-item> |
||||
<el-form-item label="年份"> |
||||
<el-date-picker v-model="queryParams.year" type="year" value-format="YYYY" placeholder="选择年" :clearable="false"> |
||||
</el-date-picker> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button> |
||||
<el-button type="warning" icon="Download" @click="handleExport">下载</el-button> |
||||
</el-form-item> |
||||
</el-form> |
||||
</el-card> |
||||
<splitpanes :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="SPLITPANES_CONFIG.MAX_SIZE" ref="firstPane" class="mr10"> |
||||
<e-tree ref="eTreeRef" :stationType="stationType" @stationChange="handleStationChange"></e-tree> |
||||
</pane> |
||||
<pane :size="100 - firstSize" class="pad10"> |
||||
<div class="main-table-header"> |
||||
<div class="table-title">{{tableTitle}}</div> |
||||
<div class="table-time mb5"> |
||||
<div> |
||||
<span>年份: </span><span id="title1">{{ queryParams.year }}</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<el-table class="report-table" v-table-height="{bottom:100}" v-loading="loading" :data="tableData" style="width: 100%;"> |
||||
<el-table-column fixed prop="stnm" label="站名" width="150" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column label="一月" :align="alignment"> |
||||
<el-table-column prop="data1" label="最高" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="data2" label="日期" :align="alignment"> |
||||
</el-table-column> |
||||
</el-table-column> |
||||
<el-table-column label="二月" :align="alignment"> |
||||
<el-table-column prop="data3" label="最高" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="data4" label="日期" :align="alignment"> |
||||
</el-table-column> |
||||
</el-table-column> |
||||
<el-table-column label="三月" :align="alignment"> |
||||
<el-table-column prop="data5" label="最高" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="data6" label="日期" :align="alignment"> |
||||
</el-table-column> |
||||
</el-table-column> |
||||
<el-table-column label="四月" :align="alignment"> |
||||
<el-table-column prop="data7" label="最高" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="data8" label="日期" :align="alignment"> |
||||
</el-table-column> |
||||
</el-table-column> <el-table-column label="五月" :align="alignment"> |
||||
<el-table-column prop="data9" label="最高" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="data10" label="日期" :align="alignment"> |
||||
</el-table-column> |
||||
</el-table-column> <el-table-column label="六月" :align="alignment"> |
||||
<el-table-column prop="data11" label="最高" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="data12" label="日期" :align="alignment"> |
||||
</el-table-column> |
||||
</el-table-column> |
||||
<el-table-column label="七月" :align="alignment"> |
||||
<el-table-column prop="data13" label="最高" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="data14" label="日期" :align="alignment"> |
||||
</el-table-column> |
||||
</el-table-column> |
||||
<el-table-column label="八月" :align="alignment"> |
||||
<el-table-column prop="data15" label="最高" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="data16" label="日期" :align="alignment"> |
||||
</el-table-column> |
||||
</el-table-column> |
||||
<el-table-column label="九月" :align="alignment"> |
||||
<el-table-column prop="data17" label="最高" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="data18" label="日期" :align="alignment"> |
||||
</el-table-column> |
||||
</el-table-column> |
||||
<el-table-column label="十月" :align="alignment"> |
||||
<el-table-column prop="data19" label="最高" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="data20" label="日期" :align="alignment"> |
||||
</el-table-column> |
||||
</el-table-column> |
||||
<el-table-column label="十一月" :align="alignment"> |
||||
<el-table-column prop="data21" label="最高" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="data22" label="日期" :align="alignment"> |
||||
</el-table-column> |
||||
</el-table-column> |
||||
<el-table-column label="十二月" :align="alignment"> |
||||
<el-table-column prop="data23" label="最高" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="data24" label="日期" :align="alignment"> |
||||
</el-table-column> |
||||
</el-table-column> |
||||
</el-table> |
||||
</pane> |
||||
</splitpanes> |
||||
|
||||
</div> |
||||
</template> |
||||
<script setup> |
||||
import dayjs from 'dayjs'; |
||||
import { Splitpanes, Pane } from 'splitpanes' |
||||
import 'splitpanes/dist/splitpanes.css' |
||||
import ETree from '@/components/ETree/index.vue' |
||||
import { ref, reactive, onMounted } from 'vue'; |
||||
import useAppStore from '@/store/modules/app' |
||||
const device = computed(() => useAppStore().device); |
||||
|
||||
const props = defineProps({ |
||||
tableTitle: { |
||||
type: String, |
||||
default: '月最高水位及出现日期' |
||||
}, |
||||
|
||||
}) |
||||
const { proxy } = getCurrentInstance() |
||||
const alignment = 'center' |
||||
const firstSize = ref(proxy.SPLITPANES_CONFIG.DEFAULT_SIZE) |
||||
const stationType = ref('C') |
||||
let stnmIdsList = [] |
||||
// 新增处理站点变化的函数 |
||||
const handleStationChange = (stnmIds) => { |
||||
stnmIdsList = stnmIds |
||||
queryParams.stnmIds = stnmIds.join(',') |
||||
if (stnmIdsList.length == 0) { |
||||
proxy.$modal.msgWarning("请选择站点后查询"); |
||||
return |
||||
} else if (stnmIdsList.length > 50) { |
||||
proxy.$modal.msg("站点最多可选择50个"); |
||||
return |
||||
} else { |
||||
loading.value = true; |
||||
getList() |
||||
} |
||||
} |
||||
|
||||
const loading = ref(false); |
||||
const tableData = ref([]); |
||||
const queryParams = reactive({ |
||||
year: dayjs(new Date()).format('YYYY'), |
||||
stnmIds: '', |
||||
peakType:0 |
||||
}); |
||||
const getList = async () => { |
||||
loading.value = true; |
||||
try { |
||||
const res = await proxy.axiosGet('/report/swpeakdata', queryParams) |
||||
if (res.code == 0) { |
||||
tableData.value = res.data |
||||
} |
||||
loading.value = false |
||||
} catch (error) { |
||||
loading.value = false |
||||
} |
||||
} |
||||
// 搜索按钮操作 |
||||
const handleQuery = () => { |
||||
getList() |
||||
} |
||||
// 改变类型 |
||||
const eTreeRef = ref(null) |
||||
const changeStationType = (val) => { |
||||
stationType.value = val |
||||
nextTick(() => { |
||||
if (eTreeRef.value) { |
||||
eTreeRef.value.getTreeStation(); |
||||
} |
||||
}) |
||||
|
||||
} |
||||
// 下载按钮操作 |
||||
const handleExport = () => { } |
||||
|
||||
</script> |
||||
@ -0,0 +1,188 @@
@@ -0,0 +1,188 @@
|
||||
<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="类型"> |
||||
<el-select v-model="stationType" placeholder="请选择类型" class="w150" @change="changeStationType"> |
||||
<el-option label="水库" value="C"></el-option> |
||||
<el-option label="河道" value="B"></el-option> |
||||
</el-select> |
||||
</el-form-item> |
||||
<el-form-item label="年份"> |
||||
<el-date-picker v-model="queryParams.year" type="year" value-format="YYYY" placeholder="选择年" :clearable="false"> |
||||
</el-date-picker> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button> |
||||
<el-button type="warning" icon="Download" @click="handleExport">下载</el-button> |
||||
</el-form-item> |
||||
</el-form> |
||||
</el-card> |
||||
<splitpanes :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="SPLITPANES_CONFIG.MAX_SIZE" ref="firstPane" class="mr10"> |
||||
<e-tree ref="eTreeRef" :stationType="stationType" @stationChange="handleStationChange"></e-tree> |
||||
</pane> |
||||
<pane :size="100 - firstSize" class="pad10"> |
||||
<div class="main-table-header"> |
||||
<div class="table-title">{{tableTitle}}</div> |
||||
<div class="table-time mb5"> |
||||
<div> |
||||
<span>年份: </span><span id="title1">{{ queryParams.year }}</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<el-table class="report-table" v-table-height="{bottom:100}" v-loading="loading" :data="tableData" style="width: 100%;"> |
||||
<el-table-column fixed prop="stnm" label="站名" width="150" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column label="一月" :align="alignment"> |
||||
<el-table-column prop="data1" label="最低" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="data2" label="日期" :align="alignment"> |
||||
</el-table-column> |
||||
</el-table-column> |
||||
<el-table-column label="二月" :align="alignment"> |
||||
<el-table-column prop="data3" label="最低" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="data4" label="日期" :align="alignment"> |
||||
</el-table-column> |
||||
</el-table-column> |
||||
<el-table-column label="三月" :align="alignment"> |
||||
<el-table-column prop="data5" label="最低" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="data6" label="日期" :align="alignment"> |
||||
</el-table-column> |
||||
</el-table-column> |
||||
<el-table-column label="四月" :align="alignment"> |
||||
<el-table-column prop="data7" label="最低" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="data8" label="日期" :align="alignment"> |
||||
</el-table-column> |
||||
</el-table-column> <el-table-column label="五月" :align="alignment"> |
||||
<el-table-column prop="data9" label="最低" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="data10" label="日期" :align="alignment"> |
||||
</el-table-column> |
||||
</el-table-column> <el-table-column label="六月" :align="alignment"> |
||||
<el-table-column prop="data11" label="最低" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="data12" label="日期" :align="alignment"> |
||||
</el-table-column> |
||||
</el-table-column> |
||||
<el-table-column label="七月" :align="alignment"> |
||||
<el-table-column prop="data13" label="最低" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="data14" label="日期" :align="alignment"> |
||||
</el-table-column> |
||||
</el-table-column> |
||||
<el-table-column label="八月" :align="alignment"> |
||||
<el-table-column prop="data15" label="最低" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="data16" label="日期" :align="alignment"> |
||||
</el-table-column> |
||||
</el-table-column> |
||||
<el-table-column label="九月" :align="alignment"> |
||||
<el-table-column prop="data17" label="最低" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="data18" label="日期" :align="alignment"> |
||||
</el-table-column> |
||||
</el-table-column> |
||||
<el-table-column label="十月" :align="alignment"> |
||||
<el-table-column prop="data19" label="最低" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="data20" label="日期" :align="alignment"> |
||||
</el-table-column> |
||||
</el-table-column> |
||||
<el-table-column label="十一月" :align="alignment"> |
||||
<el-table-column prop="data21" label="最低" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="data22" label="日期" :align="alignment"> |
||||
</el-table-column> |
||||
</el-table-column> |
||||
<el-table-column label="十二月" :align="alignment"> |
||||
<el-table-column prop="data23" label="最低" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="data24" label="日期" :align="alignment"> |
||||
</el-table-column> |
||||
</el-table-column> |
||||
</el-table> |
||||
</pane> |
||||
</splitpanes> |
||||
|
||||
</div> |
||||
</template> |
||||
<script setup> |
||||
import dayjs from 'dayjs'; |
||||
import { Splitpanes, Pane } from 'splitpanes' |
||||
import 'splitpanes/dist/splitpanes.css' |
||||
import ETree from '@/components/ETree/index.vue' |
||||
import { ref, reactive, onMounted } from 'vue'; |
||||
import useAppStore from '@/store/modules/app' |
||||
const device = computed(() => useAppStore().device); |
||||
|
||||
const props = defineProps({ |
||||
tableTitle: { |
||||
type: String, |
||||
default: '月最低水位及出现日期' |
||||
}, |
||||
|
||||
}) |
||||
const { proxy } = getCurrentInstance() |
||||
const alignment = 'center' |
||||
const firstSize = ref(proxy.SPLITPANES_CONFIG.DEFAULT_SIZE) |
||||
const stationType = ref('C') |
||||
|
||||
let stnmIdsList = [] |
||||
// 新增处理站点变化的函数 |
||||
const handleStationChange = (stnmIds) => { |
||||
stnmIdsList = stnmIds |
||||
queryParams.stnmIds = stnmIds.join(',') |
||||
if (stnmIdsList.length == 0) { |
||||
proxy.$modal.msgWarning("请选择站点后查询"); |
||||
return |
||||
} else if (stnmIdsList.length > 50) { |
||||
proxy.$modal.msg("站点最多可选择50个"); |
||||
return |
||||
} else { |
||||
loading.value = true; |
||||
getList() |
||||
} |
||||
} |
||||
|
||||
const loading = ref(false); |
||||
const tableData = ref([]); |
||||
const queryParams = reactive({ |
||||
year: dayjs(new Date()).format('YYYY'), |
||||
stnmIds: '', |
||||
peakType: 1 |
||||
}); |
||||
const getList = async () => { |
||||
loading.value = true; |
||||
try { |
||||
const res = await proxy.axiosGet('/report/swpeakdata', queryParams) |
||||
if (res.code == 0) { |
||||
tableData.value = res.data |
||||
} |
||||
loading.value = false |
||||
} catch (error) { |
||||
loading.value = false |
||||
} |
||||
} |
||||
// 搜索按钮操作 |
||||
const handleQuery = () => { |
||||
getList() |
||||
} |
||||
// 改变类型 |
||||
const eTreeRef = ref(null) |
||||
const changeStationType = (val) => { |
||||
stationType.value = val |
||||
nextTick(() => { |
||||
if (eTreeRef.value) { |
||||
eTreeRef.value.getTreeStation(); |
||||
} |
||||
}) |
||||
|
||||
} |
||||
// 下载按钮操作 |
||||
const handleExport = () => { } |
||||
|
||||
</script> |
||||
@ -0,0 +1,163 @@
@@ -0,0 +1,163 @@
|
||||
<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="类型"> |
||||
<el-select v-model="stationType" placeholder="请选择类型" class="w150" @change="changeStationType"> |
||||
<el-option label="水库" value="C"></el-option> |
||||
<el-option label="河道" value="B"></el-option> |
||||
</el-select> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button> |
||||
<el-button type="warning" icon="Download" @click="handleExport">下载</el-button> |
||||
</el-form-item> |
||||
</el-form> |
||||
</el-card> |
||||
<splitpanes :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="SPLITPANES_CONFIG.MAX_SIZE" ref="firstPane" class="mr10"> |
||||
<e-tree ref="eTreeRef" :stationType="stationType" @stationChange="handleStationChange"></e-tree> |
||||
</pane> |
||||
<pane :size="100 - firstSize" class="pad10"> |
||||
<div class="main-table-header"> |
||||
<div class="table-title">{{tableTitle}}</div> |
||||
<div class="table-time mb5"> |
||||
<div> |
||||
<span>年份: </span><span id="title1">{{ dayjs(new Date()).format('YYYY') }}</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<el-table class="report-table" v-table-height="{bottom:100}" v-loading="loading" :data="tableData" style="width: 100%;"> |
||||
<el-table-column label="站次" :align="alignment" type="index" :index="indexMethod"> |
||||
</el-table-column> |
||||
<el-table-column prop="c1" label="测站编码" width="120" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="c2" label="水系" width="120" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="c3" label="河名" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="c4" label="流入何处" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="c5" label="站名" width="120" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="c6" label="站别" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="c7" label="断面地点" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column label="坐标" :align="alignment"> |
||||
<el-table-column label="东经" :align="alignment"> |
||||
<el-table-column prop="c8" width="100" label="度分" :align="alignment"> |
||||
</el-table-column> |
||||
</el-table-column> |
||||
<el-table-column label="北纬" :align="alignment"> |
||||
<el-table-column prop="c9" label="度分" width="100" :align="alignment"> |
||||
</el-table-column> |
||||
</el-table-column> |
||||
</el-table-column> |
||||
<el-table-column prop="c10" label="至河口距离(km)" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="c11" label="集水面积(k㎡)" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column label="设立日 期" :align="alignment"> |
||||
<el-table-column prop="c12" label="年" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="c13" label="月" :align="alignment"> |
||||
</el-table-column> |
||||
</el-table-column> |
||||
<el-table-column prop="c14" label="冻结基面与绝对基面高差(m)" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="c15" label="绝对或假定基面名称" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column label="项目资料" :align="alignment"> |
||||
<el-table-column prop="c16" label="水位" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="c17" label="流量" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="c18" label="含沙量" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="19" label="颗粒级配" :align="alignment"> |
||||
</el-table-column> |
||||
<el-table-column prop="c20" label="水文冰凌" :align="alignment"> |
||||
</el-table-column> |
||||
</el-table-column> |
||||
<el-table-column prop="c21" label="领导机关" :align="alignment"> |
||||
</el-table-column> |
||||
</el-table> |
||||
</pane> |
||||
</splitpanes> |
||||
|
||||
</div> |
||||
</template> |
||||
<script setup> |
||||
import dayjs from 'dayjs'; |
||||
import { Splitpanes, Pane } from 'splitpanes' |
||||
import 'splitpanes/dist/splitpanes.css' |
||||
import ETree from '@/components/ETree/index.vue' |
||||
import { ref, reactive, onMounted } from 'vue'; |
||||
import useAppStore from '@/store/modules/app' |
||||
const device = computed(() => useAppStore().device); |
||||
|
||||
const props = defineProps({ |
||||
tableTitle: { |
||||
type: String, |
||||
default: '表格标题' |
||||
}, |
||||
|
||||
}) |
||||
const { proxy } = getCurrentInstance() |
||||
const alignment = 'center' |
||||
const firstSize = ref(proxy.SPLITPANES_CONFIG.DEFAULT_SIZE) |
||||
const stationType = ref('C') |
||||
let stnmIdsList = [] |
||||
// 新增处理站点变化的函数 |
||||
const handleStationChange = (stnmIds) => { |
||||
stnmIdsList = stnmIds |
||||
queryParams.stnmIds = stnmIds.join(',') |
||||
if (stnmIdsList.length == 0) { |
||||
proxy.$modal.msgWarning("请选择站点后查询"); |
||||
return |
||||
} else if (stnmIdsList.length > 50) { |
||||
proxy.$modal.msg("站点最多可选择50个"); |
||||
return |
||||
} else { |
||||
loading.value = true; |
||||
getList() |
||||
} |
||||
} |
||||
|
||||
const loading = ref(false); |
||||
const tableData = ref([]); |
||||
const queryParams = reactive({ |
||||
stnmIds: '', |
||||
}); |
||||
const getList = async () => { |
||||
loading.value = true; |
||||
try { |
||||
const res = await proxy.axiosGet('/report/swswzylbdata', queryParams) |
||||
if (res.code == 0) { |
||||
tableData.value = res.data |
||||
} |
||||
loading.value = false |
||||
} catch (error) { |
||||
loading.value = false |
||||
} |
||||
} |
||||
// 搜索按钮操作 |
||||
const handleQuery = () => { |
||||
getList() |
||||
} |
||||
// 改变类型 |
||||
const eTreeRef = ref(null) |
||||
const changeStationType = (val) => { |
||||
stationType.value = val |
||||
nextTick(() => { |
||||
if (eTreeRef.value) { |
||||
eTreeRef.value.getTreeStation(); |
||||
} |
||||
}) |
||||
|
||||
} |
||||
// 下载按钮操作 |
||||
const handleExport = () => { } |
||||
|
||||
</script> |
||||
@ -0,0 +1,404 @@
@@ -0,0 +1,404 @@
|
||||
<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="选择站点"> |
||||
<!-- <singleStation ref="singleStationRef" :stationType="stationType" @stationChange="handleStationChange" @loadingChange="handleStationLoading" /> --> |
||||
<ESelectSingle ref="eSelectSingle" :stationType="stationType" @stationChange="handleStationChange" @loadingChange="handleStationLoading" /> |
||||
</el-form-item> |
||||
<el-form-item label="年份"> |
||||
<el-date-picker v-model="queryParams.year" type="year" value-format="YYYY" placeholder="选择年" :clearable="false"> |
||||
</el-date-picker> |
||||
</el-form-item> |
||||
<el-form-item label="时段"> |
||||
<el-select v-model="queryParams.month" placeholder="请选择时段" clearable class="w150"> |
||||
<el-option v-for="dict in monthList" :key="dict.month" :label="dict.monthName" :value="dict.month" /> |
||||
</el-select> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button> |
||||
<el-button type="warning" icon="Download" @click="handleExport">下载</el-button> |
||||
</el-form-item> |
||||
</el-form> |
||||
</el-card> |
||||
|
||||
<div class="el-card-p card-shadow carder-border mt10 pad10 scroll-bar" style="max-width: 100%; overflow-x: hidden;padding-top:0" v-loading="loading"> |
||||
<div class="main-table-header " style="width: 1200px;margin:0 auto"> |
||||
<div class="table-title">{{tableTitle}}</div> |
||||
<div class="table-time mb5"> |
||||
<div> |
||||
<span>年份: </span><span id="title1">{{queryParams.year }}</span> |
||||
</div> |
||||
<div> |
||||
<span>测站编码: </span><span id="title2">{{queryParams.stnmId}}</span> |
||||
</div> |
||||
<div> |
||||
<span>{{title}} </span><span id="title3" class="pl10">m= 85基准基准基面以上米数</span> |
||||
</div> |
||||
</div> |
||||
<div v-if="tableData.length!==0" style="border:1px solid #000;text-align: center;border-bottom:none;padding:10px 0;">{{queryParams.month}}月</div> |
||||
|
||||
</div> |
||||
<div v-if="tableData.length>0"> |
||||
<div style="width:1200px;margin:0 auto;display: flex;" class="table-box"> |
||||
<template v-for="(itemTableData,index) in tableData" :key="index"> |
||||
<el-table class="report-table top-table" :data="itemTableData" :cell-class-name="tableCellClassName"> |
||||
<el-table-column v-for="(item, idx) in columnData" :key="idx" :label="item.label" :align="item.align" :prop="item.prop" :width="item.width"> |
||||
</el-table-column> |
||||
</el-table> |
||||
</template> |
||||
|
||||
</div> |
||||
<el-table class="report-table bottom-table" :data="countData" style="width: 1200px;margin:0 auto;border-top:none !important" :span-method="arraySpanMethod2"> |
||||
<el-table-column v-for="(item, idx) in columnData2" :key="idx" :label="item.label" :align="item.align" :prop="item.prop" :width="item.width"> |
||||
</el-table-column> |
||||
</el-table> |
||||
|
||||
</div> |
||||
<el-empty v-else description="暂无数据" /> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
<script setup> |
||||
import dayjs from 'dayjs'; |
||||
import singleStation from '@/components/SingleStation/index.vue' |
||||
import ESelectSingle from '@/components/ESelectSingle/index.vue' |
||||
import { ref, reactive, onMounted } from 'vue'; |
||||
|
||||
const props = defineProps({ |
||||
tableTitle: { |
||||
type: String, |
||||
default: '逐潮高低潮位表' |
||||
}, |
||||
|
||||
}) |
||||
|
||||
const { proxy } = getCurrentInstance() |
||||
const stationType = 'D' |
||||
const singleStationRef = ref(null) |
||||
const handleStationLoading = (loadingState) => { |
||||
loading.value = loadingState; |
||||
} |
||||
// 新增处理站点变化的函数 |
||||
const handleStationChange = (stnmId) => { |
||||
queryParams.stnmId = stnmId |
||||
if (stnmId == undefined) { |
||||
proxy.$modal.msgWarning("请选择站点后查询"); |
||||
return |
||||
} else { |
||||
getList() |
||||
} |
||||
} |
||||
|
||||
const loading = ref(false); |
||||
const tableData = ref([]); |
||||
const countData = ref([]); |
||||
const queryParams = reactive({ |
||||
year: dayjs(new Date()).format('YYYY'), |
||||
month: '01' |
||||
}); |
||||
const title = ref('') |
||||
|
||||
const getList = async () => { |
||||
loading.value = true; |
||||
try { |
||||
const res = await proxy.axiosGet('/report/getTide1ReportData', queryParams) |
||||
if (res.code == 0) { |
||||
title.value = res.rTitle |
||||
let data = res.data |
||||
// 确保每项数据长度一致 |
||||
const maxLength = Math.max(...data.map(item => item.length)); |
||||
data = data.map(list => { |
||||
// 补齐长度到最大值 |
||||
while (list.length < maxLength) { |
||||
list.push({ |
||||
date: null, |
||||
flag: '', |
||||
value: '', |
||||
mint: '', |
||||
differ: '', |
||||
duration: '' |
||||
}); |
||||
} |
||||
|
||||
let previousDate = null; |
||||
return list.map((item, index) => { |
||||
item.flag = item.flag == '1' ? '高' : item.flag == '0' ? '低' : '' |
||||
if (index == 0) { |
||||
item.differ = null |
||||
item.duration = null |
||||
} |
||||
// 处理日期重复显示问题 |
||||
if (item.date === previousDate) { |
||||
item.date = null; |
||||
} else { |
||||
previousDate = item.date; |
||||
} |
||||
return item |
||||
}); |
||||
}); |
||||
|
||||
tableData.value = data |
||||
|
||||
let countList = res.countData.map(item => { |
||||
item.yue = '月统计' |
||||
return item |
||||
}) |
||||
|
||||
// 添加附注行 |
||||
countList.push({ |
||||
'yue': '附注', |
||||
name: '' |
||||
}) |
||||
countData.value = countList |
||||
} |
||||
|
||||
} catch (error) { |
||||
} finally { |
||||
loading.value = false |
||||
} |
||||
} |
||||
// 改变类型操作 |
||||
const changeStationType = (val) => { |
||||
queryParams.stationType = val |
||||
queryParams.type = val == 'B' ? 1 : 0 |
||||
} |
||||
// 搜索按钮操作 |
||||
const handleQuery = () => { |
||||
getList() |
||||
} |
||||
// 重置按钮操作 |
||||
const resetQuery = () => { } |
||||
// 下载按钮操作 |
||||
const handleExport = () => { } |
||||
onMounted(() => { }) |
||||
const columnData = ref([ |
||||
{ label: '日期', prop: 'date', align: "center", width: '66' }, |
||||
{ label: '潮别', prop: 'flag', align: "center", width: '69' }, |
||||
{ label: '潮位', prop: 'value', align: "center", width: '66' }, |
||||
{ label: '时分', prop: 'mint', align: "center", width: '66' }, |
||||
{ label: '潮差', prop: 'differ', align: "center", width: '66' }, |
||||
{ label: '历时', prop: 'duration', align: "center", width: '66' }, |
||||
]) |
||||
const columnData2 = ref([ |
||||
{ label: '', prop: 'yue', align: "center", width: '66' }, |
||||
{ label: '项目', prop: 'name', align: "center", width: '135' }, |
||||
{ label: '最高\n（大）', prop: 'max', align: "center", width: '132' }, |
||||
{ label: '日', prop: 'maxDate', align: "center", width: '66' }, |
||||
{ label: '时分', prop: 'maxMint', align: "center", width: '66.98' }, |
||||
{ label: '夏历\n月-日', prop: 'maxNdate', align: "center", width: '135' }, |
||||
{ label: '最低\n（小）', prop: 'min', align: "center", width: '132' }, |
||||
{ label: '日', prop: 'minDate', align: "center", width: '67' }, |
||||
{ label: '时分', prop: 'minMint', align: "center", width: '67' }, |
||||
{ label: '夏历\n月-日', prop: 'minNdate', align: "center", width: '135' }, |
||||
{ label: '平均', prop: 'avg', align: "center", width: '66' }, |
||||
{ label: '月总数', prop: 'sum', align: "center", width: '66' }, |
||||
{ label: '次数', prop: 'count', align: "center", width: '66' }, |
||||
]) |
||||
|
||||
// 根据潮别为单元格添加不同的类名，以实现左右对齐 |
||||
const tableCellClassName = ({ row, column }) => { |
||||
if (column && column.property === 'flag') { |
||||
if (row.flag === '高') return 'flag-high-right' |
||||
if (row.flag === '低') return 'flag-low-left' |
||||
} |
||||
return '' |
||||
} |
||||
|
||||
const arraySpanMethod = ({ row, column, rowIndex, columnIndex }) => { |
||||
let rowList = [31, 32, 33, 34, 35, 36, 37, 38] |
||||
// 表头行（第一行）合并第一列和第二列 |
||||
if (!rowList.includes(rowIndex)) { |
||||
if (columnIndex === 0) { |
||||
// 第一列合并两列 |
||||
return [1, 2]; |
||||
} else if (columnIndex === 1) { |
||||
// 第二列被合并，不显示 |
||||
return [0, 0]; |
||||
} |
||||
} |
||||
|
||||
// 月统计行合并 |
||||
if (rowIndex >= 31 && rowIndex <= 35) { |
||||
if (columnIndex === 0) { |
||||
return rowIndex === 31 ? [5, 1] : [0, 0]; |
||||
} |
||||
if (columnIndex === 1) return [1, 1]; |
||||
} |
||||
|
||||
// 年统计行合并 |
||||
if (rowIndex >= 36 && rowIndex <= 38) { |
||||
if (columnIndex === 0) { |
||||
return rowIndex === 36 ? [3, 2] : [0, 0]; |
||||
} |
||||
|
||||
if (columnIndex === 1) return [0, 0]; |
||||
if (rowIndex == 36) { |
||||
if (columnIndex === 2) { |
||||
return [1, 1]; |
||||
} else if (columnIndex === 3) { |
||||
return [1, 3]; |
||||
} else if (columnIndex === 4) { |
||||
return [1, 1]; |
||||
} else if (columnIndex === 5) { |
||||
return [1, 3]; |
||||
} else if (columnIndex === 6) { |
||||
return [1, 1]; |
||||
} else if (columnIndex === 7) { |
||||
return [1, 3]; |
||||
} else { |
||||
return [0, 0]; |
||||
} |
||||
} |
||||
} |
||||
// 附录行合并 |
||||
if (rowIndex === tableData.value.length - 1) { |
||||
if (columnIndex === 1) { |
||||
return [1, 2]; |
||||
} else if (columnIndex === 2) { |
||||
return [1, 12]; |
||||
} else { |
||||
return [0, 0]; |
||||
|
||||
} |
||||
} |
||||
// 其他行不合并 |
||||
return [1, 1]; |
||||
} |
||||
const arraySpanMethod2 = ({ row, column, rowIndex, columnIndex }) => { |
||||
// 查找"月统计"行范围 |
||||
let yueRowsStartIndex = -1; |
||||
let yueRowsEndIndex = -1; |
||||
|
||||
for (let i = 0; i < countData.value.length; i++) { |
||||
if (countData.value[i].yue === '月统计') { |
||||
if (yueRowsStartIndex === -1) { |
||||
yueRowsStartIndex = i; |
||||
} |
||||
yueRowsEndIndex = i; |
||||
} |
||||
} |
||||
|
||||
// 如果找到连续的"月统计"行，则合并第一列 |
||||
if (yueRowsStartIndex !== -1 && rowIndex >= yueRowsStartIndex && |
||||
rowIndex <= yueRowsEndIndex && yueRowsEndIndex > yueRowsStartIndex) { |
||||
if (columnIndex === 0) { |
||||
if (rowIndex === yueRowsStartIndex) { |
||||
// 第一行合并所有"月统计"行 |
||||
return [yueRowsEndIndex - yueRowsStartIndex + 1, 1]; |
||||
} else { |
||||
// 其他行隐藏 |
||||
return [0, 0]; |
||||
} |
||||
} |
||||
} |
||||
|
||||
// 处理"附注"行合并所有列 |
||||
if (row.yue === '附注') { |
||||
if (columnIndex === 0) { |
||||
// 合并所有13列 |
||||
return [1, 1]; |
||||
} else if (columnIndex === 1) { |
||||
return [1, 12]; |
||||
} else { |
||||
// 其他列隐藏 |
||||
return [0, 0]; |
||||
} |
||||
} |
||||
|
||||
// 其他情况不合并 |
||||
return [1, 1]; |
||||
} |
||||
const monthList = [ |
||||
{ month: "01", monthName: "1月" }, |
||||
{ month: "02", monthName: "2月" }, |
||||
{ month: "03", monthName: "3月" }, |
||||
{ month: "04", monthName: "4月" }, |
||||
{ month: "05", monthName: "5月" }, |
||||
{ month: "06", monthName: "6月" }, |
||||
{ month: "07", monthName: "7月" }, |
||||
{ month: "08", monthName: "8月" }, |
||||
{ month: "09", monthName: "9月" }, |
||||
{ month: "10", monthName: "10月" }, |
||||
{ month: "11", monthName: "11月" }, |
||||
{ month: "12", monthName: "12月" }, |
||||
] |
||||
</script> |
||||
<style scoped lang='scss'> |
||||
/* 潮别列根据高/低动态对齐 */ |
||||
:deep(.flag-high-right) .cell { |
||||
text-align: right !important; |
||||
} |
||||
|
||||
:deep(.flag-low-left) .cell { |
||||
text-align: left !important; |
||||
} |
||||
|
||||
/* 为潮差和历时列的首尾行添加上移的下边框 */ |
||||
.top-table :deep(.el-table__body tbody tr td:nth-child(5)), |
||||
.top-table :deep(.el-table__body tbody tr td:nth-child(5)), |
||||
.top-table :deep(.el-table__body tbody tr td:nth-child(6)), |
||||
.top-table :deep(.el-table__body tbody tr td:nth-child(6)) { |
||||
position: relative; |
||||
height: 20px !important; |
||||
line-height: 20px !important; |
||||
padding: 0 !important; |
||||
vertical-align: middle; |
||||
|
||||
/* 隐藏原生边框 */ |
||||
border-bottom: none !important; |
||||
|
||||
.cell { |
||||
transform: translateY(-10px); |
||||
display: inline-block; |
||||
width: 100%; |
||||
text-align: center; |
||||
} |
||||
|
||||
/* 添加伪元素模拟上移的边框 */ |
||||
&::before { |
||||
content: ''; |
||||
position: absolute; |
||||
bottom: 20px; |
||||
/* 边框上移 24px */ |
||||
left: 0; |
||||
right: 0; |
||||
border-bottom: 1px solid #000; |
||||
pointer-events: none; |
||||
} |
||||
} |
||||
|
||||
.top-table :deep(.el-table__body tbody tr:not(:first-child):not(:last-child) td:nth-child(5)), |
||||
.top-table :deep(.el-table__body tbody tr:not(:first-child):not(:last-child) td:nth-child(6)) { |
||||
height: 40px !important; |
||||
line-height: 40px !important; |
||||
padding: 0 !important; |
||||
} |
||||
|
||||
.top-table :deep(.el-table__body tbody tr td:nth-child(4)) { |
||||
height: 40px !important; |
||||
line-height: 40px !important; |
||||
padding: 0 !important; |
||||
} |
||||
|
||||
.table-box .top-table { |
||||
border-right: none !important; |
||||
} |
||||
|
||||
.table-box .top-table:not(:first-child) { |
||||
border-left: none !important; |
||||
} |
||||
|
||||
.bottom-table :deep(.cell) { |
||||
font-weight: 400 !important; |
||||
} |
||||
|
||||
.bottom-table :deep(.el-table__body tbody tr td:last-child), |
||||
.bottom-table :deep(.el-table__header thead tr th:last-child) { |
||||
border-right: none !important; |
||||
} |
||||
|
||||
.bottom-table :deep(.el-table__header tr th:first-child) { |
||||
border-bottom: none !important; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,378 @@
@@ -0,0 +1,378 @@
|
||||
<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="选择站点"> |
||||
<!-- <singleStation ref="singleStationRef" :stationType="stationType" @stationChange="handleStationChange" /> --> |
||||
<ESelectSingle ref="eSelectSingle" :station-type="stationType" @stationChange="handleStationChange" @loadingChange="handleStationLoading" /> |
||||
</el-form-item> |
||||
<el-form-item label="年份"> |
||||
<el-date-picker v-model="queryParams.year" type="year" value-format="YYYY" placeholder="选择年" :clearable="false"> |
||||
</el-date-picker> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button> |
||||
<el-button type="warning" icon="Download" @click="handleExport">下载</el-button> |
||||
</el-form-item> |
||||
</el-form> |
||||
</el-card> |
||||
|
||||
<div class="el-card-p card-shadow carder-border mt10 pad10 scroll-bar" style="max-width: 100%; overflow-x: hidden;"> |
||||
<div class="main-table-header" style="width: 70%;margin:0 auto"> |
||||
<div class="table-title">{{tableTitle}}</div> |
||||
<div class="table-time mb5"> |
||||
<div> |
||||
<span>年份: </span><span id="title1">{{queryParams.year }}</span> |
||||
</div> |
||||
<div> |
||||
<span>测站编码: </span><span id="title2">{{queryParams.stnmId}}</span> |
||||
</div> |
||||
<div> |
||||
<span>流量： </span><span id="title3">(m³/s)</span> |
||||
</div> |
||||
<div> |
||||
<span>积水面积： </span><span id="title4"> {{waterArea}}(k㎡)</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<el-table class="report-table merge-header" v-loading="loading" :data="tableData" style="width: 70%;margin:0 auto" :table-layout="tableLayout" :span-method="arraySpanMethod"> |
||||
<el-table-column prop="value" :align="alignment"> |
||||
<el-table-column prop="date" width="40" :align="alignment" /> |
||||
<el-table-column prop="yueTotal" width="90" :align="alignment" /> |
||||
<template #header> |
||||
<div class="diagonal-header"> |
||||
<svg class="diagonal-line" viewBox="0 0 100 100" preserveAspectRatio="none"> |
||||
<line x1="0" y1="0" x2="100" y2="100" stroke="#000" stroke-width="1" /> |
||||
</svg> |
||||
<div class="header-month">月份</div> |
||||
<div class="header-date">日期</div> |
||||
</div> |
||||
</template> |
||||
|
||||
</el-table-column> |
||||
<el-table-column v-for="(item, index) in columnData" :key="index" :label="item.label" :align="alignment" :prop="item.prop"> |
||||
</el-table-column> |
||||
</el-table> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
<script setup> |
||||
import dayjs from 'dayjs'; |
||||
import singleStation from '@/components/SingleStation/index.vue' |
||||
import ESelectSingle from '@/components/ESelectSingle/index.vue' |
||||
import { ref, reactive, onMounted } from 'vue'; |
||||
|
||||
const props = defineProps({ |
||||
tableTitle: { |
||||
type: String, |
||||
default: '表格标题' |
||||
}, |
||||
|
||||
}) |
||||
|
||||
const { proxy } = getCurrentInstance() |
||||
const alignment = 'center' |
||||
const stationType = 'E' |
||||
const tableLayout = ref('fixed') |
||||
const singleStationRef = ref(null) |
||||
// 新增处理站点变化的函数 |
||||
const handleStationChange = (stnmId) => { |
||||
queryParams.stnmId = stnmId |
||||
if (stnmId == undefined) { |
||||
proxy.$modal.msgWarning("请选择站点后查询"); |
||||
return |
||||
} else { |
||||
loading.value = true; |
||||
getList() |
||||
} |
||||
} |
||||
|
||||
const loading = ref(false); |
||||
const tableData = ref([]); |
||||
const queryParams = reactive({ |
||||
year: dayjs(new Date()).format('YYYY'), |
||||
}); |
||||
const waterArea = ref('') |
||||
const getList = async () => { |
||||
loading.value = true; |
||||
try { |
||||
const res = await proxy.axiosGet('/report/zrlldata', queryParams) |
||||
if (res.code == 0) { |
||||
waterArea.value = res.data.waterArea |
||||
// let data = res.data |
||||
let data = [] |
||||
// 生成1~31日数据 |
||||
for (let i = 1; i <= 31; i++) { |
||||
let j = i - 1 |
||||
data.push({ |
||||
date: i, |
||||
yueTotal: '', |
||||
Jan: res.data.dayCountData[0][j] || '/', |
||||
Feb: res.data.dayCountData[1][j] || '/', |
||||
Mar: res.data.dayCountData[2][j] || '/', |
||||
Apr: res.data.dayCountData[3][j] || '/', |
||||
May: res.data.dayCountData[4][j] || '/', |
||||
Jun: res.data.dayCountData[5][j] || '/', |
||||
Jul: res.data.dayCountData[6][j] || '/', |
||||
Aug: res.data.dayCountData[7][j] || '/', |
||||
Sep: res.data.dayCountData[8][j] || '/', |
||||
Oct: res.data.dayCountData[9][j] || '/', |
||||
Nov: res.data.dayCountData[10][j] || '/', |
||||
Dec: res.data.dayCountData[11][j] || '/' |
||||
}) |
||||
} |
||||
let yueList = ['平均', '最大', '日期', '最小', '日期'] |
||||
|
||||
for (let i = 0; i < 5; i++) { |
||||
data.push( |
||||
{ |
||||
yueTotal: yueList[i], |
||||
date: "月统计", |
||||
Jan: i == 0 ? res.data.avgList[0] : i == 1 ? res.data.maxList[0] : i == 2 ? res.data.maxDayList[0] : i == 3 ? res.data.minList[0] : i == 4 ? res.data.minDayList[0] : '/', |
||||
Feb: i == 0 ? res.data.avgList[1] : i == 1 ? res.data.maxList[1] : i == 2 ? res.data.maxDayList[1] : i == 3 ? res.data.minList[1] : i == 4 ? res.data.minDayList[1] : '/', |
||||
Mar: i == 0 ? res.data.avgList[2] : i == 1 ? res.data.maxList[2] : i == 2 ? res.data.maxDayList[2] : i == 3 ? res.data.minList[2] : i == 4 ? res.data.minDayList[2] : '/', |
||||
Apr: i == 0 ? res.data.avgList[3] : i == 1 ? res.data.maxList[3] : i == 2 ? res.data.maxDayList[3] : i == 3 ? res.data.minList[3] : i == 4 ? res.data.minDayList[3] : '/', |
||||
May: i == 0 ? res.data.avgList[4] : i == 1 ? res.data.maxList[4] : i == 2 ? res.data.maxDayList[4] : i == 3 ? res.data.minList[4] : i == 4 ? res.data.minDayList[4] : '/', |
||||
Jun: i == 0 ? res.data.avgList[5] : i == 1 ? res.data.maxList[5] : i == 2 ? res.data.maxDayList[5] : i == 3 ? res.data.minList[5] : i == 4 ? res.data.minDayList[5] : '/', |
||||
Jul: i == 0 ? res.data.avgList[6] : i == 1 ? res.data.maxList[6] : i == 2 ? res.data.maxDayList[6] : i == 3 ? res.data.minList[6] : i == 4 ? res.data.minDayList[6] : '/', |
||||
Aug: i == 0 ? res.data.avgList[7] : i == 1 ? res.data.maxList[7] : i == 2 ? res.data.maxDayList[7] : i == 3 ? res.data.minList[7] : i == 4 ? res.data.minDayList[7] : '/', |
||||
Sep: i == 0 ? res.data.avgList[8] : i == 1 ? res.data.maxList[8] : i == 2 ? res.data.maxDayList[8] : i == 3 ? res.data.minList[8] : i == 4 ? res.data.minDayList[8] : '/', |
||||
Oct: i == 0 ? res.data.avgList[9] : i == 1 ? res.data.maxList[9] : i == 2 ? res.data.maxDayList[9] : i == 3 ? res.data.minList[9] : i == 4 ? res.data.minDayList[9] : '/', |
||||
Nov: i == 0 ? res.data.avgList[10] : i == 1 ? res.data.maxList[10] : i == 2 ? res.data.maxDayList[10] : i == 3 ? res.data.minList[10] : i == 4 ? res.data.minDayList[10] : '/', |
||||
Dec: i == 0 ? res.data.avgList[11] : i == 1 ? res.data.maxList[11] : i == 2 ? res.data.maxDayList[11] : i == 3 ? res.data.minList[11] : i == 4 ? res.data.minDayList[11] : '/' |
||||
|
||||
} |
||||
) |
||||
} |
||||
let yearMaxValue = res.data.yearMax?.replace(/ /g, ' ').trim(); |
||||
let yearMinValue = res.data.yearMin?.replace(/ /g, ' ').trim(); |
||||
let yearAvgValue = res.data.yearAvg?.replace(/ /g, ' ').trim(); |
||||
|
||||
let nianList = ['最大流量', '径流量'] |
||||
for (let i = 0; i < 2; i++) { |
||||
data.push( |
||||
{ |
||||
date: "年统计", |
||||
yueTotal: '', |
||||
Jan: nianList[i], |
||||
Feb: i == 0 ? yearMaxValue : i == 1 ? `${res.data.yearJing} 10⁸m³` : '/', |
||||
Mar: i == 0 ? '最小流量' : i == 1 ? '径流模数' : '/', |
||||
Apr: i == 0 ? yearMinValue : i == 1 ? `${res.data.yearMod} 10⁻³m³/(s·m³)` : '/', |
||||
May: i == 0 ? '平均流量' : i == 1 ? '径流深度' : i == 2 ? '' : '/', |
||||
Jun: i == 0 ? yearAvgValue : i == 1 ? `${res.data.yearDepth} mm` : '/', |
||||
} |
||||
) |
||||
} |
||||
// 添加附注行 |
||||
data.push({ |
||||
date: '洪量 10⁸m³', |
||||
Jan: '最大1日', |
||||
Feb: res.data.ll_1.split(',')[0], |
||||
Mar: '3日', |
||||
Apr: res.data.ll_3.split(',')[0], |
||||
May: '7日', |
||||
Jun: res.data.ll_7.split(',')[0], |
||||
Jul: '15日', |
||||
Aug: res.data.ll_15.split(',')[0], |
||||
Sep: '30日', |
||||
Oct: res.data.ll_30.split(',')[0], |
||||
Nov: '60日', |
||||
Dec: res.data.ll_60.split(',')[0], |
||||
}) |
||||
// 添加附注行 |
||||
data.push({ |
||||
date: '洪亮日期', |
||||
Jan: res.data.ll_1.split(',')[1], |
||||
Feb: res.data.ll_3.split(',')[1], |
||||
Mar: res.data.ll_7.split(',')[1], |
||||
Apr: res.data.ll_15.split(',')[1], |
||||
May: res.data.ll_30.split(',')[1], |
||||
Jun: res.data.ll_60.split(',')[1], |
||||
}) |
||||
// 添加附注行 |
||||
data.push({ |
||||
date: '附录', |
||||
Jan: res.data.fuzhu |
||||
}) |
||||
tableData.value = data |
||||
|
||||
} |
||||
loading.value = false |
||||
} catch (error) { |
||||
loading.value = false |
||||
} |
||||
} |
||||
|
||||
// 搜索按钮操作 |
||||
const handleQuery = () => { |
||||
getList() |
||||
} |
||||
// 下载按钮操作 |
||||
const handleExport = () => { } |
||||
onMounted(() => { }) |
||||
const columnData = ref([ |
||||
{ label: '一月', prop: 'Jan' }, |
||||
{ label: '二月', prop: 'Feb' }, |
||||
{ label: '三月', prop: 'Mar' }, |
||||
{ label: '四月', prop: 'Apr' }, |
||||
{ label: '五月', prop: 'May' }, |
||||
{ label: '六月', prop: 'Jun' }, |
||||
{ label: '七月', prop: 'Jul' }, |
||||
{ label: '八月', prop: 'Aug' }, |
||||
{ label: '九月', prop: 'Sep' }, |
||||
{ label: '十月', prop: 'Oct' }, |
||||
{ label: '十一月', prop: 'Nov' }, |
||||
{ label: '十二月', prop: 'Dec' } |
||||
]) |
||||
|
||||
const arraySpanMethod = ({ row, column, rowIndex, columnIndex }) => { |
||||
let rowList = [31, 32, 33, 34, 35, 36, 37,] |
||||
// 表头行（第一行）合并第一列和第二列 |
||||
if (!rowList.includes(rowIndex)) { |
||||
if (columnIndex === 0) { |
||||
// 第一列合并两列 |
||||
return [1, 2]; |
||||
} else if (columnIndex === 1) { |
||||
// 第二列被合并，不显示 |
||||
return [0, 0]; |
||||
} |
||||
} |
||||
|
||||
// 月统计行合并 |
||||
if (rowIndex >= 31 && rowIndex <= 35) { |
||||
if (columnIndex === 0) { |
||||
return rowIndex === 31 ? [5, 1] : [0, 0]; |
||||
} |
||||
if (columnIndex === 1) return [1, 1]; |
||||
} |
||||
|
||||
// 年统计行合并 |
||||
if (rowIndex >= 36 && rowIndex <= 37) { |
||||
if (columnIndex === 0) { |
||||
return rowIndex === 36 ? [2, 2] : [0, 0]; |
||||
} |
||||
|
||||
if (columnIndex === 1) return [0, 0]; |
||||
// if (rowIndex == 36) { |
||||
if (columnIndex === 2) { |
||||
return [1, 1]; |
||||
} else if (columnIndex === 3) { |
||||
return [1, 3]; |
||||
} else if (columnIndex === 4) { |
||||
return [1, 1]; |
||||
} else if (columnIndex === 5) { |
||||
return [1, 3]; |
||||
} else if (columnIndex === 6) { |
||||
return [1, 1]; |
||||
} else if (columnIndex === 7) { |
||||
return [1, 3]; |
||||
} else { |
||||
return [0, 0]; |
||||
} |
||||
// } |
||||
} |
||||
if (rowIndex === tableData.value.length - 2) { |
||||
if (columnIndex === 2) { |
||||
return [1, 2]; |
||||
} else if (columnIndex === 3) { |
||||
return [1, 2]; |
||||
} else if (columnIndex === 4) { |
||||
return [1, 2]; |
||||
} else if (columnIndex === 5) { |
||||
return [1, 2]; |
||||
} else if (columnIndex === 6) { |
||||
return [1, 2]; |
||||
} else if (columnIndex === 7) { |
||||
return [1, 2]; |
||||
} else { |
||||
return [0, 0]; |
||||
} |
||||
} |
||||
// 附录行合并 |
||||
if (rowIndex === tableData.value.length - 1) { |
||||
if (columnIndex === 1) { |
||||
return [1, 2]; |
||||
} else if (columnIndex === 2) { |
||||
return [1, 12]; |
||||
} else { |
||||
return [0, 0]; |
||||
|
||||
} |
||||
} |
||||
// 其他行不合并 |
||||
return [1, 1]; |
||||
} |
||||
</script> |
||||
<style scoped lang='scss'> |
||||
/* 斜线表头容器 */ |
||||
.diagonal-header { |
||||
position: relative; |
||||
width: 100%; |
||||
height: 100%; |
||||
min-height: 60px; |
||||
/* 确保有足够空间 */ |
||||
} |
||||
|
||||
/* SVG 斜线 */ |
||||
.diagonal-line { |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
width: 100%; |
||||
height: 100%; |
||||
pointer-events: none; |
||||
/* 防止遮挡点击事件 */ |
||||
} |
||||
|
||||
/* 月份/日期文本样式 */ |
||||
.header-month, |
||||
.header-date { |
||||
position: absolute; |
||||
font-size: 12px; |
||||
line-height: 1; |
||||
z-index: 1; |
||||
} |
||||
|
||||
/* 右上角月份 */ |
||||
.header-month { |
||||
top: 10%; |
||||
right: 10%; |
||||
text-align: right; |
||||
} |
||||
|
||||
/* 左下角日期 */ |
||||
.header-date { |
||||
bottom: 10%; |
||||
left: 10%; |
||||
text-align: left; |
||||
} |
||||
|
||||
/* 表头单元格高度调整 */ |
||||
:deep(.el-table__header th) { |
||||
padding: 0; |
||||
height: 60px; |
||||
/* 增加高度保证斜线效果 */ |
||||
} |
||||
|
||||
:deep(.el-table__header th.el-table__cell>.cell) { |
||||
padding: 0 !important; |
||||
} |
||||
|
||||
/* 隐藏子列的表头行 */ |
||||
.merge-header :deep(.el-table__header tr:nth-child(2)) { |
||||
display: none; |
||||
} |
||||
|
||||
/* 隐藏前31行的下边框 */ |
||||
:deep(.el-table__body tr:nth-child(-n+30) td), |
||||
:deep(.el-table__body tr:nth-child(32) td), |
||||
:deep(.el-table__body tr:nth-child(33) td), |
||||
:deep(.el-table__body tr:nth-child(34) td), |
||||
:deep(.el-table__body tr:nth-child(35) td) { |
||||
border-bottom: none !important; |
||||
} |
||||
|
||||
:deep(.el-table__body tr:nth-child(32) td:nth-child(1)) { |
||||
border-bottom: 1px solid #000 !important; |
||||
} |
||||
</style> |
||||
@ -1,10 +1,10 @@
@@ -1,10 +1,10 @@
|
||||
<template> |
||||
<time-count :stationType="stationType" :fixed="fixed" :requestPrefix="requestPrefix" :tableTitle="title"></time-count> |
||||
<time-count :stationType="stationType" :fixed="fixed" :requestPrefix="requestPrefix" :tableHeaderName="title"></time-count> |
||||
</template> |
||||
<script setup> |
||||
import TimeCount from '@/components/TimeCount/index.vue' |
||||
const stationType = ref('E') |
||||
const fixed = ref(1) |
||||
const requestPrefix = ref('sddata') |
||||
const title = '流量时段统计(m³/s)' |
||||
let title = '流量时段统计(m³/s)' |
||||
</script> |
||||
@ -1,11 +1,12 @@
@@ -1,11 +1,12 @@
|
||||
<template> |
||||
<year-eigenvalue :stationType="stationType" :fixed="fixed" :requestPrefix="requestPrefix" :tableTitle="title" :tableName="tableName"></year-eigenvalue> |
||||
<year-eigenvalue :stationType="stationType" :fixed="fixed" :requestPrefix="requestPrefix" :tableHeaderName="tableTitle" :tableName="tableName"></year-eigenvalue> |
||||
</template> |
||||
<script setup> |
||||
import { ref } from 'vue' |
||||
import YearEigenvalue from '@/components/YearEigenvalue/index.vue' |
||||
const stationType = ref('E') |
||||
const fixed = ref(1) |
||||
const requestPrefix = ref('tzzdatahistory') |
||||
let title = '流量年特征值表' |
||||
let tableName=ref('arch_char_q_qflow') |
||||
let tableTitle = ref('流量年特征值表') |
||||
let tableName = ref('arch_char_q_qflow') |
||||
</script> |
||||
@ -0,0 +1,11 @@
@@ -0,0 +1,11 @@
|
||||
<template> |
||||
<time-process :stationType="stationType" :fixed="fixed" :requestPrefix="requestPrefix" :requestPrefixTable="requestPrefixTable" :tableHeaderName="title"></time-process> |
||||
</template> |
||||
<script setup> |
||||
import TimeProcess from '@/components/TimeProcess/index.vue' |
||||
const stationType = ref('B') |
||||
const fixed = ref(1) |
||||
const requestPrefix = ref('/ycriverdata/chartdata') |
||||
const requestPrefixTable = ref('/ycriverdata/gettabledataopen') |
||||
const title = '河道水位时段过程' |
||||
</script> |
||||
@ -0,0 +1,86 @@
@@ -0,0 +1,86 @@
|
||||
<template> |
||||
<div class="report-rain"> |
||||
<div class="tjfx-menu"> |
||||
<el-select v-model="menu" placeholder="请选择"> |
||||
<el-option v-for="dict in tjfxMenus" :key="dict.value" :label="dict.label" :value="dict.value" /> |
||||
</el-select> |
||||
</div> |
||||
<!-- 添加加载状态和错误提示 --> |
||||
<el-empty v-if="componentError" class="error-message" description="组件加载失败，请刷新页面重试" /> |
||||
<component :is="currentComponent" :tableTitle="tableTitle"></component> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup> |
||||
import { ref, computed, defineAsyncComponent } from 'vue' |
||||
|
||||
|
||||
// 定义菜单选项 |
||||
const tjfxMenus = [ |
||||
{ |
||||
value: '1', |
||||
label: '时段过程' |
||||
}, |
||||
{ |
||||
value: '2', |
||||
label: '年特征值' |
||||
}, { |
||||
value: '3', |
||||
label: '时段统计' |
||||
}, { |
||||
value: '4', |
||||
label: '历史同期对比' |
||||
} |
||||
] |
||||
|
||||
// 当前选中的菜单 |
||||
const menu = ref(tjfxMenus.length > 0 ? tjfxMenus[0].value : '') |
||||
|
||||
// 动态组件映射 |
||||
const componentMap = { |
||||
'1': defineAsyncComponent(() => import('@/views/statistic/river/river.vue')), |
||||
'2': defineAsyncComponent(() => import('@/views/statistic/river/rivertzz.vue')), |
||||
'3': defineAsyncComponent(() => import('@/views/statistic/river/riversd.vue')), |
||||
'4': defineAsyncComponent(() => import('@/views/statistic/river/riverls.vue')) |
||||
} |
||||
// 添加错误处理 |
||||
const componentError = ref(false) |
||||
|
||||
onErrorCaptured((error) => { |
||||
componentError.value = true |
||||
return true |
||||
}) |
||||
|
||||
// 计算当前应该显示的组件 |
||||
const currentComponent = computed(() => { |
||||
return componentMap[menu.value] |
||||
}) |
||||
// 原代码有误，tjfxMenus 中的对象没有 name 属性 |
||||
const tableTitle = computed(() => { |
||||
const currentItem = tjfxMenus.find(item => item.value === menu.value); |
||||
return currentItem ? currentItem.label : ''; |
||||
}) |
||||
</script> |
||||
|
||||
<style lang="scss"> |
||||
.tjfx-menu { |
||||
position: absolute; |
||||
right: 25px; |
||||
top: 30px; |
||||
z-index: 999999; |
||||
|
||||
.el-input__wrapper { |
||||
background: #10163A; |
||||
} |
||||
|
||||
.el-input__inner { |
||||
background: #10163A; |
||||
color: #fff; |
||||
border-color: #10163A; |
||||
} |
||||
|
||||
.el-select .el-input .el-select__caret { |
||||
color: #fff !important; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,10 @@
@@ -0,0 +1,10 @@
|
||||
<template> |
||||
<history-yoy :stationType="stationType" :fixed="fixed" :requestPrefix="requestPrefix" :tableHeaderName="title"></history-yoy> |
||||
</template> |
||||
<script setup> |
||||
import HistoryYoy from '@/components/HistoryYOY/index.vue' |
||||
const stationType = ref('B') |
||||
const fixed = ref(1) |
||||
const requestPrefix = ref('history') |
||||
const title = '河道水位历史同期对比' |
||||
</script> |
||||
@ -0,0 +1,10 @@
@@ -0,0 +1,10 @@
|
||||
<template> |
||||
<time-count :stationType="stationType" :fixed="fixed" :requestPrefix="requestPrefix" :tableHeaderName="title"></time-count> |
||||
</template> |
||||
<script setup> |
||||
import TimeCount from '@/components/TimeCount/index.vue' |
||||
const stationType = ref('B') |
||||
const fixed = ref(1) |
||||
const requestPrefix = ref('sddata') |
||||
const title = '河道水位时段统计(m)' |
||||
</script> |
||||
@ -0,0 +1,307 @@
@@ -0,0 +1,307 @@
|
||||
<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="开始时间"> |
||||
<el-date-picker v-model="queryParams.startTime" type="datetime" value-format="MM-DD" 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="MM-DD" format="YYYY-MM-DD HH:mm:ss" placeholder="选择结束时间" :disabled-date="disabledEndDate"> |
||||
</el-date-picker> |
||||
</el-form-item> |
||||
<el-form-item label="年份区间"> |
||||
<el-date-picker class="picker-year" style="width:120px" v-model="yearstart" type="year" value-format="YYYY" placeholder="选择开始年"> |
||||
</el-date-picker> |
||||
<span class="pr10 pl10"> - </span> |
||||
<el-date-picker class="picker-year" style="width:120px" v-model="yearend" type="year" value-format="YYYY" placeholder="选择结束年"> |
||||
</el-date-picker> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<el-button type="primary" icon="Search" @click="handleQuery">查询</el-button> |
||||
</el-form-item> |
||||
<br /> |
||||
<el-form-item label="报表排列方式（按站点）" style="margin-bottom: 0;"> |
||||
<el-radio-group v-model="direction" @change="getList" class="pt10"> |
||||
<el-radio label="zx">纵向</el-radio> |
||||
<el-radio label="hx">横向</el-radio> |
||||
</el-radio-group> |
||||
</el-form-item> |
||||
</el-form> |
||||
</el-card> |
||||
<splitpanes :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="SPLITPANES_CONFIG.MAX_SIZE" ref="firstPane" class="mr10"> |
||||
<e-tree ref="eTreeRef" :stationType="stationType" @stationChange="handleStationChange" @loadingChange="handleStationLoading"></e-tree> |
||||
</pane> |
||||
<pane :size="100 - firstSize" style="height: 100%;"> |
||||
<div class="main-table-header"> |
||||
<div class="table-title">{{tableTitle}}</div> |
||||
</div> |
||||
<el-table v-table-height v-loading="loading" :data="tableData" border :span-method="arraySpanMethod"> |
||||
<el-table-column :align="alignment" v-for="column in tableColumns" :key="column.prop" :prop="column.prop" :label="column.label" :min-width="column.width || 120"> |
||||
</el-table-column> |
||||
</el-table> |
||||
</pane> |
||||
</splitpanes> |
||||
|
||||
</div> |
||||
</template> |
||||
<script setup> |
||||
import dayjs from 'dayjs'; |
||||
import { |
||||
Splitpanes, |
||||
Pane |
||||
} from 'splitpanes' |
||||
import 'splitpanes/dist/splitpanes.css' |
||||
import ETree from '@/components/ETree/index.vue' |
||||
import useAppStore from '@/store/modules/app' |
||||
const device = computed(() => useAppStore().device); |
||||
|
||||
const props = defineProps({ |
||||
}) |
||||
const { |
||||
proxy |
||||
} = getCurrentInstance() |
||||
const { update_type_options } = proxy.useDict("update_type_options") |
||||
const stationType = 'A' |
||||
const alignment = 'center' |
||||
const firstSize = ref(proxy.SPLITPANES_CONFIG.DEFAULT_SIZE) |
||||
const direction = ref('zx') |
||||
const eTreeRef = ref(null) |
||||
let stnmIdsList = [] |
||||
const handleStationLoading = (loadingState) => { |
||||
loading.value = loadingState; |
||||
} |
||||
// 新增处理站点变化的函数 |
||||
const handleStationChange = (stnmIds) => { |
||||
stnmIdsList = stnmIds |
||||
queryParams.stnmIds = stnmIds.join(',') |
||||
if (stnmIdsList.length == 0) { |
||||
proxy.$modal.msgWarning("请选择站点后查询"); |
||||
return |
||||
} else if (stnmIdsList.length > 50) { |
||||
proxy.$modal.msg("站点最多可选择50个"); |
||||
return |
||||
} else { |
||||
getList() |
||||
|
||||
} |
||||
} |
||||
const yearstart = ref(dayjs().subtract(1, 'year').format('YYYY')) |
||||
const yearend = ref(dayjs().format('YYYY')) |
||||
const queryParams = reactive({ |
||||
startTime: dayjs().subtract(7, 'day').format('MM-DD'), |
||||
endTime: dayjs().format('MM-DD'), |
||||
years: `${yearstart.value}-${yearend.value}`, |
||||
stnmIds: '', |
||||
}); |
||||
|
||||
// 禁用开始时间选择器中大于当前时间和结束时间的日期 |
||||
const disabledStartDate = (time) => { |
||||
const endTime = queryParams.endTime ? dayjs(queryParams.endTime) : null; |
||||
return dayjs(time).isAfter(dayjs()) || |
||||
(endTime && dayjs(time).isAfter(endTime)); |
||||
}; |
||||
|
||||
// 禁用结束时间选择器中大于当前时间和小于开始时间的日期 |
||||
const disabledEndDate = (time) => { |
||||
const startTime = queryParams.startTime ? dayjs(queryParams.startTime) : null; |
||||
return dayjs(time).isAfter(dayjs()) || |
||||
(startTime && dayjs(time).isBefore(startTime)); |
||||
}; |
||||
|
||||
const tableTitle = computed(() => { |
||||
const startFormatted = dayjs(queryParams.startTime, 'MM-DD').format('MM月DD日'); |
||||
const endFormatted = dayjs(queryParams.endTime, 'MM-DD').format('MM月DD日'); |
||||
return `${startFormatted}~${endFormatted}历史同期降水量表(mm)`; |
||||
}); |
||||
const tableColumns = ref([]) |
||||
const tableData = ref([]) |
||||
const loading = ref(false) |
||||
|
||||
// 修改 getList 函数来处理动态列和数据 |
||||
const getList = async () => { |
||||
loading.value = true; |
||||
try { |
||||
let res = await proxy.axiosPost2('/report/rainhistorycount', queryParams) |
||||
if (res.code == 0) { |
||||
if (direction.value == 'zx') { |
||||
getZXTableData(res) |
||||
} else { |
||||
getHXTableData(res) |
||||
} |
||||
|
||||
} |
||||
} catch (error) { |
||||
tableColumns.value = []; |
||||
tableData.value = []; |
||||
} finally { |
||||
loading.value = false |
||||
} |
||||
} |
||||
const getZXTableData = (res) => { |
||||
let { year, list, name, max, min } = res.data; |
||||
let columns = [ |
||||
{ |
||||
prop: "station", |
||||
label: "站点" |
||||
}, |
||||
{ |
||||
prop: "type", |
||||
label: "" |
||||
} |
||||
] |
||||
// 添加站点列 |
||||
year.forEach(item => { |
||||
columns.push({ |
||||
prop: item, |
||||
label: item |
||||
}); |
||||
}); |
||||
tableColumns.value = columns |
||||
// 处理数据部分 - 构造两行合并的数据结构 |
||||
const processedData = []; |
||||
|
||||
list.forEach((item, index) => { |
||||
// 第一行：显示站点名称和"雨量" |
||||
const row1 = { |
||||
station: name[index], |
||||
type: "平均水位" |
||||
}; |
||||
year.forEach(y => { |
||||
row1[y] = item[0].value ? item[0].value.toFixed(1) : '-'; |
||||
}); |
||||
// const row2 = { |
||||
// station: name[index], |
||||
// type: "最高水位" |
||||
// }; |
||||
// year.forEach(y => { |
||||
// row2[y] = item[0].value ? item[0].value.toFixed(1) : '-'; |
||||
// }); |
||||
// const row3 = { |
||||
// station: name[index], |
||||
// type: "时间" |
||||
// }; |
||||
// year.forEach(y => { |
||||
// row3[y] = item[0].tm ? item[0].tm : '-'; |
||||
// }); |
||||
// const row4 = { |
||||
// station: name[index], |
||||
// type: "最高水位" |
||||
// }; |
||||
// year.forEach(y => { |
||||
// row4[y] = item[0].value ? item[0].value.toFixed(1) : '-'; |
||||
// }); |
||||
// const row5 = { |
||||
// station: name[index], |
||||
// type: "时间" |
||||
// }; |
||||
// year.forEach(y => { |
||||
// row5[y] = item[0].tm ? item[0].tm : '-'; |
||||
// }); |
||||
processedData.push(row1); |
||||
// processedData.push(row2); |
||||
// processedData.push(row3); |
||||
// processedData.push(row4); |
||||
// processedData.push(row5); |
||||
}); |
||||
console.log(processedData, 'processedData') |
||||
tableData.value = processedData; |
||||
} |
||||
const getHXTableData = (res) => { |
||||
const { year, list, name, max, min } = res.data; |
||||
|
||||
if (!year || !list || !name || !max || !min) { |
||||
console.error('数据缺失:', { year, list, name, max, min }); |
||||
tableData.value = []; |
||||
return; |
||||
} |
||||
|
||||
const columns = name.map(stationName => ({ |
||||
prop: stationName, |
||||
label: stationName |
||||
})); |
||||
|
||||
tableColumns.value = columns; |
||||
console.log(columns, 'tableColumns') |
||||
const processedData = []; |
||||
|
||||
// 添加年份行 |
||||
year.forEach(y => { |
||||
const row = { time: y }; |
||||
name.forEach((stationName, idx) => { |
||||
const stationIndex = name.indexOf(stationName); |
||||
const stationList = list[stationIndex]; |
||||
if (!stationList || stationList.length === 0) { |
||||
row[stationName] = { rain: '-', tm: '-' }; |
||||
return; |
||||
} |
||||
const valueItem = stationList[0]; // 假设只有一个记录 |
||||
row['rain' + idx] = valueItem.value ? valueItem.value.toFixed(1) : '-' |
||||
row['tm' + idx] = valueItem.tm ? valueItem.tm.slice(5) : '-' |
||||
}); |
||||
processedData.push(row); |
||||
}); |
||||
// 添加最大值行 |
||||
processedData.push({ |
||||
time: '最大值', |
||||
...name.reduce((acc, stationName, index) => { |
||||
acc['rain' + index] = max[index]?.value ? max[index]?.value.toFixed(1) : '-'; |
||||
acc['tm' + index] = max[index]?.tm ? max[index].tm : '-'; |
||||
return acc; |
||||
}, {}) |
||||
}); |
||||
|
||||
// 添加最小值行 |
||||
processedData.push({ |
||||
time: '最小值', |
||||
...name.reduce((acc, stationName, index) => { |
||||
acc['rain' + index] = min[index]?.value ? min[index]?.value.toFixed(1) : '-'; |
||||
acc['tm' + index] = min[index]?.tm ? min[index].tm : '-'; |
||||
return acc; |
||||
}, {}) |
||||
}); |
||||
|
||||
tableData.value = processedData; |
||||
}; |
||||
|
||||
// 查询 |
||||
const handleQuery = async () => { |
||||
getList() |
||||
} |
||||
// 行列合并 |
||||
|
||||
const arraySpanMethod = ({ row, column, rowIndex, columnIndex }) => { |
||||
// 获取总列数 |
||||
const columnCount = tableColumns.value.length; |
||||
|
||||
// 如果是最后一列（最大值/最小值列），不进行合并 |
||||
if (columnIndex === columnCount - 1 || columnIndex === columnCount - 2) { |
||||
return [1, 1]; |
||||
} |
||||
|
||||
// 第一列（站点名称列）的合并逻辑 |
||||
if (columnIndex === 0) { |
||||
// 每两行合并一次 |
||||
if (rowIndex % 2 === 0) { |
||||
// 偶数行显示，奇数行隐藏 |
||||
return [2, 1]; |
||||
} else { |
||||
// 隐藏奇数行 |
||||
return [0, 0]; |
||||
} |
||||
} |
||||
|
||||
// 其他数据列的合并逻辑 |
||||
if (rowIndex % 2 === 0) { |
||||
// 偶数行显示，奇数行隐藏 |
||||
return [2, 1]; |
||||
} else { |
||||
// 隐藏奇数行 |
||||
return [0, 0]; |
||||
} |
||||
} |
||||
|
||||
</script> |
||||
<style lang="scss" scoped> |
||||
</style> |
||||
@ -0,0 +1,11 @@
@@ -0,0 +1,11 @@
|
||||
<template> |
||||
<year-eigenvalue :stationType="stationType" :fixed="fixed" :requestPrefix="requestPrefix" :tableHeaderName="title" :tableName="tableName"></year-eigenvalue> |
||||
</template> |
||||
<script setup> |
||||
import YearEigenvalue from '@/components/YearEigenvalue/index.vue' |
||||
const stationType = ref('B') |
||||
const fixed = ref(1) |
||||
const requestPrefix = ref('tzzdatahistory') |
||||
let title = '河道水位年特征值表(m)' |
||||
let tableName=ref('arch_char_river') |
||||
</script> |
||||
@ -1,11 +1,11 @@
@@ -1,11 +1,11 @@
|
||||
<template> |
||||
<year-eigenvalue :stationType="stationType" :fixed="fixed" :requestPrefix="requestPrefix" :tableTitle="title" :tableName="tableName"></year-eigenvalue> |
||||
<year-eigenvalue :stationType="stationType" :fixed="fixed" :requestPrefix="requestPrefix" :tableHeaderName="title" :tableName="tableName"></year-eigenvalue> |
||||
</template> |
||||
<script setup> |
||||
import YearEigenvalue from '@/components/YearEigenvalue/index.vue' |
||||
const stationType = ref('C') |
||||
const fixed = ref(1) |
||||
const requestPrefix = ref('tzzdatahistory') |
||||
let title = '水位年特征值表(m)' |
||||
let title = '水库水位年特征值表(m)' |
||||
let tableName=ref('arch_char_rsvr') |
||||
</script> |
||||
@ -0,0 +1,11 @@
@@ -0,0 +1,11 @@
|
||||
<template> |
||||
<time-process :stationType="stationType" :fixed="fixed" :requestPrefix="requestPrefix" :requestPrefixTable="requestPrefixTable" :tableHeaderName="title"></time-process> |
||||
</template> |
||||
<script setup> |
||||
import TimeProcess from '@/components/TimeProcess/index.vue' |
||||
const stationType = ref('D') |
||||
const fixed = ref(1) |
||||
const requestPrefix = ref('/yctidedata/chartdata') |
||||
const requestPrefixTable = ref('/yctidedata/gettabledataopen') |
||||
const title = '潮位时段过程' |
||||
</script> |
||||
@ -0,0 +1,86 @@
@@ -0,0 +1,86 @@
|
||||
<template> |
||||
<div class="report-rain"> |
||||
<div class="tjfx-menu"> |
||||
<el-select v-model="menu" placeholder="请选择"> |
||||
<el-option v-for="dict in tjfxMenus" :key="dict.value" :label="dict.label" :value="dict.value" /> |
||||
</el-select> |
||||
</div> |
||||
<!-- 添加加载状态和错误提示 --> |
||||
<el-empty v-if="componentError" class="error-message" description="组件加载失败，请刷新页面重试" /> |
||||
<component :is="currentComponent" :tableTitle="tableTitle"></component> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup> |
||||
import { ref, computed, defineAsyncComponent } from 'vue' |
||||
|
||||
|
||||
// 定义菜单选项 |
||||
const tjfxMenus = [ |
||||
{ |
||||
value: '1', |
||||
label: '时段过程' |
||||
}, |
||||
{ |
||||
value: '2', |
||||
label: '年特征值' |
||||
}, { |
||||
value: '3', |
||||
label: '时段统计' |
||||
}, { |
||||
value: '4', |
||||
label: '历史同期对比' |
||||
} |
||||
] |
||||
|
||||
// 当前选中的菜单 |
||||
const menu = ref(tjfxMenus.length > 0 ? tjfxMenus[0].value : '') |
||||
|
||||
// 动态组件映射 |
||||
const componentMap = { |
||||
'1': defineAsyncComponent(() => import('@/views/statistic/tide/tide.vue')), |
||||
'2': defineAsyncComponent(() => import('@/views/statistic/tide/tidetzz.vue')), |
||||
'3': defineAsyncComponent(() => import('@/views/statistic/tide/tidesd.vue')), |
||||
'4': defineAsyncComponent(() => import('@/views/statistic/tide/tidels.vue')) |
||||
} |
||||
// 添加错误处理 |
||||
const componentError = ref(false) |
||||
|
||||
onErrorCaptured((error) => { |
||||
componentError.value = true |
||||
return true |
||||
}) |
||||
|
||||
// 计算当前应该显示的组件 |
||||
const currentComponent = computed(() => { |
||||
return componentMap[menu.value] |
||||
}) |
||||
// 原代码有误，tjfxMenus 中的对象没有 name 属性 |
||||
const tableTitle = computed(() => { |
||||
const currentItem = tjfxMenus.find(item => item.value === menu.value); |
||||
return currentItem ? currentItem.label : ''; |
||||
}) |
||||
</script> |
||||
|
||||
<style lang="scss"> |
||||
.tjfx-menu { |
||||
position: absolute; |
||||
right: 25px; |
||||
top: 30px; |
||||
z-index: 999999; |
||||
|
||||
.el-input__wrapper { |
||||
background: #10163A; |
||||
} |
||||
|
||||
.el-input__inner { |
||||
background: #10163A; |
||||
color: #fff; |
||||
border-color: #10163A; |
||||
} |
||||
|
||||
.el-select .el-input .el-select__caret { |
||||
color: #fff !important; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,10 @@
@@ -0,0 +1,10 @@
|
||||
<template> |
||||
<history-yoy :stationType="stationType" :fixed="fixed" :requestPrefix="requestPrefix" :tableHeaderName="title"></history-yoy> |
||||
</template> |
||||
<script setup> |
||||
import HistoryYoy from '@/components/HistoryYOY/index.vue' |
||||
const stationType = ref('D') |
||||
const fixed = ref(1) |
||||
const requestPrefix = ref('history') |
||||
const title = '潮位历史同期对比' |
||||
</script> |
||||
@ -0,0 +1,10 @@
@@ -0,0 +1,10 @@
|
||||
<template> |
||||
<time-count :stationType="stationType" :fixed="fixed" :requestPrefix="requestPrefix" :tableHeaderName="title"></time-count> |
||||
</template> |
||||
<script setup> |
||||
import TimeCount from '@/components/TimeCount/index.vue' |
||||
const stationType = ref('D') |
||||
const fixed = ref(1) |
||||
const requestPrefix = ref('sddata') |
||||
const title = '潮位时段统计(m)' |
||||
</script> |
||||
@ -0,0 +1,307 @@
@@ -0,0 +1,307 @@
|
||||
<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="开始时间"> |
||||
<el-date-picker v-model="queryParams.startTime" type="datetime" value-format="MM-DD" 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="MM-DD" format="YYYY-MM-DD HH:mm:ss" placeholder="选择结束时间" :disabled-date="disabledEndDate"> |
||||
</el-date-picker> |
||||
</el-form-item> |
||||
<el-form-item label="年份区间"> |
||||
<el-date-picker class="picker-year" style="width:120px" v-model="yearstart" type="year" value-format="YYYY" placeholder="选择开始年"> |
||||
</el-date-picker> |
||||
<span class="pr10 pl10"> - </span> |
||||
<el-date-picker class="picker-year" style="width:120px" v-model="yearend" type="year" value-format="YYYY" placeholder="选择结束年"> |
||||
</el-date-picker> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<el-button type="primary" icon="Search" @click="handleQuery">查询</el-button> |
||||
</el-form-item> |
||||
<br /> |
||||
<el-form-item label="报表排列方式（按站点）" style="margin-bottom: 0;"> |
||||
<el-radio-group v-model="direction" @change="getList" class="pt10"> |
||||
<el-radio label="zx">纵向</el-radio> |
||||
<el-radio label="hx">横向</el-radio> |
||||
</el-radio-group> |
||||
</el-form-item> |
||||
</el-form> |
||||
</el-card> |
||||
<splitpanes :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="SPLITPANES_CONFIG.MAX_SIZE" ref="firstPane" class="mr10"> |
||||
<e-tree ref="eTreeRef" :stationType="stationType" @stationChange="handleStationChange" @loadingChange="handleStationLoading"></e-tree> |
||||
</pane> |
||||
<pane :size="100 - firstSize" style="height: 100%;"> |
||||
<div class="main-table-header"> |
||||
<div class="table-title">{{tableTitle}}</div> |
||||
</div> |
||||
<el-table v-table-height v-loading="loading" :data="tableData" border :span-method="arraySpanMethod"> |
||||
<el-table-column :align="alignment" v-for="column in tableColumns" :key="column.prop" :prop="column.prop" :label="column.label" :min-width="column.width || 120"> |
||||
</el-table-column> |
||||
</el-table> |
||||
</pane> |
||||
</splitpanes> |
||||
|
||||
</div> |
||||
</template> |
||||
<script setup> |
||||
import dayjs from 'dayjs'; |
||||
import { |
||||
Splitpanes, |
||||
Pane |
||||
} from 'splitpanes' |
||||
import 'splitpanes/dist/splitpanes.css' |
||||
import ETree from '@/components/ETree/index.vue' |
||||
import useAppStore from '@/store/modules/app' |
||||
const device = computed(() => useAppStore().device); |
||||
|
||||
const props = defineProps({ |
||||
}) |
||||
const { |
||||
proxy |
||||
} = getCurrentInstance() |
||||
const { update_type_options } = proxy.useDict("update_type_options") |
||||
const stationType = 'A' |
||||
const alignment = 'center' |
||||
const firstSize = ref(proxy.SPLITPANES_CONFIG.DEFAULT_SIZE) |
||||
const direction = ref('zx') |
||||
const eTreeRef = ref(null) |
||||
let stnmIdsList = [] |
||||
const handleStationLoading = (loadingState) => { |
||||
loading.value = loadingState; |
||||
} |
||||
// 新增处理站点变化的函数 |
||||
const handleStationChange = (stnmIds) => { |
||||
stnmIdsList = stnmIds |
||||
queryParams.stnmIds = stnmIds.join(',') |
||||
if (stnmIdsList.length == 0) { |
||||
proxy.$modal.msgWarning("请选择站点后查询"); |
||||
return |
||||
} else if (stnmIdsList.length > 50) { |
||||
proxy.$modal.msg("站点最多可选择50个"); |
||||
return |
||||
} else { |
||||
getList() |
||||
|
||||
} |
||||
} |
||||
const yearstart = ref(dayjs().subtract(1, 'year').format('YYYY')) |
||||
const yearend = ref(dayjs().format('YYYY')) |
||||
const queryParams = reactive({ |
||||
startTime: dayjs().subtract(7, 'day').format('MM-DD'), |
||||
endTime: dayjs().format('MM-DD'), |
||||
years: `${yearstart.value}-${yearend.value}`, |
||||
stnmIds: '', |
||||
}); |
||||
|
||||
// 禁用开始时间选择器中大于当前时间和结束时间的日期 |
||||
const disabledStartDate = (time) => { |
||||
const endTime = queryParams.endTime ? dayjs(queryParams.endTime) : null; |
||||
return dayjs(time).isAfter(dayjs()) || |
||||
(endTime && dayjs(time).isAfter(endTime)); |
||||
}; |
||||
|
||||
// 禁用结束时间选择器中大于当前时间和小于开始时间的日期 |
||||
const disabledEndDate = (time) => { |
||||
const startTime = queryParams.startTime ? dayjs(queryParams.startTime) : null; |
||||
return dayjs(time).isAfter(dayjs()) || |
||||
(startTime && dayjs(time).isBefore(startTime)); |
||||
}; |
||||
|
||||
const tableTitle = computed(() => { |
||||
const startFormatted = dayjs(queryParams.startTime, 'MM-DD').format('MM月DD日'); |
||||
const endFormatted = dayjs(queryParams.endTime, 'MM-DD').format('MM月DD日'); |
||||
return `${startFormatted}~${endFormatted}历史同期降水量表(mm)`; |
||||
}); |
||||
const tableColumns = ref([]) |
||||
const tableData = ref([]) |
||||
const loading = ref(false) |
||||
|
||||
// 修改 getList 函数来处理动态列和数据 |
||||
const getList = async () => { |
||||
loading.value = true; |
||||
try { |
||||
let res = await proxy.axiosPost2('/report/rainhistorycount', queryParams) |
||||
if (res.code == 0) { |
||||
if (direction.value == 'zx') { |
||||
getZXTableData(res) |
||||
} else { |
||||
getHXTableData(res) |
||||
} |
||||
|
||||
} |
||||
} catch (error) { |
||||
tableColumns.value = []; |
||||
tableData.value = []; |
||||
} finally { |
||||
loading.value = false |
||||
} |
||||
} |
||||
const getZXTableData = (res) => { |
||||
let { year, list, name, max, min } = res.data; |
||||
let columns = [ |
||||
{ |
||||
prop: "station", |
||||
label: "站点" |
||||
}, |
||||
{ |
||||
prop: "type", |
||||
label: "" |
||||
} |
||||
] |
||||
// 添加站点列 |
||||
year.forEach(item => { |
||||
columns.push({ |
||||
prop: item, |
||||
label: item |
||||
}); |
||||
}); |
||||
tableColumns.value = columns |
||||
// 处理数据部分 - 构造两行合并的数据结构 |
||||
const processedData = []; |
||||
|
||||
list.forEach((item, index) => { |
||||
// 第一行：显示站点名称和"雨量" |
||||
const row1 = { |
||||
station: name[index], |
||||
type: "平均水位" |
||||
}; |
||||
year.forEach(y => { |
||||
row1[y] = item[0].value ? item[0].value.toFixed(1) : '-'; |
||||
}); |
||||
// const row2 = { |
||||
// station: name[index], |
||||
// type: "最高水位" |
||||
// }; |
||||
// year.forEach(y => { |
||||
// row2[y] = item[0].value ? item[0].value.toFixed(1) : '-'; |
||||
// }); |
||||
// const row3 = { |
||||
// station: name[index], |
||||
// type: "时间" |
||||
// }; |
||||
// year.forEach(y => { |
||||
// row3[y] = item[0].tm ? item[0].tm : '-'; |
||||
// }); |
||||
// const row4 = { |
||||
// station: name[index], |
||||
// type: "最高水位" |
||||
// }; |
||||
// year.forEach(y => { |
||||
// row4[y] = item[0].value ? item[0].value.toFixed(1) : '-'; |
||||
// }); |
||||
// const row5 = { |
||||
// station: name[index], |
||||
// type: "时间" |
||||
// }; |
||||
// year.forEach(y => { |
||||
// row5[y] = item[0].tm ? item[0].tm : '-'; |
||||
// }); |
||||
processedData.push(row1); |
||||
// processedData.push(row2); |
||||
// processedData.push(row3); |
||||
// processedData.push(row4); |
||||
// processedData.push(row5); |
||||
}); |
||||
console.log(processedData, 'processedData') |
||||
tableData.value = processedData; |
||||
} |
||||
const getHXTableData = (res) => { |
||||
const { year, list, name, max, min } = res.data; |
||||
|
||||
if (!year || !list || !name || !max || !min) { |
||||
console.error('数据缺失:', { year, list, name, max, min }); |
||||
tableData.value = []; |
||||
return; |
||||
} |
||||
|
||||
const columns = name.map(stationName => ({ |
||||
prop: stationName, |
||||
label: stationName |
||||
})); |
||||
|
||||
tableColumns.value = columns; |
||||
console.log(columns, 'tableColumns') |
||||
const processedData = []; |
||||
|
||||
// 添加年份行 |
||||
year.forEach(y => { |
||||
const row = { time: y }; |
||||
name.forEach((stationName, idx) => { |
||||
const stationIndex = name.indexOf(stationName); |
||||
const stationList = list[stationIndex]; |
||||
if (!stationList || stationList.length === 0) { |
||||
row[stationName] = { rain: '-', tm: '-' }; |
||||
return; |
||||
} |
||||
const valueItem = stationList[0]; // 假设只有一个记录 |
||||
row['rain' + idx] = valueItem.value ? valueItem.value.toFixed(1) : '-' |
||||
row['tm' + idx] = valueItem.tm ? valueItem.tm.slice(5) : '-' |
||||
}); |
||||
processedData.push(row); |
||||
}); |
||||
// 添加最大值行 |
||||
processedData.push({ |
||||
time: '最大值', |
||||
...name.reduce((acc, stationName, index) => { |
||||
acc['rain' + index] = max[index]?.value ? max[index]?.value.toFixed(1) : '-'; |
||||
acc['tm' + index] = max[index]?.tm ? max[index].tm : '-'; |
||||
return acc; |
||||
}, {}) |
||||
}); |
||||
|
||||
// 添加最小值行 |
||||
processedData.push({ |
||||
time: '最小值', |
||||
...name.reduce((acc, stationName, index) => { |
||||
acc['rain' + index] = min[index]?.value ? min[index]?.value.toFixed(1) : '-'; |
||||
acc['tm' + index] = min[index]?.tm ? min[index].tm : '-'; |
||||
return acc; |
||||
}, {}) |
||||
}); |
||||
|
||||
tableData.value = processedData; |
||||
}; |
||||
|
||||
// 查询 |
||||
const handleQuery = async () => { |
||||
getList() |
||||
} |
||||
// 行列合并 |
||||
|
||||
const arraySpanMethod = ({ row, column, rowIndex, columnIndex }) => { |
||||
// 获取总列数 |
||||
const columnCount = tableColumns.value.length; |
||||
|
||||
// 如果是最后一列（最大值/最小值列），不进行合并 |
||||
if (columnIndex === columnCount - 1 || columnIndex === columnCount - 2) { |
||||
return [1, 1]; |
||||
} |
||||
|
||||
// 第一列（站点名称列）的合并逻辑 |
||||
if (columnIndex === 0) { |
||||
// 每两行合并一次 |
||||
if (rowIndex % 2 === 0) { |
||||
// 偶数行显示，奇数行隐藏 |
||||
return [2, 1]; |
||||
} else { |
||||
// 隐藏奇数行 |
||||
return [0, 0]; |
||||
} |
||||
} |
||||
|
||||
// 其他数据列的合并逻辑 |
||||
if (rowIndex % 2 === 0) { |
||||
// 偶数行显示，奇数行隐藏 |
||||
return [2, 1]; |
||||
} else { |
||||
// 隐藏奇数行 |
||||
return [0, 0]; |
||||
} |
||||
} |
||||
|
||||
</script> |
||||
<style lang="scss" scoped> |
||||
</style> |
||||
@ -0,0 +1,11 @@
@@ -0,0 +1,11 @@
|
||||
<template> |
||||
<year-eigenvalue :stationType="stationType" :fixed="fixed" :requestPrefix="requestPrefix" :tableHeaderName="title" :tableName="tableName"></year-eigenvalue> |
||||
</template> |
||||
<script setup> |
||||
import YearEigenvalue from '@/components/YearEigenvalue/index.vue' |
||||
const stationType = ref('D') |
||||
const fixed = ref(1) |
||||
const requestPrefix = ref('tzzdatahistory') |
||||
let title = '潮位年特征值表' |
||||
let tableName=ref('arch_char_tide') |
||||
</script> |
||||
@ -0,0 +1,10 @@
@@ -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('E') |
||||
const fixed = ref(2) |
||||
const requestPrefix = ref('/ycqflowdata') |
||||
</script> |
||||
@ -0,0 +1,9 @@
@@ -0,0 +1,9 @@
|
||||
<template> |
||||
<zheng-bian :stationType="stationType" :fixed="fixed" :requestPrefix="requestPrefix"></zheng-bian> |
||||
</template> |
||||
<script setup> |
||||
import ZhengBian from '@/components/ZhengBian/index.vue' |
||||
const stationType = ref('B') |
||||
const fixed = ref(2) |
||||
const requestPrefix = ref('/ycriverdata') |
||||
</script> |
||||
@ -0,0 +1,10 @@
@@ -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('D') |
||||
const fixed = ref(2) |
||||
const requestPrefix = ref('/yctidedata') |
||||
</script> |
||||
Loading…
Reference in new issue