From 84428dba0aad4979acfc3619a18b61585bc700b7 Mon Sep 17 00:00:00 2001
From: hzz <hzz>
Date: Mon, 14 Aug 2023 09:38:21 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=9C=BA=E6=A2=B0=E5=88=86?=
 =?UTF-8?q?=E5=8E=82=E8=AE=BE=E5=A4=87=E4=B8=89=E7=BA=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../child/son/components/timeguagu.vue        |  32 +-
 src/views/Mechanics/child/son/index.vue       | 460 +++++++++---------
 src/views/Mechanics/indexNew.vue              |   2 +-
 3 files changed, 267 insertions(+), 227 deletions(-)

diff --git a/src/views/Mechanics/child/son/components/timeguagu.vue b/src/views/Mechanics/child/son/components/timeguagu.vue
index 76826bd..097bda2 100644
--- a/src/views/Mechanics/child/son/components/timeguagu.vue
+++ b/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>
@@ -23,11 +27,13 @@ import { EDataPerson, EDataPersonItem } from "@/type/Mechanics";
 import border6 from "@/components/borderBox/border6.vue";
 const { proxy } = getCurrentInstance() as any;
 import { useI18n } from 'vue-i18n'
-let {t} = useI18n();
+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>
   
\ No newline at end of file
diff --git a/src/views/Mechanics/child/son/index.vue b/src/views/Mechanics/child/son/index.vue
index 2fc40ed..c27ebbb 100644
--- a/src/views/Mechanics/child/son/index.vue
+++ b/src/views/Mechanics/child/son/index.vue
@@ -8,248 +8,260 @@
  * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
 -->
 <template>
-    <div :class="$style['container']">
-        <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>
-        </div>
-      </div>
-  
-      <div class="content" ref="Acontent" >
-        <div class="left ">
-            <toptip ref="toptip1ref1" :type="1"> </toptip>
-            <toptip ref="toptip1ref2" :type="1"> </toptip>
-            <toptip ref="toptip1ref3" :type="1"> </toptip>
-            <toptip ref="toptip1ref4" :type="2"> </toptip>
-            <toptip ref="toptip1ref5" :type="2"> </toptip>
-            <toptip ref="toptip1ref6" :type="2"> </toptip>
-        </div>
-        <div class="center ">
-            <TopImg ref="imgRef"></TopImg>
-            <!-- <water1 ref="progressref1" title="MTBF" :data="0"></water1> -->
-            <!-- <water1 ref="progressref2" title="MTTR" :data="0"></water1> -->
-            <MTTF  ref="MTTFref" title="MTTF"></MTTF>
-        </div>
-        <div class="right ">
-          <timeguagu ref="timeguaguref" :title="t('messages.TimeUtilizationRate')"></timeguagu>
-          <statuscontrast ref="contrastref" :title="t('messages.DevRunComparison')"></statuscontrast>
-        </div>
+  <div :class="$style['container']">
+    <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>
       </div>
     </div>
-  </template>
+
+    <div class="content" ref="Acontent">
+      <div class="left ">
+        <toptip ref="toptip1ref1" :type="1"> </toptip>
+        <toptip ref="toptip1ref2" :type="1"> </toptip>
+        <toptip ref="toptip1ref3" :type="1"> </toptip>
+        <toptip ref="toptip1ref4" :type="2"> </toptip>
+        <toptip ref="toptip1ref5" :type="2"> </toptip>
+        <toptip ref="toptip1ref6" :type="2"> </toptip>
+      </div>
+      <div class="center ">
+        <TopImg ref="imgRef"></TopImg>
+        <!-- <water1 ref="progressref1" title="MTBF" :data="0"></water1> -->
+        <!-- <water1 ref="progressref2" title="MTTR" :data="0"></water1> -->
+        <MTTF ref="MTTFref" title="MTTF"></MTTF>
+      </div>
+      <div class="right ">
+        <timeguagu ref="timeguaguref" :title="t('messages.TimeUtilizationRate')" :handle="handle"></timeguagu>
+        <statuscontrast ref="contrastref" :title="t('messages.DevRunComparison')"></statuscontrast>
+      </div>
+    </div>
+  </div>
+</template>
   
-  <script setup lang="ts">
-  import { onBeforeMount, onMounted, onUnmounted, reactive, ref } from "vue";
-  import header2 from '@/components/headerBox/header2.vue'
-  import toptip from './components/toptip1.vue'
-  import timeguagu from './components/timeguagu.vue'
-  import progress from './components/progress.vue'
-  import water1 from './components/water.vue'
-  import TopImg from './components/imageTop.vue'
-  import MTTF from './components/MTTF.vue'
-  import {imgurlAddXhr} from '@/utils/devSever'
-  import statuscontrast from './components/contrast.vue'
-  import {calcWH} from '@/components/ts/selfAdaption'
-  import { gatdeviceStatusInfoMF } from "@/http/Mechanics";
-  import { useRoute,useRouter } from "vue-router";
-import {useMechanicsStore} from "@/store/module/Mechanics"
+<script setup lang="ts">
+import { onBeforeMount, onMounted, onUnmounted, reactive, ref } from "vue";
+import header2 from '@/components/headerBox/header2.vue'
+import toptip from './components/toptip1.vue'
+import timeguagu from './components/timeguagu.vue'
+import progress from './components/progress.vue'
+import water1 from './components/water.vue'
+import TopImg from './components/imageTop.vue'
+import MTTF from './components/MTTF.vue'
+import { imgurlAddXhr } from '@/utils/devSever'
+import statuscontrast from './components/contrast.vue'
+import { calcWH } from '@/components/ts/selfAdaption'
+import { gatdeviceStatusInfoMF } from "@/http/Mechanics";
+import { useRoute, useRouter } from "vue-router";
+import { useMechanicsStore } from "@/store/module/Mechanics"
 import { useI18n } from 'vue-i18n'
-let {t} = useI18n();
+let { t } = useI18n();
 const store = useMechanicsStore()
-const route=useRoute()
-const router=useRouter()
-  
-  let Acontent=ref()
-  let time=ref(null)
-  let toptip1ref1=ref()
-  let toptip1ref2=ref()
-  let toptip1ref3=ref()
-  let toptip1ref4=ref()
-  let toptip1ref5=ref()
-  let toptip1ref6=ref()
-  let imgRef = ref()
-  let timeguaguref=ref()
-  // let progressref1=ref()
-  // let progressref2=ref()
-  let MTTFref=ref()
-  let contrastref=ref()
+const route = useRoute()
+const router = useRouter()
+
+let Acontent = ref()
+let time = ref(null)
+let toptip1ref1 = ref()
+let toptip1ref2 = ref()
+let toptip1ref3 = ref()
+let toptip1ref4 = ref()
+let toptip1ref5 = ref()
+let toptip1ref6 = ref()
+let imgRef = ref()
+let timeguaguref = ref()
+// let progressref1=ref()
+// let progressref2=ref()
+let MTTFref = ref()
+let contrastref = ref()
 //   let {timeHtml}=useNowTime()
 //   let arr=reactive(null)
-  let size=reactive({
-    oWidth:0,
-    oHeight:0
-  });
-  function WH(div:HTMLElement){
-    let a=calcWH(div.offsetHeight,div.offsetWidth,24,24,0)
-  size.oWidth=a.oWidth
-  size.oHeight=a.oHeight
-  toptip1(a.oWidth*4-50,a.oHeight*8-50)
+let size = reactive({
+  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
+  size.oHeight = a.oHeight
+  toptip1(a.oWidth * 4 - 50, a.oHeight * 8 - 50)
   // toptip2(a.oWidth*3,a.oHeight*2)
-  guagebox(a.oWidth*8-50,a.oHeight*12-50)
-  contrasttbox(a.oWidth*8-50,a.oHeight*12-50)
-  }
-  function toptip1(width:any,height:any){
-    if(!toptip1ref1.value&&!toptip1ref2.value) return
-    if(!toptip1ref3.value&&!toptip1ref4.value&&!toptip1ref5.value&&!toptip1ref6.value) return
-    toptip1ref1.value.setchartWH(width,height)
-    toptip1ref2.value.setchartWH(width,height)
-    toptip1ref3.value.setchartWH(width,height)
-    toptip1ref4.value.setchartWH(width,height)
-    toptip1ref5.value.setchartWH(width,height)
-    toptip1ref6.value.setchartWH(width,height)
-  }
-  function guagebox(width:any,height:any){
-    if(!MTTFref.value&&!imgRef.value) return
-    imgRef.value.setchartWH(width,height)
-      // progressref1.value.setchartWH(width,height)
-      // progressref2.value.setchartWH(width,height)
-      MTTFref.value.setchartWH(width,height)
-  }
-    function contrasttbox(width:any,height:any){
-      if(!contrastref.value&&!timeguaguref.value) return
-      timeguaguref.value.setchartWH(width,height)
-      contrastref.value.setchartWH(width,height)
-  }
-  async function gatdeviceStatusInfoMFfun(){  
-    let result:any = await gatdeviceStatusInfoMF({id:route.params.dev})
-   
-    if(result.code==200){
-      setdata(result.data)
-    }
-  }
-  function setdata(val:any){
-    
-    
-let data={
-    name:val.name, //设备名称
-    status:val.status=='H_E_STOP'?t('messages.STOP'):val.status=='H_OFF'?t('messages.Standby'):val.status=='H_ON'?t('messages.work'):t('messages.halt'), //设备状态
-    starttime:val.ontime,//启动时长
-    endtime:val.offtime,//待机时长
-    stoptime:val.stoptime,//急停时长
-    data:'2020-05-06',//采购日期
-    src:imgurlAddXhr(val.data),//设备图片
-    timeguagu: Math.round(Math.abs((val.ontime)/(val.ontime+val.offtime+val.stoptime)*100)) ||0,//时间稼动率
-    MTBF:2724,//MTBF
-    MTTR:169,//MTTR
-    MTTF:2555,//MTTF
+  guagebox(a.oWidth * 8 - 50, a.oHeight * 12 - 50)
+  contrasttbox(a.oWidth * 8 - 50, a.oHeight * 12 - 50)
 }
-    toptip1ref1.value.setData({title:t('messages.DevName'),value:data.name})
-    toptip1ref2.value.setData({title:t('messages.procureDate'),value:data.data})
-    toptip1ref3.value.setData({title:t('messages.DevStatus'),value:data.status})
-    toptip1ref4.value.setData({title:t('messages.workTime'),value:data.starttime})
-    toptip1ref5.value.setData({title:t('messages.StandbyTime'),value:data.endtime})
-    toptip1ref6.value.setData({title:t('messages.haltTime'),value:data.stoptime})
-    timeguaguref.value.setData(data.timeguagu)
-    imgRef.value.setData(data.src)
-    // progressref1.value.setData(data.MTBF)
-    // progressref2.value.setData(data.MTTR)
-    MTTFref.value.setData({title:data.name,value:{MTTF:data.MTTF,MTBF:data.MTBF,MTTR:data.MTTR}})
-    contrastref.value.setData({title:[t('messages.firing'),t('messages.Standby'),t('messages.STOP')],value:[data.starttime,data.endtime,data.stoptime]})
+function toptip1(width: any, height: any) {
+  if (!toptip1ref1.value && !toptip1ref2.value) return
+  if (!toptip1ref3.value && !toptip1ref4.value && !toptip1ref5.value && !toptip1ref6.value) return
+  toptip1ref1.value.setchartWH(width, height)
+  toptip1ref2.value.setchartWH(width, height)
+  toptip1ref3.value.setchartWH(width, height)
+  toptip1ref4.value.setchartWH(width, height)
+  toptip1ref5.value.setchartWH(width, height)
+  toptip1ref6.value.setchartWH(width, height)
+}
+function guagebox(width: any, height: any) {
+  if (!MTTFref.value && !imgRef.value) return
+  imgRef.value.setchartWH(width, height)
+  // progressref1.value.setchartWH(width,height)
+  // progressref2.value.setchartWH(width,height)
+  MTTFref.value.setchartWH(width, height)
+}
+function contrasttbox(width: any, height: any) {
+  if (!contrastref.value && !timeguaguref.value) return
+  timeguaguref.value.setchartWH(width, height)
+  contrastref.value.setchartWH(width, height)
+}
+async function gatdeviceStatusInfoMFfun() {
+  let result: any = await gatdeviceStatusInfoMF({ id: route.params.dev })
+  handle.value = result.data.handle
+  if (result.code == 200) {
+    setdata(result.data)
   }
-  function backrouter(){
-    router.push({
-    name:'Mechanicschild',
-    params:{
-      id:store.page||route.params.id
+}
+function setdata(val: any) {
+
+
+  let data = {
+    name: val.name, //设备名称
+    status: val.status == 'H_E_STOP' ? t('messages.STOP') : val.status == 'H_OFF' ? t('messages.Standby') : val.status == 'H_ON' ? t('messages.work') : t('messages.halt'), //设备状态
+    starttime: val.ontime,//启动时长
+    endtime: val.offtime,//待机时长
+    stoptime: val.stoptime,//急停时长
+    data: '2020-05-06',//采购日期
+    src: imgurlAddXhr(val.data),//设备图片
+    timeguagu: Math.round(Math.abs((val.ontime) / (val.ontime + val.offtime + val.stoptime) * 100)) || 0,//时间稼动率
+    MTBF: 2724,//MTBF
+    MTTR: 169,//MTTR
+    MTTF: 2555,//MTTF
+  }
+  toptip1ref1.value.setData({ title: t('messages.DevName'), value: data.name })
+  toptip1ref2.value.setData({ title: t('messages.procureDate'), value: data.data })
+  toptip1ref3.value.setData({ title: t('messages.DevStatus'), value: data.status })
+  toptip1ref4.value.setData({ title: t('messages.workTime'), value: data.starttime })
+  toptip1ref5.value.setData({ title: t('messages.StandbyTime'), value: data.endtime })
+  toptip1ref6.value.setData({ title: t('messages.haltTime'), value: data.stoptime })
+  timeguaguref.value.setData(data.timeguagu)
+  imgRef.value.setData(data.src)
+  // progressref1.value.setData(data.MTBF)
+  // progressref2.value.setData(data.MTTR)
+  MTTFref.value.setData({ title: data.name, value: { MTTF: data.MTTF, MTBF: data.MTBF, MTTR: data.MTTR } })
+  contrastref.value.setData({ title: [t('messages.firing'), t('messages.Standby'), t('messages.STOP')], value: [data.starttime, data.endtime, data.stoptime] })
+}
+function backrouter() {
+  router.push({
+    name: 'Mechanicschild',
+    params: {
+      id: store.page || route.params.id
     }
   })
-  }
-  // 
-  onMounted(() => {
-    let contentBox=Acontent.value
-    // let Timedombox=Timedom.value
-    window.document.title=t('messages.machineryDevStatus')
-    WH(contentBox)
+}
+// 
+onMounted(() => {
+  let contentBox = Acontent.value
+  // let Timedombox=Timedom.value
+  window.document.title = t('messages.machineryDevStatus')
+  WH(contentBox)
 
-    window.addEventListener('resize',()=>{
-      if(time.value){
-        clearTimeout(time.value)
-        time.value=null
-      }
-      time.value = setTimeout(() => {WH(contentBox)
-      }, 1000);
-    })
-    gatdeviceStatusInfoMFfun()
+  window.addEventListener('resize', () => {
+    if (time.value) {
+      clearTimeout(time.value)
+      time.value = null
+    }
+    time.value = setTimeout(() => {
+      WH(contentBox)
+    }, 1000);
   })
+  gatdeviceStatusInfoMFfun()
+})
+
+onUnmounted(() => {
+  clearTimeout(time)
+})
+
+</script>
   
-  onUnmounted(() => {
-    clearTimeout(time)
-  })
-  
-  </script>
-  
-  <style module>
-  .container {
-    height: 1080px;
+<style module>
+.container {
+  height: 1080px;
   width: 1920px;
-    color: #20aec5;
-    background-color: #100c2a;
-  }
-  </style>
+  color: #20aec5;
+  background-color: #100c2a;
+}
+</style>
   
-  <style scoped>
-  .title {
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    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;
-    flex-direction: column;
-    justify-content: space-between;
-    align-items: center;
-  }
-  .left{
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-around;
-    align-items: flex-end;
-  }
+<style scoped>
+.title {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+}
 
-  .right{
-    margin-right: 30px;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-    align-items: flex-end;
-  }
-  </style>
+.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;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.left {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  align-items: flex-end;
+}
+
+.right {
+  margin-right: 30px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+</style>
   
   
-  <style>
-  body {
-    
-    /* --content:calc(100vh - var(--header)) */
-    overflow: hidden !important;
-    -ms-overflow-style: none; /* IE + Edge */
-    scrollbar-width: none; /* Firefox */
-  }
-  ::-webkit-scrollbar {
-    display: none;
-  }
-  </style>
+<style>
+body {
+
+  /* --content:calc(100vh - var(--header)) */
+  overflow: hidden !important;
+  -ms-overflow-style: none;
+  /* IE + Edge */
+  scrollbar-width: none;
+  /* Firefox */
+}
+
+::-webkit-scrollbar {
+  display: none;
+}</style>
   
\ No newline at end of file
diff --git a/src/views/Mechanics/indexNew.vue b/src/views/Mechanics/indexNew.vue
index 1f09aa4..2d6a2e6 100644
--- a/src/views/Mechanics/indexNew.vue
+++ b/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 + '%'
       ]
     })