Skip to content

B
bigDataSystem
Commit 9817791e authored by liangjingpeng's avatar liangjingpeng
Browse files
Options

数据整合-任务运维-左上筛选表单

parent 8705f399
Hide whitespace changes
Inline Side-by-side
Showing with 166 additions and 49 deletions
src/views/dataIntegration/taskOM/index.vue
View file @ 9817791e
...@@ -5,58 +5,65 @@ ...@@ -5,58 +5,65 @@
<Row :gutter="16" class="homePage_left"> <Row :gutter="16" class="homePage_left">
<Col :span="24"> <Col :span="24">
<Card> <Card>
<div class="card_content"> <div style="flex: 1">
<Col :span="4"> <div class="ml-1 mt-1">
<div class="card_item"> <BasicForm @register="registerForm"/>
<div class="card_itemInfo"> </div>
<div ref="chartRef" :style="{ width, height }"></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>
</div>
</div> </div>
</div> </Col>
</Col> <Col :span="3" @click="clickButton(1)" :class="{ 'listItemClass': selectedItem === 1 }">
<Col :span="4" @click="clickButton(1)" :class="{ 'listItemClass': selectedItem === 1 }"> <div class="card_item">
<div class="card_item"> <div class="card_itemInfo">
<div class="card_itemInfo"> <div class="dataNum">10</div>
<div class="dataNum">10</div> <div class="dataTitle">执行记录</div>
<div class="dataTitle">执行记录</div> </div>
</div> </div>
</div> </Col>
</Col> <Col :span="3" @click="clickButton(2)" :class="{ 'listItemClass': selectedItem === 2 }">
<Col :span="4" @click="clickButton(2)" :class="{ 'listItemClass': selectedItem === 2 }"> <div class="card_item">
<div class="card_item"> <Icon icon="ant-design:check-circle-filled" :size="30" :color="'rgb(84,198,159)'" />
<Icon icon="ant-design:check-circle-filled" :size="30" :color="'rgb(84,198,159)'" /> <div class="card_itemInfo">
<div class="card_itemInfo"> <div class="dataNum">1</div>
<div class="dataNum">1</div> <div class="dataTitle">成功</div>
<div class="dataTitle">成功</div> </div>
</div> </div>
</div> </Col>
</Col> <Col :span="3" @click="clickButton(3)" :class="{ 'listItemClass': selectedItem === 3 }">
<Col :span="4" @click="clickButton(3)" :class="{ 'listItemClass': selectedItem === 3 }"> <div class="card_item">
<div class="card_item"> <Icon icon="line-md:loading-twotone-loop" :size="30" :color="'rgb(81, 160, 248)'" />
<Icon icon="line-md:loading-twotone-loop" :size="30" :color="'rgb(81, 160, 248)'" /> <div class="card_itemInfo">
<div class="card_itemInfo"> <div class="dataNum">2</div>
<div class="dataNum">2</div> <div class="dataTitle">进行中</div>
<div class="dataTitle">进行中</div> </div>
</div> </div>
</div> </Col>
</Col> <Col :span="3" @click="clickButton(4)" :class="{ 'listItemClass': selectedItem === 4 }">
<Col :span="4" @click="clickButton(4)" :class="{ 'listItemClass': selectedItem === 4 }"> <div class="card_item">
<div class="card_item"> <Icon icon="line-md:close-circle-filled" :size="30" :color="'rgb(212, 115, 113)'" />
<Icon icon="line-md:close-circle-filled" :size="30" :color="'rgb(212, 115, 113)'" /> <div class="card_itemInfo">
<div class="card_itemInfo"> <div class="dataNum">3</div>
<div class="dataNum">3</div> <div class="dataTitle">失败</div>
<div class="dataTitle">失败</div> </div>
</div> </div>
</div> </Col>
</Col> <Col :span="3" @click="clickButton(5)" :class="{ 'listItemClass': selectedItem === 5 }">
<Col :span="4" @click="clickButton(5)" :class="{ 'listItemClass': selectedItem === 5 }"> <div class="card_item">
<div class="card_item"> <Icon icon="ri:hourglass-fill" :size="30" :color="'rgb(147, 140, 206)'" />
<Icon icon="ri:hourglass-fill" :size="30" :color="'rgb(147, 140, 206)'" /> <div class="card_itemInfo">
<div class="card_itemInfo"> <div class="dataNum">4</div>
<div class="dataNum">4</div> <div class="dataTitle">等待</div>
<div class="dataTitle">等待</div> </div>
</div> </div>
</div> </Col>
</Col> <col :span="3" />
</div>
</div> </div>
</Card> </Card>
</Col> </Col>
...@@ -109,10 +116,11 @@ import {useGo} from "@/hooks/web/usePage"; ...@@ -109,10 +116,11 @@ import {useGo} from "@/hooks/web/usePage";
import DeptTree from "./DeptTable.vue"; import DeptTree from "./DeptTable.vue";
import {BasicTable, TableAction, useTable} from "@/components/Table"; import {BasicTable, TableAction, useTable} from "@/components/Table";
import {tableList,mockData} from "./mock"; import {tableList,mockData} from "./mock";
import { columns,searchFormSchema,schema } from "./taskOM.data" import { columns,searchFormSchema,schema,resetNameFormSchema } from "./taskOM.data"
import {Description, useDescription} from "@/components/Description"; import {Description, useDescription} from "@/components/Description";
import {push} from "echarts/types/src/component/dataZoom/history"; import {push} from "echarts/types/src/component/dataZoom/history";
import {router} from "@/router"; import {router} from "@/router";
import {BasicForm,useForm} from "@/components/Form";
defineOptions({ name: 'AccountManagement' }); defineOptions({ name: 'AccountManagement' });
...@@ -193,6 +201,17 @@ watch( ...@@ -193,6 +201,17 @@ watch(
}, },
{ immediate: true }, { immediate: true },
); );
//初始化表单
const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
labelWidth: 100,
baseColProps: { lg: 24, md: 24 },
schemas: resetNameFormSchema,
showActionButtonGroup: false,
actionColOptions: {
span: 23,
},
});
/**列表right*/ /**列表right*/
const [registerTable, { reload, updateTableDataRecord, getSearchInfo,getForm,getRowSelection }] = useTable({ const [registerTable, { reload, updateTableDataRecord, getSearchInfo,getForm,getRowSelection }] = useTable({
title: '执行记录', title: '执行记录',
...@@ -279,7 +298,8 @@ function clickButton(item){ ...@@ -279,7 +298,8 @@ function clickButton(item){
::v-deep(.ant-card-body) { ::v-deep(.ant-card-body) {
display: flex; display: flex;
justify-content: center; justify-content: center;
height: 180px; height: 150px;
padding: 0;
} }
.homePage_left { .homePage_left {
::v-deep(.ant-tabs-tab) { ::v-deep(.ant-tabs-tab) {
...@@ -287,7 +307,7 @@ function clickButton(item){ ...@@ -287,7 +307,7 @@ function clickButton(item){
font-weight: 600; font-weight: 600;
} }
.card_content { .card_content {
width: 70%; width: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
......
src/views/dataIntegration/taskOM/taskOM.data.ts
View file @ 9817791e
...@@ -65,6 +65,103 @@ export const searchFormSchema: FormSchema[] = [ ...@@ -65,6 +65,103 @@ export const searchFormSchema: FormSchema[] = [
}, },
]; ];
/**左上角表单*/
export const resetNameFormSchema: FormSchema[] = [
{
field: 'schedulingTime',
component: 'RadioButtonGroup',
colProps: {
lg: 4, md: 4,
},
defaultValue: '1',
componentProps: {
options: [
{
label: '调度时间',
value: '1',
},
{
label: '执行时间',
value: '2',
},
],
onChange: (e) => {
console.log(e);
},
},
},
{
field: 'days',
component: 'DatePicker',
colProps: {
lg: 3,
md: 3,
},
defaultValue: new Date(),
componentProps: {
format: 'YYYY-MM-DD',
placeholder: '选择日期范围',
},
},
{
field: 'schedulingType',
component: 'Select',
label: '调度类型',
colProps: {
lg: 4, md: 4,
},
defaultValue: '1',
componentProps: {
options: [
{
label: '不限',
value: '1',
key: '1',
},
{
label: '不限2',
value: '2',
key: '2',
},
{
label: '不限3',
value: '3',
key: '3',
},
],
},
},
{
field: 'publishingStatus',
component: 'Select',
label: '发布状态',
colProps: {
lg: 4, md: 4,
},
defaultValue: '1',
componentProps: {
options: [
{
label: '不限',
value: '1',
key: '1',
},
{
label: '不限2',
value: '2',
key: '2',
},
{
label: '不限3',
value: '3',
key: '3',
},
],
},
},
];
export const schema: DescItem[] = [ export const schema: DescItem[] = [
{ {
field: 'schedulingCycle', field: 'schedulingCycle',
......
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