wszhyWx/src/components/setParams.vue

<template>
    <div class="set-params collapse scroll">
        <div class="set-top">
            <img src="../assets/image/set-icon.png" alt="">{{$t('setParams.title')}}
        </div>
        <div class="set-tips">
            <div @click="toHome($store.state.equipmentIndex)">
              {{ $t('setParams.statusDisplay', {deviceName: $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 :class="routerNow == item.router ? 'active' : ''" :name="index + 1" :key="index"
                    v-if="!item.isRouter">
                    <template slot="title" class="collapse-title">
                        <span class="name">{{ item.name }}</span>
                    </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
                                    ? $t('index.offline') : $t('index.online') }}</div>
                        </li>
                    </ul>
                </el-collapse-item>
                <div @click="toRouter(item)" :class="routerNow == item.router ? 'active' : ''" class="no-list" v-else>{{
                    item.name
                }}</div>
            </template>
        </el-collapse>
    </div>
</template>
<script>
export default {
    data() {
        return {
            routerNow: 'formula',
            routerIndex: 1,
            routerList:[],
        }
    },
        
    watch: {
        "$route"(newName, oldName) {
            this.gerRouter();
        }, 
         '$i18n.locale'() {
    this.initRouterList()
  }
    },
    mounted() {
        this.gerRouter();
        this.dataInit()
    },
    created(){
        this.initRouterList()
    },
    methods: {
        initRouterList(){
            this.routerList=[
                { name:  this.$t('setParams.formulaSettings'), list: [], router: 'formula' },
                {
                    name:this.$t('setParams.irrigationGroupConfig'), router: 'irrigateSet', list:  this.$t('setParams.irrigationGroups').map((name, index) => ({
          name,
          status: -1,
          router: 'irrigateSet',
          index: index + 1
           }))
                },
                { name: this.$t('setParams.internalPIDConfig'), list: [], router: 'PIDSet', isRouter: true, },
                { name:this.$t('setParams.systemParamsConfig'), list: [], router: 'systemSet', isRouter: true, },
                { name: this.$t('setParams.sensorChannelConfig'), list: [], router: 'sensorSet', isRouter: true, },
                { name: this.$t('setParams.dataUpload'), list: [], router: 'upload', isRouter: true, },]
            setTimeout(() => {
                  this.getList()
            }, 0);
        },
          //获取设备名称/配方名称
          getByid() {
            var store = this.$store.state
            var data = {
                deviceId: store.equipmentList[store.equipmentIndex - 1].deviceId,
            };
            this.api.getByid(data).then((res) => {
                if (res.data.code == 200) {
                    store.equipmentName = res.data.data
                    this.getList()
                } else {
                    this.$message.error(res.data.msg);
                }
                this.loading = false
            });
        },
        dataInit() {
            var store = this.$store.state
            if(!store.equipmentName){
                this.getByid()
            }else{
                this.getList()
            }
           

        },
        getList(){
            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[index]={
                            name: store.equipmentName['fertilization' + store.nameList[index]],
                            status: -1,
                            index: index + 1,
                            router: 'formula'
                        }
                    }
                }
                if (store.equipmentName['solenoid' + store.nameList[index]]) {
                        // store.equipmentName['fertilization'+store.nameList[index]]
                        this.routerList[1].list[index]={
                            name: store.equipmentName['solenoid' + store.nameList[index]],
                            status: -1,
                            index: index + 1,
                            router: 'irrigateSet'
                        }
                    }
            })
            this.$forceUpdate()
        },
        //去首页
        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: 230px;
    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;
        }
    }



    .el-collapse-item {
        &.active {}
    }

    .no-list {
        color: #A8B6C8;

        &.active {
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.3);
            color: #fff;
        }
    }

    .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: 100%;
            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>