@ -9,499 +9,195 @@
< / route >
< template >
< PageLayout navTitle = "历史数据图表" backRouteName = "index" routeMethod = "pushTab" >
< view class = "chart-container" >
< view class = "chart-header" >
< view class = "chart-title-container" >
< text class = "chart-title" > { { chartTitle } } < / text >
< PageLayout :navbarShow ="false" class = "page-layout" >
< view style = "color: blue;font-size:18px;text-align: center;margin: 10px;width: 100%;" >
< wd -text : text = "jldData.jldname+ '日报数据'" style = "color: blue;font-size:18px;" > < / w d - t e x t >
{ { startTime } }
< / view >
< view >
< uni -datetime -picker type = "daterange" v -model = " lssjTimeRange " @change ="getTime" start -placeholder = " 开始时间 "
end - placeholder = "结束时间" >
< / u n i - d a t e t i m e - p i c k e r >
< / view >
< view style = "text-align: center;padding: 5px;" >
< wd -button custom -class = " custom -value " size = "small" plain clickable @click ="handleForward" > 上一月 < / wd -button >
< wd -button custom -class = " custom -value " size = "small" plain clickable @click ="handleThis" > 本月 < / wd -button >
< wd -button custom -class = " custom -value " size = "small" plain clickable @click ="handleNext" > 后一月 < / wd -button >
< wd -button custom -class = " custom -value " size = "small" plain clickable @click ="handleQuery" > 查询数据 < / wd -button >
< wd -button custom -class = " custom -value " size = "small" plain clickable @click ="handleDrawLine" > 生成曲线 < / wd -button >
< / view >
< view >
< scroll -view direction = "vertical" style = "height: 200px;" >
< wd -table :data ="chartData" height = "200px" >
< wd -table -col prop = "scrq" label = "日期" align = "center" > < / w d - t a b l e - c o l >
< wd -table -col prop = "jldname" label = "计量点名称" align = "center" > < / w d - t a b l e - c o l >
< wd -table -col prop = "ljql" label = "流量(m³)" align = "center" >
< / w d - t a b l e - c o l >
< / w d - t a b l e >
< / s c r o l l - v i e w >
< / view >
< view v-if ="drawLineFlag" >
< cxc -szcx -multiLineChart :data-list ="chartData" x -field = " scrq "
: y - fields = "lineFields" > < / c x c - s z c x - m u l t i L i n e C h a r t >
< / view >
< view class = "filter-section" >
< view class = "date-picker" >
< uni -datetime -picker type = "datetimerange" v -model = " lssjTimeRang " @change ="getTime"
: placeholder = "['开始时间', '结束时间']" / >
< / view >
< view class = "checkbox-container" >
< label class = "checkbox" >
< checkbox :checked ="tableVisibled" @change ="onChangeTable" / >
< text > { { checkBoxText } } < / text >
< / label >
< / view >
< / view >
< / view >
<!-- 图表容器 -- >
< view id = "myCharts" class = "chart" > < / view >
<!-- 数据表格 -- >
< view v-if ="tableVisibled" class="table-container" >
< uni -table border stripe emptyText = "暂无数据" :loading ="loading" >
< uni -tr >
< uni -th width = "60" align = "center" > 序号 < / u n i - t h >
< uni -th align = "center" > 日期时间 < / u n i - t h >
< uni -th align = "center" > 温度 ( ℃ ) < / u n i - t h >
< uni -th align = "center" > 压力 ( MPa ) < / u n i - t h >
< uni -th align = "center" > 压差 ( kPa ) < / u n i - t h >
< uni -th align = "center" > 瞬时量 ( Nm³ / d ) < / u n i - t h >
< uni -th align = "center" > 今日量 ( m³ ) < / u n i - t h >
< uni -th align = "center" > 今日时间 ( 分 ) < / u n i - t h >
< uni -th align = "center" > 仪表状态 < / u n i - t h >
< / u n i - t r >
< uni -tr v-for ="(item, index) in dataSource" :key ="index" >
< uni -td align = "center" > { { index + 1 } } < / u n i - t d >
< uni -td align = "center" > { { formatTableTime ( item . createTime ) } } < / u n i - t d >
< uni -td align = "center" > { { item . wd } } < / u n i - t d >
< uni -td align = "center" > { { item . yl } } < / u n i - t d >
< uni -td align = "center" > { { item . yc } } < / u n i - t d >
< uni -td align = "center" > { { item . ssll } } < / u n i - t d >
< uni -td align = "center" > { { item . jrl } } < / u n i - t d >
< uni -td align = "center" > { { item . jrsj } } < / u n i - t d >
< uni -td align = "center" > { { item . zt } } < / u n i - t d >
< / u n i - t r >
< / u n i - t a b l e >
< view class = "pagination" >
< uni -pagination :current ="ipagination.current" :pageSize ="ipagination.pageSize"
: total = "ipagination.total" @ change = "handlePageChange" showTotal / >
< / view >
< / view >
< / view >
< / PageLayout >
< / template >
< script setup >
import {
ref ,
onMounted ,
onUnmounted ,
watch ,
nextTick
} from 'vue'
import {
onLoad
} from '@dcloudio/uni-app'
queryJldRbDataByJldID
} from '@/api/production'
import {
formatDate
} from '@/utils/dateTime.ts'
} from '@/utils/dateTime.ts' ;
import {
ref ,
onMounted ,
computed ,
nextTick ,
watchEffect ,
onUnmounted ,
} from 'vue' ;
const lineFields = ref ( [
{
name : '日流量' ,
field : 'ljql' ,
min : '0' ,
max : '500000' ,
unit : '10^4m³'
}
] )
/ / 定 义 p r o p s
const props = defineProps ( {
lineData : {
jldData : {
type : Object ,
default : ( ) => ( { } )
default : ( ) => { }
}
} )
const chartData = ref ( [ ] )
const drawLineFlag = ref ( false )
/ / 数 据 声 明
const urljlByJldID = ref ( 'https://szcx.zyyt.sinopec.com/Gyk/jldls/cxcSssjLssjJldls/getLssjByJldId' )
function handleQuery ( ) {
const dwmc = props . jldData . qu ;
const zcmc = props . jldData . zhan ;
const jldmc = props . jldData . jldname ;
console . log ( dwmc , zcmc , jldmc )
queryJldRbDataByJldID ( {
fenzu : 'a.scrq' ,
dwmc : dwmc ,
zcmc : zcmc ,
jldname : jldmc ,
startTime : startTime . value ,
endTime : endTime . value
} ) . then ( res => {
console . log ( res )
chartData . value = res . result
const colorData = [ {
color : '#000000'
} ,
{
color : '#00007f'
} ,
{
color : '#ff0000'
} ,
{
color : '#005500'
} ,
{
color : '#55007f'
} ,
{
color : '#ffff00'
}
]
const option = ref ( { } )
const legendData = ref ( [ ] )
const xData = ref ( [ ] )
const yaxis = ref ( {
type : 'value' ,
name : '' ,
min : 0 ,
max : 500 ,
position : 'left' ,
axisLabel : {
formatter : '{value}'
} ,
axisLine : {
lineStyle : {
color : '#61A0A8'
}
}
} )
const yAxis = ref ( [ ] )
const series = ref ( [ ] )
const serie = ref ( {
field : '' ,
name : '' ,
showSymbol : false ,
type : 'line' ,
data : [ ] ,
yAxisIndex : 1 ,
lineStyle : {
color : '#61A0A8' ,
width : 1
} ,
connectNulls : false
} )
const tableVisibled = ref ( false )
const checkBoxText = ref ( '显示历史报表' )
const dataSource = ref ( [ ] )
const loading = ref ( false )
const ipagination = ref ( {
current : 1 ,
pageSize : 10 ,
total : 0
} )
}
const jldID = ref ( '' )
const jldName = ref ( '' )
const chartTitle = ref ( '' )
const lineName = ref ( [ ] )
function handleDrawLine ( ) {
drawLineFlag . value = true
}
/ / 前 一 天 - 以 当 前 选 择 的 起 始 日 期 为 基 准 计 算
function handleForward ( ) {
const now = new Date ( startTime . value ) ;
now . setMonth ( now . getMonth ( ) - 1 ) ;
const year = now . getFullYear ( ) ;
const month = now . getMonth ( ) ;
const firstDay = new Date ( year , month , 1 ) ;
const lastDay = new Date ( year , month + 1 , 0 ) ;
startTime . value = formatDate ( firstDay , "YYYY-MM-DD" ) ;
endTime . value = formatDate ( lastDay , "YYYY-MM-DD" ) ;
lssjTimeRange . value = [ formatDate ( firstDay , "YYYY-MM-DD" ) , formatDate ( lastDay , "YYYY-MM-DD" ) ] ;
getTime ( ) ; / / 触 发 时 间 变 更 事 件
}
/ / 本 月
function handleThis ( ) {
lssjTimeRange . value = getDefaultTimeRange ( )
getTime ( ) ; / / 触 发 时 间 变 更 事 件
}
/ / 后 一 天
function handleNext ( ) {
const now = new Date ( startTime . value ) ;
now . setMonth ( now . getMonth ( ) + 1 ) ;
const year = now . getFullYear ( ) ;
const month = now . getMonth ( ) ;
const firstDay = new Date ( year , month , 1 ) ;
const lastDay = new Date ( year , month + 1 , 0 ) ;
startTime . value = formatDate ( firstDay , "YYYY-MM-DD" ) ;
endTime . value = formatDate ( lastDay , "YYYY-MM-DD" ) ;
lssjTimeRange . value = [ formatDate ( firstDay , "YYYY-MM-DD" ) , formatDate ( lastDay , "YYYY-MM-DD" ) ] ;
getTime ( ) ; / / 触 发 时 间 变 更 事 件
}
/ / 获 取 指 定 日 期 偏 移 的 时 间 范 围 （ 每 天 8 : 0 0 至 次 日 7 : 5 9 ）
const getDefaultTimeRange = ( ) => {
const now = new Date ( ) ;
const year = now . getFullYear ( ) ;
const month = now . getMonth ( ) ;
/ / 当 月 第 一 天
const start = new Date ( year , month , 1 ) ;
/ / 当 月 最 后 一 天
const end = new Date ( year , month + 1 , 0 ) ;
/ / 格 式 化 时 间 字 符 串
const formattedStart = formatDate ( start , 'YYYY-MM-DD' ) ;
const formattedEnd = formatDate ( end , 'YYYY-MM-DD' ) ;
/ / 更 新 响 应 式 变 量
startTime . value = formattedStart ;
endTime . value = formattedEnd ;
return [ formattedStart , formattedEnd ] ;
} ;
onMounted ( ( ) => {
/ / 设 置 默 认 时 间 范 围 需 要 延 时 等 控 件 渲 染 好
setTimeout ( ( ) => {
lssjTimeRange . value = getDefaultTimeRange ( 0 )
} , 500 )
console . log ( lssjTimeRange . value ) ;
} )
const startTime = ref ( '' )
const endTime = ref ( '' )
const lssjTimeRang = ref ( [ ] )
const myCharts = ref ( null )
const lssjTimeRange = ref ( [ ] )
/ / 获 取 当 前 日 期 时 间 范 围
const getDefaultTimeRange = ( ) => {
const now = new Date ( )
const start = new Date ( now )
start . setHours ( 8 , 0 , 0 , 0 )
const end = new Date ( now )
end . setDate ( end . getDate ( ) + 1 )
end . setHours ( 7 , 59 , 59 , 0 )
return [ start . getTime ( ) , end . getTime ( ) ]
}
/ / 初 始 化 图 表
const initChart = ( ) => {
series . value = [ ]
yAxis . value = [ ]
xData . value = [ ]
let positionIndex = 0
for ( let i = 0 ; i < lineName . value . length ; i ++ ) {
const yaxisTemp = JSON . parse ( JSON . stringify ( yaxis . value ) )
legendData . value . push ( ` ${ lineName . value [ i ] . name } ( ${ lineName . value [ i ] . unit } ) ` )
if ( lineName . value [ i ] . field === 'ssll' ) {
yaxisTemp . position = 'left'
} else {
yaxisTemp . position = 'right'
yaxisTemp . offset = lineName . value [ i ] . field === 'jrl' ? 60 * positionIndex : 55 * positionIndex
positionIndex += 1
}
yaxisTemp . name = ` ${ lineName . value [ i ] . name } ( ${ lineName . value [ i ] . unit } ) `
yaxisTemp . min = lineName . value [ i ] . min
yaxisTemp . max = lineName . value [ i ] . max
yaxisTemp . axisLine . lineStyle . color = colorData [ i ] . color
yAxis . value . push ( yaxisTemp )
const serieTemp = JSON . parse ( JSON . stringify ( serie . value ) )
serieTemp . name = ` ${ lineName . value [ i ] . name } ( ${ lineName . value [ i ] . unit } ) `
serieTemp . field = lineName . value [ i ] . field
serieTemp . lineStyle . color = colorData [ i ] . color
serieTemp . yAxisIndex = i
series . value . push ( serieTemp )
}
option . value = {
color : [ '#000000' , '#00007f' , '#ff0000' , '#005500' , '#55007f' , '#ffff00' ] ,
tooltip : {
trigger : 'axis' ,
axisPointer : {
type : 'shadow'
}
} ,
dataZoom : [ {
connectNulls : false ,
id : 'dataZoomX' ,
type : "inside" ,
roam : false ,
show : true ,
xAxisIndex : [ 0 ] ,
filterMode : 'empty' ,
throttle : 50 ,
zoomOnMouseWheel : true ,
moveOnMouseMove : true
} , {
id : 'dataZoomY' ,
type : 'inside' ,
filterMode : 'empty' ,
zoomLock : false ,
throttle : 50 ,
zoomOnMouseWheel : true ,
moveOnMouseMove : true
} ] ,
toolbox : {
feature : {
dataView : {
show : false ,
readOnly : false
} ,
restore : {
show : false
} ,
saveAsImage : {
show : false
}
}
} ,
legend : {
data : legendData . value
} ,
grid : {
top : '10%' ,
left : '3%' ,
right : '10%' ,
bottom : '3%' ,
containLabel : true
} ,
xAxis : {
type : 'category' ,
axisTick : {
alignWithLabel : true
} ,
data : xData . value
} ,
yAxis : yAxis . value ,
series : series . value
}
}
/ / 时 间 选 择 变 化
const getTime = ( e ) => {
if ( e && e . length === 2 ) {
startTime . value = formatDate ( e [ 0 ] , ' yyyy-MM-dd hh:mm:ss ')
endTime . value = formatDate ( e [ 1 ] , ' yyyy-MM-dd hh:mm:ss ')
updateChart (
startTime . value = formatDate ( e [ 0 ] , 'YYYY-MM-DD' )
endTime . value = formatDate ( e [ 1 ] , 'YYYY-MM-DD' )
/ / u p d a t e C h a r t ( )
}
}
/ / 切 换 表 格 显 示
const onChangeTable = ( e ) => {
tableVisibled . value = ! tableVisibled . value
checkBoxText . value = tableVisibled . value ? '显示历史趋势' : '显示历史报表'
}
/ / 分 页 变 化
const handlePageChange = ( e ) => {
ipagination . value . current = e . current
ipagination . value . pageSize = e . pageSize
}
/ / 格 式 化 表 格 时 间 显 示
const formatTableTime = ( time ) => {
if ( ! time ) return ''
return formatDate ( time , 'yyyy-MM-dd hh:mm:ss' )
}
/ / 获 取 数 组 最 大 值
const maxArrValue = ( data ) => {
if ( ! data || data . length === 0 ) return 0
const list = [ ]
for ( let i in data ) {
if ( data [ i ] !== null ) {
list . push ( parseInt ( data [ i ] ) )
}
}
if ( list . length === 0 ) return 0
list . sort ( ( num1 , num2 ) => num1 - num2 )
return list [ list . length - 1 ]
}
/ / 更 新 图 表 数 据
const updateChart = ( ) => {
dataSource . value = [ ]
xData . value = [ ]
for ( let j = 0 ; j < series . value . length ; j ++ ) {
series . value [ j ] . data = [ ]
}
loading . value = true
getAction ( url . list , {
jldId : jldID . value ,
startTime : startTime . value ,
endTime : endTime . value
} ) . then ( res => {
loading . value = false
if ( res . success ) {
const ssData = JSON . parse ( res . result )
dataSource . value = ssData
ipagination . value . total = ssData . length
for ( let i = 0 ; i < ssData . length ; i ++ ) {
const ctime = formatDate ( ssData [ i ] . createTime , 'yyyy-MM-dd hh:mm:ss' )
xData . value . push ( ctime )
for ( let j = 0 ; j < series . value . length ; j ++ ) {
let tempValue = ssData [ i ] [ lineName . value [ j ] . field ]
tempValue = tempValue === 0 ? null : tempValue
series . value [ j ] . data . push ( tempValue )
}
}
for ( let mm = 0 ; mm < series . value . length ; mm ++ ) {
const maxVal = maxArrValue ( series . value [ mm ] . data )
yAxis . value [ mm ] . max = Math . round ( maxVal * 1.2 )
}
option . value . xAxis . data = xData . value
if ( myCharts . value ) {
myCharts . value . setOption ( option . value )
}
}
} ) . catch ( ( ) => {
loading . value = false
} )
}
/ / 初 始 化 E C h a r t s
const initECharts = ( ) => {
nextTick ( ( ) => {
/ / 在 U n i a p p 中 ， 需 要 使 用 u n i . c r e a t e C a n v a s C o n t e x t 或 使 用 u c h a r t s 等 替 代 方 案
/ / 这 里 简 化 处 理 ， 实 际 使 用 时 需 要 根 据 U n i a p p 的 图 表 方 案 调 整
const canvas = document . getElementById ( 'myCharts' )
if ( canvas ) {
/ / 初 始 化 E C h a r t s 实 例
myCharts . value = echarts . init ( canvas )
myCharts . value . setOption ( option . value )
}
} )
}
/ / 监 听 l i n e D a t a 变 化
watch ( ( ) => props . lineData , ( val ) => {
jldID . value = val . jldID
jldName . value = val . jldName
chartTitle . value = ` ${ val . jldName } 历史趋势 `
lineName . value = JSON . parse ( JSON . stringify ( val . lineName ) )
startTime . value = val . startTime
endTime . value = val . endTime
try {
if ( val . startTime && val . endTime ) {
const sDt = new Date ( val . startTime )
const eDt = new Date ( val . endTime )
lssjTimeRang . value = [ sDt . getTime ( ) , eDt . getTime ( ) ]
} else {
lssjTimeRang . value = getDefaultTimeRange ( )
}
} catch ( e ) {
console . error ( '时间格式错误' , e )
lssjTimeRang . value = getDefaultTimeRange ( )
}
initChart ( )
updateChart ( )
} , {
deep : true ,
immediate : true
} )
/ / 页 面 加 载
onLoad ( ( ) => {
/ / 设 置 默 认 时 间 范 围
lssjTimeRang . value = getDefaultTimeRange ( )
/ / 在 U n i a p p 中 需 要 动 态 导 入 e c h a r t s 或 使 用 其 他 图 表 库
setTimeout ( ( ) => {
initECharts ( )
} , 500 )
} )
/ / 页 面 卸 载
onUnmounted ( ( ) => {
if ( myCharts . value ) {
myCharts . value . dispose ( )
}
} )
< / script >
< style scoped >
. chart - container {
width : 100 % ;
height : 100 % ;
padding : 20 rpx ;
box - sizing : border - box ;
display : flex ;
flex - direction : column ;
}
. chart - header {
margin - bottom : 20 rpx ;
}
. chart - title - container {
width : 100 % ;
text - align : center ;
margin - bottom : 20 rpx ;
}
. chart - title {
font - size : 36 rpx ;
font - weight : bold ;
color : # 333 ;
}
. filter - section {
display : flex ;
flex - direction : column ;
gap : 20 rpx ;
margin - bottom : 20 rpx ;
}
. date - picker {
width : 100 % ;
}
. checkbox - container {
display : flex ;
align - items : center ;
}
. checkbox {
display : flex ;
align - items : center ;
font - size : 28 rpx ;
}
. chart {
width : 100 % ;
height : 600 rpx ;
background - color : # fff ;
border - radius : 10 rpx ;
box - shadow : 0 2 rpx 10 rpx rgba ( 0 , 0 , 0 , 0.1 ) ;
margin - bottom : 20 rpx ;
}
. table - container {
width : 100 % ;
overflow - x : auto ;
}
. pagination {
margin - top : 20 rpx ;
display : flex ;
justify - content : center ;
}
< / style >
