<template>
|
<div class="full-screen">
|
<div class="container">
|
<!--左侧图表区域-->
|
<div class="left-col">
|
<div class="col-content">
|
<div class="content-title">{{workshopDetails.workshopName}}#设备情况</div>
|
<workshop-device-overview ref="workshopDeviceOverviewRef" :workshopName="workshopDetails.workshopName"
|
:currentProductionId="currentProductionId"
|
:equipmentStatusList="equipmentStatusList" :toDecimal2NoZero="toDecimal2NoZero"/>
|
</div>
|
<div class="col-content">
|
<div class="content-title">设备月利用率趋势</div>
|
<month-utilization-rate-trend :currentProductionId="currentProductionId"
|
:toDecimal2NoZero="toDecimal2NoZero"/>
|
</div>
|
<div class="col-content">
|
<div class="content-title">设备周利用率趋势</div>
|
<week-utilization-rate-trend ref="weekRateTrendRef" :currentProductionId="currentProductionId"
|
:toDecimal2NoZero="toDecimal2NoZero"/>
|
</div>
|
<div class="col-content">
|
<div class="content-title">设备日利用率趋势</div>
|
<day-utilization-rate-trend ref="dayRateTrendRef" :currentProductionId="currentProductionId"
|
:toDecimal2NoZero="toDecimal2NoZero"/>
|
</div>
|
<div class="col-content">
|
<div class="content-title">设备报警信息</div>
|
<device-alarm-info ref="deviceAlarmInfoRef" :currentProductionId="currentProductionId"/>
|
</div>
|
</div>
|
|
<!--右侧拖拽区域-->
|
<div class="right-col">
|
<device-drag-layout ref="deviceDragLayoutRef" :currentProductionId="currentProductionId"
|
:equipmentStatusList="equipmentStatusList"
|
:getImgView="getImgView" @handleTimeIntervalForShortOpen="handleTimeIntervalForShortOpen"/>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { getFileAccessHttpUrl } from '@/api/manage'
|
import signageApi from '@/api/signage'
|
import WorkshopDeviceOverview from './modules/WorkshopSignage/WorkshopDeviceOverview'
|
import WeekUtilizationRateTrend from './modules/WorkshopSignage/WeekUtilizationRateTrend'
|
import DayUtilizationRateTrend from './modules/WorkshopSignage/DayUtilizationRateTrend'
|
import MonthUtilizationRateTrend from './modules/WorkshopSignage/MonthUtilizationRateTrend'
|
import DeviceAlarmInfo from './modules/WorkshopSignage/DeviceAlarmInfo'
|
import DeviceDragLayout from './modules/WorkshopSignage/DeviceDragLayout'
|
|
export default {
|
name: 'WorkshopSignage',
|
components: {
|
DeviceDragLayout,
|
DeviceAlarmInfo,
|
MonthUtilizationRateTrend,
|
DayUtilizationRateTrend,
|
WeekUtilizationRateTrend,
|
WorkshopDeviceOverview
|
},
|
data() {
|
return {
|
currentProductionId: '',
|
workshopDetails: {}, // 车间详细信息,
|
equipmentStatusList: [
|
{
|
label: '正常运行',
|
value: [3, 23],
|
statusImage: require('@/assets/WorskhopSignage/stateImg_green.gif')
|
},
|
{
|
label: '待机',
|
value: [1, 2],
|
statusImage: require('@/assets/WorskhopSignage/stateImg_yellow.gif')
|
},
|
{
|
label: '报警',
|
value: [22],
|
statusImage: require('@/assets/WorskhopSignage/stateImg_red.gif')
|
},
|
{
|
label: '关机',
|
value: [null, 0],
|
statusImage: require('@/assets/WorskhopSignage/stateImg_gray.gif')
|
}
|
],
|
timeIntervalForShortTime: null,
|
timeIntervalForLongTime: null
|
}
|
},
|
created() {
|
if (!this.$route.params.productionId) return
|
// 在此处获取路由参数是为了传递参数给子组件，若放在mounted中则无法传递给子组件
|
this.currentProductionId = this.$route.params.productionId
|
},
|
mounted() {
|
if (!this.$route.params.productionId) return
|
// 在mounted中该调用此方法是为了获取dom元素
|
this.getWorkshopDetailsByApi()
|
|
this.timeIntervalForShortTime = setInterval(() => {
|
this.$refs.workshopDeviceOverviewRef.getDeviceStatusCountByApi()
|
this.$refs.deviceAlarmInfoRef.getDeviceAlarmInfoByApi()
|
this.$refs.deviceDragLayoutRef.getDeviceListByApi()
|
}, 1000 * 60)
|
|
this.timeIntervalForLongTime = setInterval(() => {
|
this.$refs.weekRateTrendRef.getChartDataByApi()
|
this.$refs.dayRateTrendRef.getChartDataByApi()
|
}, 1000 * 60 * 60)
|
},
|
beforeDestroy() {
|
if (this.timeIntervalForShortTime || this.timeIntervalForLongTime) {
|
clearInterval(this.timeIntervalForShortTime)
|
clearInterval(this.timeIntervalForLongTime)
|
this.timeIntervalForShortTime = this.timeIntervalForLongTime = null
|
}
|
},
|
methods: {
|
// 通过车间Id调用接口获取车间详细信息
|
getWorkshopDetailsByApi() {
|
const that = this
|
signageApi.getWorkshopDetailByWorkshopIdApi(that.currentProductionId).then((res) => {
|
if (!res.success) return
|
that.workshopDetails = res.result ? res.result : {}
|
let workshopDrawingArea = document.querySelector('.right-col')
|
workshopDrawingArea.style.backgroundImage = `url(${this.getImgView(that.workshopDetails.backgroundImage)})`
|
})
|
},
|
|
/**
|
* 控制短期定时任务开启与关闭
|
* @param checked 右下角功能switch开关状态
|
*/
|
handleTimeIntervalForShortOpen(checked) {
|
if (checked) {
|
clearInterval(this.timeIntervalForShortTime)
|
this.timeIntervalForShortTime = null
|
console.log('暂停计时器', this.timeIntervalForShortTime)
|
} else {
|
this.timeIntervalForShortTime = setInterval(() => {
|
this.$refs.workshopDeviceOverviewRef.getDeviceStatusCountByApi()
|
this.$refs.deviceAlarmInfoRef.getDeviceAlarmInfoByApi()
|
this.$refs.deviceDragLayoutRef.getDeviceListByApi()
|
}, 1000 * 60)
|
}
|
},
|
|
// 保留两位小数
|
toDecimal2NoZero(x) {
|
const f = Math.round(x * 100) / 100
|
return f.toString()
|
},
|
|
/**
|
* 图片预览
|
* @param text 图片地址
|
*/
|
getImgView(text) {
|
if (text && text.indexOf(',') > 0) {
|
text = text.substring(0, text.indexOf(','))
|
}
|
return getFileAccessHttpUrl(text)
|
}
|
}
|
}
|
</script>
|
|
<style lang="less">
|
.full-screen {
|
height: 1080px;
|
background-color: #000;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
font-family: '微软雅黑';
|
|
.container {
|
width: 100%;
|
height: 100%;
|
display: flex;
|
/*justify-content: space-between;*/
|
align-items: center;
|
overflow: auto;
|
flex-wrap: nowrap;
|
|
.left-col {
|
width: 412px;
|
flex-shrink: 0;
|
/*flex: 1;*/
|
height: 100%;
|
display: flex;
|
padding: 0.5%;
|
flex-direction: column;
|
justify-content: space-between;
|
|
.col-content {
|
width: 100%;
|
height: 19.5%;
|
border: 0.1vw solid #666;
|
color: #fff;
|
display: flex;
|
flex-direction: column;
|
|
.content-title {
|
font-size: 0.9vw;
|
padding: 1% 5%;
|
}
|
|
/*.content-footer-container {*/
|
/*height: 25%;*/
|
|
/*.content-footer {*/
|
/*font-size: 0.7vw;*/
|
/*padding-left: 5%;*/
|
/*height: 40%;*/
|
/*}*/
|
/*}*/
|
|
.chart-container {
|
flex: 1;
|
|
/deep/ div:first-child {
|
width: 100% !important;
|
height: 100% !important;
|
}
|
|
/deep/ canvas {
|
width: 100% !important;
|
height: 100% !important;
|
}
|
}
|
}
|
}
|
|
.right-col {
|
position: relative;
|
flex-shrink: 0;
|
width: 1500px;
|
height: 100%;
|
/*background-image: url("../../../assets/WorskhopSignage/103.png");*/
|
background-color: #000;
|
background-size: 100% 100%;
|
background-repeat: no-repeat;
|
overflow: hidden;
|
}
|
}
|
}
|
</style>
|
