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"></Region>
            </div>
            <div class="cube">
                <Detecter :region-list="regionList"></Detecter>
            </div>
            <div class="cube">
                <Task></Task>
            </div>
        </div>
        <div class="md">

            <div class="cube">
                <signMap></signMap>
            </div>
            <br>
            <div class="cube">
                <WifiSign :wifi-rs="WifiRs"></WifiSign>
            </div>
            <br>
            <Scan :scan-rs="ScanRs"></Scan>
        </div>
        <div class="rt">
            <div class="cube">
                <BigRader :total-rs="totalRs"></BigRader>
            </div>
            <br>
            <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">
                    <HistoryRecord :history-rs="historyRs"></HistoryRecord>
                </div>
            </transition>
        </div>
    </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 BigRader from '@/components/BigRader.vue'
    import {
        getLoftInfo,
        RegionDetInfolist,
    } from '../api/getApiRes.js'
    import { mapGetters, mapActions, mapState } from "vuex";
    import Global from "../Global"

    let qs = require('qs');
    export default {
        data() {
            return {
                WifiRs: [],
                ScanRs: [],
                historyRs: [],
                totalRs: [],
                equipRs: [],
                regionList: [],
                showLeft: true
            }
        },
        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 = [];
                getLoftInfo(postdata).then(res => {
                    let json = res;
                    if (json.Code == 0) {
                        console.log(json);
                        that.regionList = json.Rs
                    } else {
                        that.$message.error(json.Memo);
                    }
                })
            },
            // 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);
                    }
                })
            },
            ClickGetInfo(index) {

            }
        },
        components: {
            signMap,
            Region,
            Detecter,
            WifiSign,
            Scan,
            HistoryRecord,
            EquipInfo,
            runTimeRecord,
            Task,
            BigRader,
        }
    }
</script>

<style scoped>
    @import "../assets/css/cube.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: 20px;
    }

    .mainContainer .md {
        width: 50%;
        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: 20px;
    }

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

    .rt .cube {
        float: right;
    }

    .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%;
    }

</style>