121

front/src/assets/css/base.css

@@ -1,3 +1,7 @@
-body {
+html,body {
 	margin: 0;
+	padding: 0;
+}
+.el-form-item__content{
+	width: 250px;
 }

front/src/component/changeItem.vue

@@ -8,8 +8,12 @@
               clearable style="width: 330px" />
           </template>
           <template v-else-if="['datetimerange'].indexOf(headerItem.type) !== -1">
-            <el-date-picker v-model="formData[headerItem.prop]" type="datetimerange" range-separator="至"
+            <el-date-picker v-model="formData[headerItem.prop]" type="datetimerange"
-              start-placeholder="考试开始时间" end-placeholder="考试结束时间" />
+              :range-separator="headerItem.rangeseparator" :start-placeholder="headerItem.startplaceholder"
+              :end-placeholder="headerItem.endplaceholder" width="330px" />
+          </template>
+          <template v-else-if="['link'].indexOf(headerItem.type) !== -1">
+            <el-tag>{{ formData[headerItem.prop] }}</el-tag>
           </template>
         </el-form-item>
       </el-col>

front/src/plugins/getip.js

@@ -0,0 +1,48 @@
+let getIPs = (callback) => {
+  let ip_dups = {};
+  let RTCPeerConnection = window.RTCPeerConnection
+    || window.mozRTCPeerConnection
+    || window.webkitRTCPeerConnection;
+  let mediaConstraints = {
+    optional: [{ RtpDataChannels: true }]
+  };
+  // 这里就是需要的ICEServer了
+  let servers = {
+    iceServers: [
+      { urls: "stun:stun.services.mozilla.com" },
+      { urls: "stun:stun.l.google.com:19302" },
+    ]
+  };
+  let pc = new RTCPeerConnection(servers, mediaConstraints);
+  function handleCandidate(candidate) {
+    let ip_regex = /([0-9]{1,3}(\.[0-9]{1,3}){3}|[a-f0-9]{1,4}(:[a-f0-9]{1,4}){7})/
+    let hasIp = ip_regex.exec(candidate)
+    if (hasIp) {
+      let ip_addr = ip_regex.exec(candidate)[1];
+      if (ip_dups[ip_addr] === undefined)
+        callback(ip_addr);
+      ip_dups[ip_addr] = true;
+    }
+  }
+  // 网络协商的过程
+  pc.onicecandidate = function (ice) {
+    if (ice.candidate) {
+      // console.log(444, ice.candidate.candidate, ip_dups)
+      handleCandidate(ice.candidate.candidate);
+    }
+  };
+  pc.createDataChannel("");
+  //创建一个SDP(session description protocol)会话描述协议 是一个纯文本信息 包含了媒体和网络协商的信息
+  pc.createOffer(function (result) {
+    pc.setLocalDescription(result, function () { }, function () { });
+  }, function () { });
+  setTimeout(function () {
+    let lines = pc.localDescription.sdp.split('\n');
+    lines.forEach(function (line) {
+      console.log(999, line)
+      if (line.indexOf('a=candidate:') === 0)
+        handleCandidate(line);
+    });
+  }, 1000);
+}
+export default getIPs;

front/src/style.css

@@ -1,79 +0,0 @@
-:root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-.card {
-  padding: 2em;
-}
-
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}

front/src/views/teacher.vue

@@ -63,6 +63,7 @@ import {
 } from "@/api/teacher";
 import io from "socket.io-client";
 import { ElMessage, ElMessageBox } from 'element-plus'
+import getip from "@/plugins/getip"
 export default {
   name: "teacher",
   components: { vueTable, changeItem },
@@ -173,6 +174,9 @@ export default {
           prop: "kaoshishijianduan",
           label: "考试时间段",
           type: "datetimerange",
+          startplaceholder: "考试开始时间",
+          endplaceholder: "考试结束时间",
+          rangeseparator: "-",
           tableShow: true,
           formShow: true
         },
@@ -218,6 +222,7 @@ export default {
       await this.init();
       await this.initWebSocket()
       await this.initCanvas()
+      // getip((ip) => { console.log(777, ip) })
     }
   },
   methods: {