任务流设置

src/views/dataSharingAndExchange/ApiMonitor/ApiMonitorData.ts

@@ -9,213 +9,111 @@ type CheckedType = boolean | string | number;
 
 export const TreeData: any[] = [
   {
-    delFlag: '0',
-    flag: '1',
-    businessId: 100,
-    institutionName: '机构管理',
-    anotherName: '机构管理',
-    parentId: 0,
-    code: 'DataGovernanceDep_product1',
-    ancestors: '0',
-    orderNum: 0,
+    key: '0',
+    title: '馈线反馈',
     children: [],
-    selectType: null,
-    icon: 'ion:settings-outline',
+    icon: 'ant-design:folder-outlined',
   },
   {
-    delFlag: '0',
-    flag: '1',
-    businessId: 101,
-    institutionName: '数据平台治理部',
-    anotherName: '数据平台治理部',
-    parentId: 100,
-    code: 'DataGovernanceDep_product2',
-    ancestors: '0,100',
-    orderNum: 1,
-    children: [],
-    selectType: null,
-    icon: 'ion:settings-outline',
-  },
+    key: '1',
+    title: '市场营销',
+    icon: 'ant-design:folder-outlined',
+    children: [
       {
-    delFlag: '0',
-    flag: '1',
-    businessId: 107,
-    institutionName: '数据资源管理部',
-    anotherName: '数据资源管理部',
-    parentId: 100,
-    code: 'DataGovernanceDep_product3',
-    ancestors: '0,100',
-    orderNum: 2,
-    children: [],
-    selectType: null,
-    icon: 'ion:settings-outline',
+        key: '1-0',
+        title: '供电单位用电量',
+        icon: 'ant-design:api-outlined',
       },
       {
-    delFlag: '0',
-    flag: '1',
-    businessId: 102,
-    institutionName: '研发部门',
-    anotherName: '研发部门',
-    parentId: 101,
-    code: 'DataGovernanceDep_product4',
-    ancestors: '0,100,101',
-    orderNum: 1,
-    children: [],
-    selectType: null,
-    icon: 'ion:settings-outline',
+        key: '1-1',
+        title: '电费回收率',
+        icon: 'ant-design:api-outlined',
       },
       {
-    delFlag: '0',
-    flag: '1',
-    businessId: 103,
-    institutionName: '市场部门',
-    anotherName: '市场部门',
-    parentId: 101,
-    code: 'DataGovernanceDep_product5',
-    ancestors: '0,100,101',
-    orderNum: 2,
-    children: [],
-    selectType: null,
-    icon: 'ion:settings-outline',
+        key: '1-2',
+        title: '中压馈线电流',
+        icon: 'ant-design:api-outlined',
       },
       {
-    delFlag: '0',
-    flag: '1',
-    businessId: 104,
-    institutionName: '测试部门',
-    anotherName: '测试部门',
-    parentId: 101,
-    code: 'DataGovernanceDep_product6',
-    ancestors: '0,100,101',
-    orderNum: 3,
-    children: [],
-    selectType: null,
-    icon: 'ion:settings-outline',
+        key: '1-3',
+        title: '中压馈线指标',
+        icon: 'ant-design:api-outlined',
       },
       {
-    delFlag: '0',
-    flag: '1',
-    businessId: 105,
-    institutionName: '财务部门',
-    anotherName: '财务部门',
-    parentId: 101,
-    code: 'DataGovernanceDep_product7',
-    ancestors: '0,100,101',
-    orderNum: 4,
-    children: [],
-    selectType: null,
-    icon: 'ion:settings-outline',
+        key: '1-4',
+        title: '馈线最大电流',
+        icon: 'ant-design:api-outlined',
       },
-  {
-    delFlag: '0',
-    flag: '1',
-    businessId: 106,
-    institutionName: '运维部门',
-    anotherName: '运维部门',
-    parentId: 101,
-    code: 'DataGovernanceDep_product8',
-    ancestors: '0,100,101',
-    orderNum: 5,
-    children: [],
-    selectType: null,
-    icon: 'ion:settings-outline',
-  },
-  {
-    delFlag: '0',
-    flag: '1',
-    businessId: 202,
-    institutionName: '数据部门',
-    anotherName: '数据部门',
-    parentId: 107,
-    code: 'DataGovernanceDep_product9',
-    ancestors: '0,100,107',
-    orderNum: 1,
-    children: [],
-    selectType: null,
-    icon: 'ion:settings-outline',
-  },
-  {
-    delFlag: '0',
-    flag: '0',
-    businessId: 203,
-    institutionName: '检查部门',
-    anotherName: '检查部门',
-    parentId: 107,
-    code: 'DataGovernanceDep_product10',
-    ancestors: '0,100,107',
-    orderNum: 2,
-    children: [],
-    selectType: null,
-    icon: 'ion:settings-outline',
+    ],
   },
 ];
 export const TableData: any[] = [
   {
-    gateway: 'gw-001',
-    executor: 'exec-001',
+    gateway: '35.84.167.92',
+    executor: '218.99.112.56',
     caller: 'user-001',
     startTime: '2024-11-30 13:05:05',
     consume: '1s',
   },
   {
-    gateway: 'gw-002',
-    executor: 'exec-002',
+    gateway: '120.88.200.123',
+    executor: '51.198.72.14',
     caller: 'user-002',
     startTime: '2024-11-30 13:10:08',
     consume: '2s',
   },
   {
-    gateway: 'gw-003',
-    executor: 'exec-003',
+    gateway: '19.75.138.255',
+    executor: '102.47.16.39',
     caller: 'user-003',
     startTime: '2024-11-30 13:20:09',
     consume: '3s',
   },
   {
-    gateway: 'gw-004',
-    executor: 'exec-004',
+    gateway: '234.156.17.98',
+    executor: '212.71.48.99',
     caller: 'user-004',
     startTime: '2024-11-30 13:25:10',
     consume: '4s',
   },
   {
-    gateway: 'gw-005',
-    executor: 'exec-005',
+    gateway: '102.194.123.75',
+    executor: '13.62.47.129',
     caller: 'user-005',
     startTime: '2024-11-30 13:30:11',
     consume: '5s',
   },
   {
-    gateway: 'gw-006',
-    executor: 'exec-006',
+    gateway: '34.86.51.231',
+    executor: '176.35.22.176',
     caller: 'user-006',
     startTime: '2024-11-30 13:35:12',
     consume: '6s',
   },
   {
-    gateway: 'gw-007',
-    executor: 'exec-007',
+    gateway: '84.29.59.110',
+    executor: '89.203.125.13',
     caller: 'user-007',
     startTime: '2024-11-30 13:40:13',
     consume: '7s',
   },
   {
-    gateway: 'gw-008',
-    executor: 'exec-008',
+    gateway: '46.174.192.222',
+    executor: '12.195.44.58',
     caller: 'user-008',
     startTime: '2024-11-30 13:45:14',
     consume: '8s',
   },
   {
-    gateway: 'gw-009',
-    executor: 'exec-009',
+    gateway: '219.31.51.27',
+    executor: '128.114.242.53',
     caller: 'user-009',
     startTime: '2024-11-30 13:50:15',
     consume: '9s',
   },
   {
-    gateway: 'gw-010',
-    executor: 'exec-010',
+    gateway: '233.164.81.62',
+    executor: '19.78.211.9',
     caller: 'user-010',
     startTime: '2024-11-30 13:55:16',
     consume: '10s',

src/views/dataSharingAndExchange/ApiMonitor/ApiMonitorTree.vue

@@ -8,78 +8,20 @@
       treeWrapperClassName="h-[calc(100%-35px)] overflow-auto"
       :clickRowToExpand="false"
       :defaultExpandAll="true"
-      :treeData="treeData"
-      :fieldNames="{ key: 'businessId', title: 'institutionName' }"
+      :treeData="TreeData"
       @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 { TreeData } from "@/views/system/institution/institutionData";
-import {Modal} from "ant-design-vue";
-import { useMessage } from '@/hooks/web/useMessage';
-import {useModal} from "@/components/Modal";
-defineOptions({ name: 'DeptTree' });
-
-const emit = defineEmits(['select']);
-const { createMessage } = useMessage();
-const treeData = ref<TreeItem[]>([]);
-const treeRef = ref<Nullable<TreeActionType>>(null);
-const [registerModal, { openModal }] = useModal();
-const [registerMoveTreeModel, { openModal:openMoveTreeModel }] = useModal();
-function getTree() {
-  const tree = unref(treeRef);
-  if (!tree) {
-    throw new Error('tree is null!');
-  }
-  return tree;
-}
-
-async function fetch() {
-    const data = TreeData
-    treeData.value = handleTree(data, 'businessId',undefined,undefined,undefined)
-  await nextTick(() => {
-    getTree().expandAll(true)
-  })
-  }
-
-function handleTree(data, id, parentId, children, rootId) {
-  id = id || 'id'
-  parentId = parentId || 'parentId'
-  children = children || 'children'
-  rootId = rootId || Math.min.apply(Math, data.map(item => { return item[parentId] })) || 0
-  // 对源数据深度克隆
-  const cloneData = JSON.parse(JSON.stringify(data))
-  // 循环所有项
-  const treeData = cloneData.filter(father => {
-    const branchArr = cloneData.filter(child => {
-      // 返回每一项的子级数组
-      return father[id] === child[parentId]
-    })
-    branchArr.length > 0 ? father.children = branchArr : ''
-    // 返回第一层
-    return father[parentId] === rootId
-  })
-  return treeData !== '' ? treeData : data
-}
-
-function handleSelect(keys) {
+  import { ref } from 'vue';
+  import { BasicTree, TreeActionType } from '@/components/Tree';
+  import { Nullable } from '@vben/types';
+  import { TreeData } from './ApiMonitorData';
+
+  const emit = defineEmits(['select']);
+  const treeRef = ref<Nullable<TreeActionType>>(null);
+  function handleSelect(keys) {
     emit('select', keys[0]);
-}
-
-onMounted(() => {
-  fetch();
-});
-
-/** 成功回调函数*/
-function handleSuccess() {
-
-}
-
-
-
+  }
 </script>

src/views/dataSharingAndExchange/ApiMonitor/RightContent1.vue

 <template>
   <div class="center">
-    <div style="display: flex;justify-content: space-between;margin-left: 10px;padding-top: 10px">
+    <div
+      style="display: flex; justify-content: space-between; margin-left: 10px; padding-top: 10px"
+    >
       <div style="display: flex">
-        <Icon icon="dashicons:admin-plugins" style="color: rgb(22, 179, 197);font-size: 30px"></Icon>
+        <Icon icon="dashicons:admin-plugins" style="color: rgb(22, 179, 197); font-size: 30px" />
         <div>
-          <span style="font-weight: bold">供电单位用电量</span><br>
+          <span style="font-weight: bold">供电单位用电量</span><br />
           <span>API监控/市场营销/供电单位用电量</span>
         </div>
       </div>
@@ -14,7 +16,7 @@
       </div>
     </div>
     <Alert
-      style="margin-top: 10px;margin-bottom: 10px"
+      style="margin-top: 10px; margin-bottom: 10px"
       show-icon
       type="info"
       message="此处仅展示拉取数据模式的API调用情况。"
@@ -46,13 +48,14 @@
 <script lang="ts" setup>
   import { CountTo } from '@/components/CountTo';
   import Icon from '@/components/Icon/Icon.vue';
-  import { Tag, Card,Select,Alert } from 'ant-design-vue';
-  import { reactive,unref,onDeactivated,onMounted,ref,watch,Ref } from 'vue';
+  import { Tag, Card, Select, Alert } from 'ant-design-vue';
+  import { reactive, unref, onDeactivated, onMounted, ref, watch, Ref } from 'vue';
   import { BasicTable, useTable, TableAction } from '@/components/Table';
-  import {columns1,searchFormSchema} from "./ApiMonitor.data";
-  import {TableData} from "./ApiMonitorData";
+  import { columns1, searchFormSchema } from './ApiMonitor.data';
+  import { TableData } from './ApiMonitorData';
   import { BasicForm, useForm } from '@/components/Form';
   import { useMessage } from '@/hooks/web/useMessage';
+
   const { createMessage } = useMessage();
   defineProps({
     loading: {
@@ -75,21 +78,21 @@
     title: '执行中请求',
     api: async (params) => {
       const response = {
-        pageNu: "1",
-        pageSize: "10",
-        pages: "1",
+        pageNu: '1',
+        pageSize: '10',
+        pages: '1',
         total: TableData.length,
-        code:'',
-        message:'',
+        code: '',
+        message: '',
         data: [],
       };
-      return { ...response,data: TableData };
+      return { ...response, data: TableData };
     },
-    columns:columns1,
-    pagination:true,
+    columns: columns1,
+    pagination: true,
     useSearchForm: false,
     showTableSetting: false,
-    showIndexColumn:false,
+    showIndexColumn: false,
     bordered: true,
     scroll: { y: 500 },
     actionColumn: {
@@ -99,23 +102,20 @@
     },
   });
 
-
-
-  function deleteButton(){
-    createMessage.success('删除成功!')
+  function deleteButton() {
+    createMessage.success('删除成功!');
   }
 </script>
 <style lang="less" scoped>
-.card{
-  ::v-deep(.ant-card-body){
+  .card {
+    ::v-deep(.ant-card-body) {
       width: 100%;
       display: flex;
     }
-}
-
+  }
 
-.center{
+  .center {
     width: 100%;
     background-color: white;
-}
+  }
 </style>

src/views/dataSharingAndExchange/ApiMonitor/RightContent3.vue

@@ -39,7 +39,7 @@ function getEchartsData1() {
     },
     legend: {
       orient: 'vertical', // 垂直方向
-      right: '2%', // 图例放置在右侧
+      left: '70%', // 图例放置在右侧
       top: 'center', // 图例垂直居中
       itemWidth: 15, // 图例标记宽度
       itemHeight: 15, // 图例标记高度

src/views/dataSharingAndExchange/ApiMonitor/RightContent4.vue

@@ -39,7 +39,7 @@ function getEchartsData1() {
     },
     legend: {
       orient: 'vertical', // 垂直方向
-      right: '2%', // 图例放置在右侧
+      left: '70%', // 图例放置在右侧
       top: 'center', // 图例垂直居中
       itemWidth: 15, // 图例标记宽度
       itemHeight: 15, // 图例标记高度

src/views/dataSharingAndExchange/ApiMonitor/index.vue

@@ -13,15 +13,15 @@
   </PageWrapper>
 </template>
 <script lang="ts" setup>
-  import { reactive,unref,onDeactivated,onMounted,ref } from 'vue';
+  import { reactive, unref, onDeactivated, onMounted, ref } from 'vue';
   import { BasicTable, useTable, TableAction } from '@/components/Table';
   import { PageWrapper } from '@/components/Page';
   import ApiMonitorTree from './ApiMonitorTree.vue';
   import { useMessage } from '@/hooks/web/useMessage';
   import { useModal } from '@/components/Modal';
   import { useGo } from '@/hooks/web/usePage';
-  import { useRoute,onBeforeRouteLeave } from 'vue-router';
-  import {forEach} from "lodash-es";
+  import { useRoute, onBeforeRouteLeave } from 'vue-router';
+  import { forEach } from 'lodash-es';
   import RightContent1 from './RightContent1.vue';
   import RightContent3 from './RightContent3.vue';
   import RightContent2 from './RightContent2.vue';
@@ -29,16 +29,11 @@
   import RightContent5 from './RightContent5.vue';
   import RightContent6 from './RightContent6.vue';
   import RightContent7 from './RightContent7.vue';
+
   defineOptions({ name: 'AccountManagement' });
   const { createMessage, createConfirm } = useMessage();
   const route = useRoute();
   const go = useGo();
 
-
-
-
-  onMounted(() => {
-
-  });
-
+  onMounted(() => {});
 </script>