添加http服务功能、取消网络和sockte链接检查

chenyc

2022-09-16 84e14a34a082e00aa2d47a64ee36398088c12aec

添加http服务功能、取消网络和sockte链接检查

 electron/main/index.ts

@@ -37,7 +37,7 @@
  win = new BrowserWindow({
    title: 'Main window',
    fullscreen: true,
    autoHideMenuBar:true, 
    // autoHideMenuBar:true, 
    webPreferences: {
      preload: splash,
      nodeIntegration: true,

 electron/preload/splash.ts

@@ -1,97 +1,94 @@




function domReady(condition: DocumentReadyState[] = ['complete', 'interactive']) {
    return new Promise(resolve => {
      if (condition.includes(document.readyState)) {
        resolve(true)
      } else {
        document.addEventListener('readystatechange', () => {
          if (condition.includes(document.readyState)) {
            resolve(true)
          }
        })
      }
    })
  }
  
  const safeDOM = {
    append(parent: HTMLElement, child: HTMLElement) {
      if (!Array.from(parent.children).find(e => e === child)) {
        return parent.appendChild(child)
      }
    },
    remove(parent: HTMLElement, child: HTMLElement) {
      if (Array.from(parent.children).find(e => e === child)) {
        return parent.removeChild(child)
      }
    },
  }
  
  /**
   * https://tobiasahlin.com/spinkit
   * https://connoratherton.com/loaders
   * https://projects.lukehaas.me/css-loaders
   * https://matejkustec.github.io/SpinThatShit
   */
  function useLoading() {
    const className = `loaders-css__square-spin`
    const styleContent = `
  @keyframes square-spin {
    25% { transform: perspective(100px) rotateX(180deg) rotateY(0); }
    50% { transform: perspective(100px) rotateX(180deg) rotateY(180deg); }
    75% { transform: perspective(100px) rotateX(0) rotateY(180deg); }
    100% { transform: perspective(100px) rotateX(0) rotateY(0); }
  }
  .${className} > div {
    animation-fill-mode: both;
    width: 50px;
    height: 50px;
    background: #fff;
    animation: square-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
  }
  .app-loading-wrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #282c34;
    z-index: 9;
  }
      `
    const oStyle = document.createElement('style')
    const oDiv = document.createElement('div')
  
    oStyle.id = 'app-loading-style'
    oStyle.innerHTML = styleContent
    oDiv.className = 'app-loading-wrap'
    oDiv.innerHTML = `<div class="${className}"><div></div></div>`
  
    return {
      appendLoading() {
        safeDOM.append(document.head, oStyle)
        safeDOM.append(document.body, oDiv)
      },
      removeLoading() {
        safeDOM.remove(document.head, oStyle)
        safeDOM.remove(document.body, oDiv)
      },
  return new Promise(resolve => {
    if (condition.includes(document.readyState)) {
      resolve(true)
    } else {
      document.addEventListener('readystatechange', () => {
        if (condition.includes(document.readyState)) {
          resolve(true)
        }
      })
    }
  })
}
  
const safeDOM = {
  append(parent: HTMLElement, child: HTMLElement) {
    if (!Array.from(parent.children).find(e => e === child)) {
      return parent.appendChild(child)
    }
  },
  remove(parent: HTMLElement, child: HTMLElement) {
    if (Array.from(parent.children).find(e => e === child)) {
      return parent.removeChild(child)
    }
  },
}
  
/**
 * https://tobiasahlin.com/spinkit
 * https://connoratherton.com/loaders
 * https://projects.lukehaas.me/css-loaders
 * https://matejkustec.github.io/SpinThatShit
 */
function useLoading() {
  const className = `loaders-css__square-spin`
  const styleContent = `
@keyframes square-spin {
  25% { transform: perspective(100px) rotateX(180deg) rotateY(0); }
  50% { transform: perspective(100px) rotateX(180deg) rotateY(180deg); }
  75% { transform: perspective(100px) rotateX(0) rotateY(180deg); }
  100% { transform: perspective(100px) rotateX(0) rotateY(0); }
}
.${className} > div {
  animation-fill-mode: both;
  width: 50px;
  height: 50px;
  background: #fff;
  animation: square-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
}
.app-loading-wrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #282c34;
  z-index: 9;
}
    `
  const oStyle = document.createElement('style')
  const oDiv = document.createElement('div')

  oStyle.id = 'app-loading-style'
  oStyle.innerHTML = styleContent
  oDiv.className = 'app-loading-wrap'
  oDiv.innerHTML = `<div class="${className}"><div></div></div>`

  return {
    appendLoading() {
      safeDOM.append(document.head, oStyle)
      safeDOM.append(document.body, oDiv)
    },
    removeLoading() {
      safeDOM.remove(document.head, oStyle)
      safeDOM.remove(document.body, oDiv)
    },
  }
  
  // ----------------------------------------------------------------------
  
  const { appendLoading, removeLoading } = useLoading()
  domReady().then(appendLoading)
  
  window.onmessage = ev => {
    ev.data.payload === 'removeLoading' && removeLoading()
  }
  
  setTimeout(removeLoading, 4999)
}

// ----------------------------------------------------------------------

const { appendLoading, removeLoading } = useLoading()
domReady().then(appendLoading)

window.onmessage = ev => {
  ev.data.payload === 'removeLoading' && removeLoading()
}
setTimeout(removeLoading, 4999)


 package.json

@@ -1,7 +1,7 @@
{
  "name": "sign-tool",
  "version": "2.1.0",
  "icon":"public/favicon.ico",
  "icon": "public/favicon.ico",
  "main": "dist/electron/main/index.js",
  "author": "",
  "license": "MIT",
@@ -46,6 +46,9 @@
    "element-plus": "^2.2.6",
    "iconv-lite": "^0.6.3",
    "internet-available": "^1.0.0",
    "koa": "^2.13.4",
    "koa-body": "^5.0.0",
    "koa-router": "^12.0.0",
    "pinia": "^2.0.14",
    "sound-play": "^1.1.0",
    "stompjs": "^2.3.3",

 src/main.ts

@@ -5,6 +5,7 @@
import { createPinia } from 'pinia'
import App from './App.vue'
import './samples/node-api'
import './samples/httpServer'

createApp(App)
  .use(createPinia())

 src/samples/httpServer.ts

New file
@@ -0,0 +1,84 @@
import  Koa from 'koa';
import  Router from 'koa-router';
const koaBody = require('koa-body');
import {sockteStore} from '@/stores/sockteInfo'

interface ResultInfo{
    clientCode:string;
    commCode :string;
    deviceType:string;
    deviceName :string;
    result :string;
    resultTime :string
}
 
const app = new Koa();
const router = new Router();
app.use(koaBody({
  multipart: true
}));
 
router.get('/', async (ctx) => {
    ctx.body = 'Hello World!';
});
router.post('/postResult', async (ctx)=>{
  const body=ctx.request.body
  console.log(body,'收到的参数')
  writeResult(body)
  ctx.body={
    "code": 200,
    "data": body,
    "message": "接收成功"
  }
//   writeResult(body)
})

app.use(router.routes());
 
app.listen(3131,()=>{
    console.log('koa服务已经启动了,端口号是3131')
});
const writeResult=(res: ResultInfo)=>{
    console.log(res)
    console.log(`写入结果类型${res.deviceType},写入结果=${res.result}`)
    switch(res.deviceType){
        case '读卡器':
            console.log('读卡器收到消息')
            if(res.clientCode!==null){
                sockteStore().setdkqSockte(
                    {
                        deviceName:res.deviceNumber,
                        type:"读卡器",
                        result:res.result,
                        resultTime:res.resultTime,
                        state:2
                    }
                )
            }
            break
        case "体重秤":
            sockteStore().setweightSockte(
                {
                    deviceName:res.deviceNumber,
                    type:"体重秤",
                    result:Number(res.result).toString(),
                    resultTime:res.resultTime,
                    state:2
                }
            )
            break
        case "血压计":
            sockteStore().setxyjSockte(
                {
                    deviceName:res.deviceNumber,
                    type:"血压计",
                    result:res.result,
                    resultTime:res.resultTime,
                    state:2
                }
            )
            break
        default:
            console.log('有配置类型没有匹配')
    }
}

 src/samples/node-api.ts

@@ -9,13 +9,14 @@
var internetAvailable = require("internet-available")
import { ElMessage, ElMessageBox } from 'element-plus'
import { on } from 'events'

let deviceList=[]
let clientCode=''
// 主进程发送消息到渲染进程
ipcRenderer.on('main-process-message', (_event, ...args) => {
  console.log('[Receive Main-process message]:', ...args)
})
// 重主进程获取配置项
// 主进程获取配置项完成sockte注册和httpshu
ipcRenderer.on('getConfigData',(_event,...args)=>{
  console.log("config.json",...args)
  if(args[0]===undefined){
@@ -42,6 +43,7 @@
    deviceList=args[1]
    // 建立sockte 通讯
    creatorClient(deviceList,clientCode)

  }
})
ipcRenderer.on("getScreenTimeout",(_event,args)=>{

 src/samples/sockteStomp.ts

@@ -184,22 +184,23 @@
    // 更新sockte链接状态
    sockteStore().setsockteIsLink(true)
    console.log(sockteStore().isLink)
    if(devices!==undefined &&devices!=null&&devices.length>0){
        // 更新sockte链接状态
        sockteStore().setsockteIsLink(true) 
        console.log(sockteStore().isLink)
        console.log(devices)
        if(devices!==undefined&&devices!=null &&devices!=null &&devices.length>0){
            devices.forEach(de=>{
                if(stompClient!==null){
                    stompClient.subscribe(`/queue/${clientCode}/${de.deviceName}/result`,callback)
                    stompClient.subscribe(`/queue/${clientCode}/${de.deviceName}/keepalive`,callbackState)
                    stompClient.send(`/app/device/request/${clientCode}/${de.deviceName}`, {}, JSON.stringify({"deviceNumber":de.deviceName}));

                } 
            })
        }
    }
    // sockte订阅服务关闭完全有post 来代替
    // if(devices!==undefined &&devices!=null&&devices.length>0){
    //     // 更新sockte链接状态
    //     sockteStore().setsockteIsLink(true) 
    //     console.log(sockteStore().isLink)
    //     console.log(devices)
    //     if(devices!==undefined&&devices!=null &&devices!=null &&devices.length>0){
    //         devices.forEach(de=>{
    //             if(stompClient!==null){
    //                 console.log()
    //                 stompClient.subscribe(`/queue/${clientCode}/${de.deviceName}/result`,callback)
    //                 stompClient.subscribe(`/queue/${clientCode}/${de.deviceName}/keepalive`,callbackState)
    //                 stompClient.send(`/app/device/request/${clientCode}/${de.deviceName}`, {}, JSON.stringify({"deviceNumber":de.deviceName}));
    //             } 
    //         })
    //     }
    // }
}

const error_callback=function(error:any){
@@ -248,4 +249,4 @@
        stompClient.send(`/app/patient/info/set`,{},JSON.stringify(mode))
    }
}
export {creatorClient,sendPationCode,sendPationSet}
export {creatorClient,sendPationCode,sendPationSet,writeResult}

 src/views/home/index.vue

@@ -261,12 +261,12 @@
        <audio src="https://dhcdn.leon056.com/hemo/autoselfsign/step4.mp3" ref="AudioRef3" id="eventAudio4"></audio>
        <!-- 没有找到患者 -->
        <audio src="https://dhcdn.leon056.com/hemo/autoselfsign/step5.mp3" ref="AudioRef4" id="eventAudio5"></audio>
        <el-dialog title="提示" v-model="netLink" width="30%">
        <!-- <el-dialog title="提示" v-model="netLink" width="30%">
            <span>无法链接到网络！</span>
        </el-dialog>
        <el-dialog title="提示" v-model="isLink" width="30%">
        </el-dialog> -->
        <!-- <el-dialog title="提示" v-model="isLink" width="30%">
            <span>sockte连接失败正在重连。。。。。。</span>
        </el-dialog>
        </el-dialog> -->
        <el-row class="header">
          <el-col :span="8">
              <img