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/modules/WorkshopSignage/EquipmentLayout.vue | 398 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 398 insertions(+), 0 deletions(-)
diff --git a/src/views/mdc/base/modules/WorkshopSignage/EquipmentLayout.vue b/src/views/mdc/base/modules/WorkshopSignage/EquipmentLayout.vue
new file mode 100644
index 0000000..820913f
--- /dev/null
+++ b/src/views/mdc/base/modules/WorkshopSignage/EquipmentLayout.vue
@@ -0,0 +1,398 @@
+<template>
+ <div class="equipment-layout-container">
+ <div v-for="item in dataSource" :key="item.equipmentId" class="equipment_container"
+ :id="'equipment_'+item.equipmentId">
+ <!--<img-->
+ <!--:src="require(`@/assets/signage/device${equipmentList.find(equipment=>equipment.equipmentId===item.equipmentId).type}.png`)">-->
+ <div>
+ <span :style="{backgroundColor:getStatusColor(item.oporation)}"></span>
+ <span>{{item.equipmentId}}</span>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+ import signageApi from '@/api/signage'
+
+ export default {
+ name: 'EquipmentLayout',
+ components: {},
+ props: {
+ deviceStatusList: {
+ type: Array
+ }
+ },
+ data() {
+ return {
+ dataSource: [],
+ equipmentList: [
+ {
+ type: 4,
+ equipmentId: '69'
+ },
+ {
+ type: 4,
+ equipmentId: '68'
+ },
+ {
+ type: 4,
+ equipmentId: '67'
+ },
+ {
+ type: 3,
+ equipmentId: '66'
+ },
+ {
+ type: 3,
+ equipmentId: '65'
+ },
+ {
+ type: 3,
+ equipmentId: '64'
+ },
+ {
+ type: 2,
+ equipmentId: '71'
+ },
+ {
+ type: 2,
+ equipmentId: '72'
+ },
+ {
+ type: 2,
+ equipmentId: '73'
+ },
+ {
+ type: 2,
+ equipmentId: '74'
+ },
+ {
+ type: 2,
+ equipmentId: '75'
+ },
+ {
+ type: 1,
+ equipmentId: '76'
+ },
+ {
+ type: 1,
+ equipmentId: '77'
+ },
+ {
+ type: 1,
+ equipmentId: '78'
+ },
+ {
+ type: 1,
+ equipmentId: '79'
+ },
+ {
+ type: 1,
+ equipmentId: '80'
+ },
+ {
+ type: 7,
+ equipmentId: '95'
+ },
+ {
+ type: 8,
+ equipmentId: '84'
+ },
+ {
+ type: 8,
+ equipmentId: '83'
+ },
+ {
+ type: 8,
+ equipmentId: '82'
+ },
+ {
+ type: 8,
+ equipmentId: '81'
+ },
+ {
+ type: 5,
+ equipmentId: '58'
+ },
+ {
+ type: 5,
+ equipmentId: '57'
+ },
+ {
+ type: 5,
+ equipmentId: '56'
+ },
+ {
+ type: 5,
+ equipmentId: '55'
+ },
+ {
+ type: 6,
+ equipmentId: '59'
+ },
+ {
+ type: 6,
+ equipmentId: '60'
+ },
+ {
+ type: 6,
+ equipmentId: '61'
+ },
+ {
+ type: 6,
+ equipmentId: '62'
+ },
+ {
+ type: 6,
+ equipmentId: '63'
+ }
+ ]
+ }
+ },
+ methods: {
+ //璋冪敤鎺ュ彛鑾峰彇璁惧鐘舵�佸垪琛�
+ getEquipmentStatusByApi() {
+ const that = this
+ signageApi.getEquipmentStatusApi()
+ .then(res => {
+ if (res.success) that.dataSource = res.result.equipmentStatusList
+ })
+ },
+
+ /**
+ * 鑾峰彇鐘舵�侀鑹�
+ * @param operation 鐘舵�佺爜
+ * @returns {*} 棰滆壊鐮�
+ */
+ getStatusColor(operation) {
+ const { deviceStatusList } = this
+ switch (operation) {
+ case 3:
+ return deviceStatusList.find(item => item.label === '杩愯').color
+ case 2:
+ return deviceStatusList.find(item => item.label === '寰呮満').color
+ case 22:
+ return deviceStatusList.find(item => item.label === '鎶ヨ').color
+ case 0:
+ return deviceStatusList.find(item => item.label === '鍏虫満').color
+ }
+ }
+ }
+ }
+</script>
+
+<style scoped lang="less">
+ .equipment-layout-container {
+ position: relative;
+ background-image: url("../../../../../assets/signage/layout2.png");
+ background-repeat: no-repeat;
+ background-size: 100% 100%;
+
+ .equipment_container {
+ position: absolute;
+ font-size: 1vw;
+
+ img {
+ width: 3vw;
+ height: 3vw;
+ }
+
+ & > div {
+ display: flex;
+ align-items: center;
+
+ span:first-child {
+ width: 0.8vw;
+ height: 0.8vw;
+ border: 1px solid #eee;
+ margin-right: 5%;
+ }
+ }
+ }
+ }
+
+ div[id^='equipment_'] {
+ display: none;
+ }
+
+ #equipment_95 {
+ display: block;
+ top: 55%;
+ right: 36%;
+ }
+
+ #equipment_84 {
+ display: block;
+ top: 55%;
+ right: 27%;
+ }
+
+ #equipment_83 {
+ display: block;
+ top: 55%;
+ right: 19%;
+ }
+
+ #equipment_82 {
+ display: block;
+ top: 55%;
+ right: 11%;
+ }
+
+ #equipment_81 {
+ display: block;
+ top: 55%;
+ right: 3%;
+ }
+
+ #equipment_80 {
+ display: block;
+ top: 93%;
+ left: 44%;
+ }
+
+ #equipment_79 {
+ display: block;
+ top: 93%;
+ left: 34%;
+ }
+
+ #equipment_78 {
+ display: block;
+ top: 93%;
+ left: 24%;
+ }
+
+ #equipment_77 {
+ display: block;
+ top: 93%;
+ left: 13%;
+ }
+
+ #equipment_76 {
+ display: block;
+ top: 93%;
+ left: 3%;
+ }
+
+ #equipment_75 {
+ display: block;
+ top: 57%;
+ left: 45%;
+ }
+
+ #equipment_74 {
+ display: block;
+ top: 57%;
+ left: 35%;
+ }
+
+ #equipment_73 {
+ display: block;
+ top: 57%;
+ left: 25%;
+ }
+
+ #equipment_72 {
+ display: block;
+ top: 57%;
+ left: 14%;
+ }
+
+ #equipment_71 {
+ display: block;
+ top: 57%;
+ left: 4%;
+ }
+
+ #equipment_69 {
+ display: block;
+ top: 40%;
+ left: 2%;
+ }
+
+ #equipment_68 {
+ display: block;
+ top: 40%;
+ left: 10%;
+ }
+
+ #equipment_67 {
+ display: block;
+ top: 40%;
+ left: 18%;
+ }
+
+ #equipment_66 {
+ display: block;
+ top: 40%;
+ left: 28%;
+ }
+
+ #equipment_65 {
+ display: block;
+ top: 40%;
+ left: 37%;
+ }
+
+ #equipment_64 {
+ display: block;
+ top: 40%;
+ left: 46%;
+ }
+
+ #equipment_63 {
+ display: block;
+ top: 15%;
+ right: 4%;
+ }
+
+ #equipment_62 {
+ display: block;
+ top: 94%;
+ right: 4%;
+ }
+
+ #equipment_61 {
+ display: block;
+ top: 94%;
+ right: 14%;
+ }
+
+ #equipment_60 {
+ display: block;
+ top: 94%;
+ right: 25%;
+ }
+
+ #equipment_59 {
+ display: block;
+ top: 94%;
+ right: 36%;
+ }
+
+ #equipment_58 {
+ display: block;
+ top: 81%;
+ right: 36%;
+ }
+
+ #equipment_57 {
+ display: block;
+ top: 81%;
+ right: 25%;
+ }
+
+ #equipment_56 {
+ display: block;
+ top: 81%;
+ right: 14%;
+ }
+
+ #equipment_55 {
+ display: block;
+ top: 81%;
+ right: 4%;
+ }
+</style>
\ No newline at end of file
--
Gitblit v1.9.3