114 lines
2.4 KiB
Vue
114 lines
2.4 KiB
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>
|