大屏适配1440屏幕

src/features/invigilation/ExamInvigilation/ExamInvigilationFull.vue

@@ -54,7 +54,6 @@
             :options="inviMapChartOption"
             autoresize
           ></vue-charts>
-          <p class="chart-none" v-else>暂无数据</p>
         </div>
       </div>
       <div class="invi-analysis">
@@ -90,7 +89,6 @@
                 :options="inviTypesChartOption"
                 autoresize
               ></vue-charts>
-              <p class="chart-none" v-else>暂无数据</p>
             </div>
           </div>
         </div>
@@ -126,7 +124,6 @@
                 :options="inviAreaChartOption"
                 autoresize
               ></vue-charts>
-              <p class="chart-none" v-else>暂无数据</p>
             </div>
           </div>
         </div>
@@ -139,21 +136,20 @@
                 :options="inviTimeChartOption"
                 autoresize
               ></vue-charts>
-              <p class="chart-none" v-else>暂无数据</p>
             </div>
           </div>
         </div>
         <div class="invi-analysis-item">
           <div class="invi-analysis-box invi-student">
             <h2 class="invi-analysis-title">考试动态预警</h2>
-            <div class="invi-student-table">
+            <div v-if="inviStudentWainList.length" class="invi-student-table">
               <table class="invi-table">
                 <colgroup>
                   <col width="60" />
                   <col width="60" />
                   <col width="140" />
                   <col width="100" />
-                  <col width="60" />
+                  <col width="70" />
                 </colgroup>
                 <tbody>
                   <tr>
@@ -213,15 +209,15 @@ import {
   examinationMonitorAreaList,
 } from "@/api/invigilation";
 
-// import {
-//   students,
-//   summary,
-//   inviTypesList,
-//   inviTimeList,
-//   inviAreaList,
-//   inviMapList,
-//   inviStudentList,
-// } from "./datas";
+import {
+  students,
+  summary,
+  inviTypesList,
+  inviTimeList,
+  inviAreaList,
+  inviMapList,
+  inviStudentList,
+} from "./datas";
 
 export default {
   name: "exam-invigilation-full",
@@ -265,25 +261,51 @@ export default {
     ...mapState("invigilation", ["liveDomains"]),
   },
   mounted() {
-    // this.studentVideoList = students;
-    // this.summary = summary;
-    // this.parseMapList(inviMapList);
-    // this.parseInviTypesList(inviTypesList);
-    // this.parseInviAreaList(inviAreaList);
-    // this.parseInviTimeList(inviTimeList);
-    // this.inviStudentWainList = inviStudentList;
-    this.initData();
+    this.testData();
+    // 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));
@@ -343,8 +365,8 @@ export default {
 
       await this.getMapList();
       this.intervalMapDet();
-      let inTime = this.inviMapList.length * 3 * 1000;
-      inTime = inTime || 3 * 1000;
+      let inTime = this.inviMapList.length * 5 * 1000;
+      inTime = inTime || 5 * 1000;
       this.addSetTime(typeName, this.intervalMap, inTime);
     },
     intervalMapDet() {
@@ -362,7 +384,7 @@ export default {
       this.inviMapList[this.curMapAreaInd].selected = true;
       this.inviMapChartOption = getInviMapOption(this.inviMapList);
       this.curMapAreaInd++;
-      this.addSetTime(typeName, this.intervalMapDet, 3 * 1000);
+      this.addSetTime(typeName, this.intervalMapDet, 5 * 1000);
     },
     // fetch action
     getMaxNum(nums) {

src/features/invigilation/ExamInvigilation/chartOpt.js

@@ -271,7 +271,7 @@ export function getInviMapOption(dataList) {
         type: "map",
         mapType: "china",
         layoutCenter: ["50%", "50%"],
-        layoutSize: "110%",
+        layoutSize: "100%",
         data: countData,
         itemStyle: {
           areaColor: "rgba(63, 67, 87, 0.4)",

src/features/invigilation/ExamInvigilation/datas.js

@@ -269,7 +269,7 @@ export const inviStudentList = [
     remark: "1",
     examRecordId: "1",
     roomCode: "1",
-    createTime: "17:06:12",
+    createTime: Date.now(),
     approveStatus: "已处理",
   },
   {
@@ -283,7 +283,7 @@ export const inviStudentList = [
     remark: "1",
     examRecordId: "1",
     roomCode: "1",
-    createTime: "17:06:12",
+    createTime: Date.now(),
     approveStatus: "已处理",
   },
   {
@@ -297,7 +297,7 @@ export const inviStudentList = [
     remark: "1",
     examRecordId: "1",
     roomCode: "1",
-    createTime: "14:27:56",
+    createTime: Date.now(),
     approveStatus: "已处理",
   },
   {
@@ -311,7 +311,7 @@ export const inviStudentList = [
     remark: "1",
     examRecordId: "1",
     roomCode: "1",
-    createTime: "17:06:12",
+    createTime: Date.now(),
     approveStatus: "已处理",
   },
   {
@@ -325,7 +325,7 @@ export const inviStudentList = [
     remark: "1",
     examRecordId: "1",
     roomCode: "1",
-    createTime: "09:12:50",
+    createTime: Date.now(),
     approveStatus: "已处理",
   },
 ];

src/styles/base.scss

@@ -1048,7 +1048,8 @@ body {
   background-repeat: no-repeat;
   background-size: cover;
   color: #fff;
-  min-height: 1080px;
+  min-height: 900px;
+  min-width: 1440px;
 
   .invi-header {
     position: absolute;
@@ -1350,6 +1351,113 @@ body {
   }
 }
 
+@media screen and (max-width: 1919px) {
+  .invi-container {
+    .invi-header {
+      height: 40px;
+      .text-clock {
+        bottom: 10px;
+      }
+    }
+    .invi-title {
+      padding-top: 8px;
+      font-size: 18px;
+      line-height: 24px;
+      letter-spacing: 1px;
+    }
+    .invi-body {
+      padding-top: 40px;
+    }
+    .invi-summary {
+      top: 20px;
+      &-item {
+        padding: 15px 10px;
+        width: 120px;
+        margin: 0 5px;
+      }
+    }
+    .invi-map-chart {
+      padding-top: 105px;
+    }
+    .invi-monitor {
+      width: 220px;
+      padding: 5px 5px 5px 10px;
+      &-item {
+        padding: 5px 0;
+      }
+
+      .invigilation-student {
+        padding: 10px 10px 50px;
+      }
+      .student-info {
+        bottom: 10px;
+        left: 10px;
+        right: 10px;
+      }
+    }
+    .invi-analysis {
+      width: 460px;
+      padding: 5px 10px 5px 5px;
+      &-item {
+        padding: 5px 0;
+      }
+      &-title {
+        height: 24px;
+        top: 6px;
+        left: 6px;
+        padding: 6px 0 6px 8px;
+      }
+    }
+
+    .invi-types {
+      padding: 6px;
+      &-table {
+        width: 60%;
+        padding-top: 30px;
+      }
+      &-chart {
+        width: 40%;
+      }
+    }
+    .invi-area {
+      padding: 6px;
+      &-table {
+        width: 60%;
+        padding-top: 30px;
+      }
+      &-chart {
+        width: 40%;
+      }
+    }
+    .invi-types-chart,
+    .invi-area-chart {
+      .invi-chart-title {
+        width: 80px;
+        height: 80px;
+        margin-top: -40px;
+        margin-left: -40px;
+        letter-spacing: 0;
+        line-height: 80px;
+      }
+    }
+    .invi-student {
+      padding: 6px;
+
+      &-table {
+        padding-top: 30px;
+        padding-bottom: 6px;
+        .invi-table {
+          text-align: left;
+          th,
+          td {
+            padding: 0;
+          }
+        }
+      }
+    }
+  }
+}
+
 // flv-media
 .flv-media {
   position: relative;