修改机械分厂设备三级

src/views/Mechanics/child/son/components/timeguagu.vue

@@ -12,7 +12,11 @@
   <div>
     <border6 ref="refborder6">
       <template v-slot>
-        <div ref="inguagu" class="box"></div>
+        <div ref="inguagu" class="box" v-show="handle == 't'"></div>
+        <div ref="inguagud" v-show="handle == 'f'" class="box empty">
+          <div class="empty-title">{{ props.title }}</div>
+          <el-empty :image-size="120" />
+        </div>
       </template>
     </border6>
   </div>
@@ -26,8 +30,10 @@ import { useI18n } from 'vue-i18n'
 let { t } = useI18n();
 let props = defineProps<{
   title: string;
+  handle: 't' | 'f'
 }>();
 let inguagu = ref();
+let inguagud = ref();
 
 let refborder6 = ref();
 
@@ -90,6 +96,9 @@ function setchartWH(width: any, height: any) {
   inguagu.value.style.height = height + "px";
   inguagu.value.style.width = width - 30 + "px";
 
+  inguagud.value.style.height = height + "px";
+  inguagud.value.style.width = width - 30 + "px";
+
   refborder6.value.resetWH();
   if (echartsData.inguagu.box) {
     echartsData.inguagu.box.resize();
@@ -110,5 +119,24 @@ defineExpose({
   box-sizing: border-box;
   padding: 10px;
 }
+
+.empty {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  justify-content: center;
+}
+.empty-title {
+  position: absolute;
+  top:10px;
+  left: 20px;
+  font-size: 22px;
+  font-weight: bolder;
+  color: white;
+
+}
+
 </style>
   

src/views/Mechanics/child/son/index.vue

@@ -12,7 +12,8 @@
     <div class="header">
       <!-- <div class="title" @click="backrouter"> -->
       <div class="title">
-          <header2 :width="'100%'" :height="'100px'" :title="t('messages.machineryDevStatus')" :titleTip="[]" :typeFun="['comback','time']" :alarmType="['']"></header2>
+        <header2 :width="'100%'" :height="'100px'" :title="t('messages.machineryDevStatus')" :titleTip="[]"
+          :typeFun="['comback', 'time']" :alarmType="['']"></header2>
       </div>
     </div>
 
@@ -32,7 +33,7 @@
         <MTTF ref="MTTFref" title="MTTF"></MTTF>
       </div>
       <div class="right ">
-          <timeguagu ref="timeguaguref" :title="t('messages.TimeUtilizationRate')"></timeguagu>
+        <timeguagu ref="timeguaguref" :title="t('messages.TimeUtilizationRate')" :handle="handle"></timeguagu>
         <statuscontrast ref="contrastref" :title="t('messages.DevRunComparison')"></statuscontrast>
       </div>
     </div>
@@ -80,6 +81,8 @@ const router=useRouter()
   oWidth: 0,
   oHeight: 0
 });
+type  handleType  = 't' | 'f'
+const handle = ref<handleType>('t');
 function WH(div: HTMLElement) {
   let a = calcWH(div.offsetHeight, div.offsetWidth, 24, 24, 0)
   size.oWidth = a.oWidth
@@ -113,7 +116,7 @@ const router=useRouter()
 }
 async function gatdeviceStatusInfoMFfun() {
   let result: any = await gatdeviceStatusInfoMF({ id: route.params.dev })
-   
+  handle.value = result.data.handle
   if (result.code == 200) {
     setdata(result.data)
   }
@@ -167,7 +170,8 @@ let data={
       clearTimeout(time.value)
       time.value = null
     }
-      time.value = setTimeout(() => {WH(contentBox)
+    time.value = setTimeout(() => {
+      WH(contentBox)
     }, 1000);
   })
   gatdeviceStatusInfoMFfun()
@@ -196,26 +200,31 @@ let data={
   align-items: center;
   position: relative;
 }
+
 .title>h1 {
   font-size: 30px;
   position: absolute;
   top: 10px;
 }
+
 .header {
   position: relative;
 }
+
 .header p {
   position: absolute;
   right: 50px;
   bottom: 20px;
   font-size: 20px;
 }
+
 .content {
   width: 100%;
   --header: 100px;
   height: calc(1080px - var(--header));
   display: flex;
 }
+
 .center {
   margin: 0 30px;
   display: flex;
@@ -223,6 +232,7 @@ let data={
   justify-content: space-between;
   align-items: center;
 }
+
 .left {
   display: flex;
   flex-wrap: wrap;
@@ -245,11 +255,13 @@ let data={
 
   /* --content:calc(100vh - var(--header)) */
   overflow: hidden !important;
-    -ms-overflow-style: none; /* IE + Edge */
-    scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none;
+  /* IE + Edge */
+  scrollbar-width: none;
+  /* Firefox */
 }
+
 ::-webkit-scrollbar {
   display: none;
-  }
-  </style>
+}</style>
   

src/views/Mechanics/indexNew.vue

@@ -171,7 +171,7 @@ async function reqDeviceTotelListMFfun() {
         item.name,
         item.dept,
         compare[item.status] ? compare[item.status] : '停机',
-        item.activation + '%',
+        item.activation,
         // item.failure + '%'
       ]
     })