feat(frontend): 巡检报告改版及个人工作台新增巡检待办 TencentBlueKing#8953

Author: jinquantianxia

dbm-ui/frontend/lib/bk-icon/demo.html

@@ -989,6 +989,14 @@ <h2 class="page-title">
           <span class="icon bk-dbm-icon db-icon-guzhangji"></span>
           <p class="icon-text">guzhangji</p>
         </li>
+        <li class="icon-item" title="wodedaiban">
+          <span class="icon bk-dbm-icon db-icon-wodedaiban"></span>
+          <p class="icon-text">wodedaiban</p>
+        </li>
+        <li class="icon-item" title="yonghu-2">
+          <span class="icon bk-dbm-icon db-icon-yonghu-2"></span>
+          <p class="icon-text">yonghu-2</p>
+        </li>
       </ul>
       <h3 class="describe-title">为什么使用</h3>
       <ul class="use-describe">
@@ -2314,6 +2322,18 @@ <h3 class="describe-title">如何使用</h3>
           </svg>
           <p class="icon-text">guzhangji</p>
         </li>
+        <li class="colorful-icon">
+          <svg class="icon svg-icon">
+            <use xlink:href="#db-icon-wodedaiban"></use>
+          </svg>
+          <p class="icon-text">wodedaiban</p>
+        </li>
+        <li class="colorful-icon">
+          <svg class="icon svg-icon">
+            <use xlink:href="#db-icon-yonghu-2"></use>
+          </svg>
+          <p class="icon-text">yonghu-2</p>
+        </li>
       </ul>
       <h3 class="describe-title">为什么使用</h3>
       <ul class="use-describe">

dbm-ui/frontend/src/components/db-tab/Index.vue

@@ -13,6 +13,7 @@
 
 <template>
   <BkTab
+    :key="renderKey"
     v-model:active="moduleValue"
     class="db-tab"
     type="unborder-card">
@@ -31,6 +32,7 @@
 
   interface Props {
     exclude?: DBTypes[];
+    labelConfig?: Record<DBTypes, string>;
   }
 
   interface TabItem {
@@ -39,6 +41,7 @@
   }
 
   const props = withDefaults(defineProps<Props>(), {
+    labelConfig: undefined,
     exclude: () => [],
   });
 
@@ -48,14 +51,30 @@
     default: DBTypes.MYSQL,
   });
 
-  const renderTabs = Object.values(DBTypeInfos).reduce((result, item) => {
-    const { id, name, moduleId } = item;
-    const data = funControllerStore.funControllerData.getFlatData(moduleId);
-    if (data[id] && !props.exclude.includes(id)) {
-      result.push({ id, name });
-    }
-    return result;
-  }, [] as TabItem[]);
+  // 解决 labelConfig 变化后渲染样式异常问题
+  const renderKey = ref(0);
+
+  const renderTabs = computed(() =>
+    Object.values(DBTypeInfos).reduce((result, item) => {
+      const { id, name, moduleId } = item;
+      const data = funControllerStore.funControllerData.getFlatData(moduleId);
+      if (data[id] && !props.exclude.includes(id)) {
+        result.push({
+          id,
+          name: props.labelConfig?.[id] || name,
+        });
+      }
+      return result;
+    }, [] as TabItem[]),
+  );
+
+  watch(
+    () => [props.exclude, props.labelConfig],
+    () => {
+      renderKey.value += 1;
+    },
+    { immediate: true },
+  );
 </script>
 
 <style lang="less">

dbm-ui/frontend/src/hooks/index.ts

@@ -27,6 +27,7 @@ export * from './useLocalPagination';
 export * from './useLocation';
 export * from './useModelProvider';
 export * from './useProps';
+export * from './useReportCount';
 export * from './useSelectorDialogWidth';
 export * from './useSQLTaskNotify';
 export * from './useStickyFooter';

dbm-ui/frontend/src/hooks/useReportCount.ts

@@ -0,0 +1,66 @@
+/*
+ * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
+ *
+ * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at https://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
+ * the specific language governing permissions and limitations under the License.
+ */
+
+import { useRequest } from 'vue-request';
+
+import { getReportCount } from '@services/source/report';
+
+/**
+ * 巡检报告统计数据
+ */
+export const useReportCount = () => {
+  const manageCount = ref(0);
+  const assistCount = ref(0);
+  const dbReportCountMap = ref<
+    Record<
+      string,
+      {
+        assistCount: number;
+        manageCount: number;
+      }
+    >
+  >({});
+
+  useRequest(getReportCount, {
+    onSuccess(countResult) {
+      let manages = 0;
+      let assists = 0;
+      Object.entries(countResult).forEach(([db, value]) => {
+        const singleDbCount = Object.values(value).reduce(
+          (results, item) => {
+            Object.assign(results, {
+              manageCount: item.manage_count + results.manageCount,
+              assistCount: item.assist_count + results.assistCount,
+            });
+            return results;
+          },
+          {
+            manageCount: 0,
+            assistCount: 0,
+          },
+        );
+        dbReportCountMap.value[db] = singleDbCount;
+        manages = manages + singleDbCount.manageCount;
+        assists = assists + singleDbCount.assistCount;
+      });
+      manageCount.value = manages;
+      assistCount.value = assists;
+    },
+  });
+
+  return {
+    manageCount,
+    assistCount,
+    dbReportCountMap,
+  };
+};

dbm-ui/frontend/src/layout/Index.vue

@@ -164,13 +164,14 @@
       'PlatformTicketFlowSetting',
       'PlatformStaffManage',
     ],
-    [menuEnum.platformManage]: ['platformTaskManage', 'ticketPlatformManage'],
+    [menuEnum.platformManage]: ['platformTaskManage', 'ticketPlatformManage', 'inspectionReportGlobal'],
     [menuEnum.personalWorkbench]: [
       'serviceApply',
       'SelfServiceMyTickets',
       'MyTodos',
       'ticketSelfDone',
       'ticketSelfManage',
+      'InspectionTodos',
     ],
   } as Record<string, string[]>;
 

dbm-ui/frontend/src/layout/components/ObservableManage.vue

@@ -33,7 +33,7 @@
             <span
               v-overflow-tips.right
               class="text-overflow">
-              {{ t('健康报告') }}
+              {{ t('巡检报告') }}
             </span>
           </BkMenuItem>
         </BkMenuGroup>

dbm-ui/frontend/src/layout/components/PersonalWorkbench.vue

@@ -6,18 +6,34 @@
     @click="handleMenuChange">
     <BkMenuGroup
       v-db-console="'personalWorkbench'"
-      :name="t('单据管理')">
+      :name="t('我的待办')">
       <BkMenuItem
         key="MyTodos"
         v-db-console="'personalWorkbench.myTodos'">
         <template #icon>
           <DbIcon type="todos" />
         </template>
         <span>
-          {{ t('我的待办') }}
+          {{ t('单据待办') }}
         </span>
         <span class="ticket-count">{{ todoCount }}</span>
       </BkMenuItem>
+      <BkMenuItem
+        v-if="userProfileStore.isDba"
+        key="InspectionTodos"
+        v-db-console="'personalWorkbench.InspectionTodos'">
+        <template #icon>
+          <DbIcon type="cluster-standardize" />
+        </template>
+        <span>
+          {{ t('巡检待办') }}
+        </span>
+        <span class="ticket-count">{{ manageCount }}</span>
+      </BkMenuItem>
+    </BkMenuGroup>
+    <BkMenuGroup
+      v-db-console="'personalWorkbench'"
+      :name="t('我的申请')">
       <BkMenuItem
         key="SelfServiceMyTickets"
         v-db-console="'personalWorkbench.myTickets'">
@@ -28,17 +44,24 @@
           {{ t('我的申请') }}
         </span>
       </BkMenuItem>
+    </BkMenuGroup>
+    <BkMenuGroup
+      v-db-console="'personalWorkbench'"
+      :name="t('我的已办')">
       <BkMenuItem
         key="ticketSelfDone"
         v-db-console="'personalWorkbench.myTickets'">
         <template #icon>
           <DbIcon type="todos" />
         </template>
         <span>
-          {{ t('我的已办') }}
+          {{ t('已办单据') }}
         </span>
       </BkMenuItem>
-      <!-- <BkMenuItem
+      <!-- <BkMenuGroup>
+      v-db-console="'personalWorkbench'"
+      :name="t('单据管理')">
+      <BkMenuItem
         key="ticketSelfManage"
         v-db-console="'personalWorkbench.myTickets'">
         <template #icon>
@@ -47,7 +70,8 @@
         <span>
           {{ t('我负责的业务') }}
         </span>
-      </BkMenuItem> -->
+      </BkMenuItem> 
+      </BkMenuGroup>-->
       <BkMenuItem
         key="serviceApply"
         v-db-console="'personalWorkbench.serviceApply'">
@@ -67,7 +91,9 @@
   import { Menu } from 'bkui-vue';
   import { useI18n } from 'vue-i18n';
 
-  import { useTicketCount } from '@hooks';
+  import { useReportCount, useTicketCount } from '@hooks';
+
+  import { useUserProfile } from '@stores';
 
   import { useActiveKey } from './hooks/useActiveKey';
 
@@ -82,6 +108,8 @@
   } = useActiveKey(menuRef as Ref<InstanceType<typeof Menu>>, 'MyTodos');
 
   const { data: ticketCount } = useTicketCount();
+  const { manageCount } = useReportCount();
+  const userProfileStore = useUserProfile();
 
   const todoCount = computed(() => {
     if (!ticketCount.value) {

dbm-ui/frontend/src/layout/components/PlatformManage.vue

@@ -18,6 +18,20 @@
         {{ t('任务') }}
       </BkMenuItem>
     </BkMenuGroup>
+    <BkMenuGroup
+      v-db-console="'platformManage.healthReport'"
+      :name="t('巡检')">
+      <BkMenuItem key="inspectionReportGlobal">
+        <template #icon>
+          <DbIcon type="db-config" />
+        </template>
+        <span
+          v-overflow-tips.right
+          class="text-overflow">
+          {{ t('巡检报告') }}
+        </span>
+      </BkMenuItem>
+    </BkMenuGroup>
   </BkMenu>
 </template>
 <script setup lang="ts">

dbm-ui/frontend/src/locales/en.json

@@ -1657,5 +1657,14 @@
   "sqlserver主从版": "",
   "排除业务": "",
   "该规格已被使用，不允许修改": "",
+  "巡检报告": "",
+  "已办单据": "",
+  "单据待办": "",
+  "巡检待办": "",
+  "待我处理": "",
+  "待我协助": "",
+  "展示我作为主 DBA 的业务，当日所产生的巡检异常，一般每日更新一次": "",
+  "展示我作为备 DBA、二线 DBA 的业务，当日所产生的巡检异常，一般每日更新一次": "",
+  "主DBA": "",
   "这行勿动！新增翻译请在上一行添加！": ""
 }

dbm-ui/frontend/src/locales/zh-cn.json

@@ -2248,7 +2248,7 @@
   "请输入部署数量": "请输入部署数量",
   "Mysql 集群管理": "Mysql 集群管理",
   "巡检": "巡检",
-  "健康报告": "健康报告",
+  "巡检报告": "巡检报告",
   "备份巡检": "备份巡检",
   "元数据检查": "元数据检查",
   "日期": "日期",
@@ -3905,8 +3905,6 @@
   "【MongoDB】分片集群实例视图": "【MongoDB】分片集群实例视图",
   "副本集群": "副本集群",
   "单据中心": "单据中心",
-  "待我处理": "待我处理",
-  "待我协助": "待我协助",
   "待我处理：通常是我提交的单据，或者我是业务主DBA": "待我处理：通常是我提交的单据，或者我是业务主DBA",
   "待我协助：通常是我被设定为单据协助人，或者我是业务的备DBA、二线 DBA": "待我协助：通常是我被设定为单据协助人，或者我是业务的备DBA、二线 DBA",
   "Proxy存储资源规格：": "Proxy存储资源规格：",
@@ -3934,5 +3932,13 @@
   "复制域名:端口": "复制域名:端口",
   "复制成功n个域名": "复制成功 {n} 个域名",
   "复制成功n个域名:端口": "复制成功 {n} 个域名:端口",
+  "已办单据": "已办单据",
+  "单据待办": "单据待办",
+  "巡检待办": "巡检待办",
+  "待我处理": "待我处理",
+  "待我协助": "待我协助",
+  "展示我作为主 DBA 的业务，当日所产生的巡检异常，一般每日更新一次": "展示我作为主 DBA 的业务，当日所产生的巡检异常，一般每日更新一次",
+  "展示我作为备 DBA、二线 DBA 的业务，当日所产生的巡检异常，一般每日更新一次": "展示我作为备 DBA、二线 DBA 的业务，当日所产生的巡检异常，一般每日更新一次",
+  "主DBA": "主 DBA",
   "这行勿动！新增翻译请在上一行添加！": ""
 }