代码提交

wankeda

2025-03-13 a6a33f6916afbf1fc629baecb772939cda2ee981

 ´úÂë¹ÜÀí/WMS/WIDESEA_WMSClient/src/views/Home.vue

@@ -1,24 +1,281 @@
<template>
  <div class="title"></div>
 <div>
      <!-- <el-tabs tab-position="top" style="height: 2120px;width: 2000px;margin: 0px auto" class="demo-tabs">
          <el-tab-pane :label="config.areaName" v-for="config in configs" :key="config.index">
              <el-drawer v-model="visible" :show-close="false" :modal="false" :lock-scroll="false">
                  <template #header="{ close, titleId, titleClass }">
                  <h4 :id="titleId" :class="titleClass">设备状态详细</h4>
                  <el-button type="danger" @click="close">
                      <el-icon class="el-icon--left"><CircleCloseFilled /></el-icon>
                      Close
                  </el-button>
                  </template>
                  <div class="equip-container">
                      <el-table :data="tableData" style="width: 100%" height="85vh">
                        <el-table-column fixed prop="plcName" label="设备名称" width="90px" header-align="center" align="center"></el-table-column>
                        <el-table-column prop="autoStatus" label="工作模式" width="100px" header-align="center" align="center">
                          <template #default="scope">
                            <el-tag type="info" effect="plain">{{ scope.row.autoStatus }}</el-tag>
                          </template>
                        </el-table-column>
                        <el-table-column prop="state" label="设备状态" width="90px" header-align="center" align="center">
                          <template #default="scope">
                            <el-tag :type="scope.row.state=='故障'?'danger':'success'" effect="dark">{{ scope.row.state }}</el-tag>
                          </template>
                        </el-table-column>
                        <el-table-column prop="workStatus" label="作业状态" width="100px" header-align="center" align="center">
                          <template #default="scope">
                            <el-tag type="warning">{{ scope.row.workStatus }}</el-tag>
                          </template>
                        </el-table-column>
                        <el-table-column prop="errMessage" label="异常信息" header-align="center" align="center"></el-table-column>
                      </el-table>
                  </div>
              </el-drawer>
              <div style="width: 1680px;height: 32px;line-height: 32px;margin-bottom: 10px;">
                    <el-button size="small" @click="visible = true">
                      æŸ¥çœ‹è®¾å¤‡å…·ä½“状态
                    </el-button>
              </div>
              <div class="home-container">
                  <grid-layout :layout="config.layout"
                          :col-num="50"
                          :row-height="40"
                          :is-draggable="false"
                          :is-resizable="false"
                          :margin="[0,0]"
                          :responsive="false"
                          :vertical-compact="false"
                          :prevent-collision="true"
                          :use-css-transforms="true"
                          style="height: 2000px;"
                  >
                      <grid-item
                          v-for="item in config.layout" 
                          :x="item.x"
                          :y="item.y"
                          :w="item.w"
                          :h="item.h"
                          :i="item.i"
                          :key="item.i"
                          :is-draggable="false" 
                          :is-resizable="false" 
                          style="background: transparent;cursor: pointer;"
                      >
                          <el-tooltip :visible="item.showName" class="box-item" effect="dark" :content="'设备：'+item.equipName" placement="bottom">
                              <div :class="{'wrap':item.isWrap,'fault':item.status.state=='Fault','stored':item.status.iSstore}" 
                                  style="display: flex; overflow: hidden;" @mouseover="item.showName=true" @mouseout="item.showName=false">
                                  <el-image :src="item.image" style="display: block;width: 40px;height: 40px" scroll-container=".home-container" v-for="i in item.h>item.w?item.h:item.w" :key="i.index" draggable="false"/>
                              </div>
                          </el-tooltip>  
                      </grid-item>
                  </grid-layout>
              </div>
          </el-tab-pane>
      </el-tabs> -->
      
  </div>
</template>

<script>
import { ref, reactive } from 'vue'
import http from "@/api/http";
// import "@/assets/css/index.css"
import { CircleCloseFilled } from '@element-plus/icons-vue'
import { ElNotification } from 'element-plus'

export default {
  setup() {
    return {

    }
  components: {
      CircleCloseFilled
  },
  data() {
      return {
          configs:[],
          visible:false,
          isGetConfig:true,
          timer:null,
          webSocket:null,
          receivedData:null,
          tableData:[
            {
              plcName: 'L1',
              autoStatus: '自动',
              state: '正常',
              workStatus: '放货完成',
              errMessage: ''
            },
            {
              plcName: 'L2',
              autoStatus: '自动',
              state: '故障',
              workStatus: '放货完成',
              errMessage: ''
            },
          ]
      }
  },
  mounted(){
      // this.configs=[];
      // this.$nextTick(x=>{
          // this.getConfigList();
      // });
      // this.showErrMsg("设备10：连接异常");
      // this.connectWebSocket();
  },
  unmounted () {
    this.configs=[];
    clearInterval(this.timer);
  },
  methods: {
      connectWebSocket() {  
        this.webSocket = new WebSocket('ws:localhost:9290/websocket')
        this.webSocket.addEventListener('open', this.onWebSocketOpen)
        this.webSocket.addEventListener('message', this.onWebSocketMessage)  
        this.webSocket.addEventListener('error', this.onWebSocketError)  
        this.webSocket.addEventListener('close', this.onWebSocketClose)  
      },  
      onWebSocketOpen() {  
        console.log('WebSocket connection established.')  
      },  
      onWebSocketMessage(event) {  
        this.receivedData = event.data  
        console.log('Received data:', this.receivedData)  
        // å¤„理接收到的数据  
        this.processData(this.receivedData)  
      },  
      onWebSocketError(event) {  
        console.error('WebSocket error:', event)  
      },  
      onWebSocketClose(event) {  
        console.log('WebSocket connection closed:', event.code, event.reason)  
      },  
      processData(data) {
        console.log('Processing data:', data)
        switch (data.type) {
          case 'config':
            this.configs=[];
            data.config.forEach(item => {
              for (let index = 0; index < item.layout.length; index++) {
                item.layout[index].status=JSON.parse(item.layout[index].status);
              }
              this.configs.push(item);
            });
            break;
          case 'equipDetail':
            this.tableData=[];
            data.equipDetail.forEach(item=>{
              this.tableData.push(item);
            });
            break;
          case 'errMessage':
              this.showErrMsg(data.content);
            break;
          default:
            break;
        }
      },
      closeWebSocket() {  
        if (this.webSocket && this.webSocket.readyState === WebSocket.OPEN) {  
          this.webSocket.close()  
        }  
      },
      getConfigList(){
          http.post("/api/dt_ConfigArea/GetConfig",null).then(x=>{
              if(x.status){
                  this.configs=[];
                  x.data.forEach(item => {
                    for (let index = 0; index < item.layout.length; index++) {
                        item.layout[index].status=JSON.parse(item.layout[index].status);
                    }
                    this.configs.push(item);
                  });
              }
              if(this.isGetConfig){
                this.isGetConfig=false;
                this.timer=setInterval(()=>{
                  this.$nextTick(x=>{
                    this.getConfigList();
                  });
                },3000)
              }
          }).catch(error=>{
              console.log("出错"+error);
          });
      },
      getDate(){
        var currentDate = new Date();
        // èŽ·å–年、月、日、小时、分钟和秒
        var year = currentDate.getFullYear();
        var month = (currentDate.getMonth() + 1).toString().padStart(2, '0'); // æœˆä»½ä»Ž0开始，所以要加1，并补零
        var day = currentDate.getDate().toString().padStart(2, '0'); // è¡¥é›¶
        var hours = currentDate.getHours().toString().padStart(2, '0'); // è¡¥é›¶
        var minutes = currentDate.getMinutes().toString().padStart(2, '0'); // è¡¥é›¶
        var seconds = currentDate.getSeconds().toString().padStart(2, '0'); // è¡¥é›¶
        // æ‹¼æŽ¥æ—¥æœŸå’Œæ—¶é—´å­—符串
        var formattedDateTime = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
        return formattedDateTime;
      },
      showErrMsg(val){
        ElNotification({
          title: ' å¼‚常 '+this.getDate(),
          message: val,
          position: 'bottom-right',
          type:'error',
          duration: 0
        })
      },
      // getStoredStyle(iSstore,val){
      //   if(iSstore){
      //     var indexU=val.indexOf("Up");
      //     var indexD=val.indexOf("Down");
      //     var indexL=val.indexOf("Left");
      //     var indexR=val.indexOf("Right");
      //     if(indexU>=0){
      //       var style={
      //         "width": "40px",
      //         "height": "40px",
      //         "--g":"repeat-y repeating-linear-gradient(0deg,#000 0 10px, #E6A23C 0 30px)",
      //         "background": "var(--g)",
      //         "background-size": "40px 40px,40px 40px",
      //         "animation": "up 5s infinite linear"
      //       };
      //       return style
      //     }else if(indexD>=0){
      //       var style={
      //         "width": "40px",
      //         "height": "40px",
      //         "--g":"repeat-y repeating-linear-gradient(0deg,#000 0 10px, #E6A23C 0px 30px)",
      //         "background": "var(--g)",
      //         "background-size": "40px 40px,40px 40px",
      //         "animation": "down 5s linear infinite"
      //       };
      //       return style
      //     }else if(indexL>=0){
      //       var style={
      //         "width": "40px",
      //         "height": "40px",
      //         "--g":"repeat-x repeating-linear-gradient(90deg,#000 0 10px, #E6A23C 0 30px)",
      //         "background": "var(--g)",
      //         "background-size": "40px 40px,40px 40px",
      //         "animation": "left 5s infinite linear"
      //       };
      //       return style
      //     }else if(indexR>=0){
      //       var style={
      //         "width": "40px",
      //         "height": "40px",
      //         "--g":"repeat-x repeating-linear-gradient(90deg,#000 0 10px, #E6A23C 0 30px)",
      //         "background": "var(--g)",
      //         "background-size": "40px 40px,40px 40px",
      //         "animation": "right 5s infinite linear"
      //       };
      //       return style
      //     }
      //   }
      // }
  }
}
</script>

<style scoped>
.title {
  line-height: 70vh;
  text-align: center;
  font-size: 28px;
  color: orange;
}
</style>