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 } from "vue";
import { reqHologramDataMF} from "@/http/Mechanics"
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",
  data1: "高速",
  data2: "50cm",
  data2s: "2cm/s",
  data3: "正转",
  data4: "50cm",
  data5: "50cm",
  title1: "设备状态",
  title2: "平台X轴距原点位置和速度",
  title3: "设备状态",
  title4: "平台y轴距原点位置",
  title5: "平台z轴距原点位置",
  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;
    }
  });
}

onMounted(() => {
  getHologramDataMF();
});
</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>