添加机械分厂设备单页

src/router/index.ts

@@ -309,7 +309,12 @@ const routes: Array<RouteRecordRaw> = [
         name: "Recorder",
         component: () => import("../views/Recorder/index.vue"),
       },
-
+      // 机械分厂单页面工位屏
+      {
+        path: "/Station",
+        name: "Station",
+        component: () => import("../views/Mechanics/child/station/index.vue"),
+      },
 
 
 

src/views/Mechanics/child/station/components/float.vue

@@ -0,0 +1,230 @@
+<!--
+ * @FilePath: float.vue
+ * @Author: zz
+ * @Date: 2023-12-28 13:22:32
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2024-01-04 15:32:59
+ * @Descripttion: 
+-->
+<template>
+  <div class="float">
+    <div class="floating1" id="floating">
+      <div class="roate">
+        <div class="roate-item" id="roate-item">
+          <span class="data">{{ allData.data1 }}%</span>
+        </div>
+      </div>
+      <p class="title">{{ allData.title1 }}</p>
+    </div>
+
+    <div class="floating2" id="floating">
+      <div class="roate">
+        <div class="roate-item2" id="roate-item">
+          <span class="data" :style="getData2Style(allData.data2)"
+            >{{
+              allData.data2 === "N1"
+                ? "工作"
+                : allData.data2 === "N2"
+                ? "待机"
+                : allData.data2 === "N3"
+                ? "停机"
+                : "未知状态"
+            }}
+          </span>
+        </div>
+      </div>
+      <p class="title">{{ allData.title2 }}</p>
+    </div>
+
+    <div class="floating3" id="floating">
+      <div class="roate">
+        <div class="roate-item3" id="roate-item">
+          <span class="data">{{ allData.data3 }}转</span>
+        </div>
+      </div>
+      <p class="title">{{ allData.title3 }}</p>
+    </div>
+
+    <div class="floating4" id="floating">
+      <div class="roate">
+        <div class="roate-item4" id="roate-item">
+          <span class="data" style="margin: 20px 15px 0 0">{{ allData.data4 }}</span>
+        </div>
+      </div>
+      <p class="title">{{ allData.title4 }}</p>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, getCurrentInstance, reactive, onMounted, computed } from "vue";
+let allData = reactive({
+  data1: "95",
+  data2: "N3",
+  data3: "100",
+  data4: "下降",
+  title1: "稼动率",
+  title2: "设备状态",
+  title3: "钻头转速",
+  title4: "钻头状态",
+});
+const getData2Style = (data2Value: string) => {
+  switch (data2Value) {
+    case "N1":
+      return { color: "#7cffb2" };
+    case "N2":
+      return { color: "#fddd60" };
+    case "N3":
+      return { color: "#aaaaaa" };
+    default:
+      return {};
+  }
+};
+</script>
+
+<style scoped>
+#floating {
+  width: 15%;
+  height: 75%;
+  background-size: 90%;
+}
+
+.floating1 {
+  top: 85%;
+  left: 6%;
+  background: url(./../img/j1.1.png) no-repeat center;
+  animation: float 5s linear infinite;
+  position: relative;
+}
+.roate-item {
+  bottom: 70%;
+  background: url(./../img/j1.png) no-repeat center;
+  animation: roate 6s linear infinite;
+}
+.floating2 {
+  top: -30%;
+  left: 25%;
+  background: url(./../img/j2.1.png) no-repeat center;
+  animation: float2 6s linear infinite;
+  position: relative;
+}
+.roate-item2 {
+  bottom: 80%;
+  background: url(./../img/j2.png) no-repeat center;
+  animation: roate 7s linear infinite;
+}
+.floating3 {
+  bottom: 90%;
+  left: 60%;
+  background: url(./../img/j3.1.png) no-repeat center;
+  animation: float2 6s linear infinite;
+  position: relative;
+}
+.roate-item3 {
+  bottom: 70%;
+  background: url(./../img/j3.png) no-repeat center;
+  animation: roate 7s linear infinite;
+}
+.floating4 {
+  bottom: 150%;
+  left: 80%;
+  background: url(./../img/j4.1.png) no-repeat center;
+  animation: float3 5s linear infinite;
+  position: relative;
+}
+.roate-item4 {
+  bottom: 90%;
+  background: url(./../img/j4.png) no-repeat center;
+  animation: roate2 6s linear infinite;
+}
+
+.roate {
+  width: 100%;
+  height: 50%;
+  bottom: 12%;
+  background-size: 80%;
+  position: relative;
+  background: url(./../img/j.png) no-repeat center;
+}
+#roate-item {
+  width: 100%;
+  right: 5px;
+  height: 100%;
+  position: absolute;
+  background-size: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.data {
+  margin: 20px 0 0 10px;
+  font-size: 28px;
+  font-weight: 700;
+}
+.title {
+  bottom: 18%;
+  text-align: center;
+  font-size: 18px;
+  font-weight: 700;
+  position: relative;
+}
+.float {
+  width: 100%;
+  height: 40%;
+}
+@keyframes float {
+  0% {
+    transform: translateY(0%);
+  }
+  50% {
+    transform: translateY(40%);
+  }
+  100% {
+    transform: translateY(0%);
+  }
+}
+@keyframes float2 {
+  0% {
+    transform: translateY(0%);
+  }
+  50% {
+    transform: translateY(50%);
+  }
+  100% {
+    transform: translateY(0%);
+  }
+}
+@keyframes roate {
+  0% {
+    transform: translateY(0%);
+  }
+  50% {
+    transform: translateY(65%);
+  }
+  100% {
+    transform: translateY(0%);
+  }
+}
+
+@keyframes float3 {
+  0% {
+    transform: translateY(0%);
+  }
+  50% {
+    transform: translateY(50%);
+  }
+  100% {
+    transform: translateY(0%);
+  }
+}
+@keyframes roate2 {
+  0% {
+    transform: translateY(0%);
+  }
+  50% {
+    transform: translateY(70%);
+  }
+  100% {
+    transform: translateY(0%);
+  }
+}
+</style>

src/views/Mechanics/child/station/components/sum.vue

@@ -0,0 +1,209 @@
+<!--
+ * @FilePath: sum.vue
+ * @Author: zz
+ * @Date: 2023-12-22 11:36:31
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2024-01-09 08:26:39
+ * @Descripttion: 
+-->
+<template>
+  <div class="sum">
+    <div class="deviceimg">
+      <!-- <img class="img" :src="allData.image" /> -->
+      <img class="img" src="./../img/device.png " />
+    </div>
+    <div class="cicle1"></div>
+    <div class="data1" id="data">
+      <div class="qiu1" id="qiu">
+        <p>{{ allData.data1 }}</p>
+      </div>
+      <span>{{ allData.title1 }}</span>
+    </div>
+    <div class="data2" id="data">
+      <div class="qiu2" id="qiu">
+        <p>{{ allData.data2 }}<p style="padding-left:20%">{{ allData.data2s }}</p></p>
+      </div>
+      <span>{{ allData.title2 }}</span>
+    </div>
+
+    <div class="data5" id="data">
+      <div class="qiu5" id="qiu">
+        <p>{{ allData.data5}}</p>
+      </div>
+      <span>{{ allData.title5}}</span>
+    </div>
+
+    <div class="data3" id="data">
+      <div class="qiu3" id="qiu">
+        <p>
+          {{ allData.data3 }}
+        </p>
+      </div>
+      <span>{{ allData.title3 }}</span>
+    </div>
+    <div class="data4" id="data">
+      <div class="qiu4" id="qiu">
+        <p>{{ allData.data4 }}</p>
+      </div>
+      <span>{{ allData.title4 }}</span>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, getCurrentInstance, reactive, onMounted } from "vue";
+import { imgurlAddXhr } from "@/utils/devSever";
+let allData = reactive({
+  data1: "高速",
+  data2: "50cm",
+  data2s: "2cm/s",
+  data3: "正转",
+  data4: "50cm",
+  data5: "50cm",
+  title1: "设备状态",
+  title2: "平台X轴距原点位置和速度",
+  title3: "设备状态",
+  title4: "平台y轴距原点位置",
+  title5: "平台z轴距原点位置",
+  image: "",
+});
+const { proxy } = getCurrentInstance() as any;
+</script>
+
+<style scoped>
+.sum {
+  border-width: 0px;
+  position: absolute;
+  top: 39%;
+  width: 100%;
+  height: 60%;
+  display: flex;
+  background: url(./../img/big.png) no-repeat center;
+  background-size: 55%;
+}
+.deviceimg {
+  height: 480px;
+  width: 450px;
+  bottom: 40%;
+  left: 37%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+}
+img {
+  /* 确保图片不会超出div的宽高 */
+  max-width: 100%;
+  max-height: 100%;
+}
+
+.cicle1 {
+  transform-style: preserve-3d;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin: -320px 0 0 -297px;
+  width: 580px;
+  height: 800px;
+  background: url(./../img/circle.png) no-repeat center;
+  background-size: contain;
+  transform: rotateX(70deg);
+  animation: circle 5s linear infinite;
+}
+@keyframes circle {
+  100% {
+    transform: rotateX(70deg) rotateZ(360deg);
+  }
+}
+.data1 {
+  left: 12%;
+  top: 35%;
+}
+.qiu1 {
+  background: url(./../img/cicle1.png) no-repeat center;
+}
+
+.data2 {
+  left: 63%;
+  top: 26%;
+}
+.qiu2 {
+  background: url(./../img/cicle03.png) no-repeat center;
+}
+
+.data3 {
+  left: -3%;
+  top: 57%;
+}
+.qiu3 {
+  background: url(./../img/cicle02.png) no-repeat center;
+}
+
+.data4 {
+  left: 80%;
+  top: 48%;
+}
+.qiu4 {
+  background: url(./../img/cicle01.png) no-repeat center;
+}
+
+.data5 {
+  left: 65%;
+  top: 59%;
+}
+.qiu5 {
+ background: url(./../img/cicle1.png) no-repeat center;
+}
+
+#data {
+  position: absolute;
+  width: 400px;
+  height: 400px;
+  background: url(./../img/j5.png) no-repeat center;
+  text-align: center;
+}
+p {
+  display: table-cell;
+  vertical-align: middle;
+  font-size: 26px;
+  font-weight: 700;
+}
+#qiu {
+  width: 105px;
+  height: 120px;
+  position: relative;
+  background-size: 100%;
+  top: 20%;
+  margin: auto;
+  display: table;
+}
+#qiu::before {
+  content: "";
+  display: block;
+  width: 105px;
+  height: 100px;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  border-radius: 50%;
+  border: 3px solid rgba(255, 255, 255, 0.5);
+  animation: scale 2s linear infinite;
+}
+@keyframes scale {
+  0% {
+    transform: translate(-50%, -50%) scale(0.9);
+    opacity: 1;
+  }
+  100% {
+    transform: translate(-50%, -50%) scale(1.5);
+    opacity: 0;
+  }
+}
+span {
+  font-size: 18px;
+  top: 22%;
+  font-weight: 700;
+  color: #aeeefa;
+  position: relative;
+}
+</style>

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

@@ -0,0 +1,72 @@
+<!--
+ * @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></Float>
+      <Sum></Sum>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, getCurrentInstance, reactive, onMounted } from "vue";
+import Sum from "./components/sum.vue";
+import Float from "./components/float.vue";
+import useNowTime from "@/hook/nowTime";
+let { timeHtml } = useNowTime();
+
+let allData = reactive({
+  header: "炮塔铣床",
+});
+</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>