在线补召
This commit is contained in:
sjl
107
src/components/tree/govern/selectTree.vue
Normal file
107
src/components/tree/govern/selectTree.vue
Normal file
@@ -0,0 +1,107 @@
|
||||
<template>
|
||||
<Tree ref="treRef" :width="width" :data="tree" default-expand-all @changePointType="changePointType" @checkedNodesChange="handleCheckedNodesChange"/>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, nextTick, onMounted, defineProps } from 'vue'
|
||||
import Tree from '../select.vue'
|
||||
import { getLineTree } from '@/api/cs-device-boot/csLedger'
|
||||
import { useConfig } from '@/stores/config'
|
||||
import { getTemplateByDept } from '@/api/harmonic-boot/luckyexcel'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
// const props = defineProps(['template'])
|
||||
interface Props {
|
||||
template?: boolean
|
||||
}
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
template: false
|
||||
})
|
||||
defineOptions({
|
||||
name: 'govern/deviceTree'
|
||||
})
|
||||
|
||||
const emit = defineEmits(['init', 'checkChange', 'pointTypeChange', 'Policy'])
|
||||
const config = useConfig()
|
||||
const tree = ref()
|
||||
const dictData = useDictData()
|
||||
const treRef = ref()
|
||||
const width = ref('')
|
||||
|
||||
const info = () => {
|
||||
tree.value = []
|
||||
let arr3: any[] = []
|
||||
getLineTree().then(res => {
|
||||
//治理设备
|
||||
res.data.map((item: any) => {
|
||||
if (item.name == '在线设备') {
|
||||
item.children.forEach((item: any) => {
|
||||
item.icon = 'el-icon-HomeFilled'
|
||||
item.level = 1
|
||||
item.color = config.getColorVal('elementUiPrimary')
|
||||
item.children.forEach((item2: any) => {
|
||||
item2.icon = 'el-icon-List'
|
||||
item2.level = 1
|
||||
item2.color = config.getColorVal('elementUiPrimary')
|
||||
item2.children.forEach((item3: any) => {
|
||||
item3.icon = 'el-icon-Platform'
|
||||
item3.level = 1
|
||||
item3.color =
|
||||
item3.comFlag === 2 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
|
||||
item3.children.forEach((item4: any) => {
|
||||
item4.icon = 'el-icon-Platform'
|
||||
item4.color =
|
||||
item4.comFlag === 2 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
|
||||
// item4.color = '#e26257 !important'
|
||||
arr3.push(item4)
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
tree.value = res.data.filter(item => item.name == '在线设备')
|
||||
nextTick(() => {
|
||||
if (arr3.length) {
|
||||
//初始化选中
|
||||
treRef.value.treeRef1.setCurrentKey(arr3[0].id)
|
||||
// 注册父组件事件
|
||||
emit('init', {
|
||||
level: 2,
|
||||
...arr3[0]
|
||||
})
|
||||
return
|
||||
}
|
||||
else {
|
||||
emit('init')
|
||||
return
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
const changePointType = (val: any, obj: any) => {
|
||||
emit('pointTypeChange', val, obj)
|
||||
}
|
||||
// 处理子组件传递的勾选节点变化，并转发给父组件
|
||||
const handleCheckedNodesChange = (nodes: any[]) => {
|
||||
// 先给父组件
|
||||
emit('checkChange', nodes)
|
||||
}
|
||||
|
||||
|
||||
if (props.template) {
|
||||
getTemplateByDept({ id: dictData.state.area[0].id })
|
||||
.then((res: any) => {
|
||||
emit('Policy', res.data)
|
||||
info()
|
||||
})
|
||||
.catch(err => {
|
||||
info()
|
||||
})
|
||||
} else {
|
||||
info()
|
||||
}
|
||||
|
||||
|
||||
|
||||
onMounted(() => {})
|
||||
</script>
|
||||
185
src/components/tree/select.vue
Normal file
185
src/components/tree/select.vue
Normal file
@@ -0,0 +1,185 @@
|
||||
<template>
|
||||
<div :style="{ width: menuCollapse ? '40px' : props.width }" style='transition: all 0.3s; overflow: hidden;'>
|
||||
<Icon v-show='menuCollapse' @click='onMenuCollapse' :name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
|
||||
:class="menuCollapse ? 'unfold' : ''" size='18' class='fold ml10 mt20 menu-collapse'
|
||||
style='cursor: pointer' />
|
||||
<div class='cn-tree' :style='{ opacity: menuCollapse ? 0 : 1 }'>
|
||||
<div style='display: flex; align-items: center' class='mb10'>
|
||||
<el-input maxlength="32" show-word-limit v-model.trim='filterText' placeholder='请输入内容' clearable>
|
||||
<template #prefix>
|
||||
<Icon name='el-icon-Search' style='font-size: 16px' />
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<el-tree :style="{ height: 'calc(100vh)' }"
|
||||
style=' overflow: auto;' ref='treeRef' :props='defaultProps' highlight-current
|
||||
:filter-node-method='filterNode' node-key='id' v-bind='$attrs'
|
||||
show-checkbox @check="handleCheckChange" :default-checked-keys="defaultCheckedKeys">
|
||||
<template #default='{ node, data }'>
|
||||
<span class='custom-tree-node'>
|
||||
<Icon :name='data.icon' style='font-size: 16px' :style='{ color: data.color }'
|
||||
v-if='data.icon' />
|
||||
<span style='margin-left: 4px'>{{ node.label }}</span>
|
||||
</span>
|
||||
</template>
|
||||
</el-tree>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
import useCurrentInstance from '@/utils/useCurrentInstance'
|
||||
import { ElMessage, ElTree } from 'element-plus'
|
||||
import { emit } from 'process';
|
||||
import { ref, watch } from 'vue'
|
||||
|
||||
defineOptions({
|
||||
name: 'govern/tree'
|
||||
})
|
||||
|
||||
interface Props {
|
||||
width?: string
|
||||
canExpand?: boolean
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
width: '280px',
|
||||
canExpand: true
|
||||
})
|
||||
const { proxy } = useCurrentInstance()
|
||||
const menuCollapse = ref(false)
|
||||
const filterText = ref('')
|
||||
const defaultProps = {
|
||||
label: 'name',
|
||||
value: 'id'
|
||||
}
|
||||
const emit = defineEmits(['changePointType', 'checkedNodesChange'])
|
||||
|
||||
watch(filterText, val => {
|
||||
treeRef.value!.filter(val)
|
||||
|
||||
})
|
||||
const onMenuCollapse = () => {
|
||||
menuCollapse.value = !menuCollapse.value
|
||||
proxy.eventBus.emit('cnTreeCollapse', menuCollapse)
|
||||
}
|
||||
const filterNode = (value: string, data: any, node: any) => {
|
||||
if (!value) return true
|
||||
// return data.name.includes(value)
|
||||
if (data.name) {
|
||||
|
||||
return chooseNode(value, data, node)
|
||||
}
|
||||
}
|
||||
|
||||
// 过滤父节点 / 子节点 (如果输入的参数是父节点且能匹配，则返回该节点以及其下的所有子节点；如果参数是子节点，则返回该节点的父节点。name是中文字符，enName是英文字符.
|
||||
const chooseNode = (value: string, data: any, node: any) => {
|
||||
|
||||
if (data.name.indexOf(value) !== -1) {
|
||||
return true
|
||||
}
|
||||
const level = node.level
|
||||
// 如果传入的节点本身就是一级节点就不用校验了
|
||||
if (level === 1) {
|
||||
return false
|
||||
}
|
||||
// 先取当前节点的父节点
|
||||
let parentData = node.parent
|
||||
// 遍历当前节点的父节点
|
||||
let index = 0
|
||||
while (index < level - 1) {
|
||||
// 如果匹配到直接返回，此处name值是中文字符，enName是英文字符。判断匹配中英文过滤
|
||||
if (parentData.data.name.indexOf(value) !== -1) {
|
||||
return true
|
||||
}
|
||||
// 否则的话再往上一层做匹配
|
||||
parentData = parentData.parent
|
||||
index++
|
||||
}
|
||||
// 没匹配到返回false
|
||||
return false
|
||||
}
|
||||
|
||||
// 存储所有勾选的节点
|
||||
const checkedNodes = ref<any[]>([])
|
||||
const defaultCheckedKeys = ref<string[]>([])
|
||||
// 处理节点勾选变化
|
||||
const handleCheckChange = (data: any, checkInfo: any) => {
|
||||
const { checkedNodes: nodes } = checkInfo
|
||||
// 过滤出监测点层级(level=3)的节点
|
||||
const monitoringPointNodes = nodes.filter((node: any) => {
|
||||
// 监测点节点通常具有 comFlag 属性或其他标识
|
||||
return node.level === 3
|
||||
})
|
||||
// 限制最多只能勾选5个监测点
|
||||
if (monitoringPointNodes.length > 5) {
|
||||
ElMessage.warning('最多只能选择5个监测点')
|
||||
// 保持之前勾选的状态
|
||||
treeRef.value?.setCheckedNodes(checkedNodes.value)
|
||||
return
|
||||
}
|
||||
|
||||
checkedNodes.value = monitoringPointNodes
|
||||
|
||||
// 将勾选的监测点节点暴露出去
|
||||
emit('checkedNodesChange', monitoringPointNodes)
|
||||
|
||||
// 更新节点的可勾选状态
|
||||
updateNodeCheckStatus(monitoringPointNodes.length)
|
||||
}
|
||||
|
||||
|
||||
// 更新节点的可勾选状态
|
||||
const updateNodeCheckStatus = (currentCount: number) => {
|
||||
if (!treeRef.value) return
|
||||
|
||||
// 如果已经选了5个，则禁用其他未选中的监测点节点
|
||||
const isMaxSelected = currentCount >= 5
|
||||
|
||||
// 获取所有节点并更新状态
|
||||
const allNodes = treeRef.value.store._getAllNodes()
|
||||
allNodes.forEach((node: any) => {
|
||||
if (node.level === 3) { // 监测点层级
|
||||
// 如果已达到最大数量且该节点未被选中，则禁用勾选
|
||||
if (isMaxSelected && !node.checked) {
|
||||
node.disabled = true
|
||||
} else {
|
||||
node.disabled = false
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const treeRef = ref<InstanceType<typeof ElTree>>()
|
||||
defineExpose({ treeRef })
|
||||
</script>
|
||||
|
||||
|
||||
<style lang='scss' scoped>
|
||||
.cn-tree {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
padding: 10px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
:deep(.el-tree) {
|
||||
border: 1px solid var(--el-border-color);
|
||||
}
|
||||
|
||||
:deep(.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content) {
|
||||
background-color: var(--el-color-primary-light-7);
|
||||
}
|
||||
|
||||
.menu-collapse {
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.custom-tree-node {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user