Browse Source

fix: 代码优化;ui优化; bug修复

master
guoapeng 2 weeks ago
parent
commit
c5b4c7fe55
  1. 2
      src/assets/styles/element.scss
  2. 72
      src/components/common/SoftKeyboard/index.vue
  3. 8
      src/components/home/Environment.vue
  4. 6
      src/components/setting/Device.vue
  5. 9
      src/components/setting/User.vue
  6. 12
      src/layouts/default.vue
  7. 25
      src/views/audit/index.vue
  8. 5
      src/views/setting/index.vue

2
src/assets/styles/element.scss

@ -1,5 +1,5 @@
:root { :root {
--el-font-size-base: 18px;
--el-font-size-base: 16px;
// --el-button-size: 80px; // --el-button-size: 80px;
--el-color-primary: #1989fa; --el-color-primary: #1989fa;
//--el-button-active-bg-color: linear-gradient(90deg, #0657C0 24%, #096AE0 101%); //--el-button-active-bg-color: linear-gradient(90deg, #0657C0 24%, #096AE0 101%);

72
src/components/common/SoftKeyboard/index.vue

@ -2,7 +2,7 @@
import pinyinDict from 'libs/pinyinDict.json' import pinyinDict from 'libs/pinyinDict.json'
import { useDeviceStore } from 'stores/deviceStore' import { useDeviceStore } from 'stores/deviceStore'
import type { Ref } from 'vue' import type { Ref } from 'vue'
import { computed, defineEmits, defineProps, onMounted, ref, watch, watchEffect } from 'vue'
import { computed, onMounted, ref, watch, watchEffect } from 'vue'
const props = defineProps<{ const props = defineProps<{
modelValue: string modelValue: string
@ -22,11 +22,11 @@ const cnList = ref<string[]>([])
const pinyinMap: Record<string, string[]> = pinyinDict const pinyinMap: Record<string, string[]> = pinyinDict
const pinyinValue = ref('') const pinyinValue = ref('')
// //
const isDragging = ref(false)//
const startX = ref(0)// X
const startY = ref(0)// Y
const x = ref(0)// X
const y = ref(-50)// Y
const isDragging = ref(false) //
const startX = ref(0) // X
const startY = ref(0) // Y
const x = ref(0) // X
const y = ref(-50) // Y
const keyboardRef = ref() as Ref<HTMLDivElement> // DOM const keyboardRef = ref() as Ref<HTMLDivElement> // DOM
onMounted(() => { onMounted(() => {
@ -50,12 +50,15 @@ watchEffect(() => {
inputValue.value = props.modelValue inputValue.value = props.modelValue
}) })
watch(() => props.isVisible, (newVal) => {
watch(
() => props.isVisible,
(newVal) => {
console.log('deviceStete.deviceType--2-', deviceStete.isLowCost) console.log('deviceStete.deviceType--2-', deviceStete.isLowCost)
if (!deviceStete.isLowCost) { if (!deviceStete.isLowCost) {
isOpen.value = newVal isOpen.value = newVal
} }
})
},
)
const activeKey = ref('') const activeKey = ref('')
const keyboardLayout = computed(() => { const keyboardLayout = computed(() => {
@ -201,13 +204,18 @@ const handleTouchEnd = () => {
> >
<div> <div>
<div v-if="keyboardType === 'text'" class="pinyin-container"> <div v-if="keyboardType === 'text'" class="pinyin-container">
<span v-if="pinyinValue" style="font-size:12px">拼音{{ pinyinValue }}</span>
<span v-if="pinyinValue" style="font-size: 12px">拼音{{ pinyinValue }}</span>
<div v-if="cnList && cnList.length" class="pinyin-cn"> <div v-if="cnList && cnList.length" class="pinyin-cn">
<div <div
v-for="(cnName, cnIndex) in cnList" v-for="(cnName, cnIndex) in cnList"
:key="cnIndex" :key="cnIndex"
class="cn-name" class="cn-name"
@click="(e) => { e.stopPropagation(); handleKeyCn(cnName) }"
@click="
e => {
e.stopPropagation();
handleKeyCn(cnName);
}
"
> >
{{ cnName }} {{ cnName }}
</div> </div>
@ -225,12 +233,28 @@ const handleTouchEnd = () => {
'key-text': key !== ' ' && keyboardType === 'text', 'key-text': key !== ' ' && keyboardType === 'text',
}" }"
:style="keyboardType === 'number' ? 'height: 10vh' : 'height:3rem;'" :style="keyboardType === 'number' ? 'height: 10vh' : 'height:3rem;'"
@click="(e) => {
e.stopPropagation()
handleKeyPress(key)
}"
@click="
e => {
e.stopPropagation();
handleKeyPress(key);
}
"
> >
{{ key === ' ' ? '空格' : key === 'del' ? '删除' : key === 'enter' ? '确认' : key === 'close' ? '关闭' : key === 'cn' ? '英文' : key === 'en' ? '拼音' : key }}
{{
key === ' '
? '空格'
: key === 'del'
? '删除'
: key === 'enter'
? '确认'
: key === 'close'
? '关闭'
: key === 'cn'
? '英文'
: key === 'en'
? '拼音'
: key
}}
</button> </button>
</div> </div>
</div> </div>
@ -258,7 +282,7 @@ const handleTouchEnd = () => {
.keyboard-header { .keyboard-header {
margin-bottom: 10px; margin-bottom: 10px;
position: absolute; position: absolute;
float:right;
float: right;
} }
.keyboard-header button { .keyboard-header button {
@ -273,20 +297,20 @@ const handleTouchEnd = () => {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 8px; gap: 8px;
.pinyin-container{
.pinyin-container {
display: flex; display: flex;
width: 80%; width: 80%;
height: 4rem; height: 4rem;
padding-left: 2rem; padding-left: 2rem;
.pinyin-cn{
.pinyin-cn {
color: #1890ff; color: #1890ff;
padding-left: 1rem; padding-left: 1rem;
display: flex; display: flex;
width: 1rem; width: 1rem;
position: relative; position: relative;
gap:5px;
gap: 5px;
//font-family: fangsong; //font-family: fangsong;
.cn-name{
.cn-name {
font-size: 2.5rem; font-size: 2.5rem;
} }
} }
@ -321,7 +345,7 @@ const handleTouchEnd = () => {
.key-space { .key-space {
margin-top: 3.5px; margin-top: 3.5px;
width: 75vw;;
width: 75vw;
} }
.key-special { .key-special {
@ -333,7 +357,7 @@ const handleTouchEnd = () => {
transform: scale(0.95); transform: scale(0.95);
} }
.key-number{
.key-number {
width: 30vw; width: 30vw;
height: 6vh; height: 6vh;
margin: 5px; margin: 5px;
@ -344,7 +368,7 @@ const handleTouchEnd = () => {
height: 5vh; height: 5vh;
margin: 5px; margin: 5px;
} }
.input-w{
.input-w {
width: 20%; width: 20%;
height: 4rem; height: 4rem;
font-size: 2rem; font-size: 2rem;
@ -357,7 +381,7 @@ const handleTouchEnd = () => {
left: 0; left: 0;
width: 90%; width: 90%;
border-radius: 16px; border-radius: 16px;
box-shadow: 0 -4px 12px rgba(0,0,0,0.1);
box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
overflow: hidden; overflow: hidden;
z-index: 9999; z-index: 9999;
/* 让拖动更顺滑 */ /* 让拖动更顺滑 */

8
src/components/home/Environment.vue

@ -60,7 +60,7 @@ onMounted(() => {
温度 温度
</div> </div>
<div class="env-row-value"> <div class="env-row-value">
{{ envParams.temp === -1 ? '--' : roundNumber(envParams.temp, 2) }}°C
{{ !envParams.temp || envParams.temp === -1 ? '--' : roundNumber(envParams.temp, 2) }}°C
</div> </div>
</div> </div>
<div class="env-row"> <div class="env-row">
@ -68,7 +68,7 @@ onMounted(() => {
相对湿度 相对湿度
</div> </div>
<div class="env-row-value"> <div class="env-row-value">
{{ envParams.rh === -1 ? '--' : roundNumber(envParams.rh, 2) }}%RH
{{ !envParams.rh || envParams.rh === -1 ? '--' : roundNumber(envParams.rh, 2) }}%RH
</div> </div>
</div> </div>
<div class="env-row odd"> <div class="env-row odd">
@ -76,7 +76,7 @@ onMounted(() => {
相对饱和度 相对饱和度
</div> </div>
<div class="env-row-value"> <div class="env-row-value">
{{ envParams.rs === -1 ? '--' : roundNumber(envParams.rs, 2) }}%RS
{{ !envParams.rs || envParams.rs === -1 ? '--' : roundNumber(envParams.rs, 2) }}%RS
</div> </div>
</div> </div>
<div class="env-row"> <div class="env-row">
@ -84,7 +84,7 @@ onMounted(() => {
汽化过氧化氢 汽化过氧化氢
</div> </div>
<div class="env-row-value"> <div class="env-row-value">
{{ envParams.h2o2 === -1 ? '--' : roundNumber(envParams.h2o2, 2) }}ppm
{{ !envParams.h2o2 || envParams.h2o2 === -1 ? '--' : roundNumber(envParams.h2o2, 2) }}ppm
</div> </div>
</div> </div>
</template> </template>

6
src/components/setting/Device.vue

@ -39,8 +39,8 @@ const screenHeight = ref(height)
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
.device-ul{
background: #F6FAFE;
.device-ul {
background: #f6fafe;
height: 4rem; height: 4rem;
display: flex; display: flex;
align-items: center; align-items: center;
@ -48,6 +48,6 @@ const screenHeight = ref(height)
border-radius: 10px; border-radius: 10px;
margin-top: 1rem; margin-top: 1rem;
padding-left: 2rem; padding-left: 2rem;
font-size: 1.5rem;
font-size: 16px;
} }
</style> </style>

9
src/components/setting/User.vue

@ -111,19 +111,16 @@ const handleSelectionChange = (users: User.UserItem[]) => {
<style lang="scss" scoped> <style lang="scss" scoped>
.user { .user {
height: 84vh;
height: 100%;
overflow: hidden; overflow: hidden;
padding: 10px;
background: $gradient-color; background: $gradient-color;
.add-user { .add-user {
margin: 10px;
//height: 12%;
display: flex; display: flex;
align-items: center; align-items: center;
height: 50px;
} }
.user-table { .user-table {
height: 73vh;
overflow: auto;
height: calc(100% - 50px);
} }
} }
.user-opera { .user-opera {

12
src/layouts/default.vue

@ -261,8 +261,12 @@ const statusMap = {
<span v-if="!systemStore.systemLogList.length" class="text">设备运行状态</span> <span v-if="!systemStore.systemLogList.length" class="text">设备运行状态</span>
<el-popover v-else width="auto" trigger="click" placement="top"> <el-popover v-else width="auto" trigger="click" placement="top">
<template #reference> <template #reference>
<el-tag style="width: 100%" :type="statusMap[systemStore.systemLogList[0]?.status as keyof typeof statusMap].type">
{{ statusMap[systemStore.systemLogList[0]?.status as keyof typeof statusMap].name }}: {{ systemStore.systemLogList[0]?.name }}
<el-tag
style="width: 100%"
:type="statusMap[systemStore.systemLogList[0]?.status as keyof typeof statusMap].type"
>
{{ statusMap[systemStore.systemLogList[0]?.status as keyof typeof statusMap].name }}:
{{ systemStore.systemLogList[0]?.name }}
{{ systemStore.systemLogList[0]?.time }} {{ systemStore.systemLogList[0]?.time }}
</el-tag> </el-tag>
</template> </template>
@ -273,7 +277,7 @@ const statusMap = {
:key :key
:type="statusMap[item?.status as keyof typeof statusMap].type" :type="statusMap[item?.status as keyof typeof statusMap].type"
> >
<div style="display: flex;justify-content: space-between;width: 100%">
<div style="display: flex; justify-content: space-between; width: 100%">
<span> <span>
<span>{{ item.name }}: </span> <span>{{ item.name }}: </span>
<span>{{ statusMap[item.status as keyof typeof statusMap].name }}</span> <span>{{ statusMap[item.status as keyof typeof statusMap].name }}</span>
@ -400,7 +404,7 @@ const statusMap = {
display: flex; display: flex;
gap: 5px; gap: 5px;
font-size: 1.6vw; font-size: 1.6vw;
background: white;
background: rgba(0, 0, 0, 0);
transition: background-color 0.5s; transition: background-color 0.5s;
} }
.menu-tags { .menu-tags {

25
src/views/audit/index.vue

@ -98,14 +98,10 @@ const handleSelectionChange = (users: Audit.AuditItem[]) => {
<div class="dashboard-container"> <div class="dashboard-container">
<main class="main-content"> <main class="main-content">
<div class="audit-export"> <div class="audit-export">
<bt-button
type="primary"
button-text="导出"
@click="onExportRecord"
/>
<bt-button type="primary" button-text="导出" @click="onExportRecord" />
</div> </div>
<div class="audit-table"> <div class="audit-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 type="selection" width="55" /> <el-table-column type="selection" width="55" />
<el-table-column prop="usrName" label="操作人" width="250" /> <el-table-column prop="usrName" label="操作人" width="250" />
<el-table-column prop="behaviorinfo" label="操作内容" /> <el-table-column prop="behaviorinfo" label="操作内容" />
@ -120,24 +116,23 @@ const handleSelectionChange = (users: Audit.AuditItem[]) => {
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
.main-content{
.main-content {
height: $main-container-height; height: $main-container-height;
overflow: hidden; overflow: hidden;
background: $gradient-color; background: $gradient-color;
box-shadow: 0px 1px 5px 0px rgba(9, 39, 62, 0.15); box-shadow: 0px 1px 5px 0px rgba(9, 39, 62, 0.15);
.audit-export{
padding: 2vw;
.audit-export {
height: 50px;
padding: 0 10px;
display: flex; display: flex;
align-items: center; align-items: center;
height: 12%;
} }
.audit-table{
max-height: 67vh;
.audit-table {
overflow: auto; overflow: auto;
height: 76%;
height: calc(100% - 100px);
} }
.audit-pagination{
height: 12%;
.audit-pagination {
height: 50px;
display: flex; display: flex;
align-items: center; align-items: center;
float: right; float: right;

5
src/views/setting/index.vue

@ -40,9 +40,9 @@ const selectItem = (menuCode: string) => {
<div v-if="selectedMenuCode === 'defaultFormula'"> <div v-if="selectedMenuCode === 'defaultFormula'">
<FormulaConfig type="setting" /> <FormulaConfig type="setting" />
</div> </div>
<div v-if="selectedMenuCode === 'user'">
<template v-if="selectedMenuCode === 'user'">
<User /> <User />
</div>
</template>
<div v-if="selectedMenuCode === 'date'"> <div v-if="selectedMenuCode === 'date'">
<SystemDate /> <SystemDate />
</div> </div>
@ -76,6 +76,7 @@ const selectItem = (menuCode: string) => {
background: $gradient-color; background: $gradient-color;
border-radius: 10px; border-radius: 10px;
overflow: hidden; overflow: hidden;
padding: 10px;
} }
} }
.menu-container { .menu-container {

Loading…
Cancel
Save