完成历史日报数据查询和曲线生成
This commit is contained in:
parent
7121f317b6
commit
6c94acbe61
@ -60,7 +60,7 @@ export function queryJldDataByJldID(params : object) { // 获取计量点五分
|
|||||||
|
|
||||||
export function queryJldRbDataByJldID(params : object) { // 获取计量点日报数据
|
export function queryJldRbDataByJldID(params : object) { // 获取计量点日报数据
|
||||||
return http({
|
return http({
|
||||||
url: 'http://10.75.166.6:9999/Gyk/jldls/cxcSssjLssjJldls/getLssjByJldId',
|
url: '/tbqr/cxcScdtRbTbqr/listJldZongHe',
|
||||||
method: 'GET',
|
method: 'GET',
|
||||||
data: params
|
data: params
|
||||||
})
|
})
|
||||||
|
@ -12,15 +12,19 @@
|
|||||||
<PageLayout :navbarShow="false" class="page-layout">
|
<PageLayout :navbarShow="false" class="page-layout">
|
||||||
<view style="color: blue;font-size:18px;text-align: center;margin: 10px;width: 100%;">
|
<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>
|
<wd-text :text="jldData.jldname+ '日报数据'" style="color: blue;font-size:18px;"></wd-text>
|
||||||
|
{{startTime}}
|
||||||
</view>
|
</view>
|
||||||
<view>
|
<view>
|
||||||
<uni-datetime-picker type="datetimerange" v-model="lssjTimeRange" @change="getTime" start-placeholder="开始时间"
|
<uni-datetime-picker type="daterange" v-model="lssjTimeRange" @change="getTime" start-placeholder="开始时间"
|
||||||
end-placeholder="结束时间" />
|
end-placeholder="结束时间">
|
||||||
|
|
||||||
|
</uni-datetime-picker>
|
||||||
</view>
|
</view>
|
||||||
<view style="text-align: center;padding: 5px;">
|
<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="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="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="handleQuery">查询数据</wd-button>
|
||||||
<wd-button custom-class="custom-value" size="small" plain clickable @click="handleDrawLine">生成曲线</wd-button>
|
<wd-button custom-class="custom-value" size="small" plain clickable @click="handleDrawLine">生成曲线</wd-button>
|
||||||
|
|
||||||
@ -29,15 +33,15 @@
|
|||||||
<view>
|
<view>
|
||||||
<scroll-view direction="vertical" style="height: 200px;">
|
<scroll-view direction="vertical" style="height: 200px;">
|
||||||
<wd-table :data="chartData" height="200px">
|
<wd-table :data="chartData" height="200px">
|
||||||
<wd-table-col prop="createTime" label="日期" align="center"></wd-table-col>
|
<wd-table-col prop="scrq" label="日期" align="center"></wd-table-col>
|
||||||
<wd-table-col prop="jldName" 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 prop="ljql" label="流量(m³)" align="center">
|
||||||
</wd-table-col>
|
</wd-table-col>
|
||||||
</wd-table>
|
</wd-table>
|
||||||
</scroll-view>
|
</scroll-view>
|
||||||
</view>
|
</view>
|
||||||
<view v-if="drawLineFlag">
|
<view v-if="drawLineFlag">
|
||||||
<cxc-szcx-multiLineChart :data-list="chartData" x-field="createTime"
|
<cxc-szcx-multiLineChart :data-list="chartData" x-field="scrq"
|
||||||
:y-fields="lineFields"></cxc-szcx-multiLineChart>
|
:y-fields="lineFields"></cxc-szcx-multiLineChart>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
@ -65,10 +69,10 @@
|
|||||||
|
|
||||||
{
|
{
|
||||||
name: '日流量',
|
name: '日流量',
|
||||||
field: 'jrl',
|
field: 'ljql',
|
||||||
min: '0',
|
min: '0',
|
||||||
max: '50000',
|
max: '500000',
|
||||||
unit: 'm³'
|
unit: '10^4m³'
|
||||||
}
|
}
|
||||||
])
|
])
|
||||||
|
|
||||||
@ -82,19 +86,21 @@
|
|||||||
const drawLineFlag = ref(false)
|
const drawLineFlag = ref(false)
|
||||||
|
|
||||||
function handleQuery() {
|
function handleQuery() {
|
||||||
|
const dwmc = props.jldData.qu;
|
||||||
const jldid = props.jldData.id;
|
const zcmc = props.jldData.zhan;
|
||||||
|
const jldmc = props.jldData.jldname;
|
||||||
|
console.log(dwmc, zcmc, jldmc)
|
||||||
queryJldRbDataByJldID({
|
queryJldRbDataByJldID({
|
||||||
jldId: jldid,
|
fenzu: 'a.scrq',
|
||||||
|
dwmc: dwmc,
|
||||||
|
zcmc: zcmc,
|
||||||
|
jldname: jldmc,
|
||||||
startTime: startTime.value,
|
startTime: startTime.value,
|
||||||
endTime: endTime.value
|
endTime: endTime.value
|
||||||
}).then(res => {
|
}).then(res => {
|
||||||
chartData.value = JSON.parse(res.result)
|
console.log(res)
|
||||||
|
chartData.value = res.result
|
||||||
|
|
||||||
chartData.value.forEach(item => {
|
|
||||||
item.createTime = formatDate(item.createTime, "YYYY-MM-DD HH:mm ss")
|
|
||||||
})
|
|
||||||
console.log(123, chartData.value)
|
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
||||||
@ -105,58 +111,60 @@
|
|||||||
}
|
}
|
||||||
// 前一天 - 以当前选择的起始日期为基准计算
|
// 前一天 - 以当前选择的起始日期为基准计算
|
||||||
function handleForward() {
|
function handleForward() {
|
||||||
// 使用当前选择的开始时间作为基准,而不是系统当前时间
|
const now = new Date(startTime.value);
|
||||||
lssjTimeRange.value = getDefaultTimeRange(-1);
|
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() {
|
function handleNext() {
|
||||||
// 获取当前选择的开始时间
|
const now = new Date(startTime.value);
|
||||||
const currentStart = new Date(startTime.value);
|
now.setMonth(now.getMonth() + 1);
|
||||||
// 获取今天8点的时间对象
|
|
||||||
const today8AM = new Date();
|
|
||||||
today8AM.setHours(8, 0, 0, 0);
|
|
||||||
|
|
||||||
// 允许切换到今天及之前的日期范围
|
const year = now.getFullYear();
|
||||||
if (currentStart < today8AM || isSameDay(currentStart, today8AM)) {
|
const month = now.getMonth();
|
||||||
lssjTimeRange.value = getDefaultTimeRange(1);
|
|
||||||
} else {
|
const firstDay = new Date(year, month, 1);
|
||||||
// 可添加提示:已经是最新数据
|
const lastDay = new Date(year, month + 1, 0);
|
||||||
uni.showToast({
|
startTime.value = formatDate(firstDay, "YYYY-MM-DD");
|
||||||
title: '已是最新数据',
|
endTime.value = formatDate(lastDay, "YYYY-MM-DD");
|
||||||
icon: 'none',
|
|
||||||
duration: 1500
|
lssjTimeRange.value = [formatDate(firstDay, "YYYY-MM-DD"), formatDate(lastDay, "YYYY-MM-DD")];
|
||||||
});
|
getTime(); // 触发时间变更事件
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 获取指定日期偏移的时间范围(每天8:00至次日7:59)
|
// 获取指定日期偏移的时间范围(每天8:00至次日7:59)
|
||||||
const getDefaultTimeRange = (days) => {
|
const getDefaultTimeRange = () => {
|
||||||
// 防止原日期对象被污染,使用当前选择的开始时间作为基准
|
const now = new Date();
|
||||||
var baseDate;
|
const year = now.getFullYear();
|
||||||
if (startTime.value && new Date(startTime.value).toString() !== 'Invalid Date') {
|
const month = now.getMonth();
|
||||||
baseDate = new Date(startTime.value);
|
|
||||||
} else {
|
|
||||||
// 如果选择的时间无效,则使用当前时间作为 fallback
|
|
||||||
baseDate = new Date();
|
|
||||||
}
|
|
||||||
|
|
||||||
// 计算目标日期(基础日期 + 偏移天数)
|
// 当月第一天
|
||||||
const targetDate = new Date(baseDate);
|
const start = new Date(year, month, 1);
|
||||||
targetDate.setDate(baseDate.getDate() + days);
|
// 当月最后一天
|
||||||
|
const end = new Date(year, month + 1, 0);
|
||||||
// 构建开始时间:目标日期的8:00:00
|
|
||||||
const start = new Date(targetDate);
|
|
||||||
start.setHours(8, 0, 0, 0);
|
|
||||||
|
|
||||||
// 构建结束时间:目标日期+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 formattedStart = formatDate(start, 'YYYY-MM-DD');
|
||||||
const formattedEnd = formatDate(end, 'YYYY-MM-DD HH:mm:ss');
|
const formattedEnd = formatDate(end, 'YYYY-MM-DD');
|
||||||
|
|
||||||
// 更新响应式变量
|
// 更新响应式变量
|
||||||
startTime.value = formattedStart;
|
startTime.value = formattedStart;
|
||||||
@ -165,12 +173,7 @@
|
|||||||
return [formattedStart, formattedEnd];
|
return [formattedStart, formattedEnd];
|
||||||
};
|
};
|
||||||
|
|
||||||
// 辅助函数:判断两个日期是否是同一天
|
|
||||||
const isSameDay = (date1, date2) => {
|
|
||||||
return date1.getFullYear() === date2.getFullYear() &&
|
|
||||||
date1.getMonth() === date2.getMonth() &&
|
|
||||||
date1.getDate() === date2.getDate();
|
|
||||||
};
|
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
// 设置默认时间范围 需要延时等控件渲染好
|
// 设置默认时间范围 需要延时等控件渲染好
|
||||||
@ -188,8 +191,8 @@
|
|||||||
// 时间选择变化
|
// 时间选择变化
|
||||||
const getTime = (e) => {
|
const getTime = (e) => {
|
||||||
if (e && e.length === 2) {
|
if (e && e.length === 2) {
|
||||||
startTime.value = formatDate(e[0], 'YYYY-MM-DD HH:mm:ss')
|
startTime.value = formatDate(e[0], 'YYYY-MM-DD')
|
||||||
endTime.value = formatDate(e[1], 'YYYY-MM-DD HH:mm:ss')
|
endTime.value = formatDate(e[1], 'YYYY-MM-DD')
|
||||||
// updateChart()
|
// updateChart()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user