修复类型页面图片全都显示一样的问题。

api/common/index.js

@@ -17,6 +17,13 @@ export function deviceTypeList(params) {
 	})
 }
 
+export function typeAll(){
+	return request({
+		url: '/app/xinghan/device/typeAll',
+		method: 'get'
+	});
+}
+
 // 删除设备列表接口
 export function deviceUnbind(id) {
 	return request({

pages/common/allType/index.vue

@@ -2,7 +2,7 @@
 	<view class="alltype">
 		<!-- 车辆列表 -->
 		<view class="vehicle-list" v-if="vehicles.length>0">
-			<view v-for="(item, index) in vehicles" :key="index">
+			<view class="typeContent" v-for="(item, index) in vehicles" :key="index">
 				<view class="vehicle-item" @click="alltypeInfo(item)">
 					<image :src="item.img" mode="aspectFit" class="IMG"></image>
 				</view>
@@ -20,6 +20,7 @@
 <script>
 	import {
 		deviceTypeList,
+		typeAll
 	} from '@/api/common/index.js'
 	export default {
 		data() {
@@ -90,25 +91,50 @@
 		},
 		methods: {
 			getTab() {
-				deviceTypeList({}).then((res) => {
+				let p1 = deviceTypeList({});
-					if (res.code == 200) {
+				let p2 = typeAll();
-						for (var i = 0; i < res.data.length; i++) {
-							var item = res.data[i];
 
-							item.img="/static/images/common/bip.6.png";
+				Promise.allSettled([p1, p2]).then(result => {
-							let f=this.typeImgs.find(v=>{
+					let res = result[0].status === 'fulfilled' ? result[0].value : {};
-								if(item.typeName.toLowerCase()===v.Name.toLowerCase()){
+					let res1 = result[1].status === 'fulfilled' ? result[1].value : {};
+					if (res.code == 200) {
+						if (res1.code != 200) {
+							for (let i = 0; i < res.data.length; i++) {
+								let f = this.typeImgs.find(v => {
+									if (res.data[i].typeName.toLowerCase() === v.Name.toLowerCase()) {
 										return true;
 									}
 									return false;
 								});
-							if(f){
+								if (f) {
-								item.img=f.url;
+									res.data[i].img = f.url;
+								}else{
+									res.data[i].img = "/static/images/common/bip.6.png";
+								}
+							}
+						
+						} else {
+							let all = res1.data;
+							for (let i = 0; i < res.data.length; i++) {	
+								let f = all.find(v => {
+									if (res.data[i].id === v.deviceTypeId) {
+										return true;
+									}
+									return false;
+								});
+								if (f && f.devicePic) {
+									res.data[i].img = f.devicePic;
+								}else{
+									res.data[i].img = "/static/images/common/bip.6.png";
+								}
 							}							
 						}
 						this.vehicles = res.data;
+
 					}
-				})
+
+				});
+
 			},
 			alltypeInfo(item) {
 				uni.switchTab({
@@ -139,8 +165,10 @@
 	.vehicle-list {
 		display: flex;
 		flex-wrap: wrap;
+		flex-direction: row;
+		align-content: center;
+		justify-content: space-around;
 		align-items: center;
-		text-align: center;
 
 	}
 
@@ -151,14 +179,17 @@
 	}
 
 	.vehicle-item {
-		padding: 24rpx 0;
+
 		background: rgba(26, 26, 26, 1);
-		border-radius: 16rpx;
+		border-radius: 9px;
-		width: 156rpx;
+		width: 140rpx;
-		height: 156rpx;
+		height: 140rpx;
-		margin-right: 16rpx;
+
-		margin-bottom: 16rpx;
+		margin-bottom: 15rpx;
-		line-height: 156rpx;
+
+		display: grid;
+		align-content: center;
+		justify-content: center;
 
 	}
 
@@ -170,6 +201,9 @@
 
 	.plate-number {
 		color: rgba(255, 255, 255, 0.87);
+		font-size: 27rpx;
+		font-family: 'PingFang SC';
+		text-align: center;
 	}
 
 	.noDATA {
@@ -177,4 +211,8 @@
 		color: rgba(255, 255, 255, 0.87);
 		transform: translate(-0%, 100%);
 	}
+
+	.typeContent {
+		padding-bottom: 15rpx;
+	}
 </style>

pages/common/index/index.vue

@@ -254,9 +254,9 @@
 			downCallback() {
 
 				console.log("下拉加载")
-				if(this.mescroll){
+				if (this.mescroll) {
 					this.mescroll.resetUpScroll(false);
-					this.mescroll.scrollTo(0,0);
+					this.mescroll.scrollTo(0, 0);
 				}
 				this.getData();
 
@@ -269,7 +269,7 @@
 
 				this.getData();
 			},
-			bleStateBreak(){
+			bleStateBreak() {
 				console.error("蓝牙适配器不可用");
 				this.updateBleStatu();
 			},
@@ -299,9 +299,9 @@
 					for (var i = 0; i < this.deviceList.length; i++) {
 
 
-						let f=null;
+						let f = null;
 						if (ble.data && ble.data.LinkedList) {
-							f=ble.data.LinkedList.find(v => {
+							f = ble.data.LinkedList.find(v => {
 
 								if (v.macAddress && v.device && v.device.id) {
 									return v.device.id == this.deviceList[i].id;
@@ -309,21 +309,19 @@
 								return false;
 							});
 						}
-						if(f){
+						if (f) {
 
 							this.$set(this.deviceList[i], 'bleStatu', f.Linked);
-							if(f.formData){
+							if (f.formData) {
-								let battary=0;
+								let battary = 0;
-								if('battary' in f.formData){
+								if ('battary' in f.formData) {
-									battary=f.formData.battary;
+									battary = f.formData.battary;
+								} else if ('sta_PowerPercent' in f.formData) {
+									battary = f.formData.sta_PowerPercent;
+								} else if ('sta_battery' in f.formData) {
+									battary = f.formData.sta_battery;
 								}
-								else if('sta_PowerPercent' in f.formData){
+								this.$set(this.deviceList[i], 'battery', battary);
-									battary=f.formData.sta_PowerPercent;
-								}
-								else if('sta_battery' in f.formData){
-									battary=f.formData.sta_battery;
-								}
-								this.$set(this.deviceList[i], 'battery',battary);
 							}
 
 
@@ -343,17 +341,17 @@
 			// 所有分享,所有类型
 			handleshareClick(item) {
 				this.showshare = false; // 关闭弹窗
-				var that=this;
+				var that = this;
 				switch (item.action) {
 					case 'type':
 						uni.navigateTo({
 							url: '/pages/common/allType/index',
-							events:{
+							events: {
-								index(data){									
+								index(data) {
-								if(data && data.id){
+									if (data && data.id) {
-									that.tabs.find((v,i)=>{										
+										that.tabs.find((v, i) => {
-										if(v.id===data.id){
+											if (v.id === data.id) {
-											that.switchTab(v,i);
+												that.switchTab(v, i);
 												return true;
 											}
 											return false;
@@ -422,10 +420,10 @@
 							pageNum: this.mescroll.num,
 							pageSize: this.size,
 							deviceType: this.activeTabInfo ? this.activeTabInfo.id : '', // 使用传入的设备类型
-							isAsc:'desc',
+							isAsc: 'desc',
-							orderByColumn:'bindingTime'
+							orderByColumn: 'bindingTime'
 						}
-						if(!data.pageNum){
+						if (!data.pageNum) {
 							this.mescroll.endSuccess(0, false);
 							resolve();
 							return;
@@ -439,16 +437,16 @@
 								}));
 
 								// 如果是第一页或切换分类，替换数据
-								if(data.pageNum === 1){
+								if (data.pageNum === 1) {
-									this.deviceList =newDevices
+									this.deviceList = newDevices
-								}else{
+								} else {
 									//防止后端返回的数据包含已有数据
 									for (var i = 0; i < newDevices.length; i++) {
-										let device=newDevices[i];
+										let device = newDevices[i];
-										let f=this.deviceList.find(v=>{
+										let f = this.deviceList.find(v => {
-											return v.id===device.id;
+											return v.id === device.id;
 										});
-										if(!f){
+										if (!f) {
 											this.deviceList.push(device);
 										}
 									}
@@ -459,13 +457,14 @@
 								this.total = res.total;
 								// 判断是否加载完成
 								let hasNext = true;
-								if (res.rows.length < this.size || this.deviceList.length >= this.total) {
+								if (res.rows.length < this.size || this.deviceList.length >= this
+									.total) {
 									hasNext = false;
 								} else {
 									hasNext = true;
 								}
 								this.mescroll.endSuccess(res.rows.length, hasNext);
-							}else{
+							} else {
 								this.mescroll.endSuccess(0, false);
 							}
 						}).finally(() => {
@@ -482,11 +481,11 @@
 			scan() {
 				this.showTooltip = !this.showTooltip;
 			},
-			closePopMenu(){
+			closePopMenu() {
-				setTimeout(()=>{
+				setTimeout(() => {
 					this.showTooltip = false;
 					this.showshare = false;
-				},100);
+				}, 100);
 			},
 			closePopupTooltip() {
 				this.showTooltip = !this.showTooltip
@@ -548,7 +547,9 @@
 			},
 			// 右滑点击事件处理
 			handleSwipeClick(e, item, index) {
-				const {content} = e
+				const {
+					content
+				} = e
 				setTimeout(() => {
 					console.log(item, 'eeeee');
 					switch (e.content.text) {
@@ -584,9 +585,9 @@
 							duration: 1000
 						});
 
-						this.deviceList.find((v,i)=>{
+						this.deviceList.find((v, i) => {
-							if(v.id==data.id){
+							if (v.id == data.id) {
-								this.deviceList.splice(i,1);
+								this.deviceList.splice(i, 1);
 								return true;
 							}
 							return false;
@@ -625,9 +626,9 @@
 							duration: 1000
 						});
 
-						this.deviceList.find((v,i)=>{
+						this.deviceList.find((v, i) => {
-							if(v.id===data.id){
+							if (v.id === data.id) {
-								this.$set(this.deviceList[i],'deviceName',data.deviceName);
+								this.$set(this.deviceList[i], 'deviceName', data.deviceName);
 								return true;
 							}
 							return false;
@@ -746,15 +747,16 @@
 					.filter(Boolean);
 			},
 		},
-		onShow(){
+		onShow() {
-			if(ble){
+			
+			if (ble) {
 				//因为vue视图只能后退不能隐藏后再显示
 				//所以回到首页后将其他所有页面的订阅都删除
 				ble.removeAllCallbackByRetain(pagePath);
 			}
 		},
 		onLoad() {
-			debugger;
+			
 			console.error("首页加载");
 			this.getTab()
 			this.downCallback();
@@ -789,15 +791,15 @@
 			}, pagePath);
 
 			//蓝牙适配器不可用的回调
-			ble.addStateBreakCallback(res=>{
+			ble.addStateBreakCallback(res => {
 				console.error("蓝牙适配器不可用的回调");
 				this.bleStateBreak();
-			},pagePath);
+			}, pagePath);
 
 			//接收到消息的回调
-			ble.addReceiveCallback((rec,f,path,arr)=>{
+			ble.addReceiveCallback((rec, f, path, arr) => {
 				this.updateBleStatu();
-			},pagePath);
+			}, pagePath);
 
 			this.getSystemInfoSyncH();
 		},
@@ -807,6 +809,7 @@
 			uni.$off('refreshDeviceList');
 		},
 		onUnload() {
+			
 			uni.$off('deviceStatusUpdate');
 			ble && ble.removeAllCallback(pagePath);
 		}
@@ -1181,13 +1184,15 @@
 		background-color: rgba(35, 35, 35, 0.87);
 		color: rgba(255, 255, 255, 1);
 	}
-	.mask{
+
+	.mask {
 		position: fixed;
 		width: 100%;
 		height: 100%;
 		z-index: 9998;
 		background-color: #00000000;
 	}
+
 	/* 提示框样式 */
 	.tooltip-box {
 		position: fixed;