signal_web/src/components/Task.vue

<template>
    <div class="Task">
        <div class="other-people">
            <div class="other-people-title">
                <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>
        </div>
        <div class="regionList">
            <el-row>
                <el-col :span="24">
                    <el-col :span="6"><em class="label">扫描策略</em></el-col>
                    <el-col :span="18">
                        <el-select v-model="scan.tactics" placeholder="请选择" @change="getScanStrategyDetail">
                            <el-option
                                    v-for="item in tactics_options"
                                    :key="item.Id"
                                    :label="item.Name"
                                    :value="item.Id">
                            </el-option>
                        </el-select>
                    </el-col>
                </el-col>
                <el-col :span="24">
                    <el-col :span="6"><em class="label">无线协议</em></el-col>
                    <el-col :span="18">
                        <el-select v-model="scan.agreement" multiple placeholder="请选择">
                            <el-option
                                    v-for="item in agreement_options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-col>
                </el-col>
                <el-col :span="24" v-if="scopeState">
                    <el-col :span="6"><em class="label">起始频率</em></el-col>
                    <el-col :span="18">
                        <el-input v-model="scan.begin" type="number" placeholder="单位100K"></el-input>
                    </el-col>
                </el-col>
                <el-col :span="24" v-if="scopeState">
                    <el-col :span="6"><em class="label">截止频率</em></el-col>
                    <el-col :span="18">
                        <el-input v-model="scan.end" placeholder="单位100K"></el-input>
                    </el-col>
                </el-col>
                <el-col :span="24">
                    <el-col :span="6"><em class="label">扫描距离</em></el-col>
                    <el-col :span="18">
                        <el-select v-model="scan.distance" placeholder="请选择">
                            <el-option
                                    v-for="item in distance_options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-col>
                </el-col>
                <el-col :span="24">
                    <el-col :span="12">
                        <em class="label_checked" @click="turnRecord">
                            <img src="../assets/img/main/true.png" height="15" width="15" v-if="recordState"/>
                            <img src="../assets/img/main/false.png" height="15" width="15" v-else/>
                            信号录制
                        </em></el-col>
                    <el-col :span="12">
                        <el-button type="primary" plain size="small" @click="startScan">开始扫描</el-button>
                    </el-col>
                </el-col>
                <ul class="scan_detail">
                    <li>
                        <em>运行状态: </em>
                        <span>{{taskText.IsStop |filterIsStop }}</span>
                    </li>
                    <li>
                        <em>开始时间: </em>
                        <span>{{taskText.BeginAt|filterBeginAt }}</span>
                    </li>
                    <li>
                        <em>持续时间: </em>
                        <span>{{taskText.Duration |filterDuration}}</span>
                    </li>
                    <li>
                        <em>数据大小: </em>
                        <span>{{parseFloat(taskText.DataSize /1024).toFixed(2)}} MB</span>
                    </li>
                </ul>
            </el-row>
        </div>
    </div>
</template>

<script>
    import Global from "../Global"
    import {
        ScanStrategyDetail,
    } from '../api/getApiRes.js'

    let qs = require('qs');
    export default {
        data() {
            return {
                items: [{
                    state: 1
                }],
                scopeState: false,
                isRecording: 1,
                recordState: true,
                scan: {
                    tactics: 0,
                    agreement: [],
                    begin: 0,
                    end: 0,
                    distance: 1,
                    cycle: 0,

                },
                tactics_options: [
                    {
                        Id: 0,
                        Name: '自定义扫描'
                    }
                ],
                taskText: {
                    BeginAt: '',
                    DataSize: '0',
                    Duration: '',
                    IsStop: false,
                },
                agreement_options: WirelessType(),
                distance_options: WirelessRange(),
                value: ''
            }
        },
        props: ['taskInfo', 'taskResult'],
        watch: {
            taskResult: {
                handler(newName, oldName) {
                    this.taskText.BeginAt = newName.BeginAt;
                    this.taskText.DataSize = newName.DataSize;
                    this.taskText.Duration = newName.Duration;
                    this.taskText.IsStop = newName.IsStop;
                },
                deep: true,
                immediate: true
            },
            taskInfo: {
                handler(newName, oldName) {
                    if (!newName.length) return false;
                    this.tactics_options = [
                        {
                            Id: 0,
                            Name: '自定义扫描'
                        }
                    ];
                    for (var i = 0; i < newName.length; i++) {
                        this.tactics_options.push(newName[i]);
                    }
                },
                deep: true,
                immediate: true
            },
            scan: {
                handler(newName, oldName) {
                    if (parseInt(newName.begin) > 6000) {
                        this.$notify.error({
                            title: '错误',
                            message: '起始频率不能大于6000'
                        });
                        return false
                    }
                    if (parseInt(newName.begin) < 0) {
                        this.$notify.error({
                            title: '错误',
                            message: '起始频率不能小于0'
                        });
                        return false
                    }
                    if (parseInt(newName.end) > 6000) {
                        this.$notify.error({
                            title: '错误',
                            message: '截止频率不能大于6000'
                        });
                        return false
                    }
                    if (parseInt(newName.end) < 0) {
                        this.$notify.error({
                            title: '错误',
                            message: '截止频率不能小于0'
                        });
                        return false
                    }
                    if (parseInt(newName.end) < parseInt(newName.begin)) {
                        this.$notify.error({
                            title: '错误',
                            message: '截止频率不能小于起始频率'
                        });
                        return false
                    }

                    // 0-6G现实范围
                    if (newName.agreement.indexOf(13) > -1) {
                        this.scopeState = true
                    } else {
                        this.scopeState = false
                    }

                },
                deep: true,
                immediate: true
            }
        },
        methods: {
            turnRecord(){
                console.log(123);
                this.recordState = !this.recordState
            },
            // 扫描开始
            startScan() {
                let that = this;
                let freq06G = [];
                let signalList = [];
                let token = localStorage.token;
                if (that.scan.begin > 0) {
                    freq06G = [
                        {
                            begin: parseInt(that.scan.begin),
                            end: parseInt(that.scan.end)
                        }
                    ]
                }
                if (that.scan.agreement.length == 0) {
                    that.$message({
                        showClose: true,
                        message: '无线协议不能为空！',
                        type: 'error'
                    });
                    return false
                }
                for (var i = 0; i < that.scan.agreement.length; i++) {
                    signalList[i] = {
                        "range": that.scan.distance,
                        "type": that.scan.agreement[i]
                    }
                }

                let Rs = {
                    freq06G: freq06G,
                    isRecording: this.recordState,
                    signalList: signalList,
                    token: token
                };
                this.$emit('GetScanClick', Rs);//触发事件
            },
            getScanStrategyDetail() {
                let that = this;
                let param = {
                    token: localStorage.token,
                    id: this.scan.tactics
                };
                let postdata = qs.stringify(param);
                ScanStrategyDetail(postdata).then(res => {
                    let json = res;
                    if (json.Code == 0) {
                        // 无线协议
                        that.scan.agreement = [];
                        let row = '';
                        for (var i = 0; i < json.Rs.Value.SignalList.length; i++) {
                            row = json.Rs.Value.SignalList[i];
                            that.scan.agreement.push(row.Type)
                        }

                        // 起始频率 与 截止频率
                        if (json.Rs.Value.Freq06G[0]) {
                            that.scan.begin = json.Rs.Value.Freq06G[0].Begin;
                            that.scan.end = json.Rs.Value.Freq06G[0].End;
                        }

                        // 扫描距离
                        that.scan.distance = json.Rs.Value.SignalList[0].Range;

                        // 是否录制
                        console.log(json.Rs.Value.IsRecording);
                        that.recordState = json.Rs.Value.IsRecording;
                    } else {
                        that.$message.error(json.Memo);
                    }
                })
            }
        },
        filters: {
            filterIsStop: function (value) {
                if (!value) {
                    return "扫描中"
                } else {
                    return "已停止";
                }
            },
            filterBeginAt: function (value) {
                if (!value) {
                    return "未开始"
                } else {
                    return filterTimeToString(value);
                }
            },
            filterDuration: function (value) {
                if (!value) {
                    return "未开始"
                } else {
                    return filterTimeToShortString(value);
                }
            },
        }
    }
</script>

<style scoped>
    .Task {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        margin-top: 20px;
    }

    .regionList {
        width: 100%;
        height: 433px;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        margin-top: 20px;
        color: #6DC1FF;
        overflow-y: scroll;
    }

    .regionList::-webkit-scrollbar { /*滚动条整体样式*/
        width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
        height: 1px;
    }

    .regionList::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
        border-radius: 5px;
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: #6DC1FF;
    }

    .regionList::-webkit-scrollbar-track { /*滚动条里面轨道*/
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        border-radius: 5px;
        background: #6DC1FF;
    }

    .regionList .label {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        line-height: 40px;
        text-align: right;
        color: #fff;
        font-size: 14px;
    }

    .regionList /deep/ .el-input__inner {
        background-color: rgba(0, 130, 255, 0.05);
        border: 1px solid #6DC1FF;
        color: #fff;
    }

    /deep/ .el-col {
        margin-bottom: 6px;

    }

    .label_checked {
        width: 50%;
        float: left;
        margin-left: 45px;
        line-height: 40px;
        color: #fff;
        font-size: 14px;
        cursor: pointer;
    }

    .regionList button {
        float: right;
        margin-right: 25px;
    }

    .label_text {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        line-height: 40px;
        text-align: left;
        text-indent: 10px;
    }

    /deep/ .el-input {
        border-radius: 0;
        width: 180px;
    }

    /deep/ .el-checkbox__input.is-checked + .el-checkbox__label {
        color: #fff;
    }

    /deep/ .el-button {
        background-color: rgba(0, 130, 255, 0.05);
        border: 1px solid #6DC1FF;
        margin-right: 45px !important;
    }

    /deep/ .label_checked {
        margin-left: 35px;
    }

    .scan_detail {
        width: 80%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        font-size: 14px;
    }

    .scan_detail li {
        text-align: left;
        color: #fff;
        margin-bottom: 3px;
    }

    /deep/ .el-tag.el-tag--info {
        float: left;
    }
</style>