周期调度任务流

src/views/taskScheduling/taskFlowMaintenance/periodicScheduling/DependencyRelationshipDrawer.vue

@@ -25,15 +25,15 @@
   import { ref, computed, unref } from 'vue';
   import { BasicForm, useForm } from '@/components/Form';
   import { Card, Tabs, TabPane, Col, Row,RangePicker,RadioGroup,RadioButton,Select,Collapse } from 'ant-design-vue';
-  import {tableListColumns} from './taskFlowMaintenance.data';
-  import {taskListData} from './taskFlowMaintenanceData';
+  import {tableListColumns} from './periodicScheduling.data';
+  import {taskListData} from './periodicSchedulingData';
   import { BasicDrawer, useDrawerInner } from '@/components/Drawer';
   import { BasicTree, TreeItem } from '@/components/Tree';
   import {useMessage} from "@/hooks/web/useMessage";
   import { Alert } from 'ant-design-vue';
   import { useModal } from '@/components/Modal';
   import Icon from '@/components/Icon/Icon.vue';
-  import { detailTreeData } from './taskFlowMaintenanceData'
+  import { detailTreeData } from './periodicSchedulingData'
 
   const [registerLookLogModal, { openModal: openLookLogModal }] = useModal();
   const [registerLookAllDataModal, { openModal: openLookAllDataModal }] = useModal();

src/views/taskScheduling/taskFlowMaintenance/periodicScheduling/ExecuteConditionModal.vue

+<template>
+  <BasicModal  width="40%" v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit">
+    <BasicTable @register="registerTable"/>
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+import {ref, computed, unref, reactive, onMounted} from 'vue';
+import {BasicModal, useModal, useModalInner} from '@/components/Modal';
+import { BasicForm, useForm } from '@/components/Form';
+import { useMessage } from '@/hooks/web/useMessage';
+import {columns, columns2} from "./periodicScheduling.data";
+import { router } from '@/router';
+import { BasicTable, useTable, TableAction } from '@/components/Table';
+import {
+  tableData,
+  tableData2
+} from "@/views/taskScheduling/taskFlowMaintenance/periodicScheduling/periodicSchedulingData";
+
+  defineOptions({ name: 'AccountModal' });
+  const emit = defineEmits(['success', 'register']);
+  const { createMessage,createConfirm } = useMessage();
+  const getTitle = computed(() => ('执行条件'));
+
+  //初始化弹框
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    setModalProps({ confirmLoading: false,showOkBtn:false,cancelText:'关闭' });
+
+  });
+
+  const [registerTable, { reload,getForm,getRowSelection }] = useTable({
+  title: '',
+  api: async (params) => {
+    const response = {
+      pageNu: "1",
+      pageSize: "10",
+      pages: "1",
+      total: tableData2.length,
+      code:'',
+      message:'',
+      data: [],
+    };
+    return { ...response,data: tableData2 };
+  },
+  columns:columns2,
+  useSearchForm: false,
+  showTableSetting: false,
+  showIndexColumn:false,
+  bordered: true,
+  scroll: { y: 300 },
+});
+
+
+  /**确定按钮*/
+  async function handleSubmit() {
+
+  }
+
+  onMounted(() => {
+
+  });
+</script>
+<style lang="less" scoped>
+
+</style>

src/views/taskScheduling/taskFlowMaintenance/periodicScheduling/RunAgainModal.vue

 <template>
   <BasicModal  width="40%" v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit">
-    <BasicForm @register="registerForm">
+    <BasicForm @register="registerForm1" v-if="show1">
       <template #slot="{ model, field }">
         <div class="textClass1" v-if="model.scopeAction === '当前任务流'">
           <div style="font-weight: bold;margin-bottom: 10px;">重跑当前注意事项</div>
-          <div>
-            1. 按照当前任务流最新的版本重跑；<br>
-            2. 任务流是否可以重跑成功取决于任务流条件是否达成，例如依赖的上游的状态, 是否存在依赖上次执行结果等条件;；<br>
-            3. 若包含外部任务，workflow不保证外部任务的数据幂等性，按照要求重跑当前任务，例如任务包含数据加载任务，当最后一步数据插入已经发送到引擎端，则重试会出现重复数据。
+          <div style="white-space: pre-wrap">
+            {{text1}}
           </div>
         </div>
         <div class="textClass2" v-else>
+          <div style="font-weight: bold;margin-bottom: 10px;">重跑当前及下游注意事项</div>
+          <div style="white-space: pre-wrap">
+            {{text2}}
+          </div>
+        </div>
+      </template>
+    </BasicForm>
+    <BasicForm @register="registerForm2"  v-if="show2">
+      <template #slot="{ model, field }">
+        <div class="textClass1" v-if="model.scopeAction === '当前任务'">
           <div style="font-weight: bold;margin-bottom: 10px;">重跑当前注意事项</div>
-          <div>
-            1. 重跑的是当前任务流和依赖关系的最新版本，新增的依赖关系的下游执行相关的最新执行记录可能会被覆盖；<br>
-            2. 任务流是否可以重跑成功取决于任务流条件是否达成，例如依赖的上游的状态，是否存在依赖上次执行结果等条件；<br>
-            3. 若包含外部任务，workflow不保证外部任务的数据幂等性，按照要求重跑当前任务，例如任务包含数据加载任务，当最后一步数据插入已经发送到引擎端，则重试会出现重复数据；<br>
-            4. 重跑当前及下游，若下游的任务流除了当前任务流还有其他的依赖，则下游是否运行还依赖其他分支依赖的上游任务流的状态；<br>
-            5. 重跑影响的执行记录按照批次重跑，若下游任务流还在运行中，会等待运行结束后进行重跑。
+          <div style="white-space: pre-wrap">
+            {{text3}}
+          </div>
+        </div>
+        <div class="textClass2" v-else>
+          <div style="font-weight: bold;margin-bottom: 10px;">重跑当及下游注意事项</div>
+          <div style="white-space: pre-wrap">
+            {{text4}}
           </div>
         </div>
       </template>
@@ -26,34 +36,78 @@
 </template>
 <script lang="ts" setup>
 import {ref, computed, unref, reactive, onMounted} from 'vue';
-  import { BasicModal, useModalInner } from '@/components/Modal';
+import {BasicModal, useModal, useModalInner} from '@/components/Modal';
   import { BasicForm, useForm } from '@/components/Form';
   import { useMessage } from '@/hooks/web/useMessage';
-  import {mainFormSchema4, runAgainSchema} from "./taskFlowMaintenance.data";
-import {TreeData} from "@/views/taskScheduling/taskFlowMaintenance/periodicScheduling/taskFlowMaintenanceData";
+  import {mainFormSchema4, runAgainSchema1,runAgainSchema2} from "./periodicScheduling.data";
+  import {TreeData} from "@/views/taskScheduling/taskFlowMaintenance/periodicScheduling/periodicSchedulingData";
+  import { router } from '@/router';
+
   defineOptions({ name: 'AccountModal' });
 
   const emit = defineEmits(['success', 'register']);
-  const { createMessage } = useMessage();
+  const { createMessage,createConfirm } = useMessage();
   const getTitle = computed(() => ('重跑'));
+  const text1 = ref('1. 按照当前任务流最新的版本重跑；\n' +
+    '2. 任务流是否可以重跑成功取决于任务流条件是否达成，例如依赖的上游的状态, 是否存在依赖上次执行结果等条件;\n' +
+    '3. 若包含外部任务，workflow不保证外部任务的数据幂等性，按照要求重跑当前任务，例如任务包含数据加载任务，当最后一步数据插入已经发送到引擎端，则重试会出现重复数据。');
+  const text2 = ref('1. 重跑的是当前任务流和依赖关系的最新版本，新增的依赖关系的下游执行相关的最新执行记录可能会被覆盖；\n' +
+    '2. 任务流是否可以重跑成功取决于任务流条件是否达成，例如依赖的上游的状态，是否存在依赖上次执行结果等条件;\n' +
+    '3. 若包含外部任务，workflow不保证外部任务的数据幂等性，按照要求重跑当前任务，例如任务包含数据加载任务，当最后一步数据插入已经发送到引擎端，则重试会出现重复数据；\n' +
+    '4. 重跑当前及下游，若下游的任务流除了当前任务流还有其他的依赖，则下游是否运行还依赖其他分支依赖的上游任务流的状态；\n' +
+    '5. 重跑影响的执行记录按照批次重跑，若下游任务流还在运行中，会等待运行结束后进行重跑。')
+  const text3 = ref('1. 按照当前任务最新的版本重跑；\n' +
+    '2. 任务是否可以重跑成功取决于任务条件是否达成，例如依赖的上游的状态, 是否存在依赖上次执行结果等条件;\n' +
+    '3. 若包含外部任务，workflow不保证外部任务的数据幂等性，按照要求重跑当前任务，例如任务包含数据加载任务，当最后一步数据插入已经发送到引擎端，则重试会出现重复数据。');
+  const text4 = ref('1. 重跑的是当前任务和依赖关系的最新版本，新增的依赖关系的下游执行相关的最新执行记录可能会被覆盖；\n' +
+    '2. 将会产生新的任务流执行记录;\n' +
+    '3. 若包含外部任务，workflow不保证外部任务的数据幂等性\n' +
+    '4. 重跑当前及下游，若下游的任务流除了当前任务流还有其他的依赖，则下游是否运行还依赖其他分支依赖的上游任务流的状态；\n' +
+    '5. 重跑中涉及的调度时间参数均是本次指定的换行记录的对应的时间，运行时间则为当前实际运行的时间。')
+  const show1 = ref(false);
+  const show2 = ref(false);
 
-  const [registerForm, {  updateSchema:updateSchema1,getFieldsValue }] = useForm({
+  const [registerForm1] = useForm({
     labelAlign: 'left',
     labelWidth: 100,
-    schemas: runAgainSchema,
+    schemas: runAgainSchema1,
     showActionButtonGroup: false,
     actionColOptions: {
       span: 23,
     },
   });
 
+const [registerForm2] = useForm({
+  labelAlign: 'left',
+  labelWidth: 100,
+  schemas: runAgainSchema2,
+  showActionButtonGroup: false,
+  actionColOptions: {
+    span: 23,
+  },
+});
+
+
   //初始化弹框
   const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
     setModalProps({ confirmLoading: false });
+    show1.value = data.show1
+    show2.value = data.show2
   });
 
   /**确定按钮*/
   async function handleSubmit() {
+    createConfirm({
+      iconType: 'info',
+      title: '跳转提醒',
+      content: '当前操作已成功，会产生新的任务流执行记录，是否跳转到任务流的运维首页？',
+      onOk() {
+        router.push({
+          path: '/taskScheduling/taskFlowMaintenance/periodicScheduling/index',
+          query: {}
+        })
+      },
+    });
     createMessage.success('重跑成功!');
     closeModal()
   }

src/views/taskScheduling/taskFlowMaintenance/periodicScheduling/SuccessfullySettingModal.vue

@@ -11,7 +11,7 @@
   import { BasicModal, useModalInner } from '@/components/Modal';
   import { BasicForm, useForm } from '@/components/Form';
   import { useMessage } from '@/hooks/web/useMessage';
-  import {mainFormSchema4} from "./taskFlowMaintenance.data";
+  import {mainFormSchema4} from "./periodicScheduling.data";
   defineOptions({ name: 'AccountModal' });
 
   const emit = defineEmits(['success', 'register']);

src/views/taskScheduling/taskFlowMaintenance/periodicScheduling/TaskListDrawer.vue

@@ -109,7 +109,7 @@
            />
         </div>
         <div style="margin-left: 130px">
-          <a-button type="primary" :disabled="getRowSelection().selectedRowKeys <= 0" @click="handleDeleteIds" style="margin-right: 10px;">取消</a-button>
+          <a-button type="primary" :disabled="getRowSelection().selectedRowKeys <= 0" @click="batchCancelExecuteButton" style="margin-right: 10px;">取消</a-button>
           <a-button type="primary" :disabled="getRowSelection().selectedRowKeys <= 0" @click="batchDownloadButton">批量下载日志</a-button>
         </div>
       </template>
@@ -125,9 +125,10 @@
                   icon:'ix:log',
                   onClick: lookLogButton.bind(null, record),
                 },
-                {
-                  icon:'codicon:debug-start',
-                  onClick: lookLogButton.bind(null, record),
+                 {
+                  //重跑
+                  icon:'material-symbols-light:not-started-outline',
+                  onClick: runAgainButton.bind(null, record),
                 },
               ]"
           />
@@ -136,6 +137,8 @@
     </BasicTable>
 <!--    查看日志 弹窗-->
     <LookLogModal @register="registerLookLogModal" @success="handleSuccess" />
+<!--    重跑 弹窗-->
+    <RunAgainModal @register="registerRunAgainModal" @success="handleSuccess" />
   </BasicDrawer>
 </template>
 <script lang="ts" setup>
@@ -143,8 +146,8 @@
   import { ref, computed, unref } from 'vue';
   import { BasicForm, useForm } from '@/components/Form';
   import { Card, Tabs, TabPane, Col, Row,RangePicker,RadioGroup,RadioButton,Select } from 'ant-design-vue';
-  import {tableListColumns} from './taskFlowMaintenance.data';
-  import {taskListData} from './taskFlowMaintenanceData';
+  import {tableListColumns} from './periodicScheduling.data';
+  import {taskListData} from './periodicSchedulingData';
   import { BasicDrawer, useDrawerInner } from '@/components/Drawer';
   import { BasicTree, TreeItem } from '@/components/Tree';
   import {useMessage} from "@/hooks/web/useMessage";
@@ -154,12 +157,13 @@
   import LookLogModal from './LookLogModal.vue'
   import {exportRoleList} from "@/api/system/role/role";
   import {downloadByData} from "@/utils/file/download";
-
+  import RunAgainModal from './RunAgainModal.vue'
+  const [registerRunAgainModal, { openModal: openRunAgainModal }] = useModal();
   const [registerLookLogModal, { openModal: openLookLogModal }] = useModal();
   const [registerLookAllDataModal, { openModal: openLookAllDataModal }] = useModal();
   const [registerVersionModal, { openModal: openVersionModal }] = useModal();
   const emit = defineEmits(['success', 'register']);
-  const { createMessage } = useMessage();
+  const { createMessage, createConfirm } = useMessage();
   const isUpdate = ref(true);
   const roleId = ref('');
   const getTitle = computed(() => ('任务列表'));
@@ -214,6 +218,13 @@
 
   });
 
+  /**重跑 按钮*/
+  function runAgainButton(record){
+    openRunAgainModal(true,{
+      show1:false,
+      show2:true
+    })
+  }
 
 
   /**查看版本变更信息*/
@@ -226,7 +237,6 @@
     openLookLogModal(true,{})
   }
 
-
   /**批量下载 按钮*/
   async function batchDownloadButton() {
     const params = Object.assign({}, {});
@@ -234,6 +244,17 @@
     downloadByData(data, '全部日志' + '.xlsx');
   }
 
+  /**批量取消执行 按钮*/
+  function batchCancelExecuteButton(record){
+    createConfirm({
+      iconType: 'warning',
+      title: '取消执行',
+      content: '确认取消选中数据吗？',
+      onOk() {
+        createMessage.success('取消成功!');
+      },
+    });
+  }
 
   function handleSubmit() {
 

src/views/taskScheduling/taskFlowMaintenance/periodicScheduling/executionDetails.vue

@@ -17,15 +17,14 @@
           </BasicForm>
         </div>
       </div>
-      <Divider/>
       <div class="contentClass" style="display: flex;margin-top: 20px">
         <div>
           <img src="../../../../assets/images/taskFlowMaintenance.png" style="width: 1455px;" />
         </div>
         <div>
           <RadioGroup v-model:value="showType1" button-style="solid" size="small">
-            <RadioButton value="table" @click="taskListButton"><UnorderedListOutlined style="font-size: 20px"/></RadioButton>
-            <RadioButton value="chart" @click="relationshipButton"><AppstoreOutlined style="font-size: 20px"/></RadioButton>
+            <RadioButton value="table" @click="taskListButton"><UnorderedListOutlined/></RadioButton>
+            <RadioButton value="chart" @click="relationshipButton"><AppstoreOutlined/></RadioButton>
           </RadioGroup>
         </div>
       </div>
@@ -48,8 +47,8 @@
  import { useGo } from '@/hooks/web/usePage';
  import { useRoute } from 'vue-router';
  import { router } from '@/router';
- import {columns, topFormSchema2, topFormSchema1, mainFormSchema3, detailFormSchema} from './taskFlowMaintenance.data';
- import { tableData,TreeData,treeData2 } from './taskFlowMaintenanceData'
+ import {columns, topFormSchema2, topFormSchema1, mainFormSchema3, detailFormSchema} from './periodicScheduling.data';
+ import { tableData,TreeData,treeData2 } from './periodicSchedulingData'
  import { BasicForm, useForm } from '@/components/Form';
  import { useECharts } from '@/hooks/web/useECharts';
  import LookLogModal from './LookLogModal.vue'

src/views/taskScheduling/taskFlowMaintenance/periodicScheduling/taskFlowMaintenance.data.ts → src/views/taskScheduling/taskFlowMaintenance/periodicScheduling/periodicScheduling.data.ts

@@ -9,7 +9,7 @@ import {DescItem} from "@/components/Description";
 import {uploadApi} from "@/api/sys/upload"; // 引入开关组件
 type CheckedType = boolean | string | number;
 
-/**首页-table列表*/
+/**首页-table列表1*/
 export const columns: BasicColumn[] = [
   {
     title: '调度时间',
@@ -34,7 +34,8 @@ export const columns: BasicColumn[] = [
   {
     title: '执行条件',
     dataIndex: 'executionCondition',
-    width: 120
+    width: 120,
+    slots: {customRender: 'executionCondition'}
   },
   {
     title: '执行模式',
@@ -57,6 +58,24 @@ export const columns: BasicColumn[] = [
     width: 120
   }
 ];
+/**首页-table列表2*/
+export const columns2: BasicColumn[] = [
+  {
+    title: '条件类型',
+    dataIndex: 'conditionType',
+    width: 120
+  },
+  {
+    title: '详情',
+    dataIndex: 'detail',
+    width: 120
+  },
+  {
+    title: '是否满足',
+    dataIndex: 'satisfy',
+    width: 120
+  },
+];
 /**首页-搜索表单*/
 export const searchFormSchema: FormSchema[] = [
   {
@@ -215,7 +234,7 @@ export const mainFormSchema4: FormSchema[] = [
   },
 ];
 /**重跑 表单*/
-export const runAgainSchema: FormSchema[] = [
+export const runAgainSchema1: FormSchema[] = [
   {
     field: 'scopeAction',
     label: '作用范围',
@@ -250,6 +269,28 @@ export const runAgainSchema: FormSchema[] = [
     slot:'slot'
   }
 ];
+/**重跑 表单*/
+export const runAgainSchema2: FormSchema[] = [
+  {
+    field: 'scopeAction',
+    label: '作用范围',
+    component: 'RadioGroup',
+    defaultValue: '当前任务',
+    componentProps: {
+      options: [
+        { label: '当前任务', value: '当前任务' },
+        { label: '当前及其下游', value: '当前及其下游' },
+      ],
+    },
+    colProps: { lg: 24, md: 24 },
+  },
+  {
+    field:'slot',
+    label:'',
+    component:'',
+    slot:'slot'
+  }
+];
 /**详情页-任务列表*/
 export const tableListColumns: BasicColumn[] = [
   {

src/views/taskScheduling/taskFlowMaintenance/periodicScheduling/taskFlowMaintenanceData.ts → src/views/taskScheduling/taskFlowMaintenance/periodicScheduling/periodicSchedulingData.ts

@@ -37,7 +37,7 @@ export const TreeData: any[] = [
   },
 ];
 
-/**主页面列表 数据*/
+/**主页面列表 数据1*/
 export const tableData: any[] =[
   {
     id:1,
@@ -148,6 +148,39 @@ export const tableData: any[] =[
     executionId:'49027'
   },
 ]
+/**主页面列表 数据2*/
+export const tableData2: any[] =[
+  {
+    id:1,
+    conditionType:'触发条件',
+    detail:'周期调度到达',
+    satisfy:'满足',
+  },
+  {
+    id:2,
+    conditionType:'执行资源',
+    detail:'已分配scheduler',
+    satisfy:'满足',
+  },
+  {
+    id:3,
+    conditionType:'上游依赖',
+    detail:'任务流:/共享工作区/依赖关系/有周\n' +
+      '期/寻找依赖超时测试-上游任务流\n' +
+      '执行记录ID：51200\n' +
+      '调度时间:2024-01-30 11:36:00.000',
+    satisfy:'等待',
+  },
+  {
+    id:4,
+    conditionType:'上游依赖',
+    detail:'任务流:/共享工作区/依赖关系/有周\n' +
+      '期/寻找依赖超时测试-上游任务流\n' +
+      '执行记录ID：51221\n' +
+      '调度时间:2024-01-31 12:15:00.000',
+    satisfy:'等待',
+  },
+]
 /**主页面 左侧List*/
 export const treeData2:any[] = [
   {

src/views/taskScheduling/taskFlowMaintenance/supplyNumber/index.vue

 <template>
   <div class="center">
     <div class="center1">
-      <div class="center1-1">
-        <Icon icon="material-symbols:sync" :size="35" :color="'rgb(121, 74, 235)'"/>
-        <div class="center1-1-1">补数记录</div>
-        <div class="selectCss">
-          <BasicForm @register="registerForm"/>
-        </div>
-      </div>
-      <div>
-        <a-button type="primary" style="margin-right: 10px" @click="reloadButton">手动刷新</a-button>
-        <a-button type="primary" style="margin-right: 10px" @click="cancelBatchButton">取消</a-button>
-        <a-button type="primary" style="margin-right: 10px" @click="deleteBatchButton">删除</a-button>
-        <a-button type="primary" style="margin-right: 10px" @click="addSupplyNumberButton">新增补数</a-button>
-      </div>
-    </div>
-    <div class="center2">
-      <div class="center2-1">
-        <div style="margin-left: 10px">
-          <BasicForm @register="registerForm2"/>
-        </div>
-      </div>
       <BasicTable @register="registerTable">
+        <template #headerTop="{ column, record }">
+          <div class="center2">
+            <div class="center2-1">
+              <Icon icon="material-symbols:sync" :size="35" :color="'rgb(121, 74, 235)'"/>
+              <div class="center2-1-1">补数记录</div>
+              <div class="selectCss">
+                <BasicForm @register="registerForm"/>
+              </div>
+            </div>
+            <div>
+              <a-button type="primary" style="margin-right: 10px" @click="reloadButton">手动刷新</a-button>
+              <a-button type="primary" :disabled="getRowSelection().selectedRowKeys <= 0" style="margin-right: 10px" @click="cancelBatchButton">取消</a-button>
+              <a-button type="primary" style="margin-right: 10px" @click="deleteBatchButton">删除</a-button>
+              <a-button type="primary" style="margin-right: 10px" @click="addSupplyNumberButton">新增补数</a-button>
+            </div>
+          </div>
+          <div class="center1-1">
+            <div style="margin-left: 10px">
+              <BasicForm @register="registerForm2"/>
+            </div>
+          </div>
+        </template>
         <template #bodyCell="{ column, record }">
           <template v-if="column.key === 'action'">
            <TableAction
@@ -91,7 +93,7 @@
 
  const [registerSupplyNumberSettingModal, { openModal: openSupplyNumberSettingModal }] = useModal();
  const [registerTable, { reload,getForm,getRowSelection }] = useTable({
-    title: '',
+    title: ' ',
     api: async (params) => {
       const response = {
         pageNu: "1",
@@ -110,6 +112,7 @@
     useSearchForm: false,
     showTableSetting: false,
     showIndexColumn:false,
+    striped: false,
     bordered: true,
     actionColumn: {
       width: 150,
@@ -149,7 +152,7 @@
     })
   }
 
-  /***/
+  /**跳转 */
  function showDetails(record){
    router.push({
      path: '/taskScheduling/taskFlowMaintenance/periodicScheduling/index',
@@ -159,6 +162,12 @@
    })
  }
 
+
+ /**手动刷新  按钮*/
+ function reloadButton(record){
+   createMessage.success('刷新成功!')
+ }
+
  /**取消  按钮*/
  function cancelButton(record){
     createMessage.success('取消成功!')
@@ -248,32 +257,29 @@
 .center{
   width: 100%;
   height: 100%;
-  background-color: white;
   .center1{
     width: 100%;
-    height: 10%;
+    .center1-1{
+      margin-top: 10px;
+      height: 35px;
+    }
+  }
+  .center2{
+    width: 100%;
     display: flex;
     justify-content: space-between;
     align-items: center;
-    .center1-1{
+    .center2-1{
       display:flex;
       height: 30px;
       margin-left: 20px;
-      .center1-1-1{
+      .center2-1-1{
         display: flex;
         align-items: center;
         font-weight: bold
       }
     }
   }
-  .center2{
-    width: 100%;
-    height:90%;
-    .center2-1{
-      display: flex;
-      justify-content: space-between
-    }
-  }
 }
 
 </style>