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 { 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 = [];
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(()=>{
  timer = setInterval(() => {
    arr.forEach(item => {
      let random = +(Math.random() * 24).toFixed(1);
      item.series[0].value = random;
      item.series[1].value = (24-random).toFixed(1);
    })
  }, 5000);
})
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>