Browse Source

运行参数使用统一的组件 样式统一

master
王梦远 2 weeks ago
parent
commit
ec200f60e7
  1. 27
      src/components/home/HomeSetting.vue
  2. 46
      src/components/home/Runtime.vue
  3. 47
      src/views/home/chart.vue

27
src/components/home/HomeSetting.vue

@ -2,8 +2,8 @@
import { syncSendCmd } from 'apis/system' import { syncSendCmd } from 'apis/system'
import BtButton from 'components/common/BTButton/index.vue' import BtButton from 'components/common/BTButton/index.vue'
import CascadingSelectModal from 'components/common/CascadingSelectModal/index.vue' import CascadingSelectModal from 'components/common/CascadingSelectModal/index.vue'
import RunFormulaConfig from 'components/formula/RunFormulaConfig.vue'
import Config from 'components/home/config.vue' import Config from 'components/home/config.vue'
import Runtime from 'components/home/Runtime.vue'
import { compareJSON } from 'libs/utils' import { compareJSON } from 'libs/utils'
import { cloneDeep } from 'lodash' import { cloneDeep } from 'lodash'
import { computed, onMounted, provide, ref, watchEffect } from 'vue' import { computed, onMounted, provide, ref, watchEffect } from 'vue'
@ -223,8 +223,10 @@ const settingWidth = computed(() => {
</ft-dialog> </ft-dialog>
<!-- 运行参数 --> <!-- 运行参数 -->
<ft-dialog v-model="disinfectRuntimeVisible" title="运行参数" width="80vw"> <ft-dialog v-model="disinfectRuntimeVisible" title="运行参数" width="80vw">
<div style="height: 80vh; overflow: auto">
<Runtime ref="runtimeRef" />
<div class="main-content">
<div class="formula-config">
<RunFormulaConfig ref="runtimeRef" />
</div>
</div> </div>
<template #footer> <template #footer>
<div class="config-btn"> <div class="config-btn">
@ -264,6 +266,25 @@ const settingWidth = computed(() => {
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
.main-content {
overflow: hidden;
//height: auto;
//background: $gradient-color;
padding: 15px;
.formula-config {
display: grid;
padding: 10px;
width: 100%;
}
.formula-config-form {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 5px;
}
.formdata-input {
width: 10vw;
}
}
.home-start-opt { .home-start-opt {
margin: 0.5rem; margin: 0.5rem;
} }

46
src/components/home/Runtime.vue

@ -1,46 +0,0 @@
<script lang="ts" setup>
import RunFormulaConfig from 'components/formula/RunFormulaConfig.vue'
import { onMounted } from 'vue'
/**
* 配方选择页面组件
* @description 负责处理配方选择逻辑设备状态判断及界面交互
*/
/**
* @hook 生命周期钩子 - 挂载完成时执行
* @description 初始化时检查配方列表若为空则重新获取
*/
onMounted(() => {
})
</script>
<template>
<div class="main-content">
<div class="formula-config">
<RunFormulaConfig/>
</div>
</div>
</template>
<style lang="scss" scoped>
.main-content {
overflow: hidden;
//height: auto;
//background: $gradient-color;
padding: 15px;
.formula-config {
display: grid;
padding: 10px;
width: 100%;
}
.formula-config-form {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 5px;
}
.formdata-input {
width: 10vw;
}
}
</style>

47
src/views/home/chart.vue

@ -2,6 +2,7 @@
import { syncSendCmd } from 'apis/system' import { syncSendCmd } from 'apis/system'
import homeFinish from 'assets/images/home/home-finish.svg' import homeFinish from 'assets/images/home/home-finish.svg'
import homeSettingSvg from 'assets/images/home/home-setting.svg' import homeSettingSvg from 'assets/images/home/home-setting.svg'
import BtButton from 'components/common/BTButton/index.vue'
import RunFormulaConfig from 'components/formula/RunFormulaConfig.vue' import RunFormulaConfig from 'components/formula/RunFormulaConfig.vue'
import HomeFormula from 'components/home/HomeFormula.vue' import HomeFormula from 'components/home/HomeFormula.vue'
import LineChart from 'components/home/LineChart.vue' import LineChart from 'components/home/LineChart.vue'
@ -88,7 +89,7 @@ const operationState = computed(() => {
return disinfectionState.value.state === 'idle' || disinfectionState.value.state === 'finished' return disinfectionState.value.state === 'idle' || disinfectionState.value.state === 'finished'
}) })
let poll = null
let poll: any = null
const getData = async (type?: string) => { const getData = async (type?: string) => {
const data = await syncSendCmd({ const data = await syncSendCmd({
@ -166,7 +167,7 @@ onUnmounted(() => {
</div> </div>
</div> </div>
<div class="home-chart-btn"> <div class="home-chart-btn">
<bt-button
<BtButton
v-if="!isDeviceIdle" v-if="!isDeviceIdle"
button-text="结束消毒" button-text="结束消毒"
bg-color="#FF6767" bg-color="#FF6767"
@ -180,8 +181,8 @@ onUnmounted(() => {
<template #icon> <template #icon>
<img :src="homeFinish" alt=""> <img :src="homeFinish" alt="">
</template> </template>
</bt-button>
<bt-button
</BtButton>
<BtButton
v-if="!isDeviceIdle" v-if="!isDeviceIdle"
button-text="运行参数" button-text="运行参数"
text-size="24px" text-size="24px"
@ -194,8 +195,8 @@ onUnmounted(() => {
<template #icon> <template #icon>
<img :src="homeSettingSvg" width="15" alt=""> <img :src="homeSettingSvg" width="15" alt="">
</template> </template>
</bt-button>
<bt-button
</BtButton>
<BtButton
button-text="返回" button-text="返回"
width="10vw" width="10vw"
height="7vh" height="7vh"
@ -206,8 +207,33 @@ onUnmounted(() => {
/> />
</div> </div>
</div> </div>
<ft-dialog v-model="disinfectFormulaVisible" title="运行参数" width="80vw" :ok-handle="onSave" @cancel="onClose">
<RunFormulaConfig ref="chartRef" />
<ft-dialog v-model="disinfectFormulaVisible" title="运行参数" width="80vw">
<div class="formula-config">
<RunFormulaConfig ref="chartRef" />
</div>
<template #footer>
<div class="config-btn">
<BtButton
button-text="关闭"
border-radius="5px"
width="7rem"
text-size="1.5rem"
text-color="#1989fa"
height="3rem"
@click="onClose"
/>
<BtButton
bg-color="#1989fa"
button-text="确认"
border-radius="5px"
width="7rem"
text-size="1.5rem"
text-color="#ffffff"
height="3rem"
@click="onSave"
/>
</div>
</template>
</ft-dialog> </ft-dialog>
</main> </main>
</template> </template>
@ -217,6 +243,11 @@ onUnmounted(() => {
overflow: hidden; overflow: hidden;
background: $gradient-color; background: $gradient-color;
height: $main-container-height; height: $main-container-height;
.formula-config {
display: grid;
padding: 10px;
width: 100%;
}
.line-chart-formula { .line-chart-formula {
width: 40vw; width: 40vw;
//background: #E0F0FF; //background: #E0F0FF;

Loading…
Cancel
Save