0017
/
calibration-pc
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(断路器): 调整后端服务路径、页面添加缓存、断路器连接、主题数据添加缓存

This commit is contained in:
fhysy 2024-07-15 16:52:03 +08:00
parent 1152321c30
commit 17164687b6
7 changed files with 192 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -2,3 +2,4 @@ node_modules
out out
.DS_Store .DS_Store
*.log* *.log*
/dist/

1
src/renderer/index.html
View File

@ -8,7 +8,6 @@
http-equiv="Content-Security-Policy" http-equiv="Content-Security-Policy"
content="default-src 'self'; connect-src 'self' http://127.0.0.1:8000 http://192.168.1.17:8000 ws://192.168.1.17:8000 ws://127.0.0.1:8000; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:" content="default-src 'self'; connect-src 'self' http://127.0.0.1:8000 http://192.168.1.17:8000 ws://192.168.1.17:8000 ws://127.0.0.1:8000; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:"
/> />
<script src="/src/util/config.js"></script>
</head> </head>
<body> <body>

4
src/renderer/src/App.vue
View File

@ -3,9 +3,7 @@ import { RouterView } from "vue-router"
</script> </script>
<template> <template>
<keep-alive :include="['switch', 'about', 'test']"> <RouterView></RouterView>
<router-view></router-view>
</keep-alive>
</template> </template>
<style> <style>

12
src/renderer/src/util/config.js
View File

@ -5,12 +5,12 @@
// } // }
// 手动配置的地址 // 手动配置的地址
window.config = { // window.config = {
url: 'http://127.0.0.1:8000', // url: 'http://127.0.0.1:8000',
wsUrl: 'ws://127.0.0.1:8000', // wsUrl: 'ws://127.0.0.1:8000',
} // }
export const config = { export default {
url: 'http://127.0.0.1:8000', url: 'http://127.0.0.1:8000',
wsUrl: 'ws://127.0.0.1:8000', wsUrl: 'ws://127.0.0.1:8000'
} }

18
src/renderer/src/util/socket.js
View File

@ -1,8 +1,8 @@
import { ElMessage as message } from 'element-plus' import { ElMessage as message } from 'element-plus'
// import storage from 'store' // import storage from 'store'
import { config } from "@renderer/util/config.js" import config from '@renderer/util/config.js'
let receiveMessage = null; let receiveMessage = null
import { reactive } from 'vue'; import { reactive } from 'vue'
const socket = reactive({ const socket = reactive({
websocket: null, websocket: null,
connectURL: config.wsUrl + '/ws/log', connectURL: config.wsUrl + '/ws/log',
@ -24,7 +24,7 @@ const socket = reactive({
reconnect_interval: 5 * 1000, reconnect_interval: 5 * 1000,
init: (overrideReceiveMessage) => { init: (overrideReceiveMessage) => {
if (overrideReceiveMessage) { if (overrideReceiveMessage) {
receiveMessage = overrideReceiveMessage; receiveMessage = overrideReceiveMessage
} }
if (!('WebSocket' in window)) { if (!('WebSocket' in window)) {
message.warning('浏览器不支持WebSocket') message.warning('浏览器不支持WebSocket')
@ -37,7 +37,7 @@ const socket = reactive({
} }
} }
socket.websocket.onclose = () => { socket.websocket.onclose = () => {
console.log("socket连接关闭----------------------") console.log('socket连接关闭----------------------')
socket.socket_open = false socket.socket_open = false
// 需要重新连接 // 需要重新连接
if (socket.is_reonnect) { if (socket.is_reonnect) {
@ -48,7 +48,7 @@ const socket = reactive({
socket.is_reonnect = false socket.is_reonnect = false
return return
} }
console.log("socket重连次数：" + socket.reconnect_current) console.log('socket重连次数：' + socket.reconnect_current)
// 记录重连次数 // 记录重连次数
socket.reconnect_current++ socket.reconnect_current++
socket.reconnect() socket.reconnect()
@ -85,7 +85,7 @@ const socket = reactive({
message({ message({
type: 'warning', type: 'warning',
message: 'socket链接已断开', message: 'socket链接已断开',
duration: 1000, duration: 1000
}) })
} }
}, },
@ -101,6 +101,6 @@ const socket = reactive({
socket.close() socket.close()
} }
socket.init(receiveMessage) socket.init(receiveMessage)
}, }
}) })
export default socket; export default socket

6
src/renderer/src/views/HomeView.vue
View File

@ -9,7 +9,11 @@ import Aside from '@renderer/components/Aside.vue'
<el-container > <el-container >
<Aside width="160px"></Aside> <Aside width="160px"></Aside>
<el-main> <el-main>
<router-view/> <router-view v-slot="{ Component }">
<keep-alive>
<component :is="Component" />
</keep-alive>
</router-view>
</el-main> </el-main>
</el-container> </el-container>
</el-container> </el-container>

200
src/renderer/src/views/switch/index.vue
View File

@ -10,30 +10,63 @@
label-width="auto" label-width="auto"
class="demo-mqttForm" class="demo-mqttForm"
:rules="mqttRules" :rules="mqttRules"
style="padding: 20px; padding-bottom: 0"
> >
<el-form-item label="Client ID" prop="clientId" required> <el-form-item label="Client ID" prop="clientId" required>
<el-input v-model="mqttForm.clientId" type="text" autocomplete="off" :disabled="connectionState"/> <el-input
v-model="mqttForm.clientId"
type="text"
autocomplete="off"
:disabled="connectionState"
/>
</el-form-item> </el-form-item>
<el-form-item label="Host" prop="host" required> <el-form-item label="Host" prop="host" required>
<el-input v-model="mqttForm.host" type="text" autocomplete="off" :disabled="connectionState"/> <el-input
v-model="mqttForm.host"
type="text"
autocomplete="off"
:disabled="connectionState"
/>
</el-form-item> </el-form-item>
<el-form-item label="Port" prop="port" required> <el-form-item label="Port" prop="port" required>
<el-input v-model="mqttForm.port" type="text" autocomplete="off" :disabled="connectionState"/> <el-input
v-model="mqttForm.port"
type="text"
autocomplete="off"
:disabled="connectionState"
/>
</el-form-item> </el-form-item>
<el-form-item label="path" prop="path"> <el-form-item label="path" prop="path">
<el-input v-model="mqttForm.path" type="text" autocomplete="off" :disabled="connectionState"/> <el-input
v-model="mqttForm.path"
type="text"
autocomplete="off"
:disabled="connectionState"
/>
</el-form-item> </el-form-item>
<el-form-item label="Username" prop="userName" required> <el-form-item label="Username" prop="userName" required>
<el-input v-model="mqttForm.userName" type="text" autocomplete="off" :disabled="connectionState"/> <el-input
v-model="mqttForm.userName"
type="text"
autocomplete="off"
:disabled="connectionState"
/>
</el-form-item> </el-form-item>
<el-form-item label="Password" prop="passWord" required> <el-form-item label="Password" prop="passWord" required>
<el-input v-model="mqttForm.passWord" type="passWord" autocomplete="off" :disabled="connectionState"/> <el-input
v-model="mqttForm.passWord"
type="passWord"
autocomplete="off"
:disabled="connectionState"
/>
</el-form-item> </el-form-item>
<el-form-item class="btn-box"> <el-form-item class="btn-box">
<el-button :disabled="!connectionState" type="danger" @click="disconnMqtt">断开</el-button> <el-button :disabled="!connectionState" type="danger" @click="disconnMqtt"
>断开</el-button
>
<el-button :disabled="connectionState" @click="testMqtt(mqttFormRef)">测试</el-button> <el-button :disabled="connectionState" @click="testMqtt(mqttFormRef)">测试</el-button>
<el-button :disabled="connectionState" type="primary" @click="runMqtt(mqttFormRef)">连接</el-button> <el-button :disabled="connectionState" type="primary" @click="runMqtt(mqttFormRef)"
>连接</el-button
>
</el-form-item> </el-form-item>
</el-form> </el-form>
</el-collapse-item> </el-collapse-item>
@ -45,7 +78,6 @@
label-width="auto" label-width="auto"
class="demo-gatewayForm" class="demo-gatewayForm"
:rules="gatewayRules" :rules="gatewayRules"
style="padding: 20px; padding-bottom: 0"
> >
<el-form-item label="网关" prop="gateway" required> <el-form-item label="网关" prop="gateway" required>
<el-input v-model="gatewayForm.gateway" type="text" autocomplete="off" /> <el-input v-model="gatewayForm.gateway" type="text" autocomplete="off" />
@ -191,7 +223,7 @@
</el-tabs> </el-tabs>
</el-collapse-item> </el-collapse-item>
<el-collapse-item title="功能操作" name="4"> <el-collapse-item title="功能操作" name="4">
<el-form :model="functionForm" label-width="auto" style="padding: 20px"> <el-form :model="functionForm" label-width="auto">
<el-row> <el-row>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="设备号"> <el-form-item label="设备号">
@ -258,13 +290,29 @@
<div class="log-box-operate"> <div class="log-box-operate">
<view class="log-box-operate-item"> <view class="log-box-operate-item">
<div>mqtt状态：</div> <div>mqtt状态：</div>
<div v-if="connectionState" style="color: #00ff78;display:flex;alignItems:center">连接</div> <div v-if="connectionState" style="color: #00ff78; display: flex; alignitems: center">
<div v-else @click="runMqtt(mqttFormRef)" style="color: red;display:flex;alignItems:center">断连<el-icon><Refresh /></el-icon></div> 连接
</div>
<div
v-else
style="color: red; display: flex; alignitems: center"
@click="runMqtt(mqttFormRef)"
>
断连<el-icon><Refresh /></el-icon>
</div>
</view> </view>
<view class="log-box-operate-item"> <view class="log-box-operate-item">
<div>日志状态：</div> <div>日志状态：</div>
<div v-if="socketStatus" style="color: #00ff78;display:flex;alignItems:center">连接</div> <div v-if="socketStatus" style="color: #00ff78; display: flex; alignitems: center">
<div v-else @click="initSocket" style="color: #ff0000;display:flex;alignItems:center">断连<el-icon><Refresh /></el-icon></div> 连接
</div>
<div
v-else
style="color: #ff0000; display: flex; alignitems: center"
@click="initSocket"
>
断连<el-icon><Refresh /></el-icon>
</div>
</view> </view>
<view class="log-box-operate-item" @click="toggleIsScroll"> <view class="log-box-operate-item" @click="toggleIsScroll">
<el-tooltip <el-tooltip
@ -276,13 +324,7 @@
> >
<el-icon><Unlock /></el-icon> <el-icon><Unlock /></el-icon>
</el-tooltip> </el-tooltip>
<el-tooltip <el-tooltip v-else class="box-item" effect="dark" content="开启滚动" placement="bottom">
v-else
class="box-item"
effect="dark"
content="开启滚动"
placement="bottom"
>
<el-icon><Lock /></el-icon> <el-icon><Lock /></el-icon>
</el-tooltip> </el-tooltip>
</view> </view>
@ -291,21 +333,28 @@
</view> </view>
</div> </div>
</div> </div>
<div class="log-box-main" id="log-box-main"> <div id="log-box-main" class="log-box-main">
<div class="log-list"> <div class="log-list">
<div v-for="(item, index) in logList" :key="index" class="log-item"> <div v-for="(item, index) in logList" :key="index" class="log-item">
<p>{{ item.time }}</p> <p>{{ item.time }}</p>
<el-icon v-if="item.type == 'subscribe'" style="color: #00ff78;font-weight: bold;margin-right: 8px"><Top /></el-icon> <el-icon
<el-icon v-else-if="item.type == 'publish'" style="color: red;font-weight: bold;margin-right: 8px"><Bottom /></el-icon> v-if="item.type == 'subscribe'"
<el-icon v-else-if="item.type == 'system'" style="font-weight: bold;margin-right: 8px"><Message /></el-icon> style="color: #00ff78; font-weight: bold; margin-right: 8px"
><Top
/></el-icon>
<el-icon
v-else-if="item.type == 'publish'"
style="color: red; font-weight: bold; margin-right: 8px"
><Bottom
/></el-icon>
<el-icon v-else-if="item.type == 'system'" style="font-weight: bold; margin-right: 8px"
><Message
/></el-icon>
<p>{{ item.msg }}</p> <p>{{ item.msg }}</p>
<el-tooltip <el-tooltip class="box-item" effect="dark" content="复制" placement="bottom">
class="box-item" <el-icon style="font-weight: bold; cursor: pointer" @click="copyMsg(item.msg)"
effect="dark" ><DocumentCopy
content="复制" /></el-icon>
placement="bottom"
>
<el-icon style="font-weight: bold;cursor: pointer" @click="copyMsg(item.msg)"><DocumentCopy /></el-icon>
</el-tooltip> </el-tooltip>
</div> </div>
</div> </div>
@ -316,8 +365,8 @@
<script setup> <script setup>
import axios from 'axios' // 引入axios import axios from 'axios' // 引入axios
import dayjs from 'dayjs'; import dayjs from 'dayjs'
import { config } from "@renderer/util/config.js" import config from '@renderer/util/config.js'
import { reactive, ref, onMounted, computed, watch, onUnmounted } from 'vue' import { reactive, ref, onMounted, computed, watch, onUnmounted } from 'vue'
import { ElMessage } from 'element-plus' import { ElMessage } from 'element-plus'
@ -380,7 +429,6 @@ const gatewayRules = reactive({
publishTopic: [{ required: true, message: '下行主题不能为空', trigger: 'blur' }] publishTopic: [{ required: true, message: '下行主题不能为空', trigger: 'blur' }]
}) })
// 设备属性 // 设备属性
const attrList = [ const attrList = [
{ {
@ -552,10 +600,10 @@ const disconnMqtt = () => {
console.log(response) // 打印响应数据 console.log(response) // 打印响应数据
if (response.data.code == 0) { if (response.data.code == 0) {
ElMessage.success('断开成功') ElMessage.success('断开成功')
connectionState.value = false; connectionState.value = false
} else { } else {
if (response.data.code == 60) { if (response.data.code == 60) {
connectionState.value = false; connectionState.value = false
} }
ElMessage.error(response.data.message) ElMessage.error(response.data.message)
} }
@ -584,7 +632,7 @@ const testMqtt = (formEl) => {
ElMessage.success('测试成功') ElMessage.success('测试成功')
} else { } else {
if (response.data.code == 60) { if (response.data.code == 60) {
connectionState.value = false; connectionState.value = false
} }
ElMessage.error(response.data.message) ElMessage.error(response.data.message)
} }
@ -614,15 +662,17 @@ const runMqtt = (formEl) => {
console.log(response) // 打印响应数据 console.log(response) // 打印响应数据
if (response.data.code == 0) { if (response.data.code == 0) {
ElMessage.success('连接成功') ElMessage.success('连接成功')
connectionState.value = true; //缓存已成功连接
activeFold.value = activeFold.value.filter(item => item !== '1') localStorage.setItem('mqttForm', JSON.stringify(mqttForm))
connectionState.value = true
activeFold.value = activeFold.value.filter((item) => item !== '1')
if (!activeFold.value.includes('2')) { if (!activeFold.value.includes('2')) {
// 如果没有，就在头部添加1 // 如果没有，就在头部添加1
activeFold.value.unshift('2'); activeFold.value.unshift('2')
} }
} else { } else {
if (response.data.code == 60) { if (response.data.code == 60) {
connectionState.value = false; connectionState.value = false
} }
ElMessage.error(response.data.message) ElMessage.error(response.data.message)
} }
@ -653,10 +703,12 @@ const updateGateway = (formEl) => {
// 成功响应后的处理 // 成功响应后的处理
console.log(response) // 打印响应数据 console.log(response) // 打印响应数据
if (response.data.code == 0) { if (response.data.code == 0) {
//缓存上下行主题
localStorage.setItem('gatewayForm', JSON.stringify(gatewayForm))
ElMessage.success('更新成功') ElMessage.success('更新成功')
} else { } else {
if (response.data.code == 60) { if (response.data.code == 60) {
connectionState.value = false; connectionState.value = false
} }
ElMessage.error(response.data.message) ElMessage.error(response.data.message)
} }
@ -746,7 +798,7 @@ const readAttr = (from) => {
ElMessage.success('指令发送成功') ElMessage.success('指令发送成功')
} else { } else {
if (response.data.code == 60) { if (response.data.code == 60) {
connectionState.value = false; connectionState.value = false
} }
ElMessage.error(response.data.message) ElMessage.error(response.data.message)
} }
@ -833,7 +885,7 @@ const writeAttr = (from) => {
ElMessage.success('指令发送成功') ElMessage.success('指令发送成功')
} else { } else {
if (response.data.code == 60) { if (response.data.code == 60) {
connectionState.value = false; connectionState.value = false
} }
ElMessage.error(response.data.message) ElMessage.error(response.data.message)
} }
@ -895,7 +947,7 @@ const functionWrite = (from) => {
ElMessage.success('指令发送成功') ElMessage.success('指令发送成功')
} else { } else {
if (response.data.code == 60) { if (response.data.code == 60) {
connectionState.value = false; connectionState.value = false
} }
ElMessage.error(response.data.message) ElMessage.error(response.data.message)
} }
@ -913,8 +965,8 @@ const clearLog = () => {
} }
const getSocketMeassage = (message) => { const getSocketMeassage = (message) => {
let msg = JSON.parse(message.data); let msg = JSON.parse(message.data)
if(msg.msgType != undefined){ if (msg.msgType !== undefined) {
logList.value.push({ logList.value.push({
time: dayjs().format('YYYY-MM-DD HH:mm:ss'), time: dayjs().format('YYYY-MM-DD HH:mm:ss'),
msg: msg.data, msg: msg.data,
@ -929,9 +981,9 @@ const getSocketMeassage = (message) => {
} }
if (isScroll.value) { if (isScroll.value) {
setTimeout(() => { setTimeout(() => {
let div = document.querySelector('#log-box-main'); let div = document.querySelector('#log-box-main')
console.log("div.scrollHeight",div.scrollHeight) console.log('div.scrollHeight', div.scrollHeight)
div.scrollTop = div.scrollHeight; div.scrollTop = div.scrollHeight
}, 200) }, 200)
} }
} }
@ -939,13 +991,13 @@ const getSocketMeassage = (message) => {
const copyMsg = async (txt) => { const copyMsg = async (txt) => {
try { try {
// 将文本写入剪贴板 // 将文本写入剪贴板
await navigator.clipboard.writeText(JSON.stringify(txt)); await navigator.clipboard.writeText(JSON.stringify(txt))
ElMessage.success('复制成功'); ElMessage.success('复制成功')
} catch (err) { } catch (err) {
// 处理可能的错误，例如权限被拒绝 // 处理可能的错误，例如权限被拒绝
ElMessage.error('复制失败') ElMessage.error('复制失败')
} }
}; }
const toggleIsScroll = () => { const toggleIsScroll = () => {
isScroll.value = !isScroll.value isScroll.value = !isScroll.value
@ -955,15 +1007,22 @@ const initSocket = () => {
socket.init(getSocketMeassage) socket.init(getSocketMeassage)
} }
// socket连接状态 // socket连接状态
const socketStatus = computed(() => { const socketStatus = computed(() => {
return socket.socket_open; return socket.socket_open
}) })
// 生命周期钩子 // 生命周期钩子
onMounted(() => { onMounted(() => {
initSocket() initSocket()
const storedMqttForm = localStorage.getItem('mqttForm')
if (storedMqttForm) {
Object.assign(mqttForm, JSON.parse(storedMqttForm))
}
const storedgatewayForm = localStorage.getItem('gatewayForm')
if (storedgatewayForm) {
Object.assign(gatewayForm, JSON.parse(storedgatewayForm))
}
}) })
onUnmounted(() => { onUnmounted(() => {
@ -977,7 +1036,6 @@ onUnmounted(() => {
height: 100%; height: 100%;
position: relative; position: relative;
.switch-main { .switch-main {
//padding: 10px;
height: calc(100% - 200px - 60px); height: calc(100% - 200px - 60px);
overflow-y: auto; overflow-y: auto;
} }
@ -995,15 +1053,15 @@ onUnmounted(() => {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
.log-box-header{
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: bold;
line-height: 28px; line-height: 28px;
}
.log-box-operate { .log-box-operate {
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 14px; font-size: 14px;
.log-box-operate-item { .log-box-operate-item {
cursor: pointer; cursor: pointer;
display: flex; display: flex;
@ -1016,33 +1074,47 @@ onUnmounted(() => {
padding: 10px; padding: 10px;
height: 169px; height: 169px;
overflow-y: auto; overflow-y: auto;
.log-item { .log-item {
font-size: 13px; font-size: 13px;
user-select: text; user-select: text;
//line-height: 18px;
display: flex; display: flex;
align-items: center; align-items: center;
flex-wrap: wrap; flex-wrap: wrap;
> p { > p {
margin-right: 8px; margin-right: 8px;
} }
} }
} }
} }
/deep/.el-collapse-item__header {
:deep(.el-form) {
padding: 20px 20px 0;
}
:deep(.el-tabs--border-card > .el-tabs__content) {
padding: 0;
}
:deep(.el-collapse-item__header) {
background-color: #0066cc; background-color: #0066cc;
color: #fff; color: #fff;
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: bold;
text-indent: 10px; text-indent: 10px;
height: 40px;
line-height: 40px;
} }
/deep/.el-collapse-item__content {
:deep(.el-collapse-item__content) {
padding-bottom: 0; padding-bottom: 0;
} }
.btn-box { .btn-box {
/deep/.el-form-item__content { :deep(.el-form-item__content) {
justify-content: end; justify-content: end;
width: 100%; width: 100%;
padding: 0;
} }
} }
} }