邓洁 : 绑定首页实时数据

src/views/tunnel/index.vue

@@ -26,9 +26,9 @@
           :close-on-click-modal="false"
           :close-on-press-escape="false"
       >
-        <fan-info v-if="showFan"/>
-        <transducer-list/>
-        <used-ele/>
+        <fan-info v-if="showFan" :list="socketData.frequencyState"/>
+        <transducer-list :list="socketData.currentVoltage" :feedback="socketData.frequencyFeedback"/>
+        <used-ele :list="socketData.electricityConsumption"/>
       </el-drawer>
       <div v-if="drawerLeft" class="left-arrow" @click="closeLeft"></div>
       <div v-else class="shrink-left" @click="closeLeft"></div>
@@ -43,8 +43,8 @@
           :close-on-click-modal="false"
           :close-on-press-escape="false"
       >
-        <wind-pressure-list v-if="showFan"/>
-        <air-info v-if="showFan"/>
+        <wind-pressure-list v-if="showFan" :list="socketData.windPressure"/>
+        <air-info v-if="showFan" :list="socketData.sensor"/>
         <bad-gas-info v-if="showFan"/>
       </el-drawer>
       <div v-if="drawerRight" class="right-arrow" @click="closeRight"></div>
@@ -74,8 +74,9 @@ import AirInfo from "@/components/content/airInfo/AirInfo.vue";
 import BadGasInfo from "@/components/content/badGasInfo/BadGasInfo.vue";
 import ManageBtn from "@/components/manageBtn/index.vue";
 import {dateFormat} from "@/utils/date.js";
-import {useAuthStore} from '@/store/userstore.js'
 import {onMounted} from "vue";
+import {getToken} from "@/utils/auth";
+import {useAuthStore} from '@/store/userstore.js'
 
 const authStore = useAuthStore()
 const router = useRouter()
@@ -111,9 +112,23 @@ const tunnelList = ref([
     name: '七号隧道'
   },
 ])
-onMounted(()=>{
-  nextTick(()=>{
-    showFan.value=true
+let socket = reactive('')
+const serialNumber = ref('SC00DY00GH00ELBT')
+let token = getToken();
+let send = {
+  type: "ping"
+}
+const socketData = reactive({
+  currentVoltage: [],
+  frequencyState: [],
+  frequencyFeedback: [],
+  electricityConsumption: [],
+  windPressure: [],
+  sensor: [],
+})
+onMounted(() => {
+  nextTick(() => {
+    showFan.value = true
   })
 })
 const manageSelect = () => {
@@ -135,6 +150,62 @@ const previousBtn = () => {
 const nextBtn = () => {
   tunnelBtn.value.next();
 }
+
+const initWebSocket = () => {
+  // let wsUrl = `ws://192.168.31.175:9000/websocket/equipment/${token}/${serialNumber.value}`
+  let wsUrl = `ws://web-tunnel.feashow.com/api/wstunnel/websocket/equipment/${token}/${serialNumber.value}`
+  console.log(wsUrl)
+  socket = new WebSocket(wsUrl)
+  //连接发生错误的回调方法
+  socket.onerror = function () {
+    console.log("ws连接发生错误");
+  };
+  //连接成功建立的回调方法
+  socket.onopen = function () {
+    console.log("ws连接成功");
+  }
+  //接收到消息的回调方法
+  socket.onmessage = function (event) {
+    console.log("服务器返回的信息: ", JSON.parse(event.data));
+    const type = JSON.parse(event.data).type
+    const data = JSON.parse(event.data).data
+    if (type === 'equipment') {
+      data.forEach((item) => {
+        if (item.typeKey === 'currentVoltage') {
+          console.log('电流电压')
+          socketData.currentVoltage = data
+        } else if (item.typeKey === 'frequencyFeedback') {
+          console.log('变频器频率')
+          socketData.frequencyFeedback = data
+        } else if (item.typeKey === 'frequencyState') {
+          console.log('风机状态')
+          socketData.frequencyState = data
+        } else if (item.typeKey === 'electricityConsumption') {
+          console.log('用电量')
+          socketData.electricityConsumption = data
+        } else if (item.typeKey === 'windPressure') {
+          console.log('风压风压')
+          socketData.windPressure = data
+        }else if (item.typeKey === 'sensor') {
+          console.log('传感器==========?')
+          socketData.sensor = data
+        }
+      })
+    }
+  }
+  //连接关闭的回调方法
+  socket.onclose = function () {
+    console.log("ws连接关闭");
+    initWebSocket()
+  }
+  setInterval(() => {
+    socket.send(JSON.stringify(send))
+  }, 30000)
+}
+const closeSocket = () => {
+  socket.close();
+}
+initWebSocket()
 </script>
 
 <style lang="scss" scoped>