signal_web/src/components/Console.vue

<template>
    <div class="console">
        <div class="other-people">
            <div class="image-border image-border1"></div>
            <div class="image-border image-border2"></div>
            <div class="image-border image-border3"></div>
            <div class="image-border image-border4"></div>
            <div class="other-people-title">
                控制台
            </div>
            <div class="lte_panel">
                <i class="el-icon-caret-left" @click="hidePanel" v-if="panelState == 0"></i>
                <i class="el-icon-caret-right" @click="showPanel" v-if="panelState == 1"></i>
            </div>
            <div class="cslist cubeContent">
                <div :class="[{'cstitle':true},{'active':cstitle}]" @click="ClickGetInfo(0,0)">
                    安全监控首页
                </div>
                <div class="loft cspart">
                    <div class="lt_title">
                        楼层
                    </div>
                    <el-row :gutter="21">
                        <el-col :span="8" v-for="(loft,i) in loftList">
                            <div :class="[{'active':loftIndex == i+1 }]" @click="ClickGetInfo(1,i)">
                                <div class="grid-content bg-purple"> {{loft.Name}}</div>
                            </div>
                        </el-col>
                    </el-row>
                </div>
                <div class="manage cspart" v-show="manageList.length != 0">
                    <div class="lt_title">
                        楼层管理区域
                    </div>
                    <el-row :gutter="21">
                        <el-col :span="8" v-for="(manage,j) in manageList">
                            <div :class="[{'active':manageIndex ==j+1 }]" @click="ClickGetInfo(2,j)">
                                <div class="grid-content bg-purple">{{manage.Name}}</div>
                            </div>
                        </el-col>
                    </el-row>
                </div>
                <div class="manage cspart" v-show="RoomList.length != 0">
                    <div class="lt_title">
                        房间管理区域
                    </div>
                    <el-row :gutter="21">
                        <el-col :span="8" v-for="(Room,j) in RoomList">
                            <div :class="[{'active':RoomIndex ==j+1 }]" @click="ClickGetInfo(3,j)">
                                <div class="grid-content bg-purple">{{Room.Name}}</div>
                            </div>
                        </el-col>
                    </el-row>
                </div>
                <div class="equip cspart" v-show="equipList.length != 0">
                    <div class="lt_title">
                        SignalDigger设备
                    </div>
                    <el-row :gutter="21">
                        <el-col :span="8" v-for="(equip,t) in equipList">
                            <div :class="[{'active':equipIndex == t+1 }]" @click="ClickGetInfo(4,t)">
                                <div class="grid-content bg-purple"> {{equip.Name}}</div>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {GetRegionAndDectorSelect} from '../api/getApiRes.js'

    let qs = require('qs');
    export default {
        data() {
            return {
                loftList: [],
                manageList: [],
                RoomList: [],
                equipList: [],
                FullChildlRs: [],
                loftIndex: 0,
                manageIndex: 0,
                RoomIndex: 0,
                equipIndex: 0,
                panelState: 0,
                cstitle: false,
            };
        },
        mounted() {
            this.getLoftList();
        },
        methods: {
            // 获取楼层信息
            ClickGetInfo(level, index) {
                // 切换到选中
                this.loftIndex = 0;
                this.manageIndex = 0;
                this.RoomIndex = 0;
                this.equipIndex = 0;
                this.cstitle = false;
                let thisBtn = {};
                switch (parseInt(level)) {
                    case 0:
                        this.cstitle = true;
                        this.getLoftList();
                        break;
                    case 1:
                        this.loftIndex = index + 1;
                        thisBtn = this.loftList[index];
                        break;
                    case 2:
                        this.manageIndex = index + 1;
                        thisBtn = this.manageList[index];
                        break;
                    case 3:
                        this.RoomIndex = index + 1;
                        thisBtn = this.RoomList[index];
                        break;
                    case 4:
                        this.equipIndex = index + 1;
                        thisBtn = this.equipList[index];
                        break;
                }
                this.$emit('refreshList', level, thisBtn);
                if (thisBtn) {
                    this.showMyChild(level, thisBtn);
                    this.thisShowPart(level, thisBtn);
                }
            },
            // 展示下层节点
            showMyChild(level, thisBtn) {
                let that = this;
                switch (parseInt(level)) {
                    case 1:
                        that.manageList = [];
                        that.RoomIndex = 0;
                        that.equipIndex = 0;
                        that.RoomList = [];
                        that.equipList = [];
                        for (var i = 0; i < that.FullChildlRs.length; i++) {
                            if (that.FullChildlRs[i].Id == thisBtn.Id) {
                                that.manageList = that.FullChildlRs[i].ChildSelect;
                                that.equipList = that.FullChildlRs[i].Detselect;
                            }
                        }
                        break;
                    case 2:
                        that.RoomIndex = 0;
                        that.equipIndex = 0;
                        that.RoomList = [];
                        that.equipList = [];
                        for (var i = 0; i < that.FullChildlRs.length; i++) {
                            for (var t = 0; t < that.FullChildlRs[i].ChildSelect.length; t++) {
                                if (that.FullChildlRs[i].ChildSelect[t].Id == thisBtn.Id) {
                                    that.RoomList = that.FullChildlRs[i].ChildSelect[t].ChildSelect;
                                    that.equipList = that.FullChildlRs[i].ChildSelect[t].Detselect;
                                }
                            }
                        }
                        break;
                    case 3:
                        that.equipList = [];
                        for (var i = 0; i < that.FullChildlRs.length; i++) {
                            for (var t = 0; t < that.FullChildlRs[i].ChildSelect.length; t++) {
                                for (var j = 0; j < that.FullChildlRs[i].ChildSelect[t].ChildSelect.length; j++) {
                                    if (that.FullChildlRs[i].ChildSelect[t].ChildSelect[j].Id == thisBtn.Id) {
                                        that.equipList = that.FullChildlRs[i].ChildSelect[t].ChildSelect[j].Detselect;
                                    }
                                }
                            }
                        }
                        break;
                    case 4:
                        that.RoomIndex = 0;
                        break;
                }
            },
            thisShowPart(level, thisBtn) {

            },
            // 获取楼层信息
            getLoftList() {
                let that = this;
                let param = {
                    'token': localStorage.token,
                };
                let postdata = qs.stringify(param);
                GetRegionAndDectorSelect(postdata).then(res => {
                    let json = res;
                    if (json.Code == 0) {
                        if (!json.Region1Rs) {
                            that.$message.error('区域列表为空，请先添加可用区域');
                            return false
                        }
                        if (!json.DectectorRs) {
                            that.$message.error('设备列表为空，请先添加可用设备');
                            return false
                        }
                        that.loftList = json.Region1Rs;//所有1级
                        that.manageList = json.Region2Rs;//所有2级
                        that.RoomList = json.Region3Rs;//所有3级
                        if (json.DectectorRs) {
                            that.equipList = json.DectectorRs;//所有设备
                        }
                        that.FullChildlRs = json.FullChildlRs;//全部关系
                    } else {
                        if (json.Code == 1010) {
                            that.$message.error(json.Memo + '，错误代码：' + json.Code);
                            that.$router.push({path: '/login', query: {status: 1}});
                        } else {
                            that.$message.error(json.Memo + '，错误代码：' + json.Code);
                        }
                    }
                })
            },
            hidePanel() {
                this.panelState = 1;
                this.$emit('refresWidth', 1);
            },
            showPanel() {
                this.panelState = 0;
                this.$emit('refresWidth', 0);
            },
        }
    }
</script>

<style scoped>
    .console {
        float: left;
        color: #6DC1FF;
    }

    .other-people {
        width: 350px;
        min-height: 939px;
        margin-left: 0;
    }

    .cstitle {
        width: 314px;
        height: 45px;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        background: #0B2851;
        border: 1px solid #005EA2;
        line-height: 45px;
        margin-bottom: 26px;
        cursor: pointer;
    }

    .cspart {
        width: 314px;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        margin-bottom: 22px;
    }

    .lt_title {
        text-align: left;
        font-size: 14px;
        margin-bottom: 16px;
    }

    .cspart .bg-purple {
        height: 30px;
        background: rgba(27, 86, 200, 0.14);
        border: 1px solid #005EA2;
        line-height: 30px;
        margin-bottom: 9px;
        cursor: pointer;
        font-size: 12px;
    }

    .cspart .bg-purple:hover {
        background: #0162AA;
        border-color: #6DC1FF;
        color: #6DC1FF
    }

    .active {
        background: #0162AA;
        border-color: #6DC1FF;
        color: #6DC1FF
    }

    .bg-purple {
        overflow: hidden;
    }

    .lte_panel {
        position: relative;
        left: -15px;
        width: 10%;
        float: left;
        display: none;
    }

    /*响应式调整*/
    @media only screen and (max-width: 1600px) {
        .lte_panel {
            display: block;
        }
    }

</style>