@ -2,125 +2,48 @@
@@ -2,125 +2,48 @@
< 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 -cascader v -model = " defaultOption " placeholder = "请选择站点" :options ="selectOptions" style = "width: 250px;" filterable clearable > < / e l - c a s c a d e r >
< el -form -item label = "指标(小于) " >
< el -input v-model ="queryParams.value" placeholder="请输入内容" style="width: 100px;" @keyup.enter.native="handleQuery" > < / el -input >
< / e l - f o r m - i t e m >
< 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 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" @change="(val)=>changeTime(val,'start')" >
< / e l - d a t e - p i c k e r >
< / e l - f o r m - i t e m >
< 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 v-model ="queryParams.endTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD HH:mm:ss" placeholder="选择结束时间" :disabled-date="disabledEndDate" @change="(val)=>changeTime(val,'end') " >
< / e l - d a t e - p i c k e r >
< / e l - f o r m - i t e m >
< el -form -item >
< el -checkbox v-model ="queryParams.xindao" @change='handleQuery' :true-label="1" :false-label="0" > 遥测数据 < / el -checkbox >
< / e l - f o r m - i t e m >
< el -form -item >
< 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 = " 逐时显示 " / >
< / e l - f o r m - i t e m >
< br / >
< el -form -item label = "对比站点" >
< el -cascader v -model = " defaultOption2 " placeholder = "请选择对比站" :options ="selectOptions2" : props = "{multiple: true, }" :show-all-levels ="false" collapse -tags filterable clearable > < / e l - c a s c a d e r >
< / e l - f o r m - i t e m >
< el -form -item >
< el -button type = "primary" @click ="compareQuery" icon = "Search" > 对比查询 < / e l - b u t t o n >
< el -button type = "success" plain icon = "Edit" @click ="updateData" > 数据修改 < / el -button >
< / e l - f o r m - i t e m >
< / e l - f o r m >
< / e l - c a r d >
< 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" >
< 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 >
< / e l - c o l >
< el -col :span ="1.5" >
< el -button type = "success" plain icon = "RefreshRight" @click ="yclUpdate" > 整编 < / el -button >
< / e l - c o l >
< / e l - r o w >
<!-- < el -table v-loading ="loading" :data="tableData1" height="450" border style="width:100%" >
< el -table -column prop = "tm" label = "时间" width = "170" >
< / e l - t a b l e - c o l u m n >
< el -table -column prop = "value" label = "数值" >
< template # default = "scope" >
< el -input type = "text" v -model = " scope.row.value " / >
< / template >
< / e l - t a b l e - c o l u m n >
< / e l - t a b l e > - - >
< vxe -grid v-bind ="gridOptions1" > < / vxe -grid >
< / e l - c o l l a p s e - i t e m >
< 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 >
< / e l - c o l >
< / e l - r o w >
<!-- < el -table v-loading ="loading" :data="tableData1" height="450" border style="width:100%" >
< el -table -column prop = "tm" label = "时间" width = "170" >
< / e l - t a b l e - c o l u m n >
< el -table -column prop = "value" label = "数值" >
< template # default = "scope" >
< el -input type = "text" v -model = " scope.row.value " / >
< / template >
< / e l - t a b l e - c o l u m n >
< / e l - t a b l e > - - >
< vxe -grid v-bind ="gridOptions2" > < / vxe -grid >
< / e l - c o l l a p s e - i t e m >
< 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" >
< / e l - t a b l e - c o l u m n >
< / e l - t a b l e > - - >
< vxe -grid v-bind ="gridOptions3" > < / vxe -grid >
< / e l - c o l l a p s e - i t e m >
< / e l - c o l l a p s e >
< e -tree ref = "eTreeRef" :stationType ="stationType" @stationChange ="handleStationChange" > < / e -tree >
< / pane >
< pane : size = "100 - firstSize" >
< div v -table -height = ' { bottom : 0 } ' style = "width:100%;" >
< TimeBarChart v -loading = " echartsLoading " : legendData = 'legendData' :xAxisData ="xAxisData" :seriesData ="seriesData" :textTitle ="textTitle" :unit ="unit" :echartType ="echartType" / >
< splitpanes horizontal class = "default-theme" :push-other-panes ="false" >
< pane size = "100" class = "mr10" 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" > { { tableTime } } < / span >
< / div >
< / pane >
< / splitpanes >
< 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 >
< / e l - s e l e c t >
< / e l - f o r m - i t e m >
< 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" >
< / e l - d a t e - p i c k e r >
< / e l - f o r m - i t e m >
< 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" >
< / e l - d a t e - p i c k e r >
< / e l - f o r m - i t e m >
< el -form -item label = "替换值" v-if ="form.updateType=='1'" >
< el -input v -model = " form.value1 " placeholder = "请输入替换值" style = "width:220px" / >
< / e l - f o r m - i t e m >
< 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 / > < / e l - i c o n >
< div class = "el-upload__text" >
将文件拖到此处 ， 或 < em > 点击上传 < / em >
< div >
< span > 单位 : < / span > < span id = "title2" > 天 < / span >
< / div >
< / e l - u p l o a d >
< / div >
< / e l - f o r m >
< template # footer >
< div class = "dialog-footer" >
< el -button type = "primary" @click ="submitForm(formRef)" v -loading = ' btnLoading ' > 确 定 < / e l - b u t t o n >
< el -button @click ="cancel" > 取 消 < / el -button >
< / div >
< / template >
< / e l - d i a l o g >
< el -table v -loading = " loading " ref = "myTable" :data ="tableData" height = "94%" border >
< el -table -column :align ="alignment" :width ="item.label=='站点'?'150':tableHead.length<7?'':'200'" :prop ="item.prop" :label ="item.label" v-for ="(item, index) in tableHead" :key ="index" > < / el -table -column >
< / e l - t a b l e >
< / pane >
< / splitpanes >
< / pane >
< / splitpanes >
< / div >
< / template >
< script setup >
@ -130,80 +53,40 @@
@@ -130,80 +53,40 @@
Pane
} from 'splitpanes'
import 'splitpanes/dist/splitpanes.css'
import TimeBarChart from '@/components/ChartsDataZoom /index.vue'
import ETree from '@/components/ETree /index.vue'
import useAppStore from '@/store/modules/app'
const device = computed ( ( ) => useAppStore ( ) . device ) ;
const props = defineProps ( {
stationType : {
type : String ,
default : 'A'
} ,
requestPrefix : {
tableTitle : {
type : String ,
default : '/ycraindata '
default : '连续无雨日统计'
} ,
fixed : {
type : Number ,
default : 1
}
} )
const {
proxy
} = getCurrentInstance ( )
const { update _type _options } = proxy . useDict ( "update_type_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 { proxy } = getCurrentInstance ( )
const stationType = 'A'
const alignment = 'center'
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 {
getList ( )
}
} ) ;
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
startTime : dayjs ( ) . subtract ( 7 , 'day' ) . format ( 'YYYY-MM-DD 08:00:00' ) ,
endTime : dayjs ( ) . format ( 'YYYY-MM-DD 08:00:00' ) ,
value : 1.0
} ) ;
/ / 禁 用 开 始 时 间 选 择 器 中 大 于 当 前 时 间 和 结 束 时 间 的 日 期
@ -219,284 +102,121 @@
@@ -219,284 +102,121 @@
return dayjs ( time ) . isAfter ( dayjs ( ) ) ||
( startTime && dayjs ( time ) . isBefore ( startTime ) ) ;
} ;
const tableTime = ref ( queryParams . startTime . substring ( 0 , 10 ) + " 至 " + queryParams . endTime . substring ( 0 , 10 ) )
const timeType = ref ( 'day' )
/ / 获 取 站 点 级 联 选 择 器 数 据
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 changeTime = ( val , type = 'start' ) => {
if ( type == 'start' ) {
queryParams . startTime = dayjs ( val ) . format ( 'YYYY-MM-DD HH:mm:ss' )
} else {
queryParams . endTime = dayjs ( val ) . format ( 'YYYY-MM-DD HH:mm:ss' )
}
}
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 : 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"
}
] ,
data : [ ]
} )
/ / 获 取 预 处 理 数 据
const drawTable1 = async ( ) => {
gridOptions1 . loading = true
const loading = ref ( false )
const tableData = ref ( [ ] )
const tableHead = ref ( [ ] )
const getList = async ( ) => {
loading . value = 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 ( proxy . fixed )
}
gridOptions1 . data = data
/ / s e l e c t O p t i o n s . v a l u e = r e s . d a t a ;
}
let res = await proxy . axiosPost2 ( '/report/wxjsr' , queryParams )
if ( res . code == 0 ) {
const processedData = processData ( res . data ) ;
tableData . value = processedData ;
} 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
}
}
/ / 获 取 e c h a r t s 数 据
const legendData = ref ( [ ] )
const xAxisData = ref ( [ ] )
const seriesData = ref ( [ ] )
const echartsLoading = ref ( false )
const getEchartsData = async ( ) => {
echartsLoading . value = true
let baseUrl = '/chartdata'
if ( staticType . value == 1 ) {
baseUrl = "/chartdatabyday" ;
}
try {
let url = props . requestPrefix + baseUrl
let res = await proxy . axiosPost2 ( url , queryParams ) ;
if ( res . code === 0 ) {
legendData . value = res . data . legend
/ / 提 取 每 个 s e r i e s 中 d a t a 的 第 一 个 元 素 并 格 式 化 时 间
if ( res . data . series && res . data . series . length > 0 ) {
/ / 假 设 第 一 个 s e r i e s 的 d a t a 包 含 完 整 的 时 间 点
xAxisData . value = res . data . series [ 0 ] . data . map ( item => {
/ / 如 果 i t e m 是 对 象 且 包 含 时 间 字 段
if ( typeof item === 'object' && item !== null ) {
/ / 假 设 时 间 字 段 可 能 是 t m , t i m e , o r t h e f i r s t e l e m e n t
const timeValue = item . tm || item . time || item [ 0 ] ;
return dayjs ( timeValue ) . format ( 'YYYY-MM-DD HH:mm' ) ;
} else {
/ / 如 果 i t e m 直 接 就 是 时 间 值
return dayjs ( item ) . format ( 'YYYY-MM-DD HH:mm' ) ;
}
} ) ;
}
seriesData . value = res . data . series
/ / 动 态 生 成 表 头
const maxPeriods = getMaxPeriodCount ( res . data ) ;
tableHead . value = generateTableHead ( maxPeriods ) ;
}
} catch ( error ) {
console . log ( error )
tableHead . value = [ ] ;
tableData . value = [ ] ;
} finally {
echartsL oading. value = false
loading . value = false ;
}
} ;
/ / 预 处 理 数 据 导 出
const yclExport = ( ) => {
/ / 计 算 所 有 站 点 的 最 大 时 段 数
const getMaxPeriodCount = ( data ) => {
return Math . max ( ... data . data . map ( arr => arr . length ) ) ;
} ;
/ / 动 态 生 成 表 头 （ 列 ）
const generateTableHead = ( maxPeriods ) => {
const head = [
{ prop : '站点' , label : '站点' } ,
] ;
for ( let i = 1 ; i <= maxPeriods ; i ++ ) {
head . push ( { prop : ` 时段 ${ i } ` , label : ` 时段 ${ i } ` } ) ;
}
head . push (
{ prop : '最大连续无效日' , label : '最大连续无效日' } ,
{ prop : '天数累计' , label : '天数累计' } ,
) ;
return head ;
} ;
const processData = ( data ) => {
const result = [ ] ;
const names = data . name ;
const totalDays = data . list ;
const maxIntervals = data . maxList ;
/ / 获 取 最 大 时 段 数
const maxPeriods = getMaxPeriodCount ( data ) ;
data . data . forEach ( ( intervals , index ) => {
const stationName = names [ index ] ;
const totalDay = totalDays [ index ] ;
const maxInterval = maxIntervals [ index ] ;
/ / 排 序 时 间 段 （ 按 开 始 时 间 ）
const sortedIntervals = intervals
. map ( item => ( {
... item ,
start : parseInt ( item . interval . split ( '~' ) [ 0 ] ) ,
} ) )
. sort ( ( a , b ) => a . start - b . start ) ;
/ / 构 造 每 一 列 的 值
const periodValues = [ ] ;
for ( let i = 0 ; i < maxPeriods ; i ++ ) {
const interval = sortedIntervals [ i ] ;
if ( interval ) {
periodValues . push ( ` ${ interval . interval } ( ${ interval . cnt } 日) ` ) ;
} else {
periodValues . push ( '-' ) ;
}
/ / 预 处 理 数 据 整 编
const yclUpdate = ( ) => {
}
/ / 最 大 连 续 无 效 日
const maxPeriod = ` ${ maxInterval . interval } ( ${ maxInterval . cnt } 日) ` ;
/ / 小 时 数 居 导 出
const hourExport = ( ) => { }
/ / 查 询
const handleQuery = async ( ) => {
try {
await Promise . all ( [
drawTable1 ( ) ,
drawTable2 ( ) ,
drawTable3 ( ) ,
getEchartsData ( )
] ) ;
} catch ( error ) {
console . error ( '请求执行出错:' , error ) ;
}
}
/ / 构 建 行 数 据
const row = {
站点 : stationName ,
'最大连续无效日' : maxPeriod ,
'天数累计' : ` ${ totalDay } 日 `
} ;
/ / 对 比 查 询
const compareQuery = ( ) => {
/ / 添 加 动 态 时 段 列
periodValues . forEach ( ( val , i ) => {
row [ ` 时段 ${ i + 1 } ` ] = val ;
} ) ;
}
let open = ref ( false )
const form = reactive ( {
updateType : null
result . push ( row ) ;
} ) ;
/ / 数 据 修 改
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 {
/ / l e t r e s = a w a i t p r o x y . a x i o s P o s t ( ' / r i v e r B a s i n ' , f o r m ) ;
/ / i f ( r e s . c o d e = = = 0 ) {
/ / p r o x y . $ m o d a l . m s g S u c c e s s ( " 修 改 成 功 " ) ;
/ / o p e n . v a l u e = f a l s e ;
/ / g e t L i s t ( ) ;
/ / }
} catch ( error ) { }
}
} )
return result ;
} ;
const handleQuery = ( ) => {
getList ( )
}
onMounted ( ( ) => {
getSingleStation ( ) ;
} )
< / script >
< style lang = "scss" scoped >
: deep ( . el - collapse ) {
border - top : none ! important ;
: deep ( . el - tabs ) ,
: deep ( . el - tabs . el - tabs _ _content ) {
height : 100 % ;
}
< / style >
waibao2
6 days ago