zhouzhendong
/
baoshi-was


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160
							<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>table</title>
    <style type="text/css">
        #test th {
            position: sticky;
            position: -webkit-sticky;
            top: 0;
            z-index: 999;
            background-color: white;
        }
    </style>
    <link href="{{ mix('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
    <div class="container-fluid">
        <div class="">
            <div class="form-group">
                <label for="key">参数</label>
                <input type="text" class="form-control" v-model="params.key" id="key">
            </div>
            <div class="form-group">
                <button class="btn btn-primary" @click="toggleHttpRequest(isStart)">@{{ isStart ? '关闭':'启动' }}</button>
            </div>
            <div class="form-group">
                <button class="btn btn-primary" @click="writeFile()">保存</button>
            </div>
        </div>
        <div class="row">
            <table class="table table">
                <thead>
                <tr>
                    <th>序号</th>
                    <th>请求时间</th>
                    <th>状态</th>
                    <th>响应时间</th>
                    <th>备注</th>
                </tr>
                </thead>
                <tbody>
                <template v-for="(log,i) in logs">
                    <tr :class="_getTrClass(log)">
                        <td>@{{ i+1 }}</td>
                        <td>@{{ log.reqDate }}</td>
                        <td>@{{ log.status }}</td>
                        <td>@{{ log.resDate }}</td>
                        <td>@{{ logs.des }}</td>
                    </tr>
                </template>
                </tbody>
            </table>
        </div>
    </div>

</div>
<script type="text/javascript" src="{{mix("js/app.js")}}"></script>
<script type="text/javascript">
    let vue = new Vue({
        el: '#app',
        data: {
            logs: [],
            url: '{{url('api/thirdPart/hengli/weight/new')}}',
            params: {
                key: "hengli001,'210414000153',0_52,2021\/04\/01_10:29:17,12,11,23",
            },
            count:0,
            interval: null,
            isStart: false,
        },
        created() {

        },
        methods: {
            toggleHttpRequest(isStart) {
                if (isStart) {
                    this._entHttpRequest();
                    this.isStart = false;
                } else {
                    this._startHttpRequest();
                    this.isStart = true;
                }
            },
            _startHttpRequest() {
                let _this = this;
                this.interval = setInterval(function () {
                    _this.sendRequest();
                }, 1000);
            },
            _entHttpRequest() {
                if (this.interval) {
                    clearInterval(this.interval);
                }
            },
            sendRequest() {
                let requestDate = moment();
                let url = this.url + '?' + this.params.key + '=';
                let index= JSON.parse(JSON.stringify(this.count));
                this.count++;
                this._pushLogs(requestDate,null,null,null,index);
                window.axios.get(url).then(res => {
                    if (res.data) {
                        console.log(res.data.data);
                        this._pushLogs(requestDate, moment(), null, true,index);
                    }
                }).catch(err => {
                    this._pushLogs(requestDate, moment(), err, false,index);
                });
            },
            _pushLogs(requestDate, date = null, isErr = null, isRes = null,index = null) {
                let type = '';
                let des = '';
                let status = '';
                if(isErr){
                    type='isError';
                    des = isErr;
                }else if(date!=null ) {
                    type='isOk';
                    let minute = date.minute() - requestDate.minute();
                    let second = date.seconds() - requestDate.seconds();
                    if ((minute === 0 && second > 10) || (minute > 0 && second > -50)){
                        des = '超时';
                        status = '超时';
                    }else{
                        des = '正常';
                        status = '正常';
                    }
                }
                let log = {
                    type: type,
                    reqDate: requestDate.format('YY-MM-DD HH:mm:ss'),
                    requestDate: requestDate,
                    resDate: date ?  date.format('YYYY-MM-DD HH:mm:ss') :'',
                    responseDate: date,
                    des: des,
                    status: des
                }
                this.$set(this.logs,index,log);
                this.$forceUpdate();
            },
            _getTrClass(log) {
                if (log.type === 'isError') return 'table-danger';
                if (log.type === 'isOk') {
                    if (log.status === '超时') return 'table-warning';
                    else if(log.status === '正常') return 'table-success';
                }
                return 'table-primary';
            },
            writeFile() {
                localStorage.setItem('RequestLogs',this.logs);
                alert('保存成功！');
            }
        },
    });

</script>
</body>
</html>