<template>
|
|
<el-dialog v-model="centerDialogVisible" :before-close="closeClient" title="socket调试" :show-close="false" width="1000" center>
|
<span>
|
<div>
|
<el-row>
|
说明：初始化连接后会自动重连服务端，直到连接成功上为止
|
</el-row>
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form label-width="80px" :model="socketOnjj" class="demo-form-inline">
|
<el-form-item label="ip地址">
|
<el-input :disabled="socketOnjj.loading" v-model="socketOnjj.ip" placeholder="" />
|
</el-form-item>
|
<el-form-item label="端口">
|
<el-input :disabled="socketOnjj.loading" v-model="socketOnjj.prot" placeholder="" />
|
</el-form-item>
|
<el-form-item label="">
|
<el-button :disabled="socketOnjj.loading||socketOnjj.connectState===1" :loading="socketOnjj.loading" type="primary" @click="openClient">启动</el-button>
|
<el-button style="margin-right: 100px;" type="primary" @click="zhuxiao">注销</el-button>
|
<el-text class="mx-1" v-if="socketOnjj.connectState" type="success">连接成功</el-text>
|
<el-text class="mx-1" v-else type="info">还没有连接</el-text>
|
</el-form-item>
|
<br>
|
<el-form-item label="伸缩压">
|
<el-input v-model="fromData.gy" placeholder="" />
|
</el-form-item>
|
<el-form-item label="舒张压">
|
<el-input v-model="fromData.dy" placeholder="" />
|
</el-form-item>
|
<el-form-item label="脉搏">
|
<el-input v-model="fromData.mb" placeholder="" />
|
</el-form-item>
|
<el-form-item label="日期时间">
|
<el-date-picker style="width: 100%"
|
v-model="fromData.date"
|
type="datetime"
|
format="YYYY-MM-DD hh:mm:ss"
|
value-format="YYYY-MM-DD hh:mm:ss"
|
placeholder="Select date and time"
|
/>
|
</el-form-item>
|
<el-form-item label="">
|
<el-button type="primary" @click="fasong" :disabled="socketOnjj.connectState===0||socketOnjj.loading">发送</el-button>
|
<!-- <el-button type="primary" @click="onSubmit"></el-button> -->
|
</el-form-item>
|
<br>
|
|
</el-form>
|
</el-col>
|
<el-col :span="12" style="background-color: antiquewhite;">
|
<div style="width: 100%;">
|
<ul class="infinite-list" style="overflow: auto">
|
<li v-for="(i,index) in lsMsgList" :key="index" class="infinite-list-item">
|
<div :style="{textAlign:i.type?'left':'right'}" style="width: 100%;">{{ i.info }}</div>
|
</li>
|
</ul>
|
</div>
|
|
</el-col>
|
</el-row>
|
<div style="text-align: right;padding-right: 20px;padding-top: 20px;">
|
<el-button type="primary" @click="lsMsgList=[]">清空</el-button>
|
</div>
|
|
</div>
|
</span>
|
<template #footer>
|
|
</template>
|
</el-dialog>
|
</template>
|
<script lang="ts" setup>
|
import { ElMessage } from 'element-plus';
|
import dayjs from 'dayjs';
|
import { ref ,defineExpose } from 'vue'
|
import {formatWithLeadingZero,sumJiaoyan} from '../utils/index'
|
interface msgInfo{
|
date:string,
|
info:string,
|
id:number,
|
type:number //0 是客户端发送 ，1接收的信息
|
}
|
const lsMsgList =ref(<msgInfo[]>[])
|
const centerDialogVisible =ref(false)
|
const openShow=()=>{
|
centerDialogVisible.value=true
|
}
|
const socketOnjj=ref({
|
ip:'127.0.0.1',
|
prot:3035,
|
key:'k',
|
connectState:0,
|
loading:false,
|
// 0是初始化，0.5是重莲中，1已连接
|
|
})
|
const fromData=ref({
|
gy:134,
|
dy:111,
|
mb:77,
|
date:dayjs().format('YYYY-MM-DD HH:mm:ss')
|
})
|
const masg=ref('')
|
const fasong=()=>{
|
console.log(fromData.value)
|
// BP:120/080mmHg,P:072bpm,datetime:2024/05/24 12:34:35,//
|
const mas=`BP:${formatWithLeadingZero(fromData.value.gy)}/${formatWithLeadingZero(fromData.value.dy)}mmHg,P:${formatWithLeadingZero(fromData.value.mb)}bpm,datetime:${fromData.value.date}`
|
console.log(mas)
|
window.ipcRenderer.send('fasongYJMsg', [socketOnjj.value.ip,socketOnjj.value.prot,'','','',mas])
|
}
|
|
defineExpose({ openShow });
|
/**初始化设备socket连接 */
|
const openClient=()=>{
|
console.log('查看socket链接对象--')
|
console.log(socketOnjj.value)
|
if(socketOnjj.value.connectState){
|
ElMessage.warning('已经打开初始化了')
|
}else{
|
//启动初始化
|
console.log('启动初始化')
|
socketOnjj.value.loading=true
|
window.ipcRenderer.send('openClient', [socketOnjj.value.ip,socketOnjj.value.prot])
|
}
|
|
}
|
// 注销当前连接
|
const zhuxiao=()=>{
|
|
window.ipcRenderer.send('closeClient', [socketOnjj.value.ip,socketOnjj.value.prot])
|
|
}
|
/**关闭设备socket连接 */
|
const closeClient=()=>{
|
ElMessage.warning('调试模式下不能关闭')
|
}
|
/**返回服务端连接日志 */
|
window.ipcRenderer.on('result-connLog', (_event, ...args) => {
|
console.log(args[0].data)
|
if(args[0].data==='注销链接对象'){
|
socketOnjj.value.loading=false
|
socketOnjj.value.connectState=0
|
|
lsMsgList.value.push({id:1,date:new Date().toString(),info:args[0].data.toString(),type:0})
|
}
|
else if(args[0].data==='建立连接成功'){
|
socketOnjj.value.loading=false
|
socketOnjj.value.connectState=1
|
lsMsgList.value.push({id:1,date:new Date().toString(),info:args[0].data.toString(),type:0})
|
}else if(args[0].data.length===1&&args[0].data[0]===6){
|
console.log(args[0].data)
|
console.log(args[0].data[0])
|
lsMsgList.value.push({id:1,date:new Date().toString(),info:args[0].data.toString(),type:1})
|
}else if(args[0].data==='10s 后重连'){
|
socketOnjj.value.loading=true
|
socketOnjj.value.connectState=0
|
lsMsgList.value.push({id:1,date:new Date().toString(),info:'10s 后重连',type:0})
|
}else{
|
lsMsgList.value.push({id:1,date:new Date().toString(),info:args[0].data,type:0})
|
}
|
|
})
|
|
</script>
|
<style>
|
.infinite-list {
|
min-height: 600px;
|
padding: 0;
|
margin: 0;
|
list-style: none;
|
}
|
.infinite-list .infinite-list-item {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
height: 20px;
|
/* background: var(--el-color-primary-light-9); */
|
color: var(--el-color-primary);
|
}
|
.infinite-list .infinite-list-item + .list-item {
|
margin-top: 10px;
|
|
}
|
</style>
|
