Skip to content

B
bigDataSystem
Commit 8a5081aa authored by chenjiahao's avatar chenjiahao
Browse files
Options

商城资源开发-公共数据集-卡片展示&列表展示

parent 4a8cfcbc
Show whitespace changes
Inline Side-by-side
Showing with 572 additions and 111 deletions
src/views/dataIntegration/dataLakePunctual/dataLakePunctual.data.ts
View file @ 8a5081aa
......@@ -43,7 +43,7 @@ export const sourceSideConfigurationFormSchema: FormSchema[] = [
componentProps: {
placeholder: '请选择数据源',
options: [
{ label: 'KunOB数据源', value: 'KunOB数据源' },
{ label: 'KunDB数据源', value: 'KunDB数据源' },
{ label: 'MongoDB数据源', value: 'MongoDB数据源' },
{ label: 'AmazonS3', value: 'AmazonS3' },
],
......
src/views/dataIntegration/dataLoading/dataEntryLake/databaseOfflineLoading.vue
View file @ 8a5081aa
......@@ -664,11 +664,11 @@
label: '数据源',
component: 'Select',
required: true,
defaultValue: 'KunOB数据源',
defaultValue: 'KunDB数据源',
componentProps: {
placeholder: '请选择数据源',
options: [
{ label: 'KunOB数据源', value: 'KunOB数据源' },
{ label: 'KunDB数据源', value: 'KunDB数据源' },
{ label: 'MongoDB数据源', value: 'MongoDB数据源' },
{ label: 'AmazonS3', value: 'AmazonS3' },
],
......@@ -677,40 +677,48 @@
{
field: 'dataBase',
label: '数据库',
component: 'Cascader',
component: 'Select',
required: true,
componentProps: {
placeholder: '请选择数据源',
displayRender: ({ labels }) => {
return labels[labels.length - 1];
},
placeholder: '',
options: [
{
value: '数据库对象资源',
label: '数据库对象资源',
children: [
{
value: '数据中台工作区01',
label: '数据中台工作区01',
children: [
{
value: 'ArgoDB_Dev01',
label: 'ArgoDB_Dev01',
},
{
value: 'ArgoDB_Dev02',
label: 'ArgoDB_Dev02',
},
{
value: 'GbaseDB_Dev01',
label: 'GbaseDB_Dev01',
},
],
},
],
},
{ label: 'maoyanceshi1', value: 'maoyanceshi1' },
{ label: 'bigevent', value: 'bigevent' },
{ label: 'database1', value: 'database1' },
],
},
// componentProps: {
// placeholder: '请选择数据源',
// displayRender: ({ labels }) => {
// return labels[labels.length - 1];
// },
// options: [
// {
// value: '数据库对象资源',
// label: '数据库对象资源',
// children: [
// {
// value: '数据中台工作区01',
// label: '数据中台工作区01',
// children: [
// {
// value: 'ArgoDB_Dev01',
// label: 'ArgoDB_Dev01',
// },
// {
// value: 'ArgoDB_Dev02',
// label: 'ArgoDB_Dev02',
// },
// {
// value: 'GbaseDB_Dev01',
// label: 'GbaseDB_Dev01',
// },
// ],
// },
// ],
// },
// ],
// },
},
{
field: 'metadataType',
......@@ -900,7 +908,7 @@
componentProps: {
placeholder: '',
options: [
{ label: 'KunOB数据源', value: 'KunOB数据源' },
{ label: 'KunDB数据源', value: 'KunDB数据源' },
{ label: 'MongoDB数据源', value: 'MongoDB数据源' },
{ label: 'AmazonS3', value: 'AmazonS3' },
],
......
src/views/mallResourceDevelopment/commonDataSet/GroupTree.vue
View file @ 8a5081aa
......@@ -68,18 +68,19 @@
return treeData !== '' ? treeData : data;
}
// function handleSelect() {
// const keys = getTree().getSelectedKeys();
// const node = getTree().getSelectedNode(keys[0]);
// // console.log('node', node);
// emit('select', node);
// }
/**选中的数据*/
function handleSelect(keys) {
emit('select', keys[0]);
function handleSelect() {
const keys = getTree().getSelectedKeys();
const node = getTree().getSelectedNode(keys[0]);
// console.log('node', node);
emit('select', node);
}
// /**选中的数据*/
// function handleSelect(keys) {
// console.log(keys);
// emit('select', keys[0]);
// }
onMounted(() => {
fetch();
});
......
src/views/mallResourceDevelopment/commonDataSet/commonDataSet.data.ts
View file @ 8a5081aa
import { BasicColumn } from '@/components/Table';
export const Columns: BasicColumn[] = [
{
title: '名称',
dataIndex: 'title',
},
{
title: '部门',
dataIndex: 'dept',
},
{
title: '标签',
dataIndex: 'label',
},
{
title: '描述',
dataIndex: 'description',
},
{
title: '创建人',
dataIndex: 'createdBy',
},
{
title: '创建时间',
dataIndex: 'createdTime',
},
{
title: '浏览次数',
dataIndex: 'view',
},
{
title: '推送次数',
dataIndex: 'edit',
},
{
title: '共享类型',
dataIndex: 'isShare',
},
];
src/views/mallResourceDevelopment/commonDataSet/index.vue
View file @ 8a5081aa
......@@ -8,8 +8,8 @@
<Icon icon="fluent:document-folder-16-regular" :size="40" :color="'#61aaff'" />
</div>
<div>
<div class="title">党建建设</div>
<div class="path">资源编目</div>
<div class="title">{{ workSpaceName }}</div>
<!-- <div class="path">资源编目</div>-->
</div>
<div class="buttonGroup">
<Segmented v-model:value="value" :options="data">
......@@ -28,52 +28,128 @@
</div>
</div>
</template>
<List>
<div class="listHead">
<div class="search">
<div>
<a-input-search
allow-clear
v-model:value="params"
placeholder="请输入关键字"
style="width: 200px"
@search="onSearch"
/>
<Select
:options="[
{ label: '全部', value: '' },
{ label: '有条件共享', value: 'true' },
{ label: '无条件共享', value: 'false' },
]"
v-model:value="selectValue"
style="width: 150px; margin-left: 10px"
@change="onSearch"
/>
</div>
<div>
<Checkbox v-if="value === 'cardList'" @click="toggleAllSelection">全选</Checkbox>
<Select
:options="[
{ label: '最新', value: 'latest' },
{ label: '最早', value: 'earliest' },
]"
v-model:value="sortOrder"
style="width: 150px; margin-left: 10px"
@change="onSearch"
/>
</div>
</div>
</div>
<List v-if="value === 'cardList'">
<Row :gutter="16">
<template v-for="item in cardList" :key="item.title">
<Col :span="12">
<template v-for="item in cardListData" :key="item.title">
<Col :span="6">
<ListItem>
<Card
:hoverable="true"
class="sceneSelectionCard"
@click="handleNewModal(item.scene)"
style="height: 250px; width: 300px; position: relative"
>
<div>
<Icon
class="sceneSelectionIcon"
v-if="item.icon"
:icon="item.icon"
:color="item.color"
<div style="display: flex; justify-content: space-between">
<div style="display: flex; align-items: center; gap: 5px">
<Checkbox
@click.stop="handleSelectCard(item)"
:checked="isCardSelected(item)"
/>
<div style="display: flex">
<Icon size="23" v-if="item.icon" :icon="item.icon" :color="item.color" />
</div>
<div>
<span class="card-title">{{ item.title }}</span>
</div>
</div>
<div style="display: flex; align-items: center; gap: 5px">
<span class="card-dept">{{ item.dept }}</span>
</div>
<div class="sceneSelectionTitle">
{{ item.title }}
</div>
<div class="sceneSelectionDescription">
<div class="card-description">
{{ item.description }}
</div>
<div class="cardFooter" style="position: absolute; bottom: 0; left: 0; right: 0">
<div style="padding-left: 5px; padding-bottom: 5px">
<Tag style="padding: 2px 10px">
{{ item.label }}
</Tag>
</div>
<div style="display: flex; justify-content: space-between; color: gray">
<span>{{ item.createdBy }}</span>
<span>{{ item.createdTime }}</span>
</div>
<Divider style="margin: 9px 0" />
<div style="display: flex; justify-content: space-between; color: gray">
<span v-if="item.isShare">有条件共享</span>
<span v-else>无条件共享</span>
<div>
<a-button style="padding: 0; border: none; box-shadow: none">
<Icon icon="icon-park-outline:eyes" />{{ item.view }}</a-button
>
<Divider type="vertical" />
<a-button style="padding: 0; border: none; box-shadow: none">
<Icon icon="icon-park-outline:hand-up" />{{ item.edit }}</a-button
>
</div>
</div>
</div>
</Card>
</ListItem>
</Col>
</template>
</Row>
</List>
<BasicTable v-else @register="registerTable"> </BasicTable>
<Pagination
style="display: flex; justify-content: end"
size="small"
:total="6"
show-size-changer
show-quick-jumper
/>
</PageWrapper>
</div>
</template>
<script lang="ts" setup>
import { UnorderedListOutlined, AppstoreOutlined } from '@ant-design/icons-vue';
import { BasicTable, useTable } from '@/components/Table';
import {
RadioButton,
Pagination,
Segmented,
Card,
Row,
Col,
List,
ListItem,
Radio,
RadioGroup,
Checkbox,
Tag,
Divider,
Select,
} from 'ant-design-vue';
import Icon from '@/components/Icon/Icon.vue';
import { onMounted, ref, reactive } from 'vue';
......@@ -82,10 +158,18 @@
import { useMessage } from '@/hooks/web/useMessage';
import { useRouter } from 'vue-router';
import GroupTree from './GroupTree.vue';
import { Columns } from '@/views/mallResourceDevelopment/commonDataSet/commonDataSet.data';
const { createMessage, createConfirm } = useMessage();
const route = useRouter();
const value = ref('cardList');
const params = ref('');
const selectValue = ref('');
const sortOrder = ref('latest');
const selectedCard = reactive([] as any[]);
const cardListData = ref([]);
const workSpaceName = ref('党建建设');
const data = ref([
{
value: 'cardList',
......@@ -101,9 +185,96 @@
},
]);
function handleSelect() {}
const [registerTable, { reload, getRowSelection }] = useTable({
api: async (params) => {
onSearch();
const response = {
pageNu: '1',
pageSize: '10',
pages: '1',
total: cardListData.value.length,
code: '',
message: '',
data: [],
};
return { ...response, data: cardListData.value };
},
columns: Columns,
rowSelection: true,
showTableSetting: false,
showIndexColumn: false,
pagination: false,
bordered: true,
canResize: false, //取消自适应 取消滚动条
});
function handleSelect(node) {
console.log(node);
workSpaceName.value = node.workSpaceName;
if ([101, 102].includes(node.parentId)) {
} else {
onSearch();
}
}
function handleNewModal(scene: string) {}
onMounted(() => {});
function handleSelectCard(item: any) {
if (selectedCard.includes(item)) {
selectedCard.splice(selectedCard.indexOf(item), 1);
} else {
selectedCard.push(item);
}
}
function toggleAllSelection() {
if (selectedCard.length === cardListData.value.length) {
selectedCard.length = 0;
} else {
selectedCard.length = 0;
selectedCard.push(...cardListData.value);
}
}
function isCardSelected(item: any) {
return selectedCard.includes(item);
}
function handleBulkDownload() {}
function handleBatchPush() {}
function onSearch() {
let filteredList = cardList.filter((item) => {
const titleMatch = item.title.toLowerCase().includes(params.value.toLowerCase());
const shareMatch =
selectValue.value === '' ? true : item.isShare.toString() === selectValue.value;
const workspaceMatch =
workSpaceName.value === '' ||
workSpaceName.value === '公共数据集' ||
item.parentWorkSpaceName === workSpaceName.value;
console.log('workSpaceName.value', workSpaceName.value);
console.log('item.parentWorkSpaceName', item.parentWorkSpaceName);
console.log('item.parentWorkSpaceName', item.title);
return titleMatch && shareMatch && workspaceMatch;
});
if (sortOrder.value === 'latest') {
filteredList.sort(
(a, b) => new Date(b.createdTime).getTime() - new Date(a.createdTime).getTime(),
);
} else if (sortOrder.value === 'earliest') {
filteredList.sort(
(a, b) => new Date(a.createdTime).getTime() - new Date(b.createdTime).getTime(),
);
}
cardListData.value = filteredList;
reload();
}
onMounted(() => {
onSearch();
});
</script>
<style lang="scss" scoped>
......@@ -136,7 +307,7 @@
align-items: center;
.title {
font-size: 16px;
font-weight: 500;
font-weight: bold;
}
.path {
font-size: 14px;
......@@ -161,4 +332,33 @@
.sceneSelectionIcon {
transition: color 0.3s ease;
}
.card-title {
font-size: 18px;
font-weight: bold;
}
.card-dept {
font-size: 12px;
color: gray;
}
.card-description {
margin-top: 10px;
color: gray;
}
.cardFooter {
padding: 10px;
}
.listHead {
margin-bottom: 20px;
}
.search {
display: flex;
align-items: center;
justify-content: space-between;
}
</style>
src/views/mallResourceDevelopment/commonDataSet/mock.ts
View file @ 8a5081aa
......@@ -66,8 +66,8 @@ export const TreeData: any[] = [
delFlag: '0',
flag: '1',
businessId: 100,
parentWorkSpaceName: '整合',
workSpaceName: '整合',
parentWorkSpaceName: '公共数据集',
workSpaceName: '公共数据集',
parentId: 0,
'code:': '001',
ancestors: '0',
......@@ -81,8 +81,8 @@ export const TreeData: any[] = [
delFlag: '0',
flag: '1',
businessId: 101,
parentWorkSpaceName: '数据加载',
workSpaceName: '数据加载',
parentWorkSpaceName: '公共数据集',
workSpaceName: '党建建设',
parentId: 100,
'code:': '002',
ancestors: '0,100',
......@@ -96,8 +96,8 @@ export const TreeData: any[] = [
delFlag: '0',
flag: '1',
businessId: 201,
parentWorkSpaceName: '数据加载',
workSpaceName: '个人工作区',
parentWorkSpaceName: '党建建设',
workSpaceName: '基本信息',
parentId: 101,
'code:': '003',
ancestors: '0,100',
......@@ -111,12 +111,12 @@ export const TreeData: any[] = [
delFlag: '0',
flag: '1',
businessId: 202,
parentWorkSpaceName: '数据加载',
workSpaceName: '共享工作区',
parentWorkSpaceName: '党建建设',
workSpaceName: '党员发展计划',
parentId: 101,
'code:': '004',
'code:': '003',
ancestors: '0,100',
orderNum: 2,
orderNum: 1,
children: [],
selectType: null,
createTime: '2024-10-24 10:04:04',
......@@ -125,13 +125,88 @@ export const TreeData: any[] = [
{
delFlag: '0',
flag: '1',
businessId: 301,
parentWorkSpaceName: '个人工作区',
workSpaceName: '图标验收',
parentId: 201,
'code:': '004',
businessId: 203,
parentWorkSpaceName: '党建建设',
workSpaceName: '主题教育活动',
parentId: 101,
'code:': '003',
ancestors: '0,100',
orderNum: 1,
children: [],
selectType: null,
createTime: '2024-10-24 10:04:04',
createBy: 'admin',
},
{
delFlag: '0',
flag: '1',
businessId: 204,
parentWorkSpaceName: '党建建设',
workSpaceName: '党建工作总结',
parentId: 101,
'code:': '003',
ancestors: '0,100',
orderNum: 1,
children: [],
selectType: null,
createTime: '2024-10-24 10:04:04',
createBy: 'admin',
},
{
delFlag: '0',
flag: '1',
businessId: 205,
parentWorkSpaceName: '党建建设',
workSpaceName: '党史知识竞赛',
parentId: 101,
'code:': '003',
ancestors: '0,100',
orderNum: 1,
children: [],
selectType: null,
createTime: '2024-10-24 10:04:04',
createBy: 'admin',
},
{
delFlag: '0',
flag: '1',
businessId: 206,
parentWorkSpaceName: '党建建设',
workSpaceName: '红色文化展览',
parentId: 101,
'code:': '003',
ancestors: '0,100',
orderNum: 1,
children: [],
selectType: null,
createTime: '2024-10-24 10:04:04',
createBy: 'admin',
},
{
delFlag: '0',
flag: '1',
businessId: 207,
parentWorkSpaceName: '党建建设',
workSpaceName: '志愿服务活动',
parentId: 101,
'code:': '003',
ancestors: '0,100',
orderNum: 1,
children: [],
selectType: null,
createTime: '2024-10-24 10:04:04',
createBy: 'admin',
},
{
delFlag: '0',
flag: '1',
businessId: 208,
parentWorkSpaceName: '党建建设',
workSpaceName: '党员风采展示',
parentId: 101,
'code:': '003',
ancestors: '0,100',
orderNum: 2,
orderNum: 1,
children: [],
selectType: null,
createTime: '2024-10-24 10:04:04',
......@@ -140,13 +215,58 @@ export const TreeData: any[] = [
{
delFlag: '0',
flag: '1',
businessId: 302,
parentWorkSpaceName: '共享工作区',
workSpaceName: '学生成绩',
parentId: 202,
businessId: 102,
parentWorkSpaceName: '公共数据集',
workSpaceName: '交通信息',
parentId: 100,
'code:': '004',
ancestors: '0,100',
orderNum: 2,
orderNum: 1,
children: [],
selectType: null,
createTime: '2024-10-24 10:04:04',
createBy: 'admin',
},
{
delFlag: '0',
flag: '1',
businessId: 209,
parentWorkSpaceName: '交通信息',
workSpaceName: '城市公交优化方案',
parentId: 102,
'code:': '003',
ancestors: '0,100',
orderNum: 1,
children: [],
selectType: null,
createTime: '2024-10-24 10:04:04',
createBy: 'admin',
},
{
delFlag: '0',
flag: '1',
businessId: 210,
parentWorkSpaceName: '交通信息',
workSpaceName: '智能交通系统部署',
parentId: 102,
'code:': '003',
ancestors: '0,100',
orderNum: 1,
children: [],
selectType: null,
createTime: '2024-10-24 10:04:04',
createBy: 'admin',
},
{
delFlag: '0',
flag: '1',
businessId: 211,
parentWorkSpaceName: '交通信息',
workSpaceName: '绿色出行倡议',
parentId: 102,
'code:': '003',
ancestors: '0,100',
orderNum: 1,
children: [],
selectType: null,
createTime: '2024-10-24 10:04:04',
......@@ -156,32 +276,124 @@ export const TreeData: any[] = [
export const cardList = [
{
title: '数据库离线加载',
title: '基本信息',
scene: 'databaseOfflineLoading',
icon: 'majesticons:data-minus',
color: '#9064e9',
description: '支持数据加载导数据仓库（数据加载功能），也支持数仓将数据写入业务库（卸载功能）',
parentWorkSpaceName: '党建建设',
icon: 'majesticons:table',
color: '#71c8d5',
dept: '数据资源管理部',
description: '集团党委会、党委理论学习中心的学习会的组织实操、集团党委、纪委换届选举',
label: '其他',
createdBy: 'admin',
createdTime: '2023/01/05 15:43:15',
view: '85',
edit: '2',
isShare: 'true',
},
{
title: '文件离线加载',
scene: 'fileOfflineLoading',
icon: 'tabler:file-isr',
color: '#9064e9',
description: '支持将文件定期加载入数据仓库中',
title: '党员发展计划',
scene: 'partyDevelopmentPlan',
parentWorkSpaceName: '党建建设',
icon: 'majesticons:table',
color: '#71c8d5',
dept: '组织人事部',
description: '制定年度党员发展计划，开展入党积极分子培训',
label: '计划',
createdBy: 'admin',
createdTime: '2023/02/10 09:20:30',
view: '120',
edit: '5',
isShare: 'true',
},
{
title: '准实时加载',
scene: 'dataDischargeLake',
icon: 'mdi:database-clock',
color: '#9064e9',
description: '支持从数仓将数据加载到传统关系数据库中，支持目标端（Mysql,Oracle等）。',
title: '主题教育活动',
scene: 'themeEducationActivity',
parentWorkSpaceName: '党建建设',
icon: 'majesticons:table',
color: '#71c8d5',
dept: '宣传部',
description: '举办各类主题教育活动，增强党员意识',
label: '活动',
createdBy: 'admin',
createdTime: '2023/03/15 14:45:45',
view: '95',
edit: '3',
isShare: 'false',
},
{
title: '数据出湖',
scene: 'databaseOfflineLoading',
icon: 'icon-park-solid:data-switching',
color: '#9064e9',
description: '支持从数仓将数据加载到传统关系数据库中，支持目标端（Mysql,Oracle等）。',
title: '党建工作总结',
scene: 'partyWorkSummary',
parentWorkSpaceName: '党建建设',
icon: 'majesticons:table',
color: '#71c8d5',
dept: '办公室',
description: '撰写季度党建工作总结报告',
label: '总结',
createdBy: 'admin',
createdTime: '2023/08/10 09:00:00',
view: '80',
edit: '1',
isShare: 'true',
},
{
title: '党史知识竞赛',
scene: 'partyHistoryQuiz',
parentWorkSpaceName: '党建建设',
icon: 'majesticons:table',
color: '#71c8d5',
dept: '宣传教育中心',
description: '组织党史知识竞赛，提升党员历史素养',
label: '竞赛',
createdBy: 'admin',
createdTime: '2023/05/25 16:30:15',
view: '110',
edit: '4',
isShare: 'false',
},
{
title: '公交优化方案',
scene: 'urbanBusOptimization',
parentWorkSpaceName: '交通信息',
icon: 'majesticons:bus',
color: '#71c8d5',
dept: '交通规划部',
description: '分析现有公交线路运行情况，提出优化建议以提高效率和乘客满意度。',
label: '方案',
createdBy: 'admin',
createdTime: '2023/04/01 10:00:00',
view: '90',
edit: '3',
isShare: 'true',
},
{
title: '交通系统部署',
scene: 'intelligentTransportSystemDeployment',
icon: 'majesticons:bus',
parentWorkSpaceName: '交通信息',
color: '#71c8d5',
dept: '信息技术部',
description:
'实施先进的智能交通管理系统，包括信号灯控制、交通流量监测等，旨在缓解城市交通拥堵。',
label: '技术',
createdBy: 'admin',
createdTime: '2023/05/15 11:30:00',
view: '115',
edit: '5',
isShare: 'false',
},
{
title: '绿色出行倡议',
scene: 'greenCommuteInitiative',
icon: 'majesticons:bus',
parentWorkSpaceName: '交通信息',
color: '#71c8d5',
dept: '环保与发展部',
description: '推广低碳环保的出行方式，如骑行和步行，并为市民提供相关设施支持。',
label: '倡议',
createdBy: 'admin',
createdTime: '2023/09/28 14:00:00',
view: '75',
edit: '2',
isShare: 'true',
},
];
src/views/realTimeSync/dataBaseToDataBase/data.ts
View file @ 8a5081aa
......@@ -426,7 +426,7 @@ export const sourceSideConfigurationFormSchema: FormSchema[] = [
componentProps: {
placeholder: '请选择数据源',
options: [
{ label: 'KunOB数据源', value: '1' },
{ label: 'KunDB数据源', value: '1' },
{ label: 'MongoDB数据源', value: '2' },
{ label: 'AmazonS3', value: '3' },
],
......@@ -440,7 +440,7 @@ export const sourceSideConfigurationFormSchema: FormSchema[] = [
mode: 'multiple',
placeholder: '请选择数据源',
options: [
{ label: 'KunOBDB', value: '1' },
{ label: 'KunDB', value: '1' },
{ label: 'MongoDB', value: '2' },
{ label: 'AmazonS3DB', value: '3' },
],
......@@ -598,7 +598,7 @@ export const tableMappingFormSchema: FormSchema[] = [
componentProps: {
placeholder: '请选择数据源',
options: [
{ label: 'KunOBDB', value: '1' },
{ label: 'KunDB', value: '1' },
{ label: 'MongoDB', value: '2' },
{ label: 'AmazonS3DB', value: '3' },
],
......
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