From 71a23ec9b986f0946bbd1c2ef54f2cadecf1ed9b Mon Sep 17 00:00:00 2001
From: Admin <978517621@qq.com>
Date: 星期三, 17 八月 2022 20:01:04 +0800
Subject: [PATCH] Default Changelist
---
src/views/intellectInspect/intelligentLine/index.vue | 84 +++++++++++++++++++++++++++++++-----------
1 files changed, 62 insertions(+), 22 deletions(-)
diff --git a/src/views/intellectInspect/intelligentLine/index.vue b/src/views/intellectInspect/intelligentLine/index.vue
index 8581867..4c8f6e2 100644
--- a/src/views/intellectInspect/intelligentLine/index.vue
+++ b/src/views/intellectInspect/intelligentLine/index.vue
@@ -23,7 +23,9 @@
<div class="line-map" v-if="dataList && dataList.length > 0">
<div class="line-item" v-for="(item, index) in dataList" :key="index">
<div class="picbox">
- <img src="../../../assets/loginPage/equipment.jpg"/>
+ <div class="imgbox">
+ <img :src="item.rfidImage==null?defaultImg:item.rfidImage"/>
+ </div>
<p>
RFID: <span>{{ item.rfid }}</span>
</p>
@@ -85,7 +87,7 @@
<script lang="ts">
import screenfull from 'screenfull';
import { lineApi } from '/@/api/intelligentLine';
-import { toRefs, reactive, ref, onMounted, onUnmounted, computed } from 'vue';
+import {toRefs, reactive, ref, onMounted, onUnmounted, computed, nextTick} from 'vue';
import {useRoute} from 'vue-router';
import { storeToRefs } from 'pinia';
import { initBackEndControlRoutes } from '/@/router/backEnd';
@@ -103,7 +105,8 @@
socket: any;
socketData: string;
data: Array<any>;
- id: string
+ id: string;
+ defaultImg: string
}
export default {
name: 'intelligentLine',
@@ -119,7 +122,8 @@
socketData: '',
socket: null,
data: [],
- id: ''
+ id: '',
+ defaultImg: new URL('../../../assets/default-img.jpg',import.meta.url).href
});
onMounted(() => {
@@ -217,9 +221,11 @@
// 页面关闭处理
onUnmounted(() => {
// 销毁监听
- state.socket.onclose = () => {
- console.log('socket已经关闭');
- };
+ nextTick(()=>{
+ state.socket.onclose = () => {
+ console.log('socket已经关闭');
+ };
+ })
});
return {
dataList,
@@ -259,23 +265,35 @@
.picbox {
width: 100%;
- height: 180px;
+ height: 200px;
padding: 10px;
- margin-bottom: 40px;
+ margin-bottom: 20px;
box-sizing: border-box;
-
- img {
- display: block;
+ .imgbox{
width: 100%;
- height: 100px;
- margin-bottom: 8px;
+ height: 120px;
+ position: relative;
+ margin-bottom: 10px;
border-radius: 4px;
+ overflow: hidden;
+ img {
+ display: block;
+ width: 100%;
+ height: auto;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ margin: auto;
+ }
}
+
p {
font-size: 14px;
white-space: nowrap;
color: rgba(255, 255, 255, 0.8);
- margin-top: 10px;
+ margin-bottom: 4px;
span {
color: #fff;
}
@@ -285,7 +303,7 @@
.item {
width: calc((100vw - 40px) / 6);
height: calc((100vh - 130px) / 5);
- padding: 0 20px 20px 50px;
+ padding: 0 40px 20px 50px;
position: relative;
box-sizing: border-box;
border-left: 1px solid #36fcfc;
@@ -460,13 +478,24 @@
padding: 10px;
margin-bottom: 40px;
box-sizing: border-box;
-
- img {
- display: block;
+ .imgbox{
width: 100%;
height: 100px;
+ position: relative;
margin-bottom: 6px;
border-radius: 4px;
+ overflow: hidden;
+ img {
+ display: block;
+ width: 100%;
+ height: auto;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ margin: auto;
+ }
}
p {
font-size: 14px;
@@ -659,13 +688,24 @@
padding: 10px;
margin-bottom: 30px;
box-sizing: border-box;
-
- img {
- display: block;
+ .imgbox{
width: 100%;
height: 80px;
+ position: relative;
margin-bottom: 10px;
border-radius: 4px;
+ overflow: hidden;
+ img {
+ display: block;
+ width: 100%;
+ height: auto;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ margin: auto;
+ }
}
p {
font-size: 12px;
--
Gitblit v1.9.2