admin-sjzx/src/views/pqs/runManage/assessment/components/assess/index.vue

<template>
    <div :style="height">
        <splitpanes style="height: 100%" class="default-theme" id="navigation-splitpanes">
            <pane :size="size">
                <AssessTree
                    :default-expand-all="false"
                    @node-click="handleNodeClick"
                    @init="handleNodeClick"
                ></AssessTree>
            </pane>
            <pane style="background: #fff">
                <div class="actionButtons mb10">
                    <el-button type="primary" icon="el-icon-Upload">导入数据背景</el-button>
                    <el-button type="primary" icon="el-icon-Memo" @click="assess">评估</el-button>
                    <el-button type="primary" icon="el-icon-Download">导出报告</el-button>
                </div>
                <div :style="collapseHeight" style="overflow-y: auto">
                    <el-collapse v-model="collapseName" class="pl10 pr10">
                        <el-collapse-item title="基本信息" :name="1">
                            <information />
                        </el-collapse-item>
                        <el-collapse-item title="评估结果信息" :name="2">
                            <Outcome />
                        </el-collapse-item>
                    </el-collapse>
                </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 TableStore from '@/utils/tableStore'
import AssessTree from '@/components/tree/pqs/assessTree.vue'
import TableHeader from '@/components/table/header/index.vue'
import { mainHeight } from '@/utils/layout'
import information from './information.vue'
import Outcome from './outcome.vue'

defineOptions({
    // name: 'harmonic-boot/report/word'
})
const collapseName = ref([1, 2])
const height = mainHeight(80)
const collapseHeight = mainHeight(125)
const size = ref(0)
const dotList: any = ref({})

const tableStore = new TableStore({
    url: '',
    method: 'POST',
    column: [],
    beforeSearchFun: () => {},
    loadCallback: () => {}
})
provide('tableStore', tableStore)
// 评估
const assess = () => {
    collapseName.value = [2]
}

onMounted(() => {
    const dom = document.getElementById('navigation-splitpanes')

    setTimeout(() => {
        if (dom) {
            size.value = Math.round((180 / dom.offsetHeight) * 100)
        }
    }, 100)
})

const handleNodeClick = (data: any, node: any) => {
    dotList.value = data
}
</script>
<style lang="scss" scoped>
.splitpanes.default-theme .splitpanes__pane {
    background: #eaeef1;
}

:deep(.el-collapse-item__header) {
    font-family: AlimamaDongFangDaKai;
    font-size: 20px;
    &::before {
        content: '▍'; /* 添加星号 */
        font-size: 16px;
        color: var(--el-color-primary);
  
    }
}

.actionButtons {
    display: flex;
    justify-content: end;
}
</style>