a8k_webui/src/components/TestTubePreProcess.vue

<template>
  <div class="h-full flex flex-col">
    <div class="border-b p-5 bg-white flex flex-row">
      <div>样本预处理</div>
      <div v-if="isActionExecuting" class="ml-1"><LoadingOutlined /></div>
    </div>
    <a-row class="h-0 grow">
      <a-col class="border-r" :span="16">
        <div class="p-5 border-t border-b">
          <a-row>
            <a-col class="p-1" :span="8"><a-input prefix="回零超时时间 : " v-model:value="serviceParams.MoveToZeroOvertime" /></a-col>
            <a-col class="p-1" :span="8"><a-input prefix="执行动作的超时时间 : " v-model:value="serviceParams.ActionOvertime" /></a-col>
            <a-col class="p-1" :span="8"><a-input prefix="高全血试管取试管位置 : " v-model:value="serviceParams.ZMotor_HighBloodTakeTubeHeight" /></a-col>
            <a-col class="p-1" :span="8"><a-input prefix="矮全血试管取试管位置 : " v-model:value="serviceParams.ZMotor_ShortBloodTakeTubeHeight" /></a-col>
            <a-col class="p-1" :span="8"><a-input prefix="高全血试管取帽位置 : " v-model:value="serviceParams.ZMotor_HighBloodTakeCapHeight" /></a-col>
            <a-col class="p-1" :span="8"><a-input prefix="矮全血试管取帽位置 : " v-model:value="serviceParams.ZMotor_ShortBloodTakeCapHeight" /></a-col>
            <a-col class="p-1" :span="8"><a-input prefix="高试管帽子判断位置 : " v-model:value="serviceParams.ZMotor_HighBloodCapJudgeHeight" /></a-col>
            <a-col class="p-1" :span="8"><a-input prefix="矮全血试管帽子判断位置 : " v-model:value="serviceParams.ZMotor_ShortBloodCapJudgeHeight" /></a-col>
            <a-col class="p-1" :span="8"><a-input prefix="摇匀位放置高度 : " v-model:value="serviceParams.ZMotor_placeShakeHeight" /></a-col>
            <a-col class="p-1" :span="8"><a-input prefix="水平移动电机待机位置 : " v-model:value="serviceParams.HorizontalMotor_standbyPos" /></a-col>
            <a-col class="p-1" :span="8"><a-input prefix="水平移动电机取帽位置 : " v-model:value="serviceParams.HorizontalMotor_takeCapPos" /></a-col>
            <a-col class="p-1" :span="8"><a-input prefix="水平移动电机放帽位置 : " v-model:value="serviceParams.HorizontalMotor_takePushCapPos" /></a-col>
            <a-col class="p-1" :span="8"><a-input prefix="抓手舵机待机位置 : " v-model:value="serviceParams.GripperServo_standbyPos" /></a-col>
            <a-col class="p-1" :span="8"><a-input prefix="抓手舵机取帽扭矩 : " v-model:value="serviceParams.GripperServo_takeCapTorque" /></a-col>
            <a-col class="p-1" :span="8"><a-input prefix="抓手舵机取试管位置 : " v-model:value="serviceParams.GripperServo_takeTubePos" /></a-col>
            <a-col class="p-1" :span="8"><a-input prefix="判断是否有帽子的位置阈值 : " v-model:value="serviceParams.GripperServo_hatDeterminesPosThres" /></a-col>
            <a-col class="p-1" :span="8"><a-input prefix="摇匀电机待机位置 : " v-model:value="serviceParams.ShakeMotor_standbyPos" /></a-col>
            <a-col class="p-1" :span="8"><a-input prefix="摇匀电机摇匀角度 : " v-model:value="serviceParams.ShakeMotor_shakeDegree" /></a-col>
            <a-col class="p-1" :span="8"><a-input prefix="试管夹紧电机待机位置 : " v-model:value="serviceParams.TubeClampMotor_standbyPos" /></a-col>
            <a-col class="p-1" :span="8"><a-input prefix="试管夹紧电机夹紧位置 : " v-model:value="serviceParams.TubeClampMotor_ClampPos" /></a-col>
            <a-col class="p-1" :span="8"><a-input prefix="气溶胶风扇控制参数 : " v-model:value="serviceParams.AerosolFanLevel" /></a-col>
            <a-col class="p-1" :span="8">
              <a-button class="mr-1" @click="actionServiceParamsReload">刷新</a-button>
              <a-button @click="actionServiceParamsSave">保存</a-button>
            </a-col>
          </a-row>
        </div>

        <div class="p-5">
          <a-button class="m-1" @click="actionQuickExec('enableModule',true)">使能</a-button>
          <a-button class="m-1" @click="actionQuickExec('enableModule',false)">失能</a-button>
          <a-button class="m-1" @click="actionQuickExec('moveToZero')">归零</a-button>
          <a-button class="m-1" @click="actionQuickExec('stop')">停止</a-button>
          <a-button class="m-1" @click="actionQuickExec('openTubeClip')">打开试管夹爪</a-button>

          <a-button class="m-1" @click="actionQuickExec('openAerosolFan')">打开气溶胶风扇</a-button>
          <a-button class="m-1" @click="actionQuickExec('closeAerosolFan')">关闭气溶胶风扇</a-button>
          <a-button class="m-1" @click="actionQuickExec('moduleResetWhenPowerOn')">设备初始化时复位</a-button>
          <a-button class="m-1" @click="actionQuickExec('moduleRuntimeReset')">设备运行时复位</a-button>
    
          <div class="mt-1">
            <a-input-group compact class="flex flex-row">
              <a-button @click="actionTakeTube">取试管</a-button>
              <a-select class="w-64" v-model:value="takeTubeParams[0]">
                <a-select-option value="HighBlood">试管类型 : 全血5ML</a-select-option>
                <a-select-option value="ShortBlood">试管类型 : 全血3ML</a-select-option>
                <a-select-option value="Mini">试管类型 : 迷你试管</a-select-option>
                <a-select-option value="MiniBlood">试管类型 : 阳普管</a-select-option>
                <a-select-option value="BulletTube1P5">试管类型 : 子弹头试管1.5mL</a-select-option>
                <a-select-option value="BulletTube0P5">试管类型 : 子弹头试管0.5mL</a-select-option>
              </a-select>
              <a-button @click="takeTubeParams[1] = !takeTubeParams[1]" :type="takeTubeParams[1] ? 'primary' : 'default'">检查试管帽</a-button>
            </a-input-group>
          </div>

          <div class="mt-1">
            <a-input-group compact class="flex flex-row">
              <a-button @click="actionShakeTube">摇匀试管</a-button>
              <a-select class="w-64" v-model:value="shakeTubeParams[0]">
                <a-select-option value="HighBlood">试管类型 : 全血5ML</a-select-option>
                <a-select-option value="ShortBlood">试管类型 : 全血3ML</a-select-option>
                <a-select-option value="Mini">试管类型 : 迷你试管</a-select-option>
                <a-select-option value="MiniBlood">试管类型 : 阳普管</a-select-option>
                <a-select-option value="BulletTube1P5">试管类型 : 子弹头试管1.5mL</a-select-option>
                <a-select-option value="BulletTube0P5">试管类型 : 子弹头试管0.5mL</a-select-option>
              </a-select>
              <a-input class="!w-24" prefix="次数 : " v-model:value="shakeTubeParams[1]" />
              <a-input class="!w-24" prefix="角度 : " v-model:value="shakeTubeParams[2]" />
            </a-input-group>
          </div>
          
          <div class="mt-1">
            <a-input-group compact class="flex flex-row">
              <a-button @click="actionTakeTubeCap">取试管帽</a-button>
              <a-select class="w-64" v-model:value="takeTubeCapParams[0]">
                <a-select-option value="HighBlood">试管类型 : 全血5ML</a-select-option>
                <a-select-option value="ShortBlood">试管类型 : 全血3ML</a-select-option>
                <a-select-option value="Mini">试管类型 : 迷你试管</a-select-option>
                <a-select-option value="MiniBlood">试管类型 : 阳普管</a-select-option>
                <a-select-option value="BulletTube1P5">试管类型 : 子弹头试管1.5mL</a-select-option>
                <a-select-option value="BulletTube0P5">试管类型 : 子弹头试管0.5mL</a-select-option>
              </a-select>
            </a-input-group>
          </div>
          <div class="mt-1">
            <a-input-group compact class="flex flex-row">
              <a-button @click="actionPushBackTubeCapAndTakeBakTube">盖试管帽，并将试管移动回试管架中</a-button>
              <a-select class="w-64" v-model:value="pushBackTubeCapAndTakeBakTubeParams[0]">
                <a-select-option value="HighBlood">试管类型 : 全血5ML</a-select-option>
                <a-select-option value="ShortBlood">试管类型 : 全血3ML</a-select-option>
                <a-select-option value="Mini">试管类型 : 迷你试管</a-select-option>
                <a-select-option value="MiniBlood">试管类型 : 阳普管</a-select-option>
                <a-select-option value="BulletTube1P5">试管类型 : 子弹头试管1.5mL</a-select-option>
                <a-select-option value="BulletTube0P5">试管类型 : 子弹头试管0.5mL</a-select-option>
              </a-select>
            </a-input-group>
          </div>
        </div>
      </a-col>
      <a-col :span="8" class="p-5 h-full">
        <div class="border rounded p-5 whitespace-pre h-full overflow-y-auto bg-white"
        >{{ message }}</div>
      </a-col>
    </a-row>
  </div>
</template>
<script setup>
import ApiClient from '@/utils/ApiClient';
import { onMounted, ref } from 'vue';
import { LoadingOutlined } from '@ant-design/icons-vue';
const message = ref('');
const serviceParams = ref({});
const shakeTubeParams = ref(['ShortBlood', 3, 90]);
const takeTubeParams = ref(['ShortBlood', false]);
const takeTubeCapParams = ref(['ShortBlood']);
const pushBackTubeCapAndTakeBakTubeParams = ref(['ShortBlood']);
const isActionExecuting = ref(false);
onMounted(actionServiceParamsReload);

async function actionServiceParamsReload() {
    serviceParams.value = {};
    message.value = '';
    let client = ApiClient.getClient();
    try {
        let res = await client.call('sample-pre-process-module-ctrl/list-options');
        message.value = JSON.stringify(res, null, 2);
        for ( let item of res ) {
             serviceParams.value[item.key] = item.val;
        }
    } catch ( e ) {
        message.value = e.message
    }
}

async function actionServiceParamsSave() {
    message.value = '';
    let client = ApiClient.getClient();
    try {
        let options = [];
        for ( let key in serviceParams.value ) {
            options.push({name:key, value: serviceParams.value[key]});
        }
        let res = await client.call('sample-pre-process-module-ctrl/update-options', {options});
        message.value = JSON.stringify(res, null, 2);
    } catch ( e ) {
        message.value = e.message
    }
}

// execute service method
async function executeServiceMethod( method, params=[]) {
    isActionExecuting.value = true;
    message.value = '';
    let client = ApiClient.getClient();
    try {
        let res = await client.call('sample-pre-process-module-ctrl/execute-service-method', {method,params});
        message.value = null === res ? 'OK' : JSON.stringify(res, null, 2);
    } catch ( e ) {
        message.value = e.message
    } finally {
        isActionExecuting.value = false;
    }
}

function actionQuickExec( action, ... params ) {
  executeServiceMethod(action, params);
}

function actionShakeTube() {
    executeServiceMethod('ShakeTube',[
    shakeTubeParams.value[0],
    shakeTubeParams.value[1] * 1,
    shakeTubeParams.value[2] * 1
    ])
}

function actionTakeTube() {
    executeServiceMethod('takeTube',[
        takeTubeParams.value[0],
        takeTubeParams.value[1]
    ])
}

function actionTakeTubeCap() {
    executeServiceMethod('takeTubeCap',[
        takeTubeCapParams.value[0]
    ]);
}

function actionPushBackTubeCapAndTakeBakTube() {
    executeServiceMethod('pushBackTubeCapAndTakeBakTube',[
        pushBackTubeCapAndTakeBakTubeParams.value[0]
    ]);
}
</script>