From 4609cdc36e9b0dbf38613640a018a8e7ca468657 Mon Sep 17 00:00:00 2001
From: xbx <1827135378@qq.com>
Date: Thu, 4 Jul 2024 13:40:51 +0800
Subject: [PATCH] 1.0

---
 src/App.vue            | 178 ++-------------------------------------
 src/view/adminView.vue | 183 +++++++++++++++++++++++++++++++++++++++++
 2 files changed, 188 insertions(+), 173 deletions(-)
 create mode 100644 src/view/adminView.vue

diff --git a/src/App.vue b/src/App.vue
index 171595c..3132256 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,183 +1,15 @@
 <template>
-  <div class="img_bg_camera">
-    <!-- 透明度 -->
-    <video id="videoCamera" autoplay hidden></video>
-    <canvas style="display:none; " id="canvasCamera" width="250" height="250"></canvas>
-    <div style="display: flex; justify-content: center; align-items: center; height: 102vh;">
-      <el-card class="contain" style="display: flex; justify-content: center; align-items: center;">
-        <p>标题</p>
-        <el-card style="width: 1100px; height: 450px;">
-          <!-- 返回的内容展示 -->
-          <div style="height: 400px; overflow-y: auto;">
-            <div style="display: flex; align-items: flex-start; justify-content: flex-start;">
-              <el-tag style="font-size: 14px; font-weight: bold;">分析结果：</el-tag>
-            </div>
-            <div v-for="apiMessage in AiMessage" :key="apiMessage">
-              <el-card style="margin: 10px;">
-                <p>{{ apiMessage }}</p>
-              </el-card>
-            </div>
-          </div>
-        </el-card>
-        <el-button style="margin-top: 10px;" type="success" @click="setImage()">开启识别</el-button>
-        <el-button style="margin-top: 10px;" type="warning" @click="stopImageCapture()">停止识别</el-button>
-
-      </el-card>
-    </div>
-  </div>
+<div>
+  
+</div>
 </template>
 
 <script>
-import axios from 'axios';
-
 export default {
-  data() {
-    return {
-      imgif: false,
-      videoWidth: 250,
-      videoHeight: 250,
-      imgSrc: '',
-      thisCancas: null,
-      thisContext: null,
-      thisVideo: null,
-      imga: '',
-      intervalId: null,//
-      AiMessage: [
-      ],
-    }
-
-  },
-  methods: {
-    getCompetence() {
-      this.thisCancas = document.getElementById('canvasCamera');
-      this.thisContext = this.thisCancas.getContext('2d');
-      this.thisVideo = document.getElementById('videoCamera');
-
-      // 简化对 navigator.mediaDevices 的支持检查
-      if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
-        console.error('浏览器不支持 mediaDevices API');
-        return;
-      }
-
-      const constraints = {
-        audio: false,
-        video: {
-          width: this.videoWidth,
-          height: this.videoHeight,
-          transform: 'scaleX(-1)'
-        }
-      };
-
-      navigator.mediaDevices.getUserMedia(constraints).then(stream => {
-        // 使用现代方式设置视频流
-        this.thisVideo.srcObject = stream;
-        this.thisVideo.onloadedmetadata = () => {
-          this.thisVideo.play();
-        };
-        console.log("打开摄像头");
-      }).catch(err => {
-        console.error('获取媒体输入失败', err);
-      });
-    },
-    //  绘制图片（拍照功能）
-    sendImageToServer(imgData) {
-      axios.post('http://124.71.135.249:8081/apiSend', {
-        image: imgData
-      }).then(response => {
-        if (response.data.msg === "ok") {
-          this.$message({
-            message: '图像识别成功！',
-            type: 'success'
-          });
-          console.log(response.data.choices[0].message.content, "返回的数据");
-          this.AiMessage.push(response.data.choices[0].message.content)
-          console.log(this.AiMessage);
-        }
-      }).catch(error => {
-        console.error('发送图片时出错', error);
-      });
-    },
-    setImage() {
-      console.log("开始拍照")
-      this.$message({
-        message: '开始识别',
-        type: 'success'
-      });
-      this.imgif = true;
-      var _this = this;
-      // 如果已经有一个定时器在运行，先清除它
-      if (this.intervalId) {
-        clearInterval(this.intervalId);
-      }
-      // 设置定时器，每五秒拍照一次
-      this.intervalId = setInterval(function () {
-        // 点击，canvas画图
-        _this.thisContext.drawImage(_this.thisVideo, 0, 0, 250, 250);
-        console.log(_this.thisContext);
-
-        // 获取图片base64链接
-        var image = _this.thisCancas.toDataURL('image/png');
-        _this.imgSrc = image;
-        window.sessionStorage.setItem("img", _this.imgSrc);
-        _this.sendImageToServer(_this.imgSrc);
-        console.log(_this.imgSrc, "图片显示");
-
-      }, 5000); // 5000毫秒 = 5秒
-    },
-    // 创建一个新方法来停止拍照
-    stopImageCapture() {
-      if (this.intervalId) {
-        this.$message({
-          message: '停止识别',
-          type: 'warning'
-        });
-        clearInterval(this.intervalId);
-        console.log("停止拍照");
-      }
-    },
-    //关闭摄像头并上传数据
-    openFullScreen1() {
-      this.thisVideo.srcObject.getTracks()[0].stop(),//关闭摄像头
-
-        setTimeout(() => {
-          // var file = this.imga.substr(22)
-          this.imga = window.sessionStorage.getItem("img")
-          var file = this.imga
-          console.log(file);
-          //base64数据放formData里面
-          var formData = new FormData(); //*
-          formData.append("multipartFile", file); //*
-          // formData.append("password", this.ruleForm.password); //*
-          // formData.append("username", this.ruleForm.name); //*
-          console.log(formData, 'formData');
-          //自己配置axios。
-          // this.$http.post('url接口', formData).then(res => {
-          //   console.log(res);
-
-          // })
-        }, 2000);
-    },
-  },
-  mounted() {
-    this.getCompetence();
-  },
 
 }
 </script>
-<style lang="less" scoped>
-// 设置背景图片
-.img_bg_camera {
-  background-image: url(./image/back.png);
-  background-size: 100% 100%;
-  height: 700px;
-  width: 100%;
-  margin: 0 auto;
-  text-align: center;
-}
 
-.contain {
-  height: 80%;
-  width: 80%;
-  opacity: 0.9;
-}
+<style>
+
 </style>
\ No newline at end of file
diff --git a/src/view/adminView.vue b/src/view/adminView.vue
new file mode 100644
index 0000000..3ddf8e1
--- /dev/null
+++ b/src/view/adminView.vue
@@ -0,0 +1,183 @@
+<template>
+    <div class="img_bg_camera">
+      <!-- 透明度 -->
+      <video id="videoCamera" autoplay hidden></video>
+      <canvas style="display:none; " id="canvasCamera" width="250" height="250"></canvas>
+      <div style="display: flex; justify-content: center; align-items: center; height: 102vh;">
+        <el-card class="contain" style="display: flex; justify-content: center; align-items: center;">
+          <p>标题</p>
+          <el-card style="width: 1100px; height: 450px;">
+            <!-- 返回的内容展示 -->
+            <div style="height: 400px; overflow-y: auto;">
+              <div style="display: flex; align-items: flex-start; justify-content: flex-start;">
+                <el-tag style="font-size: 14px; font-weight: bold;">分析结果：</el-tag>
+              </div>
+              <div v-for="apiMessage in AiMessage" :key="apiMessage">
+                <el-card style="margin: 10px;">
+                  <p>{{ apiMessage }}</p>
+                </el-card>
+              </div>
+            </div>
+          </el-card>
+          <el-button style="margin-top: 10px;" type="success" @click="setImage()">开启识别</el-button>
+          <el-button style="margin-top: 10px;" type="warning" @click="stopImageCapture()">停止识别</el-button>
+  
+        </el-card>
+      </div>
+    </div>
+  </template>
+  
+  <script>
+  import axios from 'axios';
+  
+  export default {
+    data() {
+      return {
+        imgif: false,
+        videoWidth: 250,
+        videoHeight: 250,
+        imgSrc: '',
+        thisCancas: null,
+        thisContext: null,
+        thisVideo: null,
+        imga: '',
+        intervalId: null,//
+        AiMessage: [
+        ],
+      }
+  
+    },
+    methods: {
+      getCompetence() {
+        this.thisCancas = document.getElementById('canvasCamera');
+        this.thisContext = this.thisCancas.getContext('2d');
+        this.thisVideo = document.getElementById('videoCamera');
+  
+        // 简化对 navigator.mediaDevices 的支持检查
+        if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
+          console.error('浏览器不支持 mediaDevices API');
+          return;
+        }
+  
+        const constraints = {
+          audio: false,
+          video: {
+            width: this.videoWidth,
+            height: this.videoHeight,
+            transform: 'scaleX(-1)'
+          }
+        };
+  
+        navigator.mediaDevices.getUserMedia(constraints).then(stream => {
+          // 使用现代方式设置视频流
+          this.thisVideo.srcObject = stream;
+          this.thisVideo.onloadedmetadata = () => {
+            this.thisVideo.play();
+          };
+          console.log("打开摄像头");
+        }).catch(err => {
+          console.error('获取媒体输入失败', err);
+        });
+      },
+      //  绘制图片（拍照功能）
+      sendImageToServer(imgData) {
+        axios.post('http://124.71.135.249:8081/apiSend', {
+          image: imgData
+        }).then(response => {
+          if (response.data.msg === "ok") {
+            this.$message({
+              message: '图像识别成功！',
+              type: 'success'
+            });
+            console.log(response.data.choices[0].message.content, "返回的数据");
+            this.AiMessage.push(response.data.choices[0].message.content)
+            console.log(this.AiMessage);
+          }
+        }).catch(error => {
+          console.error('发送图片时出错', error);
+        });
+      },
+      setImage() {
+        console.log("开始拍照")
+        this.$message({
+          message: '开始识别',
+          type: 'success'
+        });
+        this.imgif = true;
+        var _this = this;
+        // 如果已经有一个定时器在运行，先清除它
+        if (this.intervalId) {
+          clearInterval(this.intervalId);
+        }
+        // 设置定时器，每五秒拍照一次
+        this.intervalId = setInterval(function () {
+          // 点击，canvas画图
+          _this.thisContext.drawImage(_this.thisVideo, 0, 0, 250, 250);
+          console.log(_this.thisContext);
+  
+          // 获取图片base64链接
+          var image = _this.thisCancas.toDataURL('image/png');
+          _this.imgSrc = image;
+          window.sessionStorage.setItem("img", _this.imgSrc);
+          _this.sendImageToServer(_this.imgSrc);
+          console.log(_this.imgSrc, "图片显示");
+  
+        }, 5000); // 5000毫秒 = 5秒
+      },
+      // 创建一个新方法来停止拍照
+      stopImageCapture() {
+        if (this.intervalId) {
+          this.$message({
+            message: '停止识别',
+            type: 'warning'
+          });
+          clearInterval(this.intervalId);
+          console.log("停止拍照");
+        }
+      },
+      //关闭摄像头并上传数据
+      openFullScreen1() {
+        this.thisVideo.srcObject.getTracks()[0].stop(),//关闭摄像头
+  
+          setTimeout(() => {
+            // var file = this.imga.substr(22)
+            this.imga = window.sessionStorage.getItem("img")
+            var file = this.imga
+            console.log(file);
+            //base64数据放formData里面
+            var formData = new FormData(); //*
+            formData.append("multipartFile", file); //*
+            // formData.append("password", this.ruleForm.password); //*
+            // formData.append("username", this.ruleForm.name); //*
+            console.log(formData, 'formData');
+            //自己配置axios。
+            // this.$http.post('url接口', formData).then(res => {
+            //   console.log(res);
+  
+            // })
+          }, 2000);
+      },
+    },
+    mounted() {
+      this.getCompetence();
+    },
+  
+  }
+  </script>
+  <style lang="less" scoped>
+  // 设置背景图片
+  .img_bg_camera {
+    background-image: url(../image/back.png);
+    background-size: 100% 100%;
+    height: 700px;
+    width: 100%;
+    margin: 0 auto;
+    text-align: center;
+  }
+  
+  .contain {
+    height: 80%;
+    width: 80%;
+    opacity: 0.9;
+  }
+  </style>
\ No newline at end of file