<template>
|
<div class="full-screen-container">
|
<!--页头区域-->
|
<header class="page-header">
|
<div></div>
|
|
<div class="header-center">中科航星车间智慧看板</div>
|
|
<div class="header-right">{{currentDateTime}}</div>
|
</header>
|
|
<div class="content-container">
|
<div class="content-left">
|
<div class="content-card">
|
<div class="card-title">上周开机率</div>
|
<OpenRateChart :dataSource="efficiencyData.openingRateList"/>
|
</div>
|
<div class="content-card">
|
<div class="card-title">上周利用率</div>
|
<UtilizationRateChart :dataSource="efficiencyData.processingRateList"/>
|
</div>
|
<div class=" content-card">
|
<div class="card-title">上周班次利用率</div>
|
<ClassUtilizationRateChart :dataSource="efficiencyData.shiftRateList"/>
|
</div>
|
</div>
|
|
<div class="content-center">
|
<div class="device-container content-card">
|
<div class="card-title">
|
<div>全厂设备状态</div>
|
<div class="status-container">
|
<div v-for="(item,index) in deviceStatusList" :key="index">
|
<span :style="{backgroundColor:item.color}"></span>
|
<span :style="{color:item.color}">{{item.label}}</span>
|
</div>
|
</div>
|
</div>
|
<EquipmentLayout ref="equipmentLayoutRef" :deviceStatusList="deviceStatusList"/>
|
</div>
|
<div class="workshop-alarm-info content-card">
|
<div class="card-title">全厂报警信息</div>
|
<WorkshopAlarmInfoTable ref="alarmInfoRef"/>
|
</div>
|
</div>
|
|
<div class="content-right">
|
<div class="content-card">
|
<div class="card-title">前七天利用率排名</div>
|
<UtilizationRateRankChart ref="rateRankRef"/>
|
</div>
|
<div class=" content-card">
|
<div class="card-title">全厂平均运行效率</div>
|
<WorkshopEfficiencyAverageChart ref="averageChartRef" :dataSource="efficiencyData"/>
|
</div>
|
<div class="workshop-equipment-status content-card">
|
<div class="card-title">全厂当前设备状态</div>
|
<WorkshopEquipmentStatusChart ref="equipmentStatusChartRef" :deviceStatusList="deviceStatusList"/>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import signageApi from '@/api/signage'
|
import OpenRateChart from './modules/WorkshopSignage/OpenRateChart'
|
import UtilizationRateChart from './modules/WorkshopSignage/UtilizationRateChart'
|
import ClassUtilizationRateChart from './modules/WorkshopSignage/ClassUtilizationRateChart'
|
import WorkshopAlarmInfoTable from './modules/WorkshopSignage/WorkshopAlarmInfoTable'
|
import WorkshopEfficiencyAverageChart from './modules/WorkshopSignage/WorkshopEfficiencyAverageChart'
|
import UtilizationRateRankChart from './modules/WorkshopSignage/UtilizationRateRankChart'
|
import WorkshopEquipmentStatusChart from './modules/WorkshopSignage/WorkshopEquipmentStatusChart'
|
import EquipmentLayout from './modules/WorkshopSignage/EquipmentLayout'
|
|
export default {
|
components: {
|
EquipmentLayout,
|
WorkshopEquipmentStatusChart,
|
UtilizationRateRankChart,
|
WorkshopEfficiencyAverageChart,
|
WorkshopAlarmInfoTable,
|
ClassUtilizationRateChart,
|
UtilizationRateChart,
|
OpenRateChart,
|
},
|
data() {
|
return {
|
currentDateTime: '',
|
efficiencyData: {},
|
shortTimingAcquisition: null, // 高频刷新
|
longTimingAcquisition: null, // 低频刷新
|
dateTimer: null,//定时获取当前时间
|
deviceStatusList: [
|
{
|
label: '运行',
|
color: '#00EE00'
|
},
|
{
|
label: '待机',
|
color: '#FFFF00'
|
},
|
{
|
label: '报警',
|
color: '#FF0000'
|
},
|
{
|
label: '关机',
|
color: '#A8A8A8'
|
}
|
]// 设备状态指示灯列表，
|
}
|
},
|
mounted() {
|
// 禁止用户选中内容
|
document.onselectstart = () => false
|
this.shortIntervalRefreshData()
|
this.longIntervalRefreshData()
|
this.dateTimer = setInterval(() => this.$nextTick(() => this.getCurrentDateTime()), 1000)
|
},
|
beforeDestroy() {
|
// 确保销毁定时器、事件及回收资源
|
clearInterval(this.shortTimingAcquisition)
|
clearInterval(this.dateTimer)
|
this.shortTimingAcquisition = null
|
this.dateTimer = null
|
},
|
methods: {
|
getEfficiencyDataByApi() {
|
const that = this
|
signageApi.getEfficiencyDataApi()
|
.then(res => {
|
if (res.success) that.efficiencyData = res.result
|
})
|
},
|
|
|
// 获取当前时间
|
getCurrentDateTime() {
|
let date = new Date()
|
let year = date.getFullYear() //获取当前年份
|
let mon = date.getMonth() + 1 //获取当前月份
|
let day = date.getDate() //获取当前日
|
// var day=date.getDay(); //获取当前星期几
|
let hour = date.getHours() //获取小时
|
let min = date.getMinutes() //获取分钟
|
let sec = date.getSeconds() //获取秒
|
if (mon < 10) mon = '0' + mon
|
if (day < 10) day = '0' + day
|
if (hour < 10) hour = '0' + hour
|
if (min < 10) min = '0' + min
|
if (sec < 10) sec = '0' + sec
|
this.currentDateTime = `${year}年${mon}月${day}日 ${hour}:${min}:${sec}`
|
},
|
|
/**
|
* 高频刷新数据 目前设置为5s
|
* @param intervalSecond 频率间隔时间（秒）
|
*/
|
shortIntervalRefreshData(intervalSecond = 0) {
|
this.shortTimingAcquisition = window.setTimeout(() => {
|
this.$refs.equipmentLayoutRef.getEquipmentStatusByApi()
|
this.$refs.alarmInfoRef.getWorkshopAlarmInfoByApi()
|
this.$refs.equipmentStatusChartRef.getWorkshopEquipmentStatusByApi()
|
this.shortIntervalRefreshData(5)
|
}, intervalSecond * 1000)
|
},
|
|
/**
|
* 低频刷新数据 目前设置为1h
|
* @param intervalSecond 频率间隔时间（秒）
|
*/
|
longIntervalRefreshData(intervalSecond = 0) {
|
this.longTimingAcquisition = window.setTimeout(() => {
|
this.getEfficiencyDataByApi()
|
this.$refs.rateRankRef.getUtilizationRateRankByApi()
|
this.longIntervalRefreshData(60 * 60)
|
}, intervalSecond * 1000)
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="less">
|
@font-face {
|
font-family: 'wgsFont';
|
/*src: url('/monitor/webfontkit/ds-digib-webfont.eot'); !* IE9 Compat Modes *!*/
|
src: url('../../../assets/webfontkit/ds-digib-webfont.woff') format('woff'), /* Modern Browsers */ url('../../../assets/webfontkit/ds-digib-webfont.ttf') format('truetype'), /* Safari, Android, iOS */ url('../../../assets/webfontkit/ds-digib-webfont.svg') format('svg'); /* Legacy iOS */
|
}
|
|
.full-screen-container {
|
height: 100%;
|
background-image: url("../../../assets/signage/bj.png");
|
background-size: 100% 100%;
|
background-repeat: no-repeat;
|
color: #eee;
|
display: flex;
|
flex-direction: column;
|
|
.page-header {
|
height: 9%;
|
display: flex;
|
|
& > div {
|
width: 33.33%;
|
flex: 1;
|
}
|
|
.header-center {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
font-weight: 500;
|
-webkit-text-stroke: 0.1px #000000;
|
background: -webkit-linear-gradient(top, #68edff 20%, #0400ff);
|
-webkit-background-clip: text;
|
-webkit-text-fill-color: transparent;
|
font-size: 2.2vw;
|
letter-spacing: 0.3vw;
|
}
|
|
.header-right {
|
width: 100%;
|
height: 100%;
|
font-family: wgsFont;
|
font-size: 2vw;
|
text-align: center;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
}
|
|
.content-container {
|
flex: 1;
|
padding: 0.8%;
|
display: flex;
|
justify-content: space-between;
|
|
.content-left {
|
width: 25%;
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
|
& > div {
|
height: 32.8%;
|
}
|
}
|
|
.content-center {
|
width: 49%;
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
|
.device-container {
|
height: 75%;
|
}
|
|
.workshop-alarm-info {
|
height: 24.2%;
|
}
|
}
|
|
.content-right {
|
width: 25%;
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
|
& > div {
|
height: 32.8%;
|
}
|
}
|
|
.content-card {
|
border: 0.1vw solid #79b2e2;
|
display: flex;
|
flex-direction: column;
|
|
.card-title {
|
/*height: 13%;*/
|
background-image: url("../../../assets/signage/title.png");
|
background-size: 100% 100%;
|
background-repeat: no-repeat;
|
font-size: 1vw;
|
padding: 0.5% 0 0.5% 1%;
|
color: #7AA0CC;
|
font-weight: bold;
|
display: flex;
|
justify-content: space-between;
|
|
.status-container {
|
display: flex;
|
|
& > div {
|
display: flex;
|
align-items: center;
|
|
span:first-child {
|
width: 0.8vw;
|
height: 0.8vw;
|
border: 0.1vw solid #eee;
|
margin-right: 5%;
|
}
|
|
span {
|
width: 4vw;
|
}
|
}
|
}
|
}
|
|
& > div:last-child {
|
flex: 1;
|
display: flex;
|
overflow: hidden;
|
}
|
}
|
}
|
}
|
</style>
|
