查询结果左侧树颜色

This commit is contained in:
sjl
2025-10-22 10:51:46 +08:00
parent be84092cfe
commit ac11af35df
2 changed files with 52 additions and 7 deletions

View File

@@ -142,6 +142,7 @@ export namespace CheckData {
id: string
code: string
scriptName: string
resultFlag: number
}
// 用来描述 检测数据-左侧树结构

View File

@@ -72,7 +72,17 @@
node-key="id"
ref="treeRef"
@node-click="handleNodeClick"
></el-tree>
class="custom-tree"
>
<template #default="{ node, data }">
<div class="custom-tree-node">
<span v-if="data.resultFlag === 1">{{ node.label }}</span>
<span v-else-if="data.resultFlag === 2" style="color: #ee6666;">{{ node.label }}</span>
<span v-else-if="data.resultFlag === 4" style="color: #fac858;">{{ node.label }}</span>
</div>
</template>
</el-tree>
</div>
<div class="content-right">
<div class="content-right-title">
@@ -90,7 +100,13 @@
:key="item.value"
:label="item.label"
:value="item.value"
/>
>
<div style="display: flex; align-items: center; justify-content: space-between">
<span v-if="item.resultFlag === 1">{{ item.label }}</span>
<span v-else-if="item.resultFlag === 2" style="color: #ee6666;">{{ item.label }}</span>
<span v-else-if="item.resultFlag === 4" style="color: #fac858;">{{ item.label }}</span>
</div>
</el-option>
</el-select>
<!-- 否则显示原来的文本 -->
<span v-else style="color: var(--el-color-primary)">{{ rowList.scriptName }}</span>
@@ -122,6 +138,7 @@
:label="item.replace(/\.0$/, '')"
:value="item"
/>
</el-select>
</el-form-item>
</div>
@@ -200,7 +217,7 @@ const selectedScriptName = ref('')
const pattern = ref('')
// 添加以下内容
const isWaveData = ref(false)
const scriptNameOptions = ref<{ label: string; value: string }[]>([])
const scriptNameOptions = ref<{ label: string; value: string;resultFlag:number }[]>([])
// 表单数据
const formContent = reactive<CheckData.DataCheck>({
@@ -280,7 +297,8 @@ const initGetResult = async () => {
// 设置录波数据相关的选项
scriptNameOptions.value = selectScript.value.map(item => ({
label: item.scriptName,
value: item.scriptName
value: item.scriptName,
resultFlag: item.resultFlag
}))
// 默认选中第一个选项
@@ -311,7 +329,7 @@ const initScriptData = async () => {
let temp = response.data.map((item: any) => {
return {
...item,
scriptName: item.scriptName
scriptName: item.scriptName
}
})
@@ -327,7 +345,8 @@ const initScriptData = async () => {
temp2 = luoboItem.subItems.map((item: any) => {
return {
...item,
scriptName: item.scriptName
scriptName: item.scriptName,
resultFlag: item.resultFlag ?? 0 // 假设默认值为 0
}
})
}
@@ -502,6 +521,7 @@ const getResults = async (code: any) => {
}
currentCheckItem.value = list[0]
tesList.value = list
console.log('checkResultData:', tesList.value)
checkResultData.value = res.data.resultMap
rawTableData.value = res.data.rawDataMap
})
@@ -573,6 +593,30 @@ defineExpose({
</script>
<style lang="scss" scoped>
.custom-tree {
:deep(.el-tree-node__content) {
.custom-tree-node {
display: flex;
align-items: center;
width: 100%;
}
// 根据 resultFlag 设置不同颜色
&[data-result-flag="1"] {
color: #67c23a; // 绿色 - 符合
}
&[data-result-flag="2"] {
color: #f56c6c; // 红色 - 不符合
}
&[data-result-flag="4"] {
color: #e6a23c; // 橙色 - 警告
}
}
}
.dialog {
display: flex;
flex-direction: column;
@@ -599,7 +643,7 @@ defineExpose({
flex-direction: column;
align-items: center;
max-height: 495px;
padding: 10px 0.5% 0px 0.5%;
border: 1px solid #ccc;
overflow-y: auto;