Browse Source

数据监控接口字段修改

develop
fuguobin 9 months ago
parent
commit
583bac2695
  1. 7
      src/views/dashboard/components/BarChart.vue
  2. 61
      src/views/dashboard/components/LineChart.vue
  3. 7
      src/views/dashboard/components/returnChart.vue
  4. 8
      src/views/details/index.vue

7
src/views/dashboard/components/BarChart.vue

@ -7,6 +7,7 @@ import { randomColor, endTime, debounce } from '@/utils/index';
import { getSupplyTemperatureRanking } from '@/api/dashboard/index'; import { getSupplyTemperatureRanking } from '@/api/dashboard/index';
// import { Ref } from 'vue'; // import { Ref } from 'vue';
// const complaintRef: Ref<HTMLElement | any> = ref(null); // const complaintRef: Ref<HTMLElement | any> = ref(null);
const complaintRef = ref();
import useCounter from '@/store/modules/date'; import useCounter from '@/store/modules/date';
const counterStore = useCounter(); const counterStore = useCounter();
const yearMonthDay = ref(); const yearMonthDay = ref();
@ -100,7 +101,7 @@ function dataInfo(data) {
// ]; // ];
const colors = ['#5470c6', '#91cc75', '#fac858', '#1a94bc', '#f26b1f', '#5bae23']; const colors = ['#5470c6', '#91cc75', '#fac858', '#1a94bc', '#f26b1f', '#5bae23'];
const ccolors = {}; const ccolors = {};
const chart = echarts.init(document.getElementById('stackedLine')); const chart = echarts.init(complaintRef.value);
mapEcharts.value = chart; mapEcharts.value = chart;
var updateFrequency = 1000; // var updateFrequency = 1000; //
var years = []; var years = [];
@ -285,7 +286,7 @@ function dataInfo(data) {
options.yAxis.data = year.cname.split(','); options.yAxis.data = year.cname.split(',');
options.series[0].data = year.cut.split(','); options.series[0].data = year.cut.split(',');
options.graphic.elements[0].style.text = year.cdate; options.graphic.elements[0].style.text = year.cdate;
const chart = echarts.init(document.getElementById('stackedLine')); // const chart = echarts.init(complaintRef.value);
chart.setOption(options); chart.setOption(options);
} }
// //
@ -330,7 +331,7 @@ onUnmounted(() => {
// }); // });
// }); // });
// console.log(options.series); // console.log(options.series);
// const chart = echarts.init(document.getElementById('stackedLine')); // const chart = echarts.init(complaintRef.value);
// chart.setOption(options); // chart.setOption(options);
// } else { // } else {
// clearTimeout(timer.value); // clearTimeout(timer.value);

61
src/views/dashboard/components/LineChart.vue

@ -53,11 +53,11 @@ const options = {
}, },
dataset: { dataset: {
source: [ source: [
['product', '2024-01-01', '2024-01-02', '2024-01-03', '2024-01-04', '2024-01-05', '2024-01-06', '2024-01-07'], // ['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], // ['', 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], // ['', 42.0, 60.1, 62.8, 55.9, 30.2, 79.2, 20],
['供温均温', 52, 77, 75, 70.1, 53.4, 50, 40], // ['', 52, 77, 75, 70.1, 53.4, 50, 40],
['回温均温', 40, 52, 61, 49, 20.4, 61.8, 10] // ['', 40, 52, 61, 49, 20.4, 61.8, 10]
] ]
}, },
xAxis: { xAxis: {
@ -70,7 +70,7 @@ const options = {
yAxis: [ yAxis: [
{ {
type: 'value', type: 'value',
name: '温度(℃)', name: '',
scale: true, // scale: true, //
nameTextStyle: { nameTextStyle: {
color: '#000', color: '#000',
@ -102,32 +102,40 @@ const options = {
type: 'line', type: 'line',
smooth: true, smooth: true,
seriesLayoutBy: 'row', seriesLayoutBy: 'row',
emphasis: { tooltip: {
focus: 'series' valueFormatter: function (value: any) {
return value + ' ℃';
}
} }
}, },
{ {
type: 'line', type: 'line',
smooth: true, smooth: true,
seriesLayoutBy: 'row', seriesLayoutBy: 'row',
emphasis: { tooltip: {
focus: 'series' valueFormatter: function (value: any) {
return value + ' ℃';
}
} }
}, },
{ {
type: 'line', type: 'line',
smooth: true, smooth: true,
seriesLayoutBy: 'row', seriesLayoutBy: 'row',
emphasis: { tooltip: {
focus: 'series' valueFormatter: function (value: any) {
return value + ' ℃';
}
} }
}, },
{ {
type: 'line', type: 'line',
smooth: true, smooth: true,
seriesLayoutBy: 'row', seriesLayoutBy: 'row',
emphasis: { tooltip: {
focus: 'series' valueFormatter: function (value: any) {
return value + ' ℃';
}
} }
} }
] ]
@ -135,24 +143,33 @@ const options = {
onMounted(() => { onMounted(() => {
// //
const chart = echarts.init(document.getElementById(props.id) as HTMLDivElement); // const chart = echarts.init(document.getElementById(props.id) as HTMLDivElement);
chart.setOption(options); // chart.setOption(options);
getFirstLine(); getFirstLine();
// //
window.addEventListener('resize', () => { // window.addEventListener('resize', () => {
chart.resize(); // chart.resize();
}); // });
}); });
function getFirstLine() { function getFirstLine() {
// //
const params = {}; const params = {};
getFirstLineApi().then((res: any) => { getFirstLineApi().then((res: any) => {
const chart = echarts.init(document.getElementById(props.id) as HTMLDivElement);
if (res.code === 200 && Object.keys(res.data).length != 0) { if (res.code === 200 && Object.keys(res.data).length != 0) {
options.dataset.source = res.data.source; options.dataset.source = res.data;
options.yAxis[0].name = `单位(${res.data.unit})`; options.yAxis[0].name = '单位(℃)';
const chart = echarts.init(document.getElementById(props.id) as HTMLDivElement);
chart.setOption(options); chart.setOption(options);
} else {
chart.showLoading({
text: '暂无数据',
color: '#fff',
textColor: '#303133',
maskColor: '#fff',
fontSize: 16,
zlevel: 0
});
} }
}); });
} }

7
src/views/dashboard/components/returnChart.vue

@ -7,6 +7,7 @@ import { randomColor, endTime, debounce } from '@/utils/index';
import { getBackTemperatureRanking } from '@/api/dashboard/index'; import { getBackTemperatureRanking } from '@/api/dashboard/index';
// import { Ref } from 'vue'; // import { Ref } from 'vue';
// const complaintRef: Ref<HTMLElement | any> = ref(null); // const complaintRef: Ref<HTMLElement | any> = ref(null);
const complaintRef = ref();
import useCounter from '@/store/modules/date'; import useCounter from '@/store/modules/date';
const counterStore = useCounter(); const counterStore = useCounter();
const yearMonthDay = ref(); const yearMonthDay = ref();
@ -100,7 +101,7 @@ function dataInfo(data) {
// ]; // ];
const colors = ['#5470c6', '#91cc75', '#fac858', '#1a94bc', '#f26b1f', '#5bae23']; const colors = ['#5470c6', '#91cc75', '#fac858', '#1a94bc', '#f26b1f', '#5bae23'];
const ccolors = {}; const ccolors = {};
const chart = echarts.init(document.getElementById('returnChart')); const chart = echarts.init(complaintRef.value);
mapEcharts.value = chart; mapEcharts.value = chart;
var updateFrequency = 1000; // var updateFrequency = 1000; //
var years = []; var years = [];
@ -285,7 +286,7 @@ function dataInfo(data) {
options.yAxis.data = year.cname.split(','); options.yAxis.data = year.cname.split(',');
options.series[0].data = year.cut.split(','); options.series[0].data = year.cut.split(',');
options.graphic.elements[0].style.text = year.cdate; options.graphic.elements[0].style.text = year.cdate;
const chart = echarts.init(document.getElementById('returnChart')); // const chart = echarts.init(complaintRef.value);
chart.setOption(options); chart.setOption(options);
} }
// //
@ -330,7 +331,7 @@ onUnmounted(() => {
// }); // });
// }); // });
// console.log(options.series); // console.log(options.series);
// const chart = echarts.init(document.getElementById('returnChart')); // const chart = echarts.init(complaintRef.value);
// chart.setOption(options); // chart.setOption(options);
// } else { // } else {
// clearTimeout(timer.value); // clearTimeout(timer.value);

8
src/views/details/index.vue

@ -895,6 +895,14 @@ function getDevicePolling() {
params.stepType = '3'; params.stepType = '3';
params.queryType = 2; params.queryType = 2;
console.log(params); console.log(params);
if (filterForm.paramCode === '') {
ElMessage({
message: '请选择曲线参数',
type: 'warning'
});
clearTimeout(timer.value);
return;
}
getDeviceInfosPolling(params).then((res: any) => { getDeviceInfosPolling(params).then((res: any) => {
if (res.code === 200) { if (res.code === 200) {
if (isCurrentRoute.value) { if (isCurrentRoute.value) {

Loading…
Cancel
Save