解决冲突

src/views/tunnel/index.vue

@@ -20,9 +20,9 @@
     <div class="left">
       <el-drawer v-model="drawerLeft" direction="ltr" modal-class="modal-box" :modal="false" :show-close="false"
         :close-on-click-modal="false" :close-on-press-escape="false">
-        <fan-info />
-        <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>
@@ -30,9 +30,9 @@
     <div class="right">
       <el-drawer v-model="drawerRight" direction="rtl" modal-class="modal-box" :modal="false" :show-close="false"
         :close-on-click-modal="false" :close-on-press-escape="false">
-        <wind-pressure-list />
-        <air-info />
-        <bad-gas-info />
+        <wind-pressure-list v-if="showFan" :list="socketData.windPressure" />
+        <air-info v-if="showFan" :list="socketData.sensor" />
+        <bad-gas-info v-if="showFan" :list="socketData.sensor" />
       </el-drawer>
       <div v-if="drawerRight" class="right-arrow" @click="closeRight"></div>
       <div v-else class="shrink-right" @click="closeRight"></div>
@@ -63,8 +63,9 @@ import WindPressureList from "@/components/content/windPressure/WindPressureList
 import AirInfo from "@/components/content/airInfo/AirInfo.vue";
 import BadGasInfo from "@/components/content/badGasInfo/BadGasInfo.vue";
 import ManageBtn from "@/components/manageBtn/index.vue";
-import ManageLength from "@/components/manageLength/index.vue";
 import { dateFormat } from "@/utils/date.js";
+import { onMounted } from "vue";
+import { getToken } from "@/utils/auth";
 import { useAuthStore } from '@/store/userstore.js'
 
 const authStore = useAuthStore()
@@ -100,7 +101,32 @@ const tunnelList = ref([
     name: '七号隧道'
   },
 ])
-const manageSelect = () => {
+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 = (index) => {
+  console.log('首页点击-', index)
+  if (index === 0) {
+    console.log('站点管理=====-----')
+    router.push('/site')
+  }
+
   // getInfo();
 };
 const closeLeft = () => {
@@ -118,9 +144,63 @@ const previousBtn = () => {
 }
 const nextBtn = () => {
   tunnelBtn.value.next();
-  // tunnelList.value.push(tunnelList.value.shift())
-  // console.log('tunnelList.value', tunnelList.value)
 }
+
+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></style>