feat: 算法实测

src/views/algorithmTesting/index.vue

@@ -1,11 +1,132 @@
 <script setup lang="ts">
+import { onBeforeUnmount, ref } from "vue";
+
 defineOptions({
   name: "AlgorithmTesting"
 });
+
+const type = ref("");
+
+const captureStatus = ref(false);
+const restore = ref(false);
+function capture() {
+  captureStatus.value = !captureStatus.value;
+  if (captureStatus.value) {
+    onStart();
+  } else {
+    onPauseOrClose("close");
+  }
+}
+const picUrl = ref(
+  "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"
+);
+
+const playCamera = ref(true);
+let wsPlayVideo;
+let wsClosePause;
+
+function onStart() {
+  playCamera.value = true;
+  if (wsPlayVideo === undefined) {
+    wsPlayVideo = new WebSocket(
+      // window.serverConfig.VUE_APP_HOST_WS + "/camera"
+      "ws://192.168.10.14:9001" + "/camera"
+    );
+  } else {
+    wsPlayVideo.send("continue");
+  }
+
+  wsPlayVideo.onmessage = function (evt) {
+    if (evt.data === "connect") {
+      wsPlayVideo.send("start");
+    } else if (playCamera.value) {
+      picUrl.value = "data:image/png;base64," + evt.data;
+    }
+  };
+}
+
+function onPauseOrClose(command) {
+  playCamera.value = false;
+  if (command === "close") {
+    picUrl.value =
+      "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg";
+    restore.value = false;
+  }
+  if (command === "pause") {
+    if (!restore.value) {
+      picUrl.value =
+        "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg";
+      restore.value = true;
+    } else {
+      onStart();
+      restore.value = false;
+    }
+  }
+
+  if (wsClosePause === undefined) {
+    wsClosePause = new WebSocket("ws://192.168.10.14:9001" + "/pause");
+    wsClosePause.onopen = function (evt) {
+      console.log(evt);
+      if (command === "close") {
+        wsClosePause.send("close");
+        wsClosePause = undefined;
+      } else if (command === "pause") {
+        wsClosePause.send("pause");
+      }
+    };
+  } else {
+    if (command === "close") {
+      wsClosePause.send("close");
+      wsClosePause = undefined;
+      wsClosePause = undefined;
+    } else if (command === "pause") {
+      wsClosePause.send("pause");
+    }
+  }
+}
+
+onBeforeUnmount(() => {
+  if (wsClosePause !== undefined) {
+    wsClosePause.send("close");
+  }
+});
 </script>
 
 <template>
-  <div class="container">
-    <h1>算法实测</h1>
+  <div class="main">
+    <h2>算法实测</h2>
+    <el-card shadow="hover">
+      <el-row :gutter="24" justify="space-between">
+        <el-col :xs="12" :sm="12">
+          <img id="imgCamera" :src="picUrl" class="w-[100%] h-[100%]" />
+          <!-- <el-image :src="picUrl" class="w-[100%] h-[100%]" /> -->
+        </el-col>
+        <el-col :xs="12" :sm="12">
+          <div class="mb-2">检测类型</div>
+          <el-select
+            v-model="type"
+            placeholder="请选择类型"
+            :style="{ width: '100%' }"
+          >
+            <el-option label="周长" value="1" />
+            <el-option label="材料" value="2" />
+          </el-select>
+          <div class="mt-6">
+            <el-button
+              :color="captureStatus ? '#F56C6C' : '#1C0D82'"
+              @click="capture"
+              style="color: #fff"
+              >{{ captureStatus ? "关闭相机" : "开启相机" }}</el-button
+            >
+            <el-button
+              :disabled="!captureStatus"
+              color="#1C0D82"
+              @click="onPauseOrClose('pause')"
+              >{{ restore ? "恢复" : "拍摄" }}</el-button
+            >
+          </div>
+        </el-col>
+      </el-row>
+    </el-card>
   </div>
 </template>