whsw-h5/src/App.vue

<template>
    <div id="app" class="no-scrollbar" style="width: 100%;">
        <!--        <div
            v-show="(this.ws && this.ws.readyState == 1) || !this.ws"
            style="position: absolute;background: orangered;width: 2vw;height: 2vh;right: 0"
        ></div>-->
        <div v-if="debug" class="record-wrapper" style="position: absolute;top: 0;z-index: 999;">
            <div class="msg msg-right" style="display: contents;">
                <div
                    :key="this.consoleList.index"
                    class="message-wrapper-right"
                    style="width:90%;display: flex;background-color: rgba(220,220,220,0.7) !important;border-radius: 2px !important;"
                >
                    <div class="message" style="font-size: 5px !important;text-align: left !important;">
                        {{ this.consoleList && this.consoleList.time ? this.consoleList.time + ":" : "" }}:{{
                            (this.consoleList ? this.consoleList.message : "") +
                                "（pg：" +
                                this.lastProgress +
                                ";sleep:" +
                                this.sleep +
                                ";speak:" +
                                this.isSpeaking +
                                ";state:" +
                                this.stateVal +
                                ";npl:" +
                                this.lastNplText +
                                ";tts:" +
                                this.lastTtsText +
                                ";q:" +
                                this.lastQText +
                                ";locked:" +
                                this.execLocked +
                                ";qHandle:" +
                                this.qHandleType +
                                "）" +
                                this.otherLog +
                                JSON.stringify(this.lastPerson) +
                                this.reqResult +
                                "noDetectedFace:" +
                                this.noDetectedFace() +
                                "noPersonHere:" +
                                this.noPersonHere()
                        }}
                    </div>
                    <button class="btn" style="position: absolute;top:12vh;" @click="sendMsg(1)">
                        TEST
                    </button>
                </div>
            </div>
        </div>
        <navigation>
            <router-view :style="content"> </router-view>
        </navigation>
    </div>
</template>

<script>
import Cloudia from "./api/cloudia-sdk-v1.4.1";
import { handleFaceType } from "./utils/handleTts";
import moment from "moment";
import { mapMutations, mapState } from "vuex";
var initTimer2 = 0;

export default {
    name: "App",
    data() {
        return {
            isRouterAlive: true,
            interactive: "",
            content: "",
            retryLoadClientType: 0,
            lastDetectTs: 0,
            lastPersonTs: 0,
            lastPerson: {},
            sockData: {},
            lastNplText: "",
            lastTtsText: "",
            lastMsDetectTs: 0,
            lastMsNlpTimes: 0,
            lastDetectObj: {},
            lastQText: "",
            lastQTs: 0,
            execLocked: "",
            qHandleType: "",
            reqResult: "",
            otherLog: "",
            otherLog2: "",
            sleep: false,
            isSpeaking: false,
            cameraMode: "level",
            jsHandleStateEnabled: false,
            jsPlayTtsEnabled: true,
            stateVal: "",
            ws: null,
            times: 0,
            timeoutObj: null,
            serverTimeoutObj: null,
            timeout: 10000,
            qData: {},
            nlpData: {},
            rMsg: {},
            heartCheck: {
                reset: this.reset,
                start: this.start
            },
            consoleList: {},
            debug: this.$cmdList.debug,
            connectTimer: null,
            strangerDetectTimes: 0
        };
    },
    computed: {
        ...mapState({
            lastProgress: "lastReq",
            padInfo: "pad",
            lPerson: "lastPerson",
            localDev: "localDevInfo",
            debugFlag: "debug"
        })
    },
    watch: {
        padInfo: {
            handler: function(val, oldVal) {
                let that = this;
                if (val && that.$cmdList.detectedFaceEnable) {
                    that.wsInit();
                }
            },
            deep: true
        }
    },
    mounted() {
        window._ = _;
        window.globalVue = this.$children[0];
        window.timer = undefined;
        window.intimer = undefined;
        window.socketTimer = undefined;
        window.closeTimer = undefined;
        window.Cloudia = Cloudia;
        window.$ = $;
    },
    destroyed() {
        // console.log("=========app destroyed====");
    },
    methods: {
        ...mapMutations([
            "setLastPerson",
            "setLastReq",
            "setProgressPerson",
            "setLocalDevInfo",
            "setRobotMsg",
            "setWs"
        ]),
        reset: function() {
            this.timeoutObj && clearTimeout(this.timeoutObj);
            this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj);
            return this;
        },
        start: function() {
            let self = this;
            this.timeoutObj = setTimeout(function() {
                self.ws.send("ping");
                self.serverTimeoutObj = setTimeout(function() {
                    self.ws.close();
                }, self.timeout);
            }, this.timeout);
        },
        consoleLog(text) {
            let ts = new Date().getTime();
            this.consoleList = {
                index: ts,
                message: text,
                time: moment(ts).format("mm:ss.SSS")
            };
        },
        setProgressCode(key) {
            this.setLastReq(key);
        },
        sendMsg(type) {
            var that = this;
            that.setLastReq("dhys");
        },

        returnAdPage() {
            // this.sleep = true;
            this.sleep = false;
            this.setLastReq("");
            this.isSpeaking = false;
            this.meetingDateStr = "";
            this.meetingTitle = "";
            // this.lastMsNlpTimes = 0;
            // this.lastMsDetectTs = 0;
            this.strangerDetectTimes = 0;
            this.msgList = [
                {
                    from: 2,
                    message: "您好，我是小酷。"
                }
            ];
        },
        leaveAdPage() {
            this.sleep = false;
            // window.Cloudia && window.Cloudia.setClothes("suit_blue");
        },
        wsInit() {
            var that = this;
            if (this.padInfo && this.padInfo.ipAddr) {
                // let wsUrl = "ws://127.0.0.1:9090";
                let wsUrl = "ws://" + this.padInfo.ipAddr + ":9090";
                //先判断浏览器是否支持WebSocket
                if (typeof WebSocket === "undefined") {
                    that.$alert("您的浏览器不支持socket");
                } else {
                    // 判断 WebSocket是否已经建立连接，避免重复连接
                    // this.ws && this.ws.close();
                    // 新增一个websocket实例，并且建立连接
                    this.ws = new WebSocket(wsUrl);
                    // 连接成功后的回调函数
                    this.ws.onopen = this.handleWsOpen;
                    // 收到服务器数据后的回调函数
                    this.ws.onmessage = this.handleWsMessage;
                    // 连接关闭后的回调函数
                    this.ws.onclose = this.handleReconnectWs;
                    // 报错时的回调函数（网络断开，网络不稳定， 用户电脑休眠）
                    this.ws.onerror = this.handleReconnectWs;

                    this.setWs(this.ws);
                }
            } else {
                that.handleReconnectWs();
            }
        },
        // ws建立连接
        handleWsOpen() {
            this.consoleLog("websocket已连接，初始化成功");
            this.heartCheck.reset().start();
        },
        // ws拿到服务器（后端接口）或者客户端（心跳监测或者自测）发送的数据
        handleWsMessage(msg) {
            this.heartCheck.reset().start();
            // 拿到的数据
            let result = msg.data;
            let that = this;
            if (result == "tong") {
                return;
            }

            that.lastDetectTs = new Date().getTime();
            that.sockData = JSON.parse(result);
            that.consoleLog(JSON.stringify(that.sockData));
            if (!that.isSpeaking && (that.lastProgress == "" || that.lastProgress == "moshengren")) {
                that.handleDetectedFace(that.sockData);
            }
        },

        // 重连ws
        handleReconnectWs() {
            this.connectTimer && clearTimeout(this.connectTimer);
            let that = this;
            that.consoleLog("socket断开链接");
            that.times++;
            this.connectTimer = setTimeout(() => {
                if (that.ws) {
                    that.consoleLog("重连" + that.times + "次", that.ws.readyState);
                    // 接已经关闭，或者打开连接失败
                    if (that.ws.readyState === 3) {
                        that.wsInit();
                    }
                } else {
                    that.consoleLog("重连" + that.times + "次");
                    that.wsInit();
                }
            }, 3000);
        },
        handleDetectedFace(obj) {
            let that = this;
            let str = "";
            if (obj && (obj.id == undefined || obj.id == -1)) {
                //识别到脸，不是系统里的合法人脸

                // let currentTs = new Date().getTime();
                // that.lastDetectTs = currentTs; //识别到脸的时间戳
                // that.lastMsDetectTs = that.lastMsDetectTs == 0 ? currentTs : that.lastMsDetectTs; //陌生人识别时间戳
                that.leaveAdPage();

                //陌生人识别3秒，只提示一次
                if (that.strangerDetectTimes > 5) {
                    // that.$alert("moshengren");
                    // that.strangerDetectTimes = 0;
                    that.lastDetectObj = obj;
                    that.lastPerson = {};
                    that.setLastPerson({});
                    // that.lastMsDetectTs = 0;
                    str += handleFaceType(that, obj);
                    that.sleep = false;
                    that.rMsg = { text: str, ts: new Date().getTime() };
                    that.setRobotMsg(that.rMsg);
                    // that.lastMsNlpTimes++;
                } else {
                    that.strangerDetectTimes++;
                }
            } else if (obj && (obj.id.length > 6 || obj.id > 0)) {
                that.strangerDetectTimes = 0;
                //识别到认识的人
                // that.lastMsDetectTs = 0;
                let currentTs = new Date().getTime();
                that.lastDetectTs = currentTs;
                that.lastDetectObj = obj;
                //识别到人
                /*if (obj.name != "") {
                    if (that.lastProgress == "moshengren") {
                        // that.setLastReq("");
                    }
                }*/
                /*if (that.lastProgress == "moshengren") {
                    return;
                }*/

                if (that.lastDetectObj.id === that.lastPerson.id) {
                    that.lastPerson.name = that.lastDetectObj.name;
                    that.lastPerson.tag = that.lastDetectObj.tag;
                }
                //1分钟识别到同一人只执行一次
                if (
                    (obj.id == that.lastPerson.id && (currentTs - that.lastPersonTs >= 60000 || that.sleep)) ||
                    obj.id != that.lastPerson.id
                ) {
                    // that.lastMsNlpTimes = 0;
                    that.lastPerson = obj;
                    that.setLastPerson(obj);
                    that.lastPersonTs = currentTs;
                    str += handleFaceType(that, obj);
                    that.rMsg = { text: str, ts: new Date().getTime() };
                    if (that.lastProgress == "") {
                        that.setRobotMsg(that.rMsg);
                    }
                    that.sleep = false;
                    that.addMsgList(2, str);
                } else {
                    that.consoleLog("repeat person:" + obj.id);
                }
            }
        },
        noDetectedFace() {
            let currentTs = new Date().getTime();
            if (currentTs - this.lastDetectTs > this.$cmdList.judgeDetectedNoPerson) {
                //5秒内没识别
                return true;
            }
            return false;
        },
        noPersonHere() {
            let currentTs = new Date().getTime();
            if (currentTs - this.lastQTs > this.$cmdList.judgeNoPerson) {
                //15秒钟不说话
                return this.noDetectedFace();
            }
            return false;
        },
        setIsSpeaking(speak) {
            this.isSpeaking = speak;
        }
    }
};
</script>

<style lang="scss">
* {
    margin: 0;
    padding: 0;
}

html,
body {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: hidden;
}

.record-wrapper {
    margin: 4px;
    padding: 4px;
    width: 90vw;
}

#app {
    width: 100%;
    height: 100%;
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
}

// 隐藏滚轮
.no-scrollbar {
    -ms-overflow-style: none;
    overflow: -moz-scrollbars-none;
    /*background-color: black;*/
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.no-scrollbar::-webkit-scrollbar {
    width: 0 !important;
}

img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}
img[lazy="loading"] {
    background-color: white;
}

.single-line-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block !important;
    text-align: left;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
</style>