Demo

.github/workflows/ci.yml

@@ -70,4 +70,4 @@ jobs:
         run: |
           docker buildx imagetools create \
             --tag registry.cn-shanghai.aliyuncs.com/clklog/accesslog-ui:${{ steps.set-tag.outputs.tag }} \
-            zcunsoft/accesslog-ui:${{ steps.set-tag.outputs.tag }}
+            zcunsoft/accesslog-ui:${{ steps.set-tag.outputs.tag }}

Dockerfile

@@ -1,5 +1,5 @@
-FROM nginx:alpine
+FROM nginx:1.20-alpine
 
 ARG HTML_DIR
 
-COPY ${HTML_DIR} /usr/share/nginx/html
+COPY ${HTML_DIR} /usr/share/nginx/html

mock/role/index.js

@@ -6,33 +6,11 @@ const routes = deepClone([...constantRoutes, ...asyncRoutes])
 
 const roles = [
   {
-    key: 'admin',
-    name: 'admin',
-    description: 'Super Administrator. Have Tracking to view all pages.',
+    key: 'accesslog',
+    name: 'accesslog',
+    description: 'Accesslog Administrator. Have Tracking to view all pages.',
     routes: routes
   },
-  {
-    key: 'editor',
-    name: 'editor',
-    description: 'Normal Editor. Can see all pages except permission page',
-    routes: routes.filter(i => i.path !== '/permission')// just a mock
-  },
-  {
-    key: 'visitor',
-    name: 'visitor',
-    description: 'Just a visitor. Can only see the home page and the document page',
-    routes: [{
-      path: '',
-      redirect: 'dashboard',
-      children: [
-        {
-          path: 'dashboard',
-          name: 'Dashboard',
-          meta: { title: 'dashboard', icon: 'dashboard' }
-        }
-      ]
-    }]
-  }
 ]
 
 module.exports = [

mock/role/routes.js

@@ -81,7 +81,7 @@ const asyncRoutes = [
     meta: {
       title: 'Permission',
       icon: 'lock',
-      roles: ['admin', 'editor']
+      roles: ['accesslog']
     },
     children: [
       {
@@ -90,7 +90,7 @@ const asyncRoutes = [
         name: 'PagePermission',
         meta: {
           title: 'Page Permission',
-          roles: ['admin']
+          roles: ['accesslog']
         }
       },
       {
@@ -107,7 +107,7 @@ const asyncRoutes = [
         name: 'RolePermission',
         meta: {
           title: 'Role Permission',
-          roles: ['admin']
+          roles: ['accesslog']
         }
       }
     ]

mock/user.js

@@ -1,25 +1,16 @@
 
 const tokens = {
-  admin: {
+  accesslog: {
     token: 'admin-token'
-  },
-  editor: {
-    token: 'editor-token'
   }
 }
 
 const users = {
   'admin-token': {
-    roles: ['admin'],
+    roles: ['accesslog'],
     introduction: 'I am a super administrator',
     avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
     name: 'Super Admin'
-  },
-  'editor-token': {
-    roles: ['editor'],
-    introduction: 'I am an editor',
-    avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
-    name: 'Normal Editor'
   }
 }
 
@@ -36,7 +27,7 @@ module.exports = [
       if (!token) {
         return {
           code: 60204,
-          message: 'Account and password are incorrect.'
+          message: '当前账号不存在'
         }
       }
 

package.json

@@ -28,6 +28,7 @@
     "js-cookie": "2.2.0",
     "jsonlint": "1.6.3",
     "jszip": "3.2.1",
+    "moment": "^2.30.1",
     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",
     "path-to-regexp": "2.4.0",

src/api/trackingapi/abnormal.js

@@ -25,11 +25,11 @@ export function getExceptionIpApi(params) {
     data: params
   })
 }
-// 状态码详情
-export function getStatusDetailApi(params) {
-  return request({
-    url: '/accesslog/status/getStatusDetail',
-    method: 'post',
-    data: params
-  })
-}
+// // 状态码详情
+// export function getStatusDetailApi(params) {
+//   return request({
+//     url: '/accesslog/status/getStatusDetail',
+//     method: 'post',
+//     data: params
+//   })
+// }

src/api/trackingapi/accessLog.js

@@ -35,23 +35,6 @@ export function getFlowTrendApi(params) {
   })
 }
 
-// 获取耗时TOP10数据
-export function getRequestTimeTop10Api(params) {
-  return request({
-    url: '/accesslog/getRequestTimeTop10',
-    method: 'post',
-    data: params
-  })
-}
-
-// 获取访问TOP10数据
-export function getUriTop10Api(params) {
-  return request({
-    url: '/accesslog/getUriTop10',
-    method: 'post',
-    data: params
-  })
-}
 // 获取IP访问量TOP10数据
 export function getIpTop10Api(params) {
   return request({
@@ -103,14 +86,9 @@ export function getIpByProvinceApi(params) {
   })
 }
 
-
-
-// ------------------------------------------------------
-
 // 按应用流量指标概览
 export function getHostOverviewApi(params) {
   return request({
-    // url: '/accesslog/getHostOverview',
     url: '/getHostOverview',
     method: 'post',
     data: params
@@ -119,7 +97,6 @@ export function getHostOverviewApi(params) {
 // 指标概览
 export function getOverviewApi(params) {
   return request({
-    // url: '/accesslog/getOverview',
     url: '/getOverview',
     method: 'post',
     data: params
@@ -133,11 +110,29 @@ export function getPerformanceDetailApi(params) {
     data: params
   })
 }
-//状态码分析
-// export function getStatusApi(params) {
-//   return request({
-//     url: '/getStatus',
-//     method: 'post',
-//     data: params
-//   })
-// }
+//获取ip列表
+export function getIpListApi(params) {
+  return request({
+    url: '/accesslog/ip/getIpList',
+    method: 'post',
+    data: params
+  })
+}
+
+//按地域获取IP分布统计数据
+export function getIpByAreaApi(params) {
+  return request({
+    url: '/accesslog/ip/getIpByArea',
+    method: 'post',
+    data: params
+  })
+}
+
+//获取ip详情列表
+export function getIpDetailListApi(params) {
+  return request({
+    url: '/accesslog/ip/getIpDetailList',
+    method: 'post',
+    data: params
+  })
+}

src/api/trackingapi/performance.js

@@ -9,10 +9,18 @@ export function getRequestimeGt100msApi(params) {
     data: params
   })
 }
-// 性能分析详情
+// 性能分析详情弃用
+// export function getPerformanceDetailApi(params) {
+//   return request({
+//     url: '/accesslog/performance/getPerformanceDetail',
+//     method: 'post',
+//     data: params
+//   })
+// }
+// 获取Uri列表
 export function getPerformanceDetailApi(params) {
   return request({
-    url: '/accesslog/performance/getPerformanceDetail',
+    url: '/accesslog/uri/getUriList',
     method: 'post',
     data: params
   })

src/api/trackingapi/status.js

@@ -1,14 +1,4 @@
 import request from '@/utils/request'
-
-
-// 状态码数据图表
-export function getStatusApi(params) {
-  return request({
-    url: '/accesslog/status/getStatus',
-    method: 'post',
-    data: params
-  })
-}
 // 状态码列表
 export function getStatusListApi(params) {
   return request({
@@ -26,10 +16,10 @@ export function getStatusFlowTrendApi(params) {
   })
 }
 // 状态码详情
-export function getStatusDetailApi(params) {
-  return request({
-    url: '/accesslog/status/getStatusDetail',
-    method: 'post',
-    data: params
-  })
-}
+// export function getStatusDetailApi(params) {
+//   return request({
+//     url: '/accesslog/status/getStatusDetail',
+//     method: 'post',
+//     data: params
+//   })
+// }

src/components/Charts/LineMarker.vue

@@ -143,7 +143,12 @@ export default {
       this.initChart();
     },
     initChart() {
-      this.chart = echarts.init(document.getElementById(this.id));
+      const chartDom = document.getElementById(this.id);
+      if (!chartDom) {
+        console.warn(`Chart DOM element with id ${this.id} not found`);
+        return;
+      }
+      this.chart = echarts.init(chartDom);
 
       this.chart.setOption({
         backgroundColor: "#fff",

src/components/Charts/pieMarker.vue

@@ -55,7 +55,12 @@ export default {
       this.initChart();
     },
     initChart() {
-      this.chart = echarts.init(document.getElementById(this.id));
+      const chartDom = document.getElementById(this.id);
+      if (!chartDom) {
+        console.warn(`图表DOM元素(id: ${this.id})不存在，跳过ECharts初始化`);
+        return;
+      }
+      this.chart = echarts.init(chartDom);
       this.chart.setOption({
         title: {
           left: "center",