修改机械分厂设备三级
This commit is contained in:
hzz
parent
71823c7879
commit
84428dba0a
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -171,7 +171,7 @@ async function reqDeviceTotelListMFfun() {
|
||||
item.name,
|
||||
item.dept,
|
||||
compare[item.status] ? compare[item.status] : '停机',
|
||||
item.activation + '%',
|
||||
item.activation,
|
||||
// item.failure + '%'
|
||||
]
|
||||
})
|
||||
|
||||
Loading…
Reference in New Issue
Block a user