Browse Source

Merge remote-tracking branch 'origin/master'

# Conflicts:
#	src/app.vue
master
王梦远 2 weeks ago
parent
commit
0522d0e278
  1. 28
      src/components/formula/FormulaTable.vue
  2. 33
      src/components/liquid/ScaleRuler.vue
  3. 23
      src/router/routes.ts
  4. 9
      src/stores/deviceStore.ts
  5. 19
      src/stores/systemStore.ts
  6. 195
      src/views/home/index.vue

28
src/components/formula/FormulaTable.vue

@ -48,13 +48,11 @@ const initFormulaList = () => {
formulaStore.initFormulaList() formulaStore.initFormulaList()
} }
} }
watch(selectedIndex, () => {
})
watch(selectedIndex, () => {})
const selectRecipe = (item: Formula.FormulaItem, index: number) => { const selectRecipe = (item: Formula.FormulaItem, index: number) => {
selectedIndex.value = selectedIndex.value === index ? null : index
selectedIndex.value = index
formulaStore.updateSelectedIndex(index) formulaStore.updateSelectedIndex(index)
console.log('selectedIndex--', selectedIndex)
console.log('selectedIndex--', selectedIndex.value)
item = convertValuesToInt(item) as Formula.FormulaItem item = convertValuesToInt(item) as Formula.FormulaItem
formulaStore.updateSelectedFormulaData(item) formulaStore.updateSelectedFormulaData(item)
} }
@ -84,15 +82,11 @@ const onStartFormula = (item: Formula.FormulaItem) => {
} }
const deleteRecipe = (item: Formula.FormulaItem) => { const deleteRecipe = (item: Formula.FormulaItem) => {
ElMessageBox.confirm(
'请确认是否删除?',
'删除',
{
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
},
).then(() => {
ElMessageBox.confirm('请确认是否删除?', '删除', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
}).then(() => {
if (item.formula_id) { if (item.formula_id) {
const delParams = { const delParams = {
className: 'SettingMgrService', className: 'SettingMgrService',
@ -143,7 +137,6 @@ const deleteRecipe = (item: Formula.FormulaItem) => {
<style scoped> <style scoped>
.recipe-management { .recipe-management {
border: 1px solid #ccc; border: 1px solid #ccc;
padding: 10px; padding: 10px;
border-radius: 5px; border-radius: 5px;
@ -155,7 +148,7 @@ const deleteRecipe = (item: Formula.FormulaItem) => {
list-style: none; list-style: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
.formula-name{
.formula-name {
font-size: 1.2rem; font-size: 1.2rem;
color: var(--el-text-color-regular); color: var(--el-text-color-regular);
width: 10rem; width: 10rem;
@ -188,7 +181,8 @@ const deleteRecipe = (item: Formula.FormulaItem) => {
align-items: center; align-items: center;
} }
.view-button, .delete-button {
.view-button,
.delete-button {
font-size: 1rem; font-size: 1rem;
border: none; border: none;
padding: 4px 8px; padding: 4px 8px;

33
src/components/liquid/ScaleRuler.vue

@ -2,16 +2,27 @@
import { computed, ref, watch } from 'vue' import { computed, ref, watch } from 'vue'
// 30005000 // 30005000
const props = defineProps<{
// const props = defineProps({
// maxScale: {
// type: number
// default: 2500
// },
// rulerHeight: {
// type: number
// default: 0
// }
// })
const props = defineProps({
maxScale: { maxScale: {
type: number
default: 2500
} // 30005000
type: Number,
default: 2500,
},
rulerHeight: { rulerHeight: {
type: number
default: 0
}
}>()
type: Number,
default: 0,
},
})
// //
const baseInterval = 300 // const baseInterval = 300 //
@ -59,11 +70,7 @@ const rulerWidth = (mark) => {
width: `${rulerWidth(mark)}%`, width: `${rulerWidth(mark)}%`,
}" }"
> >
<div
v-if="mark.showText"
class="mark-text"
:style="{ transform: 'translateX(-120%) translateY(-50%)' }"
>
<div v-if="mark.showText" class="mark-text" :style="{ transform: 'translateX(-120%) translateY(-50%)' }">
<div>{{ mark.value }}g</div> <div>{{ mark.value }}g</div>
</div> </div>
</div> </div>

23
src/router/routes.ts

@ -27,15 +27,18 @@ const authRoutes = ref<RouteRecordRaw[]>([
icon: n_disinfect, icon: n_disinfect,
activeIcon: s_disinfect, activeIcon: s_disinfect,
}, },
children: [{
path: 'config',
name: 'config',
component: () => import('@/components/home/Config.vue'),
}, {
path: 'chart',
name: 'chart',
component: () => import('views/home/chart.vue'),
}],
children: [
{
path: 'config',
name: 'config',
component: () => import('components/home/config.vue'),
},
{
path: 'chart',
name: 'chart',
component: () => import('views/home/chart.vue'),
},
],
}, },
{ {
path: '/liquid', path: '/liquid',
@ -111,7 +114,7 @@ watchEffect(() => {
const deviceStore = useDeviceStore() const deviceStore = useDeviceStore()
if (deviceStore.isLowCost) { if (deviceStore.isLowCost) {
authRoutes.value = authRoutes.value.filter((item) => { authRoutes.value = authRoutes.value.filter((item) => {
return item.name !== 'seal'
return item.name !== 'seal' && item.name !== 'liquid'
}) })
} }
}, 2000) }, 2000)

9
src/stores/deviceStore.ts

@ -39,12 +39,9 @@ export const useDeviceStore = defineStore('device', () => {
const updateDeviceInfo = (info: Device.DeviceInfo) => { const updateDeviceInfo = (info: Device.DeviceInfo) => {
deviceInfo.value = info deviceInfo.value = info
if (info.projectType === 'DT600B') {
isLowCost.value = true
}
else {
isLowCost.value = false
}
isLowCost.value = info.projectType === 'DT600B'
// isLowCost.value = true
console.log(isLowCost.value)
} }
/** /**

19
src/stores/systemStore.ts

@ -11,16 +11,19 @@ export const useSystemStore = defineStore('system', () => {
const loginForm = ref({ const loginForm = ref({
name: import.meta.env.FT_NODE_ENV !== 'prod' ? 'admin' : '', name: import.meta.env.FT_NODE_ENV !== 'prod' ? 'admin' : '',
pwd: import.meta.env.FT_NODE_ENV !== 'prod' ? '9973' : '',
pwd: import.meta.env.FT_NODE_ENV !== 'prod' ? '123' : '',
}) })
const languages = [{
name: '中文',
value: 'zh-cn',
}, {
name: 'English',
value: 'en',
}]
const languages = [
{
name: '中文',
value: 'zh-cn',
},
// {
// name: 'English',
// value: 'en',
// },
]
const menuExpand = true const menuExpand = true
const isDebug = import.meta.env.FT_NODE_ENV !== 'prod' const isDebug = import.meta.env.FT_NODE_ENV !== 'prod'

195
src/views/home/index.vue

@ -5,6 +5,7 @@ import HomeFormula from 'components/home/HomeFormula.vue'
import HomeLogLevel from 'components/home/HomeLogLevel.vue' import HomeLogLevel from 'components/home/HomeLogLevel.vue'
import HomeOperation from 'components/home/HomeOperation.vue' import HomeOperation from 'components/home/HomeOperation.vue'
import HomeSetting from 'components/home/HomeSetting.vue' import HomeSetting from 'components/home/HomeSetting.vue'
import { useDeviceStore } from 'stores/deviceStore'
import { useHomeStore } from 'stores/homeStore' import { useHomeStore } from 'stores/homeStore'
import { useLiquidStore } from 'stores/liquidStore' import { useLiquidStore } from 'stores/liquidStore'
import { computed, ref, watchEffect } from 'vue' import { computed, ref, watchEffect } from 'vue'
@ -16,6 +17,7 @@ import { useSystemStore } from '@/stores/systemStore'
const route = useRoute() const route = useRoute()
const homeStore = useHomeStore() const homeStore = useHomeStore()
const deviceStore = useDeviceStore()
const liquidStore = useLiquidStore() const liquidStore = useLiquidStore()
const formulaStore = useFormulaStore() const formulaStore = useFormulaStore()
const systemStore = useSystemStore() const systemStore = useSystemStore()
@ -69,7 +71,7 @@ const nowLiquidProgress = computed(() => {
if (!liquidInfo.value.nowLiquid) { if (!liquidInfo.value.nowLiquid) {
return 0 return 0
} }
const nl = roundNumber(Number(((liquidInfo.value.nowLiquid / liquidTotal.value) * 100)), 0)
const nl = roundNumber(Number((liquidInfo.value.nowLiquid / liquidTotal.value) * 100), 0)
return nl return nl
}) })
@ -82,34 +84,32 @@ const nowLiquid = computed(() => {
<template> <template>
<div v-loading="loading" class="home"> <div v-loading="loading" class="home">
<div v-if="route.path === '/home'" class="home-grid-container"> <div v-if="route.path === '/home'" class="home-grid-container">
<div class="home-grid-item merged-cell">
<div class="home-left">
<el-card class="card">
<template #default>
<!-- <div class="title-line" /> -->
<div class="card-title-name">
<img :src="homeLiquid"> {{ $t('message.disinfectant') }}
<div class="home-left">
<el-card v-if="!deviceStore.isLowCost" class="card">
<template #default>
<!-- <div class="title-line" /> -->
<div class="card-title-name">
<img :src="homeLiquid"> 消毒液
</div>
<div class="card-progress">
<div class="card-progress-content">
<el-progress :text-inside="true" :stroke-width="35" :percentage="nowLiquidProgress" />
</div> </div>
<div class="card-progress">
<div class="card-progress-content">
<el-progress :text-inside="true" :stroke-width="35" :percentage="nowLiquidProgress" />
</div>
</div>
<div class="card-num-g">
{{ nowLiquid }}g
</div>
</template>
</el-card>
<el-card class="card">
<Environment :env-params="environmentParams" line-color="#ffb380" />
</el-card>
<el-card class="card">
<Environment :env-params="probe1Params" line-color="#80ffb3" />
</el-card>
<el-card class="card">
<Environment :env-params="probe2Params" line-color="#cc99ff" />
</el-card>
</div>
</div>
<div class="card-num-g">
{{ nowLiquid }}g
</div>
</template>
</el-card>
<el-card class="card" :class="{ 'card-center': deviceStore.isLowCost }">
<Environment :env-params="environmentParams" />
</el-card>
<el-card class="card">
<Environment :env-params="probe1Params" />
</el-card>
<el-card class="card">
<Environment :env-params="probe2Params" />
</el-card>
</div> </div>
<div class="home-grid-item home-right"> <div class="home-grid-item home-right">
<!-- 正在进行的配方 --> <!-- 正在进行的配方 -->
@ -129,74 +129,83 @@ const nowLiquid = computed(() => {
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
$input-height: 3rem;
.home{
width: 100%;
height: 100%;
}
.home-grid-container {
$input-height: 3rem;
.home {
width: 100%;
height: 100%;
}
.home-grid-container {
height: 100%;
width: 100%;
display: grid;
grid-template-columns: 2fr 1fr;
gap: 10px;
}
.home-left {
height: 100%;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 10px;
.card {
text-align: center;
width: 100%; width: 100%;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.home-merged-cell {
grid-column: 1 / 2;
background-color: #ff6b6b;
}
.home-left {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, auto);
gap: 20px;
.card {
text-align: center;
height: 40vh;
width: 30.5vw;
border: 1px solid rgb(225, 225, 225);
position: relative;
border-radius: 10px 10px 10px 10px;
background: #FFFFFF;
background: linear-gradient(180deg, rgba(147, 203, 255,1) -190%, #FFFFFF 24%);
.title-line{
height: 1vw;
background-color: #b3d9ff;
position: absolute;
width: 100%;
border-radius: 10px 10px 0 0;
margin: -2.12rem;
}
.card-title-name{
display: flex;
align-items: center;
gap: 10px;
font-size: 26px;
padding: 1rem;
}
.card-progress{
display: flex;
justify-content: center;
margin-top: 3rem;
.card-progress-content{
width: 92%;
}
}
.card-num-g{
margin-top: 3.5vw;
font-size: 26px;
font-weight: bold;
border: 1px solid rgb(225, 225, 225);
position: relative;
border-radius: 10px 10px 10px 10px;
background: #ffffff;
background: linear-gradient(180deg, rgba(147, 203, 255, 1) -190%, #ffffff 24%);
.title-line {
height: 1vw;
background-color: #b3d9ff;
position: absolute;
width: 100%;
border-radius: 10px 10px 0 0;
margin: -2.12rem;
}
.card-title-name {
display: flex;
align-items: center;
gap: 10px;
font-size: 26px;
padding: 1rem;
}
.card-progress {
display: flex;
justify-content: center;
margin-top: 3rem;
.card-progress-content {
width: 92%;
} }
} }
}
.home-right{
width: 32.8vw;
background: linear-gradient(180deg, rgba(147, 203, 255,1) -190%, #FFFFFF 24%);
position: relative;
border-radius: 10px;
box-shadow: 0 1px 5px 0 rgba(9, 39, 62, 0.15);
}
.el-button {
background-color: #2892F3 !important;
.card-num-g {
margin-top: 3.5vw;
font-size: 26px;
font-weight: bold;
}
} }
}
.home-right {
background: linear-gradient(180deg, rgba(147, 203, 255, 1) -190%, #ffffff 24%);
position: relative;
border-radius: 10px;
box-shadow: 0 1px 5px 0 rgba(9, 39, 62, 0.15);
}
.el-button {
background-color: #2892f3 !important;
}
.card-center {
grid-column: 1 / -1; //
justify-self: center; //
}
</style> </style>
Loading…
Cancel
Save