feat: 院区重点的监控视频

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

@@ -1,10 +1,10 @@
 <template>
   <div class="company-home">
-    <RealtimeSurveillance v-if="curCamCode" :code="curCamCode" />
+    <RealtimeSurveillance v-if="curCamera?.code" />
     <img v-else style="width: 100%" src="@/assets/images/sfy.jpg" alt="" />
-    <CompanyRating />
+    <CompanyRating v-if="!curCamera?.code" />
     <ControlTab @open-surveillance-list="showSurveillanceList = true" @open-question-list="showQuestionList = true" />
-    <SurveillanceList v-if="showSurveillanceList" :cur-cam-code="curCamCode" @close="showSurveillanceList = false" />
+    <SurveillanceList v-if="showSurveillanceList" @close="showSurveillanceList = false" />
 
     <!-- <QuestionList v-if="showQuestionList" /> -->
   </div>
@@ -18,14 +18,21 @@
   import QuestionList from '../safety-question-list/QuestionList.vue';
 
   import useViolationNoticeCompany from './hooks/use-violation-notice-company';
-  import { ref } from 'vue';
-
-  const curCamCode = ref<null | string>(null);
+  import useCameraStore from './stores/use-camera-store';
+  import { onUnmounted, ref } from 'vue';
+  import { storeToRefs } from 'pinia';
 
   const showSurveillanceList = ref(false);
   const showQuestionList = ref(false);
 
   useViolationNoticeCompany();
+
+  const cameraStore = useCameraStore();
+  const { curCamera } = storeToRefs(cameraStore);
+
+  onUnmounted(() => {
+    cameraStore.clearCurCamera();
+  });
 </script>
 
 <style scoped>

src/views/institute-safety/modules/safety-company-home/apis/index.ts

@@ -10,9 +10,17 @@ export function getTodayIssueNumber() {
     method: 'get',
   });
 }
+// 通过相机id分页查询异常告警问题列表
+export function getIssueListByCameraId(data: QueryPageRequest<number>) {
+  return http.request<QueryPageResponse<IssueItem>>({
+    url: '/issue/queryIssuePageByWorkshopCodes',
+    method: 'post',
+    data,
+  });
+}
 
-// 查询分页异常告警问题列表
-export function getIssueList(data: QueryPageRequest<{ workshopCodeList: string[] }>) {
+// 通过车间code分页查询异常告警问题列表
+export function getIssueListByWorkshopCode(data: QueryPageRequest<{ workshopCodeList: string[] }>) {
   return http.request<QueryPageResponse<IssueItem>>({
     url: '/issue/queryIssuePageByWorkshopCodes',
     method: 'post',

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

@@ -1,7 +1,61 @@
 <template>
-  <div> </div>
+  <div class="realtime-surveillance">
+    <LiveVideo :url="getCurCameraUrl()" :poster="getCurCameraImg()" :id="`monitor-livevideo`" class="main-video" />
+    <img src="@/assets/images/institute-safety/close.png" alt="" class="video-close" @click="clearCurCamera()" />
+
+    <img
+      src="@/assets/images/disaster-overview/full-screen.png"
+      alt=""
+      class="full-screen"
+      @click="isFullScreen ? exitFullscreen() : fullScreen(`monitor-livevideo`, 'overview-monitor')"
+    />
+  </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+  import LiveVideo from '@/components/live/LiveVideo.vue';
+  import useCameraStore from '../stores/use-camera-store';
+  import { userSplitScreenFullScreen } from '@/store/modules/userSplitScreenFullScreen';
+  import { storeToRefs } from 'pinia';
+  import screenfull from 'screenfull';
+
+  const { isFullScreen, curFullScreenType } = storeToRefs(userSplitScreenFullScreen());
+  const { fullScreen, exitFullscreen } = userSplitScreenFullScreen();
+
+  const cameraStore = useCameraStore();
+
+  window.onresize = () => {
+    if (!screenfull.isFullscreen) {
+      isFullScreen.value = false; //判断退出全屏，进行赋值
+      curFullScreenType.value = 'single';
+    }
+  };
+
+  const { clearCurCamera, getCurCameraUrl, getCurCameraImg } = cameraStore;
+</script>
 
-<style scoped></style>
+<style scoped>
+  .realtime-surveillance {
+    width: 100%;
+    height: 100%;
+  }
+  .main-video {
+    height: 100%;
+  }
+  .video-close {
+    position: absolute;
+    right: 20px;
+    top: 20px;
+    width: 20px;
+    height: 20px;
+    cursor: pointer;
+  }
+  .full-screen {
+    position: absolute;
+    left: 20px;
+    bottom: 20px;
+    width: 30px;
+    height: 30px;
+    cursor: pointer;
+  }
+</style>

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

@@ -1,7 +1,7 @@
 <template>
   <div class="surveillance-list">
     <header class="list-header">
-      <img class="config-btn" src="@/assets/images/institute-safety/config.png" alt="" />
+      <img class="config-btn" src="@/assets/images/institute-safety/config.png" alt="" @click="handleToPlatform" />
       <span> 重点监控区域 </span>
       <img class="close-btn" src="@/assets/images/institute-safety/close.png" alt="" @click="emits('close')" />
     </header>
@@ -12,10 +12,10 @@
         </div>
         <div
           class="surveillance-camera"
-          :class="{ 'surveillance-camera_active': cam.code === curCamCode }"
+          :class="{ 'surveillance-camera_active': cam.code === curCamera?.code }"
           v-for="cam in group.children"
           :key="cam.id"
-          @click="emits('change-camera', cam.code)"
+          @click="handleChangeCamera(cam)"
         >
           <img class="camera-preview" :src="cam.pushStreamDTO.imageUrl" alt="" />
           <div class="camera-info">
@@ -33,20 +33,23 @@
 </template>
 
 <script setup lang="ts">
+  import { onMounted, ref } from 'vue';
+  import { storeToRefs } from 'pinia';
+  import { useRouter } from 'vue-router';
   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;
-  }>();
+  import type { CameraInfo } from '@/api/disaster-overview';
+  import useCameraStore from '../stores/use-camera-store';
 
   const emits = defineEmits<{
     (e: 'close'): void;
-    (e: 'change-camera', code: string): void;
+    // (e: 'change-camera', code: string): void;
   }>();
 
+  const cameraStore = useCameraStore();
+  const { curCamera } = storeToRefs(cameraStore);
+
   const surveillanceAreaList = ref<PositionMonitorCameraListRes[]>([]);
 
   const getListData = () => {
@@ -55,6 +58,17 @@
     });
   };
 
+  const router = useRouter();
+  function handleToPlatform() {
+    router.push({
+      name: 'SystemSurveillance',
+    });
+  }
+
+  function handleChangeCamera(camera: CameraInfo) {
+    cameraStore.setCurCamera(camera);
+  }
+
   onMounted(() => {
     getListData();
   });
@@ -114,6 +128,7 @@
     text-align: center;
   }
   .surveillance-camera {
+    cursor: pointer;
     position: relative;
     margin-top: 16px;
     width: 249px;

src/views/institute-safety/modules/safety-company-home/stores/use-camera-store.ts

@@ -0,0 +1,69 @@
+import type { CameraInfo } from '@/api/disaster-overview';
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+import urlJoin from 'url-join';
+
+const useCameraStore = defineStore('camera', () => {
+  //   const curWorkshopCode = ref('');
+  const curCamera = ref<CameraInfo | null>(null);
+
+  //   const setCurWorkshopCode = (val: string) => {
+  //     curWorkshopCode.value = val;
+  //   };
+
+  const setCurCamera = (val: CameraInfo | null) => {
+    curCamera.value = val;
+  };
+
+  const getCameraUrl = (val: CameraInfo) => {
+    if (val.pushStreamDTO && val.pushStreamDTO.videoUrls) {
+      const videoUrl = val.pushStreamDTO.videoUrls.pushstreamIp;
+      const protocol = window.location.protocol.startsWith('https') ? 'wss' : 'ws';
+      // 如果是绝对地址
+      if (videoUrl.startsWith('http')) {
+        // 如果是https的话，websocket要用wss
+        return videoUrl.replace('http', protocol);
+      }
+      const u = urlJoin(
+        `${protocol}://`,
+        window.location.host,
+        window.location.pathname === '/' ? '' : window.location.pathname,
+        videoUrl,
+      );
+      return u;
+    }
+    return '';
+  };
+
+  const getCameraImg = (val: CameraInfo) => {
+    if (val.pushStreamDTO && val.pushStreamDTO.imageUrl) {
+      return val.pushStreamDTO.imageUrl;
+    }
+    return '';
+  };
+
+  const getCurCameraUrl = () => {
+    return curCamera.value ? getCameraUrl(curCamera.value) : '';
+  };
+
+  const getCurCameraImg = () => {
+    return curCamera.value ? getCameraImg(curCamera.value) : '';
+  };
+
+  const clearCurCamera = () => {
+    // curWorkshopCode.value = '';
+    curCamera.value = null;
+  };
+
+  return {
+    // curWorkshopCode,
+    curCamera,
+    // setCurWorkshopCode,
+    setCurCamera,
+    getCurCameraUrl,
+    getCurCameraImg,
+    clearCurCamera,
+  };
+});
+
+export default useCameraStore;