WebSocket获取地址更改

wang

2024-06-04 d005cea0fd6186170394668a315e762ca26dc719

WebSocket获取地址更改

 UI-Project/src/utils/constants.js

@@ -1 +1,2 @@
export const WebSocketHost = "localhost";
export const WebSocketHost = "192.168.1.199";
// export const WebSocketHost = "10.153.19.150";

 UI-Project/src/views/Caching/cachingbefore.vue

@@ -4,6 +4,7 @@
import {useRouter} from "vue-router"
const router = useRouter()
const adda = ref(false)
import { WebSocketHost } from '@/utils/constants'

import request from "@/utils/request"
import { ref, onMounted , onBeforeUnmount} from "vue";
@@ -78,7 +79,8 @@
    console.error('发生错误:', error);  
  }  
};   
const socketUrl = `ws://10.153.19.150:88/api/cacheGlass/api/talk/cacheGlass`;
const socketUrl = `ws://${WebSocketHost}:88/api/cacheGlass/api/talk/cacheGlass`;
// const socketUrl = `ws://10.153.19.150:88/api/cacheGlass/api/talk/cacheGlass`;
// 定义消息处理函数，更新 receivedData 变量
const handleMessage = (data) => {
  // 更新 tableData 的数据

 UI-Project/src/views/Identify/identify.vue

@@ -44,6 +44,7 @@
import { ElMessage, ElMessageBox } from 'element-plus'
import { ref, onMounted, onBeforeUnmount } from 'vue';  
import request from "@/utils/request"
import { WebSocketHost } from '@/utils/constants'
import { initializeWebSocket, closeWebSocket } from '@/utils/WebSocketService';
const blind = ref(false)
const olWidth = ref(); 
@@ -175,7 +176,7 @@
    }  
  });  
}
const socketUrl = `ws://10.153.19.150:88/api/cacheGlass/api/talk/cacheGlass`;
const socketUrl = `ws://${WebSocketHost}:88/api/cacheGlass/api/talk/cacheGlass`;
// 定义消息处理函数，更新 receivedData 变量
const handleMessage = (data) => {
  // 更新 tableData 的数据

 UI-Project/src/views/Returns/returns.vue

@@ -102,7 +102,7 @@
const titleSelectJsona = ref({
  processTypea: [],
})
const socketUrl = `ws://10.153.19.150:88/api/loadGlass/api/talk/loadGlass`;
const socketUrl = `ws://${WebSocketHost}:88/api/loadGlass/api/talk/loadGlass`;
// 定义消息处理函数，更新 receivedData 变量
const handleMessage = (data) => {
  // 更新 tableData 的数据
@@ -497,7 +497,7 @@



const wsUrl = 'ws://10.153.19.150:88/api/loadGlass/api/talk/loadGlass'; 
const wsUrl = `ws://${WebSocketHost}:88/api/loadGlass/api/talk/loadGlass`;
const ws = new WebSocket(wsUrl);  
ws.onopen = () => {  
  console.log('WebSocket连接已打开');  
@@ -519,11 +519,9 @@
  
// 监听WebSocket的消息事件  
ws.onmessage = (event) => {  
  // 假设服务器发送的是JSON格式的字符串  
  try {  
    const data = JSON.parse(event.data); // 解析消息为JSON  
  
    // 假设服务器发送的数据结构是 { InkageStatus: ["1"] }  
    if (data && Array.isArray(data.InkageStatus) && data.InkageStatus.length > 0) {  
      const status = data.InkageStatus[0]; 
      cuttingMachine.value = status; 
@@ -558,25 +556,6 @@
    ElMessage.error('请求时发生错误');  
  }  
};
// const confirmCutting = async () => {
//   try  {
//   const response = await request.post('/loadGlass/LoadGlass/updateMesInkageLoad', {
//     inKageWord: inKageWord.value
//     })
//     if (response.code == 200) {
//       inKageWord == '1' ? '上片机联机状态：' : '上片机手动状态：';
//       inKageWord.value == '1' ? '#911005' : 'green';  
//       ElMessage.success(response.message);
//     } else {
//       // 请求失败，显示错误消息
//       ElMessage.error(response.msg);
//     }
// }
// catch (error) {
//     // 处理错误
//     console.error(error);
//   }
// }
</script>
 
<template>

 UI-Project/src/views/Slicecage/slicecage.vue

@@ -3,6 +3,7 @@
import {reactive} from "vue";
import {useRouter} from "vue-router"
const router = useRouter()
import { WebSocketHost } from '@/utils/constants'
 
import { ref, onMounted , onBeforeUnmount} from "vue";
import { initializeWebSocket, closeWebSocket } from '@/utils/WebSocketService';
@@ -15,6 +16,9 @@
const tableDatab = ref([])
const tableDatac = ref([])
const tableDatad = ref([])
const tableDatae = ref([])
const adjustedRects = ref([]);
const height = ref([]);
 
const carposition1 = ref(60);
const carposition2 = ref(220);
@@ -24,7 +28,6 @@
const timers2 =ref(true);
const timers3 =ref(true);
const timers4 =ref(true);
const cellshow=ref(false);
const cellshow5=ref(false);
const c1=ref(false);
const c2=ref(false);
@@ -36,6 +39,14 @@
const million1=ref(0);
const million3=ref(0);
const million4=ref(0);
const cell1=ref(true);
const cell2=ref(true);
const cell3=ref(true);
const cell4=ref(true);
const cell5=ref(true);
const cell6=ref(true);
const cell7=ref(true);
const cell8=ref(true);
 
const currentPage4 = ref(4)
const pageSize4 = ref(100)
@@ -97,13 +108,7 @@
      }
    }else{
      million1.value=million.value;
      if(cellshow.value==true){
        cellshow.value=false;
        
      }else{
        cellshow.value=true;
        
      }
    
      if(cellshow1.value==true){
        cellshow1.value=false;
      }else{
@@ -187,7 +192,7 @@
}
 

const socketUrl = `ws://10.153.19.150:88/api/cacheVerticalGlass/api/talk/slicecage`;
const socketUrl = `ws://${WebSocketHost}:88/api/cacheVerticalGlass/api/talk/slicecage`;
// 定义消息处理函数，更新 receivedData 变量
const handleMessage = (data) => {
  // 更新 tableData 的数据
@@ -195,8 +200,21 @@
  tableDatad.value = data.bigStorageCageDetailsFeedTask[0]
  tableData.value = data.bigStorageCageInfo[0]
  tableDatab.value = data.temperingGlassInfoList[0]

  tableDatae.value = data.bigStorageCageUsage[0]
  adjustedRects.value = data.bigStorageCageInfo1[0]
  // adjustedRects.value = data.bigStorageCageInfo1[0].map(rect => ({  
  //           ...rect, // 复制原始对象的其他属性  
  //           height: rect.length *0.5,
            
  //         })); 
  window.localStorage.setItem('length', data.bigStorageCageInfo1[0].length)
  let length = window.localStorage.getItem('length')
  console.log(length);
  
};
// function getRectHeight(length: number) {  
//   return length > 0 ? 29 / length : 29;
// } 
// 初始化 WebSocket，并传递消息处理函数
onMounted(() => {
  // fetchFlowCardId();
@@ -313,96 +331,16 @@
      </div>
    </el-card>
    <div style="padding: 10px;display: flex;height:110px;">
      <div  id="occupy">
                    <el-col style="text-align:left;font-weight: bold;">#1</el-col>
                    <el-col style="text-align:left;display:flex;justify-content: space-between;align-items: center;">
                        <span id="biao">使用率</span><span id="zhi">35%</span>
                    </el-col>
                    <hr style="width:80%;margin: 0 auto;" />
                    <el-col style="text-align:left;display:flex;justify-content: space-between;align-items: center;">
                        <span id="biao">空闲（格子数）</span><span id="zhi">555</span>
                    </el-col>
                </div> 
                <div  id="occupy">
                    <el-col style="text-align:left;font-weight: bold;">#2</el-col>
                    <el-col style="text-align:left;display:flex;justify-content: space-between;align-items: center;">
                        <span id="biao">使用率</span><span id="zhi">35%</span>
                    </el-col>
                    <hr style="width:80%;margin: 0 auto;" />
                    <el-col style="text-align:left;display:flex;justify-content: space-between;align-items: center;">
                        <span id="biao">空闲（格子数）</span><span id="zhi">555</span>
                    </el-col>
                </div> 
                <div  id="occupy">
                    <el-col style="text-align:left;font-weight: bold;">#3</el-col>
                    <el-col style="text-align:left;display:flex;justify-content: space-between;align-items: center;">
                        <span id="biao">使用率</span><span id="zhi">35%</span>
                    </el-col>
                    <hr style="width:80%;margin: 0 auto;" />
                    <el-col style="text-align:left;display:flex;justify-content: space-between;align-items: center;">
                        <span id="biao">空闲（格子数）</span><span id="zhi">555</span>
                    </el-col>
                </div> 
                <div  id="occupy">
                    <el-col style="text-align:left;font-weight: bold;">#4</el-col>
                    <el-col style="text-align:left;display:flex;justify-content: space-between;align-items: center;">
                        <span id="biao">使用率</span><span id="zhi">35%</span>
                    </el-col>
                    <hr style="width:80%;margin: 0 auto;" />
                    <el-col style="text-align:left;display:flex;justify-content: space-between;align-items: center;">
                        <span id="biao">空闲（格子数）</span><span id="zhi">555</span>
                    </el-col>
                </div> 
                <div  id="occupy">
                    <el-col style="text-align:left;font-weight: bold;">#5</el-col>
                    <el-col style="text-align:left;display:flex;justify-content: space-between;align-items: center;">
                        <span id="biao">使用率</span><span id="zhi">35%</span>
                    </el-col>
                    <hr style="width:80%;margin: 0 auto;" />
                    <el-col style="text-align:left;display:flex;justify-content: space-between;align-items: center;">
                        <span id="biao">空闲（格子数）</span><span id="zhi">555</span>
                    </el-col>
                </div> 
                <div  id="occupy">
                    <el-col style="text-align:left;font-weight: bold;">#6</el-col>
                    <el-col style="text-align:left;display:flex;justify-content: space-between;align-items: center;">
                        <span id="biao">使用率</span><span id="zhi">35%</span>
                    </el-col>
                    <hr style="width:80%;margin: 0 auto;" />
                    <el-col style="text-align:left;display:flex;justify-content: space-between;align-items: center;">
                        <span id="biao">空闲（格子数）</span><span id="zhi">555</span>
                    </el-col>
                </div> 
                <div  id="occupy">
                    <el-col style="text-align:left;font-weight: bold;">#7</el-col>
                    <el-col style="text-align:left;display:flex;justify-content: space-between;align-items: center;">
                        <span id="biao">使用率</span><span id="zhi">35%</span>
                    </el-col>
                    <hr style="width:80%;margin: 0 auto;" />
                    <el-col style="text-align:left;display:flex;justify-content: space-between;align-items: center;">
                        <span id="biao">空闲（格子数）</span><span id="zhi">555</span>
                    </el-col>
                </div> 
                <div  id="occupy">
                    <el-col style="text-align:left;font-weight: bold;">#8</el-col>
                    <el-col style="text-align:left;display:flex;justify-content: space-between;align-items: center;">
                        <span id="biao">使用率</span><span id="zhi">35%</span>
                    </el-col>
                    <hr style="width:80%;margin: 0 auto;" />
                    <el-col style="text-align:left;display:flex;justify-content: space-between;align-items: center;">
                        <span id="biao">空闲（格子数）</span><span id="zhi">555</span>
                    </el-col>
                </div> 
                <!-- <div v-for="n in 8" :key="n" id="occupy">
                    <el-col style="text-align:left;font-weight: bold;">#1</el-col>
                    <el-col style="text-align:left;display:flex;justify-content: space-between;align-items: center;">
                        <span id="biao">使用率</span><span id="zhi">35%</span>
                    </el-col>
                    <hr style="width:80%;margin: 0 auto;" />
                    <el-col style="text-align:left;display:flex;justify-content: space-between;align-items: center;">
                        <span id="biao">空闲（格子数）</span><span id="zhi">555</span>
                    </el-col>
                </div> -->
            <div v-for="(item, index) in tableDatae" :key="index" id="occupy">  
               <el-col style="text-align:left;font-weight: bold;">#{{ item.device_id }}</el-col>  
               <el-col style="text-align:left;display:flex;justify-content: space-between;align-items: center;">  
                 <span>使用率</span><span>{{ item.percentage }}</span>  
               </el-col>  
               <hr style="width:80%;margin: 0 auto;" />  
               <el-col style="text-align:left;display:flex;justify-content: space-between;align-items: center;">  
                 <span>空闲（格子数）</span><span>{{ item.count }}</span>  
               </el-col>  
             </div>  
    </div>
    <!-- <div id="awatch">
  <img src="../../assets/cp.png" alt="" style="width: 70%;height: 70%;margin-left: 160px;">
@@ -417,15 +355,49 @@
    </div>
    
    <div v-show="c2" class="img-car3" :style="'z-index:999;left:247px;top:' + carposition3 + 'px;position:absolute;'">
      <div v-show="cellshow3" style="margin-top:10px;width:200px;height:5px;background-color:#409EFF;"></div>
      <div v-show="cellshow3" style="margin-top:10px;width:220px;height:5px;background-color:#409EFF;"></div>
    </div>
    <div class="img-car4" :style="'z-index:999;left:704px;top:' + carposition4 + 'px;position:absolute;'">
      <div v-show="cellshow4" style="margin-top:10px;width:200px;height:5px;background-color:#409EFF;"></div>
    </div>
    <div v-show="cellshow" style="width: 200px;height: 5px;position: absolute;top:70px;left: 480px;background-color: #409EFF;">
    <div v-show="cell1" style="width: 227px;height: 29px;position: absolute;top:55px;left: 465px;">
      <div  
      v-for="(item, index) in adjustedRects"  
      :key="index"  
      :style="{
       top: `1px`, width: `227px`,
      backgroundColor: '#409EFF',
      height: `height`+ `px`
       }"  
    >
    </div>
    <div v-show="cellshow5" style="width: 200px;height: 5px;position: absolute;top:70px;left: 480px;background-color: #409EFF;">
      <!-- <div   
        v-for="(item, index) in adjustedRects" 
        height: `${rect.height}px`,  
        :key="index"   
        :style="{  
        width: '227px',  
        height: '1px',
        backgroundColor: '#409EFF',  
        top: '1px'
      }"  
      >  
      </div> -->
    </div>
   <!-- <div v-show="cell2" style="width: 227px;height: 29px;position: absolute;top:86px;left: 465px;background-color: #409EFF;">
    </div>
     <div v-show="cell3" style="width: 227px;height: 29px;position: absolute;top:117px;left: 465px;background-color: #409EFF;">
    </div>
  <div v-show="cell4" style="width: 227px;height: 29px;position: absolute;top:148px;left: 465px;background-color: #409EFF;">
    </div>
  <div v-show="cell5" style="width: 227px;height: 29px;position: absolute;top:208px;left: 465px;background-color: #409EFF;">
    </div>
  <div v-show="cell6" style="width: 227px;height: 29px;position: absolute;top:238px;left: 465px;background-color: #409EFF;">
    </div>
  <div v-show="cell7" style="width: 227px;height: 29px;position: absolute;top:269px;left: 465px;background-color: #409EFF;">
    </div>
  <div v-show="cell8" style="width: 227px;height: 29px;position: absolute;top:300px;left: 465px;background-color: #409EFF;">
    </div> -->
</div>
    
  </div>

 UI-Project/src/views/StockBasicData/stockBasicData.vue

@@ -4,6 +4,7 @@
import {useRouter} from "vue-router"
const router = useRouter()
const adda = ref(false)
import { WebSocketHost } from '@/utils/constants'

import request from "@/utils/request"
import { ref, onMounted , onBeforeUnmount} from "vue";
@@ -94,7 +95,7 @@
  }  
};   

const socketUrl = `ws://10.153.19.150:88/api/cacheGlass/api/talk/cacheGlass`;
const socketUrl = `ws://${WebSocketHost}:88/api/cacheGlass/api/talk/cacheGlass`;
// 定义消息处理函数，更新 receivedData 变量
const handleMessage = (data) => {
  // 更新 tableData 的数据

 UI-Project/src/views/StockBasicData/stockBasicDatatwo.vue

@@ -4,6 +4,7 @@
import {useRouter} from "vue-router"
const router = useRouter()
const adda = ref(false)
import { WebSocketHost } from '@/utils/constants'

import request from "@/utils/request"
import { ref, onMounted , onBeforeUnmount} from "vue";
@@ -95,7 +96,7 @@
};   


const socketUrl = `ws://10.153.19.150:88/api/cacheGlass/api/talk/cacheGlass`;
const socketUrl = `ws://${WebSocketHost}:88/api/cacheGlass/api/talk/cacheGlass`;
// 定义消息处理函数，更新 receivedData 变量
const handleMessage = (data) => {
  // 更新 tableData 的数据