feat: 重点监控区域边栏

src/views/institute-safety/modules/safety-company-home/CompanyHome.vue

@@ -4,7 +4,7 @@
     <img v-else style="width: 100%" src="@/assets/images/sfy.jpg" alt="" />
     <CompanyRating />
     <ControlTab @open-surveillance-list="showSurveillanceList = true" @open-question-list="showQuestionList = true" />
-    <SurveillanceList v-if="showSurveillanceList" @close="showSurveillanceList = false" />
+    <SurveillanceList v-if="showSurveillanceList" :cur-cam-code="curCamCode" @close="showSurveillanceList = false" />
 
     <!-- <QuestionList v-if="showQuestionList" /> -->
   </div>
@@ -16,8 +16,8 @@
   import SurveillanceList from './components/SurveillanceList.vue';
   import RealtimeSurveillance from './components/RealtimeSurveillance.vue';
   import QuestionList from '../safety-question-list/QuestionList.vue';
-  import useViolationNoticeCompany from './hooks/use-violation-notice-company';
 
+  import useViolationNoticeCompany from './hooks/use-violation-notice-company';
   import { ref } from 'vue';
 
   const curCamCode = ref<null | string>(null);
@@ -31,7 +31,9 @@
 <style scoped>
   .company-home {
     width: 100%;
+    height: 675px;
     position: relative;
     overflow: hidden;
+    border-radius: 5px;
   }
 </style>

src/views/institute-safety/modules/safety-company-home/components/ControlTab.vue

@@ -55,7 +55,6 @@
     cursor: pointer;
 
     width: 16px;
-    /* height: 75px; */
     background: rgba(50, 50, 50, 1);
     backdrop-filter: blur(10px);
   }

src/views/institute-safety/modules/safety-company-home/components/SurveillanceList.vue

@@ -5,14 +5,59 @@
       <span> 重点监控区域 </span>
       <img class="close-btn" src="@/assets/images/institute-safety/close.png" alt="" @click="emits('close')" />
     </header>
-    <main> </main>
+    <main class="surveillance-list-main">
+      <div class="surveillance-group" v-for="group in surveillanceAreaList" :key="group.id">
+        <div class="group-title">
+          {{ group.groupName }}
+        </div>
+        <div
+          class="surveillance-camera"
+          :class="{ 'surveillance-camera_active': cam.code === curCamCode }"
+          v-for="cam in group.children"
+          :key="cam.id"
+          @click="emits('change-camera', cam.code)"
+        >
+          <img class="camera-preview" :src="cam.pushStreamDTO.imageUrl" alt="" />
+          <div class="camera-info">
+            <div class="camera-name">
+              <img src="@/assets/images/institute-safety/camera.png" alt="" />
+              <el-tooltip placement="top" :content="cam.name">
+                <span class="camera-name-text">{{ cam.name }}</span>
+              </el-tooltip>
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
   </div>
 </template>
 
 <script setup lang="ts">
+  import { ElTooltip } from 'element-plus';
+  import { getSurveillanceAreaList } from '@/api/security-confidentiality-position';
+  import type { PositionMonitorCameraListRes } from '@/api/security-confidentiality-position';
+  import { onMounted, ref } from 'vue';
+
+  const props = defineProps<{
+    curCamCode: string | null;
+  }>();
+
   const emits = defineEmits<{
     (e: 'close'): void;
+    (e: 'change-camera', code: string): void;
   }>();
+
+  const surveillanceAreaList = ref<PositionMonitorCameraListRes[]>([]);
+
+  const getListData = () => {
+    getSurveillanceAreaList({ groupName: '', cameraName: '' }).then((res) => {
+      surveillanceAreaList.value = res;
+    });
+  };
+
+  onMounted(() => {
+    getListData();
+  });
 </script>
 
 <style scoped>
@@ -45,4 +90,69 @@
   .close-btn {
     cursor: pointer;
   }
+  .surveillance-list-main {
+    padding: 0 16px;
+    height: 623px;
+    overflow: auto;
+  }
+
+  .surveillance-group {
+    margin-top: 20px;
+  }
+
+  .group-title {
+    width: 86px;
+    height: 28px;
+    line-height: 26px;
+    background: rgba(0, 0, 0, 0.5);
+    border-radius: 4px;
+    border: 1px solid #000000;
+
+    font-weight: 400;
+    font-size: 14px;
+    color: #ffffff;
+    text-align: center;
+  }
+  .surveillance-camera {
+    position: relative;
+    margin-top: 16px;
+    width: 249px;
+    height: 142px;
+    border-radius: 4px;
+    border: 1px solid rgba(255, 255, 255, 0.8);
+  }
+  .surveillance-camera_active {
+    border: 1px solid #409eff;
+    box-shadow: 0px 0px 5px 5px rgba(64, 158, 255, 0.44);
+  }
+  .camera-preview {
+    width: 100%;
+  }
+  .camera-info {
+    position: absolute;
+    bottom: 0;
+    width: 248px;
+    height: 80px;
+    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
+
+    display: flex;
+    align-items: flex-end;
+    justify-content: flex-start;
+    padding: 8px 12px;
+  }
+  .camera-name {
+    font-weight: 500;
+    font-size: 12px;
+    color: #ffffff;
+
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+  .camera-name-text {
+    max-width: 200px;
+    white-space: nowrap; /* 防止文本换行 */
+    overflow: hidden; /* 隐藏溢出的文本 */
+    text-overflow: ellipsis; /* 显示省略号 */
+  }
 </style>

src/views/institute-safety/modules/safety-workshop-list/WorkshopList.vue

@@ -263,6 +263,7 @@
 
 <style scoped>
   .workshop-list {
+    margin-top: 8px;
     display: grid;
     grid-template-columns: repeat(auto-fill, 200px);
   }