shangchuan

src/assets/api/home.js

@@ -19,7 +19,27 @@ const QueryDetail = query => {
   })
 }
 
+const QueryReady = query => {
+  return new Promise(resolve => {
+    utils.SockEventMap.readyResult = data => {
+      utils.SockEventMap.readyResult = undefined
+      resolve(data)
+    }
+    utils.SendWss('ready', query)
+  })
+}
+
+const QueryFinish = query => {
+  return new Promise(resolve => {
+    utils.SockEventMap.finishResult = data => {
+      utils.SockEventMap.finishResult = undefined
+      resolve(data)
+    }
+    utils.SendWss('finish', query)
+  })
+}
+
 
 export default {
-  Query, QueryDetail,
+  Query, QueryDetail, QueryReady, QueryFinish
 }

src/views/Detail/Detail.vue

@@ -21,9 +21,9 @@
         <div class="table_last">{{data?.old[0]?.remain}}ml</div>
       </div>
       <div class="table_content2">
-        <div class="table_last">{{data?.new[0]?.id}}</div>
-        <div class="table_last">{{data?.new[0]?.name}}</div>
-        <div class="table_last">{{data?.new[0]?.remain}}ml</div>
+        <div class="table_last blue">{{data?.new[0]?.id}}</div>
+        <div class="table_last blue">{{data?.new[0]?.name}}</div>
+        <div class="table_last blue">{{data?.new[0]?.remain}}ml</div>
       </div>
     </div>
     <div class="table_content">
@@ -34,9 +34,9 @@
         <div class="table_last">{{data?.old[1]?.remain}}ml</div>
       </div>
       <div class="table_content2">
-        <div class="table_last">{{data?.new[1]?.id}}</div>
-        <div class="table_last">{{data?.new[1]?.name}}</div>
-        <div class="table_last">{{data?.new[1]?.remain}}ml</div>
+        <div class="table_last blue">{{data?.new[1]?.id}}</div>
+        <div class="table_last blue">{{data?.new[1]?.name}}</div>
+        <div class="table_last blue">{{data?.new[1]?.remain}}ml</div>
       </div>
     </div>
     <div class="table_content">
@@ -47,9 +47,9 @@
         <div class="table_last">{{data?.old[2]?.remain}}ml</div>
       </div>
       <div class="table_content2">
-        <div class="table_last">{{data?.new[2]?.id}}</div>
-        <div class="table_last">{{data?.new[2]?.name}}</div>
-        <div class="table_last">{{data?.new[2]?.remain}}ml</div>
+        <div class="table_last blue">{{data?.new[2]?.id}}</div>
+        <div class="table_last blue">{{data?.new[2]?.name}}</div>
+        <div class="table_last blue">{{data?.new[2]?.remain}}ml</div>
       </div>
     </div>
     <div class="table_content">
@@ -60,13 +60,18 @@
         <div class="table_last">{{data?.old[3]?.remain}}ml</div>
       </div>
       <div class="table_content2">
-        <div class="table_last">{{data?.new[3]?.id}}</div>
-        <div class="table_last">{{data?.new[3]?.name}}</div>
-        <div class="table_last">{{data?.new[3]?.remain}}ml</div>
+        <div class="table_last blue">{{data?.new[3]?.id}}</div>
+        <div class="table_last blue">{{data?.new[3]?.name}}</div>
+        <div class="table_last blue">{{data?.new[3]?.remain}}ml</div>
       </div>
     </div>
+    <br>
+    <br>
+  </div>
+  <div class="button_fixed" v-if="data?.status!==2">
+    <nut-button v-if="show === false" type="default" @click="jump">准备就绪</nut-button>
+    <nut-button v-else type="primary" @click="onSubmit">完成上酒</nut-button>
   </div>
-
 </template>
 
 <script>
@@ -75,17 +80,75 @@ export default {
 }
 </script>
 <script setup>
-  import { ref, onMounted } from 'vue'
+  import { ref, onMounted, getCurrentInstance } from 'vue'
+  import { showDialog, showSuccessToast, showFailToast  } from "vant";
   import { useRoute } from 'vue-router'
   import Api from '../../assets/api/home'
 
+  const { proxy } = getCurrentInstance()
   const route = useRoute();
   const id = ref('');
-  const data = ref({})
+  const data = ref({
+    device: {
+      id: '',
+      addr: ''
+    },
+    old: [
+      {id: '', name: '', remain: ''},
+      {id: '', name: '', remain: ''},
+      {id: '', name: '', remain: ''},
+      {id: '', name: '', remain: ''},
+    ],
+    new: [
+      {id: '', name: '', remain: ''},
+      {id: '', name: '', remain: ''},
+      {id: '', name: '', remain: ''},
+      {id: '', name: '', remain: ''},
+    ]
+  })
+
+  const show = ref(false)
 
   const init = () => {
     Api.QueryDetail(id.value).then(res => {
       data.value = res.data
+      data.value.publish = proxy.$moment(data.value?.publish).format('YYYY-MM-DD HH:mm:ss')
+
+    })
+  }
+
+  const jump = () => {
+    Api.QueryReady(data.value?.id).then(res => {
+      if(res.status) {
+        showDialog({
+          title: '温馨提示',
+          message: `请在机器上填写授权码：${data.value?.code}`,
+        })
+        show.value = true;
+      } else {
+        showDialog({
+          title: '温馨提示',
+          message: res.msg,
+        })
+      }
+    }).catch((err) => {
+      showDialog({
+        title: '错误',
+        content: err.msg,
+        noCancelBtn: true,
+      })
+    })
+  }
+
+  const onSubmit = () => {
+    Api.QueryFinish(data.value?.id).then(res => {
+      if(res.status) {
+        showSuccessToast('上酒成功')
+      } else {
+        showFailToast(res.msg)
+      }
+    }).catch((err) => {
+      showFailToast(err.msg)
     })
   }
 
@@ -99,6 +162,9 @@ export default {
   .box {
     box-sizing: border-box;
     padding: 0 10px;
+    width: 100%;
+    height: calc(100% - 30px);
+    overflow: auto;
   }
   .title {
     margin-top: 10px;
@@ -179,10 +245,18 @@ export default {
     width: 100%;
     height: 30px;
     box-sizing: border-box;
+    line-height: 30px;
     border-bottom: 1px solid #ddd;
   }
   .table_last:last-child{
     border: 0;
   }
-
+  .blue {
+    color: #0081FF;
+  }
+  .button_fixed {
+    position: fixed;
+    bottom: 5px;
+    right: 10px;
+  }
 </style>