ClientApps/pqs-9100_client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改预检测实时数据详情展示

Browse Source
This commit is contained in:
guanj
2025-08-27 14:55:00 +08:00
parent 772707ac42
commit 567201563d
17 changed files with 2513 additions and 2537 deletions
Download Patch File Download Diff File Expand all files Collapse all files

331
frontend/src/views/machine/controlSource/components/tree.vue
View File

@@ -1,166 +1,165 @@
<template>
<el-tree
node-key="id"
default-expand-all
:data="props.treeData"
:props="defaultProps"
style="width: 100%"
:expand-on-click-node="false"
:highlight-current="true"
@node-click="handleNodeClick"
show-checkbox
:check-strictly="true"
@check-change="handleCheckChange"
ref="treeRef"
>
<template #default="{ node, data }">
<el-tooltip effect="dark" :content="data.sourceDesc || data.scriptTypeName" placement="top" :hide-after="0">
<div class="custom-tree-node">
{{ data.scriptTypeName || data.sourceDesc }}
</div>
</el-tooltip>
</template>
</el-tree>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted, watch, nextTick } from 'vue'
import { CheckData } from '@/api/check/interface'
import { da } from 'element-plus/es/locale'
import { on } from 'events'
const props = defineProps({
treeData: {
type: Array,
required: true
}
})
const emit = defineEmits(['setTab'])
const dataTree = ref<CheckData.TreeItem[]>([])
const defaultProps = {
children: 'children',
label: 'scriptTypeName',
pid: 'pid'
}
const activeName = ref('')
const childActiveName = ref('')
const activeIndex = ref()
const treeRef = ref()
const handleNodeClick = (data, node) => {
if(data.index!= null){
let code = ['Base', 'VOL', 'Freq', 'Harm', 'Base_0_10', 'Base_20_85', 'Base_110_200']
const parents = getParentNodes(node, [])
parents.pop()
parents.unshift(node.data)
parents.reverse()
let active = parents[0].scriptTypeCode
let childActive = findTargetCodes(parents, code)[0] || ''
// 获取当前节点的直接父节点
if (activeName.value != active || childActiveName.value != childActive || activeIndex.value != data.index) {
activeName.value = active
childActiveName.value = childActive
emit('setTab', {
activeName: active,
childActiveName: childActive,
activeIndex:data.index
})
}
}
}
// 返回父级
const getParentNodes = (node, parents) => {
if (node.parent) {
// 将父节点添加到数组中
parents.push(node.parent.data)
// 递归获取更高层级的父节点
getParentNodes(node.parent, parents)
}
return parents
}
// 判断childActiveName值
function findTargetCodes(data: any[], targetCodes: string[]) {
let result: string[] = []
data.forEach(item => {
if (item.scriptTypeCode != null) {
if (targetCodes.includes(item.scriptTypeCode)) {
result.push(item.scriptTypeCode)
}
}
})
return result
// for (let item of data) {
// // 判断当前项的 scriptTypeCode 是否包含目标值
// if (item.scriptTypeCode !=null && targetCodes.includes(item.scriptTypeCode)) {
// console.log("🚀 ~ findTargetCodes ~ targetCodes.includes(item.scriptTypeCode):",item.scriptTypeCode, targetCodes.includes(item.scriptTypeCode))
// result.push(item.scriptTypeCode)
// return result
// }
// // 如果存在 children，递归检查
// if (item.children && item.children.length > 0) {
// result = result.concat(findTargetCodes(item.children, targetCodes))
// }
// }
// return result
}
function handleCheckChange(data,isChecked) {
if (isChecked)
{
// 如果没有子节点，允许勾选
const checked = [data.id]; // id为tree的node-key属性
treeRef.value?.setCheckedKeys(checked);
emit('setTab', {
activeName: data.scriptType,
childActiveName: data.scriptTypeCode,
activeIndex:data.index
})
}
}
// 递归查找第一个节点的最后一层子节点
function findFirstLeafNode(node: any): any {
if (node.children && node.children.length > 0) {
return findFirstLeafNode(node.children[0]);
}
return node;
}
const checkTree = () => {
console.log('checkTree11')
console.log('checkTree22',props.treeData.length)
console.log('checkTree33',treeRef.value)
if (props.treeData.length > 0 && treeRef.value) {
console.log('checkTree44')
const firstNode = props.treeData[0];
const firstLeafNode = findFirstLeafNode(firstNode);
const firstLeafNodeId = firstLeafNode.id;
treeRef.value.setCheckedKeys([firstLeafNodeId]);
}
}
// 确保在组件挂载后也执行一次
onMounted(() => {
console.log('onMounted',props.treeData);
nextTick(() => {
checkTree()
});
});
// // 对外映射
defineExpose({ checkTree })
</script>
<style lang="scss" scoped>
.custom-tree-node {
max-width: 230px;
overflow-x: hidden !important;
white-space: nowrap !important;
text-overflow: ellipsis !important;
}
</style>
<template>
<el-tree
node-key="id"
default-expand-all
:data="props.treeData"
:props="defaultProps"
style="width: 100%"
:expand-on-click-node="false"
:highlight-current="true"
@node-click="handleNodeClick"
show-checkbox
:check-strictly="true"
@check-change="handleCheckChange"
ref="treeRef"
>
<template #default="{ node, data }">
<el-tooltip effect="dark" :content="data.sourceDesc || data.scriptTypeName" placement="top" :hide-after="0">
<div class="custom-tree-node">
{{ data.scriptTypeName || data.sourceDesc }}
</div>
</el-tooltip>
</template>
</el-tree>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted, watch, nextTick } from 'vue'
import { CheckData } from '@/api/check/interface'
import { da } from 'element-plus/es/locale'
import { on } from 'events'
const props = defineProps({
treeData: {
type: Array,
required: true
}
})
const emit = defineEmits(['setTab'])
const dataTree = ref<CheckData.TreeItem[]>([])
const defaultProps = {
children: 'children',
label: 'scriptTypeName',
pid: 'pid'
}
const activeName = ref('')
const childActiveName = ref('')
const activeIndex = ref()
const treeRef = ref()
const handleNodeClick = (data, node) => {
if(data.index!= null){
let code = ['Base', 'VOL', 'Freq', 'Harm', 'Base_0_10', 'Base_20_85', 'Base_110_200']
const parents = getParentNodes(node, [])
parents.pop()
parents.unshift(node.data)
parents.reverse()
let active = parents[0].scriptTypeCode
let childActive = findTargetCodes(parents, code)[0] || ''
// 获取当前节点的直接父节点
if (activeName.value != active || childActiveName.value != childActive || activeIndex.value != data.index) {
activeName.value = active
childActiveName.value = childActive
emit('setTab', {
activeName: active,
childActiveName: childActive,
activeIndex:data.index
})
}
}
}
// 返回父级
const getParentNodes = (node, parents) => {
if (node.parent) {
// 将父节点添加到数组中
parents.push(node.parent.data)
// 递归获取更高层级的父节点
getParentNodes(node.parent, parents)
}
return parents
}
// 判断childActiveName值
function findTargetCodes(data: any[], targetCodes: string[]) {
let result: string[] = []
data.forEach(item => {
if (item.scriptTypeCode != null) {
if (targetCodes.includes(item.scriptTypeCode)) {
result.push(item.scriptTypeCode)
}
}
})
return result
// for (let item of data) {
// // 判断当前项的 scriptTypeCode 是否包含目标值
// if (item.scriptTypeCode !=null && targetCodes.includes(item.scriptTypeCode)) {
// result.push(item.scriptTypeCode)
// return result
// }
// // 如果存在 children，递归检查
// if (item.children && item.children.length > 0) {
// result = result.concat(findTargetCodes(item.children, targetCodes))
// }
// }
// return result
}
function handleCheckChange(data,isChecked) {
if (isChecked)
{
// 如果没有子节点，允许勾选
const checked = [data.id]; // id为tree的node-key属性
treeRef.value?.setCheckedKeys(checked);
emit('setTab', {
activeName: data.scriptType,
childActiveName: data.scriptTypeCode,
activeIndex:data.index
})
}
}
// 递归查找第一个节点的最后一层子节点
function findFirstLeafNode(node: any): any {
if (node.children && node.children.length > 0) {
return findFirstLeafNode(node.children[0]);
}
return node;
}
const checkTree = () => {
console.log('checkTree11')
console.log('checkTree22',props.treeData.length)
console.log('checkTree33',treeRef.value)
if (props.treeData.length > 0 && treeRef.value) {
console.log('checkTree44')
const firstNode = props.treeData[0];
const firstLeafNode = findFirstLeafNode(firstNode);
const firstLeafNodeId = firstLeafNode.id;
treeRef.value.setCheckedKeys([firstLeafNodeId]);
}
}
// 确保在组件挂载后也执行一次
onMounted(() => {
console.log('onMounted',props.treeData);
nextTick(() => {
checkTree()
});
});
// // 对外映射
defineExpose({ checkTree })
</script>
<style lang="scss" scoped>
.custom-tree-node {
max-width: 230px;
overflow-x: hidden !important;
white-space: nowrap !important;
text-overflow: ellipsis !important;
}
</style>