图示监控配置

src/features/examwork/ExamManagement/ExamEdit.vue

@@ -382,22 +382,83 @@
           <el-row>
             <el-form-item v-if="form.monitorProxy" label="电脑&手机监控方案">
               <el-checkbox-group v-model="form.monitorVideoSource">
-                <el-checkbox label="CLIENT_CAMERA"
-                  >电脑摄像头为主机位</el-checkbox
-                >
-                <el-checkbox label="CLIENT_SCREEN">电脑开启录屏</el-checkbox>
-                <el-checkbox label="MOBILE_FIRST">手机主机位</el-checkbox>
-                <el-checkbox
-                  :disabled="!form.monitorVideoSource.includes('MOBILE_FIRST')"
-                  :title="
-                    !form.monitorVideoSource.includes('MOBILE_FIRST') &&
-                    '原因：先选择手机主机位'
-                  "
-                  label="MOBILE_SECOND"
-                  >手机辅机位</el-checkbox
-                >
+                <div class="d-flex">
+                  <div class="d-flex flex-column justify-content-between">
+                    <el-checkbox label="CLIENT_CAMERA"
+                      >电脑摄像头为主机位</el-checkbox
+                    >
+                    <el-checkbox label="CLIENT_SCREEN"
+                      >电脑开启录屏</el-checkbox
+                    >
+                    <el-checkbox label="MOBILE_FIRST">手机主机位</el-checkbox>
+                    <el-checkbox
+                      :disabled="
+                        !form.monitorVideoSource.includes('MOBILE_FIRST')
+                      "
+                      :title="
+                        !form.monitorVideoSource.includes('MOBILE_FIRST') &&
+                        '原因：先选择手机主机位'
+                      "
+                      label="MOBILE_SECOND"
+                      >手机辅机位</el-checkbox
+                    >
+                    <span style="color: red; font-size: 12px;"
+                      >*主机位设备负责收音及播放监考提示</span
+                    >
+                  </div>
+                  <div
+                    style="
+                      margin-left: 20px;
+                      padding: 10px;
+                      font-size: 10px;
+                      background: #f0f4f9;
+                    "
+                  >
+                    <div class="d-flex">
+                      <div
+                        class="d-flex flex-column justify-content-center align-items-center"
+                        style="width: 52px !important;"
+                      >
+                        <div :class="monitorImgSrc('MOBILE_SECOND')" />
+                        手机辅机位
+                      </div>
+                      <div
+                        class="d-flex flex-column justify-content-center align-items-center"
+                        style="width: 350px !important;"
+                      >
+                        <div :class="monitorImgSrc('CLIENT_CAMERA')" />
+                        电脑摄像头为主机位
+                      </div>
+                      <div style="width: 52px !important;"></div>
+                    </div>
+                    <div
+                      class="d-flex"
+                      style="margin-bottom: -60px; margin-top: -30px;"
+                    >
+                      <div style="width: 52px !important;"></div>
+                      <div
+                        class="d-flex flex-column justify-content-center align-items-center"
+                        style="width: 350px !important;"
+                      >
+                        <div :class="monitorImgSrc('CLIENT_SCREEN')" />
+                        电脑开启录屏
+                      </div>
+                      <div style="width: 52px !important;"></div>
+                    </div>
+                    <div class="d-flex">
+                      <div style="width: 52px !important;"></div>
+                      <div style="width: 350px !important;"></div>
+                      <div
+                        class="d-flex flex-column justify-content-center align-items-center"
+                        style="width: 52px !important;"
+                      >
+                        <div :class="monitorImgSrc('MOBILE_FIRST')" />
+                        手机主机位
+                      </div>
+                    </div>
+                  </div>
+                </div>
               </el-checkbox-group>
-              <span style="color: red;">*主机位设备负责收音及播放监考提示</span>
             </el-form-item>
           </el-row>
         </el-form>
@@ -678,6 +739,24 @@ export default {
     };
   },
   methods: {
+    monitorImgSrc(monitorSource) {
+      const selected = this.form.monitorVideoSource.includes(monitorSource);
+      const selectedStr = selected ? "-selected" : "";
+      if (monitorSource === "MOBILE_FIRST") {
+        return `mobile-first-img${selectedStr}`;
+      } else if (monitorSource === "MOBILE_SECOND") {
+        return `mobile-second-img${selectedStr}`;
+        // return `./imgs/手机监考辅机位${selectedStr}.png`;
+      } else if (monitorSource === "CLIENT_CAMERA") {
+        // return `./imgs/手机监考辅机位${selectedStr}.png`;
+        return `client-camera-img${selectedStr}`;
+      } else if (monitorSource === "CLIENT_SCREEN") {
+        // return `./imgs/手机监考辅机位${selectedStr}.png`;
+        return `client-screen-img${selectedStr}`;
+      }
+
+      return "";
+    },
     async save() {
       try {
         await this.$refs.form1.validate();
@@ -745,4 +824,52 @@ export default {
     }
   }
 }
+
+.mobile-first-img {
+  background-image: url(./imgs/手机监考主机位.png);
+  background-repeat: no-repeat;
+  background-size: 52px 80px;
+  width: 52px;
+  height: 80px;
+  &-selected {
+    @extend .mobile-first-img;
+    background-image: url(./imgs/手机监考主机位-选中.png);
+  }
+}
+
+.mobile-second-img {
+  background-image: url(./imgs/手机监考辅机位.png);
+  background-repeat: no-repeat;
+  background-size: 52px 80px;
+  width: 52px;
+  height: 80px;
+  &-selected {
+    @extend .mobile-second-img;
+    background-image: url(./imgs/手机监考辅机位-选中.png);
+  }
+}
+
+.client-camera-img {
+  background-image: url(./imgs/电脑摄像头主机位.png);
+  background-repeat: no-repeat;
+  background-size: 33px 40px;
+  width: 33px;
+  height: 40px;
+  &-selected {
+    @extend .client-camera-img;
+    background-image: url(./imgs/电脑摄像头主机位-选中.png);
+  }
+}
+
+.client-screen-img {
+  background-image: url(./imgs/电脑操作录屏.png);
+  background-repeat: no-repeat;
+  background-size: 190px 110px;
+  width: 190px;
+  height: 110px;
+  &-selected {
+    @extend .client-screen-img;
+    background-image: url(./imgs/电脑操作录屏-选中.png);
+  }
+}
 </style>