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

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

@@ -11,18 +11,16 @@
:tree-data="treeData1"
@change="changeDeviceType" />
<a-tree
v-model:expandedKeys="expandedKeys"
v-model:selectedKeys="selectedKeys"
v-model:checkedKeys="checkedKeys"
checkable
style="width: 100%; margin-bottom: 10px"
:tree-data="treeData2">
<!-- <template #title="{ title, key }">
<span v-if="key === '0-0-1-0'" style="color: #1890ff">{{ title }}</span>
<template v-else>{{ title }}</template>
</template> -->
</a-tree>
<a-spin :spinning="treeLoading">
<a-tree
v-model:expandedKeys="expandedKeys"
v-model:selectedKeys="selectedKeys"
v-model:checkedKeys="checkedKeys"
checkable
:height="340"
style="width: 100%; overflow-y: auto; margin-bottom: 10px; margin-top: 10px"
:tree-data="treeData2" />
</a-spin>
<div class="fixed-bottom">
<a-divider />
@@ -56,18 +54,18 @@
</template>
<script lang="ts">
import type { TreeSelectProps, TreeProps, SelectProps } from 'ant-design-vue';
import type { TreeSelectProps, SelectProps } from 'ant-design-vue';
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';
export default defineComponent({
// eslint-disable-next-line vue/multi-word-component-names
name: 'Tree',
setup() {
const treeLoading = ref(false);
const treeLine = ref(true);
const showLeafIcon = ref(false);
const value = ref<string>();
@@ -76,90 +74,31 @@
const result = JSON.parse(sessionStorage.getItem('ORGID')!);
orgId.value = result;
const treeData1 = ref<TreeSelectProps['treeData']>([
// {
// title: '3.电梯',
// value: '3',
// children: [
// {
// title: '301.扶梯',
// value: '301',
// },
// {
// title: '302.直梯',
// value: '302',
// },
// ],
// },
// {
// title: '4.冷热源',
// value: '4',
// children: [
// {
// title: '401.冷水机组',
// value: '401',
// },
// {
// title: '402.热泵机组',
// value: '402',
// },
// {
// title: '403.锅炉',
// value: '403',
// },
// {
// title: '404.水处理机组',
// value: '404',
// },
// ],
// },
]);
const treeData1 = ref<TreeSelectProps['treeData']>([]);
http.post(device.queryDeviceTree, { orgId: orgId.value }).then((res) => {
treeData1.value = formatTreeData(res.data);
});
const formatTreeData = (data) => {
return data.map((item) => ({
const formatTreeData = (data: any) => {
return data.map((item: any) => ({
title: item.code + '.' + item.deviceType,
value: item.code,
children: item.children ? formatTreeData(item.children) : [],
}));
};
// const treeData2: TreeProps['treeData'] = [
const treeData2 = ref<TreeSelectProps['treeData']>([
// {
// title: 'AC_001(总电表)',
// key: '1',
// children: [
// {
// title: 'AC_002(暖通电表)',
// key: '2',
// },
// {
// title: 'AC_003(照明电表)',
// key: '3',
// },
// {
// title: 'AC_004(给排水电表)',
// key: '4',
// },
// {
// title: 'AC_005(通风电表)',
// key: '5',
// },
// {
// title: 'AC_006(电动门电表)',
// key: '6',
// },
// ],
// },
]);
const treeData2 = ref<TreeSelectProps['treeData']>([]);
const changeDeviceType = (val, label, extra) => {
const changeDeviceType = (val: any, label: any) => {
treeLoading.value = true;
http
.post(device.queryDevicePage, { code: val, orgId: orgId.value, pageNum: 1, pageSize: 10 })
.post(device.queryDevicePage, {
code: val,
orgId: orgId.value,
pageNum: 1,
pageSize: 1000,
})
.then((res) => {
if (!val) {
val = '999999999';
@@ -174,6 +113,9 @@
let a: TreeSelectProps['treeData'] = [{ title: label[0], key: val, children: records }];
treeData2.value = a;
expandedKeys.value = [val];
})
.finally(() => {
treeLoading.value = false;
});
};
@@ -531,11 +473,9 @@
onMounted(() => {
getDianWeiList();
changeDeviceType();
changeDeviceType(null, null);
});
// const dateFormat = 'YYYY-MM-DD';
return {
treeLine,
showLeafIcon,
@@ -560,6 +500,7 @@
hackValue,
pageData,
changeDeviceType,
treeLoading,
};
},
});