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