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 { 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([]);

function reqSewingBoard() {
  getSewingBoard().then((res:any) => {
    if (res.code == 200) {
      arr.value = res.data.map(item=>{
        return {
          id: '',
          status: item.status == 'true'? '在线':'离线',
          name: item.name,
          label: item.label,
          count: item.pins,
          series: item.series
        }
      });
    }
  })
}
// for (let index = 0; index < 21; index++) {
//   let random = +(Math.random() * 24).toFixed(1);
//   arr.push({
//     id: '',
//     status: '在线',
//     name: '五线包缝机',
//     label: 'RP2011158',
//     count: 0,
//     series: [
//       { value: random, name: '工作时间' },
//       { value: (24-random).toFixed(1), name: '空闲时间' }
//     ]
//   })

// }

onMounted(()=>{
  reqSewingBoard()
  timer = setInterval(() => {
    reqSewingBoard()
  }, 60000);
})
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: 260px;
  height: 300px;
}
</style>