update 上下片数据
This commit is contained in:
		
							
								
								
									
										24
									
								
								src/assets/svg/IconStatus.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										24
									
								
								src/assets/svg/IconStatus.vue
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,24 @@
 | 
			
		||||
<!-- Icon: alert Icon -->
 | 
			
		||||
<script setup>
 | 
			
		||||
defineProps({
 | 
			
		||||
  color: {
 | 
			
		||||
    type: String,
 | 
			
		||||
    default: null,
 | 
			
		||||
  },
 | 
			
		||||
});
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<template>
 | 
			
		||||
  <svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg"
 | 
			
		||||
    xmlns:xlink="http://www.w3.org/1999/xlink">
 | 
			
		||||
    <title>状态icon</title>
 | 
			
		||||
    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
 | 
			
		||||
      <g id="郴州旗滨光伏光电玻璃" transform="translate(-641.167539, -519.090909)" :fill="color ?? '#24FF5E'" fill-rule="nonzero">
 | 
			
		||||
        <g id="状态icon" transform="translate(641.167539, 519.090909)">
 | 
			
		||||
          <path
 | 
			
		||||
            d="M21.6498582,4.55479956 C21.6463914,4.55050501 21.642058,4.54535155 21.6368579,4.54191591 C18.7967223,1.61303292 15.0188308,0 11,0 C6.98116924,0 3.20327766,1.61303292 0.362275449,4.54191591 C0.128269776,4.7824107 0,5.10278412 0,5.44377138 C0,5.78389972 0.127403089,6.10341423 0.361408761,6.34390902 C0.595414434,6.58440381 0.905688623,6.71753486 1.23676332,6.71753486 C1.56697132,6.71753486 1.87724551,6.58440381 2.11125118,6.34390902 C4.48510873,3.89687452 7.64158525,2.54924478 11,2.54924478 C14.3584147,2.54924478 17.515758,3.89773343 19.8887488,6.34476793 C20.1236212,6.58526272 20.4338954,6.71839377 20.7641034,6.71839377 C21.0943114,6.71839377 21.4054523,6.58526272 21.6377246,6.34476793 C21.8725969,6.10427314 22,5.78304081 22,5.44291247 C21.9991333,5.10879649 21.8760637,4.79443544 21.6498582,4.55479956 Z M10.9998918,22 C14.348751,22 17.0635378,19.3620338 17.0635378,16.1079376 C17.0635378,12.8538414 14.348751,10.2158752 10.9998918,10.2158752 C7.65103259,10.2158752 4.9362458,12.8538414 4.9362458,16.1079376 C4.9362458,19.3620338 7.65103259,22 10.9998918,22 Z M11,5.19640531 C8.47793886,5.19640531 6.10668137,6.16869139 4.32390482,7.9363281 C4.06909864,8.18884763 3.92869524,8.52382252 3.92869524,8.88027016 C3.92869524,9.23757671 4.06909864,9.5734105 4.32390482,9.82507112 C4.57784431,10.0767317 4.91585251,10.2158752 5.27552789,10.2158752 C5.63520328,10.2158752 5.97407816,10.0767317 6.22801765,9.82507112 C7.50291522,8.56161456 9.19815632,7.86589749 11,7.86589749 C12.8027104,7.86589749 14.4979515,8.56161456 15.7719824,9.82507112 C16.0267885,10.0767317 16.3647967,10.2158752 16.7253388,10.2158752 C17.0858809,10.2158752 17.4247558,10.0767317 17.6778286,9.82421221 C18.2030413,9.30285386 18.2013079,8.45682754 17.6778286,7.9363281 C15.8933186,6.1695503 13.5220611,5.19640531 11,5.19640531 Z"
 | 
			
		||||
            id="形状"></path>
 | 
			
		||||
        </g>
 | 
			
		||||
      </g>
 | 
			
		||||
    </g>
 | 
			
		||||
</svg></template>
 | 
			
		||||
							
								
								
									
										450
									
								
								src/pages/3D.vue
									
									
									
									
									
								
							
							
						
						
									
										450
									
								
								src/pages/3D.vue
									
									
									
									
									
								
							@@ -1,8 +1,29 @@
 | 
			
		||||
<!-- 三维页面 -->
 | 
			
		||||
<script setup>
 | 
			
		||||
import { useSettings } from '../store/settings'
 | 
			
		||||
import { computed } from 'vue';
 | 
			
		||||
import { useSettings } from '../store/settings';
 | 
			
		||||
import { useWsStore } from "../store";
 | 
			
		||||
import { ref, computed } from 'vue';
 | 
			
		||||
import Icon from '../assets/svg/IconStatus.vue';
 | 
			
		||||
 | 
			
		||||
const { settings } = useSettings();
 | 
			
		||||
const store = useWsStore();
 | 
			
		||||
const lines = ref({
 | 
			
		||||
  g1: null,
 | 
			
		||||
  g2: null,
 | 
			
		||||
  g3: null, // 钢3线
 | 
			
		||||
});
 | 
			
		||||
store.$subscribe((mutation, state) => {
 | 
			
		||||
  if (state.data2.lineDetailData && state.data2.lineDetailData.length == 3) {
 | 
			
		||||
    lines.value.g1 = state.data2.lineDetailData[0]
 | 
			
		||||
    lines.value.g2 = state.data2.lineDetailData[1]
 | 
			
		||||
    lines.value.g3 = state.data2.lineDetailData[2]
 | 
			
		||||
    console.log('g1: ', lines.value.g1)
 | 
			
		||||
    console.log('g2: ', lines.value.g2)
 | 
			
		||||
    console.log('g3: ', lines.value.g3)
 | 
			
		||||
  }
 | 
			
		||||
})
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
const props = defineProps({
 | 
			
		||||
  line: {
 | 
			
		||||
    type: Number,
 | 
			
		||||
@@ -11,266 +32,519 @@ const props = defineProps({
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
const eqStatus = computed(() => settings.eqStatus);
 | 
			
		||||
console.log('eqStatus', eqStatus.value)
 | 
			
		||||
const status = ref({
 | 
			
		||||
  'B2清洗机': '',
 | 
			
		||||
  'M1清洗机': 'error',
 | 
			
		||||
  'M1磨边机': 'warn'
 | 
			
		||||
  // ...
 | 
			
		||||
})
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<template>
 | 
			
		||||
  <div class="triple-page" :class="['line-' + line]">
 | 
			
		||||
    <div class="info-1" v-if="eqStatus && line == '1'">
 | 
			
		||||
      <div class="info">
 | 
			
		||||
        <h1>M7上片</h1>
 | 
			
		||||
        <h1>
 | 
			
		||||
          <Icon :color="status['M7上片'] == 'error' ? '#ff3737' : status['M7上片'] == 'warn' ? '#ffb524' : '#24ff5e'" />M7上片
 | 
			
		||||
        </h1>
 | 
			
		||||
      </div>
 | 
			
		||||
      <div class="info">
 | 
			
		||||
        <h1>M6上片</h1>
 | 
			
		||||
        <h1>
 | 
			
		||||
          <Icon :color="status['M6上片'] == 'error' ? '#ff3737' : status['M6上片'] == 'warn' ? '#ffb524' : '#24ff5e'" />M6上片
 | 
			
		||||
        </h1>
 | 
			
		||||
      </div>
 | 
			
		||||
      <div class="info">
 | 
			
		||||
        <h1>M7磨边机</h1>
 | 
			
		||||
        <h1>
 | 
			
		||||
          <Icon :color="status['M7磨边机'] == 'error' ? '#ff3737' : status['M7磨边机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
 | 
			
		||||
          M7磨边机
 | 
			
		||||
        </h1>
 | 
			
		||||
      </div>
 | 
			
		||||
      <div class="info">
 | 
			
		||||
        <h1>M6磨边机</h1>
 | 
			
		||||
        <h1>
 | 
			
		||||
          <Icon :color="status['M6磨边机'] == 'error' ? '#ff3737' : status['M6磨边机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
 | 
			
		||||
          M6磨边机
 | 
			
		||||
        </h1>
 | 
			
		||||
        <span v-if="lines.g3?.edgingInput">上片: {{ lines.g3.edgingInput }}</span>
 | 
			
		||||
        <span v-if="lines.g3?.edgingOutput">下片: {{ lines.g3.edgingOutput }}</span>
 | 
			
		||||
      </div>
 | 
			
		||||
      <div class="info">
 | 
			
		||||
        <h1>M7清洗机</h1>
 | 
			
		||||
        <h1>
 | 
			
		||||
          <Icon :color="status['M7清洗机'] == 'error' ? '#ff3737' : status['M7清洗机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
 | 
			
		||||
          M7清洗机
 | 
			
		||||
        </h1>
 | 
			
		||||
      </div>
 | 
			
		||||
      <div class="info">
 | 
			
		||||
        <h1>M6清洗机</h1>
 | 
			
		||||
        <h1>
 | 
			
		||||
          <Icon :color="status['M6清洗机'] == 'error' ? '#ff3737' : status['M6清洗机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
 | 
			
		||||
          M6清洗机
 | 
			
		||||
        </h1>
 | 
			
		||||
      </div>
 | 
			
		||||
    </div>
 | 
			
		||||
    <div class="info-2" v-if="eqStatus && line == '2'">
 | 
			
		||||
      <div class="info">
 | 
			
		||||
        <h1>Z7钻孔机</h1>
 | 
			
		||||
        <h1>
 | 
			
		||||
          <Icon :color="status['M4磨边机'] == 'error' ? '#ff3737' : status['M4磨边机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
 | 
			
		||||
          Z7钻孔机
 | 
			
		||||
        </h1>
 | 
			
		||||
      </div>
 | 
			
		||||
      <div class="info">
 | 
			
		||||
        <h1>Z6钻孔机</h1>
 | 
			
		||||
        <h1>
 | 
			
		||||
          <Icon :color="status['M4磨边机'] == 'error' ? '#ff3737' : status['M4磨边机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
 | 
			
		||||
          Z6钻孔机
 | 
			
		||||
        </h1>
 | 
			
		||||
        <span v-if="lines.g3?.drillingInput">上片: {{ lines.g3.drillingInput }}</span>
 | 
			
		||||
        <span v-if="lines.g3?.drillingOutput">下片: {{ lines.g3.drillingOutput }}</span>
 | 
			
		||||
      </div>
 | 
			
		||||
      <div class="info">
 | 
			
		||||
        <h1>S7清洗机</h1>
 | 
			
		||||
        <h1>
 | 
			
		||||
          <Icon :color="status['M4磨边机'] == 'error' ? '#ff3737' : status['M4磨边机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
 | 
			
		||||
          S7清洗机
 | 
			
		||||
        </h1>
 | 
			
		||||
      </div>
 | 
			
		||||
      <div class="info">
 | 
			
		||||
        <h1>S6清洗机</h1>
 | 
			
		||||
        <h1>
 | 
			
		||||
          <Icon :color="status['M4磨边机'] == 'error' ? '#ff3737' : status['M4磨边机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
 | 
			
		||||
          S6清洗机
 | 
			
		||||
        </h1>
 | 
			
		||||
      </div>
 | 
			
		||||
      <div class="info">
 | 
			
		||||
        <h1>S7前储片台</h1>
 | 
			
		||||
        <h1>
 | 
			
		||||
          <Icon :color="status['M4磨边机'] == 'error' ? '#ff3737' : status['M4磨边机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
 | 
			
		||||
          S7前储片台
 | 
			
		||||
        </h1>
 | 
			
		||||
      </div>
 | 
			
		||||
      <div class="info">
 | 
			
		||||
        <h1>S6前储片台</h1>
 | 
			
		||||
        <h1>
 | 
			
		||||
          <Icon :color="status['M4磨边机'] == 'error' ? '#ff3737' : status['M4磨边机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
 | 
			
		||||
          S6前储片台
 | 
			
		||||
        </h1>
 | 
			
		||||
      </div>
 | 
			
		||||
      <div class="info">
 | 
			
		||||
        <h1>S7丝印机</h1>
 | 
			
		||||
        <h1>
 | 
			
		||||
          <Icon :color="status['M4磨边机'] == 'error' ? '#ff3737' : status['M4磨边机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
 | 
			
		||||
          S7丝印机
 | 
			
		||||
        </h1>
 | 
			
		||||
      </div>
 | 
			
		||||
      <div class="info">
 | 
			
		||||
        <h1>S6丝印机</h1>
 | 
			
		||||
        <h1>
 | 
			
		||||
          <Icon :color="status['M4磨边机'] == 'error' ? '#ff3737' : status['M4磨边机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
 | 
			
		||||
          S6丝印机
 | 
			
		||||
        </h1>
 | 
			
		||||
        <span v-if="lines.g3?.silkInput">上片: {{ lines.g3.silkInput }}</span>
 | 
			
		||||
        <span v-if="lines.g3?.silkOutput">下片: {{ lines.g3.silkOutput }}</span>
 | 
			
		||||
      </div>
 | 
			
		||||
      <div class="info">
 | 
			
		||||
        <h1>S7固化炉</h1>
 | 
			
		||||
        <h1>
 | 
			
		||||
          <Icon :color="status['M4磨边机'] == 'error' ? '#ff3737' : status['M4磨边机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
 | 
			
		||||
          S7固化炉
 | 
			
		||||
        </h1>
 | 
			
		||||
      </div>
 | 
			
		||||
      <div class="info">
 | 
			
		||||
        <h1>S6固化炉</h1>
 | 
			
		||||
        <h1>
 | 
			
		||||
          <Icon :color="status['M4磨边机'] == 'error' ? '#ff3737' : status['M4磨边机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
 | 
			
		||||
          S6固化炉
 | 
			
		||||
        </h1>
 | 
			
		||||
        <span v-if="lines.g3?.solidificationInput">上片: {{ lines.g3.solidificationInput }}</span>
 | 
			
		||||
        <span v-if="lines.g3?.solidificationOutput">下片: {{ lines.g3.solidificationOutput }}</span>
 | 
			
		||||
      </div>
 | 
			
		||||
      <div class="info">
 | 
			
		||||
        <h1>S7后储片台</h1>
 | 
			
		||||
        <h1>
 | 
			
		||||
          <Icon :color="status['M4磨边机'] == 'error' ? '#ff3737' : status['M4磨边机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
 | 
			
		||||
          S7后储片台
 | 
			
		||||
        </h1>
 | 
			
		||||
      </div>
 | 
			
		||||
      <div class="info">
 | 
			
		||||
        <h1>S6后储片台</h1>
 | 
			
		||||
        <h1>
 | 
			
		||||
          <Icon :color="status['M4磨边机'] == 'error' ? '#ff3737' : status['M4磨边机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
 | 
			
		||||
          S6后储片台
 | 
			
		||||
        </h1>
 | 
			
		||||
      </div>
 | 
			
		||||
    </div>
 | 
			
		||||
    <div class="info-3" v-if="eqStatus && line == '3'">
 | 
			
		||||
      <div class="info">
 | 
			
		||||
        <h1>B1前储片台</h1>
 | 
			
		||||
        <h1>
 | 
			
		||||
          <Icon :color="status['B1前储片台'] == 'error' ? '#ff3737' : status['B1前储片台'] == 'warn' ? '#ffb524' : '#24ff5e'" />
 | 
			
		||||
          B1前储片台
 | 
			
		||||
        </h1>
 | 
			
		||||
      </div>
 | 
			
		||||
    </div>
 | 
			
		||||
    <div class="info-4" v-if="eqStatus && line == '4'">
 | 
			
		||||
      <div class="info">
 | 
			
		||||
        <h1>B2清洗机</h1>
 | 
			
		||||
        <h1>
 | 
			
		||||
          <Icon :color="status['B2清洗机'] == 'error' ? '#ff3737' : status['B2清洗机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
 | 
			
		||||
          B2清洗机
 | 
			
		||||
        </h1>
 | 
			
		||||
      </div>
 | 
			
		||||
      <div class="info">
 | 
			
		||||
        <h1>B2下片</h1>
 | 
			
		||||
        <h1>
 | 
			
		||||
          <Icon :color="status['B2下片'] == 'error' ? '#ff3737' : status['B2下片'] == 'warn' ? '#ffb524' : '#24ff5e'" />B2下片
 | 
			
		||||
        </h1>
 | 
			
		||||
      </div>
 | 
			
		||||
      <div class="info">
 | 
			
		||||
        <h1>B2后储片台</h1>
 | 
			
		||||
        <h1>
 | 
			
		||||
          <Icon :color="status['B2后储片台'] == 'error' ? '#ff3737' : status['B2后储片台'] == 'warn' ? '#ffb524' : '#24ff5e'" />
 | 
			
		||||
          B2后储片台
 | 
			
		||||
        </h1>
 | 
			
		||||
      </div>
 | 
			
		||||
    </div>
 | 
			
		||||
    <div class="info-5" v-if="eqStatus && line == '5'">
 | 
			
		||||
      <div class="info">
 | 
			
		||||
        <h1>M5上片</h1>
 | 
			
		||||
        <h1>
 | 
			
		||||
          <Icon :color="status['M5上片'] == 'error' ? '#ff3737' : status['M5上片'] == 'warn' ? '#ffb524' : '#24ff5e'" />
 | 
			
		||||
          M5上片
 | 
			
		||||
        </h1>
 | 
			
		||||
      </div>
 | 
			
		||||
      <div class="info">
 | 
			
		||||
        <h1>M4上片</h1>
 | 
			
		||||
        <h1>
 | 
			
		||||
          <Icon :color="status['M4上片'] == 'error' ? '#ff3737' : status['M4上片'] == 'warn' ? '#ffb524' : '#24ff5e'" />
 | 
			
		||||
          M4上片
 | 
			
		||||
        </h1>
 | 
			
		||||
      </div>
 | 
			
		||||
      <div class="info">
 | 
			
		||||
        <h1>M3上片</h1>
 | 
			
		||||
        <h1>
 | 
			
		||||
          <Icon :color="status['M3上片'] == 'error' ? '#ff3737' : status['M3上片'] == 'warn' ? '#ffb524' : '#24ff5e'" />
 | 
			
		||||
          M3上片
 | 
			
		||||
        </h1>
 | 
			
		||||
      </div>
 | 
			
		||||
      <div class="info">
 | 
			
		||||
        <h1>M5磨边机</h1>
 | 
			
		||||
        <h1>
 | 
			
		||||
          <Icon :color="status['M5磨边机'] == 'error' ? '#ff3737' : status['M5磨边机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
 | 
			
		||||
          M5磨边机
 | 
			
		||||
        </h1>
 | 
			
		||||
      </div>
 | 
			
		||||
      <div class="info">
 | 
			
		||||
        <h1>M4磨边机</h1>
 | 
			
		||||
        <h1>
 | 
			
		||||
          <Icon :color="status['M4磨边机'] == 'error' ? '#ff3737' : status['M4磨边机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
 | 
			
		||||
          M4磨边机
 | 
			
		||||
        </h1>
 | 
			
		||||
        <span v-if="lines.g2?.edgingInput">上片: {{ lines.g2.edgingInput }}</span>
 | 
			
		||||
        <span v-if="lines.g2?.edgingOutput">下片: {{ lines.g2.edgingOutput }}</span>
 | 
			
		||||
      </div>
 | 
			
		||||
      <div class="info">
 | 
			
		||||
        <h1>M3磨边机</h1>
 | 
			
		||||
        <h1>
 | 
			
		||||
          <Icon :color="status['M3磨边机'] == 'error' ? '#ff3737' : status['M3磨边机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
 | 
			
		||||
          M3磨边机
 | 
			
		||||
        </h1>
 | 
			
		||||
      </div>
 | 
			
		||||
      <div class="info">
 | 
			
		||||
        <h1>M5清洗机</h1>
 | 
			
		||||
        <h1>
 | 
			
		||||
          <Icon :color="status['M5清洗机'] == 'error' ? '#ff3737' : status['M5清洗机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
 | 
			
		||||
          M5清洗机
 | 
			
		||||
        </h1>
 | 
			
		||||
      </div>
 | 
			
		||||
      <div class="info">
 | 
			
		||||
        <h1>M4清洗机</h1>
 | 
			
		||||
        <h1>
 | 
			
		||||
          <Icon :color="status['M4清洗机'] == 'error' ? '#ff3737' : status['M4清洗机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
 | 
			
		||||
          M4清洗机
 | 
			
		||||
        </h1>
 | 
			
		||||
      </div>
 | 
			
		||||
      <div class="info">
 | 
			
		||||
        <h1>M3清洗机</h1>
 | 
			
		||||
        <h1>
 | 
			
		||||
          <Icon :color="status['M3清洗机'] == 'error' ? '#ff3737' : status['M3清洗机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
 | 
			
		||||
          M3清洗机
 | 
			
		||||
        </h1>
 | 
			
		||||
      </div>
 | 
			
		||||
    </div>
 | 
			
		||||
    <div class="info-6" v-if="eqStatus && line == '6'">
 | 
			
		||||
      <div class="info">
 | 
			
		||||
        <h1>Z5钻孔机</h1>
 | 
			
		||||
        <h1>
 | 
			
		||||
          <Icon :color="status['M4磨边机'] == 'error' ? '#ff3737' : status['M4磨边机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
 | 
			
		||||
          Z5钻孔机
 | 
			
		||||
        </h1>
 | 
			
		||||
      </div>
 | 
			
		||||
      <div class="info">
 | 
			
		||||
        <h1>Z4钻孔机</h1>
 | 
			
		||||
        <h1>
 | 
			
		||||
          <Icon :color="status['Z4钻孔机'] == 'error' ? '#ff3737' : status['Z4钻孔机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
 | 
			
		||||
          Z4钻孔机
 | 
			
		||||
        </h1>
 | 
			
		||||
        <span v-if="lines.g2?.drillingInput">上片: {{ lines.g2.drillingInput }}</span>
 | 
			
		||||
        <span v-if="lines.g2?.drillingOutput">下片: {{ lines.g2.drillingOutput }}</span>
 | 
			
		||||
      </div>
 | 
			
		||||
      <div class="info">
 | 
			
		||||
        <h1>Z3钻孔机</h1>
 | 
			
		||||
        <h1>
 | 
			
		||||
          <Icon :color="status['M4磨边机'] == 'error' ? '#ff3737' : status['M4磨边机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
 | 
			
		||||
          Z3钻孔机
 | 
			
		||||
        </h1>
 | 
			
		||||
      </div>
 | 
			
		||||
      <div class="info">
 | 
			
		||||
        <h1>S5清洗机</h1>
 | 
			
		||||
        <h1>
 | 
			
		||||
          <Icon :color="status['M4磨边机'] == 'error' ? '#ff3737' : status['M4磨边机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
 | 
			
		||||
          S5清洗机
 | 
			
		||||
        </h1>
 | 
			
		||||
      </div>
 | 
			
		||||
      <div class="info">
 | 
			
		||||
        <h1>S4清洗机</h1>
 | 
			
		||||
        <h1>
 | 
			
		||||
          <Icon :color="status['M4磨边机'] == 'error' ? '#ff3737' : status['M4磨边机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
 | 
			
		||||
          S4清洗机
 | 
			
		||||
        </h1>
 | 
			
		||||
      </div>
 | 
			
		||||
      <div class="info">
 | 
			
		||||
        <h1>S3清洗机</h1>
 | 
			
		||||
        <h1>
 | 
			
		||||
          <Icon :color="status['M4磨边机'] == 'error' ? '#ff3737' : status['M4磨边机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
 | 
			
		||||
          S3清洗机
 | 
			
		||||
        </h1>
 | 
			
		||||
      </div>
 | 
			
		||||
      <div class="info">
 | 
			
		||||
        <h1>S5前储片台</h1>
 | 
			
		||||
        <h1>
 | 
			
		||||
          <Icon :color="status['M4磨边机'] == 'error' ? '#ff3737' : status['M4磨边机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
 | 
			
		||||
          S5前储片台
 | 
			
		||||
        </h1>
 | 
			
		||||
      </div>
 | 
			
		||||
      <div class="info">
 | 
			
		||||
        <h1>S4前储片台</h1>
 | 
			
		||||
        <h1>
 | 
			
		||||
          <Icon :color="status['M4磨边机'] == 'error' ? '#ff3737' : status['M4磨边机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
 | 
			
		||||
          S4前储片台
 | 
			
		||||
        </h1>
 | 
			
		||||
      </div>
 | 
			
		||||
      <div class="info">
 | 
			
		||||
        <h1>S3前储片台</h1>
 | 
			
		||||
        <h1>
 | 
			
		||||
          <Icon :color="status['M4磨边机'] == 'error' ? '#ff3737' : status['M4磨边机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
 | 
			
		||||
          S3前储片台
 | 
			
		||||
        </h1>
 | 
			
		||||
      </div>
 | 
			
		||||
      <div class="info">
 | 
			
		||||
        <h1>S5丝印机</h1>
 | 
			
		||||
        <h1>
 | 
			
		||||
          <Icon :color="status['M4磨边机'] == 'error' ? '#ff3737' : status['M4磨边机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
 | 
			
		||||
          S5丝印机
 | 
			
		||||
        </h1>
 | 
			
		||||
      </div>
 | 
			
		||||
      <div class="info">
 | 
			
		||||
        <h1>S4丝印机</h1>
 | 
			
		||||
        <h1>
 | 
			
		||||
          <Icon :color="status['S4丝印机'] == 'error' ? '#ff3737' : status['S4丝印机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
 | 
			
		||||
          S4丝印机
 | 
			
		||||
        </h1>
 | 
			
		||||
        <span v-if="lines.g2?.silkInput">上片: {{ lines.g2.silkInput }}</span>
 | 
			
		||||
        <span v-if="lines.g2?.silkOutput">下片: {{ lines.g2.silkOutput }}</span>
 | 
			
		||||
      </div>
 | 
			
		||||
      <div class="info">
 | 
			
		||||
        <h1>S3丝印机</h1>
 | 
			
		||||
        <h1>
 | 
			
		||||
          <Icon :color="status['M4磨边机'] == 'error' ? '#ff3737' : status['M4磨边机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
 | 
			
		||||
          S3丝印机
 | 
			
		||||
        </h1>
 | 
			
		||||
      </div>
 | 
			
		||||
    </div>
 | 
			
		||||
    <div class="info-7" v-if="eqStatus && line == '7'">
 | 
			
		||||
      <div class="info">
 | 
			
		||||
        <h1>S5后储片台</h1>
 | 
			
		||||
        <h1>
 | 
			
		||||
          <Icon :color="status['M4磨边机'] == 'error' ? '#ff3737' : status['M4磨边机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
 | 
			
		||||
          S5后储片台
 | 
			
		||||
        </h1>
 | 
			
		||||
      </div>
 | 
			
		||||
      <div class="info">
 | 
			
		||||
        <h1>S4后储片台</h1>
 | 
			
		||||
        <h1>
 | 
			
		||||
          <Icon :color="status['M4磨边机'] == 'error' ? '#ff3737' : status['M4磨边机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
 | 
			
		||||
          S4后储片台
 | 
			
		||||
        </h1>
 | 
			
		||||
      </div>
 | 
			
		||||
      <div class="info">
 | 
			
		||||
        <h1>S3后储片台</h1>
 | 
			
		||||
        <h1>
 | 
			
		||||
          <Icon :color="status['M4磨边机'] == 'error' ? '#ff3737' : status['M4磨边机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
 | 
			
		||||
          S3后储片台
 | 
			
		||||
        </h1>
 | 
			
		||||
      </div>
 | 
			
		||||
      <div class="info">
 | 
			
		||||
        <h1>S5固化炉</h1>
 | 
			
		||||
        <h1>
 | 
			
		||||
          <Icon :color="status['M4磨边机'] == 'error' ? '#ff3737' : status['M4磨边机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
 | 
			
		||||
          S5固化炉
 | 
			
		||||
        </h1>
 | 
			
		||||
      </div>
 | 
			
		||||
      <div class="info">
 | 
			
		||||
        <h1>S4固化炉</h1>
 | 
			
		||||
        <h1>
 | 
			
		||||
          <Icon :color="status['S4固化炉'] == 'error' ? '#ff3737' : status['S4固化炉'] == 'warn' ? '#ffb524' : '#24ff5e'" />
 | 
			
		||||
          S4固化炉
 | 
			
		||||
        </h1>
 | 
			
		||||
        <span v-if="lines.g2?.solidificationInput">上片: {{ lines.g2.solidificationInput }}</span>
 | 
			
		||||
        <span v-if="lines.g2?.solidificationOutput">下片: {{ lines.g2.solidificationOutput }}</span>
 | 
			
		||||
      </div>
 | 
			
		||||
      <div class="info">
 | 
			
		||||
        <h1>S3固化炉</h1>
 | 
			
		||||
        <h1>
 | 
			
		||||
          <Icon :color="status['M4磨边机'] == 'error' ? '#ff3737' : status['M4磨边机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
 | 
			
		||||
          S3固化炉
 | 
			
		||||
        </h1>
 | 
			
		||||
      </div>
 | 
			
		||||
      <div class="info">
 | 
			
		||||
        <h1>B2前储片台</h1>
 | 
			
		||||
        <h1>
 | 
			
		||||
          <Icon :color="status['M4磨边机'] == 'error' ? '#ff3737' : status['M4磨边机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
 | 
			
		||||
          B2前储片台
 | 
			
		||||
        </h1>
 | 
			
		||||
      </div>
 | 
			
		||||
    </div>
 | 
			
		||||
    <div class="info-8" v-if="eqStatus && line == '8'">
 | 
			
		||||
      <div class="info">
 | 
			
		||||
        <h1>B1前储片台</h1>
 | 
			
		||||
        <h1>
 | 
			
		||||
          <Icon :color="status['B1前储片台'] == 'error' ? '#ff3737' : status['B1前储片台'] == 'warn' ? '#ffb524' : '#24ff5e'" />
 | 
			
		||||
          B1前储片台
 | 
			
		||||
        </h1>
 | 
			
		||||
      </div>
 | 
			
		||||
      <div class="info">
 | 
			
		||||
        <h1>B1清洗机</h1>
 | 
			
		||||
        <h1>
 | 
			
		||||
          <Icon :color="status['B1清洗机'] == 'error' ? '#ff3737' : status['B1清洗机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
 | 
			
		||||
          B1清洗机
 | 
			
		||||
        </h1>
 | 
			
		||||
      </div>
 | 
			
		||||
      <div class="info">
 | 
			
		||||
        <h1>B1下片</h1>
 | 
			
		||||
        <h1>
 | 
			
		||||
          <Icon :color="status['B1下片'] == 'error' ? '#ff3737' : status['B1下片'] == 'warn' ? '#ffb524' : '#24ff5e'" />B1下片
 | 
			
		||||
        </h1>
 | 
			
		||||
      </div>
 | 
			
		||||
      <div class="info">
 | 
			
		||||
        <h1>B1后储片台</h1>
 | 
			
		||||
        <h1>
 | 
			
		||||
          <Icon :color="status['B1后储片台'] == 'error' ? '#ff3737' : status['B1后储片台'] == 'warn' ? '#ffb524' : '#24ff5e'" />
 | 
			
		||||
          B1后储片台
 | 
			
		||||
        </h1>
 | 
			
		||||
      </div>
 | 
			
		||||
    </div>
 | 
			
		||||
    <div class="info-9" v-if="eqStatus && line == '9'">
 | 
			
		||||
      <div class="info">
 | 
			
		||||
        <h1>M2上片</h1>
 | 
			
		||||
        <h1>
 | 
			
		||||
          <Icon :color="status['M2上片'] == 'error' ? '#ff3737' : status['M2上片'] == 'warn' ? '#ffb524' : '#24ff5e'" />M2上片
 | 
			
		||||
        </h1>
 | 
			
		||||
      </div>
 | 
			
		||||
      <div class="info">
 | 
			
		||||
        <h1>M1上片</h1>
 | 
			
		||||
        <h1>
 | 
			
		||||
          <Icon :color="status['M1上片'] == 'error' ? '#ff3737' : status['M1上片'] == 'warn' ? '#ffb524' : '#24ff5e'" />M1上片
 | 
			
		||||
        </h1>
 | 
			
		||||
      </div>
 | 
			
		||||
      <div class="info">
 | 
			
		||||
        <h1>M2磨边机</h1>
 | 
			
		||||
        <h1>
 | 
			
		||||
          <Icon :color="status['M2磨边机'] == 'error' ? '#ff3737' : status['M2磨边机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
 | 
			
		||||
          M2磨边机
 | 
			
		||||
        </h1>
 | 
			
		||||
        <span v-if="lines.g1?.edgingInput">上片: {{ lines.g1.edgingInput }}</span>
 | 
			
		||||
        <span v-if="lines.g1?.edgingOutput">下片: {{ lines.g1.edgingOutput }}</span>
 | 
			
		||||
      </div>
 | 
			
		||||
      <div class="info">
 | 
			
		||||
        <h1>M1磨边机</h1>
 | 
			
		||||
        <h1>
 | 
			
		||||
          <Icon :color="status['M1磨边机'] == 'error' ? '#ff3737' : status['M1磨边机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
 | 
			
		||||
          M1磨边机
 | 
			
		||||
        </h1>
 | 
			
		||||
      </div>
 | 
			
		||||
      <div class="info">
 | 
			
		||||
        <h1>M2清洗机</h1>
 | 
			
		||||
        <h1>
 | 
			
		||||
          <Icon :color="status['M2清洗机'] == 'error' ? '#ff3737' : status['M2清洗机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
 | 
			
		||||
          M2清洗机
 | 
			
		||||
        </h1>
 | 
			
		||||
      </div>
 | 
			
		||||
      <div class="info">
 | 
			
		||||
        <h1>M1清洗机</h1>
 | 
			
		||||
        <h1>
 | 
			
		||||
          <Icon :color="status['M1清洗机'] == 'error' ? '#ff3737' : status['M1清洗机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
 | 
			
		||||
          M1清洗机
 | 
			
		||||
        </h1>
 | 
			
		||||
      </div>
 | 
			
		||||
    </div>
 | 
			
		||||
    <div class="info-10" v-if="eqStatus && line == '10'">
 | 
			
		||||
      <!-- <div class="info"><h1>M2清洗机</h1></div>
 | 
			
		||||
    <div class="info"><h1>M1清洗机</h1></div> -->
 | 
			
		||||
      <div class="info">
 | 
			
		||||
        <h1>Z2钻孔机</h1>
 | 
			
		||||
        <h1>
 | 
			
		||||
          <Icon :color="status['Z2钻孔机'] == 'error' ? '#ff3737' : status['Z2钻孔机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
 | 
			
		||||
          Z2钻孔机
 | 
			
		||||
        </h1>
 | 
			
		||||
        <span v-if="lines.g1?.drillingInput">上片: {{ lines.g1.drillingInput }}</span>
 | 
			
		||||
        <span v-if="lines.g1?.drillingOutput">下片: {{ lines.g1.drillingOutput }}</span>
 | 
			
		||||
      </div>
 | 
			
		||||
      <div class="info">
 | 
			
		||||
        <h1>Z1钻孔机</h1>
 | 
			
		||||
        <h1>
 | 
			
		||||
          <Icon :color="status['Z1钻孔机'] == 'error' ? '#ff3737' : status['Z1钻孔机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
 | 
			
		||||
          Z1钻孔机
 | 
			
		||||
        </h1>
 | 
			
		||||
      </div>
 | 
			
		||||
      <div class="info">
 | 
			
		||||
        <h1>S2清洗机</h1>
 | 
			
		||||
        <h1>
 | 
			
		||||
          <Icon :color="status['S2清洗机'] == 'error' ? '#ff3737' : status['S2清洗机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
 | 
			
		||||
          S2清洗机
 | 
			
		||||
        </h1>
 | 
			
		||||
      </div>
 | 
			
		||||
      <div class="info">
 | 
			
		||||
        <h1>S1清洗机</h1>
 | 
			
		||||
        <h1>
 | 
			
		||||
          <Icon :color="status['S1清洗机'] == 'error' ? '#ff3737' : status['S1清洗机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
 | 
			
		||||
          S1清洗机
 | 
			
		||||
        </h1>
 | 
			
		||||
      </div>
 | 
			
		||||
      <div class="info">
 | 
			
		||||
        <h1>S2前储片台</h1>
 | 
			
		||||
        <h1>
 | 
			
		||||
          <Icon :color="status['S2前储片台'] == 'error' ? '#ff3737' : status['S2前储片台'] == 'warn' ? '#ffb524' : '#24ff5e'" />
 | 
			
		||||
          S2前储片台
 | 
			
		||||
        </h1>
 | 
			
		||||
      </div>
 | 
			
		||||
      <div class="info">
 | 
			
		||||
        <h1>S1前储片台</h1>
 | 
			
		||||
        <h1>
 | 
			
		||||
          <Icon :color="status['M1清洗机'] == 'error' ? '#ff3737' : status['M1清洗机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
 | 
			
		||||
          S1前储片台
 | 
			
		||||
        </h1>
 | 
			
		||||
      </div>
 | 
			
		||||
      <div class="info">
 | 
			
		||||
        <h1>S2丝印机</h1>
 | 
			
		||||
        <h1>
 | 
			
		||||
          <Icon :color="status['M1清洗机'] == 'error' ? '#ff3737' : status['M1清洗机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
 | 
			
		||||
          S2丝印机
 | 
			
		||||
        </h1>
 | 
			
		||||
      </div>
 | 
			
		||||
      <div class="info">
 | 
			
		||||
        <h1>S1丝印机</h1>
 | 
			
		||||
        <h1>
 | 
			
		||||
          <Icon :color="status['M1清洗机'] == 'error' ? '#ff3737' : status['M1清洗机'] == 'warn' ? '#ffb524' : '#24ff5e'" />
 | 
			
		||||
          S1丝印机
 | 
			
		||||
        </h1>
 | 
			
		||||
        <span v-if="lines.g1?.silkInput">上片: {{ lines.g1.silkInput }}</span>
 | 
			
		||||
        <span v-if="lines.g1?.silkOutput">下片: {{ lines.g1.silkOutput }}</span>
 | 
			
		||||
      </div>
 | 
			
		||||
    </div>
 | 
			
		||||
    <div class="info-11" v-if="eqStatus && line == '11'">
 | 
			
		||||
      <div class="info">
 | 
			
		||||
        <h1>S7后储片台</h1>
 | 
			
		||||
        <h1>
 | 
			
		||||
          <Icon :color="status['S7后储片台'] == 'error' ? '#ff3737' : status['S7后储片台'] == 'warn' ? '#ffb524' : '#24ff5e'" />
 | 
			
		||||
          S7后储片台
 | 
			
		||||
        </h1>
 | 
			
		||||
      </div>
 | 
			
		||||
      <div class="info">
 | 
			
		||||
        <h1>S6后储片台</h1>
 | 
			
		||||
        <h1>
 | 
			
		||||
          <Icon :color="status['S6后储片台'] == 'error' ? '#ff3737' : status['S6后储片台'] == 'warn' ? '#ffb524' : '#24ff5e'" />
 | 
			
		||||
          S6后储片台
 | 
			
		||||
        </h1>
 | 
			
		||||
      </div>
 | 
			
		||||
      <div class="info">
 | 
			
		||||
        <h1>S7固化炉</h1>
 | 
			
		||||
        <h1>
 | 
			
		||||
          <Icon :color="status['S6后储片台'] == 'error' ? '#ff3737' : status['S6后储片台'] == 'warn' ? '#ffb524' : '#24ff5e'" />
 | 
			
		||||
          S7固化炉
 | 
			
		||||
        </h1>
 | 
			
		||||
      </div>
 | 
			
		||||
      <div class="info">
 | 
			
		||||
        <h1>S6固化炉</h1>
 | 
			
		||||
        <h1>
 | 
			
		||||
          <Icon :color="status['S6后储片台'] == 'error' ? '#ff3737' : status['S6后储片台'] == 'warn' ? '#ffb524' : '#24ff5e'" />
 | 
			
		||||
          S6固化炉
 | 
			
		||||
        </h1>
 | 
			
		||||
        <span v-if="lines.g3?.solidificationInput">上片: {{ lines.g3.solidificationInput }}</span>
 | 
			
		||||
        <span v-if="lines.g3?.solidificationOutput">下片: {{ lines.g3.solidificationOutput }}</span>
 | 
			
		||||
      </div>
 | 
			
		||||
      <div class="info">
 | 
			
		||||
        <h1>B3前储片台</h1>
 | 
			
		||||
        <h1>
 | 
			
		||||
          <Icon :color="status['S6后储片台'] == 'error' ? '#ff3737' : status['S6后储片台'] == 'warn' ? '#ffb524' : '#24ff5e'" />
 | 
			
		||||
          B3前储片台
 | 
			
		||||
        </h1>
 | 
			
		||||
      </div>
 | 
			
		||||
    </div>
 | 
			
		||||
    <div class="info-12" v-if="eqStatus && line == '12'">
 | 
			
		||||
      <div class="info">
 | 
			
		||||
        <h1>B3前储片台</h1>
 | 
			
		||||
        <h1>
 | 
			
		||||
          <Icon :color="status['S6后储片台'] == 'error' ? '#ff3737' : status['S6后储片台'] == 'warn' ? '#ffb524' : '#24ff5e'" />
 | 
			
		||||
          B3前储片台
 | 
			
		||||
        </h1>
 | 
			
		||||
      </div>
 | 
			
		||||
      <div class="info">
 | 
			
		||||
        <h1>B3清洗机</h1>
 | 
			
		||||
        <h1>
 | 
			
		||||
          <Icon :color="status['S6后储片台'] == 'error' ? '#ff3737' : status['S6后储片台'] == 'warn' ? '#ffb524' : '#24ff5e'" />
 | 
			
		||||
          B3清洗机
 | 
			
		||||
        </h1>
 | 
			
		||||
      </div>
 | 
			
		||||
      <div class="info">
 | 
			
		||||
        <h1>B3下片</h1>
 | 
			
		||||
        <h1>
 | 
			
		||||
          <Icon :color="status['S6后储片台'] == 'error' ? '#ff3737' : status['S6后储片台'] == 'warn' ? '#ffb524' : '#24ff5e'" />B3下片
 | 
			
		||||
        </h1>
 | 
			
		||||
      </div>
 | 
			
		||||
      <div class="info">
 | 
			
		||||
        <h1>B3后储片台</h1>
 | 
			
		||||
        <h1>
 | 
			
		||||
          <Icon :color="status['S6后储片台'] == 'error' ? '#ff3737' : status['S6后储片台'] == 'warn' ? '#ffb524' : '#24ff5e'" />
 | 
			
		||||
          B3后储片台
 | 
			
		||||
        </h1>
 | 
			
		||||
      </div>
 | 
			
		||||
    </div>
 | 
			
		||||
  </div>
 | 
			
		||||
@@ -290,11 +564,15 @@ console.log('eqStatus', eqStatus.value)
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.info {
 | 
			
		||||
  width: 180px;
 | 
			
		||||
  /* width: 180px; */
 | 
			
		||||
  height: auto;
 | 
			
		||||
  padding: 12px;
 | 
			
		||||
  background: url(../assets/info-rect.png) 100% 100% / cover no-repeat;
 | 
			
		||||
  display: inline-block;
 | 
			
		||||
  background: url(../assets/info-rect.png) 0 0 / 100% 100% no-repeat;
 | 
			
		||||
  backdrop-filter: blur(3px);
 | 
			
		||||
  display: flex;
 | 
			
		||||
  flex-direction: column;
 | 
			
		||||
  gap: 3px;
 | 
			
		||||
  align-items: flex-start;
 | 
			
		||||
  position: absolute;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
@@ -304,6 +582,9 @@ console.log('eqStatus', eqStatus.value)
 | 
			
		||||
  text-align: center;
 | 
			
		||||
  letter-spacing: 1.5px;
 | 
			
		||||
  font-weight: 500;
 | 
			
		||||
  display: flex;
 | 
			
		||||
  align-items: center;
 | 
			
		||||
  gap: 8px;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.info-1 .info:nth-child(1) {
 | 
			
		||||
@@ -775,5 +1056,4 @@ console.log('eqStatus', eqStatus.value)
 | 
			
		||||
  background: url(../assets/model/F12.png) no-repeat;
 | 
			
		||||
  background-size: 1920px 1080px;
 | 
			
		||||
  background-position: 0 -80px;
 | 
			
		||||
}
 | 
			
		||||
</style>
 | 
			
		||||
}</style>
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user