实时数据页面绘制

This commit is contained in:
zhujiyan
2024-07-03 19:31:43 +08:00
parent 8f1290111e
commit fbe6d6fae1
9 changed files with 1556 additions and 26 deletions

View File

@@ -34,6 +34,7 @@
<el-collapse accordion v-model="activeName" style="flex: 1; overflow: auto" @change="changeDevice">
<el-collapse-item title="治理设备" :name="0">
<el-tree
style="min-height: calc(100vh - 250px)"
ref="treeRef1"
:props="defaultProps"
highlight-current
@@ -58,6 +59,7 @@
</el-collapse-item>
<el-collapse-item title="便携式设备" :name="1">
<el-tree
style="min-height: calc(100vh - 250px)"
ref="treeRef2"
:props="defaultProps"
highlight-current
@@ -170,7 +172,7 @@ const changeDevice = (val: any) => {
let arr2: any = []
bxsDeviceData.value.forEach((item: any) => {
// item.children.forEach((item2: any) => {
arr2.push(item)
arr2.push(item)
// })
})
if (val == 0) {

View File

@@ -1,7 +1,7 @@
<template>
<Tree
ref="treRef"
@check-change="handleCheckChange"
@checkTreeNodeChange="handleCheckChange"
:default-checked-keys="defaultCheckedKeys"
:show-checkbox="props.showCheckbox"
:data="tree"
@@ -96,11 +96,10 @@ const getTreeList = (list:any) => {
}
})
}
const handleCheckChange = (data: any, checked: any, indeterminate: any) => {
//接收tree选择的数据后传递给父级组件
const handleCheckChange = (data: any) => {
emit('checkChange', {
data,
checked,
indeterminate
data
})
}
defineExpose({getTreeList})

View File

@@ -31,7 +31,7 @@
ref='treeRef'
:props='defaultProps'
highlight-current
@check-change="checkTreeNodeChange"
:filter-node-method='filterNode'
node-key='id'
v-bind='$attrs'
@@ -55,6 +55,7 @@
<script lang='ts' setup>
import useCurrentInstance from '@/utils/useCurrentInstance'
import { ElTree } from 'element-plus'
import { emit } from 'process';
import { ref, watch } from 'vue'
defineOptions({
@@ -77,6 +78,7 @@ const defaultProps = {
label: 'name',
value: 'id'
}
const emit = defineEmits(['checkTreeNodeChange'])
watch(filterText, val => {
treeRef.value!.filter(val)
})
@@ -88,6 +90,10 @@ const filterNode = (value: string, data: any) => {
if (!value) return true
return data.name.includes(value)
}
const checkTreeNodeChange=()=>{
console.log( treeRef.value?.getCheckedNodes(),"ikkkkkiisiiisis");
emit('checkTreeNodeChange',treeRef.value?.getCheckedNodes())
}
const treeRef = ref<InstanceType<typeof ElTree>>()
defineExpose({ treeRef })
</script>

View File

@@ -34,6 +34,7 @@
<el-collapse accordion v-model="activeName" style="flex: 1; overflow: auto" @change="changeDevice">
<el-collapse-item title="治理设备" :name="0">
<el-tree
style="min-height: calc(100vh - 250px)"
ref="treeRef1"
:props="defaultProps"
highlight-current
@@ -58,6 +59,7 @@
</el-collapse-item>
<el-collapse-item title="便携式设备" :name="1">
<el-tree
style="min-height: calc(100vh - 250px)"
ref="treeRef2"
:props="defaultProps"
highlight-current