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="pageLevel == 0 || pageLevel == 1 || pageLevel == 4">
                            <div class="tlt">
                                <h5>正在监测</h5>
                                <BigRader :total-rs="totalRs"></BigRader>
                            </div>
                            <div class="trt">
                                <h5>实时监测记录</h5>
                                <Watching :total-rs="totalRs"></Watching>
                            </div>
                        </div>
                        <!--楼层-->
                        <div class="manageContainer" v-if="pageLevel==2">
                            <div class="tlt">
                                <h5></h5>
                                <SmallRader :total-rs="totalRs"></SmallRader>
                            </div>
                            <div class="trt">
                                <Loft></Loft>
                            </div>
                        </div>
                        <div class="RoomContainer" v-if="pageLevel == 3">
                            <div class="tlt">
                                <h5></h5>
                                <SmallRader :total-rs="totalRs"></SmallRader>
                            </div>
                            <div class="trt">
                                <Room></Room>
                            </div>
                        </div>
                        <!--<div class="DetctorContianer" v-if="pageLevel == 4">-->
                        <!--<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 :wifi-rs="WifiRs"></WifiSign>
            </div>
            <Scan :scan-rs="ScanRs"></Scan>
        </div>
        <div class="mrt">
            <div class="cube" v-if="pageLevel == 0||pageLevel == 1||pageLevel == 4">
                <HistoryRecord :history-rs="historyRs"></HistoryRecord>
            </div>
            <div class="cube" v-if="pageLevel == 2||pageLevel == 3">
                <runTimeRecord :total-rs="totalRs"></runTimeRecord>
            </div>
            <div v-if="pageLevel != 4">
                <EquipInfo :equip-rs="equipRs"></EquipInfo>
            </div>
            <!--单个设备情况-->
            <div v-if="pageLevel == 4">
                <SingleEquipInfo :total-rs="totalRs"></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,
        SingleDetInfolist,
        DetectorWifixyInfolist,
        RegionWifixyInfolist,
        Detector06GInfolist,
        LogWifiDetectedQueryByDetector,
        GetStaticinfo
    } from '../api/getApiRes.js'

    let qs = require('qs');
    export default {
        data() {
            return {
                loadingState: false,
                pageLevel: 0,//操作层级 默认0查 全部 层级
                regionId: 0,//默认查全部
                detectorId: 0,//无默认设备
                TotalPanel: true,//总控
                LoftPanel: false,//楼层
                managePanel: false,//区域
                RoomPanel: false,//房间
                DetctorPanel: false,//设备
                totalRs: [],
                WifiRs: [],
                ScanRs: [],
                historyRs: [],
                equipRs: [],
                // pageLevel: 1,//当前为楼层
                // pageLevel: 2,//当前为楼层区域
                // pageLevel: 3,//当前为房间
                // pageLevel: 4,//当前为单个设备
            }
        },
        mounted() {
            let that = this;
            that.loadingState = false;
            // 获取数据
            that.getDate();
            // 定时查询
            that.timer = setInterval(() => {
                that.getDate();
            }, 1115000);

            // let param = {
            //     token: localStorage.token,
            //     detectorId: 1,
            //     regionId: this.regionId
            // };
            // let postdata = qs.stringify(param);
            // that.getDetector06GInfolist(postdata);
        },
        destroyed() {
            //页面销毁时清除定时器
            clearInterval(this.timer);
            //页面销毁时清除添加条数动画的定时器
            clearInterval(this.wordDisplay);
        },
        methods: {
            changPanel(level, btn) {
                let that = this;
                this.regionId = btn.Id ? btn.Id : 0;
                this.detectorId = 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,
                        detectorId: 0,
                        regionId: this.regionId,
                        detidstr:0,
                        bt: globaltime2String(globalBt2()[0]) + ' 00:00:01',//开始时间
                        et: globaltime2String(globalBt2()[1]) + ' 23:59:59',//结束时间
                        start: 1,//
                        tableMax: 30,//
                    };
                    let postdata = qs.stringify(param);
                    // wifi柱状图信息传入区域Id
                    that.getRegionWifixyInfolist(postdata);
                    // 区域检测实时记录
                    that.getRegionDetInfolist(postdata);
                    // 历史检测记录
                    that.getLogWifiDetectedQueryByDetector(postdata);
                    // 0-6G
                    that.getDetector06GInfolist(postdata);
                    that.getGetStaticinfo(postdata);

                } else {
                    // 单个设备层级
                    // todo
                    let param = {
                        token: localStorage.token,
                        detectorId: this.detectorId,
                        bt: globaltime2String(globalBt2()[0]) + ' 00:00:01',//开始时间
                        et: globaltime2String(globalBt2()[1]) + ' 23:59:59',//结束时间
                        start: 1,//
                        tableMax: 10,//
                    };
                    let postdata = qs.stringify(param);
                    // Wifi柱状图信息传入探测器Id
                    that.getDetectorWifixyInfolist(postdata);
                    // 单个设备检测实时记录
                    that.getSingleDetInfolist(postdata);
                    that.getDetector06GInfolist(postdata);
                    // 历史检测记录
                    that.getLogWifiDetectedQueryByDetector(postdata);
                }
            },
            getDetector06GInfolist(postdata) {
                let that = this;
                Detector06GInfolist(postdata).then(res => {
                    let json = res;
                    if (json.Code == 0) {
                        that.ScanRs = json;
                    } else {
                        that.$message.error(json.Memo);
                    }
                })
            },
            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);
                    }
                })
            },
            getGetStaticinfo(postdata) {
                let that = this;
                GetStaticinfo(postdata).then(res => {
                    let json = res;
                    if (json.Code == 0) {
                        that.equipRs = json;
                    } else {
                        that.$message.error(json.Memo);
                    }
                })
            },
            getSingleDetInfolist(postdata) {
                let that = this;
                SingleDetInfolist(postdata).then(res => {
                    let json = res;
                    if (json.Code == 0) {
                        that.totalRs = json;
                    } else {
                        that.$message.error(json.Memo);
                    }
                })
            },
            getLogWifiDetectedQueryByDetector(postdata) {
                let that = this;
                LogWifiDetectedQueryByDetector(postdata).then(res => {
                    let json = res;
                    if (json.Code == 0) {
                        that.historyRs = 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);
            },

            // Wifi柱状图信息传入探测器Id
            getDetectorWifixyInfolist(postdata) {
                let that = this;
                DetectorWifixyInfolist(postdata).then(res => {
                    let json = res;
                    if (json.Code == 0) {
                        that.WifiRs = json;
                    } else {
                        that.$message.error(json.Memo);
                    }
                })
            },
            // Wifi柱状图信息传入区域Id
            getRegionWifixyInfolist(postdata) {
                let that = this;
                RegionWifixyInfolist(postdata).then(res => {
                    let json = res;
                    if (json.Code == 0) {
                        that.WifiRs = json;
                    } else {
                        that.$message.error(json.Memo);
                    }
                })
            }
        },
        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;
        margin-left: 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: 15px;
    }

    /*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>