admin-sjzx/src/views/pqs/database/standard/index.vue

<template>
    <div class="default-main" :style="height">
        <!-- 标准库 -->
        <splitpanes style="height: 100%" class="default-theme" id="navigation-splitpanes">
            <pane :size="size">
                <standardTree
                    :default-expand-all="false"
                    :default-expanded-keys="monitoringPoint.state.lineId ? [monitoringPoint.state.lineId] : []"
                    :current-node-key="monitoringPoint.state.lineId"
                    @node-click="handleNodeClick"
                    @init="handleNodeClick"
                ></standardTree>
            </pane>
            <pane style="background: #fff" :style="height">
                <div class="pd10" style="display: flex; justify-content: end">
                    <el-button icon="el-icon-Plus" type="primary">新增</el-button>
                    <el-button icon="el-icon-Edit" type="primary">修改</el-button>
                    <el-button icon="el-icon-Delete" type="primary">删除</el-button>
                </div>
                <div :style="`height: calc(${height.height} - 60px) `"></div>
            </pane>
        </splitpanes>
    </div>
</template>
<script setup lang="ts">
import { onMounted, ref, provide } from 'vue'
import 'splitpanes/dist/splitpanes.css'
import { Splitpanes, Pane } from 'splitpanes'
import standardTree from '@/components/tree/pqs/standardTree.vue'
import { mainHeight } from '@/utils/layout'
import { getLineExport, getList, selectReleation } from '@/api/event-boot/report'
import { useMonitoringPoint } from '@/stores/monitoringPoint'
import { ElMessage } from 'element-plus'
defineOptions({
    name: 'database/standard'
})
const monitoringPoint = useMonitoringPoint()
const height = mainHeight(20)
const size = ref(0)

const TableHeaderRef = ref()
const dotList: any = ref({
    name: monitoringPoint.state.lineName.split('>')[3],
    id: monitoringPoint.state.lineId,
    level: 6
})

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

const handleNodeClick = (data: any, node: any) => {
    dotList.value = data
}
</script>
<style lang="scss">
.splitpanes.default-theme .splitpanes__pane {
    background: #eaeef1;
}
.grid-content {
    text-align: center;
}
.divBox {
    width: 250px;
    height: 31px;
    margin: auto;
    line-height: 32px;
    border: 1px solid #c9c9c9;
    &:hover {
        border: 1px solid #002255;
    }
}
.box {
    padding: 10px;
    // margin-top: 10px;
    overflow-y: auto;
    font-size: 15px;
}
.el-divider--horizontal {
    margin: 10px 0;
}
.mTop {
    margin-top: 5px;
    margin-bottom: 5px;
}
</style>