审计日志

src/views/modules/monitoring/audit-log.vue

@@ -0,0 +1,69 @@
+<template>
+    <div>
+      <el-select v-model="selectedAccount" placeholder="选择账号">
+        <el-option
+          v-for="account in accounts"
+          :key="account.id"
+          :label="account.name"
+          :value="account.id"
+        ></el-option>
+      </el-select>
+  
+      <el-button @click="fetchLogs">查询</el-button>
+  
+      <el-table :data="logs" v-if="logs.length > 0">
+        <el-table-column prop="id" label="日志ID"></el-table-column>
+        <el-table-column prop="message" label="日志内容"></el-table-column>
+        <el-table-column prop="timestamp" label="时间戳"></el-table-column>
+      </el-table>
+    </div>
+  </template>
+  
+  <script>
+  export default {
+    data() {
+      return {
+        accounts: [
+          { id: 1, name: "子账号1" },
+          { id: 2, name: "子账号2" },
+          // 添加更多子账号
+        ],
+        selectedAccount: null,
+        logs: [ // 这里可以根据需要从后台获取真实数据
+             { id: 1, message: "日志1", timestamp: "2024-01-05 10:30:00" },
+             { id: 2, message: "日志2", timestamp: "2024-01-05 11:15:00" },
+      ]
+      };
+    },
+    methods: {
+      fetchLogs() {
+        // 模拟从后端获取日志数据的过程
+        // 这里可以使用axios或其他HTTP库发送请求
+        // 根据selectedAccount的值决定查询的范围
+        const accountId = this.selectedAccount;
+        const url = accountId ? `/logs?accountId=${accountId}` : "/logs";
+  
+        // 假设后端返回的数据格式如下：
+        // const response = {
+        //   data: [
+        //     { id: 1, message: "日志1", timestamp: "2024-01-05 10:30:00" },
+        //     { id: 2, message: "日志2", timestamp: "2024-01-05 11:15:00" },
+        //     // 更多日志数据
+        //   ]
+        // };
+  
+        // 模拟异步请求
+        setTimeout(() => {
+          // 将返回的日志数据赋值给logs数组
+          this.logs = response.data;
+        }, 1000);
+      }
+    }
+  };
+  </script>
+
+<style scoped>
+.audit-log {
+  padding: 20px;
+}
+</style>

src/views/modules/monitoring/test.vue

@@ -6,13 +6,15 @@
 <!--  <iframe src="../../../../public/index.html"  width="100%" :style="{height:calHeight}" ></iframe>-->
 <!--  <iframe src="http://www.baidu.com/"  width="100%" :style="{height:calHeight}" ></iframe>-->
   <!-- 摄像头分布图 -->
+  <!-- 观澜：lng: 114.036331, lat: 22.730421 -->
+
   <div >
     <baidu-map
         class="map"
         :scroll-wheel-zoom="true"
         :double-click-zoom="false"
         @zoomend="mouseEvent"
-        :center="{lng: 103.943382, lat: 30.750594 }"
+        :center="{lng: 114.036331, lat: 22.730421 }"  
         :zoom="zoom">
       <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
       <bm-marker