signal_web/src/views/Main.vue

<template>
    <div class="mainContainer">
        <div class="mlt">
            <Console @refreshList="changPanel"></Console>
        </div>
        <div class="mcenter">
            <div class="cube">
                <div class="total">
                    <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="totalContianer" v-if="TotalPanel || LoftPanel">
                            <div class="tlt">
                                <h5>正在监测</h5>
                                <BigRader :total-rs="totalRs"></BigRader>
                            </div>
                            <div class="trt">
                                <h5>实时监测记录</h5>
                                <Watching :total-rs="totalRs"></Watching>
                            </div>
                        </div>
                        <!--</div>-->
                        <!--</div>-->
                        <!--<div class="manageContainer" v-if="managePanel">-->
                        <!--<div class="tlt">-->
                        <!--<h5></h5>-->
                        <!--<SmallRader  :strs="totalRs"></SmallRader>-->
                        <!--</div>-->
                        <!--<div class="trt">-->
                        <!--<Loft></Loft>-->
                        <!--</div>-->
                        <!--</div>-->
                        <!--<div class="RoomContainer" v-if="RoomPanel">-->
                        <!--<div class="tlt">-->
                        <!--<h5></h5>-->
                        <!--<SmallRader  :strs="totalRs"></SmallRader>-->
                        <!--</div>-->
                        <!--<div class="trt">-->
                        <!--<Room></Room>-->
                        <!--</div>-->
                        <!--</div>-->
                        <!--<div class="DetctorContianer" v-if="DetctorPanel">-->
                        <!--<div class="tlt">-->
                        <!--<h5>正在监测</h5>-->
                        <!--<BigRader :total-rs="totalRs"></BigRader>-->
                        <!--</div>-->
                        <!--<div class="trt">-->
                        <!--<h5>实时监测记录</h5>-->
                        <!--<Watching :total-rs="totalRs"></Watching>-->
                        <!--</div>-->
                        <!--</div>-->
                    </div>
                </div>
            </div>
            <div class="cube">
                <WifiSign></WifiSign>
            </div>
            <Scan></Scan>
        </div>
        <div class="mrt">
            <div class="cube" v-if="pageLevel == 0||pageLevel == 4">
                <HistoryRecord></HistoryRecord>
            </div>
            <div class="cube" v-if="pageLevel == 1||pageLevel == 2||pageLevel == 3">
                <runTimeRecord></runTimeRecord>
            </div>
            <div v-if="pageLevel != 4">
                <EquipInfo></EquipInfo>
            </div>
            <!--单个设备情况-->
            <div v-if="pageLevel == 4">
                <SingleEquipInfo></SingleEquipInfo>
            </div>
        </div>
    </div>
</template>

<script>
    import Console from '@/components/Console.vue'
    import WifiSign from '@/components/WifiSign.vue'
    import Scan from '@/components/Scan.vue'
    import HistoryRecord from '@/components/HistoryRecord.vue'
    import EquipInfo from '@/components/EquipInfo.vue'
    import SingleEquipInfo from '@/components/SingleEquipInfo.vue'
    import runTimeRecord from '@/components/runTimeRecord.vue'
    import BigRader from '@/components/BigRader.vue'
    import SmallRader from '@/components/SmallRader.vue'
    import Watching from '@/components/Watching.vue'
    import Loft from '@/components/Loft.vue'
    import Room from '@/components/Room.vue'
    import {RegionDetInfolist} from '../api/getApiRes.js'
    let qs = require('qs');
    export default {
        data() {
            return {
                loadingState: false,
                pageLevel: 0,//操作层级 默认0查 全部 层级
                regionId: 0,//默认查全部
                TotalPanel: true,//总控
                LoftPanel: false,//楼层
                managePanel: false,//区域
                RoomPanel: false,//房间
                DetctorPanel: false,//设备
                totalRs: [],
                // pageLevel: 1,//当前为楼层
                // pageLevel: 2,//当前为楼层区域
                // pageLevel: 3,//当前为房间
                // pageLevel: 4,//当前为单个设备
            }
        },
        mounted() {
            let that = this;
            that.loadingState = false;
            // 获取数据
            that.getDate();
            // 定时查询
            that.timer = setInterval(() => {
                that.getDate();
            }, 2800);
        },
        destroyed() {
            //页面销毁时清除定时器
            clearInterval(this.timer);
            //页面销毁时清除添加条数动画的定时器
            clearInterval(this.wordDisplay);
        },
        methods: {
            changPanel(level, btn) {
                 let that = this;
                this.regionId = btn.Id ? btn.Id : 0;
                if (btn == 0) {
                    // 首页单独处理
                    this.pageLevel = 0
                } else {
                    this.pageLevel = parseInt(level);
                }
                that.getDate();
            },
            // 根据层级和地区ID调用不同的Ajax接口
            getDate() {
                let that = this;
                if(that.pageLevel != 4){
                    // 非设备层级
                    let param = {
                        token: localStorage.token,
                        regionId: this.regionId
                    };
                    let postdata = qs.stringify(param);
                    that.getRegionDetInfolist(postdata);
                }else{
                    // 单个设备层级
                    // todo
                }
            },
            getRegionDetInfolist(postdata) {
                let that = this;
                RegionDetInfolist(postdata).then(res => {
                    let json = res;
                    if (json.Code == 0) {
                        that.totalRs = json;
                    } else {
                        that.$message.error(json.Memo);
                    }
                })
            },
            wordDisplay(word) {
                let index = 0;
                let that = this;
                setTimeout(function () {
                    that.list.unshift(word[index]);
                    index = index + 1;
                }, 300);
            }
        },
        components: {
            Console,
            WifiSign,
            Scan,
            HistoryRecord,
            EquipInfo,
            runTimeRecord,
            SingleEquipInfo,
            BigRader,
            Watching,
            SmallRader,
            Loft,
            Room
        }
    }
</script>

<style scoped>
    @import "../assets/css/cube.css";

    ul, li {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    em, s, i {
        font-style: normal;
    }

    .mainContainer {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
    }

    .mlt {
        width: 365px;
        float: left;
        overflow: hidden;
        margin-right: 10px;
    }

    .mcenter {
        width: 976px;
        /*height: 906px;*/
        float: left;
        overflow: hidden;
    }

    .mrt {
        width: 452px;
        float: right;
        overflow: hidden;
        margin-right: 0;
    }

    .cube {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        margin-bottom: 5px;
    }

    /*total */
    .other-people {
        width: 963px;
        height: 481px;
        margin-left: 0;
        overflow: hidden;
        background: #000F2A;
    }

    ul, li {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .totalContianer {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        margin-top: 55px;
    }

    .totalContianer .tlt {
        width: 48%;
        float: left;
        padding-left: 10px;
    }

    .totalContianer .trt {
        width: 48%;
        float: right;
        padding-right: 20px;
        overflow: hidden;
    }

    .totalContianer h5 {
        width: 126px;
        height: 26px;
        line-height: 26px;
        text-align: center;
        color: #6DC1FF;
        font-size: 14px;
        margin: 0;
        margin-left: 33%;
        margin-bottom: 19px;
        background: url("../assets/img/main/title.png") top center no-repeat;
        background-size: 100% 100%;
    }

    .total .image-border2 {
        right: 0;
    }

    .total .image-border4 {
        right: 0;
    }

    .loftContainer .tlt {
        width: 48%;
        float: left;
        padding-left: 10px;
    }

    .loftContainer .trt {
        width: 48%;
        float: right;
        padding-right: 20px;
        overflow: hidden;
    }


    .loftContainer {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        margin-top: 55px;
    }


    .RoomContainer .tlt {
        float: left;
        padding-left: 10px;
        margin-top: 60px;
    }

    .RoomContainer .trt {
        float: right;
        padding-right: 20px;
        overflow: hidden;
        margin-top: 30px;
    }

    .DetctorContianer {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        margin-top: 55px;
    }

    .DetctorContianer .tlt {
        width: 48%;
        float: left;
        padding-left: 10px;
    }

    .DetctorContianer .trt {
        width: 48%;
        float: right;
        padding-right: 20px;
        overflow: hidden;
    }

    .DetctorContianer h5 {
        width: 126px;
        height: 26px;
        line-height: 26px;
        text-align: center;
        color: #6DC1FF;
        font-size: 14px;
        margin: 0;
        margin-left: 33%;
        margin-bottom: 19px;
        background: url("../assets/img/main/title.png") top center no-repeat;
        background-size: 100% 100%;
    }

    .manageContainer .tlt {
        float: left;
        padding-left: 10px;
        margin-top: 60px;
    }

    .manageContainer .trt {
        float: right;
        padding-right: 20px;
        overflow: hidden;
        margin-top: 30px;
    }

    .loftContainer h5 {
        width: 126px;
        height: 26px;
        line-height: 26px;
        text-align: center;
        color: #6DC1FF;
        font-size: 14px;
        margin: 0;
        margin-left: 33%;
        margin-bottom: 19px;
        background: url("../assets/img/main/title.png") top center no-repeat;
        background-size: 100% 100%;
    }
</style>