<template>
|
<div class="eqpBox">
|
<div class="eqpRow">
|
<div class="eqpImage">
|
<div class="fault">机器故障：机器貌似有一点点故障</div>
|
<div class="eqpName">{{ eqp.name }}</div>
|
</div>
|
<div class="progress"></div>
|
|
<div class="realData"></div>
|
<div class="realChart"></div>
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { router } from '/@/router'
|
import { ref } from 'vue'
|
// import { Progress } from 'ant-design-vue'
|
// import * as echarts from 'echarts'
|
import { defHttp } from '/@/utils/http/axios'
|
import { queryById } from '../api/DryEquipment.api'
|
import { dryEquipment } from '../dataDefine/DryEquipment.data'
|
import { useUserStore } from '/@/store/modules/user'
|
|
const eqp = ref({} as dryEquipment)
|
const userStore = useUserStore()
|
function queryEqp() {
|
queryById({ id: router.currentRoute.value.params.id }).then((res) => {
|
// console.log(`output->res`, res)
|
eqp.value = res
|
queryRealTime()
|
})
|
}
|
|
function queryRealTime() {
|
let tenantId = userStore.getTenant
|
let eqpCode = eqp.value.code
|
let queryRealTimeUrl = '/dry/real/getRealTimeData'
|
defHttp.get({ url: queryRealTimeUrl, params: { tenantid: tenantId, machineid: eqpCode } }).then((res) => {
|
console.log(`output->res`, res)
|
})
|
}
|
|
queryEqp()
|
</script>
|
|
<style scoped>
|
.eqpBox {
|
height: 100%;
|
}
|
.eqpRow {
|
display: flex;
|
flex-wrap: wrap;
|
}
|
.eqpImage {
|
height: 420px;
|
width: 800px;
|
|
background-image: url('../../../assets/images/dry/ganzaoji-z.png');
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
background-position: 20px 0px;
|
flex-grow: 0;
|
flex-shrink: 0;
|
}
|
.progress {
|
height: 420px;
|
width: 800px;
|
background: salmon;
|
flex-grow: 0;
|
flex-shrink: 0;
|
}
|
.realData {
|
width: 800px;
|
height: 420px;
|
background: lawngreen;
|
flex-grow: 0;
|
flex-shrink: 0;
|
}
|
.realChart {
|
width: 800px;
|
height: 420px;
|
background: gold;
|
flex-grow: 0;
|
flex-shrink: 0;
|
}
|
|
.fault {
|
padding: 10px;
|
height: 60px;
|
font-size: 26px;
|
width: 100%;
|
text-align: right;
|
color: red;
|
}
|
.eqpName {
|
text-align: center;
|
font-size: 26px;
|
font-weight: bold;
|
height: 40px;
|
width: 236px;
|
margin-top: 80px;
|
margin-left: 249px;
|
}
|
</style>
|
