Web/admin-sjzx
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

添加云南曲靖打包命令修改5层树逻辑

Browse Source
This commit is contained in:
guanj
2026-01-05 10:13:53 +08:00
parent fd09e24cf0
commit 98c887b79d
14 changed files with 672 additions and 250 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
.env.qujing Normal file
View File

@@ -0,0 +1,6 @@
# 云南曲靖
NODE_ENV = qujing
VITE_NAME="qujing"
# 电网一张图 地图图层
VITE_NARIMAP=null
VITE_NRGISCOMMON=null

2
package.json
View File

@@ -7,10 +7,12 @@
"dev": "vite --mode dev",
"dev:jibei": "vite --mode jibei",
"dev:hainan": "vite --mode hainan",
"dev:qujing": "vite --mode qujing",
"dev:removeMode": "vite --mode removeMode",
"build": "vite build --mode dev",
"build:jibei": "vite build --mode jibei",
"build:hainan": "vite build --mode hainan",
"build:qujing": "vite build --mode qujing",
"build:removeMode": "vite build --mode removeMode",
"preview": "vite preview"
},

10
src/components/cockpit/integrity/index.vue
View File

@@ -223,7 +223,7 @@ const echart = () => {
series: [
{
name: '异常总数',
name: '',
type: 'bar',
barWidth: 12,
data: [100],
@@ -240,7 +240,7 @@ const echart = () => {
colorStops: [
{
offset: 1,
color: '#57bc6e' // 100% 处的颜色
color: '#FF9100' // 100% 处的颜色
}
],
global: false // 缺省为 false
@@ -249,7 +249,7 @@ const echart = () => {
}
},
{
name: '异常占比',
name: '',
type: 'bar',
barWidth: 13,
data: [
@@ -270,11 +270,11 @@ const echart = () => {
colorStops: [
{
offset: 0,
color: '#FF9100' // 0% 处的颜色
color: '#57bc6e ' // 0% 处的颜色
},
{
offset: 1,
color: '#FF9100' // 100% 处的颜色
color: '#57bc6e' // 100% 处的颜色
}
],
global: false // 缺省为 false

10
src/components/cockpit/onlineRate/index.vue
View File

@@ -222,7 +222,7 @@ const echart = () => {
series: [
{
name: '异常总数',
name: '',
type: 'bar',
barWidth: 12,
data: [100],
@@ -239,7 +239,7 @@ const echart = () => {
colorStops: [
{
offset: 1,
color: '#57bc6e' // 100% 处的颜色
color: '#FF9100' // 100% 处的颜色
}
],
global: false // 缺省为 false
@@ -248,7 +248,7 @@ const echart = () => {
}
},
{
name: '异常占比',
name: '',
type: 'bar',
barWidth: 13,
data: [
@@ -269,11 +269,11 @@ const echart = () => {
colorStops: [
{
offset: 0,
color: '#FF9100' // 0% 处的颜色
color: '#57bc6e' // 0% 处的颜色
},
{
offset: 1,
color: '#FF9100' // 100% 处的颜色
color: '#57bc6e' // 100% 处的颜色
}
],
global: false // 缺省为 false

187
src/components/tree/allocation.vue Normal file
View File

@@ -0,0 +1,187 @@
<template>
<div :style="{ width: menuCollapse ? '40px' : props.width }" style="transition: all 0.3s; overflow: hidden">
<div class="mt15 mr10" style="display: flex; justify-content: end">
<el-button type="primary" icon="el-icon-Select" @click="save" :loading="loading">保存</el-button>
</div>
<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>
<el-tooltip placement="bottom" :hide-after="0" v-if="props.showPush">
<template #content>
<span>台账推送</span>
</template>
<Icon
name="el-icon-Promotion"
size="20"
class="fold ml10 menu-collapse"
style="cursor: pointer"
:style="{ color: config.getColorVal('elementUiPrimary') }"
@click="onAdd"
/>
</el-tooltip>
<!-- <Icon @click='onMenuCollapse' :name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'" v-else
:class="menuCollapse ? 'unfold' : ''" size='18' class='fold ml10 menu-collapse'
style='cursor: pointer' v-if='props.canExpand' /> -->
</div>
<el-tree
:style="{ height: 'calc(100vh - 235px)' }"
style="overflow: auto"
ref="treeRef"
:props="defaultProps"
highlight-current
:default-expand-all="false"
@check-change="checkTreeNodeChange"
:filter-node-method="filterNode"
node-key="id"
v-bind="$attrs"
>
<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 { ElTree } from 'element-plus'
import { emit } from 'process'
import { ref, watch } from 'vue'
import { t } from 'vxe-table'
import { useConfig } from '@/stores/config'
defineOptions({
name: 'govern/tree'
})
interface Props {
width?: string
canExpand?: boolean
showPush?: boolean
}
const loading = ref(false)
const props = withDefaults(defineProps<Props>(), {
width: '280px',
canExpand: true,
showPush: false
})
const config = useConfig()
const { proxy } = useCurrentInstance()
const menuCollapse = ref(false)
const filterText = ref('')
const defaultProps = {
label: 'name',
value: 'id'
}
const emit = defineEmits(['checkTreeNodeChange', 'onAdd', 'checkChange'])
watch(filterText, val => {
treeRef.value!.filter(val)
})
const onMenuCollapse = () => {
menuCollapse.value = !menuCollapse.value
proxy.eventBus.emit('cnTreeCollapse', menuCollapse)
}
const save = () => {
loading.value = true
emit('checkChange')
}
const filterNode = (value: string, data: any, node: any) => {
console.log(value, data, node, 'filterNode')
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 checkTreeNodeChange = () => {
// console.log(treeRef.value?.getCheckedNodes(), "ikkkkkiisiiisis");
emit('checkTreeNodeChange', treeRef.value?.getCheckedNodes())
}
const onAdd = () => {
emit('onAdd')
}
const treeRef = ref<InstanceType<typeof ElTree>>()
defineExpose({ treeRef, loading })
</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>

2
src/components/tree/index.vue
View File

@@ -22,7 +22,7 @@
<template #prefix>
<Icon name="el-icon-Search" style="font-size: 16px" />
</template>
</el-input>
</el-input>
<Icon
@click="onMenuCollapse"
:name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"

1
src/components/tree/pqs/algorithmTree.vue
View File

@@ -19,7 +19,6 @@ import { nextTick, onMounted, ref, useAttrs } from 'vue'
import Tree from '../index.vue'
import { useAdminInfo } from '@/stores/adminInfo'
import { useDictData } from '@/stores/dictData'
import { getTerminalTreeForFive } from '@/api/device-boot/terminalTree'
import { useConfig } from '@/stores/config'
import { queryAllAlgorithmLibrary } from '@/api/supervision-boot/database/index'
defineOptions({

1
src/components/tree/pqs/assessTree.vue
View File

@@ -11,7 +11,6 @@ import { nextTick, onMounted, ref, useAttrs } from 'vue'
import Tree from '../index.vue'
import { useAdminInfo } from '@/stores/adminInfo'
import { useDictData } from '@/stores/dictData'
import { getTerminalTreeForFive } from '@/api/device-boot/terminalTree'
import { useConfig } from '@/stores/config'
import { defineProps } from 'vue'
import { getTree } from '@/api/advance-boot/assess'

400
src/components/tree/pqs/bearingTree.vue
View File

@@ -1,145 +1,255 @@
<template>
<div class="point-tree">
<!-- <el-select
v-model="formData.statisticalType"
placeholder="请选择"
style="min-width: unset; padding: 10px 10px 0"
@change="loadData"
>
<el-option
v-for="item in classificationData"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select> -->
<div style="flex: 1; overflow: hidden">
<Tree ref="treeRef" :data="tree" style="width: 100%; height: 100%" :canExpand="false" v-bind="$attrs" />
</div>
</div>
</template>
<script lang="ts" setup>
import { nextTick, onMounted, ref, useAttrs } from 'vue'
import Tree from '../index.vue'
import { useAdminInfo } from '@/stores/adminInfo'
import { useDictData } from '@/stores/dictData'
import { getTerminalTreeForFive } from '@/api/device-boot/terminalTree'
import { useConfig } from '@/stores/config'
defineOptions({
name: 'pms/pointTree'
})
const emit = defineEmits(['init'])
const attrs = useAttrs()
const adminInfo = useAdminInfo()
const dictData = useDictData()
const config = useConfig()
const classificationData = dictData.getBasicData('Statistical_Type', ['Report_Type'])
const tree = ref()
const treeRef = ref()
const formData = ref({
deptIndex: adminInfo.$state.deptIndex,
monitorFlag: 2,
powerFlag: 2,
loadType: null,
manufacturer: null,
serverName: 'event-boot',
statisticalType: classificationData[0].id,
scale: null
})
const loadData = () => {
let obj = classificationData.find(function (i) {
return i.id === formData.value.statisticalType
}) || { code: '' }
let form = JSON.parse(JSON.stringify(formData.value))
form.statisticalType = classificationData.find((item: any) => item.id == form.statisticalType)
let nodeKey = ''
getTerminalTreeForFive(form).then(res => {
console.log(res)
if (obj.code == 'Power_Network') {
res.data = [
{
name: '电网拓扑',
level: -1,
id: 0,
children: res.data
}
]
}
res.data.forEach((item: any) => {
item.icon = 'el-icon-HomeFilled'
item.color = config.getColorVal('elementUiPrimary')
item.children.forEach((item2: any) => {
item2.icon = 'el-icon-CollectionTag'
item2.color = config.getColorVal('elementUiPrimary')
item2.children.forEach((item3: any) => {
item3.icon = 'el-icon-Flag'
item3.color = config.getColorVal('elementUiPrimary')
item3.children.forEach((item4: any) => {
item4.icon = 'el-icon-OfficeBuilding'
item4.color = config.getColorVal('elementUiPrimary')
item4.children.forEach((item5: anyObj) => {
if (item5.level == 7) {
item5.icon = 'el-icon-DataAnalysis'
item5.color = config.getColorVal('elementUiPrimary')
item5.children.forEach((item6: anyObj) => {
item6.alias = `${item.name}>${item2.name}>${item3.name}>${item4.name}>${item5.name}>${item6.name}`
item6.pid = item4.id
item6.icon = 'fa-solid fa-location-dot'
item6.color = config.getColorVal('elementUiPrimary')
if (item6.comFlag == 0) {
item6.color = 'red !important'
} else if (item6.comFlag == 1) {
item6.color = '#00f93b !important'
} else if (item6.comFlag == 2) {
item6.color = '#8c8c8c !important'
}
})
} else {
item5.alias = `${item.name}>${item2.name}>${item3.name}>${item4.name}>${item5.name}`
item5.pid = item4.id
item5.icon = 'fa-solid fa-location-dot'
item5.color = config.getColorVal('elementUiPrimary')
if (item5.comFlag == 0) {
item5.color = 'red !important'
} else if (item5.comFlag == 1) {
item5.color = '#00f93b !important'
} else if (item5.comFlag == 2) {
item5.color = '#8c8c8c !important'
}
}
})
})
})
})
})
nodeKey = res.data[0].children[0].children[0].children[0].children[0].id
emit('init', res.data[0].children[0].children[0].children[0].children[0])
tree.value = res.data
if (nodeKey) {
nextTick(() => {
treeRef.value.treeRef.setCurrentKey(nodeKey)
// treeRef.value.treeRef.setExpandedKeys(nodeKey)
})
}
})
}
const setKey = (key: string) => {
treeRef.value.treeRef.setCurrentKey(key)
}
defineExpose({ setKey })
loadData()
</script>
<style lang="scss">
.point-tree {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid var(--el-border-color);
}
</style>
<template>
<div class="point-tree">
<!-- <el-select
v-model="formData.statisticalType"
placeholder="请选择"
style="min-width: unset; padding: 10px 10px 0"
@change="loadData"
>
<el-option
v-for="item in classificationData"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select> -->
<div style="flex: 1; overflow: hidden">
<Tree ref="treeRef" :data="tree" style="width: 100%; height: 100%" :canExpand="false" v-bind="$attrs" />
</div>
</div>
</template>
<script lang="ts" setup>
import { nextTick, onMounted, ref, useAttrs } from 'vue'
import Tree from '../index.vue'
import { useAdminInfo } from '@/stores/adminInfo'
import { useDictData } from '@/stores/dictData'
import { getTerminalTreeForFive } from '@/api/device-boot/terminalTree'
import { useConfig } from '@/stores/config'
defineOptions({
name: 'pms/pointTree'
})
const emit = defineEmits(['init'])
const attrs = useAttrs()
const adminInfo = useAdminInfo()
const dictData = useDictData()
const config = useConfig()
const classificationData = dictData.getBasicData('Statistical_Type', ['Report_Type'])
const tree = ref()
const treeRef = ref()
const formData = ref({
deptIndex: adminInfo.$state.deptIndex,
monitorFlag: 2,
powerFlag: 2,
loadType: null,
manufacturer: null,
serverName: 'event-boot',
statisticalType: classificationData[0].id,
scale: null
})
const loadData = () => {
let obj = classificationData.find(function (i) {
return i.id === formData.value.statisticalType
}) || { code: '' }
let form = JSON.parse(JSON.stringify(formData.value))
form.statisticalType = classificationData.find((item: any) => item.id == form.statisticalType)
let nodeKey = ''
getTerminalTreeForFive(form).then(res => {
console.log(res)
if (obj.code == 'Power_Network') {
res.data = [
{
name: '电网拓扑',
level: -1,
id: 0,
children: res.data
}
]
}
// if (VITE_FLAG) {
processTreeData(res.data)
let firstLevel6Node = findFirstLevel6Node(res.data)
nodeKey = firstLevel6Node.id
emit('init', firstLevel6Node)
// res.data.forEach((item: any) => {
// item.icon = 'el-icon-HomeFilled'
// item.color = config.getColorVal('elementUiPrimary')
// item.children.forEach((item2: any) => {
// item2.icon = 'el-icon-CollectionTag'
// item2.color = config.getColorVal('elementUiPrimary')
// item2.children.forEach((item3: any) => {
// item3.icon = 'el-icon-Flag'
// item3.color = config.getColorVal('elementUiPrimary')
// item3.children.forEach((item4: any) => {
// item4.icon = 'el-icon-OfficeBuilding'
// item4.color = config.getColorVal('elementUiPrimary')
// item4.children.forEach((item5: anyObj) => {
// if (item5.level == 7) {
// item5.icon = 'el-icon-DataAnalysis'
// item5.color = config.getColorVal('elementUiPrimary')
// item5.children.forEach((item6: anyObj) => {
// item6.alias = `${item.name}>${item2.name}>${item3.name}>${item4.name}>${item5.name}>${item6.name}`
// item6.pid = item4.id
// item6.icon = 'fa-solid fa-location-dot'
// item6.color = config.getColorVal('elementUiPrimary')
// if (item6.comFlag == 0) {
// item6.color = 'red !important'
// } else if (item6.comFlag == 1) {
// item6.color = '#00f93b !important'
// } else if (item6.comFlag == 2) {
// item6.color = '#8c8c8c !important'
// }
// })
// } else {
// item5.alias = `${item.name}>${item2.name}>${item3.name}>${item4.name}>${item5.name}`
// item5.pid = item4.id
// item5.icon = 'fa-solid fa-location-dot'
// item5.color = config.getColorVal('elementUiPrimary')
// if (item5.comFlag == 0) {
// item5.color = 'red !important'
// } else if (item5.comFlag == 1) {
// item5.color = '#00f93b !important'
// } else if (item5.comFlag == 2) {
// item5.color = '#8c8c8c !important'
// }
// }
// })
// })
// })
// })
// })
// nodeKey = res.data[0].children[0].children[0].children[0].children[0].id
// emit('init', res.data[0].children[0].children[0].children[0].children[0])
tree.value = res.data
if (nodeKey) {
nextTick(() => {
treeRef.value.treeRef.setCurrentKey(nodeKey)
// treeRef.value.treeRef.setExpandedKeys(nodeKey)
})
}
})
}
const setKey = (key: string) => {
treeRef.value.treeRef.setCurrentKey(key)
}
// 定义不同层级对应的图标配置（可根据实际需求调整）
const levelIconMap = {
'-1': 'el-icon-HomeFilled',
0: 'el-icon-CollectionTag',
1: 'el-icon-CollectionTag',
2: 'el-icon-Flag',
3: 'el-icon-OfficeBuilding',
4: 'el-icon-DataAnalysis',
5: 'el-icon-DataAnalysis',
7: 'el-icon-DataAnalysis',
6: 'fa-solid fa-location-dot'
}
/**
* 递归处理树形数据，为不同层级节点设置图标和颜色
* @param data 树形数据数组
* @param level 当前层级（默认从1开始）
*/
function processTreeData(data: any[], level: number = -1) {
// 空值判断，避免数组为空或undefined时报错
if (!Array.isArray(data) || data.length === 0) return
data.forEach(item => {
// 1. 设置基础图标（根据层级匹配）
item.icon = levelIconMap[level] || ''
// 2. 设置基础颜色
item.color = config.getColorVal('elementUiPrimary')
// 3. 第6层特殊处理：根据comFlag调整颜色
if (level === 6 && item.hasOwnProperty('comFlag')) {
switch (item.comFlag) {
case 0:
item.color = 'red !important'
break
case 1:
item.color = '#00f93b !important'
break
case 2:
item.color = '#8c8c8c !important'
break
// 默认值：保持原有基础颜色
default:
item.color = config.getColorVal('elementUiPrimary')
}
}
// 4. 递归处理子节点，层级+1
if (item.children && item.children.length > 0) {
processTreeData(item.children, item.children[0].level)
}
})
}
/**
* 递归查找树形结构中第一个level===6的节点（找到即终止递归）
* @param {Object|Array} tree - 树形数据（根节点数组 或 单个根节点）
* @returns {Object|null} 第一个level为6的节点，无则返回null
*/
function findFirstLevel6Node(tree: any) {
// 统一处理入参：如果是数组，遍历根节点数组（按顺序找第一个符合条件的）
if (Array.isArray(tree)) {
for (const rootNode of tree) {
const result = traverse(rootNode)
// 找到第一个匹配节点，立即返回（终止根节点遍历）
if (result) return result
}
// 所有根节点遍历完未找到
return null
} else {
// 入参是单个节点，直接递归遍历
return traverse(tree)
}
// 核心递归遍历函数
function traverse(node) {
// 终止条件1：节点不存在，返回null
if (!node) return null
// 终止条件2：找到level===6的节点，立即返回（终止递归）
if (node.level === 6) {
return node
}
// 终止条件3：节点无children，返回null
if (!node.children || node.children.length === 0) {
return null
}
// 按顺序遍历当前节点的子节点
for (const child of node.children) {
const foundNode = traverse(child)
// 子节点中找到目标节点，立即返回（终止后续子节点遍历）
if (foundNode) {
return foundNode
}
}
// 当前节点及所有子节点都无匹配，返回null
return null
}
}
defineExpose({ setKey })
loadData()
</script>
<style lang="scss">
.point-tree {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid var(--el-border-color);
}
</style>

226
src/components/tree/pqs/pointTree.vue
View File

@@ -28,6 +28,7 @@ import { useDictData } from '@/stores/dictData'
import { getTerminalTreeForFive } from '@/api/device-boot/terminalTree'
import { useConfig } from '@/stores/config'
import { defineProps } from 'vue'
const VITE_FLAG = import.meta.env.VITE_NAME == 'qujing'
defineOptions({
name: 'pms/pointTree'
})
@@ -61,6 +62,9 @@ const loadData = () => {
}) || { code: '' }
let form = JSON.parse(JSON.stringify(formData.value))
form.statisticalType = classificationData.find((item: any) => item.id == form.statisticalType)
if (VITE_FLAG && form.statisticalType.code == 'Power_Network') {
form.statisticalType.deptName = 'qujing'
}
let nodeKey = ''
getTerminalTreeForFive(form).then(res => {
//console.log('---',res)
@@ -74,62 +78,71 @@ const loadData = () => {
}
]
}
res.data.forEach((item: any) => {
item.icon = 'el-icon-HomeFilled'
item.color = config.getColorVal('elementUiPrimary')
item.children.forEach((item2: any) => {
item2.icon = 'el-icon-CollectionTag'
item2.color = config.getColorVal('elementUiPrimary')
item2.children.forEach((item3: any) => {
item3.icon = 'el-icon-Flag'
item3.color = config.getColorVal('elementUiPrimary')
item3.children.forEach((item4: any) => {
item4.icon = 'el-icon-OfficeBuilding'
item4.color = config.getColorVal('elementUiPrimary')
item4.children.forEach((item5: anyObj) => {
if (item5.level == 7) {
item5.icon = 'el-icon-DataAnalysis'
item5.color = config.getColorVal('elementUiPrimary')
item5.children.forEach((item6: anyObj) => {
item6.alias = `${item.name}>${item2.name}>${item3.name}>${item4.name}>${item5.name}>${item6.name}`
item6.pid = item4.id
item6.icon = 'fa-solid fa-location-dot'
item6.color = config.getColorVal('elementUiPrimary')
if (item6.comFlag == 0) {
item6.color = 'red !important'
} else if (item6.comFlag == 1) {
item6.color = '#00f93b !important'
} else if (item6.comFlag == 2) {
item6.color = '#8c8c8c !important'
}
})
} else {
item5.alias = `${item.name}>${item2.name}>${item3.name}>${item4.name}>${item5.name}`
item5.pid = item4.id
item5.icon = 'fa-solid fa-location-dot'
item5.color = config.getColorVal('elementUiPrimary')
if (item5.comFlag == 0) {
item5.color = 'red !important'
} else if (item5.comFlag == 1) {
item5.color = '#00f93b !important'
} else if (item5.comFlag == 2) {
item5.color = '#8c8c8c !important'
}
}
})
})
})
})
})
// if (VITE_FLAG) {
processTreeData(res.data)
let firstLevel6Node = findFirstLevel6Node(res.data)
nodeKey =
res.data[0].children[0].children[0].children[0].children[0].children[0]?.id ||
res.data[0].children[0].children[0].children[0].children[0]?.id
emit(
'init',
res.data[0].children[0].children[0].children[0].children[0]?.children[0] ||
res.data[0].children[0].children[0].children[0].children[0]
)
nodeKey = firstLevel6Node.id
emit('init', firstLevel6Node)
// } else {
// // 正常树处理
// res.data.forEach((item: any) => {
// item.icon = 'el-icon-HomeFilled'
// item.color = config.getColorVal('elementUiPrimary')
// item.children.forEach((item2: any) => {
// item2.icon = 'el-icon-CollectionTag'
// item2.color = config.getColorVal('elementUiPrimary')
// item2.children.forEach((item3: any) => {
// item3.icon = 'el-icon-Flag'
// item3.color = config.getColorVal('elementUiPrimary')
// item3.children.forEach((item4: any) => {
// item4.icon = 'el-icon-OfficeBuilding'
// item4.color = config.getColorVal('elementUiPrimary')
// item4.children.forEach((item5: anyObj) => {
// if (item5.level == 7) {
// item5.icon = 'el-icon-DataAnalysis'
// item5.color = config.getColorVal('elementUiPrimary')
// item5.children.forEach((item6: anyObj) => {
// item6.alias = `${item.name}>${item2.name}>${item3.name}>${item4.name}>${item5.name}>${item6.name}`
// item6.pid = item4.id
// item6.icon = 'fa-solid fa-location-dot'
// item6.color = config.getColorVal('elementUiPrimary')
// if (item6.comFlag == 0) {
// item6.color = 'red !important'
// } else if (item6.comFlag == 1) {
// item6.color = '#00f93b !important'
// } else if (item6.comFlag == 2) {
// item6.color = '#8c8c8c !important'
// }
// })
// } else {
// item5.alias = `${item.name}>${item2.name}>${item3.name}>${item4.name}>${item5.name}`
// item5.pid = item4.id
// item5.icon = 'fa-solid fa-location-dot'
// item5.color = config.getColorVal('elementUiPrimary')
// if (item5.comFlag == 0) {
// item5.color = 'red !important'
// } else if (item5.comFlag == 1) {
// item5.color = '#00f93b !important'
// } else if (item5.comFlag == 2) {
// item5.color = '#8c8c8c !important'
// }
// }
// })
// })
// })
// })
// })
// nodeKey =
// res.data[0].children[0].children[0].children[0].children[0].children[0]?.id ||
// res.data[0].children[0].children[0].children[0].children[0]?.id
// emit(
// 'init',
// res.data[0].children[0].children[0].children[0].children[0]?.children[0] ||
// res.data[0].children[0].children[0].children[0].children[0]
// )
// }
tree.value = res.data
if (nodeKey) {
@@ -145,6 +158,109 @@ const scrollToNode = (id: string) => {
// 树滚动
treeRef.value.scrollToNode(id)
}
// 定义不同层级对应的图标配置（可根据实际需求调整）
const levelIconMap = {
'-1': 'el-icon-HomeFilled',
0: 'el-icon-CollectionTag',
1: 'el-icon-CollectionTag',
2: 'el-icon-Flag',
3: 'el-icon-OfficeBuilding',
4: 'el-icon-DataAnalysis',
5: 'el-icon-DataAnalysis',
7: 'el-icon-DataAnalysis',
6: 'fa-solid fa-location-dot'
}
/**
* 递归处理树形数据，为不同层级节点设置图标和颜色
* @param data 树形数据数组
* @param level 当前层级（默认从1开始）
*/
function processTreeData(data: any[], level: number = -1, alias: string = '') {
// 空值判断，避免数组为空或undefined时报错
if (!Array.isArray(data) || data.length === 0) return
data.forEach(item => {
// 1. 设置基础图标（根据层级匹配）
item.icon = levelIconMap[level] || ''
item.alias = alias + `${item.name}`
// 2. 设置基础颜色
item.color = config.getColorVal('elementUiPrimary')
// 3. 第6层特殊处理：根据comFlag调整颜色
if (level === 6 && item.hasOwnProperty('comFlag')) {
switch (item.comFlag) {
case 0:
item.color = 'red !important'
break
case 1:
item.color = '#00f93b !important'
break
case 2:
item.color = '#8c8c8c !important'
break
// 默认值：保持原有基础颜色
default:
item.color = config.getColorVal('elementUiPrimary')
}
}
// 4. 递归处理子节点，层级+1
if (item.children && item.children.length > 0) {
processTreeData(item.children, item.children[0].level, level == '-1' ? '' : item.alias + '>')
}
})
}
/**
* 递归查找树形结构中第一个level===6的节点（找到即终止递归）
* @param {Object|Array} tree - 树形数据（根节点数组 或 单个根节点）
* @returns {Object|null} 第一个level为6的节点，无则返回null
*/
function findFirstLevel6Node(tree: any) {
// 统一处理入参：如果是数组，遍历根节点数组（按顺序找第一个符合条件的）
if (Array.isArray(tree)) {
for (const rootNode of tree) {
const result = traverse(rootNode)
// 找到第一个匹配节点，立即返回（终止根节点遍历）
if (result) return result
}
// 所有根节点遍历完未找到
return null
} else {
// 入参是单个节点，直接递归遍历
return traverse(tree)
}
// 核心递归遍历函数
function traverse(node) {
// 终止条件1：节点不存在，返回null
if (!node) return null
// 终止条件2：找到level===6的节点，立即返回（终止递归）
if (node.level === 6) {
return node
}
// 终止条件3：节点无children，返回null
if (!node.children || node.children.length === 0) {
return null
}
// 按顺序遍历当前节点的子节点
for (const child of node.children) {
const foundNode = traverse(child)
// 子节点中找到目标节点，立即返回（终止后续子节点遍历）
if (foundNode) {
return foundNode
}
}
// 当前节点及所有子节点都无匹配，返回null
return null
}
}
defineExpose({ treeRef, scrollToNode, tree })
loadData()
</script>

12
src/views/pqs/harmonicMonitoring/embed/lntegruty/index_JB.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="default-main">
<TableHeader date-picker ref="TableHeaderRef">
<TableHeader date-picker area ref="TableHeaderRef">
<template v-slot:select>
<el-form-item label="运行状态">
<el-select v-model="tableStore.table.params.lineRunFlag" clearable placeholder="请选择运行状态">
@@ -329,7 +329,7 @@ const echart = () => {
series: [
{
name: '异常总数',
name: '',
type: 'bar',
barWidth: 12,
data: [100],
@@ -346,7 +346,7 @@ const echart = () => {
colorStops: [
{
offset: 1,
color: '#57bc6e' // 100% 处的颜色
color: '#FF9100' // 100% 处的颜色
}
],
global: false // 缺省为 false
@@ -355,7 +355,7 @@ const echart = () => {
}
},
{
name: '异常占比',
name: '',
type: 'bar',
barWidth: 13,
data: [
@@ -378,11 +378,11 @@ const echart = () => {
colorStops: [
{
offset: 0,
color: '#FF9100' // 0% 处的颜色
color: '#57bc6e' // 0% 处的颜色
},
{
offset: 1,
color: '#FF9100' // 100% 处的颜色
color: '#57bc6e' // 100% 处的颜色
}
],
global: false // 缺省为 false

12
src/views/pqs/harmonicMonitoring/embed/onlinerate/index_JB.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="default-main">
<TableHeader date-picker ref="TableHeaderRef">
<TableHeader date-picker area ref="TableHeaderRef">
<template v-slot:select>
<el-form-item label="运行状态">
<el-select v-model="tableStore.table.params.lineRunFlag" clearable placeholder="请选择运行状态">
@@ -326,7 +326,7 @@ const echart = () => {
series: [
{
name: '异常总数',
name: '',
type: 'bar',
barWidth: 12,
data: [100],
@@ -343,7 +343,7 @@ const echart = () => {
colorStops: [
{
offset: 1,
color: '#57bc6e' // 100% 处的颜色
color: '#FF9100' // 100% 处的颜色
}
],
global: false // 缺省为 false
@@ -352,7 +352,7 @@ const echart = () => {
}
},
{
name: '异常占比',
name: '',
type: 'bar',
barWidth: 13,
data: [monitoringPoints.value.totalOnlineRate == 0 ? '' : monitoringPoints.value.totalOnlineRate],
@@ -369,11 +369,11 @@ const echart = () => {
colorStops: [
{
offset: 0,
color: '#FF9100' // 0% 处的颜色
color: '#57bc6e' // 0% 处的颜色
},
{
offset: 1,
color: '#FF9100' // 100% 处的颜色
color: '#57bc6e' // 100% 处的颜色
}
],
global: false // 缺省为 false

2
src/views/pqs/harmonicMonitoring/monitoringPoint/online/wentaizhibiaohegelv/index.vue
View File

@@ -231,7 +231,7 @@ const init = () => {
},
backgroundColor: 'rgba(0,0,0,0.55)',
formatter: function (params: any) {
console.log(params)
// console.log(params)
let msg = ''
msg += params[0].name
for (let i in params) {

51
src/views/system/auth/role/index.vue
View File

@@ -5,7 +5,7 @@
<div class="title">角色列表</div>
<el-button :icon="Plus" type="primary" @click="addRole" class="ml10">新增</el-button>
</div>
<Table ref="tableRef" @currentChange="currentChange" />
<Table ref="tableRef" :row-config="{ isCurrent: true, isHover: true }" @currentChange="currentChange" />
</div>
<Tree
v-if="menuListId"
@@ -13,8 +13,8 @@
show-checkbox
width="350px"
:data="menuTree"
:checkStrictly="checkStrictly"
@check-change="checkChange"
:checkStrictly="false"
@checkChange="checkChange"
></Tree>
<el-empty style="width: 350px; padding-top: 300px; box-sizing: border-box" description="请选择角色" v-else />
<PopupForm ref="popupRef"></PopupForm>
@@ -26,7 +26,7 @@ import { ref, onMounted, provide } from 'vue'
import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import TableHeader from '@/components/table/header/index.vue'
import Tree from '@/components/tree/index.vue'
import Tree from '@/components/tree/allocation.vue'
import { functionTree } from '@/api/user-boot/function'
import { getFunctionsByRoleIndex, updateRoleMenu } from '@/api/user-boot/roleFuction'
import { mainHeight } from '@/utils/layout'
@@ -37,12 +37,13 @@ import { useAdminInfo } from '@/stores/adminInfo'
const adminInfo = useAdminInfo()
defineOptions({
name: 'user-boot/role/list'
name: 'auth/role'
})
const height = mainHeight(20).height
const treeRef = ref()
const menuTree = ref<treeData[]>([])
const popupRef = ref()
const tableRef = ref()
const checkStrictly = ref(true)
const menuListId = ref('')
const tableStore = new TableStore({
@@ -104,7 +105,13 @@ const tableStore = new TableStore({
}
]
}
]
],
loadCallback: () => {
tableRef.value.getRef().setCurrentRow(tableStore.table.data[0])
currentChange({
row: tableStore.table.data[0]
})
}
})
tableStore.table.params.searchValue = ''
@@ -139,21 +146,22 @@ const currentChange = (data: any) => {
const timeout = ref<NodeJS.Timeout>()
const checkChange = (data: any) => {
if (checkStrictly.value) {
checkStrictly.value = false
return
}
if (timeout.value) {
clearTimeout(timeout.value)
}
timeout.value = setTimeout(() => {
updateRoleMenu({
id: menuListId.value,
idList: treeRef.value.treeRef.getCheckedNodes(false, true).map((node: any) => node.id)
}).then(() => {
// if (checkStrictly.value) {
// checkStrictly.value = false
// return
// }
updateRoleMenu({
id: menuListId.value,
idList: treeRef.value.treeRef.getCheckedNodes(false, true).map((node: any) => node.id)
})
.then(() => {
ElMessage.success('操作成功!')
treeRef.value.loading = false
})
.catch(() => {
treeRef.value.loading = false
})
}, 1000)
}
onMounted(() => {
tableStore.index()
@@ -162,8 +170,3 @@ const addRole = () => {
popupRef.value.open('新增角色')
}
</script>
<style lang="scss" scoped>
:deep(.row--current) {
// background-color: var(--el-color-primary-light-8) !important;
}
</style>