fix: 修复组相机配置样式问题以及详情页回到列表页面tab跟随切换

src/views/cameras/preview/CameraPreview.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="container-box">
     <div class="tabs">
-      <div class="tab" :class="{ active: activeName === 'single' }" @click="activeName = 'single'"> 单相机配置 </div>
-      <div class="tab" :class="{ active: activeName === 'group' }" @click="activeName = 'group'"> 组相机配置 </div>
+      <div class="tab" :class="{ active: activeName === 'single' }" @click="handleChangeTab('single')"> 单相机配置 </div>
+      <div class="tab" :class="{ active: activeName === 'group' }" @click="handleChangeTab('group')"> 组相机配置 </div>
     </div>
     <component :is="currentComponent" />
   </div>
@@ -10,10 +10,17 @@
 
 <script lang="ts" setup>
   import { computed, ref } from 'vue';
+  import { useRouter, useRoute } from 'vue-router';
   import CameraConfigSingle from './components/CameraConfigSingle/CameraConfigSingle.vue';
   import CameraConfigGroup from './components/CameraConfigGroup/CameraConfigGroup.vue';
 
-  const activeName = ref('single');
+  const router = useRouter();
+  const route = useRoute();
+  const activeName = ref(route.query.type || 'single');
+  const handleChangeTab = (name: string) => {
+    activeName.value = name;
+    router.push({ path: '/algorithm/config', query: { type: name }})
+  }
   const currentComponent = computed(() => {
     return activeName.value === 'single' ? CameraConfigSingle : CameraConfigGroup;
   });

src/views/cameras/preview/components/CameraConfigGroup/CameraConfigGroup.vue

@@ -1,81 +1,79 @@
 <template>
   <div class="cameraConfigGroup">
-     <el-card>
-      <template #header>
-        <el-button
-          type="primary"
-          @click="createGroupDialog = true"
-          style="margin-top: 24px; margin-bottom: 16px; width: 138px"
-          v-permission="{ action: [PERM_ALGO.CONFIG_ADD_GROUP] }"
-        >
-          <img src="@/assets/images/create.png" style="margin-top: -1px; margin-right: 5px" />新建相机分组
-        </el-button>
-      </template>
-      <el-table
-        :data="cameraGroupList"
-        :span-method="objectSpanMethod"
-        height="calc(100vh - 380px)"
-        style="width: 100%; margin-top: 16px; --el-table-border-color: none"
-        v-loading="loading"
-      >
-        <el-table-column prop="id" label="组序号"  width="70"/>
-        <el-table-column prop="cameraName" label="相机名称" align="center">
-          <template #default="scope">
-            <div class="cameraName-text" v-if="scope.row.isMainCamera === IsMainCamera.YES">
-              <el-icon><Star color="Gold" /></el-icon>
-              {{ scope.row.cameraName }}
-            </div>
-          </template>  
-        </el-table-column>
-        <el-table-column prop="cameraCode" label="设备ID"/>
-        <el-table-column prop="location" label="地点"/>
-        <el-table-column prop="algoName" label="算法">
-          <template #default="scope">
-            <div class="algoId-text" @click="handleView(scope.row)">
-              {{ scope.row.algoName }}
-            </div>
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" fixed="right" width="120px">
-          <template #default="scope">
-            <div class="operation">
-              <el-tooltip effect="light" content="关闭/开启" placement="bottom">
-                <el-switch 
-                  :model-value="scope.row.status" 
-                  :inactive-value="CameraGroupStatus.CLOSE"
-                  :active-value="CameraGroupStatus.OPEN"
-                  @update:model-value="(val) => handleSwitch(val, scope.row)"/>
-              </el-tooltip>
-              
-              <el-tooltip effect="light" content="删除" placement="bottom">
-                <img src="@/views/message/alarmMessages/img/delete.png" 
-                @click="handleDelete(scope.row)" 
-                 v-permission="{ action: [PERM_ALGO.CONFIG_DELETE_GROUP] }"
-                />
-              </el-tooltip>
-            </div>
-          </template>
-        </el-table-column>
-
-        <template #empty>
-          <div class="emptyDiv">
-            <img src="@/assets/images/empty.png" class="emptyImg" />
-            <span class="emptySpan">暂无数据</span>
+    <el-button
+      type="primary"
+      @click="createGroupDialog = true"
+      style="margin: 10px 0;"
+      v-permission="{ action: [PERM_ALGO.CONFIG_ADD_GROUP] }"
+    >
+      <img src="@/assets/images/create.png" style="margin-top: -1px; margin-right: 5px" />新建相机分组
+    </el-button>
+    <el-table
+      :data="cameraGroupList"
+      :span-method="objectSpanMethod"
+      height="calc(100vh - 380px)"
+      style="width: 100%; margin-top: 16px; --el-table-border-color: none"
+      v-loading="loading"
+      :row-class-name="tableRowClassName"
+    >
+      <el-table-column prop="id" label="组序号"  width="70"/>
+      <el-table-column prop="cameraName" label="相机名称" align="center">
+        <template #default="scope">
+          <div class="cameraName-text" v-if="scope.row.isMainCamera === IsMainCamera.YES">
+            <el-icon><Star color="Gold" /></el-icon>
+            {{ scope.row.cameraName }}
+          </div>
+        </template>  
+      </el-table-column>
+      <el-table-column prop="cameraCode" label="设备ID"/>
+      <el-table-column prop="location" label="地点"/>
+      <el-table-column prop="algoName" label="算法">
+        <template #default="scope">
+          <div class="algoId-text" @click="handleView(scope.row)">
+            {{ scope.row.algoName }}
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" fixed="right" width="120px">
+        <template #default="scope">
+          <div class="operation">
+            <el-tooltip effect="light" content="关闭/开启" placement="bottom">
+              <el-switch 
+                :model-value="scope.row.status" 
+                :inactive-value="CameraGroupStatus.CLOSE"
+                :active-value="CameraGroupStatus.OPEN"
+                @update:model-value="(val) => handleSwitch(val, scope.row)"/>
+            </el-tooltip>
+            
+            <el-tooltip effect="light" content="删除" placement="bottom">
+              <img src="@/views/message/alarmMessages/img/delete.png" 
+              @click="handleDelete(scope.row)" 
+                v-permission="{ action: [PERM_ALGO.CONFIG_DELETE_GROUP] }"
+              />
+            </el-tooltip>
           </div>
         </template>
-      </el-table>
-      <section class="mt-4 flex justify-end">
-        <el-pagination
-          background
-          layout="total, sizes, prev, pager, next"
-          :page-sizes="[10, 30, 50]"
-          :total="total"
-          v-model:page-size="requestParams.pageSize"
-          v-model:current-page="requestParams.pageNumber"
-          @change="queryCameraGroupPage"
-        />
-      </section>
-    </el-card>
+      </el-table-column>
+
+      <template #empty>
+        <div class="emptyDiv">
+          <img src="@/assets/images/empty.png" class="emptyImg" />
+          <span class="emptySpan">暂无数据</span>
+        </div>
+      </template>
+    </el-table>
+    <section class="mt-4 flex justify-end">
+      <el-pagination
+        background
+        layout="total, sizes, prev, pager, next"
+        :page-sizes="[10, 30, 50]"
+        :total="total"
+        v-model:page-size="requestParams.pageSize"
+        v-model:current-page="requestParams.pageNumber"
+        @change="queryCameraGroupPage"
+      />
+    </section>
+    <!-- </el-card> -->
 
     <!--删除弹窗 -->
     <el-dialog v-model="deleteDialog" width="424px" top="20%" class="deleteDialog">
@@ -120,6 +118,16 @@ const createGroupDialog = ref(false);
 const deleteDialog = ref(false);
 const cameraDetectionGroupId = ref();
 
+const tableRowClassName = ({
+  row,
+}: {
+  row: CameraGroupTableItem
+}) => {
+  // 根据分组ID计算颜色索引（使用模运算实现颜色循环）
+  const groupColors = ['normal', 'active'];
+  const groupId = row.cameraDetectionGroupId;
+  return groupColors[groupId % 3];
+}
 
 const objectSpanMethod = ({
   row,
@@ -223,6 +231,7 @@ const handleView = (row: CameraGroupTableItem) => {
     path: '/algorithm/camera-group',
     query: {
       groupId: row.cameraDetectionGroupId,
+      cameraId: row.cameraId
     }
   })
 }
@@ -289,5 +298,19 @@ onMounted(() => {
     
   }
 
+ .el-table {
+    :deep(.normal) {
+      --el-table-tr-bg-color: #fff;
+      &:hover {
+        --el-table-tr-bg-color: #fff;
+      }
+    }
+    :deep(.active) {
+      --el-table-tr-bg-color: #fafafa;
+      &:hover {
+        --el-table-tr-bg-color: #fafafa;
+      }
+    }
+  }
 
 </style>

src/views/cameras/preview/components/CameraConfigGroup/components/SettingCamera.vue

@@ -27,7 +27,7 @@
     <div class="camera-item">
       <p class="camera-header"> 已选相机 </p>
       <div class="camera-content">
-        <div class="select-item" v-for="item in selectedCameraList" :key="item.code">
+        <div class="select-item"  :class="item.isActive ? 'active' : ''" v-for="item in selectedCameraList" :key="item.code">
           <div class="select-botton">
             <el-icon @click="handleSelectIcon(item)"
               ><Star :color="item.isMainCamera === IsMainCamera.YES ? 'Gold' : 'gray'"
@@ -35,10 +35,10 @@
           </div>
           <div class="select-content">
             <div class="content-main" @click="handleSelect(item)">
-              <p class="name" :class="item.isActive ? 'active' : ''">{{ item.name }}</p>
+              <p class="name"  :class="item.algoName !== '' ? 'seleced-algo': ''">{{ item.name }}</p>
               <p class="message">{{ item.algoName }}</p>
             </div>
-            <el-icon class="delete-icon" @click="handleDelete(item)"><Close color="#fff" /></el-icon>
+            <el-icon class="delete-icon" @click="handleDelete(item)"><Close color="#333" /></el-icon>
           </div>
         </div>
       </div>
@@ -211,6 +211,10 @@
   };
 
   const handleSelect = (row: SelectOption) => {
+    if (groupAlgoData.value.length === 0) {
+      getGroupLAlgoList();
+    }
+    
     selectedCameraList.value.map((item) => {
       if (item.code === row.code) {
         item.isActive = true;
@@ -222,6 +226,7 @@
   };
 
   const handleSelectIcon = (row: SelectOption) => {
+   
     selectedCameraList.value.map((item) => {
       if (item.code === row.code) {
         item.isMainCamera = item.isMainCamera === IsMainCamera.YES ? IsMainCamera.NO : IsMainCamera.YES;
@@ -321,7 +326,7 @@
 
   onMounted(() => {
     getCameraData();
-    getGroupLAlgoList();
+    // getGroupLAlgoList();
   });
 </script>
 
@@ -350,7 +355,7 @@
         line-height: 40px;
         color: #333;
         cursor: pointer;
-        background-color: #dcdfe6;
+        background-color: #e6e0dc;
         padding-left: 20px;
         display: flex;
         align-items: center;
@@ -371,13 +376,23 @@
         background-color: #fff;
         overflow-y: auto;
         border: 1px solid #dcdfe6;
-        padding: 10px 20px;
+        padding: 10px 10px;
 
         .select-item {
           display: flex;
-          align-self: start;
           justify-content: center;
+          align-items: center;
           margin-bottom: 10px;
+          padding: 2px 5px ;
+         
+          &:hover {
+            background-color: #f5f7fa;
+            
+            .delete-icon {
+              display: block;
+            }
+          }
+           
 
           &:last-child {
             margin-bottom: 0;
@@ -385,10 +400,12 @@
 
           .select-botton {
             cursor: pointer;
+            display: flex;
+            align-items: center;
           }
 
           .select-content {
-            position: relative; // 新增
+            position: relative; 
             margin-left: 5px;
             width: 100%;
 
@@ -402,23 +419,23 @@
               padding-left: 5px;
             }
 
+            .seleced-algo {
+              color: #0052d9;
+            }
+
             &:hover {
-              background-color: #409eff;
-              .name {
-                color: #fff;
-              }
               .delete-icon {
                 display: block;
               }
             }
-
+           
             .delete-icon {
               // 新增删除图标样式
               display: none;
               position: absolute;
-              right: 10px;
+              right: 5px;
               top: 50%;
-              transform: translateY(-50%);
+              transform: translateY(-45%);
               width: 16px;
               height: 16px;
               cursor: pointer;
@@ -430,11 +447,13 @@
               cursor: pointer;
             }
 
-            .active {
-              color: #0052d9;
-            }
+           
           }
         }
+        .active {
+          // color: #0052d9;
+          background-color: #f5f7fa;
+        }
       }
     }
   }