tunnel-cloud-web/src/views/tunnel/index.vue

<template>
  <div>
    <div class="box-top">
      <manage-btn v-model="selectIndex" @select="manageSelect"/>
      <div class="tunnel-title"></div>
      <manage-length class="tunnel-length"></manage-length>
      <div class="top-right">
        <div class="current-site">
          当前站点：<span>{{ currentSite }}</span>
          <div class="toggle"></div>
        </div>
        <div class="current-user">
          上午好：<span>{{ currentUser }}</span>
          <span>今天是：{{ currentDate }}</span>
          <div class="logout" @click="handleLogout"></div>
        </div>
      </div>
    </div>
    <tunnel-scene id="tunnel-box"/>
    <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 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>
    </div>
    <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 v-if="showFan" :list="socketData.windPressure" :winData="largeScreenData"/>
        <air-info v-if="showFan" :list="socketData.sensor" :airData="largeScreenData"/>
        <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>
    </div>
    <div class="switch-btn">
      <div class="arrow" @click="previousBtn"></div>
      <el-carousel height="150px" type="card" ref="tunnelBtn" :autoplay="false">
        <div class="btn">
          <el-carousel-item v-for="(item, index) in tunnelList" :key="item.value">
            {{ item.name }}
          </el-carousel-item>
        </div>
      </el-carousel>
      <div class="arrow right" @click="nextBtn"></div>
    </div>


  </div>
</template>

<script setup>
import TunnelScene from "@/components/content/tunnelScene/TunnelScene.vue";
import FanInfo from "@/components/content/fanInfo/FanInfo.vue";
import TransducerList from "@/components/content/transducerList/TransducerList.vue";
import UsedEle from "@/components/content/usedEle/UsedEle.vue";
import WindPressureList from "@/components/content/windPressure/WindPressureList.vue";
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'
import {getLargeScreen} from "@/api/largeScreen";

const authStore = useAuthStore()
const router = useRouter()
const selectIndex = ref(1)
const showFan = ref(false)
const drawerLeft = ref(true)
const drawerRight = ref(true)
const currentSite = ref('松江站')
const currentUser = ref('admin')
const currentDate = ref(dateFormat())
const tunnelBtn = ref()
const tunnelList = ref([
  {
    value: 0,
    name: '一号隧道'
  }, {
    value: 1,
    name: '二号隧道'
  }, {
    value: 2,
    name: '三号隧道'
  }, {
    value: 3,
    name: '四号隧道'
  }, {
    value: 4,
    name: '五号隧道'
  }, {
    value: 5,
    name: '六号隧道'
  }
])
let socket = reactive('')
const serialNumber = ref('SC00DY00GH00ELBT')
let token = getToken();
let send = {
  type: "ping"
}
const largeScreenData = ref(null)
const socketData = reactive({
  currentVoltage: [],
  frequencyState: [],
  frequencyFeedback: [],
  electricityConsumption: [],
  windPressure: [],
  sensor: [],
})

onMounted(() => {
  nextTick(() => {
    showFan.value = true
  })
  getScreenInfo()
})

const getScreenInfo = async () => {
  await getLargeScreen(1).then(res => {
    if (res?.code === 1000) {
      largeScreenData.value = res.data
    }
  })
}
const manageSelect = (index) => {
  console.log('首页点击-', index)
  if (index === 0) {
    console.log('站点管理=====-----')
    router.push('/site')
  }
};
const closeLeft = () => {
  drawerLeft.value = !drawerLeft.value
}
const closeRight = () => {
  drawerRight.value = !drawerRight.value
}
const handleLogout = () => {
  authStore.userLogout()
  router.push('/login')
}
const previousBtn = () => {
  tunnelBtn.value.prev()
}
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></style>