1.监控中心 - 设备监测 左侧树与右侧组件联动
2.对接设备类型接口
This commit is contained in:
fks-yangshouda
@@ -8,7 +8,8 @@
|
||||
v-model:value="value"
|
||||
style="width: 100%"
|
||||
:tree-line="treeLine && { showLeafIcon }"
|
||||
:tree-data="treeData1">
|
||||
:tree-data="treeData1"
|
||||
@change="">
|
||||
<!-- <template #title="{ value: val, title }">
|
||||
<b v-if="val === 'parent 1-1'" style="color: #08c">sss</b>
|
||||
<template v-else>{{ title }}</template>
|
||||
@@ -49,17 +50,24 @@
|
||||
@calendarChange="onCalendarChange"
|
||||
style="width: 100%; margin-bottom: 10px"
|
||||
:placeholder="['请选择日期', '请选择日期']" />
|
||||
<a-button type="primary" style="width: 100%; margin-bottom: 10px" @click="getSelect"
|
||||
>查询</a-button
|
||||
>
|
||||
<a-button type="primary" style="width: 100%; margin-bottom: 10px" @click="getSelect">
|
||||
查询
|
||||
</a-button>
|
||||
<a-button type="primary" style="width: 100%; margin-bottom: 10px" @click="getSelect11">
|
||||
模拟不同数据查询
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import type { TreeSelectProps, TreeProps, SelectProps } from 'ant-design-vue';
|
||||
import { defineComponent, ref, watch, onMounted } from 'vue';
|
||||
import dayjs, { Dayjs } from 'dayjs';
|
||||
import { defineComponent, ref, onMounted } from 'vue';
|
||||
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'] = [
|
||||
{
|
||||
@@ -98,6 +106,10 @@
|
||||
const showLeafIcon = ref(false);
|
||||
const value = ref<string>();
|
||||
|
||||
const orgId = ref('');
|
||||
const result = JSON.parse(sessionStorage.getItem('ORGID')!);
|
||||
orgId.value = result;
|
||||
|
||||
const treeData1 = ref<TreeSelectProps['treeData']>([
|
||||
{
|
||||
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 selectedKeys = 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];
|
||||
const dates = ref<RangeValue>();
|
||||
@@ -210,7 +517,7 @@
|
||||
getDianWeiList();
|
||||
});
|
||||
|
||||
const dateFormat = 'YYYY-MM-DD';
|
||||
// const dateFormat = 'YYYY-MM-DD';
|
||||
|
||||
return {
|
||||
treeLine,
|
||||
@@ -228,11 +535,13 @@
|
||||
dateRange,
|
||||
getDianWeiList,
|
||||
getSelect,
|
||||
getSelect11,
|
||||
disabledDate,
|
||||
onCalendarChange,
|
||||
onOpenChange,
|
||||
onChange,
|
||||
hackValue,
|
||||
pageData,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user