admin-sjzx/src/views/pqs/database/algorithm/overview.vue

<template>
    <div class="default-main pt50" :style="height">
        <!-- 算法库 -->
        <!--  -->

        <MyEchart :options="echartList" style="width: 100%" :style="height" @echart-click="echartClick"></MyEchart>
    </div>
</template>
<script setup lang="ts">
import { onMounted, ref, provide } from 'vue'
import 'splitpanes/dist/splitpanes.css'

import { mainHeight } from '@/utils/layout'

import MyEchart from '@/components/echarts/MyEchart.vue'
import { useRouter } from 'vue-router'
import { queryAllAlgorithmLibrary, updateAlgorithmLibrary } from '@/api/supervision-boot/database/index'
import { useAdminInfo } from '@/stores/adminInfo'
import 'katex/dist/katex.css'
import { useConfig } from '@/stores/config'
const router = useRouter()
const config = useConfig()
const adminInfo = useAdminInfo()
defineOptions({
    name: 'database/algorithm'
})
const height = mainHeight(20)
const size = ref(23)

const popupEditFlag = ref(false)

const popupEditRef = ref()
const TreeList: any = ref([])

const echartList = ref({})

const dotList: any = ref()

const radio = ref(0)

// 新增弹框
const addUser = () => {
    popupEditFlag.value = true
    setTimeout(() => {
        popupEditRef.value.open({
            title: '新增算法'
        })
    }, 100)
}

onMounted(() => {
    const dom = document.getElementById('navigation-splitpanes')
    if (dom) {
        size.value = Math.round((180 / dom.offsetHeight) * 120)
    }
    info()
    // tableStore.index()
})

const info = () => {
    queryAllAlgorithmLibrary().then(async res => {
        TreeList.value = await setTreeAllNodeExpand([
            {
                name: '算法库',
                level: 0,
                children: res.data
            }
        ])

        echartList.value = {
            series: [
                {
                    type: 'tree',
                    data: TreeList.value,
                    top: '20',
                    bottom: '40',
                    left: '20',
                    symbolSize: 7,
                    label: {
                        position: 'left',
                        verticalAlign: 'middle',
                        align: 'left',
                        fontSize: 14,
                        fontWeight: 600,
                        backgroundColor: config.layout.elementUiPrimary[0],
                        color: '#fff',
                        borderRadius: 5,
                        formatter: function (params) {
                            return [`{name|${params.data.name}}`]
                        },
                        rich: {
                            name: {
                                fontSize: 14,
                                fontWeight: 'bold',
                                padding: [10, 10]
                            }
                        }
                    },
                    leaves: {
                        label: {
                            position: 'left',
                            verticalAlign: 'middle',
                            fontWeight: 600,
                            align: 'left'
                        }
                    },

                    edgeShape: 'polyline', // 折线连接线
                    roam: true, // 可移动,可缩放
                    expandAndCollapse: false,
                    animationDuration: 550,
                    animationDurationUpdate: 750
                }
            ]
        }
    })
}
// 点击echart
const echartClick = (params: any) => {
    if (params.data.level == 3 && params.data.path != '') {
        router.push({
            name: params.data.path
        })
    }
}
const setTreeAllNodeExpand = (treeData: any) => {
    if (!treeData) return []
    // 兼容单对象/数组两种树数据格式
    const data = Array.isArray(treeData) ? treeData : [treeData]
    return data.map(node => {
        // 深拷贝节点，彻底隔离原数据
        const newNode = {
            ...node,
            collapsed: node.level <= 2 ? false : true // 强制添加展开属性
        }
        // 递归处理子节点
        if (node.children && node.children.length > 0) {
            newNode.children = setTreeAllNodeExpand(node.children)
        }
        return newNode
    })
}
</script>
<style lang="scss">
.splitpanes.default-theme .splitpanes__pane {
    background: #eaeef1;
}

.grid-content {
    text-align: center;
}

.el-divider--horizontal {
    margin: 10px 0;
}

.mTop {
    margin-top: 5px;
    margin-bottom: 5px;
}

.boxTop {
    height: 52px;
    padding: 10px 10px 10px 0;

    display: flex;
    justify-content: space-between;
}

.editor {
    table {
        width: 100%;
        border-collapse: collapse;
    }

    th,
    td {
        border: 1px solid black;
        padding: 8px;
        text-align: center;
    }

    th {
        background-color: #f2f2f2;
        font-weight: bold;
    }

    td {
        background-color: #ffffff;
    }
}
.button {
    position: absolute;
    right: 10px;
    top: 10px;
}
</style>