数据查询历史趋势

frontend/src/components/echarts/line/index.vue

@@ -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',

frontend/src/views/home/components/compareDataCheckChart.vue

@@ -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: {
+            formatter: function(value) {
-                    day: '{MM}-{dd}',
+                const date = new Date(value);
-                    month: '{MM}',
+                const hours = String(date.getHours()).padStart(2, '0');
-                    year: '{yyyy}'
+                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>

frontend/src/views/home/components/compareDataCheckSingleChannelSingleTestPopup.vue

@@ -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,