LiLongLong
2 months ago
38 changed files with 1130 additions and 455 deletions
-
29package-lock.json
-
1package.json
-
40src/app.vue
-
1src/assets/images/background-logo.svg
-
0src/components/common/Card/index.vue
-
128src/components/common/ErrorModal/index.vue
-
2src/components/common/FTButton/index.vue
-
20src/components/common/SelectModal/index.vue
-
2src/components/common/SoftKeyboard/index.vue
-
92src/components/formula/FormulaConfig.vue
-
16src/components/formula/FormulaTable.vue
-
64src/components/home/Environment.vue
-
66src/components/home/config.vue
-
2src/components/liquid/LiquidLevel.vue
-
50src/components/seal/DashboardChart.vue
-
32src/components/setting/AddUser.vue
-
11src/components/setting/User.vue
-
48src/layouts/default.vue
-
48src/libs/countdownTimer.ts
-
39src/libs/modalUtil.ts
-
2src/libs/socket.ts
-
20src/libs/utils.ts
-
2src/main.ts
-
2src/router/index.ts
-
45src/stores/formulaStore.ts
-
61src/stores/homeStore.ts
-
14src/stores/liquidStore.ts
-
14src/stores/sealStore.ts
-
30src/stores/settingStore.ts
-
26src/types/home.d.ts
-
5src/types/liquid.d.ts
-
8src/types/seal.d.ts
-
2src/types/setting.d.ts
-
418src/views/debug/index.vue
-
2src/views/formula/index.vue
-
68src/views/home/index.vue
-
50src/views/liquid/index.vue
-
125src/views/seal/index.vue
1
src/assets/images/background-logo.svg
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -0,0 +1,128 @@ |
|||||
|
<script setup lang="ts"> |
||||
|
defineProps({ |
||||
|
title: { |
||||
|
type: String, |
||||
|
default: '错误提示', |
||||
|
}, |
||||
|
message: { |
||||
|
type: String, |
||||
|
default: '发生错误', |
||||
|
}, |
||||
|
confirmText: { |
||||
|
type: String, |
||||
|
default: '确定', |
||||
|
}, |
||||
|
visible: { |
||||
|
type: Boolean, |
||||
|
default: false, |
||||
|
}, |
||||
|
}) |
||||
|
const emits = defineEmits(['close']) |
||||
|
const close = () => { |
||||
|
emits('close') |
||||
|
} |
||||
|
// 点击遮罩层关闭 |
||||
|
// const handleMaskClick = (e: MouseEvent) => { |
||||
|
// if (e.target === e.currentTarget) { |
||||
|
// close() |
||||
|
// } |
||||
|
// } |
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<div v-if="visible" class="error-box-mask"> |
||||
|
<div class="error-box-container"> |
||||
|
<div class="error-box-header"> |
||||
|
<div class="error-title">{{ title }}</div> |
||||
|
<button @click="close">X</button> |
||||
|
</div> |
||||
|
<div class="error-box-content"> |
||||
|
<slot>{{ message }}</slot> |
||||
|
</div> |
||||
|
<div class="error-box-footer"> |
||||
|
<button @click="close" class="error-box-btn">{{ confirmText }}</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
$btn-color: #e66541; |
||||
|
.error-box-mask { |
||||
|
position: fixed; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
background-color: rgba(0, 0, 0, 0.5); |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
z-index: 9999; |
||||
|
} |
||||
|
|
||||
|
.error-box-container { |
||||
|
background-color: white; |
||||
|
border-radius: 4px; |
||||
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); |
||||
|
width: 350px; |
||||
|
max-width: 90%; |
||||
|
} |
||||
|
|
||||
|
.error-box-header { |
||||
|
padding: 15px; |
||||
|
border-bottom: 1px solid #ebeef5; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.error-title{ |
||||
|
color: $btn-color; |
||||
|
font-size: 20px; |
||||
|
} |
||||
|
|
||||
|
.error-box-header h3 { |
||||
|
margin: 0; |
||||
|
font-size: 18px; |
||||
|
font-weight: 500; |
||||
|
color: #303133; |
||||
|
} |
||||
|
|
||||
|
.error-box-header button { |
||||
|
background: none; |
||||
|
border: none; |
||||
|
font-size: 18px; |
||||
|
color: #909399; |
||||
|
cursor: pointer; |
||||
|
outline: none; |
||||
|
} |
||||
|
|
||||
|
.error-box-content { |
||||
|
padding: 20px 15px; |
||||
|
font-size: 14px; |
||||
|
color: #606266; |
||||
|
line-height: 1.5; |
||||
|
} |
||||
|
|
||||
|
.error-box-footer { |
||||
|
padding: 15px; |
||||
|
border-top: 1px solid #ebeef5; |
||||
|
text-align: right; |
||||
|
} |
||||
|
|
||||
|
.error-box-btn { |
||||
|
padding: 8px 16px; |
||||
|
background-color: $btn-color; |
||||
|
color: white; |
||||
|
border: none; |
||||
|
border-radius: 4px; |
||||
|
cursor: pointer; |
||||
|
font-size: 14px; |
||||
|
outline: none; |
||||
|
} |
||||
|
|
||||
|
.error-box-btn:hover { |
||||
|
background-color: $btn-color; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,48 @@ |
|||||
|
class CountdownTimer { |
||||
|
private endTime: number |
||||
|
private timer: number | null = null |
||||
|
private callback: (formatTimeStr: string) => void |
||||
|
|
||||
|
constructor(timestamp: number, fn: (formatTimeStr: string) => void) { |
||||
|
this.endTime = timestamp |
||||
|
this.callback = fn |
||||
|
this.updateDisplay() |
||||
|
} |
||||
|
|
||||
|
private formatTime(seconds: number): string { |
||||
|
const hours = Math.floor(seconds / 3600) |
||||
|
const minutes = Math.floor((seconds % 3600) / 60) |
||||
|
const secs = seconds % 60 |
||||
|
const timeStr = [ |
||||
|
hours.toString().padStart(2, '0'), |
||||
|
minutes.toString().padStart(2, '0'), |
||||
|
secs.toString().padStart(2, '0'), |
||||
|
].join(':') |
||||
|
return timeStr |
||||
|
} |
||||
|
|
||||
|
private updateDisplay(): void { |
||||
|
this.timer = window.setInterval(() => { |
||||
|
const seconds = Math.floor(this.endTime / 1000) |
||||
|
const curStateRemainTimeS = this.formatTime(seconds) |
||||
|
this.callback && this.callback(curStateRemainTimeS) |
||||
|
this.endTime -= 1000 |
||||
|
}, 1000) |
||||
|
} |
||||
|
|
||||
|
public startTimer(): void { |
||||
|
this.timer = window.setInterval(() => { |
||||
|
this.updateDisplay() |
||||
|
}, 1000) |
||||
|
} |
||||
|
|
||||
|
public stopTimer(): void { |
||||
|
if (this.timer) { |
||||
|
clearInterval(this.timer) |
||||
|
this.timer = null |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 倒计时
|
||||
|
export default CountdownTimer |
||||
@ -0,0 +1,39 @@ |
|||||
|
import type { App } from 'vue' |
||||
|
import ErrorBox from 'components/common/ErrorModal/index.vue' |
||||
|
import { createVNode, render } from 'vue' |
||||
|
|
||||
|
interface ErrorBoxOptions { |
||||
|
title?: string |
||||
|
message?: string |
||||
|
confirmText?: string |
||||
|
onClose?: () => void |
||||
|
} |
||||
|
let instance: any = null |
||||
|
const ErrorModalBox = { |
||||
|
alert(options: ErrorBoxOptions | string = {}) { |
||||
|
if (typeof options === 'string') { |
||||
|
options = { message: options } |
||||
|
} |
||||
|
const container = document.createElement('div') |
||||
|
instance = createVNode(ErrorBox, { |
||||
|
...options, |
||||
|
visible: true, |
||||
|
onClose: () => { |
||||
|
options.onClose?.() |
||||
|
close() |
||||
|
}, |
||||
|
}) |
||||
|
render(instance, container) |
||||
|
document.body.appendChild(container.firstElementChild!) |
||||
|
|
||||
|
const close = () => { |
||||
|
render(null, container) |
||||
|
document.body.removeChild(container) |
||||
|
instance = null |
||||
|
} |
||||
|
}, |
||||
|
install(app: App) { |
||||
|
app.config.globalProperties.$errorBox = ErrorBox |
||||
|
}, |
||||
|
} |
||||
|
export default ErrorModalBox |
||||
@ -0,0 +1,14 @@ |
|||||
|
import { defineStore } from 'pinia' |
||||
|
import { ref } from 'vue' |
||||
|
|
||||
|
export const useLiquidStore = defineStore('Liquid', () => { |
||||
|
const liquidWorkState = ref<Liquid.LiquidState>('idle') |
||||
|
const updateLiquidWorkState = (state: Liquid.LiquidState) => { |
||||
|
liquidWorkState.value = state |
||||
|
} |
||||
|
|
||||
|
return { |
||||
|
liquidWorkState, |
||||
|
updateLiquidWorkState, |
||||
|
} |
||||
|
}) |
||||
@ -0,0 +1,14 @@ |
|||||
|
import { defineStore } from 'pinia' |
||||
|
import { ref } from 'vue' |
||||
|
|
||||
|
export const useSealStore = defineStore('seal', () => { |
||||
|
const sealState = ref('idle') |
||||
|
const updateSealState = (status: Seal.SealState) => { |
||||
|
sealState.value = status |
||||
|
} |
||||
|
|
||||
|
return { |
||||
|
sealState, |
||||
|
updateSealState, |
||||
|
} |
||||
|
}) |
||||
@ -0,0 +1,5 @@ |
|||||
|
declare namespace Liquid { |
||||
|
// idle,addingLiquid,emptyLineLiquid 空闲，加液中，清空管路中
|
||||
|
// idle，work 空闲，排液中
|
||||
|
type LiquidState = 'idle' | 'addingLiquid' | 'emptyLineLiquid' | 'work' |
||||
|
} |
||||
@ -0,0 +1,8 @@ |
|||||
|
declare namespace Seal { |
||||
|
// idle // 空闲
|
||||
|
// initDevice //初始化设备
|
||||
|
// inflating //打压中
|
||||
|
// leakTesting // 检漏中
|
||||
|
// stopping // 停止中
|
||||
|
type SealState = 'idle' | 'initDevice' | 'inflating' | 'leakTesting' | 'stopping' |
||||
|
} |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue