signal_web/src/views/WifiSign.vue

<template>
    <div class="content">
        <div class="tabs">
            <ul>
                <li v-for="(tab,i) in tabs" @click="goTab(tab.url)" :class="{'active':tabIndex == i}">
                    {{tab.name}}
                </li>
            </ul>
        </div>
        <div class="panel">
            <div class="panel-body">
                <div class=" panel_control">
                    <el-row :gutter="20">
                        <el-col :span="4">
                            <em>探测器:</em>
                            <el-select v-model="panel.detidstr">
                                <el-option
                                        v-for="item in panel.detOptions"
                                        :key="item.Id"
                                        :label="item.Name"
                                        :value="item.Id">
                                </el-option>
                            </el-select>
                        </el-col>
                        <el-col :span="4">
                            <em>信号类型:</em>
                            <el-select v-model="panel.detectedType">
                                <el-option
                                        v-for="item in panel.detectedoptions"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </el-col>
                        <el-col :span="4">
                            <em>被检Mac:</em>
                            <el-input v-model="panel.detectedmac" placeholder="请输入被检测设备Mac"></el-input>
                        </el-col>
                        <el-col :span="6">
                            <em>检测时间:</em>
                            <el-date-picker
                                    v-model="panel.time1"
                                    type="daterange"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期">
                            </el-date-picker>
                        </el-col>
                        <el-col :span="4">
                            <el-button size="small" type="primary" @click="query">查询</el-button>
                        </el-col>
                    </el-row>
                </div>
            </div>
        </div>
        <el-table
                :data="tableData"
                is-horizontal-resize
                :default-sort="{prop: 'date', order: 'descending'}"
                v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.8)"
                class=""
                stripe
        >
            <el-table-column
                    type="index"
                    label="序号"
                    width="60"
                    sortable
            >
            </el-table-column>
            <!--<el-table-column-->
            <!--prop="DetectorId"-->
            <!--label="探测设备ID"-->
            <!--width="120"-->
            <!--&gt;-->
            <!--</el-table-column>-->
            <el-table-column
                    prop="Macstr"
                    label="Mac地址"
                    width="160"
            >
            </el-table-column>
            <el-table-column
                    prop="ProduceCom"
                    label="品牌"
            >
            </el-table-column>
            <el-table-column
                    prop="Path"
                    label="位置"
                    width="260"
            >
                <template slot-scope="scope">
                    <el-tooltip class="item" effect="dark" :content="scope.row.Path" placement="top-start">
                            <span>
                                    {{ scope.row.Path.length > 20 ?  scope.row.Path.substr(0,20)+'...' : scope.row.Path }}
                            </span>
                    </el-tooltip>
                </template>
            </el-table-column>
            <el-table-column
                    prop="SignalIntensity"
                    label="信号强度"
                    :formatter="filterSignal"
                    sortable
                    width="120"
            >
            </el-table-column>
            <el-table-column
                    prop="BeginTime"
                    label="运行时间"
            >
                <template slot-scope="scope">
                    {{scope.row.BeginTime|filterFmtDate}} --- {{scope.row.EndTime|filterFmtDate}}
                </template>
            </el-table-column>
            <el-table-column
                    prop="DeviceType"
                    label="信号类型"
                    width="120"
                    sortable
                    :formatter="filterDeviceType"
            >
            </el-table-column>
            <el-table-column
                    prop="DangerLevel"
                    label="危险等级"
                    width="120"
                    sortable
            >
                <template slot-scope="scope">
                    <span  v-if="scope.row.DangerLevel == -1">正常</span>
                    <span v-if="scope.row.DangerLevel == 1">可信设备</span>
                    <span v-if="scope.row.DangerLevel == 2">已处理</span>
                    <span class="yellow" v-if="scope.row.DangerLevel == 3">危险</span>
                    <span class="yellow" v-if="scope.row.DangerLevel == 4">危险</span>
                </template>
            </el-table-column>
            <el-table-column
                    prop="Id"
                    label="操作"
                    width="120"
            >
                <template slot-scope="scope">
                    <el-button size="small" type="primary" @click="addWhite(scope.row)" v-if="scope.row.DangerLevel != 1">
                        加入可信设备
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <br>
        <el-pagination
                background
                :total="pageination.total"
                :page-size="pageination.pageItem"
                @current-change="pageChange"
        ></el-pagination>
    </div>

</template>

<script>
    import Global from '../Global.js'
    import {
        LogWifiDetectedQueryByDetector,
        GetRegionAndDectorSelect,
        WhiteListAdd
    } from '../api/getApiRes.js'

    let qs = require('qs');
    export default {
        data() {
            return {
                tabIndex: 1,
                tabs: [
                    {name: '手机信号记录', url: 'phoneSign'},
                    {name: 'WiFi信号记录', url: 'wifiSign'},
                    {name: '可信设备', url: 'white'},
                ],
                // panel 配置项目
                panel: {
                    usercode: '',
                    username: '',
                    compname: '',
                    keyword: '',
                    USERCODE: '',
                    detectedType: 99,
                    detectedoptions: [
                        {value: 99, label: '全部'},
                        {value: 1, label: '无线摄像头'},
                        {value: 2, label: '无线热点'},
                        {value: 0, label: '其他无线设备'},
                    ],
                    detectedmac: '',
                    taskstatus: 99,
                    options: [
                        {value: 99, label: '全部'},
                        {value: 1, label: '进行中'},
                        {value: 2, label: '已完成'},
                    ],
                    detOptions: [],
                    detidstr: 0,
                    time1: globalBt3(1),
                },
                pageination: {
                    pageItem: 10,
                    pageoptions: pageOptions(),
                    total: 300,
                    pageIndex: 1,
                },
                draw: 1,
                start: 0,
                recordsTotal: 0,
                tableData: [],
                allTableData: [],
                limit: '10',
                multipleSort: false,
                loading: true,
                fileList: [],
                multipleSelection: [],
                detectedmac: '',
            }
        },
        mounted() {
            this.getTableQuery();
        },
        methods: {
            getDetOption() {
                let that = this;
                let param = {
                    'token': localStorage.token,
                };
                let postdata = qs.stringify(param);
                GetRegionAndDectorSelect(postdata).then(res => {
                    let json = res;
                    if (json.Code == 0) {
                        if (!json.DectectorRs) {
                            that.$message.error('设备列表为空，请先添加有效探测设备');
                            return false
                        }
                        this.panel.detOptions = json.DectectorRs;//所有设备
                        this.panel.detOptions.unshift({Id: 0, Name: '全部'});
                        if (this.$route.query.detectorid) {
                            this.panel.detidstr = parseInt(this.$route.query.detectorid)
                        } else {
                            this.panel.detidstr = 0;
                        }
                    } else {
                        that.$message.error(json.Memo + '，错误代码：' + json.Code);
                    }
                })
            },
            // 跳转tab页面
            goTab(url) {
                this.$router.push({path: url});
            },
            // 查询按钮
            query() {
                this.getTableQuery();
                this.$message.success('查询完毕');
            },
            // 页面数据查询
            getTableQuery() {
                // 获取探测器列表
                this.getDetOption();
                let that = this;
                that.loading = true;
                if (this.$route.query.detectorid) {
                    this.panel.detidstr = parseInt(this.$route.query.detectorid)
                } else {
                    this.panel.detidstr = 0;
                }
                let param = {
                    token: localStorage.token,
                    detectorId: that.panel.detidstr,//探测器id列表
                    detectedmac: that.panel.detectedmac,//被检测设备Mac
                    detectedtype: that.panel.detectedType,//被检测设备类型
                    bt: globaltime2String(that.panel.time1[0]) + ' 00:00:01',//开始时间
                    et: globaltime2String(that.panel.time1[1]) + ' 23:59:59',//结束时间
                    start: 1,//
                    tableMax: 5000,//
                };
                let postdata = qs.stringify(param);
                LogWifiDetectedQueryByDetector(postdata).then(res => {
                    let json = res;
                    if (json.Code == 0) {
                        that.loading = false;
                        if (json.Rs) {
                            that.allTableData = json.Rs;
                            that.recordsTotal = json.Rs.length;
                        } else {
                            that.allTableData = [];
                            that.recordsTotal = 0;
                        }

                        // 设置分页数据
                        that.setPaginations();
                    } else {
                        that.$message.error(json.Memo + '，错误代码：' + json.Code);
                    }
                })
            },
            // 设置分页数据
            setPaginations() {
                // 分页属性
                let that = this;
                that.pageination.total = that.recordsTotal;
                // 默认分页
                that.tableData = that.allTableData.filter((item, index) => {
                    return index < that.pageination.pageItem;
                });
            },
            // 每页显示数量
            handleSizeChange() {
                let that = this;
                that.tableData = that.allTableData.filter((item, index) => {
                    return index < that.pageination.pageItem;
                });
                that.draw = that.pageination.pageItem;
                that.getTableQuery();
            },
            // 翻页
            pageChange(pageIndex) {
                let that = this;
                // 获取当前页
                let index = that.pageination.pageItem * (pageIndex - 1);
                // 数据总数
                let nums = that.pageination.pageItem * pageIndex;
                // 容器
                let tables = [];
                for (var i = index; i < nums; i++) {
                    if (that.allTableData[i]) {
                        tables.push(that.allTableData[i])
                    }
                    this.tableData = tables;
                }
                that.start = index * that.draw;
                // that.getTableQuery();
            },
            // 自动排序
            sortChange(params) {
                console.log(params)
            },
            // 过滤金额
            filterMoney(value, row, column) {
                return parseFloat(column).toFixed(2);
            },
            filterSignal(val, row, column) {
                //127信号是无效强度状态
                return column = column == 127 ? '- -' : column;
            },
            filterDeviceType(val, row, column) {
                switch (parseInt(column)) {
                    case 0:
                        return '其他无线设备';
                        break;
                    case 1:
                        return '无线摄像头';
                        break;
                    case 2:
                        return '无线热点';
                        break;

                }
            },
            // 加入可信设备
            addWhite(row) {
                let that = this;
                this.$prompt('请输入备注', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputPlaceholder: '备注内容',
                    inputPattern: /[\u4e00-\u9fa5_a-zA-Z0-9_]{0,10}/,
                    inputErrorMessage: '备注长度最多10个字'
                }).then(({value}) => {
                    let param = {
                        token: localStorage.token,
                        mac: row.Macstr,
                        regionId: row.RegionId,
                        dangerLevelUserOwn: 2,//危险类型 1：已处理 2：可信设备
                        deviceType: row.DeviceType,
                        name: row.ProduceCom,
                        memo: value,
                    };
                    let postdata = qs.stringify(param);
                    WhiteListAdd(postdata).then(res => {
                        let json = res;
                        if (json.Code == 0) {
                            this.getTableQuery();
                            that.$message({
                                showClose: true,
                                type: 'success',
                                message: '当前设备已加入可信设备中'
                            });
                        } else {
                            that.$message.error(json.Memo + '，错误代码：' + json.Code);
                        }
                    });
                    return false
                }).catch((e) => {
                    console.log(e);
                    that.$message({
                        type: 'info',
                        message: '取消加入可信设备'
                    });
                });
            }
        },
        watch: {
            // call again the method if the route changes
            '$route': function () {
                this.getDetOption();
                this.getTableQuery();
            }
        },
        filters: {
            // 过滤时间
            filterFmtDate(column) {
                return nonTfmtDate(column, 16);
            },
        }
    }
</script>

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

    .tabs ul {
        width: 492px;
        overflow: hidden;
        display: block;
        margin: 5px auto;
        list-style: none;
        padding-left: 0;
    }

    .content {
        width: 98%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        padding-left: 20px;
    }

</style>