|
|
|
@ -1,126 +1,48 @@ |
|
|
|
|
|
|
|
<!-- 有效降雨日统计 --> |
|
|
|
<template> |
|
|
|
<template> |
|
|
|
<div class="app-container app-container-bg"> |
|
|
|
<div class="app-container app-container-bg"> |
|
|
|
<el-card class="first-card" ref='firstCard' shadow="always"> |
|
|
|
<el-card class="first-card" ref='firstCard' shadow="always"> |
|
|
|
<el-form :model="queryParams" ref="queryForm" :inline="true" @submit.native.prevent> |
|
|
|
<el-form :model="queryParams" ref="queryForm" :inline="true" @submit.native.prevent> |
|
|
|
<el-form-item label="站点"> |
|
|
|
<el-form-item label="指标(大于)"> |
|
|
|
<el-cascader v-model="defaultOption" placeholder="请选择站点" :options="selectOptions" style="width: 250px;" filterable clearable></el-cascader> |
|
|
|
<el-input placeholder="请输入指标(大于)" v-model="queryParams.filterText" clearable @keyup.enter.native="handleQuery"> </el-input> |
|
|
|
</el-form-item> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="开始时间"> |
|
|
|
<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 class="picker-year" v-model="queryParams.startTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD HH:mm:ss" placeholder="选择开始时间"> |
|
|
|
</el-date-picker> |
|
|
|
</el-date-picker> |
|
|
|
</el-form-item> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="结束时间"> |
|
|
|
<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 class="picker-year" v-model="queryParams.endTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD HH:mm:ss" placeholder="选择结束时间"> |
|
|
|
</el-date-picker> |
|
|
|
</el-date-picker> |
|
|
|
</el-form-item> |
|
|
|
</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-form-item> |
|
|
|
<el-button type="primary" icon="Search" @click="handleQuery">查询</el-button> |
|
|
|
<el-button type="primary" icon="Search" @click="handleQuery">查询</el-button> |
|
|
|
<el-switch class="ml20" v-model="staticType" size="large" inline-prompt style="--el-switch-on-color: #13ce66; --el-switch-off-color: #1890FF" active-text="逐日显示" inactive-text="逐时显示" /> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</el-form-item> |
|
|
|
|
|
|
|
<br /> |
|
|
|
|
|
|
|
<el-form-item label="对比站点"> |
|
|
|
|
|
|
|
<el-cascader v-model="defaultOption2" placeholder="请选择对比站" :options="selectOptions2" :props="{multiple: true, }" :show-all-levels="false" collapse-tags filterable clearable></el-cascader> |
|
|
|
|
|
|
|
</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-item> |
|
|
|
</el-form> |
|
|
|
</el-form> |
|
|
|
</el-card> |
|
|
|
</el-card> |
|
|
|
<splitpanes :horizontal="device === 'mobile'" class="el-card-p card-shadow carder-border mt10 pad10 default-theme container-box" :push-other-panes="false"> |
|
|
|
<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"> |
|
|
|
<pane :size="firstSize" :min-size="SPLITPANES_CONFIG.MIN_SIZE" :max-size="SPLITPANES_CONFIG.MAX_SIZE" ref="firstPane" class="mr10"> |
|
|
|
<el-collapse v-model="activeName" accordion @change="handleChangeCollapse"> |
|
|
|
<e-tree ref="eTreeRef" :stationType="stationType" @stationChange="handleStationChange" @loadingChange="handleStationLoading"></e-tree> |
|
|
|
<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> |
|
|
|
|
|
|
|
<!-- <el-table v-loading="loading" :data="tableData1" height="450" border style="width:100%"> |
|
|
|
|
|
|
|
<el-table-column prop="tm" label="时间" width="170"> |
|
|
|
|
|
|
|
</el-table-column> |
|
|
|
|
|
|
|
<el-table-column prop="value" label="数值"> |
|
|
|
|
|
|
|
<template #default="scope"> |
|
|
|
|
|
|
|
<el-input type="text" v-model="scope.row.value" /> |
|
|
|
|
|
|
|
</template> |
|
|
|
|
|
|
|
</el-table-column> |
|
|
|
|
|
|
|
</el-table> --> |
|
|
|
|
|
|
|
<vxe-grid 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> |
|
|
|
|
|
|
|
<!-- <el-table v-loading="loading" :data="tableData1" height="450" border style="width:100%"> |
|
|
|
|
|
|
|
<el-table-column prop="tm" label="时间" width="170"> |
|
|
|
|
|
|
|
</el-table-column> |
|
|
|
|
|
|
|
<el-table-column prop="value" label="数值"> |
|
|
|
|
|
|
|
<template #default="scope"> |
|
|
|
|
|
|
|
<el-input type="text" v-model="scope.row.value" /> |
|
|
|
|
|
|
|
</template> |
|
|
|
|
|
|
|
</el-table-column> |
|
|
|
|
|
|
|
</el-table> --> |
|
|
|
|
|
|
|
<vxe-grid v-bind="gridOptions2"></vxe-grid> |
|
|
|
|
|
|
|
</el-collapse-item> |
|
|
|
|
|
|
|
<el-collapse-item title="遥测数据" name="3"> |
|
|
|
|
|
|
|
<!-- <el-table :data="tableData3" height="450" border> |
|
|
|
|
|
|
|
<el-table-column width="180" :prop="item.prop" :label="item.label" v-for="(item, index) in tableHead" :key="index"> |
|
|
|
|
|
|
|
</el-table-column> |
|
|
|
|
|
|
|
</el-table> --> |
|
|
|
|
|
|
|
<vxe-grid v-bind="gridOptions3"></vxe-grid> |
|
|
|
|
|
|
|
</el-collapse-item> |
|
|
|
|
|
|
|
</el-collapse> |
|
|
|
|
|
|
|
</pane> |
|
|
|
</pane> |
|
|
|
<pane :size="100 - firstSize"> |
|
|
|
<pane :size="100 - firstSize" style="height: 100%;"> |
|
|
|
<div v-table-height='{bottom:0}' style="width:100%;"> |
|
|
|
<div class="main-table-header"> |
|
|
|
<TimeBarChart v-loading="echartsLoading" :legendData='legendData' :xAxisData="xAxisData" :seriesData="seriesData" :textTitle="textTitle" :unit="unit" :echartType="echartType" /> |
|
|
|
<div class="table-title">{{tableTitle}}</div> |
|
|
|
|
|
|
|
<div class="table-time mb5"> |
|
|
|
|
|
|
|
<div> |
|
|
|
|
|
|
|
<span>时间: </span><span id="title1">{{ tableTime}}</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</pane> |
|
|
|
<div> |
|
|
|
</splitpanes> |
|
|
|
<span>单位: </span><span id="title2">天</span> |
|
|
|
<el-dialog class="custom-dialog" title="数据修改" v-model="open" width="500px" append-to-body> |
|
|
|
|
|
|
|
<el-form ref="formRef" :model="form" :rules="rules" label-width="auto"> |
|
|
|
|
|
|
|
<el-form-item label="修改方式" prop="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="开始时间" 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" class="w320"> |
|
|
|
|
|
|
|
</el-date-picker> |
|
|
|
|
|
|
|
</el-form-item> |
|
|
|
|
|
|
|
<el-form-item label="结束时间" 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" class="w320"> |
|
|
|
|
|
|
|
</el-date-picker> |
|
|
|
|
|
|
|
</el-form-item> |
|
|
|
|
|
|
|
<el-form-item label="替换值" 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 action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" multiple> |
|
|
|
|
|
|
|
<el-icon class="el-icon--upload"><upload-filled /></el-icon> |
|
|
|
|
|
|
|
<div class="el-upload__text"> |
|
|
|
|
|
|
|
将文件拖到此处，或<em>点击上传</em> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</el-upload> |
|
|
|
|
|
|
|
</div> |
|
|
|
</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> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
<el-table v-table-height v-loading="loading" :data="tableData" border :span-method="arraySpanMethod"> |
|
|
|
</el-dialog> |
|
|
|
<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> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
<script setup> |
|
|
|
<script setup> |
|
|
|
@ -130,373 +52,165 @@ |
|
|
|
Pane |
|
|
|
Pane |
|
|
|
} from 'splitpanes' |
|
|
|
} from 'splitpanes' |
|
|
|
import 'splitpanes/dist/splitpanes.css' |
|
|
|
import 'splitpanes/dist/splitpanes.css' |
|
|
|
import TimeBarChart from '@/components/ChartsTimeBar/index.vue' |
|
|
|
import ETree from '@/components/ETree/index.vue' |
|
|
|
|
|
|
|
|
|
|
|
import useAppStore from '@/store/modules/app' |
|
|
|
import useAppStore from '@/store/modules/app' |
|
|
|
const device = computed(() => useAppStore().device); |
|
|
|
const device = computed(() => useAppStore().device); |
|
|
|
|
|
|
|
|
|
|
|
const props = defineProps({ |
|
|
|
const props = defineProps({ |
|
|
|
stationType: { |
|
|
|
tableTitle: { |
|
|
|
type: String, |
|
|
|
type: String, |
|
|
|
default: 'A' |
|
|
|
default: '表格标题' |
|
|
|
}, |
|
|
|
}, |
|
|
|
requestPrefix: { |
|
|
|
|
|
|
|
type: String, |
|
|
|
|
|
|
|
default: '/ycraindata' |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
fixed: { |
|
|
|
|
|
|
|
type: Number, |
|
|
|
|
|
|
|
default: 1 |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}) |
|
|
|
}) |
|
|
|
const { |
|
|
|
const { |
|
|
|
proxy |
|
|
|
proxy |
|
|
|
} = getCurrentInstance() |
|
|
|
} = getCurrentInstance() |
|
|
|
const { update_type_options } = proxy.useDict("update_type_options") |
|
|
|
// const { } = proxy.useDict("") |
|
|
|
|
|
|
|
|
|
|
|
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 staticType = ref(0) |
|
|
|
|
|
|
|
const queryParams = reactive({ |
|
|
|
|
|
|
|
startTime: dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), |
|
|
|
|
|
|
|
endTime: dayjs().format('YYYY-MM-DD HH:mm:ss'), |
|
|
|
|
|
|
|
xindao: 1, |
|
|
|
|
|
|
|
stnmId: null, |
|
|
|
|
|
|
|
dataType: staticType.value, |
|
|
|
|
|
|
|
chartType: echartType.value |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 禁用开始时间选择器中大于当前时间和结束时间的日期 |
|
|
|
|
|
|
|
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 selectOptions = ref([]); |
|
|
|
|
|
|
|
const selectOptions2 = ref([]); |
|
|
|
|
|
|
|
const defaultOption = ref([]) |
|
|
|
|
|
|
|
const defaultOption2 = ref([]) |
|
|
|
|
|
|
|
const getSingleStation = async () => { |
|
|
|
|
|
|
|
let res = await proxy.axiosGet('/basic/stype/getTreeStation2New/' + 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 |
|
|
|
|
|
|
|
try { |
|
|
|
|
|
|
|
await Promise.all([ |
|
|
|
|
|
|
|
drawTable1(), |
|
|
|
|
|
|
|
drawTable2(), |
|
|
|
|
|
|
|
drawTable3(), |
|
|
|
|
|
|
|
getEchartsData() |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
]); |
|
|
|
|
|
|
|
} catch (error) { |
|
|
|
|
|
|
|
console.error('请求执行出错:', error); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const stationType = 'A' |
|
|
|
|
|
|
|
const alignment = 'center' |
|
|
|
const firstSize = ref(proxy.SPLITPANES_CONFIG.DEFAULT_SIZE) |
|
|
|
const firstSize = ref(proxy.SPLITPANES_CONFIG.DEFAULT_SIZE) |
|
|
|
|
|
|
|
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 activeName = ref('1') |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const tableData1 = ref([]) |
|
|
|
|
|
|
|
const tableData2 = ref([]) |
|
|
|
|
|
|
|
const tableData3 = ref([]) |
|
|
|
|
|
|
|
// 折叠面板事件 |
|
|
|
|
|
|
|
const handleChangeCollapse = (val) => { } |
|
|
|
|
|
|
|
// 基础共享配置 |
|
|
|
|
|
|
|
const baseGridOptions = { |
|
|
|
|
|
|
|
border: true, |
|
|
|
|
|
|
|
loading: false, |
|
|
|
|
|
|
|
showOverflow: false, |
|
|
|
|
|
|
|
height: 450, |
|
|
|
|
|
|
|
columnConfig: { |
|
|
|
|
|
|
|
resizable: true |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
virtualYConfig: { |
|
|
|
|
|
|
|
enabled: true, |
|
|
|
|
|
|
|
gt: 0 |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
// 预处理数据表格配置 |
|
|
|
|
|
|
|
const gridOptions1 = reactive({ |
|
|
|
|
|
|
|
...baseGridOptions, |
|
|
|
|
|
|
|
columns: [{ |
|
|
|
|
|
|
|
title: '时间', |
|
|
|
|
|
|
|
field: 'tm', |
|
|
|
|
|
|
|
width: 160, |
|
|
|
|
|
|
|
align: "center" |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
title: '数值', |
|
|
|
|
|
|
|
field: 'value', |
|
|
|
|
|
|
|
align: "center" |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
], |
|
|
|
const tableTime = computed(() => { |
|
|
|
data: [] |
|
|
|
let startTime = dayjs(queryParams.startTime).format('YYYY-MM-DD') |
|
|
|
|
|
|
|
let endTime = dayjs(queryParams.endTime).format('YYYY-MM-DD') |
|
|
|
|
|
|
|
return `${startTime} 至 ${endTime}` |
|
|
|
}) |
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const queryParams = reactive({ |
|
|
|
|
|
|
|
startTime: dayjs().subtract(7, 'day').format('YYYY-MM-DD 08:00:00'), |
|
|
|
|
|
|
|
endTime: dayjs().format('YYYY-MM-DD 08:00:00'), |
|
|
|
|
|
|
|
stnmIds: '', |
|
|
|
|
|
|
|
filterText: 1.0, |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 获取预处理数据 |
|
|
|
const tableColumns = ref([]) |
|
|
|
const drawTable1 = async () => { |
|
|
|
const tableData = ref([]) |
|
|
|
gridOptions1.loading = true |
|
|
|
const loading = ref(false) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 修改 getList 函数来处理动态列和数据 |
|
|
|
|
|
|
|
const getList = async () => { |
|
|
|
|
|
|
|
loading.value = true; |
|
|
|
try { |
|
|
|
try { |
|
|
|
let url = props.requestPrefix + '/originaldata' |
|
|
|
let res = await proxy.axiosPost2('/report/yxjsr', queryParams) |
|
|
|
let res = await proxy.axiosPost2(url, queryParams); |
|
|
|
if (res.code == 0) { |
|
|
|
if (res.code === 0) { |
|
|
|
getZXTableData(res) |
|
|
|
let data = res.data; |
|
|
|
|
|
|
|
for (var i = 0; i < data.length; i++) { |
|
|
|
|
|
|
|
data[i].value = data[i].value.toFixed(proxy.fixed) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
gridOptions1.data = data |
|
|
|
|
|
|
|
// selectOptions.value = res.data; |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
} catch (error) { |
|
|
|
} catch (error) { |
|
|
|
|
|
|
|
tableColumns.value = []; |
|
|
|
|
|
|
|
tableData.value = []; |
|
|
|
} finally { |
|
|
|
} finally { |
|
|
|
gridOptions1.loading = false |
|
|
|
loading.value = false |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
// 小时/摘录数据表格配置 |
|
|
|
const getZXTableData = (res) => { |
|
|
|
const gridOptions2 = reactive({ |
|
|
|
let { year, list, name, max, min } = res.data; |
|
|
|
...baseGridOptions, |
|
|
|
let columns = [ |
|
|
|
columns: [{ |
|
|
|
{ |
|
|
|
title: '时间', |
|
|
|
prop: "station", |
|
|
|
field: 'tm', |
|
|
|
label: "站点" |
|
|
|
width: 160, |
|
|
|
|
|
|
|
align: "center" |
|
|
|
|
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
{ |
|
|
|
title: '数值', |
|
|
|
prop: "type", |
|
|
|
field: 'value', |
|
|
|
label: "" |
|
|
|
align: "center" |
|
|
|
} |
|
|
|
} |
|
|
|
] |
|
|
|
], |
|
|
|
// 添加站点列 |
|
|
|
data: [] |
|
|
|
year.forEach(item => { |
|
|
|
}) |
|
|
|
columns.push({ |
|
|
|
// 获取小时数居 |
|
|
|
prop: item, |
|
|
|
const drawTable2 = async () => { |
|
|
|
label: item |
|
|
|
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" |
|
|
|
|
|
|
|
}); |
|
|
|
}); |
|
|
|
} |
|
|
|
columns.push( |
|
|
|
} |
|
|
|
|
|
|
|
gridOptions3.columns = tableColumn; |
|
|
|
{ |
|
|
|
gridOptions3.data = data |
|
|
|
prop: "max", |
|
|
|
} |
|
|
|
label: "最大值", |
|
|
|
gridOptions3.loading = false |
|
|
|
}, |
|
|
|
} catch (error) { |
|
|
|
{ |
|
|
|
gridOptions3.loading = false |
|
|
|
prop: "min", |
|
|
|
} |
|
|
|
label: "最小值", |
|
|
|
} |
|
|
|
} |
|
|
|
// 获取echarts数据 |
|
|
|
); |
|
|
|
const legendData = ref([]) |
|
|
|
tableColumns.value = columns |
|
|
|
const xAxisData = ref([]) |
|
|
|
// 处理数据部分 - 构造两行合并的数据结构 |
|
|
|
const seriesData = ref([]) |
|
|
|
const processedData = []; |
|
|
|
const echartsLoading = ref(false) |
|
|
|
|
|
|
|
const getEchartsData = async () => { |
|
|
|
list.forEach((item, index) => { |
|
|
|
echartsLoading.value = true |
|
|
|
// 第一行：显示站点名称和"雨量" |
|
|
|
let baseUrl = '/chartdata' |
|
|
|
const row1 = { |
|
|
|
if (staticType.value == 1) { |
|
|
|
station: name[index], |
|
|
|
baseUrl = "/chartdatabyday"; |
|
|
|
type: "天数" |
|
|
|
} |
|
|
|
|
|
|
|
try { |
|
|
|
|
|
|
|
let url = props.requestPrefix + baseUrl |
|
|
|
|
|
|
|
let res = await proxy.axiosPost2(url, queryParams); |
|
|
|
|
|
|
|
if (res.code === 0) { |
|
|
|
|
|
|
|
legendData.value = res.data.legend |
|
|
|
|
|
|
|
// 提取每个series中data的第一个元素并格式化时间 |
|
|
|
|
|
|
|
if (res.data.series && res.data.series.length > 0) { |
|
|
|
|
|
|
|
// 假设第一个series的data包含完整的时间点 |
|
|
|
|
|
|
|
xAxisData.value = res.data.series[0].data.map(item => { |
|
|
|
|
|
|
|
// 如果item是对象且包含时间字段 |
|
|
|
|
|
|
|
if (typeof item === 'object' && item !== null) { |
|
|
|
|
|
|
|
// 假设时间字段可能是tm, time, or the first element |
|
|
|
|
|
|
|
const timeValue = item.tm || item.time || item[0]; |
|
|
|
|
|
|
|
return dayjs(timeValue).format('YYYY-MM-DD HH:mm'); |
|
|
|
|
|
|
|
} else { |
|
|
|
|
|
|
|
// 如果item直接就是时间值 |
|
|
|
|
|
|
|
return dayjs(item).format('YYYY-MM-DD HH:mm'); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
seriesData.value = res.data.series |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} catch (error) { |
|
|
|
|
|
|
|
console.log(error) |
|
|
|
|
|
|
|
} finally { |
|
|
|
|
|
|
|
echartsLoading.value = false |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 填充年份数据 |
|
|
|
|
|
|
|
year.forEach(y => { |
|
|
|
|
|
|
|
row1[y] = item[0].value ? item[0].value.toFixed(1) : '-'; |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
// 预处理数据导出 |
|
|
|
// 处理最大值和最小值的第一部分（数值） |
|
|
|
const yclExport = () => { |
|
|
|
row1.max = max[index] && max[index].value ? max[index].value.toFixed(1) : ''; |
|
|
|
|
|
|
|
row1.min = min[index] && min[index].value ? min[index].value.toFixed(1) : ''; |
|
|
|
|
|
|
|
// // 第二行：显示空的站点名称和"时间" |
|
|
|
|
|
|
|
const row2 = { |
|
|
|
|
|
|
|
station: name[index], |
|
|
|
|
|
|
|
type: "时间" |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
// 填充年份数据对应的时间 |
|
|
|
// 预处理数据整编 |
|
|
|
year.forEach(y => { |
|
|
|
const yclUpdate = () => { |
|
|
|
row2[y] = item[0].tm ? item[0].tm.slice(5) : '-'; |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
// 处理最大值和最小值的第二部分（时间） |
|
|
|
|
|
|
|
row2.max = max[index] && max[index].tm ? max[index].tm : ''; |
|
|
|
|
|
|
|
row2.min = min[index] && min[index].tm ? min[index].tm : ''; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
processedData.push(row1); |
|
|
|
|
|
|
|
processedData.push(row2); |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
console.log(processedData, 'processedData') |
|
|
|
|
|
|
|
tableData.value = processedData; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 小时数居导出 |
|
|
|
|
|
|
|
const hourExport = () => { } |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 查询 |
|
|
|
// 查询 |
|
|
|
const handleQuery = async () => { |
|
|
|
const handleQuery = async () => { |
|
|
|
try { |
|
|
|
getList() |
|
|
|
await Promise.all([ |
|
|
|
} |
|
|
|
drawTable1(), |
|
|
|
// 行列合并 |
|
|
|
drawTable2(), |
|
|
|
const arraySpanMethod = ({ row, column, rowIndex, columnIndex }) => { |
|
|
|
drawTable3(), |
|
|
|
if (columnIndex === 0) { |
|
|
|
getEchartsData() |
|
|
|
// 每两行合并一次 |
|
|
|
|
|
|
|
if (rowIndex % 2 === 0) { |
|
|
|
]); |
|
|
|
// 偶数行显示，奇数行隐藏 |
|
|
|
} catch (error) { |
|
|
|
return [2, 1]; |
|
|
|
console.error('请求执行出错:', error); |
|
|
|
} else { |
|
|
|
} |
|
|
|
// 隐藏奇数行 |
|
|
|
} |
|
|
|
return [0, 0]; |
|
|
|
|
|
|
|
|
|
|
|
// 对比查询 |
|
|
|
|
|
|
|
const compareQuery = () => { |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
let open = ref(false) |
|
|
|
|
|
|
|
const form = reactive({ |
|
|
|
|
|
|
|
updateType: null |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
// 数据修改 |
|
|
|
|
|
|
|
const updateData = () => { |
|
|
|
|
|
|
|
open.value = true |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
/**************************************************** 数据修改弹窗 ******************************************************/ |
|
|
|
|
|
|
|
let formRef = ref(null) |
|
|
|
|
|
|
|
// 取消按钮 |
|
|
|
|
|
|
|
const cancel = () => { |
|
|
|
|
|
|
|
open.value = false; |
|
|
|
|
|
|
|
reset(); |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
const reset = () => { |
|
|
|
|
|
|
|
Object.assign(form, {}); |
|
|
|
|
|
|
|
proxy.resetForm("formRef"); |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
/** 提交按钮 */ |
|
|
|
|
|
|
|
const submitForm = async (formEl) => { |
|
|
|
|
|
|
|
if (!formEl) return |
|
|
|
|
|
|
|
await formEl.validate(async (valid, fields) => { |
|
|
|
|
|
|
|
if (valid) { |
|
|
|
|
|
|
|
try { |
|
|
|
|
|
|
|
// let res = await proxy.axiosPost('/riverBasin', form); |
|
|
|
|
|
|
|
// if (res.code === 0) { |
|
|
|
|
|
|
|
// proxy.$modal.msgSuccess("修改成功"); |
|
|
|
|
|
|
|
// open.value = false; |
|
|
|
|
|
|
|
// getList(); |
|
|
|
|
|
|
|
// } |
|
|
|
|
|
|
|
} catch (error) { } |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
onMounted(() => { |
|
|
|
|
|
|
|
getSingleStation(); |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
</script> |
|
|
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
|
|
<style lang="scss" scoped> |
|
|
|
:deep(.el-collapse) { |
|
|
|
|
|
|
|
border-top: none !important; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
</style> |
|
|
|
</style> |
waibao2
1 month ago