实时监控台视频流修改

src/constant/constants.js

@@ -28,6 +28,13 @@ export const BOOLEAN_INVERSE_TYPE = {
   1: "否",
   0: "是",
 };
+// 视频流类型
+export const VIDEO_SOURCE_TYPE = {
+  CLIENT_CAMERA: "电脑摄像头",
+  CLIENT_SCREEN: "电脑屏幕",
+  MOBILE_FIRST: "手机主机位",
+  MOBILE_SECOND: "手机辅机位",
+};
 // 考生在线状态
 export const STUDENT_ONLINE_STATUS = {
   FIRST_PREPARE: "已待考",

src/features/invigilation/OnlinePatrol/PatrolWarningDetail.vue

@@ -274,6 +274,10 @@ export default {
           "POWER_CUT",
         ],
       };
+      const transformInfo = {
+        FIRST_START: "身份识别",
+        ANSWERING: "进入考试",
+      };
       let statusTypeMap = {};
       Object.keys(statusTypes).map((k) => {
         statusTypes[k].map((item) => {
@@ -290,7 +294,7 @@ export default {
           info.title = content[1];
           info.desc = content[2];
         } else {
-          info.title = content[0];
+          info.title = transformInfo[info.type] || content[0];
         }
         if (info.remark && info.remark.includes('{"')) {
           info.remark = JSON.parse(info.remark);

src/features/invigilation/RealtimeMonitoring/RealtimeMonitoring.vue

@@ -155,9 +155,14 @@
                 v-for="item in viewingAngles"
                 :key="item.code"
                 :command="item"
-                :class="{ 'color-primary': item.code === curViewingAngle.code }"
               >
-                {{ item.name }}
+                <span
+                  :class="{
+                    'color-primary': item.code === curViewingAngle.code,
+                  }"
+                >
+                  {{ item.name }}
+                </span>
               </el-dropdown-item>
             </el-dropdown-menu>
           </el-dropdown>
@@ -206,14 +211,24 @@
           ></right-or-wrong>
         </template>
       </el-table-column>
-      <el-table-column prop="monitorStatusSource" label="推流通讯">
+      <el-table-column
+        v-for="source in viewingAngles"
+        :key="source.param"
+        :prop="source.param"
+        :label="`${source.name}通讯`"
+      >
         <template slot-scope="scope">
           <right-or-wrong
-            :status="MONITOR_STATUS_SOURCE[scope.row.monitorStatusSource]"
+            :status="MONITOR_STATUS_SOURCE[scope.row[source.param]]"
           ></right-or-wrong>
         </template>
       </el-table-column>
-      <el-table-column prop="clientCurrentIp" label="IP"></el-table-column>
+      <el-table-column
+        prop="clientCurrentIp"
+        label="IP"
+        v-if="curExamBatch.enableIpLimit"
+      >
+      </el-table-column>
       <el-table-column prop="updateTime" label="更新时间">
         <span slot-scope="scope">
           {{ scope.row.updateTime | datetimeFilter }}
@@ -295,6 +310,7 @@ import handleRollupDialog from "./handleRollupDialog";
 import TextClock from "../common/TextClock";
 import {
   BOOLEAN_TYPE,
+  VIDEO_SOURCE_TYPE,
   BOOLEAN_INVERSE_TYPE,
   STUDENT_ONLINE_STATUS,
   CLIENT_WEBSOCKET_STATUS,
@@ -320,12 +336,14 @@ export default {
         paperDownload: null,
         status: null,
         monitorStatusSource: null,
+        monitorVideoSource: null,
         name: null,
         identity: null,
         maxWarningCount: undefined,
         minWarningCount: undefined,
       },
       BOOLEAN_TYPE,
+      VIDEO_SOURCE_TYPE,
       BOOLEAN_INVERSE_TYPE,
       STUDENT_ONLINE_STATUS,
       CLIENT_WEBSOCKET_STATUS,
@@ -347,24 +365,13 @@ export default {
       subjects: [],
       pageType: "0",
       dataList: [],
-      viewingAngles: [
-        {
-          code: "client_camera",
-          name: "电脑摄像头",
-        },
-        {
-          code: "client_screen",
-          name: "电脑屏幕",
-        },
-        {
-          code: "mobile_first",
-          name: "手机主机位",
-        },
-        {
-          code: "mobile_second",
-          name: "手机辅机位",
-        },
-      ],
+      videoSourceStatusParams: {
+        CLIENT_CAMERA: "cameraMonitorStatusSource",
+        CLIENT_SCREEN: "screenMonitorStatusSource",
+        MOBILE_FIRST: "mobileFirstMonitorStatusSource",
+        MOBILE_SECOND: "mobileSecondMonitorStatusSource",
+      },
+      viewingAngles: [],
     };
   },
   created() {
@@ -415,6 +422,21 @@ export default {
       if (!examBatch) return;
       this.filter.examId = examBatch.id;
       this.curExamBatch = examBatch;
+      if (examBatch.monitorVideoSource) {
+        this.viewingAngles = examBatch.monitorVideoSource
+          .split(",")
+          .map((item) => {
+            return {
+              code: item,
+              name: this.VIDEO_SOURCE_TYPE[item],
+              param: this.videoSourceStatusParams[item],
+            };
+          });
+      } else {
+        this.viewingAngles = [];
+      }
+      this.curViewingAngle = this.viewingAngles[0] || {};
+      this.filter.monitorVideoSource = this.curViewingAngle.code || "";
 
       this.toSearch();
 
@@ -441,8 +463,11 @@ export default {
       this.multipleSelection = [];
     },
     viewingAngleChange(data) {
+      if (data.code === this.curViewingAngle.code) return;
       this.curViewingAngle = data;
-      // TODO:视角切换
+      this.filter.monitorVideoSource = data.code;
+      this.dataList = [];
+      this.getList();
     },
     async getList() {
       const datas = {

src/features/invigilation/RealtimeMonitoring/WarningDetail.vue

@@ -443,6 +443,10 @@ export default {
           "POWER_CUT",
         ],
       };
+      const transformInfo = {
+        FIRST_START: "身份识别",
+        ANSWERING: "进入考试",
+      };
       let statusTypeMap = {};
       Object.keys(statusTypes).map((k) => {
         statusTypes[k].map((item) => {
@@ -459,7 +463,7 @@ export default {
           info.title = content[1];
           info.desc = content[2];
         } else {
-          info.title = content[0];
+          info.title = transformInfo[info.type] || content[0];
         }
         if (info.remark && info.remark.includes('{"')) {
           info.remark = JSON.parse(info.remark);