机械分厂工位屏修改

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

@@ -8,70 +8,27 @@
 -->
 <template>
   <div class="float">
-    <div class="floating1" id="floating">
+    <div :class="'floating'+(index+1)" id="floating" v-for="(item,index) in props.top_data">
       <div class="roate">
-        <div class="roate-item1" id="roate-item">
+        <div :class="'roate-item'+(index+1)" id="roate-item">
-          <span class="data">{{ props.allData.data1 }}%</span>
+          <span class="data">{{ item.key }}</span>
         </div>
       </div>
-      <p class="title">{{ props.allData.title1 }}</p>
+      <p class="title">{{ item.val }}</p>
-    </div>
-
-    <div class="floating2" id="floating">
-      <div class="roate">
-        <div class="roate-item2" id="roate-item">
-          <span class="data" :style="getData2Style(props.allData.data2)">{{
-            props.allData.data2 === "N1"
-            ? "工作"
-            : props.allData.data2 === "N2"
-              ? "待机"
-              : props.allData.data2 === "N3"
-                ? "停机"
-                : "未知状态"
-          }}
-          </span>
-        </div>
-      </div>
-      <p class="title">{{ props.allData.title2 }}</p>
-    </div>
-
-    <div class="floating3" id="floating">
-      <div class="roate">
-        <div class="roate-item3" id="roate-item">
-          <span class="data">{{ props.allData.data3 }}转</span>
-        </div>
-      </div>
-      <p class="title">{{ props.allData.title3 }}</p>
-    </div>
-
-    <div class="floating4" id="floating">
-      <div class="roate">
-        <div class="roate-item4" id="roate-item">
-          <span class="data">{{ props.allData.data4 }}</span>
-        </div>
-      </div>
-      <p class="title">{{ props.allData.title4 }}</p>
     </div>    
   </div>
 </template>
 <script setup lang="ts">
 import { ref, getCurrentInstance, reactive, onMounted, computed } from "vue";
+
+
 const props = defineProps({
-  allData: {
+  top_data: {
     type: Object,
     default: () => {
-      return {
+      return [{ key: "95", val: "稼动率" }, { key: "N1", val: "设备状态" }, { key: "100", val: "钻头转速" }, { key: "下降", val: "钻头状态" }];
-        data1: "95",
-        data2: "N1",
-        data3: "100",
-        data4: "下降",
-        title1: "稼动率",
-        title2: "设备状态",
-        title3: "钻头转速",
-        title4: "钻头状态",
-      };
-    },
     },
+  }
 }); // 定义props
 const getData2Style = (data2Value: string) => {
   switch (data2Value) {

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

@@ -15,7 +15,7 @@
       <div class="date">
         <p class="date-time">{{ timeHtml }}</p>
       </div>
-      <Float :allData="topData"></Float>
+      <Float :top_data="topData"></Float>
       <Sum :allData="sumData"></Sum>
     </div>
   </div>
@@ -35,16 +35,12 @@ let allData = reactive({
   header: "炮塔铣床",
 });
 
-let topData = reactive({
+let topData = reactive([
-  data1: "95",
+  { key: "95", val: "稼动率" },
-  data2: "N1",
+  { key: "N1", val: "设备状态" },
-  data3: "100",
+  { key: "100", val: "钻头转速" },
-  data4: "下降",
+  { key: "下降", val: "钻头状态" }
-  title1: "稼动率",
+]);
-  title2: "设备状态",
-  title3: "钻头转速",
-  title4: "钻头状态",
-});
 let sumData = reactive({
   data1: "高速",
   data2: "50cm",