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 17:41:47 +08:00
parent 17164687b6
commit 8567ec8c2e
2 changed files with 86 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
.prettierrc.yaml
View File

@ -1,4 +1,18 @@
#singleQuote: true
#semi: false
#printWidth: 100
#trailingComma: none
printWidth: 220
tabWidth: 4
useTabs: true
semi: true
singleQuote: true
semi: false
printWidth: 100
trailingComma: none
quoteProps: "as-needed"
trailingComma: "none"
bracketSpacing: true
jsxBracketSameLine: false
arrowParens: "avoid"
endOfLine: "lf"
jsxSingleQuote: false
vueIndentScriptAndStyle: false
Prettier:HTMLWhitespaceSensitivity: 'ignore'

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

@ -2,98 +2,98 @@
<div id="switch-box">
<div class="switch-main">
<el-collapse v-model="activeFold" @change="foldChange">
<el-collapse-item title="Mqtt设置" name="1">
<el-collapse-item name="1" title="Mqtt设置">
<el-form
ref="mqttFormRef"
:model="mqttForm"
status-icon
label-width="auto"
class="demo-mqttForm"
:rules="mqttRules"
class="demo-mqttForm"
label-width="auto"
status-icon
>
<el-form-item label="Client ID" prop="clientId" required>
<el-input
v-model="mqttForm.clientId"
type="text"
autocomplete="off"
:disabled="connectionState"
autocomplete="off"
type="text"
/>
</el-form-item>
<el-form-item label="Host" prop="host" required>
<el-input
v-model="mqttForm.host"
type="text"
autocomplete="off"
:disabled="connectionState"
autocomplete="off"
type="text"
/>
</el-form-item>
<el-form-item label="Port" prop="port" required>
<el-input
v-model="mqttForm.port"
type="text"
autocomplete="off"
:disabled="connectionState"
autocomplete="off"
type="text"
/>
</el-form-item>
<el-form-item label="path" prop="path">
<el-input
v-model="mqttForm.path"
type="text"
autocomplete="off"
:disabled="connectionState"
autocomplete="off"
type="text"
/>
</el-form-item>
<el-form-item label="Username" prop="userName" required>
<el-input
v-model="mqttForm.userName"
type="text"
autocomplete="off"
:disabled="connectionState"
autocomplete="off"
type="text"
/>
</el-form-item>
<el-form-item label="Password" prop="passWord" required>
<el-input
v-model="mqttForm.passWord"
type="passWord"
autocomplete="off"
:disabled="connectionState"
autocomplete="off"
type="passWord"
/>
</el-form-item>
<el-form-item class="btn-box">
<el-button :disabled="!connectionState" type="danger" @click="disconnMqtt"
>断开</el-button
>
>断开
</el-button>
<el-button :disabled="connectionState" @click="testMqtt(mqttFormRef)">测试</el-button>
<el-button :disabled="connectionState" type="primary" @click="runMqtt(mqttFormRef)"
>连接</el-button
>
>连接
</el-button>
</el-form-item>
</el-form>
</el-collapse-item>
<el-collapse-item title="设备信息" name="2">
<el-collapse-item name="2" title="设备信息">
<el-form
ref="gatewayFormRef"
:model="gatewayForm"
status-icon
label-width="auto"
class="demo-gatewayForm"
:rules="gatewayRules"
class="demo-gatewayForm"
label-width="auto"
status-icon
>
<el-form-item label="网关" prop="gateway" required>
<el-input v-model="gatewayForm.gateway" type="text" autocomplete="off" />
<el-input v-model="gatewayForm.gateway" autocomplete="off" type="text" />
</el-form-item>
<el-form-item label="上行主题" prop="subscribeTopic" required>
<el-input v-model="gatewayForm.subscribeTopic" type="text" autocomplete="off" />
<el-input v-model="gatewayForm.subscribeTopic" autocomplete="off" type="text" />
</el-form-item>
<el-form-item label="下行主题" prop="publishTopic" required>
<el-input v-model="gatewayForm.publishTopic" type="text" autocomplete="off" />
<el-input v-model="gatewayForm.publishTopic" autocomplete="off" type="text" />
</el-form-item>
<el-form-item class="btn-box">
<el-button type="primary" @click="updateGateway(gatewayFormRef)">更新</el-button>
</el-form-item>
</el-form>
</el-collapse-item>
<el-collapse-item title="属性操作" name="3">
<el-collapse-item name="3" title="属性操作">
<el-tabs type="border-card">
<el-tab-pane label="属性读取">
<el-form :model="attrReadForm" label-width="auto">
@ -222,7 +222,7 @@
</el-tab-pane>
</el-tabs>
</el-collapse-item>
<el-collapse-item title="功能操作" name="4">
<el-collapse-item name="4" title="功能操作">
<el-form :model="functionForm" label-width="auto">
<el-row>
<el-col :span="12">
@ -290,46 +290,58 @@
<div class="log-box-operate">
<view class="log-box-operate-item">
<div>mqtt状态：</div>
<div v-if="connectionState" style="color: #00ff78; display: flex; alignitems: center">
<div v-if="connectionState" style="color: #00ff78; display: flex; align-items: center">
连接
</div>
<div
v-else
style="color: red; display: flex; alignitems: center"
style="color: red; display: flex; align-items: center"
@click="runMqtt(mqttFormRef)"
>
断连<el-icon><Refresh /></el-icon>
断连
<el-icon>
<Refresh />
</el-icon>
</div>
</view>
<view class="log-box-operate-item">
<div>日志状态：</div>
<div v-if="socketStatus" style="color: #00ff78; display: flex; alignitems: center">
<div v-if="socketStatus" style="color: #00ff78; display: flex; align-items: center">
连接
</div>
<div
v-else
style="color: #ff0000; display: flex; alignitems: center"
style="color: #ff0000; display: flex; align-items: center"
@click="initSocket"
>
断连<el-icon><Refresh /></el-icon>
断连
<el-icon>
<Refresh />
</el-icon>
</div>
</view>
<view class="log-box-operate-item" @click="toggleIsScroll">
<el-tooltip
v-if="isScroll"
class="box-item"
effect="dark"
content="关闭滚动"
effect="dark"
placement="bottom"
>
<el-icon><Unlock /></el-icon>
<el-icon>
<Unlock />
</el-icon>
</el-tooltip>
<el-tooltip v-else class="box-item" effect="dark" content="开启滚动" placement="bottom">
<el-icon><Lock /></el-icon>
<el-tooltip v-else class="box-item" content="开启滚动" effect="dark" placement="bottom">
<el-icon>
<Lock />
</el-icon>
</el-tooltip>
</view>
<view class="log-box-operate-item" @click="clearLog">
<el-icon><DeleteFilled /></el-icon>
<el-icon>
<DeleteFilled />
</el-icon>
</view>
</div>
</div>
@ -340,21 +352,23 @@
<el-icon
v-if="item.type == 'subscribe'"
style="color: #00ff78; font-weight: bold; margin-right: 8px"
><Top
/></el-icon>
>
<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>
>
<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>
<el-tooltip class="box-item" effect="dark" content="复制" placement="bottom">
<el-icon style="font-weight: bold; cursor: pointer" @click="copyMsg(item.msg)"
><DocumentCopy
/></el-icon>
<el-tooltip class="box-item" content="复制" effect="dark" placement="bottom">
<el-icon style="font-weight: bold; cursor: pointer" @click="copyMsg(item.msg)">
<DocumentCopy />
</el-icon>
</el-tooltip>
</div>
</div>
@ -1030,11 +1044,12 @@ onUnmounted(() => {
})
</script>
<style scoped lang="less">
<style lang="less" scoped>
/* 样式可以在这里定义 */
#switch-box {
height: 100%;
position: relative;
.switch-main {
height: calc(100% - 200px - 60px);
overflow-y: auto;
@ -1070,6 +1085,7 @@ onUnmounted(() => {
}
}
}
.log-box-main {
padding: 10px;
height: 169px;
@ -1092,6 +1108,7 @@ onUnmounted(() => {
:deep(.el-form) {
padding: 20px 20px 0;
}
:deep(.el-tabs--border-card > .el-tabs__content) {
padding: 0;
}