Skip to content

B
bigDataSystem
Commit 356e9b02 authored by liangjingpeng's avatar liangjingpeng
Browse files
Options

数据整合-任务运营

parent ce3b3264
Hide whitespace changes
Inline Side-by-side
Showing with 569 additions and 0 deletions
src/views/dataIntegration/taskOM/DeptTable.vue 0 → 100644
View file @ 356e9b02
<template>
<div class="m-1 mr-0 overflow-hidden bg-white">
<!-- <a-button @click="checkAll()" class="mr-2"> 全选 </a-button>-->
<BasicTree
title=" "
ref="treeRef"
search
treeWrapperClassName="h-[calc(100%-35px)] overflow-auto"
:clickRowToExpand="true"
:checkable="false"
:defaultExpandAll="true"
:rowSelection="true"
:treeData="treeData"
:actionList="actionList"
:fieldNames="{ key: 'businessId', title: 'label' }"
@select="handleSelect"
/>
</div>
</template>
<script lang="ts" setup>
import { h, nextTick, onMounted, ref, unref } from 'vue';
import { BasicTree, TreeActionItem, TreeActionType, TreeItem } from '@/components/Tree';
import { getDeptList } from '@/api/system/dept/dept';
import { Nullable } from '@vben/types';
import { treeDataList } from './mock';
import { CaretRightOutlined, EditOutlined } from '@ant-design/icons-vue';
defineOptions({ name: 'DeptTree' });
const emit = defineEmits(['select']);
const treeData = ref<TreeItem[]>([]);
const treeRef = ref<Nullable<TreeActionType>>(null);
async function fetch() {
treeData.value = treeDataList;
await nextTick(() => {
getTree().expandAll(true);
});
}
function getTree() {
const tree = unref(treeRef);
if (!tree) {
throw new Error('tree is null!');
}
return tree;
}
// 全选
const checkFlag = ref(true);
function checkAll() {
checkFlag.value = !checkFlag.value;
getTree().checkAll(checkFlag.value);
}
function handleSelect(keys) {
emit('select', keys[0]);
}
onMounted(() => {
fetch();
});
function handlePlus(node: any) {
console.log(node);
}
function handleEdit() {
console.log('edit');
}
const actionList: TreeActionItem[] = [
{
// show:() => boolean;
render: (node) => {
return h(CaretRightOutlined, {
class: 'ml-2',
onClick: () => {
handlePlus(node);
},
});
},
},
{
render: () => {
return h(EditOutlined,{
onClick: () => {
handleEdit();
},
});
},
},
];
</script>
src/views/dataIntegration/taskOM/index.vue 0 → 100644
View file @ 356e9b02
<template>
<page-wrapper >
<div class="homePage_module">
<Row :gutter="16" class="homePage_left">
<Col :span="24">
<Card>
<div class="card_content">
<Col :span="4">
<div class="card_item">
<div class="card_itemInfo">
<div ref="chartRef" :style="{ width, height }"></div>
</div>
</div>
</Col>
<Col :span="4" @click="clickButton(1)" :class="{ 'listItemClass': selectedItem === 1 }">
<div class="card_item">
<div class="card_itemInfo">
<div class="dataNum">10</div>
<div class="dataTitle">执行记录</div>
</div>
</div>
</Col>
<Col :span="4" @click="clickButton(2)" :class="{ 'listItemClass': selectedItem === 2 }">
<div class="card_item">
<Icon icon="ant-design:check-circle-filled" :size="30" :color="'rgb(84,198,159)'" />
<div class="card_itemInfo">
<div class="dataNum">1</div>
<div class="dataTitle">成功</div>
</div>
</div>
</Col>
<Col :span="4" @click="clickButton(3)" :class="{ 'listItemClass': selectedItem === 3 }">
<div class="card_item">
<Icon icon="line-md:loading-twotone-loop" :size="30" :color="'rgb(81, 160, 248)'" />
<div class="card_itemInfo">
<div class="dataNum">2</div>
<div class="dataTitle">进行中</div>
</div>
</div>
</Col>
<Col :span="4" @click="clickButton(4)" :class="{ 'listItemClass': selectedItem === 4 }">
<div class="card_item">
<Icon icon="line-md:close-circle-filled" :size="30" :color="'rgb(212, 115, 113)'" />
<div class="card_itemInfo">
<div class="dataNum">3</div>
<div class="dataTitle">失败</div>
</div>
</div>
</Col>
<Col :span="4" @click="clickButton(5)" :class="{ 'listItemClass': selectedItem === 5 }">
<div class="card_item">
<Icon icon="ri:hourglass-fill" :size="30" :color="'rgb(147, 140, 206)'" />
<div class="card_itemInfo">
<div class="dataNum">4</div>
<div class="dataTitle">等待</div>
</div>
</div>
</Col>
</div>
</Card>
</Col>
</Row>
</div>
<div style="display: flex">
<DeptTree class="w-1/4 xl:w-1/5" @select="handleSelect" />
<!-- <BasicTable class="w-1/4 xl:w-1/5 mt-1" @register="registerTable1" :searchInfo="searchInfo"></BasicTable>-->
<div class="w-3/4 xl:w-4/5 mt-1 ml-1">
<PageWrapper title="TDT1" contentBackground headerSticky>
<template #extra>
<div class="mr-5 mt-2">
<icon icon="si:play-line" @click="handleExecute"/>
<icon class="ml-1.5" icon="ant-design:edit-outlined" @click="handleEdit" />
</div>
</template>
<template #footer>
<Description class="ml-3" @register="register1"/>
<basic-table class="mt-2" @register="registerTable" >
<template #toolbar>
<a-button type="primary" @click="handleRun">重跑</a-button>
<a-button type="primary" @click="handleRecover" >错误恢复</a-button>
<a-button type="primary" @click="handleCancel" >取消执行</a-button>
</template>
<template #operationalStatus="{ text, record }">
<Icon v-if="text === '成功'" icon="ant-design:check-circle-filled" :size="15" :color="'rgb(84,198,159)'" />
<Icon v-else-if="text === '失败'" icon="line-md:close-circle-filled" :size="15" :color="'rgb(212, 115, 113)'" />
<Icon v-else icon="line-md:loading-twotone-loop" :size="15" :color="'rgb(81, 160, 248)'" />
{{ text }}
</template>
</basic-table>
</template>
</PageWrapper>
</div>
</div>
</page-wrapper>
</template>
<script setup lang="ts">
import PageWrapper from "@/components/Page/src/PageWrapper.vue";
import {Card, Col, Row} from "ant-design-vue";
import Icon from "@/components/Icon/Icon.vue";
import {Ref, ref, watch} from "vue";
import {useECharts} from "@/hooks/web/useECharts";
import {useMessage} from "@/hooks/web/useMessage";
import {useRoute} from "vue-router";
import {useGo} from "@/hooks/web/usePage";
import DeptTree from "./DeptTable.vue";
import {BasicTable, TableAction, useTable} from "@/components/Table";
import {tableList,mockData} from "./mock";
import { columns,searchFormSchema,schema } from "./taskOM.data"
import {Description, useDescription} from "@/components/Description";
defineOptions({ name: 'AccountManagement' });
const [register1] = useDescription({
bordered: false,
data: mockData,
schema: schema,
});
const props = defineProps({
loading: Boolean,
width: {
type: String as PropType<string>,
default: '100%',
},
height: {
type: String as PropType<string>,
default: '300px',
},
});
const chartRef = ref<HTMLDivElement | null>(null);
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
const { createMessage, createConfirm } = useMessage();
const route = useRoute();
const go = useGo();
const searchInfo = ref('');
const selectedItem = ref()
watch(
() => props.loading,
() => {
if (props.loading) {
return;
}
setOptions({
tooltip: {
trigger: 'item',
},
series: [
{
color: ['rgb(84,198,159)', 'rgb(81, 160, 248)', 'rgb(212, 115, 113)', 'rgb(147, 140, 206)'],
// name: '访问来源',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 0,
borderColor: '#fff',
borderWidth: 2,
},
label: {
show: false,
position: 'center',
},
emphasis: {
label: {
show: true,
fontSize: '12',
fontWeight: 'bold',
},
},
labelLine: {
show: false,
},
data: [
{ value: 1 , name:'成功'},
{ value: 2 , name:'进行中'},
{ value: 3 ,name:'失败'},
{ value: 4 ,name:'等待'},
],
animationType: 'scale',
animationEasing: 'exponentialInOut',
animationDelay: function () {
return Math.random() * 100;
},
},
],
});
},
{ immediate: true },
);
/**列表right*/
const [registerTable, { reload, updateTableDataRecord, getSearchInfo,getForm,getRowSelection }] = useTable({
title: '执行记录',
api: async (params) => {
console.log('tableList',tableList)
const response = {
pageNu: "1",
pageSize: "10",
pages: "1",
total: tableList.length,
code:'',
message:'',
data: tableList,
};
return { ...response};
},
rowKey: 'businessId',
showIndexColumn: false,//显示序号
rowSelection: false,//多选
columns,
// formConfig: {
// labelWidth: 10,
// schemas: searchFormSchema,
// autoSubmitOnEnter: true,
// resetFunc: () => {
// searchInfo.deptId=''
// },
// },
useSearchForm: false,
showTableSetting: false,
bordered: true,
handleSearchInfoFn(info) {
console.log('handleSearchInfoFn', info);
return info;
},
// actionColumn: {
// width: 170,
// title: '操作',
// dataIndex: 'action',
// // slots: { customRender: 'action' },
// },
});
/**执行 按钮*/
const handleExecute = () => {
console.log('触发了执行按钮')
};
/**编辑 按钮*/
const handleEdit = () => {
console.log('触发了编辑按钮')
};
/**重跑 按钮*/
const handleRun = () => {
console.log('触发了重跑按钮')
};
/**错误恢复 按钮*/
const handleRecover = () => {
console.log('触发了错误恢复按钮')
};
/**取消 按钮*/
const handleCancel = () => {
console.log('触发了取消执行按钮')
};
/**点击card 改变css样式*/
function clickButton(item){
selectedItem.value = item;
}
</script>
<style scoped lang="less">
.homePage_module {
::v-deep(.ant-card-body) {
display: flex;
justify-content: center;
height: 180px;
}
.homePage_left {
::v-deep(.ant-tabs-tab) {
font-size: 18px;
font-weight: 600;
}
.card_content {
width: 70%;
display: flex;
justify-content: center;
align-items: center;
.card_item {
padding-left: 20px;
display: flex;
align-items: center;
width: 120px;
height: 80px;
border-radius: 10px;
.card_itemInfo {
padding-left: 7px;
.dataNum {
font-size: 20px;
line-height: 26px;
font-weight: bold;
}
.dataTitle {
font-size: 12px;
line-height: 12px;
}
}
}
}
}
}
.listItemClass{
background-color: rgb(230, 243, 255);
border-bottom: 2px solid #6ebafc;
border-radius: 5px;
}
</style>
src/views/dataIntegration/taskOM/mock.ts 0 → 100644
View file @ 356e9b02
export const tableList: any[] = [
{
dispatchTime: '2024-10-25 10:04:05',
executeTime: '2024-10-25 10:04:05',
rows: 12,
executeDuration: '5s',
operationalStatus: '成功',
version: 'V2',
executeMode: '手动执行',
},
{
dispatchTime: '2024-10-25 10:04:05',
executeTime: '2024-10-25 10:04:05',
rows: 12,
executeDuration: '5s',
operationalStatus: '失败',
version: 'V2',
executeMode: '手动执行',
},
{
dispatchTime: '2024-10-25 10:04:05',
executeTime: '2024-10-25 10:04:05',
rows: 12,
executeDuration: '5s',
operationalStatus: '进行中',
version: 'V2',
executeMode: '手动执行',
},
]
export const mockData: Recordable = {
schedulingCycle: '无周期',
publishingStatus: '已发布',
createdBy: '戴拿',
};
export const treeDataList = [
{
label: 'TDT1',
businessId: 1,
// children: [
// { label: 'admin_个人工作区', businessId: 2 },
// { label: '共享工作区', businessId: 3 },
// { label: '商城工作区', businessId: 4 },
// { label: '指标工作区', businessId: 5 },
// ],
},
{
label: 'TDT2',
businessId: 2,
},
{
label: 'TDT3',
businessId: 3,
},
]
export const treeDataListTwo = [
{
label: '默认工作组',
businessId: 1,
children: [
{ label: '默认工作组01', businessId: 2 },
{ label: '默认工作组02', businessId: 3 },
{ label: '默认工作组03', businessId: 4 },
{ label: '默认工作组04', businessId: 5 },
],
},
]
src/views/dataIntegration/taskOM/recordDetails.vue 0 → 100644
View file @ 356e9b02
<script setup lang="ts">
</script>
<template>
</template>
<style scoped lang="less">
</style>
src/views/dataIntegration/taskOM/taskOM.data.ts 0 → 100644
View file @ 356e9b02
import {BasicColumn, FormSchema} from "@/components/Table";
import {DescItem} from "@/components/Description";
export const columns: BasicColumn[] = [
{
title: '调度时间',
dataIndex: 'dispatchTime',
width: 160,
},
{
title: '执行时间',
dataIndex: 'executeTime',
width: 160,
},
{
title: '影响行数',
dataIndex: 'rows',
width: 90,
},
{
title: '执行时长',
dataIndex: 'executeDuration',
width: 90,
},
{
title: '运行状态',
dataIndex: 'operationalStatus',
width: 90,
slots: { customRender: 'operationalStatus' },
},
{
title: '执行版本',
dataIndex: 'version',
width: 90,
},
{
title: '执行模式',
dataIndex: 'executeMode',
width: 90,
},
];
export const searchFormSchema: FormSchema[] = [
{
field: 'name',
label: ' ',
component: 'Input',
colProps: { span: 8 },
componentProps: {
placeholder: '输入关键字搜索',
},
},
{
field: 'flag',
label: ' ',
component: 'Select',
componentProps: {
placeholder: '按来源过滤',
options: [
{ label: '指标汇总表', value: '1' },
],
},
colProps: { span: 8 },
},
];
export const schema: DescItem[] = [
{
field: 'schedulingCycle',
label: '调度周期',
},
{
field: 'publishingStatus',
label: '发布状态',
},
{
field: 'createdBy',
label: '创建者',
},
];
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