测试大屏

src/features/invigilation/ExamInvigilation/ExamInvigilationFull.vue

@@ -51,6 +51,7 @@
         <div class="invi-map-chart">
           <vue-charts
             v-if="inviMapChartOption"
+            ref="InviMapChart"
             :options="inviMapChartOption"
             autoresize
           ></vue-charts>
@@ -199,6 +200,15 @@ import {
   getInviTimeOption,
   getInviMapOption,
 } from "./chartOpt";
+// import {
+//   examInvigilationCount,
+//   examInvigilationWarnDistribution,
+//   examInvigilationWarnTrend,
+//   examInvigilationVideoRandomList,
+//   examInvigilationWarnMessage,
+//   examinationMonitorMapList,
+//   examinationMonitorAreaList,
+// } from "@/api/invigilation";
 import {
   examInvigilationCount,
   examInvigilationWarnDistribution,
@@ -207,16 +217,6 @@ import {
   examInvigilationWarnMessage,
   examinationMonitorMapList,
   examinationMonitorAreaList,
-} from "@/api/invigilation";
-
-import {
-  students,
-  summary,
-  inviTypesList,
-  inviTimeList,
-  inviAreaList,
-  inviMapList,
-  inviStudentList,
 } from "./datas";
 
 export default {
@@ -261,51 +261,18 @@ export default {
     ...mapState("invigilation", ["liveDomains"]),
   },
   mounted() {
-    this.testData();
-    // this.initData();
+    this.initData();
   },
   beforeDestroy() {
     this.clearSetTs();
   },
   methods: {
-    testData() {
-      this.studentVideoList = students;
-      this.summary = summary;
-      this.inviMapList = inviMapList;
-      this.inviMapChartOption = getInviMapOption(inviMapList);
-
-      // this.parseInviTypesList(inviTypesList);
-      let maxNum = this.getMaxNum(inviTypesList.map((item) => item.warnCount));
-      this.inviTypesList = inviTypesList.map((item) => {
-        return {
-          ...item,
-          percentage: Math.floor((100 * item.warnCount) / maxNum),
-        };
-      });
-      this.inviTypesChartOption = getInviTypesOption(this.inviTypesList);
-
-      // this.parseInviAreaList(inviAreaList);
-      maxNum = this.getMaxNum(inviAreaList.map((item) => item.warnCount));
-      this.inviAreaList = inviAreaList.map((item) => {
-        return {
-          ...item,
-          percentage: Math.floor((100 * item.warnCount) / maxNum),
-        };
-      });
-      this.inviAreaChartOption = getInviAreaOption(this.inviAreaList);
-
-      // this.parseInviTimeList(inviTimeList);
-      this.inviTimeList = inviTimeList;
-      this.inviTimeChartOption = getInviTimeOption(inviTimeList);
-
-      this.inviStudentWainList = inviStudentList;
-    },
     initData() {
       this.intervalSummary();
-      // this.intervalCommonData();
-      // this.intervalStudentWain();
-      // this.intervalTimeTrend();
-      // this.intervalMap();
+      this.intervalCommonData();
+      this.intervalStudentWain();
+      this.intervalTimeTrend();
+      this.intervalMap();
     },
     addSetTime(typeName, action, time = 1 * 1000) {
       this.setTsMap[typeName].push(setTimeout(action, time));
@@ -370,21 +337,35 @@ export default {
       this.addSetTime(typeName, this.intervalMap, inTime);
     },
     intervalMapDet() {
-      if (!this.inviMapList.length) return;
       const typeName = "areaMapDet";
       this.clearSetTs(typeName);
+      if (!this.inviMapList.length) return;
 
-      if (this.curMapAreaInd >= this.inviMapList.length - 1) {
-        this.curMapAreaInd = 0;
-        return;
+      if (this.curMapAreaInd !== 0) {
+        this.$refs.InviMapChart.dispatchAction({
+          type: "hideTip",
+        });
+        this.$refs.InviMapChart.dispatchAction({
+          type: "mapUnSelect",
+          dataIndex: this.curMapAreaInd - 1,
+        });
       }
-      this.inviMapList.forEach((item) => {
-        item.selected = false;
+      this.$refs.InviMapChart.dispatchAction({
+        type: "showTip",
+        seriesIndex: 0,
+        dataIndex: this.curMapAreaInd,
       });
-      this.inviMapList[this.curMapAreaInd].selected = true;
-      this.inviMapChartOption = getInviMapOption(this.inviMapList);
+      this.$refs.InviMapChart.dispatchAction({
+        type: "mapSelect",
+        dataIndex: this.curMapAreaInd,
+      });
+
       this.curMapAreaInd++;
-      this.addSetTime(typeName, this.intervalMapDet, 5 * 1000);
+      if (this.curMapAreaInd >= this.inviMapList.length) {
+        this.curMapAreaInd = 0;
+      } else {
+        this.addSetTime(typeName, this.intervalMapDet, 5 * 1000);
+      }
     },
     // fetch action
     getMaxNum(nums) {
@@ -410,26 +391,28 @@ export default {
       });
     },
     async getMapList() {
-      // interval 60s
+      // interval list 5s
       const res = await examinationMonitorMapList();
       const dataList = res.data.data;
       this.inviMapList = dataList.map((item) => {
         item.selected = false;
         return item;
       });
-      // this.inviMapChartOption = getInviMapOption(dataList);
+      this.inviMapChartOption = getInviMapOption(this.inviMapList);
     },
     async getInviTypesList() {
       // interval 10s
       const res = await examInvigilationWarnDistribution();
       const dataList = res.data.data;
       const maxNum = this.getMaxNum(dataList.map((item) => item.warnCount));
-      this.inviTypesList = dataList.map((item) => {
+      let inviTypesList = dataList.map((item) => {
         return {
           ...item,
           percentage: Math.floor((100 * item.warnCount) / maxNum),
         };
       });
+      inviTypesList.sort((a, b) => b.warnCount - a.warnCount);
+      this.inviTypesList = inviTypesList;
       this.inviTypesChartOption = getInviTypesOption(this.inviTypesList);
     },
     async getInviAreaList() {
@@ -437,12 +420,14 @@ export default {
       const res = await examinationMonitorAreaList();
       const dataList = res.data.data;
       const maxNum = this.getMaxNum(dataList.map((item) => item.warnCount));
-      this.inviAreaList = dataList.map((item) => {
+      let inviAreaList = dataList.map((item) => {
         return {
           ...item,
           percentage: Math.floor((100 * item.warnCount) / maxNum),
         };
       });
+      inviAreaList.sort((a, b) => b.warnCount - a.warnCount);
+      this.inviAreaList = inviAreaList;
       this.inviAreaChartOption = getInviAreaOption(this.inviAreaList);
     },
     async getInviTimeList() {

src/features/invigilation/ExamInvigilation/chartOpt.js

@@ -253,6 +253,7 @@ export function getInviMapOption(dataList) {
       },
       backgroundColor: "rgba(63,67,87,0.95)",
       padding: 10,
+      triggerOn: "click",
       textStyle: {
         fontSize: 12,
         color: "#E1E6EF",

src/features/invigilation/ExamInvigilation/datas.js

@@ -1,4 +1,4 @@
-export const students = [
+export const studentVideoList = [
   {
     seq: null,
     examName: "20220506",
@@ -10,7 +10,7 @@ export const students = [
     identity: "42011406159",
     roomCode: "001",
     roomName: "测试001",
-    name: "test06159",
+    name: "李萌",
     courseName: "测试",
     courseCode: "A0002",
     paperDownload: 1,
@@ -43,7 +43,7 @@ export const students = [
     identity: "42011406194",
     roomCode: "001",
     roomName: "测试001",
-    name: "test06194",
+    name: "徐晓",
     courseName: "测试",
     courseCode: "A0002",
     paperDownload: 1,
@@ -76,7 +76,7 @@ export const students = [
     identity: "42011406050",
     roomCode: "001",
     roomName: "测试001",
-    name: "test06050",
+    name: "张国",
     courseName: "测试",
     courseCode: "A0002",
     paperDownload: 1,
@@ -109,7 +109,7 @@ export const students = [
     identity: "42011406269",
     roomCode: "001",
     roomName: "测试001",
-    name: "test06269",
+    name: "严惩",
     courseName: "测试",
     courseCode: "A0002",
     paperDownload: 1,
@@ -131,7 +131,63 @@ export const students = [
     monitorVideoSource: "CLIENT_CAMERA",
     monitorRecord: null,
   },
+  {
+    seq: null,
+    examName: "20220506",
+    examActivityCode: "1",
+    examId: "255274328714129408",
+    examActivityId: "255274329125171201",
+    examStudentId: "1522766012553355270",
+    examRecordId: "259318157805096961",
+    identity: "42011406269",
+    roomCode: "001",
+    roomName: "测试001",
+    name: "周旋",
+    courseName: "测试",
+    courseCode: "A0002",
+    paperDownload: 1,
+    status: "已待考",
+    statusCode: "FIRST_PREPARE",
+    progress: 0.0,
+    warningCount: 0,
+    clientWebsocketStatus: "OFF_LINE",
+    cameraMonitorStatusSource: null,
+    screenMonitorStatusSource: null,
+    mobileFirstMonitorStatusSource: null,
+    mobileSecondMonitorStatusSource: null,
+    clientCurrentIp: "192.168.10.136",
+    breachStatus: 1,
+    monitorLiveUrl: "oe_test_259318157805096961_client_camera",
+    updateTime: 1652767140219,
+    remainTime: "00:00:00",
+    warningNew: 0,
+    monitorVideoSource: "CLIENT_CAMERA",
+    monitorRecord: null,
+  },
 ];
+export const getStudentVideoList = () => {
+  const excludeInd = Math.floor(Math.random() * 5);
+  return studentVideoList.filter((item, index) => index !== excludeInd);
+};
+
+const getRandomNum = (minNum, maxNum) => {
+  return minNum + Math.floor(Math.random() * (maxNum - minNum));
+};
+const getSiteNum = (val, zeros = "00") => {
+  return (zeros + val).substring(("" + val).length);
+};
+const getRandomListFromList = (dataList, randomCount) => {
+  if (randomCount >= dataList.length) return dataList;
+  if (!randomCount) return [];
+
+  let nList = [...dataList];
+  let randomList = [];
+  for (let i = 0; i < randomCount; i++) {
+    const ind = getRandomNum(0, nList.length);
+    randomList[i] = nList.splice(ind, 1)[0];
+  }
+  return randomList;
+};
 
 export const summary = {
   onlineCount: 65432,
@@ -144,6 +200,16 @@ export const summary = {
   code: "whdx",
 };
 
+export const getSummary = () => {
+  return Object.assign({}, summary, {
+    onlineCount: getRandomNum(60000, 70000),
+    waitingCount: getRandomNum(5000, 7000),
+    examingCount: getRandomNum(1000, 2000),
+    breachCount: getRandomNum(1000, 2000),
+    warnCount: getRandomNum(2000, 4000),
+  });
+};
+
 export const inviTypesList = [
   {
     type: "违规动作",
@@ -175,20 +241,42 @@ export const inviTypesList = [
   },
 ];
 
-let inviTimeList = [];
-(function () {
-  let pre = "08:";
-  let baset = 10;
-  for (let i = 0; i < 30; i++) {
-    inviTimeList.push({
-      hour: `${pre}${baset + i}`,
-      onlineCount: Math.floor(100 + Math.random() * 500),
-      warnCount: Math.floor(Math.random() * 100),
-    });
-  }
-})();
+export const getTypesList = () => {
+  return inviTypesList.map((item) => {
+    return {
+      type: item.type,
+      warnCount: getRandomNum(5, 300),
+    };
+  });
+};
 
-export { inviTimeList };
+let cacheTimeMap = {};
+export const getTimeList = () => {
+  let inviTimeList = [];
+  let nowTime = new Date();
+  let hour = nowTime.getHours();
+  let minute = nowTime.getMinutes();
+  for (let i = 0; i < 60; i++) {
+    let m = minute - i;
+    let h = m < 0 ? hour - 1 : hour;
+    m = m < 0 ? 60 + m : m;
+    h = h < 0 ? 24 + h : h;
+    const hourMinute = `${getSiteNum(h)}:${getSiteNum(m)}`;
+    let timeData = {
+      hour: hourMinute,
+      onlineCount: getRandomNum(100, 600),
+      warnCount: getRandomNum(0, 90),
+    };
+    if (cacheTimeMap[hourMinute]) {
+      timeData.onlineCount = cacheTimeMap[hourMinute].onlineCount;
+      timeData.warnCount = cacheTimeMap[hourMinute].warnCount;
+    } else {
+      cacheTimeMap[timeData.hour] = timeData;
+    }
+    inviTimeList.push(timeData);
+  }
+  return inviTimeList.reverse();
+};
 
 export const inviAreaList = [
   {
@@ -198,7 +286,7 @@ export const inviAreaList = [
   },
   {
     country: "中国",
-    province: "江西",
+    province: "山西",
     warnCount: 498,
   },
   {
@@ -216,7 +304,35 @@ export const inviAreaList = [
     province: "河北",
     warnCount: 332,
   },
+  {
+    country: "中国",
+    province: "四川",
+    warnCount: 332,
+  },
+  {
+    country: "中国",
+    province: "江苏",
+    warnCount: 332,
+  },
+  {
+    country: "中国",
+    province: "广州",
+    warnCount: 332,
+  },
+  {
+    country: "中国",
+    province: "上海",
+    warnCount: 332,
+  },
 ];
+export const getAreaList = () => {
+  const dataList = getRandomListFromList(inviAreaList, 6);
+  return dataList.map((item) => {
+    let nitem = { ...item };
+    nitem.warnCount = getRandomNum(5, 300);
+    return nitem;
+  });
+};
 
 export const inviMapList = [
   {
@@ -255,9 +371,44 @@ export const inviMapList = [
     onlineCount: 156,
     warnCount: 5,
   },
+  {
+    country: "中国",
+    province: "广东",
+    onlineCount: 156,
+    warnCount: 5,
+  },
+  {
+    country: "中国",
+    province: "广西",
+    onlineCount: 156,
+    warnCount: 5,
+  },
+  {
+    country: "中国",
+    province: "浙江",
+    onlineCount: 156,
+    warnCount: 5,
+  },
+  {
+    country: "中国",
+    province: "江苏",
+    onlineCount: 156,
+    warnCount: 5,
+  },
+  {
+    country: "中国",
+    province: "云南",
+    onlineCount: 156,
+    warnCount: 5,
+  },
 ];
 
-export const inviStudentList = [
+export const getMapList = () => {
+  const count = inviMapList.length - getRandomNum(0, 3);
+  return getRandomListFromList(inviMapList, count);
+};
+
+export const inviWarnMsgList = [
   {
     examId: "1",
     examStudentId: "1",
@@ -328,4 +479,113 @@ export const inviStudentList = [
     createTime: Date.now(),
     approveStatus: "已处理",
   },
+  {
+    examId: "1",
+    examStudentId: "6",
+    name: "牛天",
+    identity: "42000198710082825",
+    info: "疑似采用照片",
+    level: "预警等级",
+    warningId: "1",
+    remark: "1",
+    examRecordId: "1",
+    roomCode: "1",
+    createTime: Date.now(),
+    approveStatus: "已处理",
+  },
+  {
+    examId: "1",
+    examStudentId: "7",
+    name: "吴勇",
+    identity: "42000198710082825",
+    info: "疑似求助第三方",
+    level: "预警等级",
+    warningId: "1",
+    remark: "1",
+    examRecordId: "1",
+    roomCode: "1",
+    createTime: Date.now(),
+    approveStatus: "已处理",
+  },
+  {
+    examId: "1",
+    examStudentId: "8",
+    name: "孙家",
+    identity: "42000198710082825",
+    info: "疑似替考",
+    level: "预警等级",
+    warningId: "1",
+    remark: "1",
+    examRecordId: "1",
+    roomCode: "1",
+    createTime: Date.now(),
+    approveStatus: "已处理",
+  },
+  {
+    examId: "1",
+    examStudentId: "9",
+    name: "李涛",
+    identity: "42000198710082825",
+    info: "疑似求助第三方",
+    level: "预警等级",
+    warningId: "1",
+    remark: "1",
+    examRecordId: "1",
+    roomCode: "1",
+    createTime: Date.now(),
+    approveStatus: "已处理",
+  },
+  {
+    examId: "1",
+    examStudentId: "10",
+    name: "徐辉",
+    identity: "42000198710082825",
+    info: "疑似替考",
+    level: "预警等级",
+    warningId: "1",
+    remark: "1",
+    examRecordId: "1",
+    roomCode: "1",
+    createTime: Date.now(),
+    approveStatus: "已处理",
+  },
 ];
+export const getWarnMsgList = () => {
+  return getRandomListFromList(inviWarnMsgList, 6);
+};
+
+// fetch
+function fetchData(getData) {
+  return new Promise((resolve, reject) => {
+    setTimeout(() => {
+      try {
+        const data = getData();
+        resolve({ data: { data } });
+      } catch (error) {
+        reject(error);
+      }
+    }, 100);
+  });
+}
+
+export function examInvigilationCount() {
+  return fetchData(getSummary);
+}
+export function examInvigilationWarnDistribution() {
+  return fetchData(getTypesList);
+}
+export function examInvigilationWarnTrend() {
+  return fetchData(getTimeList);
+}
+export function examInvigilationVideoRandomList() {
+  return fetchData(getStudentVideoList);
+}
+export function examInvigilationWarnMessage() {
+  return fetchData(getWarnMsgList);
+}
+export function examinationMonitorMapList() {
+  return fetchData(getMapList);
+}
+export function examinationMonitorAreaList() {
+  return fetchData(getAreaList);
+}