xuziqiang/SaaS-lib
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

1.设备监控 图表下载 时间选择改为三天

Browse Source 
2.能耗监控 - 图表前台页面
This commit is contained in:
fks-yangshouda
2024-07-09 10:10:17 +08:00
parent ab17c4a1f9
commit fb1980d73a
11 changed files with 1249 additions and 407 deletions
Download Patch File Download Diff File Expand all files Collapse all files

371
hx-ai-intelligent/src/view/monitor/deviceMonitor/graph/index.vue
View File

@@ -1,210 +1,199 @@
<template>
<div ref="chart" style="width: 100%; height: 80%;"></div>
<div ref="graphChart" style="width: 100%; height: 80%"></div>
</template>
<script lang="ts">
import { defineComponent, onMounted, ref, watch } from 'vue';
import * as echarts from 'echarts';
import { defineComponent, onMounted, ref, watch } from 'vue';
import * as echarts from 'echarts';
const data = [
{
date: '2023-12-01 0:00',
unit: 'V',
data: [
{
name: 'AC_002（暖通电表）',
value: '21'
},
{
name: 'AC_003（照明电表）',
value: '36'
},
{
name: 'AC_004（给排水电表）',
value: '5'
}
]
},
{
date: '2023-12-02 0:00',
unit: 'V',
data: [
{
name: 'AC_002（暖通电表）',
value: '26'
},
{
name: 'AC_003（照明电表）',
value: '25'
},
{
name: 'AC_004（给排水电表）',
value: '47'
}
]
},
{
date: '2023-12-03 0:00',
unit: 'V',
data: [
{
name: 'AC_002（暖通电表）',
value: '18'
},
{
name: 'AC_003（照明电表）',
value: '22'
},
{
name: 'AC_004（给排水电表）',
value: '26'
}
]
},
{
date: '2023-12-04 0:00',
unit: 'V',
data: [
{
name: 'AC_002（暖通电表）',
value: '40'
},
{
name: 'AC_003（照明电表）',
value: '15'
},
{
name: 'AC_004（给排水电表）',
value: '12'
}
]
},
{
date: '2023-12-05 0:00',
unit: 'V',
data: [
{
name: 'AC_002（暖通电表）',
value: '15'
},
{
name: 'AC_003（照明电表）',
value: '18'
},
{
name: 'AC_004（给排水电表）',
value: '15'
}
]
},
];
const data = [
{
date: '2023-12-01 0:00',
unit: 'V',
data: [
{
name: 'AC_002（暖通电表）',
value: '21',
},
{
name: 'AC_003（照明电表）',
value: '36',
},
{
name: 'AC_004（给排水电表）',
value: '5',
},
],
},
{
date: '2023-12-02 0:00',
unit: 'V',
data: [
{
name: 'AC_002（暖通电表）',
value: '26',
},
{
name: 'AC_003（照明电表）',
value: '25',
},
{
name: 'AC_004（给排水电表）',
value: '47',
},
],
},
{
date: '2023-12-03 0:00',
unit: 'V',
data: [
{
name: 'AC_002（暖通电表）',
value: '18',
},
{
name: 'AC_003（照明电表）',
value: '22',
},
{
name: 'AC_004（给排水电表）',
value: '26',
},
],
},
{
date: '2023-12-04 0:00',
unit: 'V',
data: [
{
name: 'AC_002（暖通电表）',
value: '40',
},
{
name: 'AC_003（照明电表）',
value: '15',
},
{
name: 'AC_004（给排水电表）',
value: '12',
},
],
},
{
date: '2023-12-05 0:00',
unit: 'V',
data: [
{
name: 'AC_002（暖通电表）',
value: '15',
},
{
name: 'AC_003（照明电表）',
value: '18',
},
{
name: 'AC_004（给排水电表）',
value: '15',
},
],
},
];
export default defineComponent({
// eslint-disable-next-line vue/multi-word-component-names
name: 'Graph',
setup() {
const chart = ref(null);
onMounted(() => {
const graphChart = ref(null);
let chartInstance: echarts.ECharts | null = null;
var seriesList = []
var date = []
var legendList: string|any[] = []
for (let i = 0; i < data.length; i++) {
date.push(data[i].date)
onMounted(() => {
chartInstance = echarts.init(graphChart.value);
var seriesList = [];
var date = [];
var legendList: string | any[] = [];
for (let i = 0; i < data.length; i++) {
date.push(data[i].date);
for (let j = 0; j < data[i].data.length; j++) {
if (seriesList.length < j + 1) {
seriesList.push(
{
for (let j = 0; j < data[i].data.length; j++) {
if (seriesList.length < j + 1) {
seriesList.push({
name: data[i].data[j].name,
data: [data[i].data[j].value],
type: 'line',
smooth: true
}
)
} else {
seriesList[j].data.push(data[i].data[j].value)
smooth: true,
});
} else {
seriesList[j].data.push(data[i].data[j].value);
}
if (legendList.length == 0 || legendList.length < j + 1) {
legendList.push(data[i].data[j].name);
}
}
if (legendList.length == 0 || legendList.length < j + 1) {
legendList.push(data[i].data[j].name)
}
}
const option = {
legend: {
data: legendList,
orient: 'horizontal',
bottom: 30,
},
tooltip: {
trigger: 'axis',
formatter: (params: any) => {
const date = params[0].name;
const values = params
.map((param: any) => {
const unit = data.find((d) => d.date === date)?.unit || '';
return `<tr>
<td>${param.marker}${param.seriesName}</td>
<td style="text-align: right;">${param.value} ${unit}</td>
</tr>`;
})
.join('');
return `<div>${date}</div><table style="width: 100%;">${values}</table>`;
},
},
xAxis: {
type: 'category',
data: date,
},
yAxis: {
type: 'value',
},
dataZoom: [
{
height: 10,
start: 0,
end: 100,
handleSize: '300%', // 设置滑块的大小
bottom: 15,
},
],
series: seriesList,
};
}
const option = {
legend: {
data: legendList,
orient: 'horizontal',
bottom: 30
},
tooltip: {
trigger: 'axis',
formatter: (params: any) => {
const date = params[0].name;
const values = params.map((param: any) => {
const unit = data.find(d => d.date === date)?.unit || '';
return `<tr>
<td>${param.marker}${param.seriesName}</td>
<td style="text-align: right;">${param.value} ${unit}</td>
</tr>`;
}).join('');
return `<div>${date}</div><table style="width: 100%;">${values}</table>`;
}
},
xAxis: {
type: 'category',
data: date
},
yAxis: {
type: 'value'
},
dataZoom: [
// {
// type: 'inside',
// start: 0,
// end: 10
// },
{
height: 10,
start: 0,
end: 100,
handleSize: '300%', // 设置滑块的大小
bottom: 15,
}
],
series: seriesList
// series: [
// {
// data: [820, 932, 901, 934, 1290, 1330, 1320],
// type: 'line'
// }
// ]
chartInstance = echarts.init(graphChart.value);
chartInstance.setOption(option);
});
// 下载图表
const downloadChart = () => {
if (chartInstance) {
const base64 = chartInstance.getDataURL({
type: 'png',
backgroundColor: '#fff',
});
const link = document.createElement('a');
link.href = base64;
link.download = 'chart.png';
link.click();
}
};
const chartInstance = echarts.init(chart.value);
chartInstance.setOption(option);
});
return { chart };
}
})
return {
graphChart,
downloadChart,
};
},
});
</script>
<style lang="less" scoped>
</style>
<style lang="less" scoped></style>