From 54d11f9a2f395e021486e6a31912616274b3feda Mon Sep 17 00:00:00 2001
From: zhaowei <zhaowei>
Date: 星期一, 08 九月 2025 11:55:10 +0800
Subject: [PATCH] 车间智慧看板页面新增定时刷新功能
---
src/views/mdc/base/WorkshopSignage.vue | 326 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 326 insertions(+), 0 deletions(-)
diff --git a/src/views/mdc/base/WorkshopSignage.vue b/src/views/mdc/base/WorkshopSignage.vue
new file mode 100644
index 0000000..1414037
--- /dev/null
+++ b/src/views/mdc/base/WorkshopSignage.vue
@@ -0,0 +1,326 @@
+<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>
\ No newline at end of file
--
Gitblit v1.9.3