258 lines
6.6 KiB
Vue
258 lines
6.6 KiB
Vue
<template>
|
|
<view class="page_padding">
|
|
<view class=".padd_bot12">
|
|
<text>硬件设备状态</text>
|
|
</view>
|
|
<view class="body-view contentboxsty">
|
|
<view class="content-top">
|
|
<view class="content-left">
|
|
<text class="iconfont icon-gengduo more_icon"></text>
|
|
</view>
|
|
<view class="content-scroll">
|
|
<view class="center-cut-menu">
|
|
<scroll-view scroll-x="true" scroll-with-animation="true" class="scroll-view" :scroll-left="scrollLeft">
|
|
<view class="scroll-item" 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">
|
|
<text class="iconfont icon-gengduo"></text>
|
|
</view>
|
|
</view>
|
|
<swiper class="swiper-box-list" circular="true" :current="curIndex" @change="swiperChange">
|
|
<swiper-item class="swiper-topic-list" v-for="item in swiperDateList" :key="item.id">
|
|
<view class="swiper-item" v-if="item.id==1">
|
|
<view class="" style="width: 100%;">
|
|
<image style="width: 100%;" src="http://dm-auto.oss-cn-shanghai.aliyuncs.com/mes_wechat/background.png" mode=""></image>
|
|
</view>
|
|
<view class="font14">
|
|
<view class="device_row">
|
|
<text class="name font_bold">设备名称</text>
|
|
<text>双头立锯</text>
|
|
<view @click="toCamera()" class="" style="position: absolute;right: 0;">
|
|
相机
|
|
</view>
|
|
</view>
|
|
<view class="device_row">
|
|
<text class="name font_bold">开机时间</text>
|
|
<text>2024-02-11 08:00:45</text>
|
|
</view>
|
|
<view class="device_row">
|
|
<text class="name font_bold">保养到期日</text>
|
|
<text>2024-02-11 08:00:45</text>
|
|
</view>
|
|
<view class="device_row">
|
|
<text class="name font_bold">今日停机</text>
|
|
<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: '多片锯'
|
|
},
|
|
{
|
|
id: 6,
|
|
name: '卧锯测试A'
|
|
},
|
|
{
|
|
id: 7,
|
|
name: '卧锯B'
|
|
},
|
|
{
|
|
id: 8,
|
|
name: '卧锯测试3'
|
|
},
|
|
{
|
|
id: 9,
|
|
name: '卧锯4'
|
|
},
|
|
{
|
|
id: 10,
|
|
name: '卧锯5'
|
|
},
|
|
{
|
|
id: 11,
|
|
name: '卧锯6'
|
|
},
|
|
],
|
|
// Tab切换内容
|
|
swiperDateList: [
|
|
{
|
|
id: 1,
|
|
content: '1'
|
|
},
|
|
{
|
|
id: 2,
|
|
content: '2'
|
|
},
|
|
{
|
|
id: 3,
|
|
content: '3'
|
|
},
|
|
{
|
|
id: 4,
|
|
content: '4'
|
|
},
|
|
{
|
|
id: 5,
|
|
content: '5'
|
|
},
|
|
{
|
|
id: 6,
|
|
content: '6'
|
|
},
|
|
{
|
|
id: 7,
|
|
content: '7'
|
|
},
|
|
{
|
|
id: 8,
|
|
content: '8'
|
|
},
|
|
{
|
|
id: 9,
|
|
content: '9'
|
|
},
|
|
{
|
|
id: 10,
|
|
content: '10'
|
|
},
|
|
{
|
|
id: 11,
|
|
content: '11'
|
|
},
|
|
],
|
|
contentScrollW: 0, // 导航区宽度
|
|
curIndex: 0, // 当前选中
|
|
scrollLeft: 0, // 横向滚动条位置
|
|
}
|
|
},
|
|
mounted() {
|
|
// 获取标题区域宽度，和每个子元素节点的宽度
|
|
this.getScrollW()
|
|
},
|
|
methods: {
|
|
toCamera(){
|
|
uni.navigateTo({
|
|
url:'/pages/deviceStatus/deviceCamera'
|
|
})
|
|
},
|
|
// 获取标题区域宽度，和每个子元素节点的宽度以及元素距离左边栏的距离
|
|
getScrollW() {
|
|
let query = uni.createSelectorQuery().in(this);
|
|
query.select('.scroll-view').boundingClientRect(data => {
|
|
// 拿到 scroll-view 组件宽度
|
|
this.contentScrollW = data.width
|
|
}).exec();
|
|
|
|
query.selectAll('.scroll-item').boundingClientRect(data => {
|
|
let dataLen = data.length;
|
|
for (let i = 0; i < dataLen; i++) {
|
|
// scroll-view 子元素组件距离左边栏的距离
|
|
this.list[i].left = data[i].left;
|
|
// scroll-view 子元素组件宽度
|
|
this.list[i].width = data[i].width
|
|
}
|
|
}).exec()
|
|
},
|
|
|
|
// 选择标题
|
|
changeMenu(index) {
|
|
this.curIndex = index;
|
|
// console.log(index,111)
|
|
// 效果一(当前点击子元素靠左展示) 局限性：子元素宽度相同
|
|
// this.scrollLeft = index * this.list[index].width
|
|
|
|
// 效果一(当前点击子元素靠左展示) 子元素宽度不相同也可实现
|
|
// this.scrollLeft = 0;
|
|
// for (let i = 0; i < index; i++) {
|
|
// this.scrollLeft += this.list[i].width
|
|
// };
|
|
|
|
|
|
// 效果二(当前点击子元素靠左留一展示) 局限性：子元素宽度相同
|
|
// this.scrollLeft = (index - 1) * this.list[index].width
|
|
|
|
// 效果二(当前点击子元素靠左留一展示) 子元素宽度不相同也可实现
|
|
this.scrollLeft = 0;
|
|
for (let i = 0; i < index - 1; i++) {
|
|
this.scrollLeft += this.list[i].width
|
|
};
|
|
|
|
|
|
// 效果三(当前点击子元素居中展示) 不受子元素宽度影响
|
|
// this.scrollLeft = this.list[index].left - this.contentScrollW / 2 + this.list[index].width / 2;
|
|
},
|
|
//
|
|
swiperChange(e) {
|
|
// console.log(22,e)
|
|
let index = e.detail.current
|
|
this.changeMenu(index)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style 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: auto;}
|
|
.center-cut-menu {width: 100%;height: 100rpx;box-sizing: border-box;
|
|
.scroll-view {height: 100rpx;white-space: nowrap;
|
|
.scroll-item {height: 100rpx;padding: 0 20rpx;display: inline-block;text-align: center;
|
|
.item-text {font-size: 14px;line-height: 100rpx;
|
|
&.active {
|
|
// color: #1468FF;
|
|
font-size: 18px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.content-right{flex-basis: 30px;text-align: center;}
|
|
}
|
|
.swiper-box-list{height: 400px;padding:0 12px;
|
|
.device_row{padding: 6px 0;display: flex;
|
|
.name{width: 82px;}
|
|
}
|
|
}
|
|
}
|
|
</style>
|