Java若依前后端分离_产线信息化项目工作日志_DAY9

最新推荐文章于 2026-01-09 15:15:24 发布
原创最新推荐文章于 2026-01-09 15:15:24 发布 · 267 阅读
0 ·
CC 4.0 BY-SA版权
文章标签：
#java #前端 #javascript
前端页面的设计优化以及后端数据的获取与展示1.0
代码实现部分：
<template>
  <div class="container">
    <div class="head">
      <div class="title" style="background-image: url(images/title-bg.png)">
        <div class="title-left"></div>
        <div class="title-value">工艺流程</div>
        <div class="title-right"></div>
      </div>
    </div>
    <div class="content">
      <div class="layout">
        <div class="box" :style="{ backgroundColor: op0010Flag === '加工' ? 'green' : 'gray' }"
             @mouseover="op0010showPortId = true"
             @mouseleave="op0010showPortId = false">
          <p class="box-text">OP0010:{{ op0010Flag }}</p>
          <p v-if="op0010Flag === '加工' && op0010showPortId" class="port-id">Port ID: {{ op0010PortId }}</p>
          <!-- 添加以下内容到.box中 -->
          <el-progress type="circle" :percentage="0"></el-progress>
          <div class="dynamic-data dynamic-data-left-bottom">
            <p>总加工数量: {{ realtimeData1 }}</p>
            <p>已加工数量: {{ realtimeData2 }}</p>
          </div>
          <div class="dynamic-data dynamic-data-right-top">
            <p>动态数据3: {{ realtimeData33 }}</p>
            <p>动态数据4: {{ realtimeData34 }}</p>
            <p>动态数据3: {{ realtimeData35 }}</p>
            <p>动态数据4: {{ realtimeData36 }}</p>
          </div>
<!--          <el-progress type="circle" :percentage="25"></el-progress>-->
<!--          <el-progress type="circle" :percentage="100" status="success"></el-progress>-->
<!--          <el-progress type="circle" :percentage="70" status="warning"></el-progress>-->
<!--          <el-progress type="circle" :percentage="50" status="exception"></el-progress>-->
        </div>
        <div class="arrow"></div>
      </div>

      <div class="layout">
        <div class="box" :style="{ backgroundColor: op20Flag === '上料' ? 'green' : 'gray' }"
             @mouseover="op20showPortId = true"
             @mouseleave="op20showPortId = false">
          <p class="box-text">OP20:{{ op20Flag }}</p>
          <p v-if="op20Flag === '上料' && op20showPortId" class="port-id">Port ID: {{ op20PortId }}</p>
          <el-progress type="circle" :percentage="0"></el-progress>
          <div class="dynamic-data dynamic-data-left-bottom">
            <p>总加工数量: {{ realtimeData3 }}</p>
            <p>已加工数量: {{ realtimeData4 }}</p>
          </div>
          <div class="dynamic-data dynamic-data-right-top">
            <p>动态数据3: {{ realtimeData37 }}</p>
            <p>动态数据4: {{ realtimeData38 }}</p>
            <p>动态数据3: {{ realtimeData39 }}</p>
            <p>动态数据4: {{ realtimeData40 }}</p>
          </div>
        </div>

        <div class="arrow"></div>
      </div>
      <div class="layout">
        <div class="box" :style="{ backgroundColor: op30Flag === '上料' ? 'green' : 'gray' }"
             @mouseover="op30showPortId = true"
             @mouseleave="op30showPortId = false">
          <p class="box-text" >OP30:{{ op30Flag }}</p>
          <p v-if="op30Flag === '上料' && op30showPortId" class="port-id">Port ID: {{ op30PortId }}</p>
          <el-progress type="circle" :percentage="0"></el-progress>
          <div class="dynamic-data dynamic-data-left-bottom">
            <p>总加工数量: {{ realtimeData5 }}</p>
            <p>已加工数量: {{ realtimeData6 }}</p>
          </div>
          <div class="dynamic-data dynamic-data-right-top">
            <p>动态数据3: {{ realtimeData41 }}</p>
            <p>动态数据4: {{ realtimeData42 }}</p>
            <p>动态数据3: {{ realtimeData43 }}</p>
            <p>动态数据4: {{ realtimeData44 }}</p>
          </div>
        </div>

        <div class="arrow"></div>
      </div>
      <div class="layout">
        <div class="box" :style="{ backgroundColor: op40Flag === '上料' ? 'green' : 'gray' }"
             @mouseover="op40showPortId = true"
             @mouseleave="op40showPortId = false">
          <p class="box-text">OP40:{{ op40Flag }}</p>
          <p v-if="op40Flag === '上料' && op40showPortId" class="port-id">Port ID: {{ op40PortId }}</p>
          <el-progress type="circle" :percentage="0"></el-progress>
          <div class="dynamic-data dynamic-data-left-bottom">
            <p>总加工数量: {{ realtimeData7 }}</p>
            <p>已加工数量: {{ realtimeData8 }}</p>
          </div>
          <div class="dynamic-data dynamic-data-right-top">
            <p>动态数据3: {{ realtimeData45 }}</p>
            <p>动态数据4: {{ realtimeData46 }}</p>
            <p>动态数据3: {{ realtimeData47 }}</p>
            <p>动态数据4: {{ realtimeData48 }}</p>
          </div>
        </div>
        <div class="arrow"></div>
      </div>
      <div class="layout">
        <div class="box" :style="{ backgroundColor: op65Flag55 === '上料' ? 'green' : 'gray' }"
             @mouseover="op65showPortId55 = true"
             @mouseleave="op65showPortId55 = false">
          <p class="box-text">OP65-55:{{ op65Flag55 }}</p>
          <p v-if="op65Flag55 === '上料' && op65showPortId55" class="port-id">Port ID: {{ op65PortId55 }}</p>
          <el-progress type="circle" :percentage="0"></el-progress>
          <div class="dynamic-data dynamic-data-left-bottom">
            <p>总加工数量: {{ realtimeData9 }}</p>
            <p>已加工数量: {{ realtimeData10 }}</p>
          </div>
          <div class="dynamic-data dynamic-data-right-top">
            <p>动态数据3: {{ realtimeData49 }}</p>
            <p>动态数据4: {{ realtimeData50 }}</p>
            <p>动态数据3: {{ realtimeData51 }}</p>
            <p>动态数据4: {{ realtimeData52 }}</p>
          </div>
        </div>
        <div class="arrow"></div>
      </div>
      <div class="layout">
        <div class="box" :style="{ backgroundColor: op65Flag47 === '上料' ? 'green' : 'gray' }"
             @mouseover="op65showPortId47 = true"
             @mouseleave="op65showPortId47 = false">
          <p class="box-text">OP65-47:{{ op65Flag47 }}</p>
          <p v-if="op65Flag47 === '上料' && op65showPortId47" class="port-id">Port ID: {{ op65PortId47 }}</p>
          <el-progress type="circle" :percentage="0"></el-progress>
          <div class="dynamic-data dynamic-data-left-bottom">
            <p>总加工数量: {{ realtimeData11 }}</p>
            <p>已加工数量: {{ realtimeData12 }}</p>
          </div>
          <div class="dynamic-data dynamic-data-right-top">
            <p>动态数据3: {{ realtimeData53 }}</p>
            <p>动态数据4: {{ realtimeData54 }}</p>
            <p>动态数据3: {{ realtimeData55 }}</p>
            <p>动态数据4: {{ realtimeData56 }}</p>
          </div>
        </div>
        <div class="arrow"></div>
      </div>
      <div class="layout">
        <div class="box" :style="{ backgroundColor: op80Flag === '上料' ? 'green' : 'gray' }"
             @mouseover="op80showPortId = true"
             @mouseleave="op80showPortId = false">
          <p class="box-text">OP80:{{ op80Flag }}</p>
          <p v-if="op80Flag === '上料' && op80showPortId" class="port-id">Port ID: {{ op80PortId }}</p>
          <el-progress type="circle" :percentage="0"></el-progress>
          <div class="dynamic-data dynamic-data-left-bottom">
            <p>总加工数量: {{ realtimeData13 }}</p>
            <p>已加工数量: {{ realtimeData14 }}</p>
          </div>
          <div class="dynamic-data dynamic-data-right-top">
            <p>动态数据3: {{ realtimeData57 }}</p>
            <p>动态数据4: {{ realtimeData58 }}</p>
            <p>动态数据3: {{ realtimeData59 }}</p>
            <p>动态数据4: {{ realtimeData60 }}</p>
          </div>
        </div>
        <div class="arrow"></div>
      </div>
      <div class="layout">
        <div class="box" :style="{ backgroundColor: op90Flag === '加工' ? 'green' : 'gray' }"
             @mouseover="op90showPortId = true"
             @mouseleave="op90showPortId = false">
          <p class="box-text">OP90:{{ op90Flag }}</p>
          <p v-if="op90Flag === '加工' && op90showPortId" class="port-id">Port ID: {{ op90PortId }}</p>
          <el-progress type="circle" :percentage="0"></el-progress>
          <div class="dynamic-data dynamic-data-left-bottom">
            <p>总加工数量: {{ realtimeData15 }}</p>
            <p>已加工数量: {{ realtimeData16 }}</p>
          </div>
          <div class="dynamic-data dynamic-data-right-top">
            <p>动态数据3: {{ realtimeData61 }}</p>
            <p>动态数据4: {{ realtimeData62 }}</p>
            <p>动态数据3: {{ realtimeData63 }}</p>
            <p>动态数据4: {{ realtimeData64 }}</p>
          </div>
        </div>
      </div>





      <div class="layout">
        <div class="box" :style="{ backgroundColor: op270Flag === '上料' ? 'green' : 'gray' }"
             @mouseover="op270showPortId = true"
             @mouseleave="op270showPortId = false">
          <p class="box-text">OP270:{{ op270Flag }}</p>
          <p v-if="op270Flag === '上料' && op270showPortId" class="port-id">Port ID: {{ op270PortId }}</p>
          <el-progress type="circle" :percentage="0"></el-progress>
          <div class="dynamic-data dynamic-data-left-bottom">
            <p>总加工数量: {{ realtimeData17 }}</p>
            <p>已加工数量: {{ realtimeData18 }}</p>
          </div>
          <div class="dynamic-data dynamic-data-right-top">
            <p>动态数据3: {{ realtimeData65 }}</p>
            <p>动态数据4: {{ realtimeData66 }}</p>
            <p>动态数据3: {{ realtimeData67 }}</p>
            <p>动态数据4: {{ realtimeData68 }}</p>
          </div>
        </div>

        <div class="arrow"></div>
      </div>
      <div class="layout">
        <div class="box" :style="{ backgroundColor: op290Flag17 === '加工' ? 'green' : 'gray' }"
             @mouseover="op290showPortId17 = true"
             @mouseleave="op290showPortId17 = false">
          <p class="box-text">OP290-17:{{ op290Flag17 }}</p>
          <p v-if="op290Flag17 === '加工' && op290showPortId17" class="port-id">Port ID: {{ op290PortId17 }}</p>
          <el-progress type="circle" :percentage="0"></el-progress>
          <div class="dynamic-data dynamic-data-left-bottom">
            <p>总加工数量: {{ realtimeData19 }}</p>
            <p>已加工数量: {{ realtimeData20 }}</p>
          </div>
          <div class="dynamic-data dynamic-data-right-top">
            <p>动态数据3: {{ realtimeData69 }}</p>
            <p>动态数据4: {{ realtimeData70 }}</p>
            <p>动态数据3: {{ realtimeData71 }}</p>
            <p>动态数据4: {{ realtimeData72 }}</p>
          </div>
        </div>
        <div class="arrow"></div>
      </div>
      <div class="layout">
        <div class="box" :style="{ backgroundColor: op290Flag94 === '上料' ? 'green' : 'gray' }"
             @mouseover="op290showPortId94 = true"
             @mouseleave="op290showPortId94 = false">
          <p class="box-text">OP290-94:{{ op290Flag94 }}</p>
          <p v-if="op290Flag94 === '上料' && op290showPortId94" class="port-id">Port ID: {{ op290PortId94 }}</p>
          <el-progress type="circle" :percentage="0"></el-progress>
          <div class="dynamic-data dynamic-data-left-bottom">
            <p>总加工数量: {{ realtimeData21 }}</p>
            <p>已加工数量: {{ realtimeData22 }}</p>
          </div>
          <div class="dynamic-data dynamic-data-right-top">
            <p>动态数据3: {{ realtimeData73 }}</p>
            <p>动态数据4: {{ realtimeData74 }}</p>
            <p>动态数据3: {{ realtimeData75 }}</p>
            <p>动态数据4: {{ realtimeData76 }}</p>
          </div>
        </div>

        <div class="arrow"></div>
      </div>
      <div class="layout">
        <div class="box" :style="{ backgroundColor: op310Flag === '上料' ? 'green' : 'gray' }"
             @mouseover="op310showPortId = true"
             @mouseleave="op310showPortId = false">
          <p class="box-text">OP310:{{ op310Flag }}</p>
          <p v-if="op310Flag === '上料' && op310showPortId" class="port-id">Port ID: {{ op310PortId }}</p>
          <el-progress type="circle" :percentage="0"></el-progress>
          <div class="dynamic-data dynamic-data-left-bottom">
            <p>总加工数量: {{ realtimeData23 }}</p>
            <p>已加工数量: {{ realtimeData24 }}</p>
          </div>
          <div class="dynamic-data dynamic-data-right-top">
            <p>动态数据3: {{ realtimeData77 }}</p>
            <p>动态数据4: {{ realtimeData78 }}</p>
            <p>动态数据3: {{ realtimeData79 }}</p>
            <p>动态数据4: {{ realtimeData80 }}</p>
          </div>
        </div>
        <div class="arrow"></div>
      </div>
      <div class="layout">
        <div class="box" :style="{ backgroundColor: op315Flag === '上料' ? 'green' : 'gray' }"
             @mouseover="op315showPortId = true"
             @mouseleave="op315showPortId = false">
          <p class="box-text">OP315:{{ op315Flag }}</p>
          <p v-if="op315Flag === '上料' && op315showPortId" class="port-id">Port ID: {{ op315PortId }}</p>
          <el-progress type="circle" :percentage="0"></el-progress>
          <div class="dynamic-data dynamic-data-left-bottom">
            <p>总加工数量: {{ realtimeData25 }}</p>
            <p>已加工数量: {{ realtimeData26 }}</p>
          </div>
          <div class="dynamic-data dynamic-data-right-top">
            <p>动态数据3: {{ realtimeData81 }}</p>
            <p>动态数据4: {{ realtimeData82 }}</p>
            <p>动态数据3: {{ realtimeData83 }}</p>
            <p>动态数据4: {{ realtimeData84 }}</p>
          </div>
        </div>
        <div class="arrow"></div>
      </div>
      <div class="layout">

        <div class="box" :style="{ backgroundColor: op320Flag === '上料' ? 'green' : 'gray' }"
             @mouseover="op320showPortId = true"
             @mouseleave="op320showPortId = false">
          <p class="box-text">OP320:{{ op320Flag }}</p>
          <p v-if="op320Flag === '上料' && op320showPortId" class="port-id">Port ID: {{ op320PortId }}</p>
          <el-progress type="circle" :percentage="0"></el-progress>
          <div class="dynamic-data dynamic-data-left-bottom">
            <p>总加工数量: {{ realtimeData27 }}</p>
            <p>已加工数量: {{ realtimeData28 }}</p>
          </div>
          <div class="dynamic-data dynamic-data-right-top">
            <p>动态数据3: {{ realtimeData85 }}</p>
            <p>动态数据4: {{ realtimeData86 }}</p>
            <p>动态数据3: {{ realtimeData87 }}</p>
            <p>动态数据4: {{ realtimeData88 }}</p>
          </div>
        </div>
      </div>
      <div class="layout">
        <div class="box">
          <div class="panel-title">右下标题</div>
          <el-progress type="circle" :percentage="0"></el-progress>
          <div class="dynamic-data dynamic-data-left-bottom">
            <p>总加工数量: {{ realtimeData29 }}</p>
            <p>已加工数量: {{ realtimeData30 }}</p>
          </div>
          <div class="dynamic-data dynamic-data-right-top">
            <p>动态数据3: {{ realtimeData89 }}</p>
            <p>动态数据4: {{ realtimeData90 }}</p>
            <p>动态数据3: {{ realtimeData91 }}</p>
            <p>动态数据4: {{ realtimeData92 }}</p>
          </div>
        </div>
      </div>
      <div class="layout">
        <div class="box">
          <div class="panel-title">右下标题</div>
          <el-progress type="circle" :percentage="0"></el-progress>
          <div class="dynamic-data dynamic-data-left-bottom">
            <p>总加工数量: {{ realtimeData31 }}</p>
            <p>已加工数量: {{ realtimeData32 }}</p>
          </div>
          <div class="dynamic-data dynamic-data-right-top">
            <p>动态数据3: {{ realtimeData93 }}</p>
            <p>动态数据4: {{ realtimeData94 }}</p>
            <p>动态数据3: {{ realtimeData95 }}</p>
            <p>动态数据4: {{ realtimeData96 }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import axios from 'axios'

export default {
  data() {
    return {
      op0010Flag: '',
      op0010PortId:'',
      op0010showPortId: false,
      op20Flag: '',
      op20PortId:'',
      op20showPortId: false,
      op30Flag: '',
      op30PortId:'',
      op30showPortId: false,
      op40Flag: '',
      op40PortId:'',
      op40showPortId: false,
      op65Flag55: '',
      op65PortId55:'',
      op65showPortId55: false,
      op65Flag47: '',
      op65PortId47:'',
      op65showPortId47: false,
      op80Flag: '',
      op80PortId:'',
      op80showPortId: false,
      op90Flag: '',
      op90PortId:'',
      op90showPortId: false,
      op270Flag: '',
      op270PortId:'',
      op270showPortId: false,
      op290Flag17: '',
      op290PortId17:'',
      op290showPortId17: false,
      op290Flag94: '',
      op290PortId94:'',
      op290showPortId94: false,
      op310Flag: '',
      op310PortId:'',
      op310showPortId: false,
      op315Flag: '',
      op315PortId:'',
      op315showPortId: false,
      op320Flag: '',
      op320PortId:'',
      op320showPortId: false,
      // 可以根据需要继续添加更多设备状态变量
      realtimeData1: '',
      realtimeData2: '',
      realtimeData3: '',
      realtimeData4: '',
      realtimeData5: '',
      realtimeData6: '',
      realtimeData7: '',
      realtimeData8: '',
      realtimeData9: '',
      realtimeData10: '',
      realtimeData11: '',
      realtimeData12: '',
      realtimeData13: '',
      realtimeData14: '',
      realtimeData15: '',
      realtimeData16: '',
      realtimeData17: '',
      realtimeData18: '',
      realtimeData19: '',
      realtimeData20: '',
      realtimeData21: '',
      realtimeData22: '',
      realtimeData23: '',
      realtimeData24: '',
      realtimeData25: '',
      realtimeData26: '',
      realtimeData27: '',
      realtimeData28: '',
      realtimeData29: '',
      realtimeData30: '',
      realtimeData31: '',
      realtimeData32: '',
      realtimeData33 : '',
      realtimeData34 : '',
      realtimeData35 : '',
      realtimeData36 : '',
      realtimeData37 : '',
      realtimeData38: '',
      realtimeData39 : '',
      realtimeData40: '',
      realtimeData41 : '',
      realtimeData42 : '',
      realtimeData43: '',
      realtimeData44 : '',
      realtimeData45 : '',
      realtimeData46 : '',
      realtimeData47: '',
      realtimeData48: '',
      realtimeData49: '',
      realtimeData50: '',
      realtimeData51: '',
      realtimeData52: '',
      realtimeData53: '',
      realtimeData54: '',
      realtimeData55: '',
      realtimeData56: '',
      realtimeData57: '',
      realtimeData58: '',
      realtimeData59: '',
      realtimeData60: '',
      realtimeData61: '',
      realtimeData62: '',
      realtimeData63: '',
      realtimeData64: '',
      realtimeData65: '',
      realtimeData66: '',
      realtimeData67: '',
      realtimeData68: '',
      realtimeData69: '',
      realtimeData70: '',
      realtimeData71: '',
      realtimeData72: '',
      realtimeData73: '',
      realtimeData74: '',
      realtimeData75: '',
      realtimeData76: '',
      realtimeData77: '',
      realtimeData78: '',
      realtimeData79: '',
      realtimeData80: '',
      realtimeData81: '',
      realtimeData82: '',
      realtimeData83: '',
      realtimeData84: '',
      realtimeData85: '',
      realtimeData86: '',
      realtimeData87: '',
      realtimeData88: '',
      realtimeData89: '',
      realtimeData90: '',
      realtimeData91: '',
      realtimeData92: '',
      realtimeData93: '',
      realtimeData94: '',
      realtimeData95: '',
      realtimeData96: '',
      realtimeData97: '',
      realtimeData98: '',
      realtimeData99: '',
      realtimeData100: ''
    };
  },
  mounted() {
    this.fetchData();
    setInterval(this.fetchData, 50000); // 每50秒刷新一次数据
  },
  methods: {
    fetchData() {
      // 获取 OP0010 设备数据
      axios.get('http://localhost:8079/dev-api/system/time/listLine?processNumber=OP0010', {
        headers: {
          Authorization: 'Bearer eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6IjU1N2NmNjJlLWE0ZTgtNDNkMi04OWIzLTUyNWJiODdjMGU2NyJ9.88NyFozmJomfh05Hq5Aa6hDz-AucZrmgGAN5rAz3VQNkyZj4S3Ny_seKBhmRMqo3V5wiB2gnE3HQG9_5lKokCw'
        }
      })
        .then(response => {
          const currentTime = new Date();
          const op0010Data = response.data.rows.filter(item => {
            if (item.machineType === 'OP0010') {
              const itemTime = new Date(item.time);
              return itemTime <= currentTime;
            }
            return false;
          });
          if (op0010Data.length > 0) {
            const currentOp0010 = op0010Data[op0010Data.length-1];
            this.op0010Flag = currentOp0010.flag;
            this.op0010PortId = currentOp0010.portId;

          } else {
            this.op0010Flag = '无数据';
            this.op0010PortId = ''; // 无数据时清空 portId
          }
        })
        .catch(error => {
          console.error('数据获取失败：', error);
        });


      // 获取 OP20 设备数据
      axios.get('http://localhost:8079/dev-api/system/time/listLine?processNumber=OP20', {
        headers: {
          Authorization: 'Bearer eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6IjU1N2NmNjJlLWE0ZTgtNDNkMi04OWIzLTUyNWJiODdjMGU2NyJ9.88NyFozmJomfh05Hq5Aa6hDz-AucZrmgGAN5rAz3VQNkyZj4S3Ny_seKBhmRMqo3V5wiB2gnE3HQG9_5lKokCw'
        }
      })
        .then(response => {
          const currentTime = new Date();
          const op20Data = response.data.rows.filter(item => {
            if (item.machineType === 'OP20') {
              const itemTime = new Date(item.time);
              return itemTime <= currentTime;
            }
            return false;
          });
          if (op20Data.length > 0) {
            const currentOp20 = op20Data[op20Data.length-1];
            this.op20Flag = currentOp20.flag;
            this.op20PortId = currentOp20.portId;
          } else {
            this.op20Flag = '无数据';
          }
        })
        .catch(error => {
          console.error('数据获取失败：', error);
        });

      // 获取 OP30 设备数据，以此类推
      axios.get('http://localhost:8079/dev-api/system/time/listLine?processNumber=OP30', {
        headers: {
          Authorization: 'Bearer eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6IjU1N2NmNjJlLWE0ZTgtNDNkMi04OWIzLTUyNWJiODdjMGU2NyJ9.88NyFozmJomfh05Hq5Aa6hDz-AucZrmgGAN5rAz3VQNkyZj4S3Ny_seKBhmRMqo3V5wiB2gnE3HQG9_5lKokCw'
        }
      })
        .then(response => {
          const currentTime = new Date();
          const op30Data = response.data.rows.filter(item => {
            if (item.machineType === 'OP30') {
              const itemTime = new Date(item.time);
              return itemTime <= currentTime;
            }
            return false;
          });
          if (op30Data.length > 0) {
            const currentOp30 = op30Data[op30Data.length-1];
            this.op30Flag = currentOp30.flag;
            this.op30PortId = currentOp30.portId;
          } else {
            this.op30Flag = '无数据';
          }
        })
        .catch(error => {
          console.error('数据获取失败：', error);
        });

      // 获取 OP40 设备数据
      axios.get('http://localhost:8079/dev-api/system/time/listLine?processNumber=OP40', {
        headers: {
          Authorization: 'Bearer eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6IjU1N2NmNjJlLWE0ZTgtNDNkMi04OWIzLTUyNWJiODdjMGU2NyJ9.88NyFozmJomfh05Hq5Aa6hDz-AucZrmgGAN5rAz3VQNkyZj4S3Ny_seKBhmRMqo3V5wiB2gnE3HQG9_5lKokCw'
        }
      })
        .then(response => {
          const currentTime = new Date();
          const op40Data = response.data.rows.filter(item => {
            if (item.machineType === 'OP40') {
              const itemTime = new Date(item.time);
              return itemTime <= currentTime;
            }
            return false;
          });
          if (op40Data.length > 0) {
            const currentOp40 = op40Data[op40Data.length-1];
            this.op40Flag = currentOp40.flag;
            this.op40PortId = currentOp40.portId;
          } else {
            this.op40Flag = '无数据';
          }
        })
        .catch(error => {
          console.error('数据获取失败：', error);
        });

      // 获取 OP65 002-55 设备数据
      axios.get('http://localhost:8079/dev-api/system/time/listLine?deviceNumber=002-55&processNumber=OP65', {
        headers: {
          Authorization: 'Bearer eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6IjU1N2NmNjJlLWE0ZTgtNDNkMi04OWIzLTUyNWJiODdjMGU2NyJ9.88NyFozmJomfh05Hq5Aa6hDz-AucZrmgGAN5rAz3VQNkyZj4S3Ny_seKBhmRMqo3V5wiB2gnE3HQG9_5lKokCw'
        }
      })
        .then(response => {
          const currentTime = new Date();
          const op65Data = response.data.rows.filter(item => {
            if (item.machineType === 'OP65') {
              const itemTime = new Date(item.time);
              return itemTime <= currentTime;
            }
            return false;
          });
          if (op65Data.length > 0) {
            const currentOp65 = op65Data[op65Data.length-1];
            this.op65Flag55 = currentOp65.flag;
            this.op65PortId55 = currentOp65.portId;
          } else {
            this.op65Flag55 = '无数据';
          }
        })
        .catch(error => {
          console.error('数据获取失败：', error);
        });

      // 获取 OP65 002-47 设备数据
      axios.get('http://localhost:8079/dev-api/system/time/listLine?deviceNumber=002-47&processNumber=OP65', {
        headers: {
          Authorization: 'Bearer eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6IjU1N2NmNjJlLWE0ZTgtNDNkMi04OWIzLTUyNWJiODdjMGU2NyJ9.88NyFozmJomfh05Hq5Aa6hDz-AucZrmgGAN5rAz3VQNkyZj4S3Ny_seKBhmRMqo3V5wiB2gnE3HQG9_5lKokCw'
        }
      })
        .then(response => {
          const currentTime = new Date();
          const op65Data = response.data.rows.filter(item => {
            if (item.machineType === 'OP65') {
              const itemTime = new Date(item.time);
              return itemTime <= currentTime;
            }
            return false;
          });
          if (op65Data.length > 0) {
            const currentOp65 = op65Data[op65Data.length-1];
            this.op65Flag47 = currentOp65.flag;
            this.op65PortId47 = currentOp65.portId;
          } else {
            this.op65Flag47 = '无数据';
          }
        })
        .catch(error => {
          console.error('数据获取失败：', error);
        });

// 获取 OP80 设备数据
      axios.get('http://localhost:8079/dev-api/system/time/listLine?processNumber=OP80', {
        headers: {
          Authorization: 'Bearer eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6IjU1N2NmNjJlLWE0ZTgtNDNkMi04OWIzLTUyNWJiODdjMGU2NyJ9.88NyFozmJomfh05Hq5Aa6hDz-AucZrmgGAN5rAz3VQNkyZj4S3Ny_seKBhmRMqo3V5wiB2gnE3HQG9_5lKokCw'
        }
      })
        .then(response => {
          const currentTime = new Date();
          const op80Data = response.data.rows.filter(item => {
            if (item.machineType === 'OP80') {
              const itemTime = new Date(item.time);
              return itemTime <= currentTime;
            }
            return false;
          });
          if (op80Data.length > 0) {
            const currentOp80 = op80Data[op80Data.length-1];
            this.op80Flag = currentOp80.flag;
            this.op80PortId = currentOp80.portId;
          } else {
            this.op80Flag = '无数据';
          }
        })
        .catch(error => {
          console.error('数据获取失败：', error);
        });

// 获取 OP90 设备数据
      axios.get('http://localhost:8079/dev-api/system/time/listLine?processNumber=OP90', {
        headers: {
          Authorization: 'Bearer eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6IjU1N2NmNjJlLWE0ZTgtNDNkMi04OWIzLTUyNWJiODdjMGU2NyJ9.88NyFozmJomfh05Hq5Aa6hDz-AucZrmgGAN5rAz3VQNkyZj4S3Ny_seKBhmRMqo3V5wiB2gnE3HQG9_5lKokCw'
        }
      })
        .then(response => {
          const currentTime = new Date();
          const op90Data = response.data.rows.filter(item => {
            if (item.machineType === 'OP90') {
              const itemTime = new Date(item.time);
              return itemTime <= currentTime;
            }
            return false;
          });
          if (op90Data.length > 0) {
            const currentOp90 = op90Data[op90Data.length-1];
            this.op90Flag = currentOp90.flag;
            this.op90PortId = currentOp90.portId;
          } else {
            this.op90Flag = '无数据';
          }
        })
        .catch(error => {
          console.error('数据获取失败：', error);
        });

// 获取 OP270 设备数据
      axios.get('http://localhost:8079/dev-api/system/time/listLine?processNumber=OP270', {
        headers: {
          Authorization: 'Bearer eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6IjU1N2NmNjJlLWE0ZTgtNDNkMi04OWIzLTUyNWJiODdjMGU2NyJ9.88NyFozmJomfh05Hq5Aa6hDz-AucZrmgGAN5rAz3VQNkyZj4S3Ny_seKBhmRMqo3V5wiB2gnE3HQG9_5lKokCw'
        }
      })
        .then(response => {
          const currentTime = new Date();
          const op270Data = response.data.rows.filter(item => {
            if (item.machineType === 'OP270') {
              const itemTime = new Date(item.time);
              return itemTime <= currentTime;
            }
            return false;
          });
          if (op270Data.length > 0) {
            const currentOp270 = op270Data[op270Data.length-1];
            this.op270Flag = currentOp270.flag;
            this.op270PortId = currentOp270.portId;
          } else {
            this.op270Flag = '无数据';
          }
        })
        .catch(error => {
          console.error('数据获取失败：', error);
        });

// 获取 OP290-030-17 设备数据
      axios.get('http://localhost:8079/dev-api/system/time/listLine?deviceNumber=030-17&processNumber=OP290', {
        headers: {
          Authorization: 'Bearer eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6IjU1N2NmNjJlLWE0ZTgtNDNkMi04OWIzLTUyNWJiODdjMGU2NyJ9.88NyFozmJomfh05Hq5Aa6hDz-AucZrmgGAN5rAz3VQNkyZj4S3Ny_seKBhmRMqo3V5wiB2gnE3HQG9_5lKokCw'
        }
      })
        .then(response => {
          const currentTime = new Date();
          const op290Data = response.data.rows.filter(item => {
            if (item.machineType === 'OP290') {
              const itemTime = new Date(item.time);
              return itemTime <= currentTime;
            }
            return false;
          });
          if (op290Data.length > 0) {
            const currentOp290 = op290Data[op290Data.length-1];
            this.op290Flag17 = currentOp290.flag;
            this.op290PortId17 = currentOp290.portId;
          } else {
            this.op290Flag17 = '无数据';
          }
        })
        .catch(error => {
          console.error('数据获取失败：', error);
        });

      // 获取 OP290-030-94 设备数据
      axios.get('http://localhost:8079/dev-api/system/time/listLine?deviceNumber=030-94&processNumber=OP290', {
        headers: {
          Authorization: 'Bearer eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6IjU1N2NmNjJlLWE0ZTgtNDNkMi04OWIzLTUyNWJiODdjMGU2NyJ9.88NyFozmJomfh05Hq5Aa6hDz-AucZrmgGAN5rAz3VQNkyZj4S3Ny_seKBhmRMqo3V5wiB2gnE3HQG9_5lKokCw'
        }
      })
        .then(response => {
          const currentTime = new Date();
          const op290Data = response.data.rows.filter(item => {
            if (item.machineType === 'OP290') {
              const itemTime = new Date(item.time);
              return itemTime <= currentTime;
            }
            return false;
          });
          if (op290Data.length > 0) {
            const currentOp290 = op290Data[op290Data.length-1];
            this.op290Flag94 = currentOp290.flag;
            this.op290PortId94 = currentOp290.portId;
          } else {
            this.op290Flag94 = '无数据';
          }
        })
        .catch(error => {
          console.error('数据获取失败：', error);
        });

// 获取 OP310 设备数据
      axios.get('http://localhost:8079/dev-api/system/time/listLine?processNumber=OP310', {
        headers: {
          Authorization: 'Bearer eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6IjU1N2NmNjJlLWE0ZTgtNDNkMi04OWIzLTUyNWJiODdjMGU2NyJ9.88NyFozmJomfh05Hq5Aa6hDz-AucZrmgGAN5rAz3VQNkyZj4S3Ny_seKBhmRMqo3V5wiB2gnE3HQG9_5lKokCw'
        }
      })
        .then(response => {
          const currentTime = new Date();
          const op310Data = response.data.rows.filter(item => {
            if (item.machineType === 'OP310') {
              const itemTime = new Date(item.time);
              return itemTime <= currentTime;
            }
            return false;
          });
          if (op310Data.length > 0) {
            const currentOp310 = op310Data[op310Data.length-1];
            this.op310Flag = currentOp310.flag;
            this.op310PortId = currentOp310.portId;
          } else {
            this.op310Flag = '无数据';
          }
        })
        .catch(error => {
          console.error('数据获取失败：', error);
        });

// 获取 OP315 设备数据
      axios.get('http://localhost:8079/dev-api/system/time/listLine?processNumber=OP315', {
        headers: {
          Authorization: 'Bearer eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6IjU1N2NmNjJlLWE0ZTgtNDNkMi04OWIzLTUyNWJiODdjMGU2NyJ9.88NyFozmJomfh05Hq5Aa6hDz-AucZrmgGAN5rAz3VQNkyZj4S3Ny_seKBhmRMqo3V5wiB2gnE3HQG9_5lKokCw'
        }
      })
        .then(response => {
          const currentTime = new Date();
          const op315Data = response.data.rows.filter(item => {
            if (item.machineType === 'OP315') {
              const itemTime = new Date(item.time);
              return itemTime <= currentTime;
            }
            return false;
          });
          if (op315Data.length > 0) {
            const currentOp315 = op315Data[op315Data.length-1];
            this.op315Flag = currentOp315.flag;
            this.op315PortId = currentOp315.portId;
          } else {
            this.op315Flag = '无数据';
          }
        })
        .catch(error => {
          console.error('数据获取失败：', error);
        });

// 获取 OP320 设备数据
      axios.get('http://localhost:8079/dev-api/system/time/listLine?processNumber=OP320', {
        headers: {
          Authorization: 'Bearer eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6IjU1N2NmNjJlLWE0ZTgtNDNkMi04OWIzLTUyNWJiODdjMGU2NyJ9.88NyFozmJomfh05Hq5Aa6hDz-AucZrmgGAN5rAz3VQNkyZj4S3Ny_seKBhmRMqo3V5wiB2gnE3HQG9_5lKokCw'
        }
      })
        .then(response => {
          const currentTime = new Date();
          const op320Data = response.data.rows.filter(item => {
            if (item.machineType === 'OP320') {
              const itemTime = new Date(item.time);
              return itemTime <= currentTime;
            }
            return false;
          });
          if (op320Data.length > 0) {
            const currentOp320 = op320Data[op320Data.length-1];
            this.op320Flag = currentOp320.flag;
            this.op320PortId = currentOp320.portId;
          } else {
            this.op320Flag = '无数据';
          }
        })
        .catch(error => {
          console.error('数据获取失败：', error);
        });


    }
  }
};
</script>

<style scoped>
.container {
  color: #fff;
  background: url(images/bg.png);
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.head {
  width: 100%;
  height: 80px;
  background-color: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
}

.head .title {
  position: relative;
  display: flex;
  align-items: center;
  color: white;
  font-size: 24px;
  width: 100%;
  height: 100%;
}

.head .title .title-left,
.head .title .title-right {
  flex: 1;
  height: 2px;
  background-color: white;
}

.head .title .title-value {
  margin: 0 20px;
}

.content {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: flex-start;
  margin-top: 20px;
}

.layout {
  width: calc(25% - 20px); /* 计算为四列，并留出空白 */
  height: 350px;
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  background: url(images/bg.png);
  width: 80%;
  height: 100%; /* 盒子高度为100%以填充.layout的高度 */
  border: 1px solid #ddd;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  background-color: rgba(255, 255, 255, 0.8);


  position: relative; /* 设置为相对定位 */
}

.dynamic-data {
  position: absolute;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  color: #fff; /* 将颜色改为白色 */
}

.dynamic-data-left-bottom {
  bottom: 0;
  left: 0;
}

.dynamic-data-right-top {
  top: 0;
  right: 0;
}

.box .panel-title {
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  padding: 10px;
  background: url(images/bg.png);
  background-color: #f0f0f0;
  border-bottom: 1px solid #ddd;
}

.box .chart {
  flex: 1;
  background: url(images/bg.png);
  border: 1px solid #ddd;
  padding: 10px;
}
</style>