|
|
@@ -0,0 +1,157 @@
|
|
|
+<!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",
|
|
|
+ },
|
|
|
+ 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 + '=';
|
|
|
+ window.axios.get(url).then(res => {
|
|
|
+ let resDate = moment();
|
|
|
+ if (res) {
|
|
|
+ this._pushLogs(requestDate, resDate, null, true);
|
|
|
+ }
|
|
|
+ }).catch(err => {
|
|
|
+ let errData = moment();
|
|
|
+ this._pushLogs(requestDate, errData, err, false);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ _pushLogs(requestDate, date, isErr = null, isRes = null) {
|
|
|
+ let des = '';
|
|
|
+ if (isErr) {
|
|
|
+ des = '请求异常';
|
|
|
+ console.log(isErr);
|
|
|
+ this.logs.push({
|
|
|
+ type: 'isError',
|
|
|
+ reqDate: requestDate.format('YY-MM-DD HH:mm:ss'),
|
|
|
+ requestDate: requestDate,
|
|
|
+ resDate: date.format('YYYY-MM-DD HH:mm:ss'),
|
|
|
+ responseDate: date,
|
|
|
+ des: isErr,
|
|
|
+ status: des
|
|
|
+ })
|
|
|
+ } else if (isRes) {
|
|
|
+ let minute = date.minute() - requestDate.minute();
|
|
|
+ let second = date.seconds() - requestDate.seconds();
|
|
|
+ let des = '';
|
|
|
+ if (minute === 0 && second > 10) des = '超时';
|
|
|
+ else if (minute > 0 && second < 0) des = '超时';
|
|
|
+ this.logs.push({
|
|
|
+ type: 'isOk',
|
|
|
+ reqDate: requestDate.format('YY-MM-DD HH:mm:ss'),
|
|
|
+ requestDate: requestDate,
|
|
|
+ resDate: date.format('YYYY-MM-DD HH:mm:ss'),
|
|
|
+ responseDate: date,
|
|
|
+ des: '请求' + des,
|
|
|
+ status: des,
|
|
|
+ })
|
|
|
+ }
|
|
|
+ this.$forceUpdate();
|
|
|
+ },
|
|
|
+ _getTrClass(log) {
|
|
|
+ if (log.type === 'isError') return 'table-danger';
|
|
|
+ if (log.type === 'isOk') {
|
|
|
+ if (log.value === '超时') return 'table-warning';
|
|
|
+ return 'table-success';
|
|
|
+ }
|
|
|
+ },
|
|
|
+ writeFile() {
|
|
|
+ localStorage.setItem('RequestLogs',this.logs);
|
|
|
+ alert('保存成功！');
|
|
|
+ }
|
|
|
+ },
|
|
|
+ });
|
|
|
+
|
|
|
+</script>
|
|
|
+</body>
|
|
|
+</html>
|
ajun