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

1.监控中心 - 设备监测 左侧树与右侧组件联动 

2.对接设备类型接口
deploy-dev
fks-yangshouda 5 months ago
parent
50ca1daca4
commit
a0d928feaa
5 changed files with 605 additions and 346 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 141
      hx-ai-intelligent/src/view/monitor/deviceMonitor/graph/index.vue
  2. 85
      hx-ai-intelligent/src/view/monitor/deviceMonitor/index.vue
  3. 81
      hx-ai-intelligent/src/view/monitor/deviceMonitor/page.vue
  4. 319
      hx-ai-intelligent/src/view/monitor/deviceMonitor/table/index.vue
  5. 325
      hx-ai-intelligent/src/view/monitor/deviceMonitor/tree/index.vue

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

@ -5,129 +5,62 @@
<script lang="ts"> <script lang="ts">
import { defineComponent, onMounted, ref, watch } from 'vue'; import { defineComponent, onMounted, ref, watch } from 'vue';
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import { inject } from 'vue';
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({ export default defineComponent({
// eslint-disable-next-line vue/multi-word-component-names // eslint-disable-next-line vue/multi-word-component-names
name: 'Graph', name: 'Graph',
setup() { setup() {
let data = ref<any[]>([]);
interface PageData {
tableList: any[];
tableColumns: any[];
graphList: 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 graphChart = ref(null); const graphChart = ref(null);
let chartInstance: echarts.ECharts | null = null; let chartInstance: echarts.ECharts | null = null;
onMounted(() => { const draw = () => {
data.value = pageData.graphList;
if (chartInstance) {
chartInstance.dispose();
}
chartInstance = echarts.init(graphChart.value); chartInstance = echarts.init(graphChart.value);
var seriesList = []; var seriesList = [];
var date = []; var date = [];
var legendList: string | any[] = []; var legendList: string | any[] = [];
for (let i = 0; i < data.length; i++) { for (let i = 0; i < data.value.length; i++) {
date.push(data[i].date); 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) { if (seriesList.length < j + 1) {
seriesList.push({ seriesList.push({
name: data[i].data[j].name, name: data.value[i].data[j].name,
data: [data[i].data[j].value], data: [data.value[i].data[j].value],
type: 'line', type: 'line',
smooth: true, smooth: true,
}); });
} else { } 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) { if (legendList.length == 0 || legendList.length < j + 1) {
legendList.push(data[i].data[j].name); legendList.push(data.value[i].data[j].name);
} }
} }
} }
@ -143,7 +76,7 @@
const date = params[0].name; const date = params[0].name;
const values = params const values = params
.map((param: any) => { .map((param: any) => {
const unit = data.find((d) => d.date === date)?.unit || ''; const unit = data.value.find((d) => d.date === date)?.unit || '';
return `<tr> return `<tr>
<td>${param.marker}${param.seriesName}</td> <td>${param.marker}${param.seriesName}</td>
<td style="text-align: right;">${param.value} ${unit}</td> <td style="text-align: right;">${param.value} ${unit}</td>
@ -174,6 +107,9 @@
chartInstance = echarts.init(graphChart.value); chartInstance = echarts.init(graphChart.value);
chartInstance.setOption(option); chartInstance.setOption(option);
};
onMounted(() => {
draw();
}); });
// 下载图表 // 下载图表
const downloadChart = () => { const downloadChart = () => {
@ -190,6 +126,7 @@
}; };
return { return {
draw,
graphChart, graphChart,
downloadChart, downloadChart,
}; };

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

@ -1,80 +1,19 @@
<!-- eslint-disable vue/multi-word-component-names -->
<template> <template>
<a-row type="flex"> <page />
<a-col :span="4">
<div style="padding: 0 20px; width: 100%; height: 100%">
<tree ref="treeRef" />
</div>
</a-col>
<a-col :span="20">
<div style="width: 100%; height: 100%">
<div class="ns-right-title">
<span>历史数据</span>
<div class="button">
<ns-icon name="xiazai" size="18" style="margin-right: 10px" @click="downloadChart" />
<ns-icon :name="iconName" size="18" style="margin-right: 10px" @click="change" />
</div>
</div>
<graph ref="graphRef" v-if="isGraph" />
<environment-table ref="tableRef" v-else />
</div>
</a-col>
</a-row>
</template> </template>
<script lang="ts" setup> <script setup>
import { ref } from 'vue'; import { reactive, provide } from 'vue';
import tree from './tree/index.vue'; import page from './page.vue';
import graph from './graph/index.vue';
import environmentTable from './table/index.vue';
const iconName = ref('biaoge'); // 创建一个响应式对象
const pageData = reactive({
const treeRef = ref(); tableList: [],
const graphRef = ref(); tableColumns: [],
const tableRef = ref(); graphList: [],
let isGraph = ref(true);
defineOptions({
name: 'EnvironmentMonitorIndex', // 与页面路由name一致缓存才可生效
}); });
const downloadChart = () => { // 使用 provide 函数来提供这个响应式对象
if (isGraph.value) { provide('pageData', pageData);
if (graphRef.value) {
graphRef.value.downloadChart();
}
}
};
function change() {
isGraph.value = !isGraph.value;
if (iconName.value == 'biaoge') {
iconName.value = 'bingtu';
} else {
iconName.value = 'biaoge';
}
}
</script> </script>
<style lang="less" scoped>
.ns-right-title {
display: flex;
justify-content: space-between;
align-items: center;
user-select: text;
margin-bottom: 5px;
padding-bottom: 10px;
padding-top: 10px;
border-bottom: 1px solid #e9e9e9;
> span {
padding-left: 10px;
line-height: 20px;
}
}
.button {
display: inline-block;
padding-right: 10px;
}
</style>

81
hx-ai-intelligent/src/view/monitor/deviceMonitor/page.vue
View File

@ -0,0 +1,81 @@
<!-- eslint-disable vue/multi-word-component-names -->
<template>
<a-row type="flex">
<a-col :span="4">
<div style="padding: 0 20px; width: 100%; height: 100%">
<tree ref="treeRef" />
</div>
</a-col>
<a-col :span="20">
<div style="width: 100%; height: 100%">
<div class="ns-right-title">
<span>历史数据</span>
<div class="button">
<ns-icon name="xiazai" size="18" style="margin-right: 10px" @click="downloadChart" />
<ns-icon :name="iconName" size="18" style="margin-right: 10px" @click="change" />
</div>
</div>
<graph ref="graphRef" v-if="isGraph" />
<environment-table ref="tableRef" v-else />
</div>
</a-col>
</a-row>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import tree from './tree/index.vue';
import graph from './graph/index.vue';
import environmentTable from './table/index.vue';
const iconName = ref('biaoge');
const treeRef = ref();
const graphRef = ref();
const tableRef = ref();
let isGraph = ref(true);
defineOptions({
name: 'EnvironmentMonitorIndex', // 与页面路由name一致缓存才可生效
});
const downloadChart = () => {
if (isGraph.value) {
if (graphRef.value) {
graphRef.value.downloadChart();
}
}
};
function change() {
isGraph.value = !isGraph.value;
if (iconName.value == 'biaoge') {
iconName.value = 'bingtu';
} else {
iconName.value = 'biaoge';
}
}
</script>
<style lang="less" scoped>
.ns-right-title {
display: flex;
justify-content: space-between;
align-items: center;
user-select: text;
margin-bottom: 5px;
padding-bottom: 10px;
padding-top: 10px;
border-bottom: 1px solid #e9e9e9;
> span {
padding-left: 10px;
line-height: 20px;
}
}
.button {
display: inline-block;
padding-right: 10px;
}
</style>

319
hx-ai-intelligent/src/view/monitor/deviceMonitor/table/index.vue
View File

@ -3,184 +3,177 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent, watch, ref, onMounted } from 'vue';
import type { TableColumnType } from 'ant-design-vue'; import type { TableColumnType } from 'ant-design-vue';
import { inject } from 'vue';
const data = [ // let data: any[] = [];
{
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({ export default defineComponent({
name: 'EnvironmentTable', name: 'EnvironmentTable',
setup() { setup() {
const getRowSpan = (dataIndex: string, record, data, dependents: string[] = []) => { let data = ref<any[]>([]);
let rowSpan = 1; let columns = ref<TableColumnType[]>([]);
for (let i = data.indexOf(record) + 1; i < data.length; i++) {
let shouldMerge = true; interface PageData {
for (const dependent of dependents) { tableList: any[];
if (data[i][dependent] !== record[dependent]) { tableColumns: any[];
shouldMerge = false; graphList: 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.tableList;
let columnA: any[] = [...column];
columnA.push(...pageData.tableColumns);
columns.value = columnA;
// pageData.graphList;
// 执行你的逻辑代码
},
{ deep: true },
);
const getRowSpan = (dataIndex: string, record: any, data: any, 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; break;
} }
} }
if (shouldMerge && data[i][dataIndex] === record[dataIndex]) { return rowSpan;
rowSpan++; };
} else {
break;
}
}
return rowSpan;
};
const columns: TableColumnType[] = [ const column: TableColumnType[] = [
{ {
title: '序号', title: '序号',
dataIndex: 'key', dataIndex: 'key',
customCell: (record, rowIndex) => { customCell: (record, rowIndex) => {
const rowSpan = getRowSpan('name', record, data); if (rowIndex == undefined) {
if (rowIndex != 0 && data[rowIndex-1].key == record.key) { return {
return { rowSpan: 0,
rowSpan: 0, colSpan: 0,
colSpan: 0, };
} }
} const rowSpan = getRowSpan('name', record, data.value);
return { if (rowIndex != 0 && data.value[rowIndex - 1].key == record.key) {
rowSpan: rowSpan, return {
}; rowSpan: 0,
colSpan: 0,
}, };
},
{
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,
};
// if (rowIndex === data.indexOf(record)) {
// return {
// rowSpan: rowSpan,
// };
// }
// return {
// rowSpan: 0,
// colSpan: 0,
// };
},
},
{
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 { return {
rowSpan: 0, rowSpan: rowSpan,
colSpan: 0, };
},
},
{
title: '设备名称',
dataIndex: 'name',
customCell: (record, rowIndex) => {
if (rowIndex == undefined) {
return {
rowSpan: 0,
colSpan: 0,
};
} }
} const rowSpan = getRowSpan('name', record, data.value);
return { if (rowIndex != 0 && data.value[rowIndex - 1].name == record.name) {
rowSpan: rowSpan, return {
}; rowSpan: 0,
// if (rowIndex === data.indexOf(record)) { colSpan: 0,
// return { };
// rowSpan: rowSpan, }
// }; return {
// } rowSpan: rowSpan,
// return { };
// rowSpan: 0, },
// colSpan: 0,
// };
}, },
}, {
{ title: '设备点位',
title: '计量单位', dataIndex: 'position',
dataIndex: 'unit', customCell: (record, rowIndex) => {
customCell: (record, rowIndex) => { if (rowIndex == undefined) {
const rowSpan = getRowSpan('unit', record, data, ['name', 'position']); return {
if (rowIndex != 0 && data[rowIndex-1].name == record.name && data[rowIndex-1].position == record.position && data[rowIndex-1].unit == record.unit) { rowSpan: 0,
colSpan: 0,
};
}
const rowSpan = getRowSpan('position', record, data.value, ['name']);
if (
rowIndex != 0 &&
data.value[rowIndex - 1].name == record.name &&
data.value[rowIndex - 1].position == record.position
) {
return {
rowSpan: 0,
colSpan: 0,
};
}
return { return {
rowSpan: 0, rowSpan: rowSpan,
colSpan: 0, };
},
},
{
title: '计量单位',
dataIndex: 'unit',
customCell: (record, rowIndex) => {
if (rowIndex == undefined) {
return {
rowSpan: 0,
colSpan: 0,
};
} }
} const rowSpan = getRowSpan('unit', record, data.value, ['name', 'position']);
return { if (
rowSpan: rowSpan, rowIndex != 0 &&
}; data.value[rowIndex - 1].name == record.name &&
// if (rowIndex === data.indexOf(record)) { data.value[rowIndex - 1].position == record.position &&
// return { data.value[rowIndex - 1].unit == record.unit
// rowSpan: rowSpan, ) {
// }; return {
// } rowSpan: 0,
// return { colSpan: 0,
// rowSpan: 0, };
// colSpan: 0, }
// }; return {
rowSpan: rowSpan,
};
},
}, },
}, ];
{
title: '日期', onMounted(() => {
dataIndex: 'date', data.value = pageData.tableList;
},
{
title: '1:00',
dataIndex: '1:00',
},
];
return { let columnA: any[] = [...column];
data, columnA.push(...pageData.tableColumns);
columns, columns.value = columnA;
}; });
}, return {
}); data,
column,
columns,
pageData,
};
},
});
</script> </script>
<style lang="less" scoped></style> <style lang="less" scoped></style>

325
hx-ai-intelligent/src/view/monitor/deviceMonitor/tree/index.vue
View File

@ -8,7 +8,8 @@
v-model:value="value" v-model:value="value"
style="width: 100%" style="width: 100%"
:tree-line="treeLine && { showLeafIcon }" :tree-line="treeLine && { showLeafIcon }"
:tree-data="treeData1"> :tree-data="treeData1"
@change="">
<!-- <template #title="{ value: val, title }"> <!-- <template #title="{ value: val, title }">
<b v-if="val === 'parent 1-1'" style="color: #08c">sss</b> <b v-if="val === 'parent 1-1'" style="color: #08c">sss</b>
<template v-else>{{ title }}</template> <template v-else>{{ title }}</template>
@ -49,17 +50,24 @@
@calendarChange="onCalendarChange" @calendarChange="onCalendarChange"
style="width: 100%; margin-bottom: 10px" style="width: 100%; margin-bottom: 10px"
:placeholder="['请选择日期', '请选择日期']" /> :placeholder="['请选择日期', '请选择日期']" />
<a-button type="primary" style="width: 100%; margin-bottom: 10px" @click="getSelect" <a-button type="primary" style="width: 100%; margin-bottom: 10px" @click="getSelect">
>查询</a-button 查询
> </a-button>
<a-button type="primary" style="width: 100%; margin-bottom: 10px" @click="getSelect11">
模拟不同数据查询
</a-button>
</div> </div>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import type { TreeSelectProps, TreeProps, SelectProps } from 'ant-design-vue'; import type { TreeSelectProps, TreeProps, SelectProps } from 'ant-design-vue';
import { defineComponent, ref, watch, onMounted } from 'vue'; import { defineComponent, ref, onMounted } from 'vue';
import dayjs, { Dayjs } from 'dayjs'; import { Dayjs } from 'dayjs';
import { inject } from 'vue';
import { http } from '/nerv-lib/util';
import { device } from '/@/api/deviceManage';
// import { device } from '/@/api/deviceManage';
const treeData2: TreeProps['treeData'] = [ const treeData2: TreeProps['treeData'] = [
{ {
@ -98,6 +106,10 @@
const showLeafIcon = ref(false); const showLeafIcon = ref(false);
const value = ref<string>(); const value = ref<string>();
const orgId = ref('');
const result = JSON.parse(sessionStorage.getItem('ORGID')!);
orgId.value = result;
const treeData1 = ref<TreeSelectProps['treeData']>([ const treeData1 = ref<TreeSelectProps['treeData']>([
{ {
title: '3.电梯', title: '3.电梯',
@ -137,6 +149,18 @@
}, },
]); ]);
http.post(device.queryDeviceTree, { orgId: orgId.value }).then((res) => {
treeData1.value = formatTreeData(res.data);
});
const formatTreeData = (data) => {
return data.map((item) => ({
title: item.code + '.' + item.deviceType,
value: item.id,
children: item.children ? formatTreeData(item.children) : [],
}));
};
const expandedKeys = ref<string[]>(['0-0-0', '0-0-1']); const expandedKeys = ref<string[]>(['0-0-0', '0-0-1']);
const selectedKeys = ref<string[]>(['0-0-0', '0-0-1']); const selectedKeys = ref<string[]>(['0-0-0', '0-0-1']);
const checkedKeys = ref<string[]>(['0-0-0', '0-0-1']); const checkedKeys = ref<string[]>(['0-0-0', '0-0-1']);
@ -177,7 +201,290 @@
]; ];
}; };
const getSelect = () => {}; interface PageData {
tableList: any[];
tableColumns: any[];
graphList: any[];
}
const pageData = inject<PageData>('pageData');
if (!pageData) {
throw new Error('pageData is not provided');
}
// 查询数据后放入pageData
const getSelect = () => {
pageData.tableList = [
{
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',
},
];
pageData.tableColumns = [
{
title: '日期',
dataIndex: 'date',
},
{
title: '1:00',
dataIndex: '1:00',
},
];
pageData.graphList = [
{
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',
},
],
},
{
date: '2023-12-06 0:00',
unit: 'V',
data: [
{
name: 'AC_002（暖通电表）',
value: '15',
},
{
name: 'AC_003（照明电表）',
value: '18',
},
{
name: 'AC_004（给排水电表）',
value: '15',
},
],
},
];
};
// 测试查询 模拟不同数据
const getSelect11 = () => {
pageData.tableList = [
{
key: '1',
name: 'AC_002（暖通电表）',
position: 'A 相电压',
unit: 'V',
date: '2023-12-01',
'1:00': '3626',
'2:00': '2222',
},
{
key: '1',
name: 'AC_002（暖通电表）',
position: 'A 相电压',
unit: 'V',
date: '2023-12-01',
'1:00': '3626',
'2:00': '2222',
},
{
key: '2',
name: 'AC_003（照明电表）',
position: 'A 相电压',
unit: 'V',
date: '2023-12-01',
'1:00': '3626',
'2:00': '2222',
},
{
key: '2',
name: 'AC_003（照明电表）',
position: 'A 相电压',
unit: 'V',
date: '2023-12-01',
'1:00': '3626',
'2:00': '2222',
},
{
key: '3',
name: 'AC_004（给排水电表）',
position: 'A 相电压',
unit: 'V',
date: '2023-12-01',
'1:00': '3626',
'2:00': '2222',
},
];
pageData.tableColumns = [
{
title: '日期',
dataIndex: 'date',
},
{
title: '1:00',
dataIndex: '1:00',
},
{
title: '2:00',
dataIndex: '2:00',
},
];
pageData.graphList = [
{
date: '2023-12-01 0:00',
unit: 'V',
data: [
{
name: 'AC_002（暖通电表）',
value: '21',
},
{
name: 'AC_003（照明电表）',
value: '36',
},
{
name: 'AC_004（给排水电表）',
value: '5',
},
{
name: 'AC_005（1111111）',
value: '14',
},
],
},
{
date: '2023-12-02 0:00',
unit: 'V',
data: [
{
name: 'AC_002（暖通电表）',
value: '26',
},
{
name: 'AC_003（照明电表）',
value: '25',
},
{
name: 'AC_004（给排水电表）',
value: '47',
},
{
name: 'AC_005（1111111）',
value: '28',
},
],
},
];
};
type RangeValue = [Dayjs, Dayjs]; type RangeValue = [Dayjs, Dayjs];
const dates = ref<RangeValue>(); const dates = ref<RangeValue>();
@ -210,7 +517,7 @@
getDianWeiList(); getDianWeiList();
}); });
const dateFormat = 'YYYY-MM-DD'; // const dateFormat = 'YYYY-MM-DD';
return { return {
treeLine, treeLine,
@ -228,11 +535,13 @@
dateRange, dateRange,
getDianWeiList, getDianWeiList,
getSelect, getSelect,
getSelect11,
disabledDate, disabledDate,
onCalendarChange, onCalendarChange,
onOpenChange, onOpenChange,
onChange, onChange,
hackValue, hackValue,
pageData,
}; };
}, },
}); });

Write Preview
Loading…
Cancel
Save