任务流依赖关系页面

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

-<template>
+<template xmlns="">
   <BasicDrawer
     v-bind="$attrs"
     @register="registerDrawer"
     showFooter
     :title="getTitle"
-    width="50%"
+    width="45%"
     @ok="handleSubmit"
   >
-    <div>
+    <template #title>
+      <div style="display: flex;justify-content: space-between">
+        <span>{{getTitle}}</span>
+        <a-button type="primary" @click="reloadButton">刷新</a-button>
+      </div>
+    </template>
     <div>
       <Tabs defaultActiveKey="上游" @change="handleChangeTab">
+        <template #rightExtra>
+          <span>
+            <a-input-search
+              v-model:value="value"
+              placeholder="输入关键字搜索"
+              style="width: 200px"
+              @search="onSearch"
+            />
+          </span>
+        </template>
         <TabPane tab="上游" key="上游">
-
+          <BasicTree
+            toolbar
+            search
+            title=""
+            defaultExpandAll="true"
+            :treeData="relationshipTreeData1"
+            v-model:checkedKeys="myCheckedKeys"
+            @select="handleSelect"
+            :beforeRightClick="getRightMenuList"
+            :actionList="actionList"
+          >
+            <template #title="{ title, key, desc,icons,color,uuid }">
+              <div class="treeClass1" v-if="title === '任务流' || title === '任务'">
+                <div class="treeClass1-1">
+                  <span class="treeClass1-1-1">{{ title }}</span>
+                </div>
+              </div>
+              <div  v-else class="treeClass2">
+                <div class="treeClass2-1">
+                  <div class="treeClass2-1-1">
+                    <Icon :icon="icons" :style="{color:color}"></Icon>
+                  </div>
+                  <div class="treeClass2-1-2">
+                    <span style="font-weight: bold">{{ title }}</span><br>
+                    <span>{{desc}}</span>
+                  </div>
+                </div>
+                <div>
+                  资源UUID：{{uuid}}
+                </div>
+                <BasicTable @register="registerTable1" v-if="title.includes('寻找依赖超时测试')">
+                  <template #bodyCell="{ column, record }">
+                    <template v-if="column.key === 'action'">
+                      <TableAction
+                        :actions="[
+                          {
+                            //退出
+                            icon:'material-symbols:logout',
+                            onClick: logoutButton.bind(null, record),
+                          },
+                        ]"
+                      />
+                    </template>
+                  </template>
+                  <template #runState="{ text, record }">
+                    <span><Icon icon="ix:success-filled" style="color: rgb(30, 155, 96)"/>{{text}}</span>
+                  </template>
+                  <template #timeInfo="{ text, record }">
+                    <span>
+                      {{record.timeInfo1}}<br>
+                      {{record.timeInfo2}}
+                    </span>
+                  </template>
+                </BasicTable>
+                <BasicTable @register="registerTable2" v-if="title.includes('new')">
+                  <template #bodyCell="{ column, record }">
+                    <template v-if="column.key === 'action'">
+                      <TableAction
+                        :actions="[
+                          {
+                            //退出
+                            icon:'material-symbols:logout',
+                            onClick: logoutButton.bind(null, record),
+                          },
+                        ]"
+                      />
+                    </template>
+                  </template>
+                  <template #runState="{ text, record }">
+                    <span><Icon icon="ix:success-filled" style="color: rgb(30, 155, 96)"/>{{text}}</span>
+                  </template>
+                  <template #timeInfo="{ text, record }">
+                    <span>
+                      {{record.timeInfo1}}<br>
+                      {{record.timeInfo2}}
+                    </span>
+                  </template>
+                </BasicTable>
+              </div>
+            </template>
+          </BasicTree>
         </TabPane>
-          <TabPane tab="下游" key="下游"></TabPane>
-        </Tabs>
+        <TabPane tab="下游" key="下游">
+          <BasicTree
+            toolbar
+            search
+            title=""
+            defaultExpandAll="true"
+            :treeData="relationshipTreeData3"
+            v-model:checkedKeys="myCheckedKeys"
+            @select="handleSelect"
+            :beforeRightClick="getRightMenuList"
+            :actionList="actionList"
+          >
+            <template #title="{ title, key, desc,icons,color,uuid }">
+              <div class="treeClass1" v-if="title === '任务流' || title === '任务'">
+                <div class="treeClass1-1">
+                  <span class="treeClass1-1-1">{{ title }}</span>
                 </div>
               </div>
-
+              <div  v-else class="treeClass2">
+                <div class="treeClass2-1">
+                  <div class="treeClass2-1-1">
+                    <Icon :icon="icons" :style="{color:color}"></Icon>
+                  </div>
+                  <div class="treeClass2-1-2">
+                    <span style="font-weight: bold">{{ title }}</span><br>
+                    <span>{{desc}}</span>
+                  </div>
+                </div>
+                <div>
+                  资源UUID：{{uuid}}
+                </div>
+                <BasicTable @register="registerTable3" v-if="title.includes('寻找依赖超时测试')">
+                  <template #bodyCell="{ column, record }">
+                    <template v-if="column.key === 'action'">
+                      <TableAction
+                        :actions="[
+                          {
+                            //退出
+                            icon:'material-symbols:logout',
+                            onClick: logoutButton.bind(null, record),
+                          },
+                        ]"
+                      />
+                    </template>
+                  </template>
+                  <template #runState="{ text, record }">
+                    <span><Icon icon="ix:success-filled" style="color: rgb(30, 155, 96)"/>{{text}}</span>
+                  </template>
+                  <template #timeInfo="{ text, record }">
+                    <span>
+                      {{record.timeInfo1}}<br>
+                      {{record.timeInfo2}}
+                    </span>
+                  </template>
+                </BasicTable>
+              </div>
+            </template>
+          </BasicTree>
+        </TabPane>
+      </Tabs>
+    </div>
   </BasicDrawer>
 </template>
 <script lang="ts" setup>
@@ -25,15 +176,23 @@
   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 './periodicScheduling.data';
-  import {taskListData} from './periodicSchedulingData';
+  import {columns, dependencyRelationshipColumns1, dependencyRelationshipColumns2} from './periodicScheduling.data';
+  import {
+    dependencyRelationshipData1,
+    dependencyRelationshipData2,
+    dependencyRelationshipData3,
+    relationshipTreeData1,
+    relationshipTreeData2,
+    relationshipTreeData3,
+    tableData,
+    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 './periodicSchedulingData'
 
   const [registerLookLogModal, { openModal: openLookLogModal }] = useModal();
   const [registerLookAllDataModal, { openModal: openLookAllDataModal }] = useModal();
@@ -45,8 +204,87 @@
   const getTitle = computed(() => ('任务流依赖关系'));
   const treeData = ref<TreeItem[]>([]);
 
-
-
+  const [registerTable1] = useTable({
+    title: '',
+    api: async (params) => {
+      const response = {
+        pageNu: "1",
+        pageSize: "10",
+        pages: "1",
+        total: dependencyRelationshipData1.length,
+        code:'',
+        message:'',
+        data: [],
+      };
+      return { ...response,data: dependencyRelationshipData1 };
+    },
+    columns:dependencyRelationshipColumns1,
+    useSearchForm: false,
+    showTableSetting: false,
+    showIndexColumn:false,
+    bordered: true,
+    pagination:false,
+    scroll: { y: 300 },
+    actionColumn: {
+      width: 50,
+      title: '操作',
+      dataIndex: 'action',
+    },
+  });
+  const [registerTable2] = useTable({
+    title: '',
+    api: async (params) => {
+      const response = {
+        pageNu: "1",
+        pageSize: "10",
+        pages: "1",
+        total: dependencyRelationshipData2.length,
+        code:'',
+        message:'',
+        data: [],
+      };
+      return { ...response,data: dependencyRelationshipData2 };
+    },
+    columns:dependencyRelationshipColumns2,
+    useSearchForm: false,
+    showTableSetting: false,
+    showIndexColumn:false,
+    bordered: true,
+    pagination:false,
+    scroll: { y: 300 },
+    actionColumn: {
+      width: 50,
+      title: '操作',
+      dataIndex: 'action',
+    },
+  });
+  const [registerTable3] = useTable({
+    title: '',
+    api: async (params) => {
+      const response = {
+        pageNu: "1",
+        pageSize: "10",
+        pages: "1",
+        total: dependencyRelationshipData3.length,
+        code:'',
+        message:'',
+        data: [],
+      };
+      return { ...response,data: dependencyRelationshipData3 };
+    },
+    columns:dependencyRelationshipColumns1,
+    useSearchForm: false,
+    showTableSetting: false,
+    showIndexColumn:false,
+    bordered: true,
+    pagination:false,
+    scroll: { y: 300 },
+    actionColumn: {
+      width: 50,
+      title: '操作',
+      dataIndex: 'action',
+    },
+  });
   const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
     setDrawerProps({ confirmLoading: false,showOkBtn:false,showCancelBtn:false});
 
@@ -59,10 +297,42 @@
   }
 
 
+  /**刷新 按钮*/
+  function reloadButton() {
+    createMessage.success('刷新成功!')
+  }
+
+  /**退出 按钮*/
+  function logoutButton() {
+
+  }
+
   function handleSubmit() {
 
   }
 </script>
 <style lang="less" scoped>
-
+.treeClass1{
+  display: flex;
+  .treeClass1-1{
+    margin-left: 10px;
+    .treeClass1-1-1{
+      font-weight: bold
+    }
+  }
+}
+.treeClass2{
+  border:1px solid rgb(211, 217, 235);
+  border-radius: 5px;
+  .treeClass2-1{
+    display: flex;
+    .treeClass2-1-1{
+      display: flex;
+      align-items: center;
+    }
+    .treeClass2-1-2{
+      margin-left: 10px;
+    }
+  }
+}
 </style>

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

@@ -388,3 +388,48 @@ export const detailFormSchema: FormSchema[] = [
     slot: 'switch'
   },
 ];
+/**详情页-依赖列表1*/
+export const dependencyRelationshipColumns1: BasicColumn[] = [
+  {
+    title: '执行ID',
+    dataIndex: 'executeId',
+    width: 100
+  },
+  {
+    title: '时间信息',
+    dataIndex: 'timeInfo',
+    width: 200,
+    slots: { customRender: 'timeInfo' },
+  },
+  {
+    title: '运行状态',
+    dataIndex: 'runState',
+    width: 100,
+    slots: { customRender: 'runState' },
+  },
+  {
+    title: '执行模式',
+    dataIndex: 'executeMode',
+    width: 100
+  },
+];
+/**详情页-依赖列表2*/
+export const dependencyRelationshipColumns2: BasicColumn[] = [
+  {
+    title: '执行ID',
+    dataIndex: 'executeId',
+    width: 100
+  },
+  {
+    title: '时间信息',
+    dataIndex: 'timeInfo',
+    width: 200,
+    slots: { customRender: 'timeInfo' },
+  },
+  {
+    title: '运行状态',
+    dataIndex: 'runState',
+    width: 100,
+    slots: { customRender: 'runState' },
+  },
+];

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

@@ -6,7 +6,8 @@ import { Switch } from 'ant-design-vue';
 import {useMessage} from "@/hooks/web/useMessage";
 import {changeFlagApi} from "@/api/system/user/user";
 import {relatedQualityColumns} from "@/views/dataStandards/basicStandards/basicStandards.data";
-import {GrowCardItem} from "@/views/dashboard/analysis/data"; // 引入开关组件
+import {GrowCardItem} from "@/views/dashboard/analysis/data";
+import {dependencyRelationshipColumns1} from "@/views/taskScheduling/taskFlowMaintenance/periodicScheduling/periodicScheduling.data"; // 引入开关组件
 type CheckedType = boolean | string | number;
 
 /**主页面树/列表 数据*/
@@ -323,3 +324,146 @@ export const detailTreeData:any[] = [
     ]
   },
 ]
+/**详情页 依赖关系树1*/
+export const relationshipTreeData1:any[] = [
+  {
+    key: 1,
+    desc:'',
+    title: '任务流',
+    icons: '',
+    color: '',
+    children:[
+      {
+        key: 101,
+        title: '寻找依赖超时测试-上游任务流',
+        desc:'/共享工作区/依赖关系/寻找依赖超时测试-上游任务流',
+        icons: 'tdesign:map-connection',
+        uuid:'54bdd7525b3f41738d4c67cc6c4622b7',
+        color: 'rgb(37, 94, 227)',
+      },
+    ]
+  },
+  {
+    key: 2,
+    title: '任务',
+    desc:'',
+    icons: '',
+    color: '',
+    children:[
+      {
+        key: 101,
+        title: 'new task',
+        desc:'/共享工作区/依赖关系/new task',
+        icons: 'tdesign:map-connection',
+        uuid:'54bdd7525b4i34h38d4c67sd7f847d7fd',
+        color: 'rgb(37, 94, 227)',
+      },
+    ]
+  },
+]
+/**详情页 依赖关系树2*/
+export const relationshipTreeData2:any[] = [
+  {
+    key: 1,
+    desc:'',
+    title: '任务流',
+    icons: '',
+    color: '',
+    children:[
+      {
+        key: 101,
+        title: '寻找依赖超时测试-上游任务流',
+        desc:'/共享工作区/依赖关系/寻找依赖超时测试-上游任务流',
+        icons: 'tdesign:map-connection',
+        uuid:'54bdd7525b3f41738d4c67cc6c4622b7',
+        color: 'rgb(37, 94, 227)',
+      },
+    ]
+  },
+  {
+    key: 2,
+    title: '任务',
+    desc:'',
+    icons: '',
+    color: '',
+    children:[
+      {
+        key: 101,
+        title: 'new task',
+        desc:'/共享工作区/依赖关系/new task',
+        icons: 'tdesign:map-connection',
+        uuid:'54bdd7525b4i34h38d4c67sd7f847d7fd',
+        color: 'rgb(37, 94, 227)',
+      },
+    ]
+  },
+]
+/**详情页 依赖关系树3*/
+export const relationshipTreeData3:any[] = [
+  {
+    key: 1,
+    desc:'',
+    title: '任务流',
+    icons: '',
+    color: '',
+    children:[
+      {
+        key: 101,
+        title: '寻找依赖超时测试-下游任务流',
+        desc:'/共享工作区/依赖关系/寻找依赖超时测试-下游任务流',
+        icons: 'tdesign:map-connection',
+        uuid:'54bdd7525b3f41738d4c67cc6c4622b7',
+        color: 'rgb(37, 94, 227)',
+      },
+    ]
+  },
+  // {
+  //   key: 2,
+  //   title: '任务',
+  //   desc:'',
+  //   icons: '',
+  //   color: '',
+  //   children:[
+  //     {
+  //       key: 101,
+  //       title: 'new task',
+  //       desc:'/共享工作区/依赖关系/new task',
+  //       icons: 'tdesign:map-connection',
+  //       uuid:'54bdd7525b4i34h38d4c67sd7f847d7fd',
+  //       color: 'rgb(37, 94, 227)',
+  //     },
+  //   ]
+  // },
+]
+/**详情页-关联关系列表数据1*/
+export const dependencyRelationshipData1:any[] = [
+  {
+    businessId:'1',
+    executeId:'51383',
+    timeInfo1:'调度时间:2024-01-30 14:39:00',
+    timeInfo2:'执行时间:2024-01-30 14:39:00',
+    runState:'成功',
+    executeMode:'系统调度'
+  },
+]
+/**详情页-关联关系列表数据2*/
+export const dependencyRelationshipData2:any[] = [
+  {
+    businessId:'1',
+    executeId:'395157',
+    timeInfo1:'调度时间:2024-01-30 14:39:00',
+    timeInfo2:'执行时间:2024-01-30 14:40:00',
+    runState:'成功',
+  },
+]
+/**详情页-关联关系列表数据3*/
+export const dependencyRelationshipData3:any[] = [
+  {
+    businessId:'1',
+    executeId:'837437',
+    timeInfo1:'调度时间:2024-01-30 14:39:00',
+    timeInfo2:'执行时间:2024-01-30 14:40:00',
+    runState:'成功',
+    executeMode:'系统调度'
+  },
+]