signal_web/src/views/Main.vue

<template>
    <div class="mainContainer">
        <div :class="[{'mlt':consoleWidth == 0},{'mltShort':consoleWidth == 1}]">
            <Console @refreshList="changPanel" @refresWidth="changWidth"></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>
                        <!--全局 和 楼栋-->
                        <transition name="el-zoom-in-center">
                            <div class="totalContianer" v-if="pageLevel == 0 || pageLevel == 1 || pageLevel == 4">
                                <div class="tlt">
                                    <h5>正在监测</h5>
                                    <BigRader :total-rs="totalRs" :page-level="pageLevel"></BigRader>
                                </div>
                                <div class="trt">
                                    <h5>实时监测记录</h5>
                                    <Watching :total-rs="totalRs" :page-level="pageLevel"></Watching>
                                </div>
                            </div>
                        </transition>
                        <!--楼层-->
                        <transition name="el-zoom-in-center">
                            <div class="manageContainer" v-if="pageLevel==2">
                                <div class="tlt">
                                    <h5></h5>
                                    <SmallRader :total-rs="totalRs"></SmallRader>
                                </div>
                                <div class="trt">
                                    <Loft :loft-points="loftPoints" :loft-map="loftMap" :loft-title="loftTitle"></Loft>
                                </div>
                            </div>
                        </transition>
                        <transition name="el-zoom-in-center">
                            <div class="RoomContainer" v-if="pageLevel == 3">
                                <div class="tlt">
                                    <h5></h5>
                                    <SmallRader :total-rs="totalRs"></SmallRader>
                                </div>
                                <div class="trt">
                                    <Room :loft-points="loftPoints" :loft-map="loftMap" :loft-title="loftTitle"></Room>
                                </div>
                            </div>
                        </transition>
                    </div>
                </div>
            </div>
            <div class="cube">
                <WifiSign :wifi-rs="WifiRs"></WifiSign>
            </div>
            <Scan :scan-rs="ScanRs"></Scan>
        </div>
        <div class="mrt">
            <transition name="el-zoom-in-center">
                <div class="cube" v-if="pageLevel == 0||pageLevel == 1||pageLevel == 4">
                    <HistoryRecord :history-rs="historyRs"></HistoryRecord>
                </div>
            </transition>
            <transition name="el-zoom-in-center">
                <div class="cube" v-if="pageLevel == 2||pageLevel == 3">
                    <runTimeRecord :total-rs="totalRs" :page-level="pageLevel"></runTimeRecord>
                </div>
            </transition>
            <transition name="el-zoom-in-center">
                <div v-if="pageLevel != 4">
                    <EquipInfo :equip-rs="equipRs"></EquipInfo>
                </div>
            </transition>
            <!--单个设备情况-->
            <transition name="el-zoom-in-center">
                <div v-if="pageLevel == 4">
                    <SingleEquipInfo :total-rs="totalRs"></SingleEquipInfo>
                </div>
            </transition>
        </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,
        LogFullDetectedQueryByDetector,
        RegionPictureGetByRegionId,
        GetRegiononeinfo,
        GetRegionplaneinfo,
        RegionDetDetaillist,
        SingleDetDetaillist,
        Region06GInfolist,
    } 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: [],
                loftPoints: [],
                loftMap: '',
                loftTitle: '',
                consoleWidth: 0,
                BoolSafe: 0,
                autoTime: 3000,//定时刷新的时间间隔
            }
        },
        mounted() {
            let that = this;
            that.loadingState = false;

            localStorage.Start = 0;
            // 获取数据
            that.getDate();
            // 定时查询
            that.timer = window.setInterval(() => {
                that.getDate();
            }, that.autoTime);
        },
        destroyed() {
            //页面销毁时清除定时器
            window.clearInterval(this.timer);
        },
        methods: {
            // 改编宽度
            changWidth(state) {
                console.log(state);
                this.consoleWidth = state;
            },
            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,
                        comid: 1,
                        regionId: this.regionId,
                        regionID: this.regionId,
                        regionid: this.regionId,
                        supregionid: 0,
                        detidstr: 0,
                        bt: globaltime2String(globalBt3(2)[0]) + ' 00:00:01',//开始时间
                        et: globaltime2String(globalBt3(2)[1]) + ' 23:59:59',//结束时间
                        start: 1,//
                        tableMax: 10,//
                        Start: localStorage.Start
                    };
                    let postdata = qs.stringify(param);

                    // wifi柱状图信息传入区域Id
                    that.getRegionWifixyInfolist(postdata);
                    // 区域检测实时记录
                    that.getRegionDetInfolist(postdata);
                    // 历史检测记录
                    // that.getLogWifiDetectedQueryByDetector(postdata);
                    that.getRegionDetDetaillist(postdata);
                    // 0-6G
                    that.getRegion06GInfolist(postdata);
                    that.getGetStaticinfo(postdata);

                    // 楼层和房间层级有平面图的
                    if (that.pageLevel == 2 || that.pageLevel == 3) {
                        that.seeLoftMapAndPoints(postdata)
                    }
                } else {
                    // 单个设备层级
                    // todo
                    let param = {
                        token: localStorage.token,
                        detectorId: this.detectorId,
                        bt: globaltime2String(globalBt3(2)[0]) + ' 00:00:01',//开始时间
                        et: globaltime2String(globalBt3(2)[1]) + ' 23:59:59',//结束时间
                        start: 1,//
                        tableMax: 10,//
                        Start: localStorage.Start
                    };
                    let postdata = qs.stringify(param);

                    // Wifi柱状图信息传入探测器Id
                    that.getDetectorWifixyInfolist(postdata);
                    // 单个设备检测实时记录
                    that.getSingleDetInfolist(postdata);
                    that.getDetector06GInfolist(postdata);
                    // 历史检测记录
                    // that.getLogWifiDetectedQueryByDetector(postdata);
                    that.getSingleDetDetaillist(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 + '，错误代码：' + json.Code);
                    }
                })
            },
            getRegion06GInfolist(postdata) {
                let that = this;
                Region06GInfolist(postdata).then(res => {
                    let json = res;
                    if (json.Code == 0) {
                        that.ScanRs = json;
                    } else {
                        that.$message.error(json.Memo + '，错误代码：' + json.Code);
                    }
                })
            },
            // 区域检测实时记录
            getRegionDetDetaillist(postdata) {
                let that = this;
                RegionDetDetaillist(postdata).then(res => {
                    let json = res;
                    if (json.Code == 0) {
                        that.historyRs = json;
                        // localStorage.Start = json.LastId;
                    } else {
                        that.$message.error(json.Memo + '，错误代码：' + json.Code);
                    }
                })
            },
            // 单个设备检测实时记录
            getSingleDetDetaillist(postdata) {
                let that = this;
                SingleDetDetaillist(postdata).then(res => {
                    let json = res;
                    if (json.Code == 0) {
                        that.historyRs = json;
                        // localStorage.Start = json.LastId;
                    } else {
                        that.$message.error(json.Memo + '，错误代码：' + json.Code);
                    }
                })
            },
            getRegionDetInfolist(postdata) {
                let that = this;
                RegionDetInfolist(postdata).then(res => {
                    let json = res;
                    if (json.Code == 0) {
                        that.totalRs = json;
                        localStorage.Start = json.LastId;
                    } else {
                        that.$message.error(json.Memo + '，错误代码：' + json.Code);
                    }
                })
            },
            getGetStaticinfo(postdata) {
                let that = this;
                GetStaticinfo(postdata).then(res => {
                    let json = res;
                    if (json.Code == 0) {
                        that.equipRs = json;
                    } else {
                        if (json.Code == 1010) {
                            localStorage.usercode = '';
                            localStorage.token = '';
                            that.$router.push({path: '/login', query: {status: 1}});
                            return false
                        }
                        that.$message.error(json.Memo + '，错误代码：' + json.Code);
                    }
                })
            },
            getSingleDetInfolist(postdata) {
                let that = this;
                SingleDetInfolist(postdata).then(res => {
                    let json = res;
                    if (json.Code == 0) {
                        that.totalRs = json;
                        localStorage.Start = json.LastId;
                    } else {
                        that.$message.error(json.Memo + '，错误代码：' + json.Code);
                    }
                })
            },
            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 + '，错误代码：' + json.Code);
                    }
                })
            },
            getLogFullDetectedQueryByDetector(postdata) {
                let that = this;
                LogFullDetectedQueryByDetector(postdata).then(res => {
                    let json = res;
                    if (json.Code == 0) {
                        that.historyRs = json;
                    } else {
                        that.$message.error(json.Memo + '，错误代码：' + json.Code);
                    }
                })
            },

            // 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 + '，错误代码：' + json.Code);
                    }
                })
            },
            // 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 + '，错误代码：' + json.Code);
                    }
                })
            },
            // 读取地图和点
            seeLoftMapAndPoints(postdata) {
                let that = this;
                // 平面图
                RegionPictureGetByRegionId(postdata).then(res => {
                    let json = res;
                    if (json.Code == 0) {
                        that.loftMap = json.EncodeString;
                    } else {
                        that.$message.error(json.Memo + '，错误代码：' + json.Code);
                    }
                });
                // 点
                GetRegionplaneinfo(postdata).then(res => {
                    let json = res;
                    if (json.Code == 0) {
                        that.loftTitle = json.Rs.Region.Name;
                        that.loftPoints = json.Rs.DetAndFindRs;
                    } else {
                        that.$message.error(json.Memo + '，错误代码：' + json.Code);
                    }
                });

            }
        },
        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;
        margin-top: 20px;
    }

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

    .mltShort {
        width: 20px;
        float: left;
        overflow: hidden;
    }

    .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 {
        width: 242px;
        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>