screenFront/src/views/Mechanics/child/station/index.vue

<!--
 * @FilePath: index.vue
 * @Author: zz
 * @Date: 2023-12-28 15:29:14
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-01-04 15:33:20
 * @Descripttion: 
-->
<template>
  <div class="container">
    <div class="bj">
      <div class="text">
        <span>{{ ori_data.name }}数据监控平台</span>
      </div>
      <div class="date">
        <p class="date-time">{{ timeHtml }}</p>
      </div>
      <Float :top_data="topData"></Float>
      <Sum :bottom_data="bottomData"></Sum>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, getCurrentInstance, reactive, onMounted,watch } from "vue";
import { reqHologramDataMF} from "@/http/Mechanics"
import { connectWebsocket, closeWebsocket } from "@/utils/websocket";
import handleData from "./handle"
import { useRoute } from "vue-router";
import Sum from "./components/sum.vue";
import Float from "./components/float.vue";
import useNowTime from "@/hook/nowTime";
let { timeHtml } = useNowTime();
let route = useRoute();

let ori_data = ref({
  name: "机床1",
  image: "/dev-api/profile/upload/2023/12/17/cc3940d1e85e4861845e797213802975.png",
})
let topData = ref([]);

let bottomData = ref({})

function getHologramDataMF() {
  reqHologramDataMF({id:route.params.id}).then((res:any) => {
    if (res.code == 200&&res.data) {
      ori_data.value = res.data;
      let handle = handleData(ori_data.value)
      topData.value = handle.top;
      bottomData.value = handle.bottom;
    }
  });
}


function getWebsocket(val) {
  try {
    let data = JSON.parse(val);
    //实时推送的数据
    if (data.type == "HologramDataMFInfo") {
    }
  } catch (err) {}
}
function errWebsocket(val) {
  // console.log(val);
}

onMounted(() => {
  getHologramDataMF();
  connectWebsocket(null, null, getWebsocket, errWebsocket);
});
</script>
<style scoped>
.container {
  height: 1080px;
  width: 1920px;
  position: relative;
}

.bj {
  width: 100%;
  height: 100%;
  padding: 16px 16px 10px 16px;
  box-sizing: border-box;
  background-image: url(./img/u0.png);
  background-size: cover;
  background-position: center center;
  color: #aeeefa;

  .text {
    position: absolute;
    top: 25px;
    left: 38px;
    width: 614px;
    height: 53px;
    font-size: 48px;
    color: #aeeefa;
    font-family: "华文新魏", sans-serif;
  }
}

.date {
  font-size: 28px;
  height: 6%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.date-time {
  margin-right: 125px;
}
</style>