login.vue

<template>
  <div class="table-container">
    <div class="table-btn">
      <el-button :loading="isLoading" type="primary" :disabled="isDisable" @click="onCLickTest">开始测试</el-button>
      <el-button type="danger" :disabled="isDisable" @click="onCLickTestOut">终止测试</el-button>
      <!-- <el-button type="danger" @click="onCLickOut">退出</el-button> -->
    </div>
    <div class="table-info">
      <el-table ref="filterTable" class="table" :data="tableData" style="width:50%" border>
        <el-table-column prop="name" label="测试内容"></el-table-column>
        <el-table-column prop="time" label="时间">
        </el-table-column>
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status === 1" type="success" disable-transitions>Success</el-tag>
            <el-tag v-else-if="scope.row.status === 0 || (isChecked && !scope.row.status)" type="danger"
              disable-transitions>Failure</el-tag>
            <el-tag v-else type="info" disable-transitions>未检测</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import { baseUrl } from "../../config/url"
import axios from 'axios';
export default {
  data() {
    return {
      isConnect: false,    //webSocket连接是否成功
      isLoading: false,   //测试中出现加载中的状态
      isDisable: false,   //测试完成后置灰按钮
      isChecked: false,
      startDate: [],
      tableData: [
        // {
        //   date: '2016-05-02',
        //   name: '王小虎',
        //   address: '上海市普陀区金沙江路 1518 弄',
        //   tag: '家'
        // }, {
        //   date: '2016-05-04',
        //   name: '王小虎',
        //   address: '上海市普陀区金沙江路 1517 弄',
        //   tag: '公司'
        // }, {
        //   date: '2016-05-01',
        //   name: '王小虎',
        //   address: '上海市普陀区金沙江路 1519 弄',
        //   tag: '家'
        // }, {
        //   date: '2016-05-03',
        //   name: '王小虎',
        //   address: '上海市普陀区金沙江路 1516 弄',
        //   tag: '公司'
        // }
      ]
    };
  },
  created() {
    // 、info接口
   this.getStartDate();

    // this.tableData = [];
    // this.startDate = [
    //   { name: '网络连接状态', time: '', status: -1 },
    //   { name: 'CAN通讯状态', time: '', status: -1 },
    //   { name: 'RS485通讯状态', time: '', status: -1 },
    //   { name: '蓝牙通讯状态', time: '', status: -1 },
    //   { name: 'USB通讯状态', time: '', status: -1 }
    // ];
    // this.tableData = JSON.parse(JSON.stringify(this.startDate));
  },
  watch: {},
  computed: {

  },
  methods: {
    getStartDate(){
      axios({
      // 请求地址
      url: 'http://172.28.5.26:8010/info',
      // 请求类型
      method: 'get'
    }).then(res => {
      console.log(res);   
      let list = res.data;
      list.forEach(item =>{
        this.startDate.push({
          name:item.desc,
          time:'',
          status:-1
        })
      })
    //   this.startDate = [
    //   { name: '网络连接状态', time: '', status: -1 },
    //   { name: 'CAN通讯状态', time: '', status: -1 },
    //   { name: 'RS485通讯状态', time: '', status: -1 },
    //   { name: '蓝牙通讯状态', time: '', status: -1 },
    //   { name: 'USB通讯状态', time: '', status: -1 }
    // ];
    this.tableData = JSON.parse(JSON.stringify(this.startDate));

    })
    },
    onCLickOut() {
      this.isDisable = false;
      let data = { t: 'end' };
      this.send(JSON.stringify(data));
    },
    onCLickTestOut() {
      this.isDisable = false;
      let data = { t: 'stop' };
      this.send(JSON.stringify(data));
    },
    onCLickTest() {
      this.init();
      this.tableData = JSON.parse(JSON.stringify(this.startDate))
      // this.tableData = [...this.startDate];
      // console.log("dddddddddddddddd");
      this.isLoading = true;
      setTimeout(() => {
        let data = { t: 'start' };
        if (!this.isConnect) return;
        this.send(JSON.stringify(data));
      }, 500);

    },
    init() {
      if (typeof (WebSocket) === "undefined") {
        alert("您的浏览器不支持socket")
      } else {
        // 实例化socket
        console.log('baseUrl', baseUrl);
        this.socket = new WebSocket(baseUrl);
        // 监听socket连接
        this.socket.onopen = this.open
        // 监听socket错误信息
        this.socket.onerror = this.error
        // 监听socket消息
        this.socket.onmessage = this.getMessage;
        this.socket.onclose = this.close;
      }
    },
    open() {
      console.log("socket连接成功");
      this.isConnect = true;
      this.isChecked = false;
    },
    error() {
      console.log("连接错误");
      this.isConnect = false;
      this.init();

    },
    getMessage(msg) {
      console.log(msg.data);
      let data = JSON.parse(msg.data)
      let msgResData = data.data;

      let obj = {
        net: '网络连接状态',
        can: 'CAN通讯状态',
        blue: '蓝牙通讯状态',
        usb: 'USB通讯状态',
        '485': 'RS485通讯状态'
      };
      this.tableData.forEach(element => {
        if (element.name === obj[msgResData.link]) {
          element.status = msgResData.status;
          element.time = this.dateToString();
        }

      });



    },
    send(params) {
      this.socket.send(params);
      console.log("已发送")
    },
    close() {
      console.log("socket已经关闭");
      this.isChecked = true;
      this.isDisable = true;
      this.isLoading = false;
      // let data = { t: 'check' };
      // if (!this.isConnect) return;
      // this.send(JSON.stringify(data))
    },

    dateToString() {
      var date = new Date().toJSON();
      var newDate = new Date(+new Date() + (new Date().getTimezoneOffset() / -60) * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '');
      return newDate;
    }

  },
  destroyed() {
    // 销毁监听
    this.socket.onclose = this.close
  }
}



</script>
<style scoped>
.table-container {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  font-weight: 600;
  color: #2c3e50;
  margin-top: 60px;
  width: 100%;

}


.table-btn {
  padding-bottom: 10px;
}

.table {
  width: 50%;
  margin: 0 auto;
}
</style>