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

<template>
  <div id="main">
    <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.leftData"
          :fan-data="largeScreenData"
        />
        <transducer-list
          :list="socketData.leftData"
          :transducer-data="largeScreenData"
        />
        <used-ele :list="socketData.leftData" :ele-data="largeScreenData" />
      </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"
          :win-data="largeScreenData"
        />
        <air-info
          v-if="showFan"
          :list="socketData.sensor"
          :air-data="largeScreenData"
        />
        <bad-gas-info
          v-if="showFan"
          :list="socketData.sensor"
          :bad-gas-data="largeScreenData"
        />
      </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 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";
import {ElMessageBox} from "element-plus";

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({
  leftData: [],
  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) {
    router.push("/site");
  }else if (index === 1){
    router.push("/tunnel/1");
  }
};
const closeLeft = () => {
  drawerLeft.value = !drawerLeft.value;
};
const closeRight = () => {
  drawerRight.value = !drawerRight.value;
};
const handleLogout = () => {
  ElMessageBox.confirm(`确认退出登录吗`, '系统提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    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 === "frequency") {
          socketData.leftData = data;
        } else if (item.typeKey === "windPressure") {
          socketData.windPressure = data;
        } else if (item.typeKey === "sensor") {
          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>
#main {
  height: 100%;
  width: 100%;
  background-color: #072348;
  #tunnel-box {
    height: 100%;
  }
}
</style>