From 583bac2695249fcd417629fbdb6288c2f6e563f2 Mon Sep 17 00:00:00 2001 From: fuguobin Date: Wed, 6 Mar 2024 18:02:38 +0800 Subject: [PATCH] =?UTF-8?q?=E6=95=B0=E6=8D=AE=E7=9B=91=E6=8E=A7=E6=8E=A5?= =?UTF-8?q?=E5=8F=A3=E5=AD=97=E6=AE=B5=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/dashboard/components/BarChart.vue | 7 ++- src/views/dashboard/components/LineChart.vue | 61 ++++++++++++------- .../dashboard/components/returnChart.vue | 7 ++- src/views/details/index.vue | 8 +++ 4 files changed, 55 insertions(+), 28 deletions(-) diff --git a/src/views/dashboard/components/BarChart.vue b/src/views/dashboard/components/BarChart.vue index 369697b..12c2d44 100644 --- a/src/views/dashboard/components/BarChart.vue +++ b/src/views/dashboard/components/BarChart.vue @@ -7,6 +7,7 @@ import { randomColor, endTime, debounce } from '@/utils/index'; import { getSupplyTemperatureRanking } from '@/api/dashboard/index'; // import { Ref } from 'vue'; // const complaintRef: Ref = ref(null); +const complaintRef = ref(); import useCounter from '@/store/modules/date'; const counterStore = useCounter(); const yearMonthDay = ref(); @@ -100,7 +101,7 @@ function dataInfo(data) { // ]; const colors = ['#5470c6', '#91cc75', '#fac858', '#1a94bc', '#f26b1f', '#5bae23']; const ccolors = {}; - const chart = echarts.init(document.getElementById('stackedLine')); + const chart = echarts.init(complaintRef.value); mapEcharts.value = chart; var updateFrequency = 1000; // 数据更新速度 var years = []; @@ -285,7 +286,7 @@ function dataInfo(data) { options.yAxis.data = year.cname.split(','); options.series[0].data = year.cut.split(','); options.graphic.elements[0].style.text = year.cdate; - const chart = echarts.init(document.getElementById('stackedLine')); + // const chart = echarts.init(complaintRef.value); chart.setOption(options); } // 大小自适应 @@ -330,7 +331,7 @@ onUnmounted(() => { // }); // }); // console.log(options.series); -// const chart = echarts.init(document.getElementById('stackedLine')); +// const chart = echarts.init(complaintRef.value); // chart.setOption(options); // } else { // clearTimeout(timer.value); diff --git a/src/views/dashboard/components/LineChart.vue b/src/views/dashboard/components/LineChart.vue index 1c371fa..85ca046 100644 --- a/src/views/dashboard/components/LineChart.vue +++ b/src/views/dashboard/components/LineChart.vue @@ -53,11 +53,11 @@ const options = { }, dataset: { source: [ - ['product', '2024-01-01', '2024-01-02', '2024-01-03', '2024-01-04', '2024-01-05', '2024-01-06', '2024-01-07'], - ['供温', 59.2, 78.9, 87.8, 79.5, 52.4, 90.7, 55], - ['回温', 42.0, 60.1, 62.8, 55.9, 30.2, 79.2, 20], - ['供温均温', 52, 77, 75, 70.1, 53.4, 50, 40], - ['回温均温', 40, 52, 61, 49, 20.4, 61.8, 10] + // ['product', '2024-01-01', '2024-01-02', '2024-01-03', '2024-01-04', '2024-01-05', '2024-01-06', '2024-01-07'], + // ['供温', 59.2, 78.9, 87.8, 79.5, 52.4, 90.7, 55], + // ['回温', 42.0, 60.1, 62.8, 55.9, 30.2, 79.2, 20], + // ['供温均温', 52, 77, 75, 70.1, 53.4, 50, 40], + // ['回温均温', 40, 52, 61, 49, 20.4, 61.8, 10] ] }, xAxis: { @@ -70,7 +70,7 @@ const options = { yAxis: [ { type: 'value', - name: '温度(℃)', + name: '', scale: true, //自适应 nameTextStyle: { color: '#000', @@ -102,32 +102,40 @@ const options = { type: 'line', smooth: true, seriesLayoutBy: 'row', - emphasis: { - focus: 'series' + tooltip: { + valueFormatter: function (value: any) { + return value + ' ℃'; + } } }, { type: 'line', smooth: true, seriesLayoutBy: 'row', - emphasis: { - focus: 'series' + tooltip: { + valueFormatter: function (value: any) { + return value + ' ℃'; + } } }, { type: 'line', smooth: true, seriesLayoutBy: 'row', - emphasis: { - focus: 'series' + tooltip: { + valueFormatter: function (value: any) { + return value + ' ℃'; + } } }, { type: 'line', smooth: true, seriesLayoutBy: 'row', - emphasis: { - focus: 'series' + tooltip: { + valueFormatter: function (value: any) { + return value + ' ℃'; + } } } ] @@ -135,24 +143,33 @@ const options = { onMounted(() => { // 图表初始化 - const chart = echarts.init(document.getElementById(props.id) as HTMLDivElement); - chart.setOption(options); + // const chart = echarts.init(document.getElementById(props.id) as HTMLDivElement); + // chart.setOption(options); getFirstLine(); // 大小自适应 - window.addEventListener('resize', () => { - chart.resize(); - }); + // window.addEventListener('resize', () => { + // chart.resize(); + // }); }); function getFirstLine() { //获取图表数据 const params = {}; getFirstLineApi().then((res: any) => { + const chart = echarts.init(document.getElementById(props.id) as HTMLDivElement); if (res.code === 200 && Object.keys(res.data).length != 0) { - options.dataset.source = res.data.source; - options.yAxis[0].name = `单位(${res.data.unit})`; - const chart = echarts.init(document.getElementById(props.id) as HTMLDivElement); + options.dataset.source = res.data; + options.yAxis[0].name = '单位(℃)'; chart.setOption(options); + } else { + chart.showLoading({ + text: '暂无数据', + color: '#fff', + textColor: '#303133', + maskColor: '#fff', + fontSize: 16, + zlevel: 0 + }); } }); } diff --git a/src/views/dashboard/components/returnChart.vue b/src/views/dashboard/components/returnChart.vue index 9c78bee..d253ea5 100644 --- a/src/views/dashboard/components/returnChart.vue +++ b/src/views/dashboard/components/returnChart.vue @@ -7,6 +7,7 @@ import { randomColor, endTime, debounce } from '@/utils/index'; import { getBackTemperatureRanking } from '@/api/dashboard/index'; // import { Ref } from 'vue'; // const complaintRef: Ref = ref(null); +const complaintRef = ref(); import useCounter from '@/store/modules/date'; const counterStore = useCounter(); const yearMonthDay = ref(); @@ -100,7 +101,7 @@ function dataInfo(data) { // ]; const colors = ['#5470c6', '#91cc75', '#fac858', '#1a94bc', '#f26b1f', '#5bae23']; const ccolors = {}; - const chart = echarts.init(document.getElementById('returnChart')); + const chart = echarts.init(complaintRef.value); mapEcharts.value = chart; var updateFrequency = 1000; // 数据更新速度 var years = []; @@ -285,7 +286,7 @@ function dataInfo(data) { options.yAxis.data = year.cname.split(','); options.series[0].data = year.cut.split(','); options.graphic.elements[0].style.text = year.cdate; - const chart = echarts.init(document.getElementById('returnChart')); + // const chart = echarts.init(complaintRef.value); chart.setOption(options); } // 大小自适应 @@ -330,7 +331,7 @@ onUnmounted(() => { // }); // }); // console.log(options.series); -// const chart = echarts.init(document.getElementById('returnChart')); +// const chart = echarts.init(complaintRef.value); // chart.setOption(options); // } else { // clearTimeout(timer.value); diff --git a/src/views/details/index.vue b/src/views/details/index.vue index 85ea35c..2b5ead3 100644 --- a/src/views/details/index.vue +++ b/src/views/details/index.vue @@ -895,6 +895,14 @@ function getDevicePolling() { params.stepType = '3'; params.queryType = 2; console.log(params); + if (filterForm.paramCode === '') { + ElMessage({ + message: '请选择曲线参数', + type: 'warning' + }); + clearTimeout(timer.value); + return; + } getDeviceInfosPolling(params).then((res: any) => { if (res.code === 200) { if (isCurrentRoute.value) {