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-11 17:29:23 +08:00
parent 4dea1ff14d
commit 37b877b220
8 changed files with 362 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files

155
hx-ai-intelligent/src/view/monitor/energyMonitor/analysisGraph/index.vue Normal file
View File

@@ -0,0 +1,155 @@
<template>
<a-row type="flex" style="height: 92%">
<a-col :span="8">
<a-radio-group
v-model:value="mode"
@change="changeMode"
style="padding-bottom: 10px; width: 40%; height: 4%; padding-left: 30px; padding-top: 10px">
<a-radio-button value="1" style="width: 50%; text-align: center"> 同比 </a-radio-button>
<a-radio-button value="2" style="width: 50%; text-align: center"> 环比 </a-radio-button>
</a-radio-group>
<div ref="analysisGraphchart" style="width: 100%; height: 95%"></div>
</a-col>
<a-col :span="16" />
</a-row>
</template>
<script lang="ts">
import { defineComponent, onMounted, ref, inject, watch } from 'vue';
import * as echarts from 'echarts';
export default defineComponent({
name: 'AnalysisGraph',
setup() {
const mode = ref<String>('1');
let data = ref<any[]>([]);
interface PageData {
// 图表 表格数据
graphTableList: any[];
// 图表 表格表头
graphTableColumns: any[];
// 图表 图表数据
graphGraphList: any[];
// 分析 表格数据
analysisTableList: any[];
// 分析 图表数据
analysisGraphList: 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 changeMode = () => {};
const analysisGraphchart = ref(null);
let chartInstance: echarts.ECharts | null = null;
const draw = () => {
data.value = pageData.analysisGraphList;
if (data.value && data.value.length > 0) {
if (chartInstance) {
chartInstance.dispose();
}
chartInstance = echarts.init(analysisGraphchart.value);
var seriesdata = [];
var dateX = [];
// var legendList: string | any[] = [];
for (let i = 0; i < data.value.length; i++) {
dateX.push(data.value[i].name);
seriesdata.push({ value: data.value[i].value, label: data.value[i].labelRight });
}
var seriesList = [
{
name: data.value[0].energyType,
data: seriesdata,
type: 'bar',
label: {
show: true,
formatter: '{b}',
},
},
];
const option = {
// tooltip: {
// trigger: 'axis',
// formatter: (params: any) => {
// const date = params[0].name;
// const values = params
// .map((param: any) => {
// const unit = data.value.find((d) => d.name === 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>`;
// },
// },
yAxis: {
type: 'category',
axisLine: { show: false },
axisLabel: { show: false },
axisTick: { show: false },
splitLine: { show: false },
data: dateX,
},
xAxis: {
type: 'value',
position: 'top',
splitLine: {
lineStyle: {
type: 'dashed',
},
},
},
series: seriesList,
};
chartInstance = echarts.init(analysisGraphchart.value);
chartInstance.setOption(option);
}
};
onMounted(() => {
draw();
});
// 下载图表
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();
}
};
return {
analysisGraphchart,
downloadChart,
mode,
changeMode,
};
},
});
</script>
<style lang="less" scoped></style>

103
hx-ai-intelligent/src/view/monitor/energyMonitor/analysisTable/index.vue Normal file
View File

@@ -0,0 +1,103 @@
<template>
<a-table :columns="columns" :data-source="data" bordered />
</template>
<script lang="ts">
import { defineComponent, ref, inject, watch, onMounted } from 'vue';
export default defineComponent({
name: 'AnalysisTable',
setup() {
const columns = [
{
title: '设备/节点',
dataIndex: 'key',
},
{
title: '统计值',
dataIndex: 'name',
},
{
title: '同比',
children: [
{
title: '△差值',
dataIndex: 'position',
},
{
title: '增长率',
dataIndex: 'unit',
},
],
},
{
title: '环比',
children: [
{
title: '△差值',
dataIndex: 'position',
},
{
title: '增长率',
dataIndex: 'unit',
},
],
},
{
title: '纵向对比',
children: [
{
title: '△差值',
dataIndex: 'position',
},
{
title: '增长率',
dataIndex: 'unit',
},
],
},
{
title: '操作',
dataIndex: 'date',
},
];
let data = ref<any[]>([]);
interface PageData {
// 图表 表格数据
graphTableList: any[];
// 图表 表格表头
graphTableColumns: any[];
// 图表 图表数据
graphGraphList: any[];
// 分析 表格数据
analysisTableList: any[];
// 分析 图表数据
analysisGraphList: any[];
}
const pageData = inject<PageData>('pageData');
if (!pageData) {
throw new Error('pageData is not provided');
}
// 监听 pageData 的变化
watch(
() => pageData as PageData,
(_newValue, _oldValue) => {
data.value = pageData.analysisTableList;
},
{ deep: true },
);
onMounted(() => {
data.value = pageData.analysisTableList;
});
return {
data,
columns,
};
},
});
</script>
<style lang="less" scoped></style>

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

@@ -11,9 +11,16 @@
setup() {
let data = ref<any[]>([]);
interface PageData {
// 图表 表格数据
graphTableList: any[];
// 图表 表格表头
graphTableColumns: any[];
// 图表 图表数据
graphGraphList: any[];
// 分析 表格数据
analysisTableList: any[];
// 分析 图表数据
analysisGraphList: any[];
}
const pageData = inject<PageData>('pageData');

7
hx-ai-intelligent/src/view/monitor/energyMonitor/graphTable/index.vue
View File

@@ -13,9 +13,16 @@
let columns = ref<TableColumnType[]>([]);
interface PageData {
// 图表 表格数据
graphTableList: any[];
// 图表 表格表头
graphTableColumns: any[];
// 图表 图表数据
graphGraphList: any[];
// 分析 表格数据
analysisTableList: any[];
// 分析 图表数据
analysisGraphList: any[];
}
const pageData = inject<PageData>('pageData');

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

@@ -9,9 +9,16 @@
// 创建一个响应式对象
const pageData = reactive({
// 图表 表格数据
graphTableList: [],
// 图表 表格表头
graphTableColumns: [],
// 图表 图表数据
graphGraphList: [],
// 分析 表格数据
analysisTableList: [],
// 分析 图表数据
analysisGraphList: [],
});
// 使用 provide 函数来提供这个响应式对象

7
hx-ai-intelligent/src/view/monitor/energyMonitor/page.vue
View File

@@ -23,6 +23,10 @@
<graph-graph ref="graphRef" v-if="isGraph" />
<environment-table ref="tableRef" v-else />
</div>
<div v-else style="height: 90%">
<analysis-graph ref="graphRef" v-if="isGraph" />
<analysis-table ref="analysisTableRef" v-else />
</div>
</div>
</a-col>
</a-row>
@@ -33,12 +37,15 @@
import tree from './tree/index.vue';
import graphGraph from './graphGraph/index.vue';
import environmentTable from './graphTable/index.vue';
import analysisTable from './analysisTable/index.vue';
import analysisGraph from './analysisGraph/index.vue';
const iconName = ref('biaoge');
const treeRef = ref();
const graphRef = ref();
const tableRef = ref();
const analysisTableRef = ref();
let isGraph = ref(true);
const activeKey = ref('1');

166
hx-ai-intelligent/src/view/monitor/energyMonitor/table/index.vue
View File

@@ -1,166 +0,0 @@
<template>
<a-table :columns="columns" :data-source="data" bordered />
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import type { TableColumnType } from 'ant-design-vue';
const data = [
{
key: '1',
name: 'AC_002（暖通电表）',
position: 'A 相电压',
unit: 'V',
date: '2023-12-01',
'1:00': '3626',
},
{
key: '1',
name: 'AC_002（暖通电表）',
position: 'A 相电压',
unit: 'V',
date: '2023-12-01',
'1:00': '3626',
},
{
key: '2',
name: 'AC_003（照明电表）',
position: 'A 相电压',
unit: 'V',
date: '2023-12-01',
'1:00': '3626',
},
{
key: '2',
name: 'AC_003（照明电表）',
position: 'A 相电压',
unit: 'V',
date: '2023-12-01',
'1:00': '3626',
},
{
key: '3',
name: 'AC_004（给排水电表）',
position: 'A 相电压',
unit: 'V',
date: '2023-12-01',
'1:00': '3626',
},
];
export default defineComponent({
name: 'EnvironmentTable',
setup() {
const getRowSpan = (dataIndex: string, record, data, dependents: string[] = []) => {
let rowSpan = 1;
for (let i = data.indexOf(record) + 1; i < data.length; i++) {
let shouldMerge = true;
for (const dependent of dependents) {
if (data[i][dependent] !== record[dependent]) {
shouldMerge = false;
break;
}
}
if (shouldMerge && data[i][dataIndex] === record[dataIndex]) {
rowSpan++;
} else {
break;
}
}
return rowSpan;
};
const columns: TableColumnType[] = [
{
title: '序号',
dataIndex: 'key',
customCell: (record, rowIndex) => {
const rowSpan = getRowSpan('name', record, data);
if (rowIndex != 0 && data[rowIndex - 1].key == record.key) {
return {
rowSpan: 0,
colSpan: 0,
};
}
return {
rowSpan: rowSpan,
};
},
},
{
title: '设备名称',
dataIndex: 'name',
customCell: (record, rowIndex) => {
const rowSpan = getRowSpan('name', record, data);
if (rowIndex != 0 && data[rowIndex - 1].name == record.name) {
return {
rowSpan: 0,
colSpan: 0,
};
}
return {
rowSpan: rowSpan,
};
},
},
{
title: '设备点位',
dataIndex: 'position',
customCell: (record, rowIndex) => {
const rowSpan = getRowSpan('position', record, data, ['name']);
if (
rowIndex != 0 &&
data[rowIndex - 1].name == record.name &&
data[rowIndex - 1].position == record.position
) {
return {
rowSpan: 0,
colSpan: 0,
};
}
return {
rowSpan: rowSpan,
};
},
},
{
title: '计量单位',
dataIndex: 'unit',
customCell: (record, rowIndex) => {
const rowSpan = getRowSpan('unit', record, data, ['name', 'position']);
if (
rowIndex != 0 &&
data[rowIndex - 1].name == record.name &&
data[rowIndex - 1].position == record.position &&
data[rowIndex - 1].unit == record.unit
) {
return {
rowSpan: 0,
colSpan: 0,
};
}
return {
rowSpan: rowSpan,
};
},
},
{
title: '日期',
dataIndex: 'date',
},
{
title: '1:00',
dataIndex: '1:00',
},
];
return {
data,
columns,
};
},
});
</script>
<style lang="less" scoped></style>

79
hx-ai-intelligent/src/view/monitor/energyMonitor/tree/index.vue
View File

@@ -15,9 +15,9 @@
v-model:value="mode"
@change="changeMode"
style="padding-bottom: 10px; width: 100%">
<a-radio-button value="1" style="width: 50%; text-align: center" :disabled="shebei"
>设备</a-radio-button
>
<a-radio-button value="1" style="width: 50%; text-align: center" :disabled="shebei">
设备
</a-radio-button>
<a-radio-button value="2" style="width: 50%; text-align: center">节点</a-radio-button>
</a-radio-group>
<a-input
@@ -130,9 +130,16 @@
];
};
interface PageData {
// 图表 表格数据
graphTableList: any[];
// 图表 表格表头
graphTableColumns: any[];
// 图表 图表数据
graphGraphList: any[];
// 分析 表格数据
analysisTableList: any[];
// 分析 图表数据
analysisGraphList: any[];
}
const pageData = inject<PageData>('pageData');
if (!pageData) {
@@ -289,6 +296,72 @@
],
},
];
pageData.analysisTableList = [
{
key: '1',
name: 'AC_002（暖通电表）',
position: 'A 相电压',
unit: 'V',
date: '2023-12-01',
},
{
key: '1',
name: 'AC_002（暖通电表）',
position: 'A 相电压',
unit: 'V',
date: '2023-12-01',
},
{
key: '2',
name: 'AC_003（照明电表）',
position: 'A 相电压',
unit: 'V',
date: '2023-12-01',
},
{
key: '2',
name: 'AC_003（照明电表）',
position: 'A 相电压',
unit: 'V',
date: '2023-12-01',
},
{
key: '3',
name: 'AC_004（给排水电表）',
position: 'A 相电压',
unit: 'V',
date: '2023-12-01',
},
];
pageData.analysisGraphList = [
{
name: 'AC_002（暖通电表）',
value: -21,
energyType: selectedValue.value,
unit: 'V',
labelRight: {
position: 'right',
},
},
{
name: 'AC_003（照明电表）',
value: 36,
energyType: selectedValue.value,
unit: 'V',
labelRight: {
position: 'insideLeft',
},
},
{
name: 'AC_004（给排水电表）',
value: -5,
energyType: selectedValue.value,
unit: 'V',
labelRight: {
position: 'right',
},
},
];
};
const getSelect11 = () => {
pageData.graphTableList = [