LiLongLong
/
disinfector_vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

fix: 设置页修改

master
guoapeng 2 weeks ago
parent
1dbf47f748
commit
6750815b38
5 changed files with 245 additions and 277 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      .env.prod
  2. 32
      src/components/setting/User.vue
  3. 98
      src/layouts/default.vue
  4. 266
      src/views/debug/index.vue
  5. 124
      src/views/setting/index.vue

2
.env.prod
View File

@ -2,6 +2,6 @@
FT_NODE_ENV=prod
FT_WS_URL=ws://192.168.8.168:8080/ws
FT_WS_URL=ws://192.168.73.10:19001/ws
FT_PROXY=http://192.168.8.168:8080
FT_API_BASE=/api

32
src/components/setting/User.vue
View File

@ -79,20 +79,14 @@ const handleSelectionChange = (users: User.UserItem[]) => {
<template>
<div class="user">
<div class="add-user">
<bt-button
type="primary"
button-text="新增用户"
@click="onAddUser"
/>
<bt-button type="primary" button-text="新增用户" @click="onAddUser" />
</div>
<div class="user-table">
<el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
<el-table :data="tableData" style="width: 100%" height="100%" @selection-change="handleSelectionChange">
<el-table-column prop="name" label="用户名" />
<el-table-column prop="roleType" label="角色">
<template #default="{ row }">
<span v-if="row.roleType === 'admin'">
管理员
</span>
<span v-if="row.roleType === 'admin'"> 管理员 </span>
<span v-else>普通用户</span>
</template>
</el-table-column>
@ -116,28 +110,28 @@ const handleSelectionChange = (users: User.UserItem[]) => {
</template>
<style lang="scss" scoped>
.user{
.user {
height: 84vh;
overflow: hidden;
padding: 10px;
background: $gradient-color;
.add-user{
padding: 2vw;
height: 12%;
display: flex ;
.add-user {
margin: 10px;
//height: 12%;
display: flex;
align-items: center;
}
.user-table{
height: 85%;
max-height: 73vh;
.user-table {
height: 73vh;
overflow: auto;
}
}
.user-opera{
.user-opera {
display: flex;
align-items: center;
}
.view-button, .delete-button {
.view-button,
.delete-button {
border: none;
padding: 4px 8px;
border-radius: 3px;

98
src/layouts/default.vue
View File

@ -104,12 +104,16 @@ watchEffect(() => {
isLowCost.value = deviceStore.isLowCost
})
watch(() => systemStore.systemTime, (newVal) => {
if (timeInterval.value) {
clearInterval(timeInterval.value)
}
runSystemTime(newVal)
}, { deep: true })
watch(
() => systemStore.systemTime,
(newVal) => {
if (timeInterval.value) {
clearInterval(timeInterval.value)
}
runSystemTime(newVal)
},
{ deep: true },
)
const runSystemTime = (time: number) => {
if (time) {
@ -130,7 +134,8 @@ onUnmounted(() => {
const onLogout = () => {
// 判断是否有正在执行的操作
const hasEx = getDeviceStatus()
if (hasEx) { // 有正在执行的操作，给出提示
if (hasEx) {
// 有正在执行的操作，给出提示
FtMessageBox.error('退出登录前请停止当前的操作')
return
}
@ -164,8 +169,18 @@ const toggleLanguage = () => {
>
<template #default>
<div class="menu-tags">
<img class="swing-icon" :src="((router.currentRoute.value.path.includes(item.path) ? item.meta!.activeIcon : item.meta!.icon) as string)" alt="">
<span class="text" :class="{ 'active-text': router.currentRoute.value.path.includes(item.path) }">{{ item.meta!.title }}</span>
<img
class="swing-icon"
:src="
(router.currentRoute.value.path.includes(item.path)
? item.meta!.activeIcon
: item.meta!.icon) as string
"
alt=""
>
<span class="text" :class="{ 'active-text': router.currentRoute.value.path.includes(item.path) }">{{
item.meta!.title
}}</span>
</div>
</template>
</el-tag>
@ -177,15 +192,17 @@ const toggleLanguage = () => {
<img v-else :src="WifiUnconnSvg" width="20" alt="">
</span>
<el-select v-model="languageType" class="select-language" :disabled="false" @change="toggleLanguage">
<el-option v-for="language in languages" :key="language.value" style="height: 2rem;" :value="language.value" :label="language.name">
<el-option
v-for="language in languages"
:key="language.value"
style="height: 2rem"
:value="language.value"
:label="language.name"
>
{{ language.name }}
</el-option>
</el-select>
<bt-button
type="primary"
button-text="注销"
@click="onLogout"
/>
<bt-button type="primary" button-text="注销" @click="onLogout" />
</div>
</div>
</el-header>
@ -223,7 +240,7 @@ const toggleLanguage = () => {
.main {
box-sizing: border-box;
height: 100%;
background: #FAFAFA;
background: #fafafa;
.header {
height: 50px;
width: 100%;
@ -240,7 +257,7 @@ const toggleLanguage = () => {
position: sticky;
}
.header {
color: #393F46;
color: #393f46;
box-shadow: 0px 1px 5px 0px rgba(9, 39, 62, 0.15);
.logo {
@ -249,8 +266,8 @@ const toggleLanguage = () => {
display: flex;
align-items: center;
.title {
margin:0 10px;
color: #8799AB;
margin: 0 10px;
color: #8799ab;
font-weight: 600;
}
img {
@ -270,7 +287,7 @@ const toggleLanguage = () => {
display: flex;
align-items: center;
height: 100%;
.header-menu{
.header-menu {
width: 68vw;
}
.wifi-icon {
@ -314,23 +331,24 @@ const toggleLanguage = () => {
padding-left: 10px;
display: flex;
align-items: center;
.menu-tag{
height: 2.5rem;
border: 0px;
.menu-tag {
height: 30px;
border: 0;
width: 10rem;
display: flex;
gap: 5px;
font-size: 1.6vw;
background: white;
transition: background-color 0.5s;
}
.menu-tags{
.menu-tags {
display: flex;
align-items: center;
.text {
padding-left: 10px;
color: #191919;
}
.active-text{
.active-text {
color: #ffffff;
}
}
@ -342,7 +360,6 @@ const toggleLanguage = () => {
display: flex;
align-items: center;
overflow: hidden;
height: 3.5vw;
justify-content: center;
min-width: 6rem;
img {
@ -350,7 +367,7 @@ const toggleLanguage = () => {
}
}
.aside-item-active {
background: #1989FA;
background: #1989fa;
display: flex;
justify-content: center;
}
@ -361,11 +378,11 @@ const toggleLanguage = () => {
//transition: all 0.1s ease;
.aside-item {
.text {
opacity: 0
opacity: 0;
}
}
.aside-item-active {
background: rgba(0,0,0,0);
background: rgba(0, 0, 0, 0);
color: #fff;
}
}
@ -373,7 +390,7 @@ const toggleLanguage = () => {
display: flex;
align-items: center;
height: 100%;
color: #393F46;
color: #393f46;
font-weight: bold;
img {
height: 30px;
@ -402,42 +419,43 @@ const toggleLanguage = () => {
height: 100%;
}
}
.footer-left, .footer-right {
.footer-left,
.footer-right {
width: 100%;
height: 100%;
background: #fff;
border-radius: 5px;
display: flex ;
display: flex;
align-items: center;
padding: 0 20px;
}
.footer-left {
border-right: 5px solid #F6F6F6;
border-right: 5px solid #f6f6f6;
img {
height: 60%;
}
.text {
color: #1C1C1C ;
color: #1c1c1c;
margin-left: 10px;
font-size: 14px;
}
}
.footer-right {
border-left: 10px solid #F6F6F6;
border-left: 10px solid #f6f6f6;
.status {
width: 15px;
height: 15px;
border-radius: 50%;
background: #4EE993;
background: #4ee993;
}
.text {
color: #1C1C1C ;
color: #1c1c1c;
margin-left: 10px;
font-size: 14px;
}
}
.ip-info{
.ip-info {
font-size: 1.3rem;
width: 22vw;
padding-left: 1.3vw;
@ -446,13 +464,13 @@ const toggleLanguage = () => {
font-size: 1.5rem;
width: 53vw;
//padding-left: 1.3vw;
background: #F5F5F5;
background: #f5f5f5;
height: 5vh;
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
.alarm-workState{
.alarm-workState {
margin-left: 5px;
}
}

266
src/views/debug/index.vue
View File

@ -166,11 +166,7 @@ const printerDoTest = () => {
<section class="debug-env">
<!-- 左侧：H₂O₂ 传感器数据 -->
<div class="debug-env-left">
<div
v-for="(item, index) in h2O2SensorData"
:key="index"
class="debug-left-lh env-lh"
>
<div v-for="(item, index) in h2O2SensorData" :key="index" class="debug-left-lh env-lh">
<div class="debug-env-content">
<div class="debug-label env-content-p" style="text-align: right; width: 8rem">
{{ index === 0 ? '仓内环境' : item.title || `探头${index}` }}
@ -225,24 +221,13 @@ const printerDoTest = () => {
加液泵控制：
</div>
<div>
<bt-button
type="primary"
button-text="加液"
@click="liquidFillingPumpDoLiquidFilling"
/>
<bt-button type="primary" button-text="加液" @click="liquidFillingPumpDoLiquidFilling" />
</div>
<div>
<bt-button
type="primary"
button-text="排空"
@click="liquidFillingPumpDoLiquidDischarge"
/>
<bt-button type="primary" button-text="排空" @click="liquidFillingPumpDoLiquidDischarge" />
</div>
<div>
<bt-button
button-text="停止"
@click="liquidFillingPumpDoStop"
/>
<bt-button button-text="停止" @click="liquidFillingPumpDoStop" />
</div>
</div>
<div class="debug-left-lh">
@ -250,17 +235,10 @@ const printerDoTest = () => {
空压机控制：
</div>
<div>
<bt-button
type="primary"
button-text="打开"
@click="airCompressorDoOpen"
/>
<bt-button type="primary" button-text="打开" @click="airCompressorDoOpen" />
</div>
<div>
<bt-button
button-text="关闭"
@click="airCompressorDoClose"
/>
<bt-button button-text="关闭" @click="airCompressorDoClose" />
</div>
</div>
<div class="debug-left-lh">
@ -268,17 +246,10 @@ const printerDoTest = () => {
加热片控制：
</div>
<div>
<bt-button
type="primary"
button-text="打开"
@click="heatingDoOpen"
/>
<bt-button type="primary" button-text="打开" @click="heatingDoOpen" />
</div>
<div>
<bt-button
button-text="关闭"
@click="heatingDoClose"
/>
<bt-button button-text="关闭" @click="heatingDoClose" />
</div>
</div>
<div class="debug-left-lh">
@ -286,18 +257,14 @@ const printerDoTest = () => {
气密性阀门模式：
</div>
<div class="debug-bw">
<el-select v-model="airLeakDetectTestMode" placeholder="请选择模式" style="width: 100%;">
<el-select v-model="airLeakDetectTestMode" placeholder="请选择模式" style="width: 100%">
<el-option label="消毒模式" value="disinfection" />
<el-option label="加压模式" value="inflation" />
<el-option label="泄露测试模式" value="leakTest" />
</el-select>
</div>
<div>
<bt-button
type="primary"
button-text="切换"
@click="airLeakDetectTestModeDoSetMode"
/>
<bt-button type="primary" button-text="切换" @click="airLeakDetectTestModeDoSetMode" />
</div>
</div>
</div>
@ -309,29 +276,23 @@ const printerDoTest = () => {
喷液泵控制：
</div>
<div class="debug-bw">
<el-select v-model="sprayPumpGpmValue" placeholder="请选择加液量" style="width: 100%;">
<el-option v-for="opt in [2, 5, 8, 10, 15]" :key="opt" :label="`${opt} gpm`" :value="opt" />
<el-select v-model="sprayPumpGpmValue" placeholder="请选择加液量" style="width: 100%">
<el-option
v-for="opt in [2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]"
:key="opt"
:label="`${opt} gpm`"
:value="opt"
/>
</el-select>
</div>
<div>
<bt-button
type="primary"
button-text="喷液"
@click="sprayPumpDoForward"
/>
<bt-button type="primary" button-text="喷液" @click="sprayPumpDoForward" />
</div>
<div>
<bt-button
type="primary"
button-text="回流"
@click="sprayPumpDoBackward"
/>
<bt-button type="primary" button-text="回流" @click="sprayPumpDoBackward" />
</div>
<div>
<bt-button
button-text="停止"
@click="onClosePump"
/>
<bt-button button-text="停止" @click="onClosePump" />
</div>
</div>
<div class="debug-left-lh">
@ -339,17 +300,10 @@ const printerDoTest = () => {
风机控制：
</div>
<div>
<bt-button
type="primary"
button-text="打开"
@click="blowerDoOpen"
/>
<bt-button type="primary" button-text="打开" @click="blowerDoOpen" />
</div>
<div>
<bt-button
button-text="关闭"
@click="blowerDoClose"
/>
<bt-button button-text="关闭" @click="blowerDoClose" />
</div>
</div>
<div class="debug-left-lh">
@ -357,11 +311,7 @@ const printerDoTest = () => {
打印机测试：
</div>
<div>
<bt-button
type="primary"
button-text="测试"
@click="printerDoTest"
/>
<bt-button type="primary" button-text="测试" @click="printerDoTest" />
</div>
</div>
</div>
@ -372,102 +322,102 @@ const printerDoTest = () => {
</template>
<style lang="scss" scoped>
$lineHeight: 12vh;
.main-content{
height: $main-container-height;
overflow: hidden;
background: $gradient-color;
padding: 4vh;
font-size: 20px;
.debug-upper{
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: auto auto;
}
.debug-lower{
display: grid;
grid-template-columns: repeat(2,1fr);
}
.debug-left{
.debug-inside{
display: flex;
gap: 1rem;
}
}
$lineHeight: 12vh;
.main-content {
height: $main-container-height;
overflow: hidden;
background: $gradient-color;
padding: 4vh;
font-size: 20px;
.debug-upper {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: auto auto;
}
.divider{
margin-top: 4vh;
margin-bottom: 4vh;
}
.debug-env {
display: flex;
align-items: flex-start;
.debug-lower {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.debug-left-lh{
display: flex;
gap: 1rem;
height: $lineHeight;
.debug-env-content{
.debug-left {
.debug-inside {
display: flex;
.env-content-p{
padding: 5px;
}
gap: 1rem;
}
}
.debug-env-right {
}
.divider {
margin-top: 4vh;
margin-bottom: 4vh;
}
.debug-env {
display: flex;
align-items: flex-start;
}
.debug-left-lh {
display: flex;
gap: 1rem;
height: $lineHeight;
.debug-env-content {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin-left: 20rem;
align-items: flex-start;
.env-content-p {
padding: 5px;
}
}
}
.env-content-p {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 1rem;
}
.debug-env-right {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin-left: 20rem;
align-items: flex-start;
}
.debug-env-right .env-content-p {
display: flex;
align-items: center;
}
.env-content-p {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 1rem;
}
.debug-env-right .env-content-p .label {
display: inline-block;
width: 6.5rem; /* 根据最长文字“加热片电流”微调 */
text-align: right;
margin-right: 0.75rem;
}
.debug-env-right .env-content-p {
display: flex;
align-items: center;
}
.debug-env-right .env-content-p .value {
display: flex;
align-items: baseline;
gap: 0.2rem;
}
.debug-env-right .env-content-p .label {
display: inline-block;
width: 6.5rem; /* 根据最长文字“加热片电流”微调 */
text-align: right;
margin-right: 0.75rem;
}
.debug-env-right .env-content-p .debug-text {
font-weight: bold;
color: #2892F3;
}
.debug-env-right .env-content-p .value {
display: flex;
align-items: baseline;
gap: 0.2rem;
}
.debug-env-right .env-content-p .unit {
font-size: 0.9em;
}
.env-lh{
height: 5vh;
}
.debug-bw{
width: 10vw;
}
.debug-label{
width: 18vw;
text-align: end;
}
.debug-text{
color: #2892F3;
padding: 5px;
}
.debug-env-right .env-content-p .debug-text {
font-weight: bold;
color: #2892f3;
}
.debug-env-right .env-content-p .unit {
font-size: 0.9em;
}
.env-lh {
height: 5vh;
}
.debug-bw {
width: 10vw;
}
.debug-label {
width: 18vw;
text-align: end;
}
.debug-text {
color: #2892f3;
padding: 5px;
}
</style>

124
src/views/setting/index.vue
View File

@ -24,7 +24,7 @@ const selectItem = (menuCode: string) => {
<div class="menu-container">
<ul class="menu-container">
<li
v-for="(item) in settingMenus"
v-for="item in settingMenus"
:key="item.code"
:class="{ active: selectedMenuCode === item.code }"
class="setting-menu-li menu-item"
@ -55,68 +55,74 @@ const selectItem = (menuCode: string) => {
</template>
<style lang="scss" scoped>
.main-content{
display: grid;
grid-template-columns: repeat(3,1fr);
height: $main-container-height;
gap: 10px;
.main-content {
display: grid;
grid-template-columns: repeat(3, 1fr);
height: $main-container-height;
gap: 10px;
overflow: hidden;
.setting-left {
background: linear-gradient(180deg, rgba(147, 203, 255, 0.01) 50%, #ffffff 24%);
box-shadow: 0 0 4px #0000001f;
border-radius: 10px;
border: 1px solid #e1e1e1;
overflow: hidden;
.setting-left{
background: linear-gradient(180deg, rgba(147, 203, 255, 0.01) 50%, #FFFFFF 24%);
box-shadow: 0px 0px 4px #0000001f;
border-radius: 10px;
border: 1px solid #e1e1e1;
overflow: hidden;
}
.setting-right{
grid-column: 2 / 4;
box-shadow: 0px 1px 5px 0px rgba(9, 39, 62, 0.15);
background: #ffffff;
border: 1px solid #e1e1e1;
box-shadow: 0px 0px 4px #0000001f;
background: $gradient-color;
border-radius: 10px;
overflow: hidden;
}
}
.menu-container {
padding: 10px;
.setting-menu-li{
font-size: 1.5rem;
}
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
padding: 15px 15px;
display: flex;
align-items: center;
.setting-right {
grid-column: 2 / 4;
box-shadow: 0 1px 5px 0 rgba(9, 39, 62, 0.15);
background: #ffffff;
border: 1px solid #e1e1e1;
background: $gradient-color;
border-radius: 10px;
height: 5rem;
overflow: hidden;
}
li.active {
// color: #e6f7ff;
background: #e8f3ff;
border-radius: 10px;
color: #2892F3;
}
.menu-container {
padding: 5px 0;
width: 100%;
height: 100%;
overflow: auto;
.setting-menu-li {
font-size: 18px;
}
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
padding: 15px 15px;
font-size: 15px;
display: flex;
align-items: center;
//border-radius: 10px;
height: 60px;
border-left: 5px solid #fff;
transition: border-left-color 0.3s ease;
}
li.active {
border-left: 5px solid #2892f3;
// color: #e6f7ff;
background: #e8f3ff;
//border-radius: 10px;
color: #2892f3;
}
.menu-container {
width: 100%; /* 占满父容器 */
background: #fff;
// border: 1px solid #eee;
overflow: hidden; /* 配合圆角，避免阴影/边框溢出 */
}
.menu-item {
padding: 14px 20px; /* 更大触摸区域 */
font-size: 15px; /* 适配手机阅读 */
border-bottom: 1px solid #f5f5f5;
}
/* 最后一项去掉分隔线 */
.menu-item:last-child {
border-bottom: none;
}
.menu-container {
width: 100%; /* 占满父容器 */
background: #fff;
// border: 1px solid #eee;
overflow: hidden; /* 配合圆角，避免阴影/边框溢出 */
}
.menu-item {
padding: 14px 20px; /* 更大触摸区域 */
font-size: 15px; /* 适配手机阅读 */
border-bottom: 1px solid #f5f5f5;
}
/* 最后一项去掉分隔线 */
.menu-item:last-child {
border-bottom: none;
}
</style>
Write Preview
Loading…
Cancel
Save