diff --git a/.env.cloud b/.env.cloud index 10d7727..c493323 100644 --- a/.env.cloud +++ b/.env.cloud @@ -1,3 +1,3 @@ VITE_APP_ENV = cloud -VITE_BASE_URL = 'http://192.168.1.99:8080' +VITE_BASE_URL = 'http://192.168.1.3:8080' VITE_ZMQ_BASE_URL = '192.168.1.99' \ No newline at end of file diff --git a/package.json b/package.json index 0fd3532..aaf60a6 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,7 @@ "build": "run-p type-check \"build-only {@}\" --", "preview": "vite preview", "build-only": "vite build", + "cloud": "vite --mode cloud", "build:dev": "vite build --mode development", "build:cloud": "vite build --mode cloud", "type-check": "vue-tsc --build" diff --git a/src/views/stationData/component/newDataChart.vue b/src/views/stationData/component/newDataChart.vue index 667f6df..deaf3d3 100644 --- a/src/views/stationData/component/newDataChart.vue +++ b/src/views/stationData/component/newDataChart.vue @@ -82,7 +82,7 @@ const chartOption = computed(() => { loading.value = false const tmpSeries: SeriesOption[] = [] for (const legend of props.legends.filter(item => item.addr !== 'ts')) { - const entry = props.chartDatas.get(legend.addr) + const entry = props.chartDatas.get(legend.addr) as Array const lineData: SeriesOption = { name: legend.label, type: 'line', @@ -90,6 +90,7 @@ const chartOption = computed(() => { // symbol: "none", connectNulls: true, data: entry, + sampling: 'lttb', } if (props.smooth) { lineData.smooth = true @@ -98,6 +99,12 @@ const chartOption = computed(() => { } tmpSeries.push(lineData) } + const dataLength = tmpSeries.length * tmpSeries[0]?.data?.length || 0; + const visibleCount = Math.min(tmpSeries.length * 1000, dataLength); + + const startPercent = dataLength === 0 ? 0 : ((dataLength - visibleCount) / dataLength) * 100; + const endPercent = 100; + const maxSpanPercent = dataLength === 0 ? 100 : (visibleCount / dataLength) * 100; const option: EChartsOption = { grid: { @@ -186,31 +193,22 @@ const chartOption = computed(() => { type: 'inside', xAxisIndex: 0, filterMode: 'filter', - start: 90, - end: 100, + start: startPercent, + end: endPercent, + // maxSpan: maxSpanPercent, }, { type: 'slider', xAxisIndex: 0, - filterMode: 'filter', - start: 90, - end: 100, + start: startPercent, + end: endPercent, height: ZOOM_HEIGHT, - bottom: `20%`, + bottom: '20%', borderColor: '#88abf5', - dataBackground: { - lineStyle: { - color: '#d2dbee', - }, - }, - selectedDataBackground: { - lineStyle: { - color: '#2c6cf7', - }, - }, - moveHandleStyle: { - color: '#2c6cf7', - }, + dataBackground: { lineStyle: { color: '#d2dbee' } }, + selectedDataBackground: { lineStyle: { color: '#2c6cf7' } }, + moveHandleStyle: { color: '#2c6cf7' }, + // maxSpan: maxSpanPercent, }, ], series: tmpSeries,