通用评估系统（五）- 前端部分总体说明

通用评估系统（五）- 前端部分总体说明

相关链接

• Gitee地址
• 通用评估系统（一）- 介绍
• 通用评估系统（二）- 原型设计
• 通用评估系统（三）- 前端部分
• 通用评估系统（四）- 前端部分计算脚本编辑组件

文档说明

本节中说明前端总体显示相关信息。具体数据交互待后端开发时同步进行。

目录结构

实际显示效果

全局搜索

评估模型管理

数据模型管理

指标体系管理

评估任务管理

部分代码说明

评估模型管理组件

<script lang="ts" setup>
import { ref, h, computed, watch } from "vue";
import { useRoute } from "vue-router";

import ContentLayout from '@/layout/ContentLayout.vue';
import Icon from "@/components/Icon/Icon.vue";
import Empty from "@/components/Empty/Empty.vue";

import TreeDiagram from "@/components/TreeDiagram";



const route = useRoute();
const id = computed(() => route.params['id']);

const breadcrumbs = ref<{[key: string]: any;}[]>([
    { href: "/model", breadcrumbName: "模型管理" },
    { href: "/model/details", breadcrumbName: "模型详情" },
]);
const title = ref<string>("XXXXX评估模型");

watch(id, () => {
    console.log(id.value)
});

const indicatorSys = ref<string>("");


script>

<template>
    <ContentLayout :title="title" name="评估模型" :breadcrumb="breadcrumbs">
        <template #sidebar>
            <span class="add-btn">
                <Icon name="add" :size="18" />新建模型
            span>
            <div class="search-container">
                <AInput :prefix="h(Icon, { name: 'sousuo', size: 18 })" placeholder="请输入模型名称" />
            div>
            <div style="padding: 0 12px;">
                <ATabs style="text-align: center;">
                    <ATabPane key="已发布" tab="已发布">ATabPane>
                    <ATabPane key="未发布" tab="未发布">ATabPane>
                ATabs>
                <AList>
                    
                AList>
            div>
        template>
        <div class="main">
            <template v-if="!title">
                <Empty />
            template>
            <template v-else>
                <TreeDiagram />
            template>
        div>
    ContentLayout>
template>

<style lang="less" scoped>
.add-btn {
    display: inline-block;
    height: 32px;
    margin-bottom: 12px;
    color: #666;
    line-height: 32px;
    font-weight: bold;
    cursor: pointer;
    &:hover {
        color: #004CFE;
    }
}
.search-container {
    box-sizing: border-box;
}
.main {
    height: 100%;
    
    // margin: -24px;
    // padding: 24px 24px 0;
}
style>

全局搜索组件

<script lang="ts" setup>
import { ref } from "vue";

import Icon from "@/components/Icon/Icon.vue";
import { SearchOutlined } from "@ant-design/icons-vue";



export type GlobalSearchExpose = {
    open: () => void;
    close: () => void;
}

const visible = ref<boolean>(false);
const open = () => visible.value = true;
const close = () => visible.value = false;
const activeKey = ref<string>("全部");



defineExpose<GlobalSearchExpose>({ open, close });
script>

<template>
    <AModal v-model:open="visible" title="快速搜索" :width="960" :footer="null">
        <AInput placeholder="请输入关键词">
            <template #prefix>
                <SearchOutlined />
            template>
        AInput>
        <ATabs v-model:activeKey="activeKey">
            <ATabPane key="全部" tab="全部">123ATabPane>
            <ATabPane key="模型">
                <template #tab>
                    <Icon name="pinggumoxing" style="margin-right: 4px;" />评估模型
                template>
            ATabPane>
            <ATabPane key="数据">
                <template #tab>
                    <Icon name="shujuguanli" style="margin-right: 4px;" />数据管理
                template>
            ATabPane>
            <ATabPane key="指标体系">
                <template #tab>
                    <Icon name="zhibiaotixi" style="margin-right: 4px;" />指标体系
                template>
            ATabPane>
            <ATabPane key="评估任务">
                <template #tab>
                    <Icon name="pinggurenwu" style="margin-right: 4px;" />评估任务
                template>
            ATabPane>
            <ATabPane key="评估任务">
                <template #tab>
                    <Icon name="lishixiao" style="margin-right: 4px;" />操作历史
                template>
            ATabPane>
        ATabs>
        <div class="search-content">
            
        div>
    AModal>
template>

<style lang="less" scoped>
.search-content {
    height: 400px;
}
style>

总结

后续具体的页面详细及数据交互，在进行后端开发时同步进行。

相关链接

• Gitee地址
• 通用评估系统（一）- 介绍
• 通用评估系统（二）- 原型设计
• 通用评估系统（三）- 前端部分
• 通用评估系统（四）- 前端部分计算脚本编辑组件