fix(frontend): 任务耗时时间显示格式不正确 #3493

TencentBlueKing · Mar 11, 2024 · a294bfa · a294bfa
1 parent 3fb6af6
commit a294bfa
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 51 deletions.
diff --git a/dbm-ui/frontend/.vscode/extensions.json b/dbm-ui/frontend/.vscode/extensions.json
@@ -0,0 +1,9 @@
+{
+  "recommendations": [
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode",
+    "stylelint.vscode-stylelint",
+    "vue.volar",
+    "cpylua.language-postcss"
+  ]
+}
diff --git a/dbm-ui/frontend/src/utils/getCostTimeDisplay.ts b/dbm-ui/frontend/src/utils/getCostTimeDisplay.ts
@@ -9,47 +9,35 @@
  * 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 { intervalToDuration } from 'date-fns';
+ */
 
-const times = [{
-  key: 'years',
-  unit: 'y',
-}, {
-  key: 'months',
-  unit: 'M',
-}, {
-  key: 'days',
-  unit: 'd',
-}, {
-  key: 'hours',
-  unit: 'h',
-}, {
-  key: 'minutes',
-  unit: 'm',
-}, {
-  key: 'seconds',
-  unit: 's',
-}];
 /**
  * 获取耗时展示文本
  * @param time timestamp 秒级
  * @returns cost time display
  */
 export const getCostTimeDisplay = (time: number) => {
-  if (!time) return time === 0 ? '0s' : '--';
-
-  const duration: { [key: string]: number } = intervalToDuration({
-    start: 0,
-    end: time * 1000,
-  });
-  let timeDisplay = '';
-  for (const { key, unit } of times) {
-    const value = duration[key];
-    if (value || timeDisplay) {
-      timeDisplay += `${value}${unit}`;
-    }
+  const totalTime = time;
+  if (totalTime < 60) {
+    return `${totalTime}s`;
+  }
+  const dayUnit = 86400;
+  const hourUnit = 3600;
+  const minUnit = 60;
+  const stack = [];
+  const day = Math.floor(time / dayUnit);
+  if (day) {
+    stack.push(`${day}d`);
+  }
+  const hour = Math.floor((time % dayUnit) / hourUnit);
+  if (hour) {
+    stack.push(`${hour}h`);
+  }
+  const min = Math.floor((time % hourUnit) / minUnit);
+  if (min) {
+    stack.push(`${min}m`);
   }
-  return timeDisplay;
+  const second = Math.ceil(time % 60);
+  stack.push(`${second}s`);
+  return stack.join(' ');
 };
diff --git a/dbm-ui/frontend/src/views/task-history/routes.ts b/dbm-ui/frontend/src/views/task-history/routes.ts
@@ -40,7 +40,6 @@ const routes: RouteRecordRaw[] = [
         path: 'detail/:root_id',
         meta: {
           navName: t('任务详情'),
-          activeMenu: 'taskHistoryList',
           fullscreen: true,
         },
         component: () => import('@views/task-history/pages/Details.vue'),

diff --git a/dbm-ui/frontend/vite.config.mts b/dbm-ui/frontend/vite.config.mts
@@ -9,12 +9,12 @@
  * 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 { resolve } from 'path';
 import AutoImport from 'unplugin-auto-import/vite';
 import { defineConfig, loadEnv } from 'vite';
-import  ViteHTMLEnv from 'vite-plugin-html-env';
+import ViteHTMLEnv from 'vite-plugin-html-env';
 import monacoEditorPlugin from 'vite-plugin-monaco-editor';
 import { viteStaticCopy } from 'vite-plugin-static-copy';
 
@@ -74,7 +74,7 @@ export default defineConfig(({ mode }) => {
         },
       }),
       AutoImport({
-      // 生成自动引入 eslintrc 配置
+        // 生成自动引入 eslintrc 配置
         eslintrc: {
           enabled: false,
           filepath: './src/types/.eslintrc-auto-import.json',
@@ -83,14 +83,17 @@ export default defineConfig(({ mode }) => {
         dts: './src/types/auto-imports.d.ts', // 自动导出 ts types
       }),
       viteStaticCopy({
-        targets: [{
-          src: 'src/images/monitoring.png',
-          dest: './',
-          rename: uniqueKey,
-        }, {
-          src: 'lib',
-          dest: './',
-        }],
+        targets: [
+          {
+            src: 'src/images/monitoring.png',
+            dest: './',
+            rename: uniqueKey,
+          },
+          {
+            src: 'lib',
+            dest: './',
+          },
+        ],
       }),
       monacoEditorPlugin.default({}),
       ViteHTMLEnv({
@@ -106,10 +109,7 @@ export default defineConfig(({ mode }) => {
       },
     },
     optimizeDeps: {
-      exclude: [
-        '@blueking/ip-selector/dist/vue3.x.js',
-        'lib/',
-      ],
+      exclude: ['@blueking/ip-selector/dist/vue3.x.js', 'lib/'],
     },
     server: {
       host: '127.0.0.1',