screenFront/src/views/MicrofactoryDevOnline/index.vue

<template>
  <div :class="$style['container']">
    <div class="header">
      <div class="title">
        <header2 ref="headerref" :width="'100%'" :height="'120px'" :title="t('messages.微工厂缝纫设备看板')" :titleTip="titleTip"
          :typeFun="['time']" :alarmType="[]">
        </header2>
      </div>
    </div>
    <div class="content" ref="Acontent">
      <div v-for="item in arr" class="ringchart">
        <RingChart :data="item"></RingChart>
      </div>

    </div>
  </div>
</template>

<script setup lang='ts'>
import header2 from "@/components/headerBox/header2.vue";
import RingChart from "./components/RingChart.vue";
import { ref,onMounted,onUnmounted } from 'vue'
import {getSewingBoard} from '@/http/device'
import { connectWebsocket, closeWebsocket } from "@/utils/websocket";
import { useI18n } from 'vue-i18n'
let { t } = useI18n();

document.title = t('messages.微工厂缝纫设备看板');
let titleTip = [
  // {
  //   color: "#95A2FF",
  //   name: t('messages.工作时间'),
  // },
  // {
  //   color: "#FA8080",
  //   name: t('messages.空闲时间'),
  // },
];
let timer = null;
let arr = ref([]);
let arr_num = ref([]);
function reqSewingBoard() {
  getSewingBoard().then((res:any) => {
    if (res.code == 200) {
      let nums = []
      arr.value = res.data.map(item=>{
        nums.push(item.num)
        return {
          id: item.id,
          num: item.num,
          status: item.status == 'true'? '在线':'离线',
          name: item.name,
          label: item.label,
          count: item.in4TodayCount,
          todayRunTime: item.todayRunTime,
          todayWorkTime: item.todayWorkTime,
        }
      });
      arr_num.value = nums;
    }
  })
}

function getWebsocket(val) {
  try {
    let data = JSON.parse(val);

    //
    if (data.type == "mDeviceStatus"&&arr_num.value.includes(data.msg.num)) {
      let msg = arr.value.find(item=>item.num == data.msg.num)
      msg.status = data.msg.status === 0? '离线':'在线'
      
      
    }

  } catch (err) {
    console.log(err, "报错了大哥", console.log(val)
    );

  }
}
function errWebsocket(val) {
  
  console.log(val);
}

onMounted(()=>{
  reqSewingBoard()
  timer = setInterval(() => {
    reqSewingBoard()
  }, 60000);
  connectWebsocket(null, null, getWebsocket, errWebsocket);
})
onUnmounted(()=>{
  clearInterval(timer);
})
</script>
<style module>
.container {
  height: 1080px;
  width: 1920px;
  color: #20aec5;
  background-color: #100c2a;
}
</style>
<style scoped>
.content {
  width: 100%;
  --header: 120px;
  height: calc(1080px - var(--header));
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.ringchart {
  width: 280px;
  height: 300px;
}
</style>