9 changed files with 296 additions and 113 deletions
-
11src/src/main/java/com/my/graphiteDigesterBg/diframe/api/DiApiUser.java
-
118src/src/main/java/com/my/graphiteDigesterBg/task/TaskStartReset.java
-
11src/web/package-lock.json
-
1src/web/package.json
-
35src/web/src/pages/main/Page.vue
-
33src/web/src/pages/main/contents/Operation.vue
-
78src/web/src/pages/main/contents/OperationTubeRacks.vue
-
107src/web/src/pages/main/contents/UserManagement.vue
-
15src/web/src/utils/ApiClient.js
@ -0,0 +1,78 @@ |
|||
<template> |
|||
<div ref="container" class="heating-plate h-0 grow bg-green-400 flex flex-col justify-center items-center rounded-full"> |
|||
<div class="relative w-1/4 h-1/4"> |
|||
<div v-for="tubeRackSlot in tubeRackSlots" :key="tubeRackSlot.index" |
|||
:class="getTubeRackSlotClass(tubeRackSlot)" |
|||
:style="{transform: `rotateZ(${(tubeRackSlot.index-1)*72}deg) translateY(140%)`}" |
|||
> |
|||
<div class="title absolute w-full text-center"> |
|||
<p class="mb-1"> |
|||
<span v-if="!tubeRackSlot.isErrorSlot">A - {{ tubeRackSlot.index + 1 }}</span> |
|||
<span v-else>异常</span> |
|||
</p> |
|||
<p class="mb-0" v-if="null !== tubeRackSlot.digestionName">{{ tubeRackSlot.digestionName }}</p> |
|||
</div> |
|||
<a-row class="tube-rack p-1 rounded-lg h-full" |
|||
:class="{'active': activeRackSlot?.index === tubeRackSlot.index }" |
|||
@click="actionActiveSlot(tubeRackSlot)" |
|||
> |
|||
<a-col class="p-1" v-for="tubeIndex in 16" :key="tubeIndex" :span="6"> |
|||
<div class="tube rounded-full h-full w-full"></div> |
|||
</a-col> |
|||
</a-row> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script setup> |
|||
import { ref } from 'vue'; |
|||
import anime from 'animejs/lib/anime.es.js'; |
|||
/** @var {Object} */ |
|||
const props = defineProps({ |
|||
tubeRackSlots: Array, |
|||
}); |
|||
/** @var {Object} */ |
|||
const activeRackSlot = ref(null); |
|||
/** @var {Object} */ |
|||
const container = ref(null); |
|||
|
|||
// get tube rack slot class |
|||
function getTubeRackSlotClass(tubeRackSlot) { |
|||
return { |
|||
'tube-rack-slot' : true, |
|||
'error-slot' : tubeRackSlot.isErrorSlot, |
|||
active: tubeRackSlot.isLocked, |
|||
heating: tubeRackSlot.isHeating, |
|||
}; |
|||
} |
|||
|
|||
// action active slot |
|||
function actionActiveSlot(tubeRackSlot) { |
|||
var animeOptions = { |
|||
targets: container.value, |
|||
rotate: '0deg', |
|||
duration: 1000, |
|||
easing: 'easeInOutQuad' |
|||
}; |
|||
if ( tubeRackSlot.index === activeRackSlot.value?.index ) { |
|||
activeRackSlot.value = null; |
|||
anime(animeOptions); |
|||
} else { |
|||
activeRackSlot.value = tubeRackSlot; |
|||
animeOptions.rotate = `${72 - tubeRackSlot.index * 72}deg`; |
|||
anime(animeOptions); |
|||
} |
|||
} |
|||
</script> |
|||
<style scoped> |
|||
.tube-rack-slot {position: absolute;width: 100%;height: 100%;} |
|||
.tube-rack-slot .title {font-size: 16px;font-weight: bold;letter-spacing: 0.06em;top:-45px;color: #D6D9F1;} |
|||
.tube-rack-slot.active .title {color:#26D574;} |
|||
.tube-rack-slot .tube-rack {background:#D6D9F1;} |
|||
.tube-rack-slot.active .tube-rack {background:#1B1B1B;} |
|||
.tube-rack-slot.heating .tube-rack {background:#ff5b5b;} |
|||
.tube-rack-slot .tube {background:#FFFFFF;} |
|||
.tube-rack-slot.active .tube {background:#26D574;} |
|||
.tube-rack-slot.error-slot .tube {background:#8799AB;} |
|||
.tube-rack.active {border: solid 2px #007BFF;} |
|||
</style> |
Write
Preview
Loading…
Cancel
Save
Reference in new issue