deji_demo/main.js

import QMUtil from "./util.js";
import { btnStatus,recorder,getWebSocketUrl,connectWebSocket } from "./recorder.js"

import { createAlova } from 'alova';
import adapterFetch from 'alova/fetch';

let { onchangeSize,initDate,setScrollPosition,addBackItemText,addItemImg,addItemSmallImg,addItemBigImg,addredHot,addBackItemAction,addBackShopAction,addWrapper,addClickItemImg,addClickWCList,addQRCode, washroom } = QMUtil;

const alovaInstance = createAlova({
  requestAdapter: adapterFetch(),
  responded: response => response.json()
});

window.cli = null
window.woNode = null
window.woVoice = null
window.isSearch=false;

window.onload = () => {
    onchangeSize();
    window.addEventListener("resize",onchangeSize);
    initDate();  //初始化时间
    window.setInterval(initDate,60000);
    setScrollPosition();  //自动滚动到底部
    document.addEventListener("click",()=>{
        window.hello();
    });

    MainMap_QM.init(()=>{},{
        build : 0,
        floor : 0,
        navPoint : 3,
        angle : 0,
        pathStyle:"3D"
    }); 
}

let addMy = () => {
    window.woNode = document.createElement("li");
    window.woNode.className = "right"
    window.woNode.innerHTML="<span>我</span>";
    document.getElementById("cont").appendChild(window.woNode);

    window.woVoice = document.createElement("li");
    window.woVoice.className = "right"
    document.getElementById("cont").appendChild(window.woVoice);
    window.cli = document.createElement("div");
    window.woVoice.appendChild(window.cli);
}

window.audioStart = () => {
    //开始识别
    if(!window.isSearch){
        window.stopTTS();
        if (btnStatus === "UNDEFINED" || btnStatus === "CLOSED") {
            connectWebSocket();
            document.getElementById("stopBnt").style.display = "block";
            document.getElementById("startBnt").style.display = "none";
            addMy();  //添加我气泡
            setScrollPosition();
        }
        //callAiModel("服务台在哪里");
    }
}

function delMy(){
    if(window.cli && !window.cli.innerText){
        window.woVoice.remove();
        window.woNode.remove();
        window.woNode = null;
        window.cli = null;
        window.woVoice = null;
    }
}

window.content = [{"logo":"./assets/con1.png","img":"./assets/conDail.png"},{"logo":"./assets/con2.png","img":"./assets/conDail.png"},{"logo":"./assets/con3.png","img":"./assets/conDail.png"},{"logo":"./assets/con4.png","img":"./assets/conDail.png"},{"logo":"./assets/con5.png","img":"./assets/conDail.png"}]

//接收模型回复处理内容
function callBack(str){
    window.isSearch = false;
    document.getElementById("ing").remove();
    console.log(str);
    let obj = str;
    if(obj.code == 200){
        if(obj.data.value){
            addredHot();
        }
        switch(obj.data.type){
            case "shopNotFound" :
                addredHot();
                addBackItemText("此品牌在我商场未入驻。");
                break;
            case undefined:
                break;
            case "shopList" :
                    if(obj.data.value.text){
                        addBackItemText(obj.data.value.text);
                    }else{
                        if(obj.data.value.content && obj.data.value.content.length>0){
                            let opt = {
                                value:"",
                                txt:"为您推荐以下店铺"
                            }
                            obj.data.value.content.sort((a,b)=>{
                                if(a.buildingOrder != b.buildingOrder){
                                    return a.buildingOrder - b.buildingOrder;
                                }else{
                                    return a.floorOrder - b.floorOrder;
                                }
                            });
                            obj.data.value.content.forEach((item,index)=>{
                                let floor=item.building+item.floor+"楼";
                                if(!opt.value){
                                    opt.value = floor;
                                    opt.txt += floor+item.name+", ";
                                }else{
                                    if(opt.value == floor){
                                        opt.txt += item.name+", ";
                                    }else{
                                        opt.txt += floor+item.name+", ";
                                    }
                                }
                            })
                            opt.txt = opt.txt.substring(0, opt.txt.length-2);
                            addBackItemText(opt.txt);
                        }
                    }
                    if(obj.data.value.content && obj.data.value.content.length>0){
                        let div = addWrapper();
                        addBackShopAction(div, obj.data.value.content, null);
                    }
                break;
            case "activity" :
                addBackItemText(obj.data.value.text || "为您推荐以下活动");
                obj.data.value.content.forEach((item, index)=>{
                    addBackItemAction(item);
                });
                break;
            case "shop" :
                if(typeof obj.data.value != "string"){
                    if(obj.data.value.length !=0){
                        let opt = {
                            value:"",
                            txt:""
                        }
                        obj.data.value.sort((a,b)=>{
                            if(a.buildingOrder != b.buildingOrder){
                                return a.buildingOrder - b.buildingOrder;
                            }else{
                                return a.floorOrder - b.floorOrder;
                            }
                        });
                        obj.data.value.forEach((item,index)=>{
                            let floor=item.building+item.floor+"楼";
                            if(!opt.value){
                                opt.value = floor;
                                opt.txt += floor+", ";
                            }else{
                                if(opt.value != floor){
                                    opt.txt += floor+", ";
                                }
                            }
                        })
                        opt.txt = opt.txt.substring(0, opt.txt.length-2);
                        if(obj.data.value.length === 1){
                            addBackItemText(`${obj.data.value[0].name} 位于商场 ${opt.txt},\n下方为您推荐导航路线`);
                            console.log(obj.data.value[0]["house_number"])
                            addItemImg("./assets/map.png",pathFun,obj.data.value[0]["house_number"]);
                            addQRCode(); 
                            if(obj.data.recommend && obj.data.recommend.length>0){
                                addBackItemText("相关品牌推荐：","",false);
                                let div = addWrapper();
                                addBackShopAction(div, obj.data.recommend, null);
                            }
                        }else{
                            addBackItemText(`${obj.data.query} 位于商场 ${opt.txt}`);
                            let div = addWrapper();
                            addBackShopAction(div, obj.data.value, null);
                        }
                    }else{
                        addBackItemText(`您的问题我还在持续学习中.`);
                    }
                }else{
                    addBackItemText(obj.data.value);
                }
                break;
            case "facility" :
                if(obj.data.value === "服务台"){
                    addBackItemText(`客服中心在二期七楼，下方为您推荐导航到${obj.data.value}的路线`);
                    addItemImg("./assets/map1.png",pathFac,"fwt");
                }else{
                    addBackItemText(`下方为您推荐导航到最近${obj.data.value}的路线`);
                    addItemImg("./assets/map1.png");
                }
                addQRCode(); 
                break;
            case "weather" :
                addBackItemText(`${obj.data.value.city}今天天气${obj.data.value.dayweather}，最高温度${obj.data.value.daytemp_float}`);
                break;
            case "member" :    //会员等级
                obj.data.value.text && addBackItemText(obj.data.value.text);
                if(obj.data.value.content && obj.data.value.content.length>0){
                    let div = addWrapper();
                    obj.data.value.content.forEach((item, index)=>{
                        addClickItemImg(div, item.logo, "", 200, 200, null);
                    });
                }
                break;
            case "qrcode" :    //二维码
                if(obj.data.value.text || obj.data.value.content){
                    obj.data.value.text && addBackItemText(obj.data.value.text);
                    if(obj.data.value.content && obj.data.value.content.length>0){
                        addItemSmallImg(obj.data.value.content[0].logo);
                    }  
                }else{
                    addBackItemText("您的问题我还在持续学习中.");
                }  
                break;
            case "coupon" :    //优惠券
                if(obj.data.value.text || window.content.length>0){
                    addBackItemText(obj.data.value.text || "为您推荐以下优惠券");
                    if(window.content.length>0){
                        let div = addWrapper();
                        window.content.forEach((item)=>{
                            addClickItemImg(div, item.logo, item.img, 165, 212, window.clickCoupon);
                        });
                    }
                }else{
                    addBackItemText("您的问题我还在持续学习中.");
                }
                break;
            case "washroom" :    //洗手间
                addBackItemText(`下方为您推荐导航到最近洗手间的路线`);
                addItemImg("./assets/map1.png",pathFac,"xsj");
                addQRCode(); 
                addBackItemText(`网红洗手间推荐：`,"",false);
                addClickWCList(addWrapper(),window.clickWashroom);
                break;
            case "video" :    //视频
                obj.data.value.text && addBackItemText(obj.data.value.text);
                if(obj.data.value.content && obj.data.value.content.length>0){
                    addItemBigImg(obj.data.value.content[0].logo, obj.data.value.content[0].video, window.clickVideo);
                }
                break;
            default :
                obj.data.value && addBackItemText(obj.data.value);
                break;
        }
    }
    setScrollPosition();
}
// 导航设施
window.pathFac = function(event){
    window.isplayHello = false;  //停止播放招呼语音
    window.stopTTS();
    let mark = document.getElementById("mark");
    mark.style.display = "flex";
    document.getElementById("mapContainer").style.visibility = "visible";
    let nodeObject = Map_QM.pathIcon({"type":event.target.dataset.num});
    Map_QM.pathNode(nodeObject,()=>{

    });
    mark.addEventListener("click", ()=>{
        mark.style.display = "none";
        document.getElementById("mapContainer").style.visibility = "hidden";
        Map_QM.showFloor(0);
        window.isplayHello = true;
        window.hello();
    })
}
// 导航店铺
window.pathFun = function(event){
    window.isplayHello = false;  //停止播放招呼语音
    window.stopTTS();
    let mark = document.getElementById("mark");
    mark.style.display = "flex";
    document.getElementById("mapContainer").style.visibility = "visible";
    let nodeObject = Map_QM.shopNumToNavPoint({"houseNumber":event.target.dataset.num},"shop");
    Map_QM.pathNode(nodeObject,()=>{

    });
    mark.addEventListener("click", ()=>{
        mark.style.display = "none";
        document.getElementById("mapContainer").style.visibility = "hidden";
        Map_QM.showFloor(0);
        window.isplayHello = true;
        window.hello();
    })
}
//点击优惠券弹窗
window.clickCoupon = function(event){
    console.log(event.target.dataset.pop);
    window.isplayHello = false;  //停止播放招呼语音
    window.stopTTS();
    let mark = document.getElementById("mark");
    mark.style.display = "flex";
    let video = document.createElement("img");
    video.src = event.target.dataset.pop;
    video.style.width = "700px";
    video.style.margin="auto";
    mark.appendChild(video);
    mark.addEventListener("click", ()=>{
        video.remove();
        mark.style.display = "none";
        window.isplayHello = true;
        window.hello();
    })
}
window.clickVideo = function(event){
    console.log(event.target.dataset.video);
    window.isplayHello = false;  //停止播放招呼语音
    window.stopTTS();
    let mark = document.getElementById("mark");
    mark.style.display = "flex";
    let video = document.createElement("video");
    video.src = event.target.dataset.video;
    video.autoplay = true;
    video.style.width = "100%";
    video.style.height = "100%";
    mark.appendChild(video);
    mark.addEventListener("click", ()=>{
        video.remove();
        mark.style.display = "none";
        window.isplayHello = true;
        window.hello();
    })
}
//点击洗手间
window.clickWashroom = function(event){
    console.log(event.target.dataset.floor);
    window.isplayHello = false;  //停止播放招呼语音
    window.stopTTS();
    let mark = document.getElementById("mark");
    mark.style.display = "flex";

    let div = document.createElement("div");
    div.className = "wcdail";
    div.innerHTML = `<div class="hotroom">
                <img style="border-radius: 12px;position: absolute;" src="${event.target.dataset.img}" width="255" />
                <div class="wccontent">
                    <span class="wctitle">洗手间-${event.target.dataset.name}</span>
                    <span class="wcaddress"><img src="./assets/wc/add_icon.png"/>${event.target.dataset.floor}</span>
                </div>
            </div>
            <img src="./assets/wc/wc_nav.png" />`;
    mark.appendChild(div);
    mark.addEventListener("click", ()=>{
        div.remove();
        mark.style.display = "none";
        window.isplayHello = true;
        window.hello();
    })
}

let getAiData = async (msg) => {
    const response = await alovaInstance.Post('http://dify.123.1000my.com:59222/v1/workflows/run', {
        inputs: {
            "question": msg
        },
        response_mode: 'blocking',
        user: 'djdemo'
      },{
        headers: {
          'Authorization': 'Bearer app-Fzon9DlAGNVwJSSrjF1gCiw4'
        }
      }).catch(error => {
        let res = {
            code:200,
            data: {
                "type": "other",
                "value": "您的问题我还在持续学习中."
            }
        }
        callBack(res)
        return;
      });
    console.log(response)
    let res = {
        code:200,
        data: {
            "type": response.data?.outputs?.type,
            "value": response.data?.outputs?.value,
            "recommend": response.data?.outputs?.recommend,
            "query": response.data?.outputs?.query
        }
    }
    callBack(res)
}

function callAiModel(msg){
    window.isSearch = true;
    // 调用模型
    addBackItemText("思考中...","ing",false);
    setScrollPosition();
    // 调用api
    getAiData(msg); 
}

//停止识别后动作
window.audioStop = () => {
    //停止识别
    if (btnStatus === "CONNECTING" || btnStatus === "OPEN") {
        // 结束录音
        recorder.stop();
    }else if (btnStatus === "CLOSED"){
        document.getElementById("stopBnt").style.display = "none";
        document.getElementById("startBnt").style.display = "block";
        delMy();  //没有收到语音，删除空气泡
        // 调用模型
        callAiModel(window.cli.innerText)
    }
}
//语音播放完成
window.playOver=()=>{
    window.changeBg();
    window.hello();
    window.isplayHello=true;
}
window.timer=-1;
window.isplayHello=true;
window.hello=()=>{
    clearTimeout(window.timer);
    window.timer = setTimeout(()=>{
        clearTimeout(window.timer);
        if(window.isplayHello){
            window.isHello=true;
            window.startTTS("您好呀，我是德基广场数字客服小红帽，请问有什么需要帮助的吗？");
            document.getElementById("cont").innerHTML = `<li class="left"><span>小红帽</span></li><li class="left"><div>您好呀，有什么需要帮助的吗？</div></li>`;
        }
    },60000);
}
window.isHello=true;
window.changeVideo=()=>{
    document.getElementById("bgVideo").style.display = "none";
    document.getElementById("hVideo").style.display = window.isHello ? "" : "none";
    document.getElementById("aVideo").style.display = !window.isHello ? "" : "none";
}
window.changeBg=()=>{
    document.getElementById("bgVideo").style.display = "";
    document.getElementById("hVideo").style.display = "none";
    document.getElementById("aVideo").style.display = "none";
}