绘制二级评估页面

src/views/pqs/runManage/assessment/components/assess/index.vue

@@ -0,0 +1,93 @@
+<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">
+                        <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;
+}
+
+.actionButtons {
+    display: flex;
+    justify-content: end;
+}
+</style>