zhangjiming
6 months ago
3 changed files with 112 additions and 34 deletions
@ -0,0 +1,65 @@ |
|||||
|
<template> |
||||
|
<van-overlay :show="show"> |
||||
|
<div class="temperature-setting flex justify-center items-center h-full"> |
||||
|
<div class="py-4 px-[18px] rounded-2xl bg-white flex flex-col items-center"> |
||||
|
<h1 class="text-lg font-medium text-text">{{ typeTitleMap[type] }}</h1> |
||||
|
<div class="my-4"> |
||||
|
<div class="flex items-center mt-3 mb-3"> |
||||
|
<span class="mr-4">制冷温度</span> |
||||
|
<span>-{{ coldValue }}°C</span> |
||||
|
</div> |
||||
|
<div class="flex items-center mb-4"> |
||||
|
<span>0</span> |
||||
|
<van-slider class="min-w-[600px] mx-4" v-model="coldValue" /> |
||||
|
<span>-100</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div v-if="type === 'above'" class="my-4"> |
||||
|
<div class="flex items-center mt-3 mb-3"> |
||||
|
<span class="mr-4">加热温度</span> |
||||
|
<span>{{ warmValue }}°C</span> |
||||
|
</div> |
||||
|
<div class="flex items-center mb-4"> |
||||
|
<span>0</span> |
||||
|
<van-slider class="min-w-[600px] mx-4" v-model="warmValue" /> |
||||
|
<span>100</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="btn-fill min-w-40 rounded py-3 text-lg " @click="onConfirmClick">确定</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</van-overlay> |
||||
|
</template> |
||||
|
|
||||
|
<script setup lang="ts"> |
||||
|
import { ref } from "vue"; |
||||
|
|
||||
|
export type CabinetType = "above" | "below" | "sample"; |
||||
|
|
||||
|
const typeTitleMap: { [k in CabinetType]: string } = { |
||||
|
above: "上仓温度设定", |
||||
|
below: "下仓温度设定", |
||||
|
sample: "样品箱温度设定", |
||||
|
}; |
||||
|
|
||||
|
const props = defineProps<{ show: boolean; type: CabinetType }>(); |
||||
|
const emit = defineEmits<{ |
||||
|
(e: "update", type: CabinetType, refrigerate: number, warm?: number): void; |
||||
|
}>(); |
||||
|
|
||||
|
const coldValue = ref(50); |
||||
|
const warmValue = ref(50); |
||||
|
|
||||
|
function onConfirmClick() { |
||||
|
emit("update", props.type, coldValue.value, warmValue.value); |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="css" scoped> |
||||
|
.temperature-setting { |
||||
|
--van-slider-bar-height: 8px; |
||||
|
--van-slider-button-width: 32px; |
||||
|
--van-slider-button-height: 32px; |
||||
|
} |
||||
|
</style> |
||||
@ -1,34 +1,30 @@ |
|||||
<script setup lang="ts"> |
<script setup lang="ts"> |
||||
import { BehaviorSubject,interval,map,startWith,scan } from 'rxjs' |
|
||||
import { onMounted, onUnmounted, watch } from 'vue' |
|
||||
import { useSubject,useObservable } from '@vueuse/rxjs' |
|
||||
|
import { BehaviorSubject, interval, map, startWith, scan } from "rxjs"; |
||||
|
import { onMounted, onUnmounted, watch } from "vue"; |
||||
|
import { useSubject, useObservable } from "@vueuse/rxjs"; |
||||
|
|
||||
const countSubject = new BehaviorSubject(0) |
|
||||
const count = useSubject(countSubject) |
|
||||
|
const countSubject = new BehaviorSubject(0); |
||||
|
const count = useSubject(countSubject); |
||||
|
|
||||
const count2 = useObservable( |
const count2 = useObservable( |
||||
interval(1000).pipe( |
|
||||
map(() => 1), |
|
||||
startWith(0), |
|
||||
scan((total, next) => next + total), |
|
||||
) |
|
||||
) |
|
||||
|
interval(1000).pipe( |
||||
|
map(() => 1), |
||||
|
startWith(0), |
||||
|
scan((total, next) => next + total) |
||||
|
) |
||||
|
); |
||||
|
|
||||
onMounted(() => { |
onMounted(() => { |
||||
watch(count, value => console.info('from watcher:', value)) |
|
||||
|
watch(count, value => console.info("from watcher:", value)); |
||||
|
|
||||
const subscription = countSubject.subscribe(value => console.info('from subscriber: ', value)) |
|
||||
onUnmounted(() => { |
|
||||
subscription.unsubscribe() |
|
||||
}) |
|
||||
}) |
|
||||
|
const subscription = countSubject.subscribe(value => console.info("from subscriber: ", value)); |
||||
|
onUnmounted(() => { |
||||
|
subscription.unsubscribe(); |
||||
|
}); |
||||
|
}); |
||||
</script> |
</script> |
||||
|
|
||||
<template> |
<template> |
||||
<button class="btn-fill px-4 py-2 rounded-lg" @click="count++"> |
|
||||
count is: {{ count }} |
|
||||
</button> |
|
||||
<button class="btn-fill px-4 py-2 rounded-lg"> |
|
||||
count is: {{ count2 }} |
|
||||
</button> |
|
||||
</template> |
|
||||
|
<button class="btn-fill px-4 py-2 rounded-lg" @click="count++">count is: {{ count }}</button> |
||||
|
<button class="btn-fill px-4 py-2 rounded-lg">count is: {{ count2 }}</button> |
||||
|
</template> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue