wszhyWx/src/components/setParams.vue

<template>
    <div class="set-params collapse scroll">
        <div class="set-top">
            <img src="../assets/image/set-icon.png" alt="">设定值参数
        </div>
        <div class="set-tips">
            <div @click="toHome($store.state.equipmentIndex)">
                {{ $store.state.equipmentList[$store.state.equipmentIndex - 1].deviceTypeName }}状态显示</div>
        </div>
        <el-collapse v-model="$store.state.activeNames">
            <template v-for="item, index in routerList">
                <el-collapse-item :name="index + 1" :key="index" v-if="!item.isRouter">
                    <template slot="title" class="collapse-title">
                        {{ item.name }}
                    </template>
                    <!--  -->
                    <ul class="table-ul">
                        <li @click="toRouter(item1)" :class="routerNow == item1.router&&routerIndex==index1+1 ? 'active' : ''" class="table-li" v-for="item1, index1 in item.list" :key="index1">{{
                            item1.name }} <div class="status" :class="item1.status == 0 ? 'outline' : 'online'"
                                v-if="item1.status >= 0">{{ item1.status
                                    == 0
                                    ? '离线' : '在线' }}</div>
                        </li>
                    </ul>
                </el-collapse-item>
                <div @click="toRouter(item)" class="no-list" v-else>{{ item.name }}</div>
            </template>
        </el-collapse>
    </div>
</template>
<script>
export default {
    data() {
        return {
            routerList: [
                { name: '施肥机配方设置', list: [] },
                {
                    name: '灌溉组配置', list: [
                        { name: '1#灌溉组配置', status: -1, router: 'irrigateSet', index: 1 },
                        { name: '2#灌溉组配置', status: -1, router: 'irrigateSet', index: 2 },
                        { name: '3#灌溉组配置', status: -1, router: 'irrigateSet', index: 3 },
                        { name: '4#灌溉组配置', status: -1, router: 'irrigateSet', index: 4 },
                        { name: '5#灌溉组配置', status: -1, router: 'irrigateSet', index: 5 },
                        { name: '6#灌溉组配置', status: -1, router: 'irrigateSet', index: 6 },
                        { name: '7#灌溉组配置', status: -1, router: 'irrigateSet', index: 7 },
                        { name: '8#灌溉组配置', status: -1, router: 'irrigateSet', index: 8 },
                        { name: '9#灌溉组配置', status: -1, router: 'irrigateSet', index: 9 },
                        { name: '10#灌溉组配置', status: -1, router: 'irrigateSet', index: 10 },
                        { name: '11#灌溉组配置', status: -1, router: 'irrigateSet', index: 11 },
                        { name: '12#灌溉组配置', status: -1, router: 'irrigateSet', index: 12 },
                        { name: '13#灌溉组配置', status: -1, router: 'irrigateSet', index: 13 },
                        { name: '14#灌溉组配置', status: -1, router: 'irrigateSet', index: 14 },
                        { name: '15#灌溉组配置', status: -1, router: 'irrigateSet', index: 15 },
                        { name: '16#灌溉组配置', status: -1, router: 'irrigateSet', index: 16 }]
                },
                { name: '厂家内部PID配置', list: [], router: 'PIDSet', isRouter: true, },
                { name: '系统参数配置', list: [], router: 'systemSet', isRouter: true, },
                { name: '传感器通道配置', list: [], router: 'sensorSet', isRouter: true, },
                { name: '数据上传', list: [], router: 'upload', isRouter: true, },],
            routerNow: 'formula',
            routerIndex: 1,

        }
    },
    watch: {
        "$route"(newName, oldName) {
            this.gerRouter();
        },
    },
    mounted() {
        this.gerRouter();
        this.dataInit()
    },
    methods: {
        dataInit() {
            var store = this.$store.state
           store.nameList.forEach((el,index)=>{
                if(index<8){
                    if(store.equipmentName['fertilization'+store.nameList[index]]){
                        // store.equipmentName['fertilization'+store.nameList[index]]
                        this.routerList[0].list.push({
                            name:'配方'+(index+1),
                            status: -1,
                            index:index+1,
                            router: 'formula'
                        })
                    }
                }
           })
           console.log(this.routerList[0],11);
            
        },
        //去首页
        toHome(index) {
            this.$router.push({ path: `/status?eqbyIndex=` + index })
        },
        gerRouter() {
            this.routerNow = this.$route.name;
            this.routerIndex = this.$route.query.id ? this.$route.query.id : 1
        },
        toRouter(item) {
            if (item.router) {
                if (item.http) {
                    window.location.href = item.http;
                } else if (item.router == 'irrigateSet' && this.$route.query.id != item.index) {
                    this.$router.push({ path: `/irrigateSet?id=${item.index}` })
                } else if (item.router == 'formula' && this.$route.query.id != item.index) {
                    this.$router.push({ path: `/formula?id=${item.index}` })
                }  else if (item.router != this.routerNow && !item.http) {

                    this.$router.push({ name: item.router })

                }
            }
        },
    },

}
</script>
<style lang="scss" scoped>
.set-params {
    width: 280px;
    height: 100%;
    background: rgba(0, 92, 178, 0.15);
    border: 2px solid rgba(0, 186, 255, 0.20);

    .set-top {
        font-size: 20px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #FFFFFF;
        width: 100%;
        padding-left: 20px;
        display: flex;
        align-items: center;
        padding-top: 20px;

        img {
            width: 40px;
            height: 40px;
            margin-right: 10px;
        }
    }

    .set-tips {
        width: 100%;
        border-bottom: 1px solid rgba(168, 182, 200, 0.2);
        margin-top: 17px;
        padding-bottom: 17px;
        padding-left: 10px;
        cursor: pointer;

        >div {
            width: 220px;
            height: 40px;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.3);
            display: flex;
            align-items: center;

            padding-left: 10px;
        }
    }
}
</style>