Skip to content

B
bigDataSystem
Commit f1f03401 authored by 罗林杰's avatar 罗林杰
Browse files
Options

修改工作组详情概览

parent 70044b38
Hide whitespace changes
Inline Side-by-side
Showing with 279 additions and 3 deletions
src/views/system/workspace/detail.vue
View file @ f1f03401
......@@ -8,7 +8,115 @@
</a-tabs>
</template>
<div class="pt-4 m-4 desc-wrap">
<template v-if="currentKey == 'global'"> </template>
<template v-if="currentKey == 'global'">
<div class="homePage_module">
<Row :gutter="16" class="homePage_left">
<Col :span="18">
<Card title="资源统计">
<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>
</Col>
<Col :span="6" class="homePage_right">
<Card class="notice_card">
<div class="process_title">
<div class="title_info">告警信息<Badge :count="99" /></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>
<a-col :span="12" class="chart_col">
<a-card title="任务状态">
<echarts-vue3 :option="pieOptions" autoresize />
<div class="status_counts">
<div>1240/10% 进行中</div>
<div>1845/33% 等待</div>
<div>1666/33% 成功</div>
<div>555/8% 失败</div>
</div>
</a-card>
</a-col>
</Row>
</div>
</template>
<template v-if="currentKey == 'user'">
<BasicTable @register="registerGroupTable" :searchInfo="searchInfo">
<template #bodyCell="{ column, record }">
......@@ -82,7 +190,7 @@
import { PageWrapper } from '@/components/Page';
import { useGo } from '@/hooks/web/usePage';
import { useTabs } from '@/hooks/web/useTabs';
import { Tabs } from 'ant-design-vue';
import { Tabs, Card, Col, Row, Badge } from 'ant-design-vue';
import { BasicTable, TableAction, useTable } from '@/components/Table';
import { deleteUser, getAccountList } from '@/api/system/user/user';
import { useMessage } from '@/hooks/web/useMessage';
......@@ -96,6 +204,7 @@
} from '@/views/system/workspace/data';
import GroupTree from '@/views/system/workspace/GroupTree.vue';
import { TreeData } from '@/views/system/workspace/workSpaceData';
import Icon from '@/components/Icon/Icon.vue';
defineOptions({ name: 'AccountDetail' });
......@@ -166,6 +275,44 @@
},
});
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' },
]);
const pieOptions = ref({
tooltip: {
trigger: 'item',
},
legend: {
orient: 'vertical',
left: 'left',
},
series: [
{
name: '任务状态',
type: 'pie',
radius: '50%',
data: [
{ value: 1240, name: '进行中' },
{ value: 1845, name: '等待' },
{ value: 1666, name: '成功' },
{ value: 555, name: '失败' },
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)',
},
},
},
],
});
const [registerModal, { openModal }] = useModal();
const searchInfo = reactive<Recordable>({});
......@@ -228,4 +375,133 @@
});
</script>
<style></style>
<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;
}
}
}
}
.chart_col {
display: flex;
justify-content: center;
align-items: center;
}
.status_counts {
margin-top: 10px;
text-align: center;
}
</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