ws心跳检查

This commit is contained in:
朱菊兰 2024-03-26 17:16:52 +08:00
parent f844834453
commit 1c0dba7dbb
8 changed files with 335 additions and 331 deletions

View File

@ -25,7 +25,7 @@ VUE_APP_BASE_API = 'http://192.168.0.33:48082'
# VUE_APP_BASE_API = 'http://192.168.1.78:48082'
# VUE_APP_BASE_API = 'http://192.168.1.47:48082'
# socket地址
VUE_APP_Socket_API = 'ws://192.168.0.33:48082'
VUE_APP_Socket_API = 'ws://10.70.2.2:8080'
VUE_APP_Socket_Dcs_API = 'ws://10.70.180.10:8081'
# 积木报表指向地址

View File

@ -2,42 +2,18 @@
<div class="app-container">
<!-- 搜索工作栏 -->
<search-bar
:formConfigs="formConfig"
ref="searchBarForm"
@headBtnClick="buttonClick"
/>
<search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" />
<!-- 列表 -->
<base-table
:page="queryParams.pageNo"
:limit="queryParams.pageSize"
:table-props="tableProps"
:table-data="list"
:max-height="tableH"
>
<method-btn
v-if="tableBtn.length"
slot="handleBtn"
:width="80"
label="操作"
:method-list="tableBtn"
@clickBtn="handleClick"
/>
<base-table :page="queryParams.pageNo" :limit="queryParams.pageSize" :table-props="tableProps" :table-data="list"
:max-height="tableH">
<method-btn v-if="tableBtn.length" slot="handleBtn" :width="80" label="操作" :method-list="tableBtn"
@clickBtn="handleClick" />
</base-table>
<pagination
:page.sync="queryParams.pageNo"
:limit.sync="queryParams.pageSize"
:total="total"
@pagination="getList"
/>
<pagination :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize" :total="total"
@pagination="getList" />
<!-- 新增 -->
<base-dialog
:dialogTitle="addOrEditTitle"
:dialogVisible="centervisible"
@cancel="handleCancel"
@confirm="handleConfirm"
:before-close="handleCancel"
>
<base-dialog :dialogTitle="addOrEditTitle" :dialogVisible="centervisible" @cancel="handleCancel"
@confirm="handleConfirm" :before-close="handleCancel">
<energy-plc-add ref="energyPlc" @successSubmit="successSubmit" />
</base-dialog>
</div>
@ -50,7 +26,8 @@ import EnergyPlcAdd from './components/energyPlcAdd.vue'
const tableProps = [
{
prop: 'plcTableName',
label: '关联表名'
label: '关联表名',
showOverflowtooltip: true
},
{
prop: 'code',
@ -60,7 +37,9 @@ const tableProps = [
},
{
prop: 'name',
label: '标识名'
label: '标识名',
minWidth: 150,
showOverflowtooltip: true
},
{
prop: 'enName',

View File

@ -2,47 +2,23 @@
<div class="app-container">
<!-- 搜索工作栏 -->
<search-bar
:formConfigs="formConfig"
ref="searchBarForm"
@headBtnClick="buttonClick"
/>
<search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" />
<!-- 列表 -->
<base-table
:page="queryParams.pageNo"
:limit="queryParams.pageSize"
:table-props="tableProps"
:table-data="list"
:max-height="tableH"
>
<method-btn
v-if="tableBtn.length"
slot="handleBtn"
:width="160"
label="操作"
:method-list="tableBtn"
@clickBtn="handleClick"
/>
<base-table :page="queryParams.pageNo" :limit="queryParams.pageSize" :table-props="tableProps" :table-data="list"
:max-height="tableH">
<method-btn v-if="tableBtn.length" slot="handleBtn" :width="160" label="操作" :method-list="tableBtn"
@clickBtn="handleClick" />
</base-table>
<pagination
:page.sync="queryParams.pageNo"
:limit.sync="queryParams.pageSize"
:total="total"
@pagination="getList"
/>
<pagination :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize" :total="total"
@pagination="getList" />
<!-- 新增 -->
<base-dialog
:dialogTitle="addOrEditTitle"
:dialogVisible="centervisible"
@cancel="handleCancel"
@confirm="handleConfirm"
:before-close="handleCancel"
width='30%'
>
<base-dialog :dialogTitle="addOrEditTitle" :dialogVisible="centervisible" @cancel="handleCancel"
@confirm="handleConfirm" :before-close="handleCancel" width='30%'>
<energy-plc-connect-add ref="energyPlcConnect" :objList="objList" @successSubmit="successSubmit" />
</base-dialog>
<!-- 参数绑定/查看 -->
<energy-plc-param v-if="paramVisible" ref="plcParam" @closeDrawer="closeDrawer" :energyTypeList="energyTypeList"></energy-plc-param>
<energy-plc-param v-if="paramVisible" ref="plcParam" @closeDrawer="closeDrawer"
:energyTypeList="energyTypeList"></energy-plc-param>
</div>
</template>
@ -69,11 +45,14 @@ const tableProps = [
{
prop: 'plcTableCode',
label: '关联表编码',
minWidth: 150,
showOverflowtooltip: true
},
{
prop: 'cnName',
label: '标识名'
label: '标识名',
minWidth: 150,
showOverflowtooltip: true
},
{
prop: 'varNum',

View File

@ -2,43 +2,18 @@
<div class="app-container">
<!-- 搜索工作栏 -->
<search-bar
:formConfigs="formConfig"
ref="searchBarForm"
@headBtnClick="buttonClick"
/>
<search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" />
<!-- 列表 -->
<base-table
:page="queryParams.pageNo"
:limit="queryParams.pageSize"
:table-props="tableProps"
:table-data="list"
:max-height="tableH"
>
<method-btn
v-if="tableBtn.length"
slot="handleBtn"
:width="120"
label="操作"
:method-list="tableBtn"
@clickBtn="handleClick"
/>
<base-table :page="queryParams.pageNo" :limit="queryParams.pageSize" :table-props="tableProps" :table-data="list"
:max-height="tableH">
<method-btn v-if="tableBtn.length" slot="handleBtn" :width="120" label="操作" :method-list="tableBtn"
@clickBtn="handleClick" />
</base-table>
<pagination
:page.sync="queryParams.pageNo"
:limit.sync="queryParams.pageSize"
:total="total"
@pagination="getList"
/>
<pagination :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize" :total="total"
@pagination="getList" />
<!-- 新增 -->
<base-dialog
:dialogTitle="addOrEditTitle"
:dialogVisible="centervisible"
@cancel="handleCancel"
@confirm="handleConfirm"
:before-close="handleCancel"
width='50%'
>
<base-dialog :dialogTitle="addOrEditTitle" :dialogVisible="centervisible" @cancel="handleCancel"
@confirm="handleConfirm" :before-close="handleCancel" width='50%'>
<group-class-add ref="classList" @successSubmit="successSubmit" />
</base-dialog>
</div>
@ -85,7 +60,7 @@ const tableProps = [
}
]
export default {
name: "GroupClass",
name: "GroupClasses",
components: { GroupClassAdd },
data() {
return {

View File

@ -21,7 +21,7 @@
</el-col>
<el-col :span='4'>
<div class="blodTip">产品名称</div>
<div class="lightTip">{{ orderMsg.productName }}</div>
<div class="lightTip" :title='orderMsg.productName'>{{ orderMsg.productName }}</div>
</el-col>
<el-col :span='4'>
<div class="blodTip">产品规格</div>
@ -282,6 +282,9 @@ export default {
font-weight: 400;
color: rgba(102, 102, 102, 0.75);
margin-bottom: 12px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}

View File

@ -1,34 +1,17 @@
<template>
<div class="app-container orderMonitoring">
<!-- 搜索工作栏 -->
<search-bar
:formConfigs="formConfig"
ref="searchBarForm"
@headBtnClick="buttonClick"
/>
<search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" />
<el-tabs v-model="activeName" @tab-click="toggleTab">
<el-tab-pane label="数据列表" name="dataList"></el-tab-pane>
<el-tab-pane label="环形图" name="barChart"></el-tab-pane>
</el-tabs>
<!-- -->
<div v-if="activeName === 'dataList'">
<base-table
:page="1"
:limit="1000000000000"
:table-props="tableProps"
:table-data="list"
:max-height="tableH"
row-key="id"
:tree-props="{children: 'orderMonitorVOS', hasChildren: 'hasChildren'}"
>
<method-btn
v-if="tableBtn.length"
slot="handleBtn"
:width="100"
label="操作"
:method-list="tableBtn"
@clickBtn="handleClick"
/>
<base-table :page="1" :limit="1000000000000" :table-props="tableProps" :table-data="list" :max-height="tableH"
row-key="id" :tree-props="{ children: 'orderMonitorVOS', hasChildren: 'hasChildren' }">
<method-btn v-if="tableBtn.length" slot="handleBtn" :width="100" label="操作" :method-list="tableBtn"
@clickBtn="handleClick" />
</base-table>
</div>
<!-- -->
@ -168,7 +151,7 @@ export default {
},
tableProps,
list: [],
tableH: this.tableHeight(305),
tableH: this.tableHeight(260),
total: 0,
tableBtn: [
this.$auth.hasPermi('base:order-completion-monitoring:orderDet')
@ -234,7 +217,7 @@ export default {
components: { MonitoringRingCharts },
mounted() {
window.addEventListener('resize', () => {
this.tableH = this.tableHeight(305)
this.tableH = this.tableHeight(260)
})
let start = moment().subtract(30, 'days').format('yyyy-MM-DD')
let end = moment().format('yyyy-MM-DD')
@ -360,24 +343,31 @@ export default {
height: 2px;
background-color: #e4e7ed;
}
.el-tabs__nav-wrap::after {
width: 0;
}
.el-tabs__item {
padding: 0 10px;
}
.el-tabs__item:hover {
color: rgba(0, 0, 0, 0.85);
}
.el-tabs__item.is-active {
color: rgba(0, 0, 0, 0.85);
}
.el-tabs__item {
color: rgba(0, 0, 0, 0.45);
}
.searchBarBox {
margin-bottom: 0;
}
.boxTitle {
display: inline-block;
font-size: 16px;
@ -385,6 +375,7 @@ export default {
color: #000000;
margin: 0 10px 16px 0;
}
.blueTitle {
content: '';
display: inline-block;

View File

@ -42,7 +42,7 @@ export function WsConnect(url, agentData, successCallback, errCallback) {
this.lockReconnect = true;
this.wsCreateHandler && clearTimeout(this.wsCreateHandler);
// 关闭心跳检查
// heartCheck.stop();
heartCheck.stop();
}
};
const initWsEventHandle = () => {
@ -50,13 +50,13 @@ export function WsConnect(url, agentData, successCallback, errCallback) {
// 连接成功
this.wsObj.onopen = (event) => {
onWsOpen(event);
// heartCheck.start();
heartCheck.start();
};
// 监听服务器端返回的信息
this.wsObj.onmessage = (event) => {
onWsMessage(event);
// heartCheck.start();
heartCheck.start();
};
this.wsObj.onclose = (event) => {
@ -123,7 +123,7 @@ export function WsConnect(url, agentData, successCallback, errCallback) {
if (this.lockReconnect) {
return;
}
writeToScreen("3秒后重连");
writeToScreen("5秒后重连");
this.lockReconnect = true;
// 没连接上会一直重连,设置延迟避免请求过多
this.wsCreateHandler && clearTimeout(this.wsCreateHandler);
@ -132,10 +132,40 @@ export function WsConnect(url, agentData, successCallback, errCallback) {
this.createWebSoket();
this.lockReconnect = false;
writeToScreen("重连完成");
}, 3000);
}, 5000);
};
// 心跳检查看看websocket是否还在正常连接中
// 心跳检查看看websocket是否还在正常连接中不需要服务端返回单向的
let _this = this
let heartCheck = {
timeout: 55000,
timeoutObj: null,
// 重启
reset() {
clearTimeout(this.timeoutObj);
this.start();
},
// 停止
stop() {
clearTimeout(this.timeoutObj);
},
// 开启定时器
start() {
this.timeoutObj && clearTimeout(this.timeoutObj);
this.timeoutObj = setTimeout(() => {
writeToScreen("心跳检查发送ping到后台");
try {
const datas = { ping: true };
_this.wsObj.send(JSON.stringify(datas));
} catch (err) {
writeToScreen("发送ping异常");
}
}, this.timeout);
},
};
// 心跳检查看看websocket是否还在正常连接中,和服务端通信,双向的)
// let heartCheck = {
// timeout: 15000,
// timeoutObj: null,
@ -160,7 +190,7 @@ export function WsConnect(url, agentData, successCallback, errCallback) {
// writeToScreen("心跳检查发送ping到后台");
// try {
// const datas = { ping: true };
// this.wsObj.send(JSON.stringify(datas));
// _this.wsObj.send(JSON.stringify(datas));
// } catch (err) {
// writeToScreen("发送ping异常");
// }

View File

@ -11,7 +11,12 @@ const dcsConn = new WsConnect(
'',
(data) => {
// console.log('dcs成功的回调函数, 接收到的data数据: ', data)
let msgData = JSON.parse(data)
let msgData = {}
try {
msgData = JSON.parse(data)
} catch (error) {
console.log("websocket: [unable to msgData] : ", data);
}
if (msgData == null) return;
switch (msgData?.type) {
case "FanFrequencyInfo": {
@ -43,8 +48,12 @@ const mesIsra = new WsConnect(
'',
(data) => {
// console.log('mes ISRA成功的回调函数, 接收到的data数据: ', data)
let msgData = JSON.parse(data)
// console.log(msgData)
let msgData = {}
try {
msgData = JSON.parse(data)
} catch (error) {
console.log("websocket: [unable to msgData] : ", data);
}
if (msgData == null) return;
switch (msgData?.type) {
case "israKiln": {
@ -65,7 +74,12 @@ const mesMA = new WsConnect(
'',
(data) => {
// console.log('mes 原料成功的回调函数, 接收到的data数据: ', data)
let msgData = JSON.parse(data)
let msgData = {}
try {
msgData = JSON.parse(data)
} catch (error) {
console.log("websocket: [unable to msgData] : ", data);
}
if (msgData == null) return;
switch (msgData?.type) {
case "material": {
@ -88,7 +102,12 @@ const mesEN = new WsConnect(
// 成功拿到后台返回的数据的回调函数
(data) => {
// console.log('mes 能耗成功的回调函数, 接收到的data数据: ', data)
let msgData = JSON.parse(data)
let msgData = {}
try {
msgData = JSON.parse(data)
} catch (error) {
console.log("websocket: [unable to msgData] : ", data);
}
if (msgData == null) return;
switch (msgData?.type) {
case "EnergyInfo": {
@ -120,17 +139,24 @@ const mesGAS = new WsConnect(
// 成功拿到后台返回的数据的回调函数
(data) => {
// console.log('mes 烟气成功的回调函数, 接收到的data数据: ', data)
let msgData = JSON.parse(data)
let msgData = {}
try {
msgData = JSON.parse(data)
} catch (error) {
console.log("websocket: [unable to msgData] : ", data);
}
if (msgData == null) return;
switch (msgData?.type) {
case "exhaustGas": {
store.dispatch({ type: "websocket/setExhaustGasInfo", payload: msgData.realtime })
store.dispatch({type: "websocket/setExhaustGasChart", payload:{
store.dispatch({
type: "websocket/setExhaustGasChart", payload: {
dayTrend: msgData.dayTrend,
weekTrend: msgData.weekTrend,
monthTrend: msgData.monthTrend,
yearTrend: msgData.yearTrend,
}})
}
})
break;
}
default:
@ -151,17 +177,24 @@ const mesIS = new WsConnect(
// 成功拿到后台返回的数据的回调函数
(data) => {
// console.log('mes 缺陷成功的回调函数, 接收到的data数据: ', data)
let msgData = JSON.parse(data)
let msgData = {}
try {
msgData = JSON.parse(data)
} catch (error) {
console.log("websocket: [unable to msgData] : ", data);
}
if (msgData == null) return;
switch (msgData?.type) {
case "isra": {
store.dispatch({type: "websocket/setDefectChart", payload:{
store.dispatch({
type: "websocket/setDefectChart", payload: {
checkType: msgData.detData.checkType,
dayStatistic: msgData.detData.dayStatistic,
weekStatistic: msgData.detData.weekStatistic,
monthStatistic: msgData.detData.monthStatistic,
yearStatistic: msgData.detData.yearStatistic,
}})
}
})
break;
}
default:
@ -182,7 +215,12 @@ const mesSJG = new WsConnect(
// 成功拿到后台返回的数据的回调函数
(data) => {
// console.log('mes 产线产量及良品率成功的回调函数, 接收到的data数据: ', data)
let msgData = JSON.parse(data)
let msgData = {}
try {
msgData = JSON.parse(data)
} catch (error) {
console.log("websocket: [unable to msgData] : ", data);
}
if (msgData == null) return;
switch (msgData?.type) {
case "productline": {
@ -220,7 +258,12 @@ const mesOV = new WsConnect(
// 成功拿到后台返回的数据的回调函数
(data) => {
// console.log('mes 产线产量及良品率成功的回调函数, 接收到的data数据: ', data)
let msgData = JSON.parse(data)
let msgData = {}
try {
msgData = JSON.parse(data)
} catch (error) {
console.log("websocket: [unable to msgData] : ", data);
}
if (msgData == null) return;
switch (msgData?.type) {
case "order": {
@ -245,9 +288,13 @@ const mesCUTTING = new WsConnect(
// 成功拿到后台返回的数据的回调函数
(data) => {
// console.log('mes 产线产量及良品率成功的回调函数, 接收到的data数据: ', data)
let msgData = JSON.parse(data)
let msgData = {}
try {
msgData = JSON.parse(data)
} catch (error) {
console.log("websocket: [unable to msgData] : ", data);
}
if (msgData == null) return;
console.log(msgData)
switch (msgData?.type) {
case "cutting": {
if (msgData?.name === 'table') {