mes_mobile/pages/deviceStatus/deviceStatus.vue

<template>
	<view class="page_padding">
		<view class="padd_bot12 font14 flex_layout">
			<text>硬件设备状态</text>
			<view class="status font12"><text class="drop"></text>在线</view>
		</view>
		<view class="body-view contentboxsty">
			<view class="content-top">
				<view class="content-left" @click="prveClick">
					<text class="iconfont icon-gengduo more_icon"></text>
				</view>
				<view class="content-scroll">
					<view class="center-cut-menu">
						<scroll-view scroll-x="true" show-scrollbar="false" scroll-with-animation="true" :scroll-left="scrollLeft" class="scroll-view horizontalScrollView" >
						  <view class="scroll-item" :style="'width:'+itemWidth+'px'" v-for="(item, index) in list" :key="index" @click="changeMenu(index)">
							<text class="item-text" :class="curIndex == index? 'active' : ''">{{item.name}}</text>
						  </view>
						</scroll-view>
					</view>
				</view>
				<view class="content-right" @click="nextClick">
					<text class="iconfont icon-gengduo"></text>
				</view>
			</view>
			<swiper class="swiper-box-list" circular="true" easing-function="linear" :current="curIndex" @change="swiperChange">
				<swiper-item class="swiper-topic-list" v-for="item in swiperDateList" :key="item.id">
					<view class="swiper-item">
						<view class="img">
							<image style="width: 100%;height: 100%;" :src="item.img"></image>
						</view>
						<view class="font14">
							<view class="device_row">
								<text class="name font_bold">设备名称</text>
								<text class="text">双头立锯</text>
								<view @click="toCamera()" class="videoIcon text" style="position: absolute;right: 0;">
									<text class="iconfont icon-a-shexiangtou_shiti1"></text>
								</view>
							</view>
							<view class="device_row">
								<text class="name font_bold">开机时间</text>
								<text class="text">2024-02-11 08:00:45</text>
							</view>
							<view class="device_row">
								<text class="name font_bold">保养到期日</text>
								<text class="text">2024-02-11 08:00:45</text>
							</view>
							<view class="device_row">
								<text class="name font_bold">今日停机</text>
								<text class="text">5次</text>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
  export default {
    data() {
      return {
        list: [{
        		id: 1,
        		name: '多片锯',
        	},
        	{
        		id: 2,
        		name: '双头带锯',
        	},
        	{
        		id: 3,
        		name: '视觉分析',
        	},
        	{
        		id: 4,
        		name: '卧锯带锯',
        	},
        	{
        		id: 5,
        		name: '上料机架',
        	},
        ],
		// Tab切换内容
		swiperDateList: [
			{
				id: 1,
				content: '1',
				img:'http://dm-auto.oss-cn-shanghai.aliyuncs.com/mes_wechat/duopian.png'
			},
			{
				id: 2,
				content: '2',
				img:'http://dm-auto.oss-cn-shanghai.aliyuncs.com/mes_wechat/liju.png'
			},
			{
				id: 3,
				content: '3',
				img:'http://dm-auto.oss-cn-shanghai.aliyuncs.com/mes_wechat/shijue.png'
			},
			{
				id: 4,
				content: '4',
				img:'http://dm-auto.oss-cn-shanghai.aliyuncs.com/mes_wechat/woshi.png'
			},
			{
				id: 5,
				content: '5',
				img:'http://dm-auto.oss-cn-shanghai.aliyuncs.com/mes_wechat/shang.png'
			},
		],
		itemWidth: 90,
        curIndex: 0,
        scrollLeft: 0,
      }
    },
    mounted() {
      
    },
	onReady() {
		this.getScrollW();
	},
    methods: {
		toCamera(){
			uni.navigateTo({
				url:'/pages/deviceStatus/deviceCamera'
			})
		},
		// 区域宽度，子元素的宽度以及距离左边栏的距离
		getScrollW() {
			let itemWidth = 0;
			let query = uni.createSelectorQuery().in(this);
			query.select('.scroll-view').boundingClientRect(data => {
				this.itemWidth = (data.width/3).toFixed(0);
				itemWidth = (data.width/3).toFixed(0);
				this.getItemWidth(itemWidth);
			}).exec();
		},
		getItemWidth(num){
			let query = uni.createSelectorQuery().in(this);
			query.selectAll('.scroll-item').boundingClientRect(data => {
				let dataLen = data.length;
				for (let i = 0; i < dataLen; i++) {
					this.list[i].width = Number(num);
					this.list[i].left = Number(num) + Number(data[i].left);
				}
			}).exec()
		},
	  
		// 选择标题
		changeMenu(index) {
			this.curIndex = index;
			this.scrollLeft = 0;
			for (let i = 0; i < index - 1; i++) {
				this.scrollLeft += this.list[i].width;
			};
		},
		swiperChange(e) {
			let index = e.detail.current;
			this.changeMenu(index);
		},
		prveClick(){
			this.curIndex = this.curIndex==0? 0 : this.curIndex-1;
		},
		nextClick(){
			this.curIndex = this.curIndex < this.list.length-1? this.curIndex+1 : this.curIndex;
		}
    }
  }
</script>

<style scoped lang="scss">
	.body-view{
		height: 450px;
		.content-top{
			display: flex;
			align-items: center;
			.content-left{flex-basis: 30px;text-align: center;
				.more_icon{display: inline-block;transform: scaleX(-1);}
			}
			.content-scroll{flex: 1;overflow: hidden;}
			.center-cut-menu {width: 100%;height: 100rpx;
				.scroll-view {height: 100rpx;white-space: nowrap;
					.scroll-item {height: 100rpx;padding: 0 20rpx;display: inline-block;text-align: center;box-sizing: border-box;
					.item-text {font-size: 14px;line-height: 100rpx;
					  &.active {
						font-size: 17px;
					  }
					}
				  }
				}
			}
			.content-right{flex-basis: 30px;text-align: center;}
		}
		.swiper-box-list{height: 400px;padding:0 12px;
			.device_row:first-child{margin-top: 6px;}
			.device_row{padding: 6px 0;display: flex;
				.name{flex-basis: 82px;}
			}
		}
	}
	.flex_layout{
		align-items: center;
	}
	.swiper-item{
		.img{
			width: 100%;
			height: 250px;
		}
		.videoIcon{
			color: $uni-color-primary;
		}
	}
	.status{
		background: $uni-bg-color-success;
		margin-left: 8px;
		border-radius: 20px;
		padding: 3px 10px;
		display: flex;
		align-items: center;
		.drop{
			width: 4px;
			height: 4px;
			border-radius: 50%;
			background: $uni-bg-color-whith;
			display: inline-block;
			margin-right: 6px;
		}
	}
</style>