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>{{ allData.header }}数据监控平台</span>
      </div>
      <div class="date">
        <p class="date-time">{{ timeHtml }}</p>
      </div>
      <Float :allData="topData"></Float>
      <Sum :allData="sumData"></Sum>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, getCurrentInstance, reactive, onMounted } from "vue";
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();
console.log(route.params.id);

let allData = reactive({
  header: "炮塔铣床",
});

let topData = reactive({
  data1: "95",
  data2: "N1",
  data3: "100",
  data4: "下降",
  title1: "稼动率",
  title2: "设备状态",
  title3: "钻头转速",
  title4: "钻头状态",
});
let sumData = reactive({
  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",
});
</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: 55px;
    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>