forked from gzt/A8000
zhangjiming
7 months ago
19 changed files with 369 additions and 267 deletions
-
4src/pages/Index/History.vue
-
2src/pages/Index/Index.vue
-
2src/pages/Index/Regular.vue
-
62src/pages/Index/Regular/Consumables.vue
-
4src/pages/Index/Regular/Running.vue
-
4src/pages/Index/Regular/TestTube.vue
-
2src/pages/Index/Settings/Users.vue
-
2src/pages/Index/TestTube/ChangeUser.vue
-
181src/pages/Index/components/Consumables/BallGrid2.vue
-
37src/pages/Index/components/Consumables/DragAreaEx.vue
-
3src/pages/Index/components/Consumables/InfoBar.vue
-
8src/pages/Index/components/Consumables/MainComponent.vue
-
50src/pages/Index/components/Consumables/MoveLiquidArea.vue
-
35src/pages/Index/components/Consumables/Plate.vue
-
113src/pages/Index/components/Consumables/SliderArea.vue
-
30src/pages/Index/components/Consumables/SliderAreaEx.vue
-
93src/pages/Index/components/Consumables/SpttingPlates.vue
-
2src/pages/Index/components/Running/SampleDisplay.vue
-
2src/pages/Index/components/TestTube/TestTubeRack.vue
@ -0,0 +1,181 @@ |
|||
<template> |
|||
<div class="ball-area" :style="gridStyle"> |
|||
<div class="ball-grid"> |
|||
<div |
|||
v-for="(isActive, index) in ballStates" |
|||
:key="index" |
|||
:class="['ball', { active: isActive }]" |
|||
:style="ballStyle(index)" |
|||
> |
|||
<div class="inner-circle" :style="innerCircleStyle(index)"></div> |
|||
</div> |
|||
</div> |
|||
<!-- 拖动区 --> |
|||
<DragAreaEx |
|||
class="drag-area" |
|||
v-if="canUpdate" |
|||
:hTotal="columns" |
|||
:vTotal="total / columns" |
|||
:hVal="(total - activated) % columns" |
|||
:vVal="(total - activated) / columns" |
|||
@update:sliderValue="updateSliderVal" |
|||
@update:sliderEndValue="updateSliderEndVal" |
|||
/> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { computed, ref, watch, onMounted, onBeforeUnmount } from 'vue' |
|||
import DragAreaEx from './DragAreaEx.vue' |
|||
import { useDeviceStore } from '../../../../store/index' |
|||
|
|||
// 移液盘复用组件 |
|||
|
|||
// Props 定义 |
|||
const props = defineProps({ |
|||
order: { |
|||
type: Number, |
|||
default: 0, |
|||
}, |
|||
total: { |
|||
type: Number, |
|||
required: true, |
|||
}, |
|||
activated: { |
|||
type: Number, |
|||
default: 0, |
|||
}, |
|||
width: { |
|||
type: String, |
|||
default: '300px', |
|||
}, |
|||
height: { |
|||
type: String, |
|||
default: '300px', |
|||
}, |
|||
columns: { |
|||
type: Number, |
|||
default: 10, // 每行的小球数量 |
|||
}, |
|||
activeColor: { |
|||
type: String, |
|||
default: '#4caf50', // 激活的小球颜色 |
|||
}, |
|||
innerColor: { |
|||
type: String, |
|||
default: 'lightgray', // 未激活时内部小球的颜色 |
|||
}, |
|||
canUpdate: { |
|||
type: Boolean, |
|||
default: false, |
|||
}, |
|||
}) |
|||
const { total, columns } = props |
|||
const deviceStore = useDeviceStore() |
|||
const isDragging = ref(false) |
|||
const ballStates = ref(Array.from({ length: props.total }, () => false)) // 小球激活状态数组 |
|||
|
|||
// 发出自定义事件通知父组件 |
|||
const emit = defineEmits(['update:TipNum']) |
|||
|
|||
const updateSliderVal = async (hVal, vVal) => { |
|||
if (deviceStore.status === 'IDLE') { |
|||
isDragging.value = true |
|||
const empty = parseInt(vVal) * columns + parseInt(hVal) |
|||
const activated = total - empty |
|||
for (let i = 0; i < total; i++) { |
|||
ballStates.value[i] = i < activated |
|||
} |
|||
emit('update:TipNum', activated, props.order, false) |
|||
} else { |
|||
ElMessage.error('设备正在工作，无法修改数值') |
|||
} |
|||
} |
|||
|
|||
const updateSliderEndVal = async (hVal, vVal) => { |
|||
isDragging.value = false |
|||
if (deviceStore.status === 'IDLE') { |
|||
const empty = parseInt(vVal) * columns + parseInt(hVal) |
|||
const activated = total - empty |
|||
emit('update:TipNum', activated, props.order, true) |
|||
} else { |
|||
ElMessage.error('设备正在工作，无法修改数值') |
|||
} |
|||
} |
|||
// 计算网格样式 |
|||
const gridStyle = computed(() => ({ |
|||
width: props.width, |
|||
height: props.height, |
|||
})) |
|||
|
|||
// 计算小球样式 |
|||
const ballStyle = (index) => { |
|||
const ballSize = `${parseFloat(props.width) / props.columns - 2}px` |
|||
return { |
|||
width: ballSize, |
|||
height: ballSize, |
|||
} |
|||
} |
|||
|
|||
// 动态计算内部小球的颜色变化 |
|||
const innerCircleStyle = (index) => { |
|||
const isActive = ballStates.value[index] |
|||
return { |
|||
width: '80%', |
|||
height: '80%', |
|||
backgroundColor: isActive ? props.activeColor : props.innerColor, |
|||
borderRadius: '50%', |
|||
transition: 'background-color 0.3s ease', |
|||
} |
|||
} |
|||
|
|||
// 监听 `props.activated` 的变化，更新小球激活状态 |
|||
watch( |
|||
() => props.activated, |
|||
(newVal) => { |
|||
if (!isDragging.value) { |
|||
for (let i = 0; i < props.total; i++) { |
|||
ballStates.value[i] = i < newVal |
|||
} |
|||
} |
|||
}, |
|||
{ immediate: true }, // 在初次渲染时立即执行 |
|||
) |
|||
</script> |
|||
|
|||
<style scoped lang="less"> |
|||
.ball-area { |
|||
position: relative; |
|||
} |
|||
.ball-grid { |
|||
width: 100%; |
|||
height: 100%; |
|||
display: flex; |
|||
flex-wrap: wrap-reverse; |
|||
flex-direction: row-reverse; |
|||
background-color: #666; |
|||
border-radius: 10px; |
|||
padding-right: 4px; |
|||
} |
|||
.drag-area { |
|||
position: absolute; |
|||
left: 0; |
|||
top: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
} |
|||
|
|||
.ball { |
|||
margin: 0 2px 2px 0; |
|||
background-color: #fff; |
|||
border-radius: 999px; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
transition: background-color 0.3s ease; |
|||
} |
|||
|
|||
.inner-circle { |
|||
transition: background-color 0.3s ease; |
|||
} |
|||
</style> |
|||
@ -1,113 +0,0 @@ |
|||
<template> |
|||
<div |
|||
class="slider-container" |
|||
@mousedown="handleStart" |
|||
@touchstart.prevent="handleStart" |
|||
> |
|||
<div class="slider-track" ref="sliderTrack"> |
|||
<div class="slider-fill" :style="{ width: `${sliderValue}%` }"></div> |
|||
<div |
|||
:style="{ visibility: `${isDragging ? 'visible' : 'hidden'}` }" |
|||
class="slider-thumb" |
|||
> |
|||
{{ sliderValue.toFixed() }} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { ref, onMounted, onUnmounted, watch, useTemplateRef } from 'vue' |
|||
|
|||
const props = defineProps({ |
|||
modelValue: { |
|||
type: Number, |
|||
default: 50, |
|||
}, |
|||
}) |
|||
|
|||
const emit = defineEmits(['update:modelValue']) |
|||
|
|||
const sliderValue = ref(props.modelValue) |
|||
const isDragging = ref(false) |
|||
const startX = ref(0) |
|||
const startValue = ref(0) |
|||
// const sliderThumb = ref(null); |
|||
const sliderTrack = useTemplateRef('sliderTrack') |
|||
|
|||
watch( |
|||
() => props.modelValue, |
|||
(newValue) => { |
|||
if (!isDragging.value) { |
|||
sliderValue.value = newValue |
|||
} |
|||
}, |
|||
) |
|||
|
|||
function handleStart(event) { |
|||
const touchEvent = event.touches ? event.touches[0] : event |
|||
startX.value = touchEvent.clientX |
|||
const rect = sliderTrack.value.getBoundingClientRect() |
|||
startValue.value = (sliderValue.value * rect.width) / 100 |
|||
|
|||
isDragging.value = true |
|||
document.addEventListener('mousemove', handleDrag) |
|||
document.addEventListener('touchmove', handleDrag, { passive: false }) |
|||
document.addEventListener('mouseup', handleEnd) |
|||
document.addEventListener('touchend', handleEnd) |
|||
} |
|||
|
|||
function handleDrag(event) { |
|||
if (!isDragging.value) return |
|||
|
|||
const touchEvent = event.touches ? event.touches[0] : event |
|||
const deltaX = touchEvent.clientX - startX.value |
|||
const rect = sliderTrack.value.getBoundingClientRect() |
|||
let percent = ((deltaX + startValue.value) / rect.width) * 100 |
|||
|
|||
// Limit the value between 0 and 100 |
|||
sliderValue.value = Math.min(100, Math.max(0, percent)) |
|||
emit('update:modelValue', sliderValue.value) |
|||
} |
|||
|
|||
function handleEnd() { |
|||
isDragging.value = false |
|||
document.removeEventListener('mousemove', handleDrag) |
|||
document.removeEventListener('touchmove', handleDrag) |
|||
document.removeEventListener('mouseup', handleEnd) |
|||
document.removeEventListener('touchend', handleEnd) |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.slider-container { |
|||
width: 300px; |
|||
touch-action: none; /* Prevents the browser's default panning behavior */ |
|||
} |
|||
|
|||
.slider-track { |
|||
position: relative; |
|||
height: 4rem; |
|||
background-color: #ddd; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.slider-fill { |
|||
position: absolute; |
|||
height: 100%; |
|||
background-color: #4caf50; |
|||
} |
|||
|
|||
.slider-thumb { |
|||
position: absolute; |
|||
top: 50%; |
|||
left: 50%; |
|||
transform: translateX(-50%) translateY(-50%); |
|||
font-size: 32px; |
|||
color: gray; |
|||
} |
|||
|
|||
.slider-thumb:active { |
|||
cursor: grabbing; |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue