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

设备中心 - 能耗监测 - 图表 左侧树和右侧组件联动

Browse Source
This commit is contained in:
fks-yangshouda
2024-07-11 08:45:20 +08:00
parent 5fde3175f1
commit a698c69b7c
6 changed files with 766 additions and 474 deletions
Download Patch File Download Diff File Expand all files Collapse all files

158
hx-ai-intelligent/src/view/monitor/energyMonitor/graphGraph/index.vue
View File

@@ -3,129 +3,62 @@
</template>
<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue';
import { defineComponent, onMounted, ref, inject, 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',
},
],
},
];
export default defineComponent({
name: 'GraphGraph',
setup() {
let data = ref<any[]>([]);
interface PageData {
graphTableList: any[];
graphTableColumns: any[];
graphGraphList: any[];
}
const pageData = inject<PageData>('pageData');
if (!pageData) {
throw new Error('pageData is not provided');
}
// 监听 pageData 的变化
watch(
() => pageData as PageData,
(_newValue, _oldValue) => {
// 执行你的逻辑代码
draw();
},
{ deep: true },
);
const graphGraphchart = ref(null);
let chartInstance: echarts.ECharts | null = null;
onMounted(() => {
const draw = () => {
data.value = pageData.graphGraphList;
if (chartInstance) {
chartInstance.dispose();
}
chartInstance = echarts.init(graphGraphchart.value);
var seriesList = [];
var date = [];
var legendList: string | any[] = [];
for (let i = 0; i < data.length; i++) {
date.push(data[i].date);
for (let i = 0; i < data.value.length; i++) {
date.push(data.value[i].date);
for (let j = 0; j < data[i].data.length; j++) {
for (let j = 0; j < data.value[i].data.length; j++) {
if (seriesList.length < j + 1) {
seriesList.push({
name: data[i].data[j].name,
data: [data[i].data[j].value],
name: data.value[i].data[j].name,
data: [data.value[i].data[j].value],
type: 'line',
smooth: true,
});
} else {
seriesList[j].data.push(data[i].data[j].value);
seriesList[j].data.push(data.value[i].data[j].value);
}
if (legendList.length == 0 || legendList.length < j + 1) {
legendList.push(data[i].data[j].name);
legendList.push(data.value[i].data[j].name);
}
}
}
@@ -142,7 +75,7 @@
const date = params[0].name;
const values = params
.map((param: any) => {
const unit = data.find((d) => d.date === date)?.unit || '';
const unit = data.value.find((d) => d.date === date)?.unit || '';
return `<tr>
<td>${param.marker}${param.seriesName}</td>
<td style="text-align: right;">${param.value} ${unit}</td>
@@ -159,27 +92,14 @@
yAxis: {
type: 'value',
},
// dataZoom: [
// {
// height: 10,
// start: 0,
// end: 100,
// handleSize: '300%', // 设置滑块的大小
// bottom: 15,
// },
// ],
// toolbox: {
// show: true,
// feature: {
// mark: { show: true },
// saveAsImage: { show: true },
// },
// },
series: seriesList,
};
chartInstance = echarts.init(graphGraphchart.value);
chartInstance.setOption(option);
};
onMounted(() => {
draw();
});
// 下载图表