crm-project/src/views/Main.vue

<!--
 * @Descripttion: 
 * @version: 
 * @Author: Lone
 * @Date: 2021-10-29 20:25:53
 * @LastEditors: Lone
 * @LastEditTime: 2022-01-02 21:11:19
-->
<template>
    <div class="main" ref="main">
        <a-layout class="layout">

            <!-- 頂部 -->
            <a-layout-header class="layout-header" @click="onSocketSend"><!-- @click="visible = true"-->
                <Header />
            </a-layout-header>
            
            <a-layout class="layout-body" >

                <!-- sider-menu 菜單部分  -->
                <a-layout-sider class="layout-sider" width="100">
                    <Sider />
                </a-layout-sider>

                <!-- content 主體部分 -->
                <a-layout-content class="layout-content" ref="content">  
                    <transition name="fade-transform" mode="out-in">
                        <keep-alive>
                        <router-view />
                        </keep-alive>
                    </transition>
                </a-layout-content>
                
            </a-layout>
        </a-layout>
    </div>
</template>

<script>
// @ is an alias to /src
import Header from '@/components/Layout/Header';
import Sider from '@/components/Layout/Sider';
// import Api from '@/services/api';

export default {
    name: "Main",
    components: {
        Header, Sider
    },
    data(){
        return{
            isShow:false,
            isUserSettingShow:false, //clickSetting 使用
            pgTit:"",
            subMenu:false,
            websock: null,
            socketOptions: {
                url: 'wss://service.mysales.com.tw/websocket/api/midway/mailServer/1',
                limit: 5,
                count: 0
            }
        }
    },
    created() {
        // NOTE: 45min refresh policy is what google recommends
        //window.setInterval(this.$gapi.refreshToken(), 2.7e6); //每45分钟自动更新一次token
        //console.log('App.vue created 打印this.$api: ', this.$api);
        
        //note: 进入应用后，需要执行的初始化操作 
        // 连接 邮件websocket
        this.initWebSocket();

        //获取邮箱账号信息
        this.initMailInfo();
        // setTimeout(() => {
        // }, 1000);
    },
    destroyed () {
        this.websock.close();
    },
    methods:{
        initMailInfo () {
            this.$store.dispatch('mail/getMailAccountList').then(res => {
                if (!res) return this.$message.error('初始化邮箱数据失敗!', 5); 
                // this.$message.success('初始化邮箱数据成功!', 3); 
            })
        },
        openSubMenu(){
            this.subMenu = !this.subMenu;
        },
        pgLink(pgUrl){
            this.subMenu = false;
            this.$router.push(pgUrl);
        },
        clickMore(){
            this.isShow = true;
        },
        closeSubNav(){
            this.isShow = false;
        },
        clickRouter(linkName){
            if(linkName){
                // router.push();
                this.isShow = false;
                // router.push('importData');
            }
        },
        // clickSetting(){
        //      this.isUserSettingShow = !this.isUserSettingShow;
        // },
        // settingLink(linkName){
        //     this.$router.push(linkName);
        //     this.isUserSettingShow = false;
        // }
        initWebSocket () { //初始化weosocket
            // const wsuri = "ws://52.221.25.56:9230/mailServer/1";
            // const wsuri = "ws://52.74.188.171:9200/api/midway/mailServer/1";
            const wsuri = "wss://service.mysales.com.tw/api/midway/mailServer/1";
            this.websock = new WebSocket(wsuri);
            this.websock.onmessage = this.onSocketMessage;
            this.websock.onopen = this.onSocketOpen;
            this.websock.onerror = this.onSocketError;
            this.websock.onclose = this.onSocketClose;
        },
        onSocketOpen () { //连接建立之后执行send方法发送数据
            let actions = {"message":"Hello World!!!"};
            this.onSocketSend(JSON.stringify(actions));
        },
        onSocketError () {//连接建立失败重连
            if (this.socketOptions.count <= this.socketOptions.limit) {
                this.initWebSocket();
                this.socketOptions.count++;
            } else {
                this.websock.close();
                this.$message.error('连接socket失败！！！');
            } 
        },
        onSocketMessage (e) { //数据接收
			if(e.data.substr(0,1)=='{'){
				const message = JSON.parse(e.data);
				if (message.mailCount > 0) {
					console.log('有新消息過來了: ', message);
					this.$store.commit('mail/SET_NEW_MAIL_COUNT', message.mailCount);
				};
			}else{
			}
        },
        onSocketSend (Data) {//数据发送
            let actions = {"message":"Hello World!!!"};
            this.websock.send(JSON.stringify(actions));
        },
        onSocketClose (e) {  //关闭
            console.log('断开连接',e);
        },
    }
};
</script>

<style>
    .main {
        height: 100%;
    }
</style>