Skip to content

B
bigDataSystem
Commit f84ebf22 authored by 张伯涛's avatar 张伯涛
Browse files
Options

首页

parent 5bb35ab9
Hide whitespace changes
Inline Side-by-side
Showing with 253 additions and 1 deletion
src/views/homePage/index.vue
View file @ f84ebf22
<template>
<div>通知中心</div>
<div class="homePage_module">
<Row :gutter="16" class="homePage_left">
<Col :span="18">
<Card title="Data governance workspace 资源统计">
<div class="card_content">
<div class="card_item">
<Icon icon="ion:layers-outline" :size="30" :color="'#1091FE'" />
<div class="card_itemInfo">
<div class="dataNum">3</div>
<div class="dataTitle">数据源</div>
</div>
</div>
<div class="card_item">
<Icon icon="ant-design:appstore-outlined" :size="30" :color="'#1091FE'" />
<div class="card_itemInfo">
<div class="dataNum">6</div>
<div class="dataTitle">主体管理</div>
</div>
</div>
<div class="card_item">
<Icon icon="ant-design:appstore-outlined" :size="30" :color="'#C737D4'" />
<div class="card_itemInfo">
<div class="dataNum">6</div>
<div class="dataTitle">指标主体</div>
</div>
</div>
<div class="card_item">
<Icon icon="ant-design:appstore-outlined" :size="30" :color="'#EF8B16'" />
<div class="card_itemInfo">
<div class="dataNum">6</div>
<div class="dataTitle">标签主体</div>
</div>
</div>
<div class="card_item">
<Icon icon="ant-design:fund-outlined" :size="30" :color="'#C737D4'" />
<div class="card_itemInfo">
<div class="dataNum">36</div>
<div class="dataTitle">指标管理</div>
</div>
</div>
<div class="card_item">
<Icon icon="ion:layers-outline" :size="30" :color="'#C737D4'" />
<div class="card_itemInfo">
<div class="dataNum">16</div>
<div class="dataTitle">数据分析</div>
</div>
</div>
<div class="card_item">
<Icon icon="ant-design:table-outlined" :size="30" :color="'#33BDCC'" />
<div class="card_itemInfo">
<div class="dataNum">71</div>
<div class="dataTitle">数据集</div>
</div>
</div>
<div class="card_item">
<Icon icon="ant-design:file-sync-outlined" :size="30" :color="'#EF8B16'" />
<div class="card_itemInfo">
<div class="dataNum">64</div>
<div class="dataTitle">开发</div>
</div>
</div>
<div class="card_item">
<Icon icon="ant-design:pic-left-outlined" :size="30" :color="'#17B742'" />
<div class="card_itemInfo">
<div class="dataNum">12</div>
<div class="dataTitle">质量模板</div>
</div>
</div>
</div>
</Card>
<Tabs default-active-key="1">
<Tabs.TabPane key="1" tab="数据开发场景">
<img src="../../assets/images/homePage.png" class="homePage_img" alt="Logo" />
</Tabs.TabPane>
<Tabs.TabPane key="2" tab="数据治理场景">
<img src="../../assets/images/homePage.png" class="homePage_img" alt="Logo" />
</Tabs.TabPane>
</Tabs>
</Col>
<Col :span="6" class="homePage_right">
<Card>
<div class="process_title">
<div class="title_info">流程</div>
<div class="process_more">全部流程>></div>
</div>
<Row :gutter="16" class="process_content">
<Col :span="12">
<div class="process_Body">
<div class="process_num">23</div>
<div class="process_info">我的待办</div>
</div>
</Col>
<Col :span="12">
<div class="process_Body">
<div class="process_num">10</div>
<div class="process_info">我的申请</div>
</div>
</Col>
</Row>
</Card>
<Card class="notice_card">
<div class="process_title">
<div class="title_info">通知<Badge :count="99" /></div>
<div class="process_more">通知中心>></div>
</div>
<div
v-for="(item,index) in processOptions"
:key="index"
class="notice_content"
>
<div class="notice_contentInfo">
<div :class="item.level === '高' ? 'level' :item.level === '中' ? 'levelTwo': 'levelThree'">{{item.level}}</div>
<div class="title">{{item.title}}</div>
</div>
<div class="time">{{item.time}}</div>
</div>
</Card>
</Col>
</Row>
</div>
</template>
<script lang="ts" setup>
import { Card, Col, Row, Space, message,Tabs,Badge } from 'ant-design-vue';
import Icon from '@/components/Icon/Icon.vue';
import { ref,reactive } from 'vue';
import {AdvanceState} from "@/components/Form/src/types/hooks";
const activeKey = ref('1');
const processOptions = reactive<any>(
[
{level: '高',title: '[资源类型]通知规则标题',time: '2023-10-12 21:11:57'},
{level: '中',title: '[元数据变更]元数据变更通知',time: '2023-10-12 21:11:57'},
{level: '低',title: '[数据同步]失败告警',time: '2023-10-12 21:11:57'},
{level: '高',title: '[工作流]验证脚本运行失败',time: '2023-10-12 21:11:57'},
{level: '高',title: '[元数据变更]元数据变更通知',time: '2023-10-12 21:11:57'},
]
);
</script>
<style lang="scss" scoped>
.homePage_module{
background-color: #FAFBFC;
padding: 20px;
.homePage_left{
.homePage_img{
width: 93%;
}
::v-deep(.ant-tabs-tab) {
font-size: 18px;
font-weight: 600;
}
.card_content{
display: flex;
justify-content: space-between;
align-items: center;
.card_item{
padding-left: 10px;
display: flex;
align-items: center;
background-color: #F7F8F9;
width: 125px;
height: 70px;
border-radius: 10px;
.card_itemInfo{
padding-left: 7px;
.dataNum{
font-size: 26px;
line-height: 26px;
font-weight: bold;
}
.dataTitle{
font-size: 16px;
line-height: 16px;
color: #646464;
}
}
}
}
}
.homePage_right{
.notice_card{
margin-top: 20px;
.notice_content{
padding: 8px 0;
.notice_contentInfo{
display: flex;
align-items: center;
.level{
text-align: center;
width: 20px;
height: 20px;
background-color: #F8D0D0;
color: #DD4C4B;
border-radius: 50px;
}
.levelTwo{
text-align: center;
width: 20px;
height: 20px;
background-color: #FCDDB8;
color: #F2A346;
border-radius: 50px;
}
.levelThree{
text-align: center;
width: 20px;
height: 20px;
background-color: #E5EEFF;
color: #B0B5C7;
border-radius: 50px;
}
.title{
font-weight: bold;
font-size: 16px;
padding-left: 5px;
}
}
.time{
color: #5E5E5E;
}
}
}
.process_Body{
height: 160px;
background-color: #F7F8F9;
text-align: center;
.process_num{
font-weight: bold;
font-size: 60px;
}
.process_info{
font-weight: 300;
font-size: 25px;
}
}
.process_content{
padding-top: 20px;
}
.process_title{
display: flex;
justify-content: space-between;
align-items: center;
.title_info{
display: flex;
align-items: center;
font-size: 16px;
font-weight: 600;
}
.process_more{
font-size: 16px;
cursor: pointer;
color: #4AABFE;
font-weight: 600;
}
}
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment