<script>  import SockJS from 'sockjs-client';  import Stomp from 'stompjs';  import qs from "qs"  export default {    name: "pdf",    data() {      return {        newsData: [],        tagGuid_mx: "",        tagGuid_4AA_Ia: "",        tagGuid_4AA_P: "",        tagGuid_4AA_Q: "", 49         tagGuid_1AA_6_Ib: "",        tagGuid_1AA_6_Ic: "",        tagGuid_pdfwd: "",        tagGuid_pdfsd: "",        stompClient: '',        timer: '',        visibilityHeZha: "hidden",        visibilityFenZha: "hidden",        hezhaData:[]      }    },    methods: {      initWebSocket() {        this.connection();        let that = this;        // 斷開重連機制,嘗試發送消息,捕獲異常發生時重連        this.timer = setInterval(() => {          try {            that.stompClient.send("test");          } catch(err) {            console.log("斷線了: " + err);            that.connection();          }        }, 5000);      },      connection() {        // 建立連接對象        let socket = new SockJS('http://XXX.XX.XX.XXX:8081/energy-system-websocket');        // 獲取STOMP子協議的客戶端對象        this.stompClient = Stomp.over(socket);        // 定義客戶端的認證信息,按需求配置        let headers = {          access_token: "92c31bd5-ae43-4f25-9aad-c4eb1a92d61d"          //          Authorization: ''        }        // 向服務器發起websocket連接        this.stompClient.connect(headers, () => {          this.stompClient.subscribe('/user/topic/data', (msg) => { // 訂閱服務端提供的某個topic              console.log('廣播成功')              //            console.log(msg); // msg.body存放的是服務端發送給我們的信息              console.log(msg.body);              this.newsData = JSON.parse(msg.body);            }, headers),            this.stompClient.subscribe('/user/topic/alarm', (msg) => { // 訂閱服務端提供的某個topic              console.log('廣播告警成功')              //console.log(msg); // msg.body存放的是服務端發送給我們的信息              console.log(msg.body);              this.newsData = JSON.parse(msg.body);            }, headers);          this.stompClient.subscribe('/user/topic/cmd_ack', (msg) => { // 訂閱服務端提供的某個topic            console.log('下控指令應答成功')            //console.log(msg); // msg.body存放的是服務端發送給我們的信息            console.log(msg.body);            this.newsData = JSON.parse(msg.body);          }, headers);          this.stompClient.subscribe('/user/topic/response', (msg) => { //指令的應答（僅表示服務端接收成功或者失敗）            console.log('SEND指令的應答成功')            //console.log(msg); // msg.body存放的是服務端發送給我們的信息            console.log(msg.body);            this.newsData = JSON.parse(msg.body);            this.newsData = this.newsData.data;            console.log(this.newsData);            for(var i = 0; i < this.newsData.length; i++) {　              //母線uab              if(this.newsData[i].tagGuid == "a3a95bf3-fef8-454e-9175-19a466e40c3d") {　　　　　　                this.tagGuid_mx = this.newsData[i].value != '' ? this.newsData[i].value.toFixed(2) : ""              }              //電容柜4AA_Ia              if(this.newsData[i].tagGuid == "4cf6e256-6c3a-4853-a087-dfd263916dab") {　　　　　　                this.tagGuid_4AA_Ia = this.newsData[i].value　              }              //電容柜4AA_P              if(this.newsData[i].tagGuid == "52e8265a-0a20-4e3b-a670-14a8df373bf7") {　　　　　　                this.tagGuid_4AA_P = this.newsData[i].value　              }              //電容柜4AA_Q              if(this.newsData[i].tagGuid == "ef369a17-0bbd-4295-8ac7-816c23fcb065") {　　　　　　                this.tagGuid_4AA_Q = this.newsData[i].value != '' ? this.newsData[i].value.toFixed(2) : 0　              }276               //配電房溫度              if(this.newsData[i].tagGuid == "ead49446-07f9-43b7-a4ce-cd974d53728e") {　　　　　　                this.tagGuid_pdfwd = this.newsData[i].value　              }              //配電房濕度              if(this.newsData[i].tagGuid == "baaf1733-124e-46fd-9d58-c069b747317a") {　　　　　　                this.tagGuid_pdfsd = this.newsData[i].value　              }            }          }, headers);          this.stompClient.send("/app/monitor/subTagGuid", // # 訂閱需要監控的測點ID            headers,            JSON.stringify({              "stationCode": "00013",              "tagGuids": [                "a3a95bf3-fef8-454e-9175-19a466e40c3d", //                "4cf6e256-6c3a-4853-a087-dfd263916dab", //                "52e8265a-0a20-4e3b-a670-14a8df373bf7", //                "ef369a17-0bbd-4295-8ac7-816c23fcb065", //334                 "baaf1733-124e-46fd-9d58-c069b747317a"              ]            })          ) //用戶加入接口        }, (err) => {          // 連接發生錯誤時的處理函數          console.log('失敗')          console.log(err);        });      }, //連接 后臺      disconnect() {        if(this.stompClient) {          this.stompClient.disconnect();        }      }, // 斷開連接      changeColor(evt) {        this.rect.setAttributeNS(null, "fill", "blue")      },      shl3aa4() {        this.visibilityHeZha = this.visibilityHeZha == "visibility" ? "hidden" : "visibility";        this.visibilityFenZha = this.visibilityFenZha == "visibility" ? "hidden" : "visibility";      },      shl3aa42() {        setTimeout(() => {          this.visibilityHeZha = "hidden";          this.visibilityFenZha = "hidden";        }, 1200)      },      hezha() {        //3#樓3AA-4_合閘        this.$axios.post("/energy-system/auth/monitor/ykcmd", {            checkUser: "admin",            checkPass: "123456",            stationCode:"00013",            tagGuid: "89d1d312-17be-4d20-8471-baa08ba734e0",            value: 1          })          .then(res => {            this.hezhaData=JSON.parse(res.config.data)            if(this.hezhaData.tagGuid=="89d1d312-17be-4d20-8471-baa08ba734e0" && this.hezhaData.value==1){              alert("合閘成功！");            }else{              alert("合閘失敗！請聯系管理員");            }379           })          .catch(error => {            console.log(error)          })      },      fenzha() {        alert("分閘"); //3#樓3AA-4_分閘      }    },    mounted() {      this.initWebSocket();    },    beforeDestroy: function() { // 頁面離開時斷開連接,清除定時器      this.disconnect();      clearInterval(this.timer);    },    created() {    }  }</script>

Axios.defaults.baseURL = 'http://XXX.XXX.XX.XXX:9001';Axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

// 添加請求攔截器Axios.interceptors.request.use(function(config) {  config.headers.access_token = "add7c097-f12b-40fe-8e48-6fe1f2120fa5";  //  config.headers.Authorization = localStorage.token; //將token設置成請求頭  console.log("請求============" + config);  // 在發送請求之前做些什么  return config;}, function(error) {  // 對請求錯誤做些什么  return Promise.reject(error);});

function getSocket(url, params, callback) {  let socket;  if (typeof (WebSocket) === 'undefined') {    console.log('您的瀏覽器不支持WebSocket');  } else {    console.log('您的瀏覽器支持WebSocket');    // 初始化 WebSocket 對象，指定要連接的服務器地址與端口建立連接    socket = new WebSocket(url);    // 打開事件    socket.onopen = function() {      console.log('Socket 已打開');      socket.send(params);    };    // 獲得消息事件    socket.onmessage = function(msg) {      // 發現消息進入, 開始處理前端觸發邏輯      callback(msg, socket);    };    // 關閉事件    socket.onclose = function() {      console.log('Socket 已關閉');    };    // 發生了錯誤事件    socket.onerror = function() {      console.log('Socket 發生了錯誤,請刷新頁面');      // 此時可以嘗試刷新頁面    };  }}export {  getSocket};

<script>import {getSocket} from '@/utils/socket.js';export default {  data() {    return {      wsData: {}, // 保存 websocket 數據對象      form: { // 表單        name: '',        age: ''      }    }  },  beforeDestroy() {    this.wsData.close(); // 關閉 websocket  },  created() {    this.getSocketData();  },  methods: {    // 獲取數據    getSocketData() {      let params = this.form;      getSocket(        `ws://path`,        JSON.stringify(params),        (data, ws) => {          console.log(data, ws);          // 保存數據對象, 以便發送消息          this.wsData = ws;        }      );    },    // 發送數據    sendSocketData() {      let params = this.form;      params.name = 'xx';      params.age= '18';      this.wsData.send(JSON.stringify(params));    }  }}</script>