<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 :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 :currentProductionId="currentProductionId" :toDecimal2NoZero="toDecimal2NoZero"/>
|
</div>
|
<div class="col-content">
|
<div class="content-title">设备日利用率趋势</div>
|
<day-utilization-rate-trend :currentProductionId="currentProductionId" :toDecimal2NoZero="toDecimal2NoZero"/>
|
</div>
|
<div class="col-content">
|
<div class="content-title">设备报警信息</div>
|
<device-alarm-info/>
|
</div>
|
</div>
|
|
<!--右侧拖拽区域-->
|
<div class="right-col">
|
<device-drag-layout :currentProductionId="currentProductionId" :equipmentStatusList="equipmentStatusList"
|
:getImgView="getImgView"/>
|
</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')
|
}
|
],
|
deviceList: [],
|
isShowGuideline: false,
|
guidelineXTop: 0,
|
guidelineYLeft: 0,
|
isSwitchChecked: false,
|
isHasResizeOrDragDevice: false
|
}
|
},
|
created() {
|
if (!this.$route.params.productionId) return
|
this.currentProductionId = this.$route.params.productionId
|
},
|
mounted() {
|
this.getWorkshopDetailsByApi()
|
},
|
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)})`
|
})
|
},
|
|
// 保留两位小数
|
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 {
|
width: 100%;
|
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;
|
|
.left-col {
|
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;
|
width: 1500px;
|
height: 1080px;
|
/*background-image: url("../../../assets/WorskhopSignage/103.png");*/
|
background-color: #000;
|
background-size: 100% 100%;
|
background-repeat: no-repeat;
|
overflow: hidden;
|
|
.single-device {
|
position: absolute;
|
border: 1px solid transparent;
|
padding: 10px;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: space-between;
|
cursor: default;
|
|
&:active {
|
border: 1px solid #1890ff;
|
}
|
|
.device-status {
|
width: 100%;
|
height: 100%;
|
display: flex;
|
-webkit-align-items: flex-end;
|
-moz-align-items: flex-end;
|
-ms-align-items: flex-end;
|
|
.device-image {
|
background-size: 100% 100%;
|
background-repeat: no-repeat;
|
width: 100%;
|
height: 100%;
|
position: relative;
|
margin-bottom: 10px;
|
|
.status-image {
|
position: absolute;
|
top: 25%;
|
left: 25%;
|
background-size: 100% 100%;
|
background-repeat: no-repeat;
|
width: 50%;
|
height: 50%;
|
}
|
}
|
}
|
|
& > div:last-child {
|
color: #fff;
|
font-weight: bold;
|
font-size: 0.6vw;
|
}
|
}
|
|
.guideline {
|
position: absolute;
|
border: 1px dashed #fff;
|
}
|
|
.guidelineX {
|
width: 9999px;
|
left: 0;
|
}
|
|
.guidelineY {
|
top: 0;
|
height: 9999px;
|
}
|
|
form {
|
position: absolute;
|
right: 0;
|
bottom: 0.5%;
|
|
label {
|
color: #fff;
|
}
|
|
.ant-switch {
|
background-color: #999;
|
}
|
|
.ant-switch-checked {
|
background-color: #1890FF;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
