ClientApps/pqs-9100_client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

数据查询历史趋势

Browse Source
This commit is contained in:
sjl
2025-12-10 15:19:26 +08:00
parent 0e0b753126
commit cd33151920
3 changed files with 171 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/components/echarts/line/index.vue
View File

@@ -8,7 +8,9 @@
import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
// import echarts from './echarts'
import * as echarts from 'echarts' // 全引入
// import 'echarts/lib/component/dataZoom'
import 'echarts-gl'
import 'echarts-liquidfill'
import 'echarts/lib/component/dataZoom'
const color = [
'var(--el-color-primary)',
@@ -39,11 +41,13 @@ const resizeHandler = () => {
})
}
const initChart = () => {
if (!props.isInterVal && !props.pieInterVal) {
chart?.dispose()
}
// chart?.dispose()
chart = echarts.init(chartRef.value as HTMLDivElement)
const options = {
title: {
left: 'center',

196
frontend/src/views/home/components/compareDataCheckChart.vue
View File

@@ -7,7 +7,7 @@
<script lang="ts" setup>
import { ref, watch } from 'vue'
import { nextTick, ref, watch } from 'vue'
import { yMethod } from '@/utils/echartMethod'
import MyEchart from '@/components/echarts/line/index.vue'
import { CheckData } from '@/api/check/interface'
@@ -19,19 +19,6 @@ const prop = defineProps({
},
})
// 监听 tableData 变化并触发 setEchart
watch(() => prop.tableData, (newTableData) => {
console.log("🚀 ~ .then ~ newTableData:", newTableData)
// // 更新 chartsList 数据
// chartsList.value = newTableData
// // 调用 setEchart 更新图表
// setEchart()
}, {
immediate: true, // 立即执行一次
deep: true // 深度监听
})
const color = [
'var(--el-color-primary)',
@@ -55,8 +42,6 @@ const lineStyle = [{ type: 'solid' }, { type: 'dashed' }, { type: 'dotted' }]
const setEchart = () => {
echartsData.value = {}
//icon图标替换legend图例
// y轴单位数组
let unitList: any = []
@@ -75,7 +60,6 @@ const setEchart = () => {
return acc
}, {})
let result = Object.values(groupedData)
console.log("🚀 ~ .then ~ result:", result)
if (chartsList.value.length > 0) {
unitList = result.map((item: any) => {
return item[0].unit
@@ -95,7 +79,7 @@ const setEchart = () => {
// height: 50
},
grid: {
top: '80px'
top: '30px',
},
tooltip: {
axisPointer: {
@@ -137,12 +121,15 @@ const setEchart = () => {
xAxis: {
type: 'time',
axisLabel: {
formatter: {
day: '{MM}-{dd}',
month: '{MM}',
year: '{yyyy}'
}
}
formatter: function(value) {
const date = new Date(value);
const hours = String(date.getHours()).padStart(2, '0');
const minutes = String(date.getMinutes()).padStart(2, '0');
const seconds = String(date.getSeconds()).padStart(2, '0');
return `${hours}:${minutes}:${seconds}`;
},
},
splitNumber: 8
},
yAxis: [{}],
@@ -150,7 +137,7 @@ const setEchart = () => {
series: []
}
}
if (chartsList.value.length > 0) {
let yData: any = []
@@ -228,8 +215,8 @@ const setEchart = () => {
if (cc.statisticalData !== null) {
yData[setList.indexOf(kk[0].unit)].push(cc.statisticalData?.toFixed(2))
}
seriesList.push([cc.time, cc.statisticalData?.toFixed(2), cc.unit, lineStyle[lineS].type])
seriesList.push([cc.time, cc.statisticalData, cc.unit, lineStyle[lineS].type])
})
@@ -245,21 +232,166 @@ const setEchart = () => {
yAxisIndex: setList.indexOf(kk[0].unit)
})
})
// let [min, max] = yMethod(yMethodList)
// echartsData.value.yAxis[index].min = min
// echartsData.value.yAxis[index].max = max
})
yData.forEach((item: any, index: any) => {
let [min, max] = yMethod(item)
echartsData.value.yAxis[index].min = min
echartsData.value.yAxis[index].max = max
})
// console.log("🚀 ~ result.forEach ~ echartsData.value:", echartsData.value)
}
}
// 监听 tableData 变化并触发 setEchart
watch(() => prop.tableData, (newTableData) => {
// 处理数据转换
const processedData: any[] = []
newTableData.forEach(item => {
// 处理标准设备数据
processDeviceData(item, '标准设备', item.uaStdDev, item.ubStdDev, item.ucStdDev, item.utStdDev, item.timeStdDev, item.unit)
.forEach(data => processedData.push(data));
// 处理被检设备数据
processDeviceData(item, '被检设备', item.uaDev, item.ubDev, item.ucDev, item.utDev, item.timeDev, item.unit)
.forEach(data => processedData.push(data));
});
// 更新 chartsList 数据
chartsList.value = processedData
// 延迟执行确保 DOM 已经渲染
nextTick(() => {
setTimeout(() => {
setEchart()
}, 100)
})
}, {
immediate: true, // 立即执行一次
deep: true // 深度监听
})
// 处理单个设备的数据
function processDeviceData(
item: any,
deviceType: string,
aValue: number | null,
bValue: number | null,
cValue: number | null,
tValue: number | null,
time: string,
unit: string
): any[] {
const result: any[] = [];
// 判断各相是否存在有效数据
const hasA = aValue !== null;
const hasB = bValue !== null;
const hasC = cValue !== null;
const hasT = tValue !== null;
// 计算有多少相有数据
const phaseCount = (hasA ? 1 : 0) + (hasB ? 1 : 0) + (hasC ? 1 : 0);
// 时间四舍五入到秒
const roundedTime = roundTimeToSecond(time);
if (hasA) {
result.push({
anotherName: deviceType,
phase: phaseCount > 1 ? 'A' : null,
statisticalData: aValue,
time: roundedTime,
unit: unit,
});
}
if (hasB) {
result.push({
anotherName: deviceType,
phase: phaseCount > 1 ? 'B' : null,
statisticalData: bValue,
time: roundedTime,
unit: unit,
});
}
if (hasC) {
result.push({
anotherName: deviceType,
phase: phaseCount > 1 ? 'C' : null,
statisticalData: cValue,
time: roundedTime,
unit: unit,
});
}
if (hasT) {
result.push({
anotherName: deviceType,
phase: null,
statisticalData: tValue,
time: roundedTime,
unit: unit,
});
}
return result;
}
// 时间四舍五入到秒的辅助函数
function roundTimeToSecond(timeStr: string): string {
if (!timeStr) return timeStr;
try {
// 直接使用本地时间解析，避免时区转换问题
// 替换空格为 T 以符合 ISO 格式
const isoString = timeStr.replace(' ', 'T');
const date = new Date(isoString);
// 检查日期是否有效
if (isNaN(date.getTime())) {
return timeStr;
}
// 获取毫秒部分
const milliseconds = date.getMilliseconds();
// 如果毫秒数大于等于500，则加一秒
if (milliseconds >= 500) {
date.setSeconds(date.getSeconds() + 1);
}
// 清除毫秒部分
date.setMilliseconds(0);
// 手动格式化为 YYYY-MM-DD HH:mm:ss 格式（使用本地时间）
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
const hours = String(date.getHours()).padStart(2, '0');
const minutes = String(date.getMinutes()).padStart(2, '0');
const seconds = String(date.getSeconds()).padStart(2, '0');
const formattedTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
return formattedTime;
} catch (error) {
// 如果解析失败，返回原始时间字符串
console.error('时间解析错误:', error);
return timeStr;
}
}
</script>
<style lang="scss" scoped>
.history_chart {
width: 100%;
height: 360px; /* 明确指定高度 */
margin-top: 0px;
}
</style>
/* 或者设置最小高度 */
.history_chart {
width: 100%;
min-height: 300px; /* 确保有最小高度 */
margin-top: 10px;
}
</style>

4
frontend/src/views/home/components/compareDataCheckSingleChannelSingleTestPopup.vue
View File

@@ -276,6 +276,7 @@ const currentRawTableData = computed(() => {
})
const open = async (row: any, chnNum: string, deviceId: string | null, source: number) => {
activeTab.value = 'resultTab'
isWaveData.value = false
pattern.value = dictStore.getDictData('Pattern').find(item => item.name === modeStore.currentMode)?.id ?? '' //获取数据字典中对应的id
rowList.value = {}
@@ -412,7 +413,6 @@ const getBasicInformation = async (scriptType: any) => {
})
formContent.dataRule = res.data.dataRule
console.log('formContent.dataRule',formContent.dataRule)
formContent.deviceName = res.data.deviceName
formContent.errorSysId = res.data.errorSysId
chnMapList.value = res.data.chnMap
@@ -528,7 +528,7 @@ const getResults = async (code: any) => {
// 判断是否为录波数据请求
const isWaveDataRequest = code === 'wave_data' || isWaveData.value
console.log(checkStore.plan)
getContrastResult({
planId: checkStore.plan.id,
scriptType: rowList.value.scriptType,