提交门禁识别功能

src/api/business/door.js

@@ -16,7 +16,7 @@ export function doorApi() {
         },
         Select: (data) => {
             return request({
-                url: `/service-iot/dmpDeviceInfo/pageWhite`,
+                url: `/service-eg/egDevice/page`,
                 method: 'POST',
                 data,
             });

src/pages/door/api.js

@@ -0,0 +1,17 @@
+import { request } from "@/utils/request";
+
+/**
+ * 人脸校验接口集合
+ * @method faceVef 人脸验证
+ */
+export function faceApi() {
+    return {
+        faceVef: (data) => {
+            return request({
+                url: '/service-meeting/meetingFace/vef',
+                method: 'POST',
+                data,
+            });
+        },
+    };
+}

src/pages/door/index.vue

@@ -0,0 +1,358 @@
+<template>
+  <web-view v-show="!modal.show" ref="faceView" id="faceView" class="faceView" src="/static/face/door.html" bindmessage="receiveMessage" :webview-styles="webviewStyles" @message="onMessage">
+  </web-view>
+
+  <u-modal
+    :show="modal.show"
+    title="配置服务器"
+    :cancelText="'退出应用'"
+    :zoom="false"
+    :showConfirmButton="true"
+    :showCancelButton="true"
+    :closeOnClickOverlay="true"
+    @confirm="modalConfirm"
+    @cancel="modalCancel"
+    @close="modal.show = false"
+  >
+    <view class="slot-content">
+      <view>
+        <view class="mb10 required">服务器地址</view>
+        <view class="mb20">
+          <u-input v-model="form.linkUrl" placeholder="服务器地址（必填）" border="bottom" style="padding: 6px 0px" />
+        </view>
+      </view>
+      <view>
+        <view class="mb10">服务器端口</view>
+        <view class="mb20">
+          <u-input v-model="form.port" placeholder="服务器端口（非必填）" border="bottom" style="padding: 6px 0px" />
+        </view>
+      </view>
+      <view>
+        <view class="mb10 required">绑定门禁</view>
+        <view>
+          <u-input
+            v-model="form.doorName"
+            placeholder="门禁（必选）"
+            suffixIcon="arrow-right"
+            suffixIconStyle="color: #909399"
+            border="none"
+            disabledColor="transparent"
+            disabled
+            @click="handlePicker('绑定门禁')"
+          />
+        </view>
+      </view>
+    </view>
+  </u-modal>
+
+  <u-picker
+    :show="picker.show"
+    :columns="picker.list"
+    :title="'请选择' + picker.title"
+    keyName="name"
+    visibleItemCount="6"
+    :defaultIndex="[picker.defaultIndex]"
+    :closeOnClickOverlay="true"
+    @close="picker.show = false"
+    @cancel="picker.show = false"
+    @confirm="pickerConfirm"
+  ></u-picker>
+</template>
+<script setup>
+/*----------------------------------依赖引入-----------------------------------*/
+import config from "@/config";
+import { onLoad, onShow, onReady, onHide, onLaunch, onUnload, onNavigationBarButtonTap, onPageScroll } from "@dcloudio/uni-app";
+import { ref, reactive, computed, getCurrentInstance, toRefs, inject, nextTick, watch } from "vue";
+/*----------------------------------接口引入-----------------------------------*/
+import { doorApi } from "@/api/business/door.js";
+import { faceApi } from "./api.js";
+/*----------------------------------组件引入-----------------------------------*/
+/*----------------------------------store引入-----------------------------------*/
+/*----------------------------------公共方法引入-----------------------------------*/
+const { proxy } = getCurrentInstance();
+/*----------------------------------公共变量-----------------------------------*/
+const state = reactive({
+  webviewStyles: {
+    width: "100%",
+    height: "100%",
+  },
+  doooList: [],
+  modal: {
+    show: false,
+  },
+  picker: {
+    show: false,
+    title: "",
+    list: [[]],
+    defaultIndex: 0,
+  },
+  form: {
+    linkUrl: "",
+    port: "",
+    domain: undefined,
+    doorId: undefined,
+    doorName: undefined,
+  },
+});
+const { webviewStyles, doooList, modal, picker, form, inter } = toRefs(state);
+
+// 初始化
+function init() {
+  //#ifdef APP-PLUS
+  proxy.$permission.getPermisson("camera").then((res) => {
+    if (res) {
+      handleChildren({
+        funcName: "开启摄像头",
+        data: {},
+      });
+    }
+  });
+
+  initNfc();
+  //#endif
+
+  var storage = uni.getStorageSync("storage_face");
+  if (storage) {
+    state.form.domain = storage.domain;
+    state.form.linkUrl = storage.linkUrl.indexOf(":") != -1 ? storage.linkUrl.split(":")[0] : storage.linkUrl;
+    state.form.port = storage.port ? storage.port : "";
+    state.form.doorId = storage.doorId || undefined;
+    state.form.doorName = storage.doorName || undefined;
+  }
+}
+
+// 初始化NFC开门
+function initNfc() {
+  proxy.$nfc.initNFC();
+  proxy.$nfc.readNFC().then((e) => {
+    openDoor();
+    initNfc();
+  });
+}
+
+/**
+ * @门禁下拉列表
+ */
+function getdoorList() {
+  doorApi()
+    .Select({
+      current: 1, //页数
+      size: 2000, //条数
+      productCode: "502_USKY", //产品编码
+      deviceStatus: 2, //设备状态;1：在线，2：离线
+      domain: state.form.domain, //域名
+    })
+    .then((requset) => {
+      if (requset.data.records.length > 0) {
+        requset.data.records.forEach((e) => {
+          state.doooList.push({
+            value: e.deviceUuid,
+            name: e.deviceName,
+          });
+        });
+      }
+    });
+}
+
+/**
+ * @人脸验证
+ */
+function faceVerify(imageBase) {
+  faceApi()
+    .faceVef({
+      domain: state.form.domain,
+      imageBase: imageBase,
+    })
+    .then((item) => {
+      if (item.data.code === 200 || item.data.code === 201) {
+        proxy.$modal.msg(item.data.msg);
+        openDoor(item.data);
+      } else {
+        proxy.$modal.msg(item.data.msg);
+      }
+    })
+    .catch((err) => {});
+}
+
+/**
+ * @门禁开门
+ */
+function openDoor(item) {
+  doorApi()
+    .control({
+      domain: state.form.domain, //域名
+      userId: item.userId,
+      userName: item.faceName,
+      productCode: "502_USKY",
+      deviceUuid: "886e02e86a6f4a9b8e8e5fc0797742b2",
+      commandCode: "door_onoff",
+      commandValue: 1,
+    })
+    .then((item2) => {
+      console.log("开门成功");
+    })
+    .catch((err) => {
+      console.log(err);
+    });
+}
+
+/**
+ * @弹窗确定按钮事件
+ */
+function modalConfirm() {
+  if (!state.form.linkUrl) {
+    proxy.$modal.msg("请输入链接地址");
+    return;
+  }
+
+  if (!/^[a-zA-Z0-9][a-zA-Z0-9-]{1,61}(?:\.[a-zA-Z0-9]{2,})+$/.test(state.form.linkUrl)) {
+    proxy.$modal.msg("请输入正确的链接地址");
+    return;
+  }
+
+  if (!state.form.doorName) {
+    proxy.$modal.msg("请选择绑定门禁");
+    return;
+  }
+
+  uni.setStorageSync("storage_face", state.form);
+  state.modal.show = false;
+}
+
+/**
+ * @action弹出框点击事件
+ */
+function handlePicker(value, index, ind) {
+  if (value == "绑定门禁") {
+    state.picker.title = "绑定门禁";
+    state.picker.list = [state.doooList];
+    state.picker.defaultIndex = 0;
+  }
+  state.picker.show = true;
+}
+
+/**
+ * @action弹出框选择事件
+ */
+function pickerConfirm(e) {
+  if (state.picker.title == "绑定门禁") {
+    state.form.doorId = e.value[0].value;
+    state.form.doorName = e.value[0].name;
+  }
+  state.picker.show = false;
+}
+
+/**
+ * @弹窗退出按钮事件
+ */
+function modalCancel() {
+  state.modal.show = false;
+  //#ifdef APP-PLUS
+  proxy.$keyListen.quitApp();
+  //#endif
+}
+
+/**
+ * @解析父页面传回的数据
+ */
+function analysisData(event) {
+  if ("funcName" in event) {
+    if (event.funcName == "打开配置") {
+      state.modal.show = true;
+    } else if (event.funcName == "人脸识别") {
+      faceVerify(event.data.imageBase);
+    }
+  }
+}
+
+/**
+ * @向子页面发送数据
+ */
+function handleChildren(data) {
+  // #ifdef APP-PLUS
+  var pages = getCurrentPages();
+  var currentWebview = pages[pages.length - 1].$getAppWebview();
+  var wv = currentWebview.children()[0];
+  wv.evalJS(`receiveData(${JSON.stringify(data)})`);
+  // #endif
+
+  // #ifdef H5
+  var iframe = document.getElementById("faceView");
+  iframe.contentWindow.postMessage(data, "*");
+  // #endif
+}
+
+/**
+ * @接收子页面传过来的值
+ */
+function onMessage(e) {
+  analysisData(e.detail.data[0]);
+}
+// #ifdef H5
+window.onmessage = function (event) {
+  analysisData(event.data);
+};
+// #endif
+
+onLoad((options) => {
+  setTimeout(() => {
+    init();
+  }, 500);
+});
+
+onShow(() => {});
+
+onUnload(() => {});
+
+watch(
+  () => [state.form.linkUrl, state.form.port],
+  (val) => {
+    if (!state.form.linkUrl) {
+      return;
+    }
+
+    if (!/^[a-zA-Z0-9][a-zA-Z0-9-]{1,61}(?:\.[a-zA-Z0-9]{2,})+$/.test(state.form.linkUrl)) {
+      return;
+    }
+
+    var domain = "";
+    if (state.form.linkUrl) {
+      domain = state.form.linkUrl;
+      if (state.form.port) {
+        domain += ":" + state.form.port;
+      }
+    }
+
+    state.form.domain = domain;
+    config.baseUrl = "http://" + state.form.domain + "/prod-api";
+    getdoorList();
+  }
+);
+</script>
+<style>
+.faceView {
+  width: 100% !important;
+  height: 100% !important;
+}
+
+iframe {
+  width: 100% !important;
+  height: 100% !important;
+  border-width: 0;
+}
+</style>
+<style lang="scss" scoped>
+:deep() {
+  .u-modal {
+    width: 20rem !important;
+
+    &__title {
+      font-size: 18px !important;
+    }
+    .slot-content {
+      font-size: 16px;
+      width: 100%;
+    }
+  }
+}
+</style>

src/static/face/door.html

@@ -0,0 +1,262 @@
+<!doctype html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>人脸识别</title>
+    <script type="text/javascript" src="./js/tracking-min.js"></script>
+    <script type="text/javascript" src="./js/face-min.js"></script>
+    <script type="text/javascript" src="./js/jquery-2.2.1.min.js"></script>
+    <!-- VUE3 的 SDK -->
+    <script type="text/javascript" src="./js/vue.global.prod.js"></script>
+    <!-- uni 的 SDK -->
+    <script type="text/javascript" src="./js/uni.webview.1.5.4.js"></script>
+    <style>
+        html,
+        body {
+            width: 100%;
+            height: 100%;
+            margin: 0;
+            /* Safari */
+            -webkit-user-select: none;
+            /* Firefox */
+            -moz-user-select: none;
+            /* IE10+/Edge */
+            -ms-user-select: none;
+            /* Standard syntax */
+            user-select: none;
+
+            ::-webkit-scrollbar {
+                display: none;
+            }
+        }
+
+        video,
+        canvas {
+            position: absolute;
+            left: 0;
+            right: 0;
+            top: 342px;
+            bottom: 0;
+        }
+
+        .home-card-face {
+            position: absolute;
+            left: 0;
+            right: 0;
+            top: 0;
+            bottom: 0;
+        }
+
+        .home-card-one,
+        .home-card-two,
+        .home-card-three {
+            color: #000;
+            width: calc(100%);
+            height: calc(100%);
+            text-align: center;
+            background-color: #fff;
+        }
+    </style>
+</head>
+
+<body>
+    <div id="face-container" class="face-container home-card-two">
+
+        <div class="home-card-face" id="home-card-face">
+            <!-- height="1564" -->
+            <video id="video" width="980" height="880" preload autoplay loop muted></video>
+            <canvas id="canvas" width="980" height="880"></canvas>
+            <!--人脸特效区域-->
+            <!-- <div class="specialEffects1" v-if="state.faceImgState"></div>
+            <div class="specialEffects2" v-else></div> -->
+        </div>
+    </div>
+    <script>
+        // 创建Vue实例
+        Vue.createApp({
+            components: {},
+            emits: [],
+            props: {},
+            data() {
+                return {
+                    tracker: null,
+                    trackerTask: null,
+                    state: {
+                        dataAll: {},
+                        thisVenueData: [],
+                        thisVenueTime: {},
+                        nextSceneData: [],
+                        nextSceneTime: {},
+                        timeList: [],
+                        faceImgState: true,
+                    },
+                    timeOutEvent: 0
+                };
+            },
+            computed: {},
+            methods: {
+                // 初始化数据
+                initData() { },
+                // 初始化摄像头
+                initVido() {
+                    var that = this;
+
+                    var video = document.getElementById("video");//视频dom
+                    video.style.transform = 'scaleX(-1)';//视频翻转(1.水平翻转-scaleX(-1) 2.垂直翻转-scaleY(-1))
+                    var canvas = document.getElementById('canvas');//画布dom
+                    canvas.style.transform = 'scaleX(-1)';//画布翻转(1.水平翻转-scaleX(-1) 2.垂直翻转-scaleY(-1))
+                    var context = canvas.getContext('2d');
+                    var time = 2000;
+                    that.tracker = new tracking.ObjectTracker('face');
+                    that.tracker.setInitialScale(4); //设置识别的放大比例
+                    that.tracker.setStepSize(2);//设置步长
+                    that.tracker.setEdgesDensity(0.1);//边缘密度
+                    //启动摄像头，并且识别视频内容
+                    that.trackerTask = tracking.track('#video', that.tracker, {
+                        camera: true
+                    });
+
+                    var flag = true;
+                    that.tracker.on('track', function (event) {
+                        if (event.data.length === 0) {
+                            // console.log('未检测到人脸')
+                            context.clearRect(0, 0, canvas.width, canvas.height);
+                        } else if (event.data.length > 1) {
+                            // console.log('检测到多张人脸')
+                        } else {
+                            context.clearRect(0, 0, canvas.width, canvas.height);
+                            event.data.forEach(function (rect) {
+                                context.strokeStyle = '#409eff';
+                                context.strokeRect(rect.x, rect.y, rect.width, rect.height);
+                                context.fillStyle = "#409eff";
+                                context.lineWidth = 1.5;
+                            });
+                            if (flag) {
+                                console.log("拍照");
+                                that.state.faceImgState = false;
+                                context.drawImage(video, 0, 0, video.width, video.height);
+                                that.saveAsLocalImage();//调用获取图片bold
+                                context.clearRect(0, 0, canvas.width, canvas.height);
+                                flag = false;
+                                setTimeout(function () {
+                                    flag = true;
+                                    that.state.faceImgState = true;
+                                }, time);
+                            } else {
+                                //console.log("冷却中");
+                            }
+                        }
+                    });
+
+                    $("#home-card-face").on({
+                        touchstart: function (e) {
+                            that.timeOutEvent = setTimeout(() => {
+                                that.longPress()
+                            }, 1000);
+                            e.preventDefault();
+                        },
+                        touchmove: function () {
+                            clearTimeout(that.timeOutEvent);
+                            that.timeOutEvent = 0;
+                        },
+                        touchend: function () {
+                            clearTimeout(that.timeOutEvent);
+                            if (that.timeOutEvent != 0) {
+                                console.log("你这是点击，不是长按");
+                            }
+                            return false;
+                        }
+                    })
+                },
+                // 向父页面推送数据
+                parentMessage(type, data) {
+                    var message = {
+                        funcName: type,
+                        data: data,
+                    };
+
+                    //APP-PLUS
+                    uni.postMessage({
+                        data: message
+                    });
+
+                    //H5
+                    if (window.parent) {
+                        window.parent.postMessage(message, '*');
+                    }
+                },
+                // 获取图片bold
+                saveAsLocalImage() {
+                    var myCanvas = document.getElementById("canvas");
+                    var image = myCanvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
+                    this.parentMessage('人脸识别', { imageBase: image })
+                },
+                // 解析数据
+                analysisData(event) {
+                    console.log(event.funcName)
+                    if ("funcName" in event) {
+                        if (event.funcName == "初始化数据") {
+                            this.state.dataAll = JSON.parse(event.data).dataAll
+                            this.state.thisVenueData = JSON.parse(event.data).thisVenueData
+                            this.state.thisVenueTime = JSON.parse(event.data).thisVenueTime
+                            this.state.nextSceneData = JSON.parse(event.data).nextSceneData
+                            this.state.nextSceneTime = JSON.parse(event.data).nextSceneTime
+                            this.state.timeList = JSON.parse(event.data).timeList
+                            this.initData();
+                        } else if (event.funcName == "开启摄像头") {
+                            this.initVido();//调用初始化摄像头
+                        }
+                    }
+                },
+                // 长按事件
+                longPress() {
+                    this.parentMessage('打开配置')
+                    this.timeOutEvent = 0
+                },
+                // 监听页面是否隐藏
+                handleVisibilityChange() {
+                    if (document.visibilityState === 'visible') {
+                        // 页面变为可见时的处理逻辑
+                        console.log('页面变为可见');
+                        this.initVido();
+                    } else if (document.visibilityState === 'hidden') {
+                        // 页面变为不可见时的处理逻辑
+                        console.log('页面变为不可见');
+                        this.closeFace();
+                    }
+                },
+                closeFace() {
+                    try {
+                        this.tracker = null
+                        // 关闭摄像头
+                        let video = document.getElementById('video')
+                        video.srcObject.getTracks()[0].stop()
+                        // 停止侦测
+                        this.trackerTask.stop()
+                    } catch (error) { }
+                }
+            },
+            created() {
+                var that = this
+                // APP-PLUS || H5（接收父页面传过来的值）
+                window.receiveData = (msg) => {
+                    that.analysisData(msg)
+                }
+                window.addEventListener("message", function (event) {
+                    that.analysisData(event.data)
+                });
+            },
+            mounted() {
+                document.addEventListener('visibilitychange', this.handleVisibilityChange);
+            },
+            beforeDestroy() {
+                // 移除window方法
+                window.receiveData = null;
+            },
+            watch: {},
+        }).mount('#face-container');
+    </script>
+</body>
+
+</html>

unpackage/config/setting.js

@@ -33,8 +33,8 @@ filesToModify.forEach((file) => {
                 state.name = '智能巡更'
                 state.appid = '__UNI__BF1A1F0'
                 state.description = '智能巡更app，是一款用于监督和记录巡逻人员按照预定路线和时间进行巡逻的系统。'
-                state.versionName = "2.2.0"
-                state.versionCode = 20
+                state.versionName = "2.2.7"
+                state.versionCode = 27
                 state.h5.title = '智能巡更'
 
                 maps.amap.name = "amap_15575941817CWPEQVCyc"