From a6a33f6916afbf1fc629baecb772939cda2ee981 Mon Sep 17 00:00:00 2001
From: wankeda <Administrator@DESKTOP-HAU3ST3>
Date: 星期四, 13 三月 2025 17:58:12 +0800
Subject: [PATCH] 代码提交
---
代码管理/WMS/WIDESEA_WMSClient/src/views/Home.vue | 279 +++++++++++++++++++++++++++++++++++++++++++++++++++++--
1 files changed, 268 insertions(+), 11 deletions(-)
diff --git "a/\344\273\243\347\240\201\347\256\241\347\220\206/WMS/WIDESEA_WMSClient/src/views/Home.vue" "b/\344\273\243\347\240\201\347\256\241\347\220\206/WMS/WIDESEA_WMSClient/src/views/Home.vue"
index 820437a..312b017 100644
--- "a/\344\273\243\347\240\201\347\256\241\347\220\206/WMS/WIDESEA_WMSClient/src/views/Home.vue"
+++ "b/\344\273\243\347\240\201\347\256\241\347\220\206/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>
\ No newline at end of file
--
Gitblit v1.9.3