Commit 416ffca3 authored by 罗林杰's avatar 罗林杰

修改布局

parent 7c81082d
<template>
<page-wrapper >
<div class="homePage_module">
<Row :gutter="16" class="homePage_left">
<Col :span="24">
<Card>
<div style="flex: 1">
<div class="ml-2 mt-1">
<div class="flex">
<a-button type="default" @click="handleGoBack"><icon icon="ant-design:left-outlined"/>返回</a-button>
<Select
class="ml-6"
v-model:value="value1"
style="width: 260px"
:options="options1"
@change="handleChange"
></Select>
<page-wrapper>
<div class="homePage_module">
<Row :gutter="16" class="homePage_left">
<Col :span="24">
<Card>
<div style="flex: 1">
<div class="ml-2 mt-1">
<div class="flex">
<a-button type="default" @click="handleGoBack"
><icon icon="ant-design:left-outlined" />返回</a-button
>
<Select
class="ml-6"
v-model:value="value1"
style="width: 260px"
:options="options1"
@change="handleChange"
/>
</div>
<BasicForm class="mt-2" @register="registerForm">
<template #refresh="{ field, model }">
<div class="mr-2" style="float: right">
<a-button type="primary" @click="reFresh">刷新</a-button>
</div>
</template>
</BasicForm>
</div>
<BasicForm class="mt-2" @register="registerForm">
<template #refresh="{ field, model }">
<div class="mr-2" style="float: right">
<a-button type="primary" @click="resetFields">刷新</a-button>
<div class="card_content">
<col :span="3" />
<Col :span="3">
<div class="card_item">
<div class="card_itemInfo">
<div ref="chartRef" :style="{ width, height }"></div>
</div>
</div>
</template>
</BasicForm>
</div>
<div class="card_content">
<col :span="3" />
<Col :span="3">
<div class="card_item">
<div class="card_itemInfo">
<div ref="chartRef" :style="{ width, height }"></div>
</Col>
<Col
:span="3"
@click="clickButton(1)"
:class="{ listItemClass: selectedItem === 1 }"
>
<div class="card_item">
<div class="card_itemInfo">
<div class="dataNum">{{ allNum }}</div>
<div class="dataTitle">执行记录</div>
</div>
</div>
</div>
</Col>
<Col :span="3" @click="clickButton(1)" :class="{ 'listItemClass': selectedItem === 1 }">
<div class="card_item">
<div class="card_itemInfo">
<div class="dataNum">{{ allNum }}</div>
<div class="dataTitle">执行记录</div>
</Col>
<Col
:span="3"
@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">{{ successNum }}</div>
<div class="dataTitle">成功</div>
</div>
</div>
</div>
</Col>
<Col :span="3" @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">{{ successNum }}</div>
<div class="dataTitle">成功</div>
</div>
</div>
</Col>
<Col :span="3" @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">{{ runningNum }}</div>
<div class="dataTitle">进行中</div>
</Col>
<Col
:span="3"
@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">{{ runningNum }}</div>
<div class="dataTitle">进行中</div>
</div>
</div>
</div>
</Col>
<Col :span="3" @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">{{ failNum }}</div>
<div class="dataTitle">失败</div>
</Col>
<Col
:span="3"
@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">{{ failNum }}</div>
<div class="dataTitle">失败</div>
</div>
</div>
</div>
</Col>
<Col :span="3" @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">{{ waitNum }}</div>
<div class="dataTitle">等待</div>
</Col>
<Col
:span="3"
@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">{{ waitNum }}</div>
<div class="dataTitle">等待</div>
</div>
</div>
</div>
</Col>
<col :span="3" />
</Col>
<col :span="3" />
</div>
</div>
</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>
</Card>
</Col>
</Row>
</div>
</div>
</page-wrapper>
<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, Select } from 'ant-design-vue';
import type { SelectProps } from 'ant-design-vue';
import Icon from '@/components/Icon/Icon.vue';
import { onMounted, onUnmounted, 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, resetNameFormSchema } from './taskOM.data';
import { Description, useDescription } from '@/components/Description';
import { push } from 'echarts/types/src/component/dataZoom/history';
import { router } from '@/router';
import { BasicForm, useForm } from '@/components/Form';
import PageWrapper from "@/components/Page/src/PageWrapper.vue";
import {Card, Col, Row,Select} from "ant-design-vue";
import type { SelectProps } from 'ant-design-vue';
import Icon from "@/components/Icon/Icon.vue";
import {onMounted, onUnmounted, 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,resetNameFormSchema } from "./taskOM.data"
import {Description, useDescription} from "@/components/Description";
import {push} from "echarts/types/src/component/dataZoom/history";
import {router} from "@/router";
import {BasicForm,useForm} from "@/components/Form";
defineOptions({ name: 'AccountManagement' });
defineOptions({ name: 'AccountManagement' });
/*饼图数据获取*/
const successNum = ref(0);
const runningNum = ref(0);
const failNum = ref(0);
const waitNum = ref(0);
const allNum = ref(0);
onMounted(() => {
tableList.forEach(item => {
if (item.operationalStatus === '成功') {
successNum.value ++
} else if (item.operationalStatus === '进行中') {
runningNum.value ++
} else if (item.operationalStatus === '失败') {
failNum.value ++
} else if (item.operationalStatus === '等待') {
waitNum.value ++
}
allNum.value ++
})
watch(
() => props.loading,
() => {
if (props.loading) {
return;
/*饼图数据获取*/
const successNum = ref(0);
const runningNum = ref(0);
const failNum = ref(0);
const waitNum = ref(0);
const allNum = ref(0);
onMounted(() => {
tableList.forEach((item) => {
if (item.operationalStatus === '成功') {
successNum.value++;
} else if (item.operationalStatus === '进行中') {
runningNum.value++;
} else if (item.operationalStatus === '失败') {
failNum.value++;
} else if (item.operationalStatus === '等待') {
waitNum.value++;
}
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: {
allNum.value++;
});
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: true,
fontSize: '12',
fontWeight: 'bold',
show: false,
position: 'center',
},
emphasis: {
label: {
show: true,
fontSize: '12',
fontWeight: 'bold',
},
},
labelLine: {
show: false,
},
data: [
{ value: successNum.value, name: '成功' },
{ value: runningNum.value, name: '进行中' },
{ value: failNum.value, name: '失败' },
{ value: waitNum.value, name: '等待' },
],
animationType: 'scale',
animationEasing: 'exponentialInOut',
animationDelay: function () {
return Math.random() * 100;
},
},
labelLine: {
show: false,
},
data: [
{ value: successNum.value, name:'成功'},
{ value: runningNum.value , name:'进行中'},
{ value: failNum.value ,name:'失败'},
{ value: waitNum.value ,name:'等待'},
],
animationType: 'scale',
animationEasing: 'exponentialInOut',
animationDelay: function () {
return Math.random() * 100;
},
},
],
});
],
});
},
{ immediate: true },
);
});
const [register1] = useDescription({
bordered: false,
data: mockData,
schema: schema,
});
const props = defineProps({
loading: Boolean,
width: {
type: String as PropType<string>,
default: '100%',
},
{ immediate: true },
);
})
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()
//初始化表单
const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
labelWidth: 100,
baseColProps: { lg: 24, md: 24 },
schemas: resetNameFormSchema,
showActionButtonGroup: false,
actionColOptions: {
span: 23,
},
});
/**列表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' },
// },
});
/**返回按钮*/
function handleGoBack() {
router.go(-1);
}
/**执行 按钮*/
const handleExecute = () => {
console.log('触发了执行按钮')
};
/**编辑 按钮*/
function handleEdit() {
console.log('触发了编辑按钮')
router.push({
path:'/dataIntegration/taskOM/recordDetails',
})
}
/**重跑 按钮*/
const handleRun = () => {
console.log('触发了重跑按钮')
createConfirm({
iconType: 'warning',
title: '重跑',
content: '确认重跑选中数据吗?',
onOk() {
createMessage.success('重跑成功!');
height: {
type: String as PropType<string>,
default: '300px',
},
});
};
/**错误恢复 按钮*/
const handleRecover = () => {
console.log('触发了错误恢复按钮')
createConfirm({
iconType: 'warning',
title: '错误恢复',
content: '确认恢复选中数据吗?',
onOk() {
createMessage.success('恢复成功!');
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();
//初始化表单
const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
labelWidth: 100,
baseColProps: { lg: 24, md: 24 },
schemas: resetNameFormSchema,
showActionButtonGroup: false,
actionColOptions: {
span: 23,
},
});
};
/**取消 按钮*/
const handleCancel = () => {
console.log('触发了取消执行按钮')
createConfirm({
iconType: 'warning',
title: '取消执行',
content: '确认取消执行选中数据吗?',
onOk() {
createMessage.success('取消执行成功!');
/**列表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 value1 = ref('admin-个人工作区,共享工作区,test001');
const options1 = ref<SelectProps['options']>([
{
label: 'admin-个人工作区',
value: 'admin-个人工作区',
},
{
label: '共享工作区',
value: '共享工作区',
},
{
label: 'test001',
value: 'test001',
},
{
label: 'test002',
value: 'test002',
},
{
label: 'test003',
value: 'test003',
},
]);
const handleChange = (value: string) => {
console.log(`selected ${value}`);
};
/**返回按钮*/
function handleGoBack() {
router.go(-1);
}
/**执行 按钮*/
const handleExecute = () => {
console.log('触发了执行按钮');
};
/**编辑 按钮*/
function handleEdit() {
console.log('触发了编辑按钮');
router.push({
path: '/dataIntegration/taskOM/recordDetails',
});
}
function reFresh() {
resetFields();
createMessage.success('刷新成功!');
}
/**重跑 按钮*/
const handleRun = () => {
console.log('触发了重跑按钮');
createConfirm({
iconType: 'warning',
title: '重跑',
content: '确认重跑选中数据吗?',
onOk() {
createMessage.success('重跑成功!');
},
});
};
/**错误恢复 按钮*/
const handleRecover = () => {
console.log('触发了错误恢复按钮');
createConfirm({
iconType: 'warning',
title: '错误恢复',
content: '确认恢复选中数据吗?',
onOk() {
createMessage.success('恢复成功!');
},
});
};
/**取消 按钮*/
const handleCancel = () => {
console.log('触发了取消执行按钮');
createConfirm({
iconType: 'warning',
title: '取消执行',
content: '确认取消执行选中数据吗?',
onOk() {
createMessage.success('取消执行成功!');
},
});
};
/**点击card 改变css样式*/
function clickButton(item){
selectedItem.value = item;
}
const value1 = ref('admin-个人工作区,共享工作区,test001');
const options1 = ref<SelectProps['options']>([
{
label: 'admin-个人工作区',
value: 'admin-个人工作区',
},
{
label: '共享工作区',
value: '共享工作区',
},
{
label: 'test001',
value: 'test001',
},
{
label: 'test002',
value: 'test002',
},
{
label: 'test003',
value: 'test003',
},
]);
const handleChange = (value: string) => {
console.log(`selected ${value}`);
};
/**点击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;
padding: 0;
}
.homePage_left {
::v-deep(.ant-tabs-tab) {
font-size: 18px;
font-weight: 600;
}
.card_content {
width: 100%;
margin-bottom: 16px;
.homePage_module {
::v-deep(.ant-card-body) {
display: flex;
justify-content: center;
align-items: center;
.card_item {
padding-left: 20px;
padding: 0;
}
.homePage_left {
::v-deep(.ant-tabs-tab) {
font-size: 18px;
font-weight: 600;
}
.card_content {
width: 100%;
margin-bottom: 16px;
display: flex;
justify-content: center;
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;
.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;
}
.listItemClass {
background-color: rgb(230, 243, 255);
border-bottom: 2px solid #6ebafc;
border-radius: 5px;
}
</style>
......@@ -122,14 +122,14 @@
<a-button @click="handleGetMetadata('preview')" type="primary">预览</a-button>
</template>
</BasicForm>
<div v-if="tableDetail" style="width: 40%; padding: 0 5px 5px">
<div v-if="tableDetail" style="width: 40%; padding: 0 5px 5px; margin-left: 20px">
<div class="title">已获取元数据</div>
<div style="display: flex; justify-content: space-between">
<a-input-search style="width: 220px" />
</div>
<BasicTable @register="registerDataSourceTable" />
</div>
<div v-if="tableDetail" style="width: 40%; padding: 0 5px 5px">
<div v-if="tableDetail" style="width: 40%; padding: 0 5px 5px; margin-left: 20px">
<div class="title">唯一键</div>
<Alert
show-icon
......@@ -209,7 +209,11 @@
:actions="[
{
icon: 'ic:outline-delete-outline',
onClick: handleDeleteRule.bind(null, record),
popConfirm: {
title: '是否确认删除',
placement: 'left',
confirm: handleDeleteRule.bind(null, record),
},
},
]"
/>
......@@ -852,6 +856,7 @@
},
});
const [registerMappingRuleConfigurationTable, { getRowSelection, reload }] = useTable({
title: ' ',
api: async () => {
const response = {
pageNu: '1',
......@@ -1274,6 +1279,12 @@
reload();
}
function handleOperation() {
router.push({
path: '/dataIntegration/taskOM/index',
});
}
function handleMoveTop(source) {
[mappingRuleConfigurationTable.value[source], mappingRuleConfigurationTable.value[0]] = [
mappingRuleConfigurationTable.value[0],
......
......@@ -13,7 +13,7 @@
<div style="margin-left: 10px">
<span class="title">test</span>
<div>
<span class="path">自助建表文件/test</span>
<span class="path">函数/test</span>
</div>
</div>
<a-button style="margin-left: 700px" type="primary" @click="handleDeleteIds">删除</a-button>
......
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