1

package.json

@@ -8,6 +8,8 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "ant-design-vue": "^4.2.3",
+    "axios": "^1.7.2",
     "core-js": "^3.8.3",
     "vue": "^3.2.13"
   },
@@ -17,8 +19,11 @@
     "@vue/cli-plugin-babel": "~5.0.0",
     "@vue/cli-plugin-eslint": "~5.0.0",
     "@vue/cli-service": "~5.0.0",
+    "autoprefixer": "^10.4.19",
     "eslint": "^7.32.0",
-    "eslint-plugin-vue": "^8.0.3"
+    "eslint-plugin-vue": "^8.0.3",
+    "postcss": "^8.4.39",
+    "tailwindcss": "^3.4.4"
   },
   "eslintConfig": {
     "root": true,
@@ -32,7 +37,9 @@
     "parserOptions": {
       "parser": "@babel/eslint-parser"
     },
-    "rules": {}
+    "rules": {
+      "no-debugger": "off"
+    }
   },
   "browserslist": [
     "> 1%",

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+    plugins: {
+      tailwindcss: {},
+      autoprefixer: {},
+    }
+}

src/App.vue

@@ -1,26 +1,6 @@
 <template>
-  <img alt="Vue logo" src="./assets/logo.png">
-  <HelloWorld msg="Welcome to Your Vue.js App"/>
+  <test-feeder />
 </template>
-
-<script>
-import HelloWorld from './components/HelloWorld.vue'
-
-export default {
-  name: 'App',
-  components: {
-    HelloWorld
-  }
-}
-</script>
-
-<style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
-</style>
+<script setup>
+import TestFeeder from './components/TestFeeder.vue'
+</script>

src/components/HelloWorld.vue

@@ -1,58 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

src/components/TestFeeder.vue

@@ -0,0 +1,155 @@
+<template>
+  <div class="h-full flex flex-col">
+    <div class="p-5 h-0 grow">
+      <div class="border rounded p-5 whitespace-pre-line h-full overflow-y-auto"
+      >{{ message }}</div>
+    </div>
+    
+    <div class="p-5">
+      <div class="mt-1"><a-button @click="actionMoveToZeroWhenDeviceSetup">设备启动归零</a-button></div>
+      <div class="mt-1"><a-button @click="actionMoveToZero">归零</a-button></div>
+      <div class="mt-1"><a-button @click="actionMoveTubeRackToEnterPos">移动试管架到入口位置</a-button></div>
+      <div class="mt-1"><a-button @click="actionMoveTubeRackToExitPos">移动试管架到出口位置</a-button></div>
+      <div class="mt-1"><a-button @click="actionMoveTubeRackToScanPos">移动试管架到试管架扫码位置</a-button></div>
+      <div class="mt-1"><a-button @click="actionMoveTubeRackToScanPosAndScan">移动试管架到试管架扫码并扫码</a-button></div>
+      <div class="mt-1">
+        <a-input-group compact class="flex flex-row">
+          <a-input class="!w-64" prefix="TubeType : " v-model:value="moveTubeToScanPosParams[0]"/>
+          <a-input class="!w-32" prefix="TubeIndex : " v-model:value="moveTubeToScanPosParams[1]"/>
+          <a-button @click="actionMoveTubeToScanPos">移动试管到扫码位置</a-button>
+        </a-input-group>
+      </div>
+      <div class="mt-1">
+        <a-input-group compact class="flex flex-row">
+          <a-input class="!w-64" prefix="TubeType : " v-model:value="moveTubeToScanPosAndScanParams[0]"/>
+          <a-input class="!w-32" prefix="TubeIndex : " v-model:value="moveTubeToScanPosAndScanParams[1]"/>
+          <a-button @click="actionMoveTubeToScanPosAndScan">移动试管到扫码位置，并扫码</a-button>
+        </a-input-group>
+      </div>
+      <div class="mt-1">
+        <a-input-group compact class="flex flex-row">
+          <a-input class="!w-64" prefix="TubeType : " v-model:value="moveTubeToHeighJudgmentPosParams[0]"/>
+          <a-input class="!w-32" prefix="TubeIndex : " v-model:value="moveTubeToHeighJudgmentPosParams[1]"/>
+          <a-button @click="actionMoveTubeToHeighJudgmentPos">移动试管到试管高低判断位置</a-button>
+        </a-input-group>
+      </div>
+      <div class="mt-1">
+        <a-input-group compact class="flex flex-row">
+          <a-input class="!w-64" prefix="TubeType : " v-model:value="moveTubeToPreProcessPosParams[0]"/>
+          <a-input class="!w-32" prefix="TubeIndex : " v-model:value="moveTubeToPreProcessPosParams[1]"/>
+          <a-button @click="actionMoveTubeToPreProcessPos">移动试管到试管预处理的位置</a-button>
+        </a-input-group>
+      </div>
+      <div class="mt-1">
+        <a-input-group compact class="flex flex-row">
+          <a-input class="!w-64" prefix="TubeType : " v-model:value="moveTubeToExistJudgmentPosParams[0]"/>
+          <a-input class="!w-32" prefix="TubeIndex : " v-model:value="moveTubeToExistJudgmentPosParams[1]"/>
+          <a-button @click="actionMoveTubeToExistJudgmentPos">移动试管到试管有无判断位置</a-button>
+        </a-input-group>
+      </div>
+      
+      <div class="mt-1"><a-button @click="actionQuickExec('isTubeRackInEnterPos')">试管架是否在入料位置</a-button></div>
+      <div class="mt-1"><a-button @click="actionQuickExec('isTubeRackInExitPos')">试管架是否在出料位置</a-button></div>
+
+      <div class="mt-1"><a-button @click="actionQuickExec('getMoveChannelPhotoelectricState',0)">获取移动通道的光电状态(内)</a-button></div>
+      <div class="mt-1"><a-button @click="actionQuickExec('getMoveChannelPhotoelectricState',1)">获取移动通道的光电状态(外)</a-button></div>
+
+      <div class="mt-1"><a-button @click="actionQuickExec('scanClampModuleCompress')">扫描夹紧机构夹紧</a-button></div>
+      <div class="mt-1"><a-button @click="actionQuickExec('scanClampModuleReset')">扫描夹紧机构复位</a-button></div>
+    </div>
+  </div>
+</template>
+<script setup>
+import ApiClient from '@/utils/ApiClient';
+import { ref } from 'vue';
+const message = ref('');
+const moveTubeToScanPosParams = ref(['', 0]);
+const moveTubeToScanPosAndScanParams = ref(['',0]);
+const moveTubeToHeighJudgmentPosParams = ref(['',0]);
+const moveTubeToPreProcessPosParams = ref(['',0]);
+const moveTubeToExistJudgmentPosParams = ref(['',0]);
+
+// execute service method
+async function executeServiceMethod( method, params=[]) {
+    message.value = '';
+    let client = ApiClient.getClient();
+    try {
+        let res = await client.call('tmp-test/execute-service-method', {
+            service:'motorTubeRackMoveCtrlService',
+            method,
+            params
+        });
+        message.value = res;
+    } catch ( e ) {
+        message.value = e.message
+    }
+}
+
+function actionQuickExec( action, ... params ) {
+  executeServiceMethod(action, params);
+}
+
+// move to zero when device setup
+function actionMoveToZeroWhenDeviceSetup() {
+    executeServiceMethod('moveToZeroWhenDeviceSetup');
+}
+
+// move to zero
+function actionMoveToZero() {
+    executeServiceMethod('moveToZero');
+}
+
+// moveTubeRackToEnterPos
+function actionMoveTubeRackToEnterPos() {
+  executeServiceMethod('moveTubeRackToEnterPos');
+}
+
+// moveTubeRackToExitPos
+function actionMoveTubeRackToExitPos() {
+  executeServiceMethod('moveTubeRackToExitPos');
+}
+
+// moveTubeRackToScanPos
+function actionMoveTubeRackToScanPos() {
+  executeServiceMethod('moveTubeRackToScanPos');
+}
+
+function actionMoveTubeRackToScanPosAndScan() {
+  executeServiceMethod('moveTubeRackToScanPosAndScan');
+}
+
+function actionMoveTubeToScanPos() {
+    executeServiceMethod('moveTubeToScanPos',[
+        moveTubeToScanPosParams.value[0],
+        moveTubeToScanPosParams.value[1] * 1
+    ])
+}
+
+function actionMoveTubeToScanPosAndScan() {
+    executeServiceMethod('moveTubeToScanPosAndScan',[
+        moveTubeToScanPosAndScanParams.value[0],
+        moveTubeToScanPosAndScanParams.value[1] * 1
+    ])
+}
+
+function actionMoveTubeToHeighJudgmentPos() {
+    executeServiceMethod('moveTubeToHeighJudgmentPos',[
+      moveTubeToHeighJudgmentPosParams.value[0],
+      moveTubeToHeighJudgmentPosParams.value[1] * 1
+    ]);
+}
+
+function actionMoveTubeToPreProcessPos() {
+  executeServiceMethod('moveTubeToPreProcessPos',[
+  moveTubeToPreProcessPosParams.value[0],
+  moveTubeToPreProcessPosParams.value[1] * 1
+    ]);
+}
+
+function actionMoveTubeToExistJudgmentPos() {
+  executeServiceMethod('moveTubeToExistJudgmentPos',[
+  moveTubeToExistJudgmentPosParams.value[0],
+  moveTubeToExistJudgmentPosParams.value[1] * 1
+    ]);
+}
+</script>

src/main.js

@@ -1,4 +1,8 @@
 import { createApp } from 'vue'
 import App from './App.vue'
+import Antd from 'ant-design-vue';
+import './style/app.css'
 
-createApp(App).mount('#app')
+let app = createApp(App)
+app.use(Antd);
+app.mount('#app')

src/style/app.css

@@ -0,0 +1,5 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+html, body, #app {height:100%;}

src/utils/ApiClient.js

@@ -0,0 +1,26 @@
+import axios from 'axios';
+export default class ApiClient {
+    // instancec of client
+    static instance = null;
+
+    // get client instance
+    static getClient() {
+        if ( null === ApiClient.instance ) {
+            ApiClient.instance = new ApiClient();
+        }
+        return ApiClient.instance;
+    }
+
+    // call api
+    async call( name, params={} ) {
+        let response = await axios({
+            method: 'post',
+            url: `http://127.0.0.1/api/${name}`,
+            data: params
+        });
+        if ( !response.data.success ) {
+            throw new Error(`API【${name}】调用失败 : ${response.data.message}`);
+        }
+        return response.data.data;
+    }
+}

tailwind.config.js

@@ -0,0 +1,9 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./src/**/*.{html,js,vue}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+

vue.config.js

@@ -1,4 +1,7 @@
 const { defineConfig } = require('@vue/cli-service')
 module.exports = defineConfig({
-  transpileDependencies: true
+  transpileDependencies: true,
+  configureWebpack : {
+    devtool:"source-map"
+  },
 })