主页布局

src/components/Home.vue

@@ -24,7 +24,7 @@
             </el-table-column>
             <el-table-column prop="status" label="告警状态" width="140">
               <template v-slot="scope">
-                <el-tag :type="scope.row.status === '已处理' ? 'success' : 'warning'">{{ scope.row.status }}</el-tag>
+                <el-tag :type="scope.row.status === 'pending' ? 'warning' : 'success'">{{ statusMapping[scope.row.status] }}</el-tag>
               </template>
             </el-table-column>
             <el-table-column label="操作" width="140">
@@ -41,6 +41,17 @@
           </el-pagination>
         </div>
       </el-col>
+
+      <el-col :span="8">
+        <div class="right-panel">
+          <div class="panel-section">
+            <statistics />
+          </div>
+          <div class="panel-section">
+            <alertChart />
+          </div>
+        </div>
+      </el-col>
     </el-row>
     <el-dialog v-model="dialogVisible" title="告警详情" width="80%">
       <div>
@@ -61,7 +72,8 @@
         </el-row>
         <el-row>
           <el-col :span="6">
-            <p>告警状态: <el-tag :type="selectedRow.status === '已处理' ? 'success' : 'warning'">{{ selectedRow.status }}</el-tag></p>
+            <p>告警状态: <el-tag :type="selectedRow.status === 'pending' ? 'warning' : 'success'">{{ statusMapping[selectedRow.status]
+            }}</el-tag></p>
           </el-col>
           <el-col :span="6">
             <p>摄像头编号: {{ selectedRow.camera_id }}</p>
@@ -97,7 +109,10 @@
 import * as echarts from 'echarts';
 import Statistics from '../components/Statistics.vue';
 import AlertChart from '../components/AlertChart.vue';
-import { login, getEvents, initCodeNameMap, codenameTranslate } from '../../superbox.js';
+import { login, getEvents, initCodeNameMap, codenameTranslate, getAlgorithms } from '../../superbox.js';
+
+const username = 'turingvideo';
+const password = '1234qwer!';
 
 export default {
   name: 'Home',
@@ -113,38 +128,39 @@ export default {
       mediums: {},
       duration: '',
       typeMapping: {
-        'abnormal:525': '黑屏检测',
+        // 'abnormal:525': '黑屏检测',
-        'car_blocking:512': '车辆拥塞',
+        // 'car_blocking:512': '车辆拥塞',
-        'car_blocking:514': '违规停车',
+        // 'car_blocking:514': '违规停车',
-        'escalator_status:518': '扶梯运行状态',
+        // 'escalator_status:518': '扶梯运行状态',
-        'gathering:520': '人员密集',
+        // 'gathering:520': '人员密集',
-        'gathering:521': '保洁点名',
+        // 'gathering:521': '保洁点名',
-        'intrude:513': '入侵检测',
+        // 'intrude:513': '入侵检测',
-        'long_term_door_status:526': '长期门状态检测',
+        // 'long_term_door_status:526': '长期门状态检测',
-        'lying_down:527': '人员倒地',
+        // 'lying_down:527': '人员倒地',
-        'minizawu:531': '杂物堆积',
+        // 'minizawu:531': '杂物堆积',
-        'minizawu:532': '杂物堆积',
+        // 'minizawu:532': '杂物堆积',
-        'personnel_stay:535': '人员逗留',
+        // 'personnel_stay:535': '人员逗留',
-        'vacant:524': '人员离岗',
+        // 'vacant:524': '人员离岗',
-        'zawu:516': '饮料垃圾检测',
+        // 'zawu:516': '饮料垃圾检测',
-        'zawu:517': '垃圾桶满溢',
+        // 'zawu:517': '垃圾桶满溢',
-        'zawu:519': '违规放置',
+        // 'zawu:519': '违规放置',
-        'zawu:523': '绿化带垃圾检测',
+        // 'zawu:523': '绿化带垃圾检测',
       },
       statusMapping: {
-        '': '待处理',
+        'pending': '待处理',
-        '': '处理中',
+        'closed': '已处理'
-        '': '已处理'
       },
       currentPage: 1,
       pageSize: 20,
+
     }
   },
   async created() {
     try {
-      const token = await login('turingvideo', '1234qwer!');
+      const token = await login(username, password);
       // await initCodeNameMap(token);
       this.tableData = await getEvents(token);
+      this.typeMapping = await this.fetchTypeMapping(token);
       console.log(this.tableData);
     } catch (error) {
       console.error("Error fetching events:", error);
@@ -158,6 +174,23 @@ export default {
     }
   },
   methods: {
+    async fetchTypeMapping(token) {
+      let algorithms = await getAlgorithms(token);
+      const additionalMappings = [
+        { code_name: 'minizawu:532', name: '杂物堆积' },
+        
+      ];
+      algorithms = algorithms.concat(additionalMappings);
+      let mapping = {};
+      algorithms.forEach((algorithm) => {
+        mapping[algorithm.code_name] = algorithm.name;
+      });
+
+      // console.log("mapping: ", mapping);
+      return mapping;
+    },
+
+
     handleView(row) {
       this.selectedRow = row;
       this.duration = this.calculateDuration(row.started_at, row.ended_at);
@@ -221,7 +254,7 @@ export default {
 }
 
 .top-scroll-content {
-/* 高度滚动条显示出来默认值 */
+  /* 高度滚动条显示出来默认值 */
   height: 1px;
 }
 
@@ -232,6 +265,24 @@ export default {
   padding-left: 7%;
 }
 
+.right-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  padding: 10px 10px 400px 10px;
+  background-color: #f5f5f5;
+  height: 600px;
+  overflow-y: auto;
+}
+
+.panel-section {
+  flex: 1;
+  background-color: #fff;
+  padding: 20px;
+  box-shadow: 0 20px 8px rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+}
+
 /* 弹窗> 显示左右等分*/
 .event-media {
   /* display: flex;