From 3e0c7a2322569d1d3ac6b25e76f9d506caf907ce Mon Sep 17 00:00:00 2001
From: chenyincheng <501753378@qq.com>
Date: 星期五, 23 十二月 2022 15:22:09 +0800
Subject: [PATCH] gengxin
---
src/views/login/index.vue | 200 ++++++++++++++++++++++++++++++++++++++++
src/samples/node-api.ts | 49 +++++----
electron/main/index.ts | 4
src/router/index.ts | 2
4 files changed, 229 insertions(+), 26 deletions(-)
diff --git a/electron/main/index.ts b/electron/main/index.ts
index 0c1f7bf..a18aeb8 100644
--- a/electron/main/index.ts
+++ b/electron/main/index.ts
@@ -66,8 +66,8 @@
async function createWindow() {
win = new BrowserWindow({
title: 'Main window',
- fullscreen: true,
- autoHideMenuBar:true,
+ fullscreen: false,
+ // autoHideMenuBar:true,
webPreferences: {
preload: splash,
nodeIntegration: true,
diff --git a/src/router/index.ts b/src/router/index.ts
index 10d587c..8e93421 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -5,7 +5,7 @@
const routes: Array<RouteRecordRaw> = [
// { path: '/', name: 'Home', component: () => import('@/views/home/index.vue')},
- { path: '/', name: 'test', component: () => import('@/views/home/index.vue')},
+ { path: '/', name: 'login', component: () => import('@/views/login/index.vue')},
]
const router = createRouter({
diff --git a/src/samples/node-api.ts b/src/samples/node-api.ts
index 27f6b5a..10f8b58 100644
--- a/src/samples/node-api.ts
+++ b/src/samples/node-api.ts
@@ -36,30 +36,33 @@
// 主进程获取配置项完成sockte注册和httpshu
ipcRenderer.on('getConfigData',(_event,...args)=>{
console.log("config.json",...args)
- if(args[0]===undefined){
- // alert("配置文件没有写入配置，请检查配置文件 文件路径："+args[2])
- ElMessageBox.prompt('没有设定客户编号，请输入客户编号并保存', '警告', {
- confirmButtonText: '保存',
- showClose:false,
- showCancelButton:false,
- inputErrorMessage: 'Invalid Email',
- })
- .then(({ value }) => {
- const mode={
- clientCode:value,
- machineName:os.hostname(),
- screenTimeout: 60,
- }
- ipcRenderer.send('setConfingData',mode)
- })
-
+ if(args!==null){
+ if(args[0]===undefined){
+ // alert("配置文件没有写入配置，请检查配置文件 文件路径："+args[2])
+ ElMessageBox.prompt('没有设定客户编号，请输入客户编号并保存', '警告', {
+ confirmButtonText: '保存',
+ showClose:false,
+ showCancelButton:false,
+ inputErrorMessage: 'Invalid Email',
+ })
+ .then(({ value }) => {
+ const mode={
+ clientCode:value,
+ machineName:os.hostname(),
+ screenTimeout: 60,
+ }
+ ipcRenderer.send('setConfingData',mode)
+ })
+
+ }
+ else if(args.length>0&&args[0].length>0){
+ clientCode=args[0]
+ // 建立sockte 通讯
+ creatorClient([],clientCode)
+
+ }
}
- else if(args.length>0&&args[0].length>0){
- clientCode=args[0]
- // 建立sockte 通讯
- creatorClient([],clientCode)
-
- }
+
})
ipcRenderer.on("getScreenTimeout",(_event,args)=>{
if(args!==undefined){
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
new file mode 100644
index 0000000..5242d39
--- /dev/null
+++ b/src/views/login/index.vue
@@ -0,0 +1,200 @@
+<template>
+ <teleport to="body">
+ <div class="mask">
+ <el-header class="go">
+ <div class="box">
+ <video id="videoCamera" class="canvas" :width="videoWidth" :height="videoHeight" autoPlay></video>
+ <canvas id="canvasCamera" class="canvas" :width="videoWidth" :height="videoWidth"></canvas>
+ </div>
+ <div class="footer">
+ <el-button @click="getCompetence" icon="el-icon-video-camera"> 打开摄像头 </el-button>
+ <el-button @click="drawImage" icon="el-icon-camera"> 拍照 </el-button>
+ <el-button @click="stopNavigator" icon="el-icon-switch-button"> 关闭摄像头 </el-button>
+ <el-button @click="resetCanvas" icon="el-icon-refresh"> 重置 </el-button>
+ <el-button @click="$emit('closed')" class="closeBtn">关闭</el-button>
+ </div>
+ </el-header>
+ </div>
+ </teleport>
+ </template>
+ <script lang="ts" setup>
+ import { ref, reactive, inject, toRefs, nextTick } from "vue";
+ import { ElMessage, ElMessageBox } from "element-plus";
+ const message = inject("$message");
+ const config = inject("$CONFIG");
+ const tool = inject("$TOOL");
+ const api = inject("$API");
+
+ const loading = ref(false);
+ const os = ref(false); //控制摄像头开关
+ let thisVideo = ref("");
+ let thisContext = ref("");
+ let thisCancas = ref("");
+ const videoWidth = ref(500);
+ const videoHeight = ref(500);
+ const postOptions = ref([]);
+ const certCtl = ref("");
+ const mask = ref(true);
+
+ //查询参数
+ const queryParams = reactive({
+ pageNum: 1,
+ pageSize: 10,
+ imgSrc: undefined,
+ });
+ const closedPhono = ref(null);
+
+ const emit = defineEmits(["closed"]);
+ const props = defineProps({
+ visible: { type: Boolean },
+ });
+ const { visible } = toRefs(props);
+ const handleChange = (val) => {
+ console.log(visible);
+ };
+
+ //调用摄像头权限
+ const getCompetence = () => {
+ nextTick(() => {
+ os.value = false;
+ thisCancas = document.getElementById("canvasCamera");
+ thisContext = thisCancas.getContext("2d");
+ thisVideo = document.getElementById("videoCamera");
+ closedPhono.value = thisVideo;
+ if (navigator.mediaDevices === undefined) {
+ navigator.mediaDevices = {};
+ }
+
+ if (navigator.mediaDevices.getUserMedia === undefined) {
+ navigator.mediaDevices.getUserMedia = function (constraints) {
+ // 首先获取现存的getUserMedia(如果存在)
+ let getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.getUserMedia;
+ if (!getUserMedia) {
+ return Promise.reject(new Error("getUserMedia is not implemented in this browser"));
+ }
+ return new Promise(function (resolve, reject) {
+ getUserMedia.call(navigator, constraints, resolve, reject);
+ });
+ };
+ }
+
+ const constraints = {
+ audio: false,
+ video: { width: videoWidth.value, height: videoHeight.value, transform: "scaleX(-1)" },
+ };
+
+ navigator.mediaDevices
+ .getUserMedia(constraints)
+ .then(function (stream) {
+ if ("srcObject" in thisVideo) {
+ thisVideo.srcObject = stream;
+ } else {
+ thisVideo.src = window.URL.createObjectURL(stream);
+ }
+ thisVideo.onloadedmetadata = function (e) {
+ thisVideo.play();
+ };
+ })
+ .catch((err) => {
+ ElMessage.error("没有开启摄像头权限或浏览器版本不兼容");
+ });
+ });
+ };
+
+ //绘制图片
+ const drawImage = () => {
+ getCompetence();
+ thisCancas = document.getElementById("canvasCamera");
+ thisContext = thisCancas.getContext("2d");
+ thisVideo = document.getElementById("videoCamera");
+ thisContext.drawImage(thisVideo, 0, 0, 500, 500);
+ //获取图片地址
+ queryParams.imgSrc = thisCancas.toDataURL('image/png');
+ console.log(queryParams.imgSrc);
+ };
+
+ //清空画布
+ const clearCanvas = (id) => {
+ let c = document.getElementById(id);
+ let cxt = c.getContext("2d");
+ cxt.clearRect(0, 0, 500, 500);
+
+ };
+
+ //重置画布
+ const resetCanvas = () => {
+ queryParams.imgSrc = "";
+ clearCanvas("canvasCamera");
+ };
+
+ //关闭摄像头
+ const stopNavigator = () => {
+ // thisVideo = document.getElementById("videoCamera");
+ if (closedPhono.value && closedPhono.value !== null) {
+ thisVideo.srcObject.getTracks()[0].stop();
+ os.value = true;
+ } else {
+ ElMessage.error("没有开启摄像头权限或浏览器版本不兼容");
+ }
+ };
+ defineExpose({
+ stopNavigator,
+ });
+ </script>
+ <style scoped>
+ .footer {
+ width: 959px;
+ height: 50px;
+ background-color: white;
+ justify-content: space-between;
+ float: left;
+ margin-top: 217px;
+ }
+ .detailed {
+ width: 1200px !important;
+ height: 800px !important;
+ display: block;
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ background-color: white;
+ }
+
+
+ .oText {
+ margin-left: 42px;
+ }
+ .mask {
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ background-color: rgba(0, 0, 0, 0.5);
+ z-index: 999;
+ }
+ .closeBtn {
+ float: right;
+ }
+ .box {
+ width: 959px;
+ height: 700px;
+ margin-top: 10px;
+ background-color: rgba(0, 0, 0, 0.5);
+ /* float: left !important; */
+ padding-top: 100px;
+ text-align: center;
+ }
+ .go {
+ width: 1000px;
+ height: 800px;
+ background-color: white;
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ display: inline-block;
+ }
+
+ </style>
\ No newline at end of file
--
Gitblit v1.8.0