机械分厂环境修改

src/views/generalEnvironmentMechanical/components/pm.vue

@@ -207,7 +207,7 @@ onMounted(() => {
   init();
   timer = setInterval(() => {
     index = index + 1;
-    if (index >= store.humiture.length) {
+    if (index >= store.pm.length) {
       index = 0;
     }
     init();

src/views/pmTest/index.vue

@@ -7,16 +7,28 @@
       </div>
     </div>
     <div class="content">
-      <div class="test" v-for="item in pmData">
+      <div class="box">
         <Border12>
-          <PM :title="item.title" :value="item.value"></PM>
-        </Border12>
-      </div>
-      <div class="test" v-for="item in pmData">
-        <Border12>
-          <PM :title="item.title" :value="item.value"></PM>
+          <div style="width: 100%;height: 100%;overflow: hidden;" ref="boxRef">
+            <ul ref="ulRef" :style="{transform:`translateY(-${index * boxHeight}px)`}">
+              <li class="item-box" v-for="item in list" :key="item.id" :style="{height:`${boxHeight}px`}">
+                <div class="item-left">{{ item.id }}</div>
+                <div class="item-right">
+                  <div class="b-top">
+                    <text>机架号：<i>{{item.label}}</i></text> <text>设备位置及名称：<i>{{ item.position }}</i></text>
+                  </div>
+                  <div class="b-bottom">
+                    <text>工作时长：<i>{{ item.workTime }}</i></text> 
+                    <text>待机时长：<i>{{ item.standbyTime }}</i></text>
+                    <text>停机时长：<i>{{ item.downtime }}</i></text>
+                  </div>
+                </div>
+              </li>
+            </ul>
+          </div>
         </Border12>
       </div>
+      
     </div>
 
   </div>
@@ -24,81 +36,40 @@
 
 <script setup lang='ts'>
 import { ref, reactive, onMounted, onUnmounted } from "vue"
-import PM from "@/components/PM/PM.vue"
 import Border12 from "@/components/border/Border12.vue"
 import Header2 from "@/components/headerBox/header2.vue"
-import { getPmtenData, getPmtwoData } from "@/http/generalEnvironment";
-import { connectWebsocket, closeWebsocket } from "@/utils/websocket";
-let pmtest = ref({
-  title: 'PM测试',
-  value: { two: '44', ten: '51' }
-})
-type pmData = {
-  title: string,
-  value: {
-    two: string,
-    ten: string
-  }
-}
-let pmData = reactive<pmData[]>([]);
-/**
- * 请求数据
- */
-async function getData() {
-  let resulttwo: any = await getPmtwoData()
-  let resultten: any = await getPmtenData()
-
-  if (resulttwo.code == 200) {
-    resulttwo.data.forEach(res => {
-      let temp = {
-        title: res.name + "(PM2.5/PM10)",
-        value: {
-          two: res.value,
-          ten: '0'
-        }
-      }
-      pmData.push(temp)
-
-    })
-  }
-  if (resultten.code == 200) {
-    resultten.data.forEach(res => {
-      let index = pmData.findIndex(item => item.title == res.name + "(PM2.5/PM10)")
-
-      if (index != -1) {
-        pmData[index].value.ten = res.value
-      }
-    })
+let list = ref([])
+let rowNum =6;
+const boxRef = ref(null)
+const ulRef = ref(null)
+let boxHeight = ref(0)
+let interval = 3000;
+let index = ref(0);
+let timer = null
+for (let i = 1; i <= 10; i++) {
+  let item = {
+    id: i,
+    label: `机架号${i}`,
+    position: `设备位置及名称${i}`,
+    workTime: `65664 分钟`,
+    standbyTime: `57244 分钟`,
+    downtime: `6708 分钟`
   }
+  list.value.push(item)
 }
 
-
-//websocket 获取数据
-function getWebsocket(val) {
-  try {
-
-    let data = JSON.parse(val);
-    if (data.type == "dust") {
-      let index = pmData.findIndex(item => item.title == data.msg.enName + "(PM2.5/PM10)")
-      if (index != -1) {
-        pmData[index].value.ten = data.msg.pm10
-        pmData[index].value.two = data.msg.pm25
-      }
+onMounted(() => {  
+  boxHeight.value = boxRef.value.clientHeight / rowNum
+  //定时器 循环 添加过度效果
+  timer = setInterval(() => {
+    index.value++;
+    if (index.value >= (list.value.length - rowNum + 1)) {
+      index.value = 0;
     }
-
-  } catch (err) { }
-}
-
-function errWebsocket(val) {
-  console.log(val);
-}
-getData();
-
-onMounted(() => {
-  connectWebsocket(null, null, getWebsocket, errWebsocket);
+  }, interval);
 });
 onUnmounted(() => {
-  closeWebsocket();
+  clearInterval(timer)
 });
 </script>
 
@@ -123,12 +94,43 @@ onUnmounted(() => {
   align-items: center;
   padding: 20px;
 }
+.box {
+  width: 600px;
+  height: 400px;
+}
+ul {
+  transition: all 1s;
+}
 
 .test {
   width: 20%;
   height: 30%;
   margin: 20px 47px;
 }
+
+ul {
+  width: 100%;
+}
+.item-box {
+  width: 100%;
+  height: 50px;
+  color: #fff;
+  font-size: 14px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.item-left {
+  width: 10%;
+  margin-right: 10px;
+}
+.item-right {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  align-items: start;
+}
 </style>
 <style>
 body {