微工厂缝纫设备看板修改

src/views/MicrofactoryDevOnline/components/RingChart.vue

@@ -2,13 +2,13 @@
     <div class="container">
         <dv-border-box-6 :color="['#20aec5', '#20aec5']">
             <div class="content">
-                <div class="status online">在线</div>
+                <div class="status online">{{ prop.data.status }}</div>
                 <div class="right-top">
-                    <div class="num">0</div>
+                    <div class="num">{{ prop.data.count }}</div>
                     <div class="name">当日总针数</div>
                 </div>
                 <div class="chart" ref="chart"></div>
-                <div class="bottom">五线包缝机(RP2011158)</div>
+                <div class="bottom">{{ prop.data.name }}({{ prop.data.label }})</div>
             </div>
         </dv-border-box-6>
 
@@ -16,19 +16,41 @@
 </template>
 
 <script setup lang='ts'>
-import { getCurrentInstance, ref, onMounted } from 'vue';
+import { getCurrentInstance, ref, onMounted,watch } from 'vue';
 const { proxy } = getCurrentInstance()! as any;
 const chart = ref(null);
 let myChart: any = null;
+const prop = defineProps({
+    data: {
+        type: Object,
+        default: () => {
+            return {
+                id: '',
+                status: '在线',
+                name: '五线包缝机',
+                label: 'RP2011158',
+                count: 0,
+                series: [
+                    { value: 0, name: '工作时间' },
+                    { value: 24, name: '空闲时间' }
+                ]
+            }
+        }
+    }
+})
 const init = () => {
+    if (!myChart) {
         myChart = proxy.$echarts.init(chart.value);
+    }
+    
     let option = {
         tooltip: {
             trigger: 'item'
         },
-        color:['#95A2FF','#FA8080'],
+        color: ['#95A2FF', '#FA8080'],
         series: [
             {
+                name: '',
                 type: 'pie',
                 radius: ['35%', '80%'],
                 avoidLabelOverlap: false,
@@ -40,15 +62,15 @@ const init = () => {
                 labelLine: {
                     show: false
                 },
-                data: [
+                data: prop.data.series
-                    { value: 21, name: '工作时间' },
-                    { value: 3, name: '空闲时间' },
-                ]
             }
         ]
     };
     myChart.setOption(option);
 }
+watch(() => prop.data, (newVal, oldVal) => {
+    init();
+})
 
 onMounted(() => {
     init();

src/views/MicrofactoryDevOnline/index.vue

@@ -2,21 +2,14 @@
   <div :class="$style['container']">
     <div class="header">
       <div class="title">
-        <header2
+        <header2 ref="headerref" :width="'100%'" :height="'120px'" :title="t('messages.微工厂缝纫设备看板')" :titleTip="titleTip"
-          ref="headerref"
+          :typeFun="['time']" :alarmType="[]">
-          :width="'100%'"
-          :height="'120px'"
-          :title="t('messages.微工厂缝纫设备看板')"
-          :titleTip="titleTip"
-          :typeFun="['time']"
-          :alarmType="[]"
-        >
         </header2>
       </div>
     </div>
     <div class="content" ref="Acontent">
-      <div  v-for="inem in 21" class="ringchart">
+      <div v-for="item in arr" class="ringchart">
-        <RingChart></RingChart>
+        <RingChart :data="item"></RingChart>
       </div>
 
     </div>
@@ -26,9 +19,9 @@
 <script setup lang='ts'>
 import header2 from "@/components/headerBox/header2.vue";
 import RingChart from "./components/RingChart.vue";
-import {ref} from 'vue'
+import { ref,onMounted,onUnmounted } from 'vue'
 import { useI18n } from 'vue-i18n'
-let {t} = useI18n();
+let { t } = useI18n();
 
 document.title = t('messages.微工厂缝纫设备看板');
 let titleTip = [
@@ -41,6 +34,36 @@ let titleTip = [
     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 {
@@ -65,5 +88,4 @@ let titleTip = [
   width: 260px;
   height: 300px;
 }
-
 </style>

src/views/pmData/index.vue

@@ -130,15 +130,14 @@ onUnmounted(() => {
   box-sizing: border-box;
   display: flex;
   flex-wrap: wrap;
-  justify-content: flex-start;
+  justify-content: space-between;
   align-items: center;
   padding: 20px;
 }
 
 .test {
-  width: 20%;
+  width: 340px;
   height: 30%;
-  margin: 20px 47px;
 }
 </style>
 <style>