|
|
@@ -84,109 +84,44 @@
|
|
|
|
|
|
</div>
|
|
|
<div class="history-section flex-col">
|
|
|
- <span class="history-title">拍摄历史</span>
|
|
|
+ <span class="history-title">拍摄记录</span>
|
|
|
<img class="divider-line" referrerpolicy="no-referrer" src="@/assets/images/Photography/divider-line.png" />
|
|
|
<div class="history-warp">
|
|
|
- <div class="history-item " style="padding:10px;">
|
|
|
- <div class="flex-item left c-333">货号：AU7729 8192 9291</div>
|
|
|
- <el-skeleton class="mar-top-10" style="width: 100%" :loading="loading" animated :throttle="500">
|
|
|
- <template #template>
|
|
|
- <div class="flex top left">
|
|
|
- <el-skeleton-item variant="image" style="width: 146px; height: 146px" />
|
|
|
- <div style=" flex: 1; height: 100%; margin-top: -6px;" class="flex top wrap between">
|
|
|
- <el-skeleton-item v-for="i in 4" :key="i" variant="image"
|
|
|
- style="width: 70px; height: 70px;margin: 6px 0 0 6px; " />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <template #default>
|
|
|
- <div class="flex top left">
|
|
|
- <el-popover v-if="test_image_url" width="280" height="280" trigger="hover">
|
|
|
- <template #reference>
|
|
|
- <el-image :src="ossResize(test_image_url, {
|
|
|
- m: 'fill',
|
|
|
- h: 146,
|
|
|
- w: 146
|
|
|
- })" fit="contain" class="cur-p" style="width: 146px; height: 146px" />
|
|
|
- </template>
|
|
|
- <el-image style="width: 250px;height: 250px" fit="contain" :src="ossResize(test_image_url, {
|
|
|
- m: 'fill',
|
|
|
- h: 250,
|
|
|
- w: 250
|
|
|
- })
|
|
|
- " />
|
|
|
- </el-popover>
|
|
|
- <div style=" flex: 1; height: 100%; margin-top: -6px;" class="flex top wrap between">
|
|
|
- <template v-for="i in 4" :key="i">
|
|
|
- <el-popover v-if="test_image_url" width="280" height="280" trigger="hover">
|
|
|
- <template #reference>
|
|
|
- <el-image :src="ossResize(test_image_url, {
|
|
|
- m: 'fill',
|
|
|
- h: 80,
|
|
|
- w: 80
|
|
|
- })" fit="contain" class="cur-p" style="width: 70px; height: 70px;margin: 6px 0 0 6px;" />
|
|
|
- </template>
|
|
|
- <el-image style="width: 250px;height: 250px" fit="contain" :src="ossResize(test_image_url, {
|
|
|
- m: 'fill',
|
|
|
- h: 250,
|
|
|
- w: 250
|
|
|
- })
|
|
|
- " />
|
|
|
- </el-popover>
|
|
|
- </template>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </el-skeleton>
|
|
|
- </div>
|
|
|
- <template v-for="i in 5" :key="i">
|
|
|
- <img class="divider-line" referrerpolicy="no-referrer"
|
|
|
- src="@/assets/images/Photography/divider-line.png" />
|
|
|
- <div class="history-item" style="padding:10px;">
|
|
|
- <div class="flex-item left c-333">货号：AU7729 8192 9291</div>
|
|
|
- <el-skeleton class="mar-top-10" style="width: 100%" :loading="loading" animated :throttle="500">
|
|
|
- <template #template>
|
|
|
- <div class="flex top left">
|
|
|
- <el-skeleton-item variant="image" style="width: 146px; height: 146px" />
|
|
|
- <div style=" flex: 1; height: 100%; margin-top: -6px; margin-left: 8px;"
|
|
|
- class="flex top wrap between">
|
|
|
- <el-skeleton-item v-for="i in 4" :key="i" variant="image"
|
|
|
- style="width: 70px; height: 70px;margin: 6px 0 0 0px; " />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div style=" flex: 1; height: 100%; margin-top: 4px;" class="flex top wrap between">
|
|
|
- <el-skeleton-item v-for="i in 4" :key="i" variant="image"
|
|
|
- style="width: 70px; height: 70px;margin: 6px 0 0 0px; " />
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <template #default>
|
|
|
- <div class="flex top left">
|
|
|
- <el-image :src="ossResize(test_image_url, {
|
|
|
- m: 'fill',
|
|
|
- h: 80,
|
|
|
- w: 80
|
|
|
- })" fit="contain" style="width: 146px; height: 146px" />
|
|
|
- <div style=" flex: 1; height: 100%; margin-top: -6px; margin-left: 8px;"
|
|
|
- class="flex top wrap between">
|
|
|
- <el-image v-for="i in 4" :key="i" :src="ossResize(test_image_url, {
|
|
|
- m: 'fill',
|
|
|
- h: 80,
|
|
|
- w: 80
|
|
|
- })" fit="contain" style="width: 70px; height: 70px;margin: 6px 0 0 0px; " />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div style=" flex: 1; height: 100%; margin-top: 4px; margin-left: -6px;" class="flex top wrap left">
|
|
|
- <el-image v-for="i in 6" :key="i" :src="ossResize(test_image_url, {
|
|
|
- m: 'fill',
|
|
|
- h: 80,
|
|
|
- w: 80
|
|
|
- })" fit="contain" style="width: 70px; height: 70px; margin: 6px 0 0 7px; " />
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </el-skeleton>
|
|
|
+
|
|
|
+ <div class="history-item clearfix" v-for="item in goodsList" style="padding:10px;">
|
|
|
+ <div class="flex between flex-item c-333">
|
|
|
+ <div class="chaochu flex-item flex left">货号：{{ item.goods_art_no }}</div>
|
|
|
+ <div class="c-666 fs-12">{{ item.time }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="mar-top-10" style="width: 100%" >
|
|
|
+ <component class="history-item_image"
|
|
|
+ v-loading="!src"
|
|
|
+ v-for="src in item.images"
|
|
|
+ :is="src ? 'div' : 'p'"
|
|
|
+ >
|
|
|
+ <el-popover
|
|
|
+ placement="top-start"
|
|
|
+ v-if="src"
|
|
|
+ >
|
|
|
+ <template #reference>
|
|
|
+ <el-image :src="src" fit="fill" >
|
|
|
+ <template #error>
|
|
|
+ <div class="image-slot"></div>
|
|
|
+ </template>
|
|
|
+ </el-image>
|
|
|
+ </template>
|
|
|
+ </el-popover>
|
|
|
+
|
|
|
+
|
|
|
+ <el-image :src="src" fit="fill" v-else>
|
|
|
+ <template #error>
|
|
|
+ <div class="image-slot"></div>
|
|
|
+ </template>
|
|
|
+ </el-image>
|
|
|
+ </component>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
|
|
|
- </template>
|
|
|
</div>
|
|
|
|
|
|
<!-- 无数据 -->
|
|
|
@@ -207,77 +142,99 @@
|
|
|
</template>
|
|
|
<script setup lang="ts">
|
|
|
import headerBar from '@/components/header-bar/index.vue'
|
|
|
-import { ref,reactive, onMounted } from 'vue'
|
|
|
+import { ref, reactive, onMounted, onBeforeUnmount } from 'vue'
|
|
|
import { ossResize } from '@/utils/appfun'
|
|
|
-import icpList from '@/utils/ipc'
|
|
|
+import icpList from '@/utils/ipc'
|
|
|
import client from "@/stores/modules/client";
|
|
|
import socket from "@/stores/modules/socket";
|
|
|
+
|
|
|
const goods_art_no = ref('')
|
|
|
const loading = ref(true)
|
|
|
const test_image_url = ref('https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png')
|
|
|
|
|
|
-
|
|
|
const clientStore = client();
|
|
|
const runAction = ref({
|
|
|
"action": "",
|
|
|
"goods_art_no": ""
|
|
|
})
|
|
|
|
|
|
-onMounted(()=>{
|
|
|
|
|
|
- clientStore.ipc.on(icpList.socket.message+'_blue_tooth_scan', (event, result) => {
|
|
|
- console.log('blue_tooth_scan')
|
|
|
- console.log(result)
|
|
|
- if(result.code === 0 && result.data?.data){
|
|
|
- runGoods(result.data?.data)
|
|
|
- }
|
|
|
-
|
|
|
- /*
|
|
|
- *
|
|
|
- {
|
|
|
- "code": 0,
|
|
|
- "msg": "准备执行[执行左脚程序]",
|
|
|
- "status": 2,
|
|
|
- "data": {
|
|
|
- "data": {
|
|
|
- "action": "执行左脚程序",
|
|
|
- "goods_art_no": "6957535123138"
|
|
|
- },
|
|
|
- "type": "run_mcu"
|
|
|
+const goodsList = reactive(
|
|
|
+ [
|
|
|
+ {
|
|
|
+ goods_art_no:"123456789123456789123456789",
|
|
|
+ image_counts:6,
|
|
|
+ images:['file:\\\C:\\Users\\Administrator\\Desktop\\图片\\已扣图\\123.png','','','','','','',''],
|
|
|
+ time:"03/20 14:45"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ goods_art_no:"123456789",
|
|
|
+ image_counts:6,
|
|
|
+ images:['','','','','','','',''],
|
|
|
+ time:"25/03/20 14:45"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ goods_art_no:"123456789",
|
|
|
+ image_counts:6,
|
|
|
+ images:['','','','','','','',''],
|
|
|
+ time:"25/03/20 14:45"
|
|
|
},
|
|
|
- "msg_type": "blue_tooth_scan"
|
|
|
+ {
|
|
|
+ goods_art_no:"123456789",
|
|
|
+ image_counts:6,
|
|
|
+ images:['','','','','','','',''],
|
|
|
+ time:"25/03/20 14:45"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ goods_art_no:"123456789",
|
|
|
+ image_counts:6,
|
|
|
+ images:['','','','','','','',''],
|
|
|
+ time:"25/03/20 14:45"
|
|
|
+ }
|
|
|
+ ]
|
|
|
+)
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ clientStore.ipc.on(icpList.socket.message + '_blue_tooth_scan', (event, result) => {
|
|
|
+ if (result.code === 0 && result.data?.data) {
|
|
|
+ runGoods(result.data?.data)
|
|
|
}
|
|
|
- *
|
|
|
- * */
|
|
|
});
|
|
|
|
|
|
- //mcu信息 监听 调试用
|
|
|
- clientStore.ipc.on(icpList.socket.message+'_mcu', (event, result) => {
|
|
|
+ clientStore.ipc.on(icpList.socket.message + '_mcu', (event, result) => {
|
|
|
console.log('mcu')
|
|
|
console.log(result)
|
|
|
})
|
|
|
|
|
|
+ clientStore.ipc.on(icpList.socket.message + '_image_process', (event, result) => {
|
|
|
+ if(result.msg === 'MCU 命令已发送完成'){
|
|
|
+ result.image_counts //拍照数量
|
|
|
+ result.goods_art_no //货号
|
|
|
+ }
|
|
|
+ console.log('_image_process')
|
|
|
+ console.log(result)
|
|
|
+ })
|
|
|
+})
|
|
|
|
|
|
-
|
|
|
+//关闭页面 去掉监听
|
|
|
+onBeforeUnmount(() => {
|
|
|
+ clientStore.ipc.removeAllListeners(icpList.socket.message + '_blue_tooth_scan');
|
|
|
+ clientStore.ipc.removeAllListeners(icpList.socket.message + '_mcu');
|
|
|
+ clientStore.ipc.removeAllListeners(icpList.socket.message + '_image_process');
|
|
|
})
|
|
|
|
|
|
// 初始化 WebSocket 状态管理
|
|
|
const socketStore = socket()
|
|
|
|
|
|
-async function runGoods(data){
|
|
|
- socketStore.sendMessage({
|
|
|
- type: 'run_mcu',
|
|
|
- data,
|
|
|
- })
|
|
|
-
|
|
|
- runAction.value = data
|
|
|
+async function runGoods(data) {
|
|
|
+ await socketStore.connectSocket();
|
|
|
+ socketStore.sendMessage({
|
|
|
+ type: 'run_mcu',
|
|
|
+ data,
|
|
|
+ })
|
|
|
|
|
|
+ runAction.value = data
|
|
|
}
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
@@ -701,6 +658,37 @@ async function runGoods(data){
|
|
|
flex-grow: 1;
|
|
|
overflow: auto;
|
|
|
height: calc(100% - 125px);
|
|
|
+
|
|
|
+ .history-item {
|
|
|
+ .history-item_image {
|
|
|
+ width: 70px;
|
|
|
+ height: 70px;
|
|
|
+ float: left;
|
|
|
+ margin: 6px 0 0 6px;
|
|
|
+ background: #F7F7F7;
|
|
|
+ .el-image {
|
|
|
+ display: block;
|
|
|
+ width:100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ &:first-child {
|
|
|
+ width: 146px;
|
|
|
+ height: 146px;
|
|
|
+ }
|
|
|
+ &.el-loading-parent--relative{
|
|
|
+ ::v-deep {
|
|
|
+ .el-loading-mask { display: none}
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ p:first-of-type {
|
|
|
+ ::v-deep {
|
|
|
+ .el-loading-mask { display: block !important;}
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.empty-state {
|
