From fa395f3f8ec4e3291a667326807f866ca6413dcd Mon Sep 17 00:00:00 2001
From: jingna <1264204245@qq.com>
Date: Wed, 6 Aug 2025 09:50:39 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/renderer/src/views/Detection.vue | 109 ++++++++++--------
 1 file changed, 63 insertions(+), 46 deletions(-)

diff --git a/frontend/src/renderer/src/views/Detection.vue b/frontend/src/renderer/src/views/Detection.vue
index 3023db1a..6bacdd8a 100644
--- a/frontend/src/renderer/src/views/Detection.vue
+++ b/frontend/src/renderer/src/views/Detection.vue
@@ -109,7 +109,7 @@
 
             </div>
             <!-- 仪表盘区域 -->
-            <div style="display: flex;justify-content: space-between;padding: 10px;padding-top: 10px;">
+            <div style="display: flex;justify-content: space-between;padding: 0px 10px;padding-top: 10px;">
               <div style="width: 33%;">
                 <div id="headChart1" style="width: 100%;height: 140px;"></div>
                 <!-- <img src="@/assets/test1.png" alt="" style="width: 100%;height: 140px;"> -->
@@ -137,10 +137,10 @@
               </div>
             </div>
             <!-- 历史数据表格 -->
-            <div style="display: flex;justify-content: center;padding: 0px 25px;">
-              <div class="gauge-table-title">
+            <div class="gauge-table-title">
                 历史数据..
               </div>
+            <div style="display: flex;justify-content: center;padding: 0px 25px;">
               <el-table :data="historyData" style="width: 96%;height: 160px;overflow: auto;">
                 <el-table-column prop="id" label="ID" width="60" />
                 <el-table-column label="最大旋转角" align="center">
@@ -402,7 +402,7 @@ let socket = null
 let frameCount = 0
 
 // 后端服务器地址配置
-const BACKEND_URL = 'http://192.168.1.173:5000'
+const BACKEND_URL = 'http://192.168.1.58:5000'
 
 const formattedTime = ref(0)
 const dialogVisible = ref(false)
@@ -417,52 +417,68 @@ const historyData = ref([
   { id: 1, rotLeft: '-56.1°', rotRight: '55.7°', tiltLeft: '-17.5°', tiltRight: '18.5°', pitchDown: '-22.2°', pitchUp: '11.5°' }
 ])
 const chartoption = ref({
+  backgroundColor:'#000000',
+  grid: { top: 0, right: 0, bottom: 0, left: 0 },
   series: [
     {
       type: 'gauge',
+      radius: '180%',
+      center: ['50%', '90%'],
+      startAngle: 180,
+      endAngle: 0,
+      min: -90,
+      max: 90,
+      splitNumber: 10,
+      itemStyle: {
+        color: '#58D9F9',
+        shadowColor: 'rgba(0,138,255,0.45)',
+        shadowBlur: 10,
+        shadowOffsetX: 2,
+        shadowOffsetY: 2
+      },
       progress: {
-        show: true,
-        width: 18
+        show: false,
+      },
+      pointer: {
+        icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z',
+        length: '75%',
+        width: 10,
+        offsetCenter: [0, '5%']
       },
       axisLine: {
+        roundCap: true,
         lineStyle: {
-          width: 18
+          width: 5
         }
       },
       axisTick: {
-        show: false
-      },
-      splitLine: {
-        length: 15,
+        splitNumber: 2,
         lineStyle: {
           width: 2,
           color: '#999'
         }
       },
-      axisLabel: {
-        distance: 25,
-        color: '#999',
-        fontSize: 20
-      },
-      anchor: {
-        show: true,
-        showAbove: true,
-        size: 25,
-        itemStyle: {
-          borderWidth: 10
+      splitLine: {
+        length: 12,
+        lineStyle: {
+          width: 3,
+          color: '#999'
         }
       },
+      axisLabel: {
+        distance: 10,
+        color: '#999',
+        fontSize: 10
+      },
       title: {
         show: false
       },
       detail: {
-        valueAnimation: true,
-        fontSize: 80,
-        offsetCenter: [0, '70%']
+        show: false,
       },
       data: [
         {
-          value: 70
+          value: 100
         }
       ]
     }
@@ -1751,6 +1767,7 @@ onUnmounted(() => {
   align-items: center;
   color: #ffffff;
   font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
+  height: 30px;
 }
 
 .gauge-group-box-text1 {
@@ -1766,11 +1783,9 @@ onUnmounted(() => {
 }
 
 .gauge-table-title {
-  padding: 0px 5px;
+  padding: 0px 10px;
   font-size: 14px;
   color: #ffffff;
-  writing-mode: vertical-rl;
-  font-weight: 700;
 }
 
 /* .foot-container-left{
@@ -1852,28 +1867,30 @@ onUnmounted(() => {
   background: #1D1b26;
   color: #ffffff;
 }
-
-:deep(.el-table__header-wrapper) {
-  background: #E7e6e6;
-}
-
-:deep(.dashboard-container .cell) {
-  color: #000000;
-}
-
-:deep(.el-table thead) {
-  color: #000000;
-}
-
-:deep(.el-table thead.is-group th.el-table__cell) {
-  background: #d8d7d7;
-}
-
 :deep(.el-table .el-table__cell) {
   padding: 4px 0px;
 }
 </style>
 <style>
+.dashboard-container .el-table{
+  background: transparent !important;
+}
+.dashboard-container .el-table tr{
+  background-color: transparent !important;
+}
+.dashboard-container .el-table thead.is-group th.el-table__cell{
+  background-color: transparent !important;
+}
+.dashboard-container .cell{
+  color: #fff;
+}
+.dashboard-container .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell{
+  background-color: transparent !important;
+}
+
+.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf{
+  background-color: transparent !important;
+}
 .top-bar .el-button {
   height: 44px;
   border-radius: 25px;