ldeyun/jeecgBootUniapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改完善多曲线组件

Browse Source 
完成实时采集页面瞬时流量点击查询五分钟存盘数据的历史趋势功能
This commit is contained in:
liaodeyun 2025-09-16 08:59:06 +08:00
parent 92d48433b8
commit 7121f317b6
7 changed files with 194 additions and 490 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/api/humanResource/personnel/index.ts
View File

@ -5,6 +5,7 @@ export function listApi(config : object) {
return http({
url: '/cxc_rlzy.zb/cxcRlzyZb/list',
method: 'GET',
timeout: 5000,
data: config
})
}

8
src/api/production/index.ts
View File

@ -57,3 +57,11 @@ export function queryJldDataByJldID(params : object) { // 获取计量点五分
data: params
})
}
export function queryJldRbDataByJldID(params : object) { // 获取计量点日报数据
return http({
url: 'http://10.75.166.6:9999/Gyk/jldls/cxcSssjLssjJldls/getLssjByJldId',
method: 'GET',
data: params
})
}

9
src/pages-humanResource/personnel/standingbook.vue
View File

@ -1,6 +1,6 @@
<template>
<PageLayout :navbarShow="false">
<wd-card style="margin: 10px;" id="top1">
<wd-card style="margin: 10px;padding: 10px;" id="top1">
<wd-row>
<wd-col :span="24"><uni-title title="所属单位" align="left" type="h5"></uni-title></wd-col>
</wd-row>
@ -16,11 +16,12 @@
</wd-row>
<wd-row>
<wd-col :span="12">
<uni-easyinput v-model="realname" placeholder="姓名模糊查询" @change="getList" @clear="getList" />
<wd-input v-model="realname" clearable placeholder="姓名模糊查询" @change="getList"
@clear="getList"></wd-input>
</wd-col>
<wd-col :span="12">
<uni-easyinput v-model="contractNumber" placeholder="劳动合同号模糊查询" @change="getList"
@clear="getList" />
<wd-input v-model="contractNumber" clearable placeholder="劳动合同号模糊查询" @change="getList"
@clear="getList"></wd-input>
</wd-col>
</wd-row>
</wd-card>

613
src/pages-production/shishishuju/chart/lssjChart.vue
View File

@ -9,499 +9,192 @@
</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>
</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">序号</uni-th>
<uni-th align="center">日期时间</uni-th>
<uni-th align="center">温度(℃)</uni-th>
<uni-th align="center">压力(MPa)</uni-th>
<uni-th align="center">压差(kPa)</uni-th>
<uni-th align="center">瞬时量(Nm³/d)</uni-th>
<uni-th align="center">今日量(m³)</uni-th>
<uni-th align="center">今日时间(分)</uni-th>
<uni-th align="center">仪表状态</uni-th>
</uni-tr>
<uni-tr v-for="(item, index) in dataSource" :key="index">
<uni-td align="center">{{ index + 1 }}</uni-td>
<uni-td align="center">{{ formatTableTime(item.createTime) }}</uni-td>
<uni-td align="center">{{ item.wd }}</uni-td>
<uni-td align="center">{{ item.yl }}</uni-td>
<uni-td align="center">{{ item.yc }}</uni-td>
<uni-td align="center">{{ item.ssll }}</uni-td>
<uni-td align="center">{{ item.jrl }}</uni-td>
<uni-td align="center">{{ item.jrsj }}</uni-td>
<uni-td align="center">{{ item.zt }}</uni-td>
</uni-tr>
</uni-table>
<view class="pagination">
<uni-pagination :current="ipagination.current" :pageSize="ipagination.pageSize"
:total="ipagination.total" @change="handlePageChange" showTotal />
</view>
</view>
<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;"></wd-text>
</view>
<view>
<uni-datetime-picker type="datetimerange" v-model="lssjTimeRange" @change="getTime" start-placeholder="开始时间"
end-placeholder="结束时间" />
</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="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="createTime" label="日期" align="center"></wd-table-col>
<wd-table-col prop="jldName" label="计量点名称" align="center"></wd-table-col>
<wd-table-col prop="ql" label="今日流量(m³)" align="center">
</wd-table-col>
</wd-table>
</scroll-view>
</view>
<view v-if="drawLineFlag">
<cxc-szcx-multiLineChart :data-list="chartData" x-field="createTime"
:y-fields="lineFields"></cxc-szcx-multiLineChart>
</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: 'jrl',
min: '0',
max: '50000',
unit: 'm³'
}
])
// 定义props
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 jldid = props.jldData.id;
queryJldRbDataByJldID({
jldId: jldid,
startTime: startTime.value,
endTime: endTime.value
}).then(res => {
chartData.value = JSON.parse(res.result)
chartData.value.forEach(item => {
item.createTime = formatDate(item.createTime, "YYYY-MM-DD HH:mm ss")
})
console.log(123, chartData.value)
})
const colorData = [{
color: '#000000'
},
{
color: '#00007f'
},
{
color: '#ff0000'
},
{
color: '#005500'
},
{
color: '#55007f'
},
{
color: '#ffff00'
}
function handleDrawLine() {
drawLineFlag.value = true
}
// 前一天 - 以当前选择的起始日期为基准计算
function handleForward() {
// 使用当前选择的开始时间作为基准，而不是系统当前时间
lssjTimeRange.value = getDefaultTimeRange(-1);
}
// 后一天
function handleNext() {
// 获取当前选择的开始时间
const currentStart = new Date(startTime.value);
// 获取今天8点的时间对象
const today8AM = new Date();
today8AM.setHours(8, 0, 0, 0);
// 允许切换到今天及之前的日期范围
if (currentStart < today8AM || isSameDay(currentStart, today8AM)) {
lssjTimeRange.value = getDefaultTimeRange(1);
} else {
// 可添加提示：已经是最新数据
uni.showToast({
title: '已是最新数据',
icon: 'none',
duration: 1500
});
}
]
}
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'
}
// 获取指定日期偏移的时间范围（每天8:00至次日7:59）
const getDefaultTimeRange = (days) => {
// 防止原日期对象被污染，使用当前选择的开始时间作为基准
var baseDate;
if (startTime.value && new Date(startTime.value).toString() !== 'Invalid Date') {
baseDate = new Date(startTime.value);
} else {
// 如果选择的时间无效，则使用当前时间作为 fallback
baseDate = new Date();
}
})
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 targetDate = new Date(baseDate);
targetDate.setDate(baseDate.getDate() + days);
const tableVisibled = ref(false)
const checkBoxText = ref('显示历史报表')
const dataSource = ref([])
const loading = ref(false)
const ipagination = ref({
current: 1,
pageSize: 10,
total: 0
})
// 构建开始时间：目标日期的8:00:00
const start = new Date(targetDate);
start.setHours(8, 0, 0, 0);
const jldID = ref('')
const jldName = ref('')
const chartTitle = ref('')
const lineName = ref([])
// 构建结束时间：目标日期+1天的7:59:59
const end = new Date(targetDate);
end.setDate(targetDate.getDate() + 1);
end.setHours(7, 59, 59, 0);
// 格式化时间字符串
const formattedStart = formatDate(start, 'YYYY-MM-DD HH:mm:ss');
const formattedEnd = formatDate(end, 'YYYY-MM-DD HH:mm:ss');
// 更新响应式变量
startTime.value = formattedStart;
endTime.value = formattedEnd;
return [formattedStart, formattedEnd];
};
// 辅助函数：判断两个日期是否是同一天
const isSameDay = (date1, date2) => {
return date1.getFullYear() === date2.getFullYear() &&
date1.getMonth() === date2.getMonth() &&
date1.getDate() === date2.getDate();
};
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 HH:mm:ss')
endTime.value = formatDate(e[1], 'YYYY-MM-DD HH:mm:ss')
// updateChart()
}
}
// 切换表格显示
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
})
}
// 初始化ECharts
const initECharts = () => {
nextTick(() => {
// 在Uniapp中，需要使用uni.createCanvasContext或使用ucharts等替代方案
// 这里简化处理，实际使用时需要根据Uniapp的图表方案调整
const canvas = document.getElementById('myCharts')
if (canvas) {
// 初始化ECharts实例
myCharts.value = echarts.init(canvas)
myCharts.value.setOption(option.value)
}
})
}
// 监听lineData变化
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()
// 在Uniapp中需要动态导入echarts或使用其他图表库
setTimeout(() => {
initECharts()
}, 500)
})
// 页面卸载
onUnmounted(() => {
if (myCharts.value) {
myCharts.value.dispose()
}
})
</script>
<style scoped>
.chart-container {
width: 100%;
height: 100%;
padding: 20rpx;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
.chart-header {
margin-bottom: 20rpx;
}
.chart-title-container {
width: 100%;
text-align: center;
margin-bottom: 20rpx;
}
.chart-title {
font-size: 36rpx;
font-weight: bold;
color: #333;
}
.filter-section {
display: flex;
flex-direction: column;
gap: 20rpx;
margin-bottom: 20rpx;
}
.date-picker {
width: 100%;
}
.checkbox-container {
display: flex;
align-items: center;
}
.checkbox {
display: flex;
align-items: center;
font-size: 28rpx;
}
.chart {
width: 100%;
height: 600rpx;
background-color: #fff;
border-radius: 10rpx;
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
margin-bottom: 20rpx;
}
.table-container {
width: 100%;
overflow-x: auto;
}
.pagination {
margin-top: 20rpx;
display: flex;
justify-content: center;
}
</style>

4
src/pages-production/shishishuju/chart/sssjChart.vue
View File

@ -42,8 +42,8 @@
</scroll-view>
</view>
<view v-if="drawLineFlag">
<cxc-szcx-multiLineChart :data-list="chartData" x-field="createTime" :y-fields="lineFields"
title="文增伴生气外输数据趋势" height="300"></cxc-szcx-multiLineChart>
<cxc-szcx-multiLineChart :data-list="chartData" x-field="createTime"
:y-fields="lineFields"></cxc-szcx-multiLineChart>
</view>
</PageLayout>

13
src/pages-production/shishishuju/trqSssj.vue
View File

@ -86,13 +86,13 @@
<cxc-szcx-stationJl-select v-model="stationID" returnCodeOrID="id" @change="onChange">
</cxc-szcx-stationJl-select>
</wd-popup>
<wd-popup v-model="lssjFlag" position="bottom" custom-style="width:100%;height: 300px;" @close="handleClose">
<lssj-chart></lssj-chart>
</wd-popup>
<wd-popup v-model="sssjFlag" position="bottom" custom-style="width:100%;height: 70vh;" @close="handleClose">
<sssj-chart :jldData="jldData"></sssj-chart>
</wd-popup>
<wd-popup v-model="lssjFlag" position="bottom" custom-style="width:100%;height: 70vh;" @close="handleClose">
<lssj-chart :jldData="jldData"></lssj-chart>
</wd-popup>
</PageLayout>
</template>
<script setup>
@ -144,7 +144,8 @@
}
function openlssjChart(e) {
sssjFlag.value = true;
lssjFlag.value = true;
jldData.value = e
console.log(selectZc.value)
}
@ -203,7 +204,7 @@
};
onMounted(() => {
websocketheart()
stationID.value = "1267633458481725442"
// stationID.value = "1267633458481725442"
})
onUnmounted(() => {

16
src/uni_modules/cxc-szcx-multiLineChart/components/cxc-szcx-multiLineChart/cxc-szcx-multiLineChart.vue
View File

@ -1,5 +1,5 @@
<template>
<view >
<view>
<l-echart ref="chart" @finished="drawChart" />
</view>
</template>
@ -151,7 +151,7 @@
alwaysShowContent: true,
axisPointer: {
type: 'line',
show:false
show: false
}
},
toolbox: {
@ -177,10 +177,10 @@
itemGap: 5,
padding: [35, 5, 25, 5],
type: 'scroll',
show:true
show: true
},
grid: {
width:'auto',
width: 'auto',
top: '20%',
left: '5px',
right: '5px', // 动态调整右侧间距（避免Y轴标签被截断）
@ -192,7 +192,7 @@
axisTick: {
alignWithLabel: true
},
show:true,
show: true,
data: xData
},
yAxis: yData,
@ -231,9 +231,9 @@
// 动态调整Y轴最大值（修复this.serie和this.maxArrValue错误）
serie.forEach((serieItem, mm) => {
const maxValue = maxArrValue(serieItem.data);
console.log(1,maxValue)
yData[mm].max = Math.round(maxValue * 12)/10 || 100; // 兜底：最大值为0时设为100
console.log(2,yData[mm].max)
console.log(1, maxValue)
yData[mm].max = Math.round(maxValue * 12) / 10 || 100; // 兜底：最大值为0时设为100
console.log(2, yData[mm].max)
});
// 修复：更新响应式数据（必须通过.value）