signal_web/src/views/Main.vue

<template>
    <div class="mainContainer">
        <div class="lt" v-show="showLeft">
            <div class="sum-title">
                控制台
            </div>
            <div class="cube">
                <Region :region-list="regionList" @GetInfoClick="ClickGetInfo"></Region>
            </div>
            <div class="cube">
                <Detecter :detecter-list="detectorList"></Detecter>
            </div>
            <div class="cube">
                <Task :task-info="taskInfo" :task-result="taskResult" @GetScanClick="ClickGetScan"></Task>
            </div>
        </div>
        <div :class="[{'md':true},{'bigMd':!showLeft}]">
            <div class="cube">
                <signMap :sign-list="signList"></signMap>
            </div>
            <div class="cube">
                <WifiSign :wifi-rs="WifiRs"></WifiSign>
            </div>
            <div class="cube">
                <Scan :scan-rs="ScanRs"></Scan>
            </div>
        </div>
        <div class="rt">
            <div class="cube">
                <BigRader :total-rs="totalRs"></BigRader>
            </div>
            <transition name="el-zoom-in-center">
                <div class="cube">
                    <HistoryRecord :history-rs="historyRs"></HistoryRecord>
                </div>
            </transition>
            <transition name="el-zoom-in-center">
                <div class="cube">
                    <RunTimeRecord :runtime-rs="runtimeRs"></RunTimeRecord>
                </div>
            </transition>
            <transition name="el-zoom-in-center">
                <div class="cube">
                    <DetctorRecord :detctor-rs="detctorRs"></DetctorRecord>
                </div>
            </transition>
        </div>

        <el-dialog title="扫描结果" :visible.sync="dialogScanVisible" width="30%">
            <el-table :data="scanGridData">
                <el-table-column property="name" label="设备" width="150"></el-table-column>
                <el-table-column property="state" label="结果" width="200"></el-table-column>
            </el-table>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogScanVisible = false" size="small" type="primary">关闭</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import signMap from '@/components/signMap.vue'
    import Region from '@/components/Region.vue'
    import Detecter from '@/components/Detecter.vue'
    import Task from '@/components/Task.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 RunTimeRecord from '@/components/RunTimeRecord.vue'
    import DetctorRecord from '@/components/DetcotrRecord.vue'
    import BigRader from '@/components/BigRader.vue'
    import {
        getLoftInfo,
        RegionList,
        DetectorList,
        Region06G,
        WifiChannel,
        MonitorArea,
        NetDevMonitor,
        WirelessMonitor,
        DevList,
        WirelessStatus,
        ScanStrategyList,
        WirelessStart,
    } from '../api/getApiRes.js'
    import {mapGetters, mapActions, mapState} from "vuex";
    import Global from "../Global"

    let qs = require('qs');
    export default {
        data() {
            return {
                CurrentRegionId: 0,
                WifiRs: {},
                ScanRs: {},
                signList: {},
                totalRs: [],
                equipRs: [],
                dialogScanVisible: false,
                regionList: [],
                scanGridData: [],
                detectorList: [],
                showLeft: true,
                regionId: '',
                historyRs: {
                    Title: '区域无线设备列表',
                    Url: 'signEquip',
                    Rs: [],
                }, runtimeRs: {
                    Title: '实时监控详情',
                    Url: 'record',
                    Rs: [],
                },
                detctorRs: {
                    Title: '探测设备工作监控',
                    Url: 'equip',
                    Rs: [],
                },
                taskInfo: {},
                taskResult: {}
            }
        },
        mounted() {
            this.init();
            this.showLeft = parseInt(this.$store.state.status.count) % 2 == 0
        },
        computed: {
            ...mapGetters({
                'getCount': 'status/getCount'
            })
        },
        watch: {
            '$route': function (val) {
                if (val.path == '/') {
                    this.init()
                }
            },
            '$store.state.status.count': function (val) {
                this.showLeft = parseInt(val) % 2 == 0
            },
        },
        methods: {
            init() {
                this.getDate();
            },
            getDate() {
                let that = this;
                let param = {
                    token: localStorage.token,
                };
                let postdata = qs.stringify(param);
                that.regionList = [];
                RegionList(postdata).then(res => {
                    let json = res;
                    if (json.Code == 0) {
                        that.regionList = json.Rs;
                        // 默认加载第一个区域
                        if (json.Rs) {
                            this.CurrentRegionId = json.Rs[0].Id;
                            this.getDetectorList(json.Rs[0].Id);
                            this.getRegion06G(json.Rs[0].Id);
                            this.getWifiChannel(json.Rs[0].Id);
                            this.getMonitorArea(json.Rs[0].Id);
                            this.getNetDevMonitor(json.Rs[0].Id);
                            this.getWirelessMonitor(json.Rs[0].Id);
                            this.getDevList(json.Rs[0].Id);
                            this.getWirelessStatus(json.Rs[0].Id);
                            this.getScanStrategyList(json.Rs[0].Id);
                        }
                    } else {
                        that.$message.error(json.Memo);
                    }
                })
            },
            getDetectorList(regionId) {
                let that = this;
                let param = {
                    token: localStorage.token,
                    regionId: regionId,
                };
                let postdata = qs.stringify(param);
                that.detectorList = [];
                DetectorList(postdata).then(res => {
                    let json = res;
                    if (json.Code == 0) {
                        that.detectorList = json.Rs
                    } else {
                        that.$message.error(json.Memo);
                    }
                })
            },
            // Wifi柱状图信息传入探测器Id
            getWifiChannel(Id) {
                let that = this;
                let param = {
                    token: localStorage.token,
                    id: Id,
                };
                let postdata = qs.stringify(param);
                WifiChannel(postdata).then(res => {
                    let json = res;
                    if (json.Code == 0) {
                        that.WifiRs = json;
                    } else {
                        that.$message.error(json.Memo + '，错误代码：' + json.Code);
                    }
                })
            },
            ClickGetInfo(Id) {
                this.CurrentRegionId = Id;
                this.getDetectorList(Id);
                this.getRegion06G(Id);
                this.getWifiChannel(Id);
                this.getMonitorArea(Id);
                this.getNetDevMonitor(Id);
                this.getWirelessMonitor(Id);
                this.getDevList(Id);
                this.getWirelessStatus(Id);
                this.getScanStrategyList(Id);
            },
            ClickGetScan(Rs) {
                let that = this;
                Rs.regionId = that.CurrentRegionId;
                let params = Rs;
                WirelessStart(params).then(res => {
                    let json = res;
                    if (json.Code == 0) {
                        that.showScanRresult(json.Rs)
                    } else {
                        that.$message.error(json.Memo);
                    }
                })
            },
            showScanRresult() {
                let that = this;
                let Rs = [
                    {name: "设备1", state: 1},
                    {name: "设备2", state: 2},
                ];
                that.dialogScanVisible = true;
                that.scanGridData = Rs;
            },
            getRegion06G(id) {
                let that = this;
                let param = {
                    token: localStorage.token,
                    id: id,
                    xCount: 200,
                };
                let postdata = qs.stringify(param);
                Region06G(postdata).then(res => {
                    let json = res;
                    if (json.Code == 0) {
                        this.ScanRs = json;
                    } else {
                        this.ScanRs = {};
                        that.$message.error(json.Memo);
                    }
                })
            },
            getMonitorArea(id) {
                let that = this;
                let param = {
                    token: localStorage.token,
                    id: id,
                };
                let postdata = qs.stringify(param);
                MonitorArea(postdata).then(res => {
                    let json = res;
                    if (json.Code == 0) {
                        if(!json.Rs.Data) {
                            return false
                        }else{
                            this.signList = json;
                        }
                    } else {
                        this.signList = {
                            Rs:{
                                Data:[]
                            }
                        };
                        that.$message.error(json.Memo);
                    }
                })
            },
            getNetDevMonitor(id) {
                let that = this;
                let param = {
                    token: localStorage.token,
                    regionId: id,
                };
                let postdata = qs.stringify(param);
                NetDevMonitor(postdata).then(res => {
                    let json = res;
                    if (json.Code == 0) {
                        this.runtimeRs.Rs = json.Rs;
                    } else {
                        this.runtimeRs.Rs = [];
                        that.$message.error(json.Memo);
                    }
                })
            },
            getWirelessMonitor(id) {
                let that = this;
                let param = {
                    token: localStorage.token,
                    regionId: id,
                };
                let postdata = qs.stringify(param);
                WirelessMonitor(postdata).then(res => {
                    let json = res;
                    if (json.Code == 0) {
                        this.detctorRs.Rs = json.Rs;
                    } else {
                        this.detctorRs.Rs = [];
                        that.$message.error(json.Memo);
                    }
                })
            },
            getDevList(id) {
                let that = this;
                let param = {
                    token: localStorage.token,
                    regionId: id,
                    limit: 6,
                };
                let postdata = qs.stringify(param);
                DevList(postdata).then(res => {
                    let json = res;
                    if (json.Code == 0) {
                        this.historyRs.Rs = json.Rs.List;
                        this.totalRs = json.Rs;
                    } else {
                        this.historyRs.Rs = [];
                        this.totalRs = [];
                        that.$message.error(json.Memo);
                    }
                })
            },
            getScanStrategyList(id) {
                let that = this;
                let param = {
                    token: localStorage.token,
                    regionId: id,
                    limit: 6,
                };
                let postdata = qs.stringify(param);
                ScanStrategyList(postdata).then(res => {
                    let json = res;
                    if (json.Code == 0) {
                        json.Rs.push({
                            Id: 0,
                            Name: '自定义扫描'
                        });
                        // todo
                        // this.taskInfo = json.Rs;
                    } else {
                        this.taskInfo = [];
                        that.$message.error(json.Memo);
                    }
                })
            },
            getWirelessStatus(id) {
                let that = this;
                let param = {
                    token: localStorage.token,
                    regionId: id,
                };
                let postdata = qs.stringify(param);
                WirelessStatus(postdata).then(res => {
                    let json = res;
                    if (json.Code == 0) {
                        this.taskResult = json.Rs;
                    } else {
                        this.taskResult = {
                            BeginAt: '',
                            DataSize: '0',
                            Duration: '',
                            IsStop: false,
                        };
                        that.$message.error(json.Memo);
                    }
                })
            }
        },
        components: {
            signMap,
            Region,
            Detecter,
            WifiSign,
            Scan,
            HistoryRecord,
            EquipInfo,
            RunTimeRecord,
            Task,
            BigRader,
            DetctorRecord,
        }
    }
</script>

<style scoped>
    @import "../assets/css/cube.css";
    @import "../assets/css/dialog.css";
    .mainContainer {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
    }

    .mainContainer .lt {
        width: 20%;
        float: left;
        border: 1px solid rgba(0, 147, 253, 0.24);
        overflow: hidden;
        padding-bottom: 10px;
        background: rgba(0, 130, 255, 0.05);
        margin-right: 10px;
    }

    .mainContainer .md {
        width: 52%;
        float: left;
        overflow: hidden;
        padding-bottom: 10px;
        margin-right: 10px;
    }

    .mainContainer .bigMd {
        width: 72.5%;
    }

    .bigMd /deep/ .histogram div {
        width: 100% !important;
    }

    .bigMd /deep/ .histogram canvas {
        width: 100% !important;
    }

    .bigMd /deep/ .ve-line div {
        width: 100% !important;
    }

    .bigMd /deep/ .ve-line canvas {
        width: 100% !important;
    }

    .mainContainer .md .cube {
        border: 1px solid rgba(0, 147, 253, 0.24);
        background: rgba(0, 130, 255, 0.05);
        margin-bottom: 5px;
    }

    .mainContainer .rt {
        width: 26.5%;
        float: right;
    }

    .rt .cube {
        border: 1px solid rgba(0, 147, 253, 0.24);
        background: rgba(0, 130, 255, 0.05);
        margin-bottom: 5px;
    }

    .sum-title {
        width: 150px;
        height: 36px;
        font-size: 16px;
        line-height: 36px;
        color: #6DC1FF;
        margin: 0 auto;
        text-align: center;
        background: url("../assets/img/main/tit.png") top center no-repeat;
        background-size: 100%;
    }

     .el-table {
        background-color: #061B44;
        color: #6DC1FF;
    }
     .el-table th,  .el-table tr {
        background-color: #061B44;
        color: #6DC1FF;
    }
    /deep/ .el-table th,   /deep/ .el-table tr {
        background-color: #061B44;
        color: #6DC1FF;
    }
    /deep/  .el-table td,  /deep/  .el-table th.is-leaf {
        border-bottom: 1px solid #061B44;
    }
    /deep/ .el-table--border::after,  /deep/ .el-table--group::after,  /deep/ .el-table::before {
        background-color: #061B44;
    }
    /deep/ .el-dialog__title {
        color: #6DC1FF;
    }
</style>