wszhyWx/src/views/vrcode.vue

<template>
    <div class="index vrcode">
        <div class="header">
            <div class="header-left">
                <img src="../assets/image/logo.png" alt="">
            </div>
            <div class="header-center">

            </div>
            <div class="header-right" v-if="userInfo">
                <div class="return-btn" @click="returnBtn">返回</div>
                <img src="../assets/image/avatar.png" alt="">
                <div class="user-data">
                    <div class="name">欢迎，{{ userInfo.nickName }}</div>
                    <div class="time" v-if="time"> {{ time.year.year }}-{{ time.year.month }}-{{ time.year.date }}</div>
                </div>
                <div class="login-out" @click="loginOut"></div>
            </div>
        </div>
        <div class="index-content">
            <div class="left collapse scroll">
                <el-menu :default-active="routerNow" class="el-menu-vertical-demo" @open="clickmenu" @close="clickmenu">
                    <template v-for="item, index in leftList">
                        <el-submenu @click="toRouter1(item)" :index="item.router" v-if="item.list.length">
                            <template slot="title">
                                <div class="img"><img :src="item.img" alt=""></div>
                                <span>{{ item.name }}</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item :disabled="item1.router ? false : true" @click="toRouter1(item1)"
                                    :index="item1.router" v-for="item1, index1 in item.list">{{ item1.name }}</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>
                        <el-menu-item @click="toRouter1(item)" :index="item.router" v-else>
                            <div class="img"><img :src="item.img" alt=""></div>
                            <span>{{ item.name }}</span>
                        </el-menu-item>
                    </template>

                </el-menu>

            </div>
            <div class="right right-page">
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>
<script>
import { getnowtime } from '../assets/js/nowTime'
export default {
    data() {
        return {
            time: null,//当前时间


            activeNames: [3],
            leftList: [
                {
                    name: '种植计划', router: 'plantingPlan',
                    img: require('../assets/image/vrcode-icon0.png'),
                    list: [],
                    isRouter: true,
                },
                {
                    name: '生产环节', router: 'productionProcess',
                    routerList: ['agricultural', 'sprayInsecticide', 'spreadManure', 'pickingRecords'],
                    img: require('../assets/image/vrcode-icon1.png'),
                    list: [{ name: '农事管理', router: '' },//agricultural
                    { name: '施肥记录', router: '' },//spreadManure
                    { name: '打药记录', router: '' },//sprayInsecticide
                    { name: '采摘记录', router: '' },//pickingRecords
                    { name: '清洁记录', router: '' },
                    { name: '病虫害管理', router: '' },]
                },
                {
                    name: '产品追溯', router: 'productTraceability',
                    routerList: ['setsuyuan'],
                    img: require('../assets/image/vrcode-icon2.png'),
                    list: [{ name: '溯源批次', router: '' },
                    { name: '配置溯源版面', router: 'setsuyuan' },
                    { name: '各种报告库', router: '' }]
                },
                {
                    name: '基础信息设置', router: 'setting', routerList: [],
                    img: require('../assets/image/vrcode-icon3.png'),
                    list: [{ name: '作物品种', router: '' },
                    { name: '种植栽培模式', router: '' },
                    { name: '农事作业工序', router: '' },
                    { name: '人员管理', router: '' },
                    { name: '农场信息管理', router: '' },
                    { name: '供应商管理', router: '' },
                    { name: '生产资料管理', router: '' },
                    { name: '农机工具管理', router: '' },
                    { name: '作物外观图片库', router: '' },]
                },],
            routerNow: 'plantingPlan',
            deviceName: 1,
            routerIndex: 1,
            equipmentList: [],
            userInfo: null,
            loading: true,//页面加载
            IDTimer: null,
        }
    },
    watch: {
        "$route"(newName, oldName) {
            this.gerRouter();
        },
    },
    mounted() {
        const that = this
        this.getTime()
        var router = this.$route.query
        if (router.token && router.userid) {
            localStorage.setItem('token', router.token)

            this.api.getUser({ userId: router.userid }).then(res => {
                var data = res.data.data
                data.userid = router.userid
                localStorage.setItem('userInfo', JSON.stringify(data))
                this.userInfo = JSON.parse(localStorage.getItem('userInfo'))
                this.gerRouter();
                // this.getEqbyid()
            })
            return
        } else {
            if (localStorage.getItem('token')) {
                this.userInfo = JSON.parse(localStorage.getItem('userInfo'))
            }
            this.gerRouter();
            // this.getEqbyid()
        }
        this.IDTimer && clearInterval(this.IDTimer)
        this.IDTimer = setInterval(() => {
            // that.getEqbyid()
        }, 120000);

    },
    beforeDestroy() {
        this.IDTimer && clearInterval(this.IDTimer)
    },
    methods: {
        clickmenu(key, keyPath) {
            if (key == 'productTraceability' && key != this.routerNow) {
                this.$router.push({ name: key })
            }
        },
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        },
        gerRouter() {
            var store = this.$store.state
            this.routerIndex = this.$route.query.index ? this.$route.query.index : store.equipmentIndex
            this.routerNow = this.$route.name;
            if (store.equipmentList.length) {
                this.deviceName = store.equipmentList[this.routerIndex - 1].deviceName
            } else {

            }

        },
        loginOut() {
            this.api.loginOut().then((res) => {

                if (res.data.code == 200) {
                    this.$message({
                        message: '退出登录成功',
                        type: "success",
                    });
                    localStorage.removeItem('token')
                    localStorage.removeItem('userInfo')
                    this.$router.push({ name: 'login' })
                } else {
                    this.$message.error("请求出错");
                }
            })
        },
        returnBtn(){
               this.$router.push({ name: 'realTime' })
        },
        toHome() {
            this.$router.push({ name: 'home' })
        },

        toRouter1(item) {
            console.log(item, 11);
            if (item.router) {
                if (item.http) {
                    window.location.href = item.http;
                } else {
                    if (this.routerNow != item.router) {
                        this.$router.push({ name: item.router })
                    }
                }
            } else {
                this.$message('当前页面正在努力开发中');
            }
        },
        getTime() {
            this.time = getnowtime()
            const that = this
            setInterval(() => {
                that.time = getnowtime()
            }, 1000);
        },
    },

}
</script>
<style lang="scss"></style>