long/mes_mobile
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改设备工单

Browse Source
This commit is contained in:
龙运模
2024-04-30 16:08:07 +08:00
parent 2b8797a1ac
commit 162ef0ef26
23 changed files with 1629 additions and 363 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
pages/deviceStatus/deviceCamera.vue
View File

@ -1,12 +1,13 @@
<template>
<view class="page_padding font14">
<view class="padd_bot12">
<text>硬件设备状态</text>
<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 flex_layout padd_bot12">
<view class="flex1 theme_color">
相机工作中
<text class="drop"></text>相机工作中
</view>
<view class="top_right" @click="toList()">
更多安全事件
@ -19,19 +20,19 @@
<view class="content_data">
<view class="device_row">
<text class="name font_bold">设备名称</text>
<text>安全监控相机</text>
<text class="text">安全监控相机</text>
</view>
<view class="device_row">
<text class="name font_bold">开机时间</text>
<text>2024-02-11 08:00:45</text>
<text class="text">2024-02-11 08:00:45</text>
</view>
<view class="device_row">
<text class="name font_bold">安全事件</text>
<text>检测到指定区域内有目标越过警戒线</text>
<text class="text">检测到指定区域内有目标越过警戒线</text>
</view>
<view class="device_row">
<text class="name font_bold">检测时间</text>
<text>2024-01-11 19:09:56</text>
<text class="text">2024-01-11 19:09:56</text>
</view>
</view>
</view>
@ -55,11 +56,34 @@
}
</script>
<style lang="scss">
.body-view{padding: 12px 13px;}
.top_right{color: #E6A23C;}
.device_row{padding: 6px 0;
.name {padding-right: 12px;}
}
<style scoped lang="scss">
.body-view{padding: 12px 13px;}
.theme_color{
display: flex;align-items: center;
.drop{width: 4px;height: 4px;background: $uni-text-color-primary;display: inline-block;margin-right: 6px;border-radius: 50%;}
.top_right{color: $uni-text-color-primary;}
}
.device_row{padding: 6px 0;display: flex;align-items: center;
.name {flex-basis: 70px;}
}
.flex_layout{
align-items: center;
}
.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>

257
pages/deviceStatus/deviceStatus.vue
View File

@ -1,54 +1,54 @@
<template>
<view class="page_padding">
<view class=".padd_bot12">
<text>硬件设备状态</text>
<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">
<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" 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)">
<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">
<view class="content-right" @click="nextClick">
<text class="iconfont icon-gengduo"></text>
</view>
</view>
<swiper class="swiper-box-list" circular="true" :current="curIndex" @change="swiperChange">
<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" 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 class="swiper-item">
<view class="img">
<image style="width: 100%;height: 100%;" :src="item.img"></image>
</view>
<view class="font14">
<view class="device_row">
<view class="device_row">
<text class="name font_bold">设备名称</text>
<text>双头立锯</text>
<view @click="toCamera()" class="" style="position: absolute;right: 0;">
相机
<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>2024-02-11 08:00:45</text>
<text class="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>
<text class="text">2024-02-11 08:00:45</text>
</view>
<view class="device_row">
<text class="name font_bold">今日停机</text>
<text>5次</text>
<text class="text">5次</text>
</view>
</view>
</view>
</swiper-item>
</swiper>
@ -62,169 +62,114 @@
return {
list: [{
id: 1,
name: '多片锯'
name: '多片锯',
},
{
id: 2,
name: '立式带锯'
name: '双头带锯',
},
{
id: 3,
name: '视觉'
name: '视觉分析',
},
{
id: 4,
name: '卧锯'
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'
name: '上料机架',
},
],
// Tab切换内容
swiperDateList: [
{
id: 1,
content: '1'
content: '1',
img:'http://dm-auto.oss-cn-shanghai.aliyuncs.com/mes_wechat/duopian.png'
},
{
id: 2,
content: '2'
content: '2',
img:'http://dm-auto.oss-cn-shanghai.aliyuncs.com/mes_wechat/liju.png'
},
{
id: 3,
content: '3'
content: '3',
img:'http://dm-auto.oss-cn-shanghai.aliyuncs.com/mes_wechat/shijue.png'
},
{
id: 4,
content: '4'
content: '4',
img:'http://dm-auto.oss-cn-shanghai.aliyuncs.com/mes_wechat/woshi.png'
},
{
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'
content: '5',
img:'http://dm-auto.oss-cn-shanghai.aliyuncs.com/mes_wechat/shang.png'
},
],
contentScrollW: 0, // 导航区宽度
curIndex: 0, // 当前选中
scrollLeft: 0, // 横向滚动条位置
itemWidth: 90,
curIndex: 0,
scrollLeft: 0,
}
},
mounted() {
// 获取标题区域宽度，和每个子元素节点的宽度
this.getScrollW()
},
onReady() {
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)
}
// 区域宽度，子元素的宽度以及距离左边栏的距离
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 lang="scss">
<style scoped lang="scss">
.body-view{
height: 450px;
.content-top{
@ -233,14 +178,13 @@
.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;
.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;
.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 {
// color: #1468FF;
font-size: 18px;
font-size: 17px;
}
}
}
@ -248,10 +192,39 @@
}
.content-right{flex-basis: 30px;text-align: center;}
}
.swiper-box-list{height: 400px;padding:0 12px;
.swiper-box-list{height: 400px;padding:0 12px;
.device_row:first-child{margin-top: 6px;}
.device_row{padding: 6px 0;display: flex;
.name{width: 82px;}
.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>