<template>
    <div class="wifiSign">
        <div class="">
            <div class="sum-title">
                0-6G扫描
            </div>
            <div class="line">
                <ve-line :data="chartData" width="100%" height="230px" :loading="loading" :legend-visible="false"
                         :extend="chartExtend"></ve-line>
                <div class="null_state" v-if="chartData.rows == ''">
                    暂无
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {Scan} from '../api/getApiRes.js'

    let qs = require('qs');
    export default {
        data() {
            return {
                days: 13,
                loading: true,
                chartData: {
                    columns: ['X', 'Y'],
                    rows: []
                },
                chartExtend: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            {
                                offset: 0,
                                color: 'rgba(0,255,212,0.15)', // 0% 处的颜色
                            },
                            {
                                offset: 1,
                                color: 'rgba(0,255,212,1)' // 100% 处的颜色
                            },
                        ],
                        globalCoord: false // 缺省为 false
                    },
                    series: {
                        barMaxWidth: 10,
                        // 区域填充样式
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: 'rgba(0,255,212,0.15)', // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgba(0,255,212,0.15)' // 100% 处的颜色
                                    },
                                ],
                                global: false // 缺省为 false
                            }
                        },
                    },
                    axisLine: {
                        color: "#4ad2ff",
                    },
                    yAxis: {
                        // name : '单位: dB',
                        splitLine: {
                            lineStyle: {
                                // 使用深浅的间隔色
                                color: ['#08255B']
                            }
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#4ad2ff',
                                width: 1,//这里是为了突出显示加上的
                            }
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        splitLine: {
                            lineStyle: {
                                // 使用深浅的间隔色
                                color: ['#4ad2ff']
                            }
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#4ad2ff',
                                width: 1,//这里是为了突出显示加上的
                            }
                        }
                    }
                }
            }
        },
        props: ['ScanRs'],
        watch: {
            ScanRs: function (val) {
                let that = this;
                if (val.Rs[0].X == null) {
                    that.chartData.rows = [];
                } else {
                    val.Rs.forEach(function (item) {
                        item.X = parseFloat(item.X / 1000 / 1000 / 1000).toFixed(2).toString() + "G"
                    });
                    that.chartData.rows =  val.Rs;
                }
            },
        },
    }
</script>

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

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

    .line {
        position: relative;
        top: -40px;
    }

    .null_state {
        width: 60px;
        height: 60px;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        background: url("../assets/img/main/null_state.png") top center no-repeat;
        background-size: 100%;
        color: #fff;
        font-size: 16px;
        text-align: center;
        line-height: 70px;
        margin-top: 60px;
    }
</style>
