修改无人机页面

src/views/WaterCultureView.vue

@@ -36,43 +36,65 @@
               </div>
               <div class="panel-content">
                 <div class="device-status-section">
-                  <!-- 机器人实时状态 - 一行卡片展示 -->
-                  <div class="status-cards-row">
-                    <div class="status-card">
-                      <div class="status-card-label">剩余电量</div>
-                      <div class="status-card-value">85%</div>
+                  <!-- 顶部状态指标 -->
+                  <div class="top-status-indicators">
+                    <div class="status-circle">
+                      <div class="circle-inner">
+                        <div class="circle-percentage">100%</div>
+                        <div class="circle-label">回传</div>
+                      </div>
+                    </div>
+                    <div class="status-icon-item">
+                      <div class="status-icon">🤖</div>
+                      <div class="status-text">机器人</div>
+                      <div class="status-state">工作中</div>
+                    </div>
+                    <div class="status-icon-item">
+                      <div class="status-icon">🏢</div>
+                      <div class="status-text">基站</div>
+                      <div class="status-state">运行中</div>
                     </div>
-                    <div class="status-card">
-                      <div class="status-card-label">运行模式</div>
-                      <div class="status-card-value">自动巡检</div>
+                  </div>
+                  
+                  <!-- 详细信息 -->
+                  <div class="device-details">
+                    <div class="detail-row">
+                      <div class="detail-item">
+                        <span class="detail-label">名称:</span>
+                        <span class="detail-value">巡检机器人</span>
+                      </div>
+                      <div class="detail-item">
+                        <span class="detail-label">类型:</span>
+                        <span class="detail-value">智能巡检型</span>
+                      </div>
                     </div>
-                    <div class="status-card">
-                      <div class="status-card-label">信号强度</div>
-                      <div class="status-card-value">强</div>
+                    <div class="detail-row">
+                      <div class="detail-item">
+                        <span class="detail-label">空调:</span>
+                        <span class="detail-value">制冷</span>
+                      </div>
+                      <div class="detail-item">
+                        <span class="detail-label">网速:</span>
+                        <span class="detail-value">513.8 kb/s</span>
+                      </div>
                     </div>
-                    <div class="status-card">
-                      <div class="status-card-label">当前位置</div>
-                      <div class="status-card-value">1号监测断面</div>
+                    <div class="detail-row">
+                      <div class="detail-item">
+                        <span class="detail-label">电池:</span>
+                        <span class="detail-value">91%</span>
+                      </div>
+                      <div class="detail-item">
+                        <span class="detail-label">卫星:</span>
+                        <span class="detail-value">6</span>
+                      </div>
                     </div>
                   </div>
                   
-                  <!-- 搭载设备状态 - 机器人背景 + 小图标 -->
+                  <!-- 机器人图片 -->
                   <div class="robot-status-container">
                     <div class="robot-bg">
                       <img src="/src/assets/images/Heilin/机器人.png" alt="巡检机器人" class="robot-image" />
                     </div>
-                    
-                    <!-- 运行参数卡片 -->
-                    <div class="params-cards-row">
-                      <div class="param-card">
-                        <div class="param-label">采集频率</div>
-                        <div class="param-value">5秒/次</div>
-                      </div>
-                      <div class="param-card">
-                        <div class="param-label">数据传输状态</div>
-                        <div class="param-value normal">正常</div>
-                      </div>
-                    </div>
                   </div>
                 </div>
               </div>
@@ -84,75 +106,40 @@
                 <h3>巡检任务</h3>
               </div>
               <div class="panel-content">
-                <!-- 路线选择 -->
-                <div class="task-section">
-                  <h4>路线选择</h4>
-                  <div class="route-info">
-                    <div class="route-item">
-                      <span class="route-label">当前路线：</span>
-                      <span class="route-value">1号监测断面 → 测验设备区 → 汇水区</span>
-                    </div>
-                    <div class="route-item">
-                      <span class="route-label">预设路线：</span>
-                      <select v-model="selectedRoute" class="route-select">
-                        <option value="route1">标准巡检路线</option>
-                        <option value="route2">重点区域巡检路线</option>
-                        <option value="route3">全面覆盖路线</option>
-                      </select>
-                    </div>
-                    <div class="route-progress">
-                      <span class="progress-label">当前进度：</span>
-                      <div class="progress-bar">
-                        <div class="progress-fill" style="width: 60%"></div>
-                      </div>
-                      <span class="progress-text">60% (已完成2/3点位)</span>
-                    </div>
+                <!-- 任务列表 -->
+                <div class="task-table">
+                  <div class="task-table-header">
+                    <div class="task-table-col task-name-col">任务名称</div>
+                    <div class="task-table-col task-duration-col">时长</div>
+                    <div class="task-table-col task-action-col">操作</div>
                   </div>
-                </div>
-                
-                <!-- 任务下达 -->
-                <div class="task-section" style="margin-top: 20px;">
-                  <h4>任务下达</h4>
-                  <div class="task-input">
-                    <div class="task-input-item">
-                      <label>巡检区域：</label>
-                      <select v-model="taskArea" class="task-select">
-                        <option value="all">全部区域</option>
-                        <option value="section1">1号监测断面</option>
-                        <option value="section2">测验设备区</option>
-                        <option value="section3">汇水区</option>
-                      </select>
+                  <div class="task-table-body">
+                    <div class="task-table-row">
+                      <div class="task-table-col task-name-col">1号监测断面巡检</div>
+                      <div class="task-table-col task-duration-col">30分钟</div>
+                      <div class="task-table-col task-action-col">
+                        <button class="execute-btn">执行</button>
+                      </div>
                     </div>
-                    <div class="task-input-item">
-                      <label>巡检频次：</label>
-                      <select v-model="taskFrequency" class="task-select">
-                        <option value="once">单次</option>
-                        <option value="hourly">每小时</option>
-                        <option value="daily">每天</option>
-                        <option value="weekly">每周</option>
-                      </select>
+                    <div class="task-table-row">
+                      <div class="task-table-col task-name-col">测验设备区巡检</div>
+                      <div class="task-table-col task-duration-col">45分钟</div>
+                      <div class="task-table-col task-action-col">
+                        <button class="execute-btn">执行</button>
+                      </div>
                     </div>
-                    <div class="task-input-item">
-                      <label>重点巡检项：</label>
-                      <div class="checkbox-group">
-                        <label><input type="checkbox" v-model="taskItems.camera" /> 摄像头</label>
-                        <label><input type="checkbox" v-model="taskItems.flow" /> 流速</label>
-                        <label><input type="checkbox" v-model="taskItems.water" /> 水质</label>
+                    <div class="task-table-row">
+                      <div class="task-table-col task-name-col">汇水区巡检</div>
+                      <div class="task-table-col task-duration-col">20分钟</div>
+                      <div class="task-table-col task-action-col">
+                        <button class="execute-btn">执行</button>
                       </div>
                     </div>
-                    <button class="task-btn" @click="issueTask">下达任务</button>
-                  </div>
-                  
-                  <!-- 当前任务列表 -->
-                  <div class="task-list" style="margin-top: 15px;">
-                    <h5>当前任务</h5>
-                    <div class="task-list-item">
-                      <div class="task-id">任务编号：T20260311001</div>
-                      <div class="task-info">
-                        <span>巡检区域：全部区域</span>
-                        <span>下达时间：2026-03-11 09:00</span>
-                        <span>预计完成：2026-03-11 10:30</span>
-                        <span>进度：80%（已完成5个点位）</span>
+                    <div class="task-table-row">
+                      <div class="task-table-col task-name-col">全站设备检查</div>
+                      <div class="task-table-col task-duration-col">60分钟</div>
+                      <div class="task-table-col task-action-col">
+                        <button class="execute-btn">执行</button>
                       </div>
                     </div>
                   </div>
@@ -623,52 +610,32 @@ onMounted(() => {
 /* 数据卡片样式 */
 .data-card {
   width: 100%;
-  background: linear-gradient(135deg, rgba(0, 20, 40, 0.8), rgba(0, 10, 30, 0.9));
-  border: 1px solid rgba(0, 212, 255, 0.3);
-  border-radius: 8px;
+  background: rgba(0, 20, 40, 0.7);
+  border-radius: 4px;
   overflow: hidden;
-  box-shadow: 0 0 15px rgba(0, 212, 255, 0.2);
-  position: relative;
-}
-
-.data-card::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 2px;
-  background: linear-gradient(90deg, transparent, #00d5ff, transparent);
-  box-shadow: 0 0 10px rgba(0, 212, 255, 0.8);
+  box-shadow: 0 0 10px rgba(0, 212, 255, 0.2);
 }
 
 .panel-header {
-  height: 45px;
-  background: linear-gradient(135deg, rgba(0, 60, 120, 0.3), rgba(0, 30, 60, 0.3));
+  height: 50px;
+  background-image: url('/src/assets/images/数据小标题.png');
+  background-size: 100% 100%;
+  background-position: center;
+  background-repeat: no-repeat;
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   justify-content: space-between;
-  padding: 0 20px;
+  padding: 6px 20px 0;
   cursor: pointer;
-  border-bottom: 1px solid rgba(0, 212, 255, 0.2);
 }
 
 .panel-header h3 {
   margin: 0;
-  font-size: 16px;
+  font-size: 18px;
   font-weight: bold;
-  color: #00d5ff;
-  text-shadow: 0 0 8px rgba(0, 212, 255, 0.8);
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.panel-header h3::before {
-  content: '▶';
-  font-size: 12px;
-  color: #00d5ff;
-  animation: pulse 2s infinite;
+  color: #e0fcff;
+  text-shadow: 0 0 5px rgba(0, 212, 255, 0.5);
+  padding-left: 20px;
 }
 
 .panel-content {
@@ -698,71 +665,124 @@ onMounted(() => {
   gap: 20px;
 }
 
-/* 一行卡片展示 */
-.status-cards-row {
+/* 顶部状态指标 */
+.top-status-indicators {
   display: flex;
-  gap: 12px;
-  justify-content: space-between;
-  margin-bottom: 20px;
+  align-items: center;
+  gap: 15px;
+  padding: 10px;
+  background: linear-gradient(135deg, rgba(0, 20, 40, 0.6), rgba(0, 10, 20, 0.6));
+  border: 1px solid rgba(0, 212, 255, 0.3);
+  border-radius: 8px;
 }
 
-.status-card {
-  flex: 1;
-  background: linear-gradient(135deg, rgba(0, 60, 120, 0.6), rgba(0, 30, 60, 0.6));
-  border: 1px solid rgba(0, 213, 255, 0.4);
-  border-radius: 6px;
-  padding: 12px 8px;
+/* 状态圆圈 */
+.status-circle {
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  border: 2px solid #00d5ff;
+  background: transparent;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 0 15px rgba(0, 212, 255, 0.5);
+}
+
+.circle-inner {
   text-align: center;
-  transition: all 0.3s ease;
-  position: relative;
-  overflow: hidden;
+  color: #00d5ff;
 }
 
-.status-card::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 1px;
-  background: linear-gradient(90deg, transparent, #00d5ff, transparent);
+.circle-percentage {
+  font-size: 14px;
+  font-weight: bold;
+  text-shadow: 0 0 5px rgba(0, 212, 255, 0.8);
 }
 
-.status-card:hover {
-  border-color: rgba(0, 213, 255, 0.8);
-  box-shadow: 0 0 15px rgba(0, 213, 255, 0.4);
-  transform: translateY(-2px);
+.circle-label {
+  font-size: 10px;
+  margin-top: 1px;
 }
 
-.status-card-label {
-  font-size: 12px;
-  color: #00d5ff;
-  margin-bottom: 6px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  text-shadow: 0 0 5px rgba(0, 213, 255, 0.5);
+/* 状态图标项 */
+.status-icon-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 3px;
+  flex: 1;
 }
 
-.status-card-value {
-  font-size: 16px;
+.status-icon {
+  font-size: 20px;
+}
+
+.status-text {
+  color: #00d5ff;
+  font-size: 12px;
   font-weight: bold;
+  text-shadow: 0 0 5px rgba(0, 212, 255, 0.5);
+}
+
+.status-state {
   color: #00ff88;
-  text-shadow: 0 0 8px rgba(0, 255, 136, 0.8);
+  font-size: 11px;
+  text-shadow: 0 0 5px rgba(0, 255, 136, 0.5);
+}
+
+/* 详细信息 */
+.device-details {
+  padding: 12px;
+  background: linear-gradient(135deg, rgba(0, 20, 40, 0.6), rgba(0, 10, 20, 0.6));
+  border: 1px solid rgba(0, 212, 255, 0.3);
+  border-radius: 8px;
+}
+
+.detail-row {
+  display: flex;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+  margin-bottom: 8px;
+}
+
+.detail-row:last-child {
+  margin-bottom: 0;
+}
+
+.detail-item {
+  flex: 1;
+  min-width: 45%;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.detail-label {
+  color: #00d5ff;
+  font-size: 12px;
+  font-weight: bold;
+  text-shadow: 0 0 5px rgba(0, 212, 255, 0.5);
+}
+
+.detail-value {
+  color: #ffffff;
+  font-size: 12px;
+  text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
 }
 
 /* 机器人状态容器 */
 .robot-status-container {
-  margin-top: 20px;
+  margin-top: 10px;
   display: flex;
   flex-direction: column;
-  gap: 15px;
+  gap: 10px;
 }
 
 .robot-bg {
   position: relative;
   width: 100%;
-  height: 200px;
+  height: 180px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -772,12 +792,11 @@ onMounted(() => {
 }
 
 .robot-image {
-  width: 180px;
-  height: 180px;
+  width: 200px;
+  height: 200px;
   object-fit: contain;
   opacity: 0.9;
   z-index: 1;
-  filter: drop-shadow(0 0 10px rgba(0, 212, 255, 0.3));
 }
 
 /* 运行参数卡片 */
@@ -880,245 +899,90 @@ onMounted(() => {
   color: #ff4444;
 }
 
-/* 巡检任务区域 */
-.task-section h4 {
-  color: #00d5ff;
-  font-size: 14px;
-  margin: 0 0 12px 0;
-  text-shadow: 0 0 8px rgba(0, 212, 255, 0.8);
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
 
-.task-section h4::before {
-  content: '●';
-  font-size: 10px;
-  color: #00d5ff;
-  animation: pulse 2s infinite;
-}
 
-.route-info {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
+/* 任务表格 */
+.task-table {
+  width: 100%;
+  border-collapse: collapse;
 }
 
-.route-item {
+.task-table-header {
   display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.route-label {
-  color: #00d5ff;
-  font-size: 13px;
-  font-weight: bold;
-  text-shadow: 0 0 5px rgba(0, 212, 255, 0.5);
-}
-
-.route-value {
-  color: #00ff88;
-  font-size: 14px;
-  background: linear-gradient(135deg, rgba(0, 20, 40, 0.6), rgba(0, 10, 20, 0.6));
-  padding: 10px;
-  border-radius: 6px;
-  border: 1px solid rgba(0, 212, 255, 0.2);
-  text-shadow: 0 0 5px rgba(0, 255, 136, 0.5);
-}
-
-.route-select {
-  background: linear-gradient(135deg, rgba(0, 20, 40, 0.8), rgba(0, 10, 20, 0.8));
-  color: #ffffff;
-  border: 1px solid rgba(0, 212, 255, 0.4);
-  border-radius: 6px;
+  background: linear-gradient(135deg, rgba(0, 60, 120, 0.6), rgba(0, 30, 60, 0.6));
+  border: 1px solid rgba(0, 212, 255, 0.3);
+  border-radius: 6px 6px 0 0;
   padding: 10px;
-  font-size: 14px;
-  transition: all 0.3s ease;
-}
-
-.route-select:hover {
-  border-color: rgba(0, 212, 255, 0.8);
-  box-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
-}
-
-.route-progress {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
+  font-weight: bold;
 }
 
-.progress-label {
+.task-table-col {
+  flex: 1;
   color: #00d5ff;
-  font-size: 13px;
-  font-weight: bold;
   text-shadow: 0 0 5px rgba(0, 212, 255, 0.5);
+  text-align: center;
 }
 
-.progress-bar {
-  width: 100%;
-  height: 10px;
-  background: rgba(0, 10, 20, 0.6);
-  border: 1px solid rgba(0, 212, 255, 0.2);
-  border-radius: 6px;
-  overflow: hidden;
+.task-name-col {
+  flex: 2;
+  text-align: left;
 }
 
-.progress-fill {
-  height: 100%;
-  background: linear-gradient(90deg, #00d5ff, #00ff88);
-  border-radius: 6px;
-  transition: width 0.5s ease;
-  box-shadow: 0 0 10px rgba(0, 255, 136, 0.5);
+.task-duration-col {
+  flex: 1;
 }
 
-.progress-text {
-  color: #00ff88;
-  font-size: 12px;
-  text-align: right;
-  text-shadow: 0 0 5px rgba(0, 255, 136, 0.5);
+.task-action-col {
+  flex: 1;
 }
 
-/* 任务下达区域 */
-.task-input {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
+.task-table-body {
+  border: 1px solid rgba(0, 212, 255, 0.3);
+  border-top: none;
+  border-radius: 0 0 6px 6px;
+  overflow: hidden;
 }
 
-.task-input-item {
+.task-table-row {
   display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.task-input-item label {
-  color: #00d5ff;
-  font-size: 13px;
-  font-weight: bold;
-  text-shadow: 0 0 5px rgba(0, 212, 255, 0.5);
-}
-
-.task-select {
-  background: linear-gradient(135deg, rgba(0, 20, 40, 0.8), rgba(0, 10, 20, 0.8));
-  color: #ffffff;
-  border: 1px solid rgba(0, 212, 255, 0.4);
-  border-radius: 6px;
   padding: 10px;
-  font-size: 14px;
+  border-bottom: 1px solid rgba(0, 212, 255, 0.2);
+  background: linear-gradient(135deg, rgba(0, 20, 40, 0.6), rgba(0, 10, 20, 0.6));
   transition: all 0.3s ease;
-}
-
-.task-select:hover {
-  border-color: rgba(0, 212, 255, 0.8);
-  box-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
-}
-
-.checkbox-group {
-  display: flex;
-  gap: 15px;
-  flex-wrap: wrap;
-}
-
-.checkbox-group label {
   color: #ffffff;
-  font-size: 13px;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  cursor: pointer;
-  transition: all 0.3s ease;
 }
 
-.checkbox-group label:hover {
-  color: #00d5ff;
-  text-shadow: 0 0 5px rgba(0, 212, 255, 0.8);
+.task-table-row:last-child {
+  border-bottom: none;
 }
 
-.checkbox-group input[type="checkbox"] {
-  accent-color: #00d5ff;
+.task-table-row:hover {
+  background: linear-gradient(135deg, rgba(0, 30, 60, 0.6), rgba(0, 20, 40, 0.6));
+  border-color: rgba(0, 212, 255, 0.5);
+  box-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
 }
 
-.task-btn {
+.execute-btn {
   background: linear-gradient(90deg, #00d5ff, #0066cc);
   color: #ffffff;
   border: none;
-  border-radius: 6px;
-  padding: 12px;
-  font-size: 14px;
+  border-radius: 4px;
+  padding: 6px 12px;
+  font-size: 12px;
   font-weight: bold;
   cursor: pointer;
   transition: all 0.3s ease;
-  margin-top: 10px;
   text-shadow: 0 0 5px rgba(0, 212, 255, 0.8);
-  box-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
+  box-shadow: 0 0 5px rgba(0, 212, 255, 0.3);
 }
 
-.task-btn:hover {
+.execute-btn:hover {
   background: linear-gradient(90deg, #0066cc, #00d5ff);
-  transform: translateY(-2px);
-  box-shadow: 0 0 15px rgba(0, 212, 255, 0.6);
-}
-
-/* 任务列表 */
-.task-list h5 {
-  color: #00d5ff;
-  font-size: 13px;
-  margin: 0 0 12px 0;
-  text-shadow: 0 0 8px rgba(0, 212, 255, 0.8);
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.task-list h5::before {
-  content: '●';
-  font-size: 10px;
-  color: #00d5ff;
-  animation: pulse 2s infinite;
-}
-
-.task-list-item {
-  background: linear-gradient(135deg, rgba(0, 20, 40, 0.6), rgba(0, 10, 20, 0.6));
-  border-radius: 6px;
-  padding: 12px;
-  border-left: 3px solid #00d5ff;
-  border: 1px solid rgba(0, 212, 255, 0.2);
-  transition: all 0.3s ease;
-}
-
-.task-list-item:hover {
-  border-color: rgba(0, 212, 255, 0.5);
-  box-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
-}
-
-.task-id {
-  color: #00ff88;
-  font-size: 14px;
-  font-weight: bold;
-  margin-bottom: 8px;
-  text-shadow: 0 0 5px rgba(0, 255, 136, 0.5);
+  transform: translateY(-1px);
+  box-shadow: 0 0 10px rgba(0, 212, 255, 0.6);
 }
 
-.task-info {
-  display: flex;
-  flex-direction: column;
-  gap: 5px;
-}
 
-.task-info span {
-  color: #ffffff;
-  font-size: 12px;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.task-info span::before {
-  content: '▸';
-  font-size: 10px;
-  color: #00d5ff;
-}
 
 /* 预警成果区域 */
 .warning-section h4 {