修改设备工单
This commit is contained in:
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -2,18 +2,17 @@
|
||||
<!-- 绑定安全生产监控相机 -->
|
||||
<view>
|
||||
<view class="page_padding">
|
||||
<view class="page_name font14">绑定安全生产监控相机</view>
|
||||
<view class="page_content contentboxsty font13">
|
||||
<view class="content_row">
|
||||
<view class="name">串流推流Url</view>
|
||||
<view class="">
|
||||
<input placeholder="请输入串流推流Url"/>
|
||||
<view class="name font_bold">串流推流Url</view>
|
||||
<view class="text">
|
||||
<input v-model="form.stream_url" placeholder="请输入串流推流Url" disabled/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="content_row">
|
||||
<view class="name">AppName</view>
|
||||
<view class="">
|
||||
<input placeholder="请输入APP名称"/>
|
||||
<view class="name font_bold">AppName</view>
|
||||
<view class="text">
|
||||
<input v-model="form.app_name" placeholder="请输入APP名称"/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="content_row noborbot">
|
||||
@ -23,9 +22,9 @@
|
||||
</view>
|
||||
</view>
|
||||
<view class="content_row">
|
||||
<view class="name">StreamName</view>
|
||||
<view class="">
|
||||
<input placeholder="请输入StreamName"/>
|
||||
<view class="name font_bold">StreamName</view>
|
||||
<view class="text">
|
||||
<input v-model="form.stream_name" placeholder="请输入StreamName"/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="content_row noborbot">
|
||||
@ -35,43 +34,49 @@
|
||||
</view>
|
||||
</view>
|
||||
<view class="content_row">
|
||||
<view class="name">设备IP</view>
|
||||
<view class="">
|
||||
<input placeholder="请输入设备IP"/>
|
||||
<view class="name font_bold">设备IP</view>
|
||||
<view class="text">
|
||||
<input v-model="form.monitor_ip" placeholder="请输入设备IP"/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="content_row">
|
||||
<view class="name">端口</view>
|
||||
<view class="">
|
||||
<input placeholder="请输入设备端口"/>
|
||||
<view class="name font_bold">端口</view>
|
||||
<view class="text">
|
||||
<input v-model="form.monitor_port" placeholder="请输入设备端口"/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="content_row">
|
||||
<view class="name">用户名</view>
|
||||
<view class="">
|
||||
<input placeholder="请输入您的用户名"/>
|
||||
<view class="name font_bold">用户名</view>
|
||||
<view class="text">
|
||||
<input v-model="form.monitor_account" placeholder="请输入您的用户名"/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="content_row">
|
||||
<view class="name">密码</view>
|
||||
<view class="">
|
||||
<input placeholder="请输入密码"/>
|
||||
<view class="name font_bold">密码</view>
|
||||
<view class="text">
|
||||
<input password type="safe-password" v-model="form.monitor_password" placeholder="请输入密码"/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="content_row">
|
||||
<view class="name">监控推流权限</view>
|
||||
<view class="flex_layout">
|
||||
<view class="t-icon t-icon-qiyong1 contenticon"></view><text class="text">Token验证</text>
|
||||
<view class="t-icon t-icon-jinyong2 contenticon"></view><text class="text">禁用</text>
|
||||
<!-- <label class="radio"><radio value="r1" checked="true" />Token验证</label>
|
||||
<label class="radio"><radio value="r2" />禁用</label> -->
|
||||
<view class="name font_bold">监控推流权限</view>
|
||||
<view class="text flex_layout">
|
||||
<view class="switch" @click="form.stream_type=1">
|
||||
<view v-if="form.stream_type ==1" class="t-icon t-icon-qiyong1 contenticon"></view>
|
||||
<view v-else class="t-icon t-icon-jinyong1 contenticon"></view>
|
||||
<text class="text">Token验证</text>
|
||||
</view>
|
||||
<view class="switch" @click="form.stream_type=2">
|
||||
<view v-if="form.stream_type ==2" class="t-icon t-icon-qiyong1 contenticon"></view>
|
||||
<view v-else class="t-icon t-icon-jinyong1 contenticon"></view>
|
||||
<text class="text">禁用</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bottom_but flex_layout">
|
||||
<view class="font13">保存</view>
|
||||
<view class="font13">取消</view>
|
||||
<view class="but_color font13" @click="save">保存</view>
|
||||
<view class="font13" @click="cancel">取消</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
@ -80,24 +85,85 @@
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
form:{
|
||||
id:'',
|
||||
stream_url:'',
|
||||
app_name:'',
|
||||
stream_name:'',
|
||||
stream_type:1,
|
||||
monitor_ip:'',
|
||||
monitor_port:'',
|
||||
monitor_account:'',
|
||||
monitor_password:''
|
||||
}
|
||||
}
|
||||
},
|
||||
onLoad(option) {
|
||||
this.form.id = option.id;
|
||||
this.getVideo(option.id);
|
||||
},
|
||||
onReady() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
getVideo(id){
|
||||
this.$api.request('/get.video.config',{id:id}).then(res=>{
|
||||
this.form.stream_url = res.data.stream_url;
|
||||
if(res.data.app_name && res.data.eq_name){
|
||||
this.form.app_name = res.data.app_name;
|
||||
this.form.stream_name = res.data.stream_name;
|
||||
this.form.stream_type = res.data.stream_type;
|
||||
this.form.monitor_ip = res.data.monitor_ip;
|
||||
this.form.monitor_port = res.data.monitor_port;
|
||||
this.form.monitor_account = res.data.monitor_account;
|
||||
this.form.monitor_password = res.data.monitor_password;
|
||||
}
|
||||
}).catch(err=>{
|
||||
|
||||
})
|
||||
},
|
||||
save(){
|
||||
this.$api.postFuncLoading('/bind.video.config',this.form).then(res=>{
|
||||
this.parentClick();
|
||||
this.reset();
|
||||
this.$wf.toast({type:'success',text:'保存成功'});
|
||||
}).catch(err=>{
|
||||
|
||||
})
|
||||
},
|
||||
cancel(){
|
||||
this.reset();
|
||||
},
|
||||
reset(){
|
||||
this.form.app_name = '';
|
||||
this.form.stream_name = '';
|
||||
this.form.stream_type = 1;
|
||||
this.form.monitor_ip = '';
|
||||
this.form.monitor_port = '';
|
||||
this.form.monitor_account = '';
|
||||
this.form.monitor_password = '';
|
||||
},
|
||||
parentClick(){
|
||||
const pages = getCurrentPages();
|
||||
if (pages.length >= 2) {
|
||||
const prevPage = pages[pages.length - 2];
|
||||
prevPage.$vm.getList();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.page_name{margin-bottom: 10px;}
|
||||
<style scoped lang="scss">
|
||||
.page_content{padding: 0 12px;}
|
||||
.content_row{display: flex;border-bottom: 1px solid #2D3A6F;height: 44px;align-items: center;
|
||||
.name{width: 30%;}
|
||||
.name{flex-basis: 96px;}
|
||||
.text{flex: 1;}
|
||||
.tip{width: 70%;font-size: 10px;color: #666;}
|
||||
.flex_layout{
|
||||
.contenticon{width: 20px;height: 20px;}
|
||||
.contenticon{width: 16px;height: 16px;}
|
||||
.text{padding: 0 20px 0 5px;}
|
||||
}
|
||||
}
|
||||
}
|
||||
.switch{display: flex;align-items: center;}
|
||||
</style>
|
||||
|
||||
@ -1,34 +1,33 @@
|
||||
<template>
|
||||
<view class="page_padding">
|
||||
<view class="contentboxsty page_content ">
|
||||
|
||||
<view class="detail_list contentboxsty page_content font13">
|
||||
<view class="content_row">
|
||||
<view class="name">设备</view>
|
||||
<view class="data">{{form.name}}</view>
|
||||
<view class="name font_bold">设备</view>
|
||||
<view class="text">{{form.eq_name}}</view>
|
||||
</view>
|
||||
<view class="content_row">
|
||||
<view class="name">设备名称</view>
|
||||
<view class="data">双头立锯</view>
|
||||
<view class="name font_bold">设备名称</view>
|
||||
<view class="text">{{form.name}}</view>
|
||||
</view>
|
||||
<view class="content_row">
|
||||
<view class="name">设备功率</view>
|
||||
<view class="data">双头立锯</view>
|
||||
<view class="name font_bold">设备功率</view>
|
||||
<view class="text">{{form.power}}</view>
|
||||
</view>
|
||||
<view class="content_row">
|
||||
<view class="name">设备IP</view>
|
||||
<view class="data">双头立锯</view>
|
||||
<view class="name font_bold">设备IP</view>
|
||||
<view class="text">{{form.equipment_configs.length>0? form.equipment_configs[0].ip:''}}</view>
|
||||
</view>
|
||||
<view class="content_row">
|
||||
<view class="name">端口</view>
|
||||
<view class="data">双头立锯</view>
|
||||
<view class="name font_bold">端口</view>
|
||||
<view class="text">{{form.equipment_configs.length>0? form.equipment_configs[0].port:''}}</view>
|
||||
</view>
|
||||
<view class="content_row">
|
||||
<view class="name">状态</view>
|
||||
<view class="data">{{form.active_status==true?'启用':'禁用'}}</view>
|
||||
<view class="name font_bold">状态</view>
|
||||
<view class="text">{{form.active_status==true?'启用':'禁用'}}</view>
|
||||
</view>
|
||||
<view class="textarea_row">
|
||||
<view class="name font13">设置备注</view>
|
||||
<view class="">
|
||||
<view class="name font_bold font13">备注</view>
|
||||
<view class="text textareaText">
|
||||
{{form.remark}}
|
||||
</view>
|
||||
</view>
|
||||
@ -40,7 +39,11 @@
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
form:{}
|
||||
form:{
|
||||
equipment_configs:[
|
||||
{ip:'',port:''}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
onLoad(options){
|
||||
@ -49,7 +52,6 @@
|
||||
methods: {
|
||||
getDetail(id){
|
||||
this.$api.postFuncLoading('/device.info',{id:id}).then(res=>{
|
||||
console.log(res)
|
||||
this.form = res.data
|
||||
})
|
||||
},
|
||||
@ -57,13 +59,13 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.content_row{display: flex;height: 44px;align-items: center;
|
||||
.name{width: 30%;font-size: 13px;}
|
||||
.data{font-size: 14px;}
|
||||
<style scoped lang="scss">
|
||||
.content_row{display: flex;align-items: center;padding-top: 17px;
|
||||
.name{flex-basis: 80px;}
|
||||
.text{flex: 1;}
|
||||
}
|
||||
.textarea_row{
|
||||
.name{padding: 12px 0;}
|
||||
// textarea{border-radius: 4px;background: rgba(255, 255, 255, 0.50);width: 100%;}
|
||||
.name{padding: 17px 0;}
|
||||
.textareaText{min-height: 80px;}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,111 +1,229 @@
|
||||
<template>
|
||||
<page-meta>
|
||||
<navigation-bar title="添加设备" color="white"></navigation-bar>
|
||||
<template>
|
||||
<page-meta>
|
||||
<navigation-bar :title="this.form.id && this.form.id > 0?'编辑设备':'添加设备'"></navigation-bar>
|
||||
</page-meta>
|
||||
<view class="page_padding">
|
||||
<!-- <view class="page_name font14">
|
||||
添加/编辑设备
|
||||
</view> -->
|
||||
<view class="page_padding bot_padding">
|
||||
<view class="page_content contentboxsty font13">
|
||||
<view class="content_row">
|
||||
<view class="name">选择设备</view>
|
||||
<picker placeholder="请选择设备" @change="bindPickerChange" :value="index" :range="array" >
|
||||
<input type="text" :value="array[index]" placeholder="请选择设备" disabled />
|
||||
</picker>
|
||||
|
||||
<!-- <view class="">
|
||||
<picker @change="bindPickerChange" placeholder="请选择设备" :value="index" :range="array">
|
||||
<view class="uni-input" style="width: 70%;">{{array[index]}}</view>
|
||||
</picker>
|
||||
</view -->
|
||||
<view class="name font_bold">选择设备</view>
|
||||
<pickerSelect class="comView" @change="equipmentChange" :list="setMap.equipment" :id="form.eq_no" placeholder="请选择设备" />
|
||||
</view>
|
||||
<view class="content_row">
|
||||
<view class="name">设备自定义名称</view>
|
||||
<view class="">
|
||||
<input placeholder="请输入设备名称"/>
|
||||
|
||||
<view class="name font_bold">设备自定义名称</view>
|
||||
<view class="comView">
|
||||
<input v-model="form.name" placeholder="请输入设备名称"/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="content_row">
|
||||
<view class="name font_bold">设备编号</view>
|
||||
<view class="comView">
|
||||
<input v-model="form.code" placeholder="请输入设备编号"/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="content_row">
|
||||
<view class="name font_bold">设备功率</view>
|
||||
<view class="comView">
|
||||
<input v-model="form.power" placeholder="请输入设备功率"/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="content_row">
|
||||
<view class="name">设备功率</view>
|
||||
<view class="">
|
||||
<input placeholder="请输入设备功率"/>
|
||||
<view class="name font_bold">设备IP</view>
|
||||
<view class="comView">
|
||||
<input v-model="form.config[0].ip" placeholder="请输入设备IP"/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="content_row">
|
||||
<view class="name">设备IP</view>
|
||||
<view class="">
|
||||
<input placeholder="请输入设备IP"/>
|
||||
<view class="name font_bold">端口</view>
|
||||
<view class="comView">
|
||||
<input v-model="form.config[0].port" placeholder="请输入设备端口"/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="content_row">
|
||||
<view class="name">端口</view>
|
||||
<view class="">
|
||||
<input placeholder="请输入设备端口"/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="content_row">
|
||||
<view class="name">状态</view>
|
||||
<view class="flex_layout">
|
||||
<view class="switch" @click="switchSta(1)">
|
||||
<view v-if="selectSta==1" class="t-icon t-icon-qiyong1 contenticon"></view>
|
||||
<view v-else class="t-icon t-icon-jinyong2 contenticon"></view>
|
||||
<text class="text">启用</text>
|
||||
<view class="name font_bold">型号</view>
|
||||
<view class="flex_layout comView">
|
||||
<view class="switch" @click="form.config[0].plc_model = 'H3U'">
|
||||
<view v-if="form.config[0].plc_model=='H3U'" class="t-icon t-icon-qiyong1 contenticon"></view>
|
||||
<view v-else class="t-icon t-icon-jinyong1 contenticon"></view>
|
||||
<text class="text">H3U</text>
|
||||
</view>
|
||||
<view class="switch" @click="switchSta(2)">
|
||||
<view v-if="selectSta==2" class="t-icon t-icon-qiyong1 contenticon"></view>
|
||||
<view v-else class="t-icon t-icon-jinyong2 contenticon"></view>
|
||||
<text class="text">禁用</text>
|
||||
<view class="switch" @click="form.config[0].plc_model = 'H5U'">
|
||||
<view v-if="form.config[0].plc_model=='H5U'" class="t-icon t-icon-qiyong1 contenticon"></view>
|
||||
<view v-else class="t-icon t-icon-jinyong1 contenticon"></view>
|
||||
<text class="text">H5U</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="content_row">
|
||||
<view class="name font_bold">逻辑控制器(PLC)</view>
|
||||
<pickerSelect class="comView" :list="setMap.plc" :id="form.plc_lj" placeholder="请选择设备" />
|
||||
</view>
|
||||
<view class="content_row">
|
||||
<view class="name font_bold">状态</view>
|
||||
<view class="flex_layout comView">
|
||||
<view class="switch" @click="form.active_status=true">
|
||||
<view v-if="form.active_status" class="t-icon t-icon-qiyong1 contenticon"></view>
|
||||
<view v-else class="t-icon t-icon-jinyong1 contenticon"></view>
|
||||
<text class="text">启用</text>
|
||||
</view>
|
||||
<view class="switch" @click="form.active_status=false">
|
||||
<view v-if="!form.active_status" class="t-icon t-icon-qiyong1 contenticon"></view>
|
||||
<view v-else class="t-icon t-icon-jinyong1 contenticon"></view>
|
||||
<text class="text">禁用</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="textarea_row">
|
||||
<view class="name">设置备注</view>
|
||||
<view class="name font_bold">设置备注</view>
|
||||
<view class="textarea">
|
||||
|
||||
<textarea />
|
||||
<textarea placeholder="请输入备注..." v-model="form.remark" cursor-spacing="180px" :auto-blur="true" placeholder-class="placeholderStyle" />
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bottom_but flex_layout">
|
||||
<view class="font13 but_color">保存</view>
|
||||
<view class="font13">取消</view>
|
||||
<view class="font13 but_color" @click="save">保存</view>
|
||||
<view class="font13" @click="cancel">取消</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
array: ['中国', '美国', '巴西', '日本'],
|
||||
selectSta:1,
|
||||
return {
|
||||
setMap:{
|
||||
equipment:[],
|
||||
plc:[
|
||||
{name:'汇川',value:1}
|
||||
]
|
||||
},
|
||||
|
||||
form:{
|
||||
id:'',
|
||||
eq_no:'',
|
||||
name:'',
|
||||
code:'',
|
||||
power:'',
|
||||
remark:'',
|
||||
active_status:true,
|
||||
plc_lj:1,
|
||||
config:[
|
||||
{
|
||||
eq_type:'',
|
||||
ip:'',
|
||||
port:'',
|
||||
plc_model:'H3U'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
onLoad(option) {
|
||||
this.form.id = option.id;
|
||||
if(option.id!='undefined'){
|
||||
this.getOrderInfo(option.id);
|
||||
}
|
||||
},
|
||||
onReady() {
|
||||
this.getEquipment();
|
||||
},
|
||||
methods: {
|
||||
switchSta(type){
|
||||
console.log(type)
|
||||
this.selectSta = type;
|
||||
},
|
||||
methods: {
|
||||
getOrderInfo(id){
|
||||
this.$api.postFuncLoading('/device.info',{id:id}).then(res=>{
|
||||
this.form = {
|
||||
id:res.data.id,
|
||||
eq_no:res.data.eq_no,
|
||||
name:res.data.name,
|
||||
code:res.data.code,
|
||||
power:res.data.power,
|
||||
remark:res.data.remark,
|
||||
active_status:res.data.active_status,
|
||||
plc_lj:1,
|
||||
config:[
|
||||
{
|
||||
eq_type:res.data.equipment_configs[0].eq_type,
|
||||
ip:res.data.equipment_configs[0].ip,
|
||||
port:res.data.equipment_configs[0].port,
|
||||
plc_model:res.data.equipment_configs[0].plc_model
|
||||
}
|
||||
]
|
||||
}
|
||||
}).catch(err=>{
|
||||
|
||||
})
|
||||
},
|
||||
getEquipment(){
|
||||
this.$api.request('/equipment.select',{}).then(res=>{
|
||||
res.data.forEach(item=>{
|
||||
item.name = item.eq_name;
|
||||
item.value = item.eq_no;
|
||||
})
|
||||
this.setMap['equipment'] = res.data;
|
||||
})
|
||||
},
|
||||
equipmentChange(e){
|
||||
this.form.eq_no = e.value;
|
||||
this.form.name = e.name;
|
||||
},
|
||||
save(){
|
||||
if(!(this.form.id && this.form.id>0)){
|
||||
delete this.form.id
|
||||
}
|
||||
this.$api.postFuncLoading('/equipment.add',this.form).then(res=>{
|
||||
this.parentClick();
|
||||
this.reset();
|
||||
this.$wf.toast({type:'success',text:'保存成功'});
|
||||
})
|
||||
},
|
||||
cancel(){
|
||||
this.reset();
|
||||
},
|
||||
reset(){
|
||||
this.form = {
|
||||
id:'',
|
||||
eq_no:'',
|
||||
name:'',
|
||||
code:'',
|
||||
power:'',
|
||||
remark:'',
|
||||
active_status:true,
|
||||
plc_lj:1,
|
||||
config:[
|
||||
{
|
||||
eq_type:'',
|
||||
ip:'',
|
||||
port:'',
|
||||
plc_model:'H3U'
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
parentClick(){
|
||||
const pages = getCurrentPages();
|
||||
if (pages.length >= 2) {
|
||||
const prevPage = pages[pages.length - 2];
|
||||
prevPage.$vm.getList();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
<style scoped lang="scss">
|
||||
.page_name{margin-bottom: 10px;}
|
||||
.page_content{padding: 0 12px 10px;}
|
||||
.page_content{padding: 0 12px 13px;}
|
||||
.content_row{display: flex;border-bottom: 1px solid #2D3A6F;height: 44px;align-items: center;
|
||||
.name{width: 30%;}
|
||||
.name{flex-basis: 110px;}
|
||||
.switch{display: flex;align-items: center;
|
||||
.contenticon{width: 20px;height: 20px;}
|
||||
.contenticon{font-size: 15px;}
|
||||
.text{padding: 0 20px 0 5px;}
|
||||
}
|
||||
}
|
||||
.textarea_row{
|
||||
.textarea_row{
|
||||
.name{padding: 12px 0;}
|
||||
.textarea{border-radius: 4px;background: rgba(255, 255, 255, 0.50);padding:5px 10px;
|
||||
textarea{width: 100%;}
|
||||
}
|
||||
.textarea{border-radius: 4px;background: $uni-bg-color-placeholder;padding:10px 12px;}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,39 +1,36 @@
|
||||
<template>
|
||||
<!-- 设备管理 -->
|
||||
<view class="page_padding bot_padding">
|
||||
<view class="" v-for="(item,index) in list" :key="index" >
|
||||
<view class="page_list contentboxsty font13" @click="toDeviceDetail(item.id)">
|
||||
<view class="list_row">
|
||||
<view class="row_name">
|
||||
设备名称
|
||||
<view class="page_padding bot_padding columnFlex">
|
||||
<view class="flexBox">
|
||||
<view v-for="(item,index) in list" :key="index" >
|
||||
<view class="page_list contentboxsty font13" @click="toDeviceDetail(item.id)">
|
||||
<view class="list_row">
|
||||
<view class="name font_bold">设备名称</view>
|
||||
<view class="text">
|
||||
{{item.name}}
|
||||
<view class="iconfont icon-bianji font20" @click.stop="toAddDevice(item.id)"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list_row padd_top12">
|
||||
<view class="name font_bold">设备IP/端口</view>
|
||||
<view class="text">{{item.equipment_monitor_config?item.equipment_monitor_config.monitor_ip+'/'+item.equipment_monitor_config.monitor_port:'-'}}</view>
|
||||
</view>
|
||||
<view class="row_data">
|
||||
{{item.name}}
|
||||
<view class="list_row padd_top12">
|
||||
<view class="name font_bold">已绑定设备</view>
|
||||
<view class="text">
|
||||
{{item.equipment_monitor_config && item.equipment_monitor_config.eq_name?item.equipment_monitor_config.eq_name:'-'}}
|
||||
<view class="iconfont icon-bangding font20" @click="toBindingDevice(item.id)"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="iconfont icon-bianji font20" @click="toAddDevice()"></view>
|
||||
</view>
|
||||
<view class="list_row">
|
||||
设备IP/端口
|
||||
</view>
|
||||
<view class="list_row">
|
||||
<view class="row_name">
|
||||
已绑定设备
|
||||
</view>
|
||||
<view class="row_data">
|
||||
{{item.name}}
|
||||
</view>
|
||||
<view class="iconfont icon-bangding font20" @click="toBindingDevice()"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<loadMore :noData="loadParams.noData" :loading="loadParams.loading" :loadEnd="loadParams.loadEnd" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="page_bottom_button">
|
||||
<view class="page_add" @click="toAddDevice()">
|
||||
<!-- <view class="name_left font14">
|
||||
系统设备管理
|
||||
</view> -->
|
||||
<view class="iconfont icon-tianjia font24"></view>
|
||||
<text>添加</text>
|
||||
<view class="page_add" @click="toAddDevice()">
|
||||
<view class="icon iconfont icon-tianjia font20"></view>
|
||||
<text class="font14">添加</text>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
@ -42,46 +39,97 @@
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list:[]
|
||||
return {
|
||||
params:{
|
||||
page:1,
|
||||
pageSize:10,
|
||||
},
|
||||
loadParams:{
|
||||
noData:false,
|
||||
loading:false,
|
||||
loadEnd:false
|
||||
},
|
||||
list:[],
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
onReady() {
|
||||
this.getList();
|
||||
},
|
||||
// 上拉刷新
|
||||
onPullDownRefresh(){
|
||||
this.params.page = 1;
|
||||
this.loadParams = {
|
||||
noData:false,
|
||||
loading:false,
|
||||
loadEnd:false
|
||||
};
|
||||
this.getList(2);
|
||||
},
|
||||
// 加载下一页
|
||||
onReachBottom(){
|
||||
if(!(this.loadParams.loadEnd || this.loadParams.noData)){
|
||||
this.loadParams.loading = true;
|
||||
this.params.page ++;
|
||||
this.getList();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getList(){
|
||||
// this.$api.postFuncLoading('/equipment.mag',{}).then(res=>{
|
||||
// console.log(res)
|
||||
// this.list = res.data.rows;
|
||||
// })
|
||||
getList(type=1){
|
||||
if(this.params.page == 1){
|
||||
uni.showLoading({
|
||||
title: '加载中',
|
||||
mask: true
|
||||
})
|
||||
}
|
||||
this.$api.request('/equipment.mag',this.params).then(res=>{
|
||||
if(type ==2){
|
||||
uni.stopPullDownRefresh();
|
||||
}
|
||||
setTimeout( ()=> {
|
||||
uni.hideLoading();
|
||||
}, 200);
|
||||
|
||||
this.loadParams.loading = false;
|
||||
if(res.data.rows.length ==0 && this.params.page == 1){
|
||||
this.loadParams.noData = true;
|
||||
}
|
||||
if(res.data.rows.length>0 && res.data.rows.length < this.params.pageSize){
|
||||
this.loadParams.loadEnd = true;
|
||||
}
|
||||
if(this.params.page == 1){
|
||||
this.list = res.data.rows;
|
||||
}else{
|
||||
this.list = this.list.concat(res.data.rows);
|
||||
}
|
||||
}).catch(err=>{
|
||||
setTimeout(()=> {
|
||||
uni.hideLoading();
|
||||
}, 200);
|
||||
})
|
||||
},
|
||||
//详情
|
||||
toDeviceDetail(id){
|
||||
console.log(id)
|
||||
uni.navigateTo({
|
||||
url:'/pages/equipmentManage/deviceDetail?id='+id
|
||||
})
|
||||
},
|
||||
toAddDevice(){
|
||||
toAddDevice(params){
|
||||
uni.navigateTo({
|
||||
url:'/pages/equipmentManage/editDevice'
|
||||
url:'/pages/equipmentManage/editDevice?id='+params
|
||||
})
|
||||
},
|
||||
toBindingDevice(){
|
||||
toBindingDevice(id){
|
||||
uni.navigateTo({
|
||||
url:'/pages/equipmentManage/bindingDevice'
|
||||
url:'/pages/equipmentManage/bindingDevice?id='+id
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* .page_name{display: flex;margin-bottom: 10px;align-items: center;} */
|
||||
/* .name_left{flex: 1;} */
|
||||
.page_list{padding: 6px 12px;}
|
||||
.list_row{display: flex;padding: 6px 0;align-items: center;}
|
||||
.row_name{width:30%;}
|
||||
.row_data{width: 65%;}
|
||||
<style scoped lang="scss">
|
||||
.page_list{padding: 12px;}
|
||||
.list_row{display: flex;align-items: center;}
|
||||
.list_row .name{flex-basis: 84px;text-align: right;padding-right: 12px;box-sizing: border-box;}
|
||||
.list_row .text{flex: 1;display: flex;justify-content: space-between;align-items: center;}
|
||||
</style>
|
||||
|
||||
@ -176,7 +176,7 @@
|
||||
<view class="content_box">
|
||||
<view class="content_title">生产排程</view>
|
||||
<view class="content_data">
|
||||
<view class="content_module">
|
||||
<view class="content_module" @click="toSchedul()">
|
||||
<view class="t-icon t-icon-paichengguanli contenticon"></view>
|
||||
<view class="contentname">排程管理</view>
|
||||
</view>
|
||||
@ -258,6 +258,12 @@
|
||||
uni.navigateTo({
|
||||
url:'/pages/production/productionOrder'
|
||||
})
|
||||
},
|
||||
// 工单排程
|
||||
toSchedul(){
|
||||
uni.navigateTo({
|
||||
url:'/pages/schedul/list'
|
||||
})
|
||||
},
|
||||
//跳转工单进度页
|
||||
toSchedule(){
|
||||
|
||||
@ -113,7 +113,7 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.list_below{display: flex;text-align: center;padding: 20px 0;
|
||||
.list_below{display: flex;text-align: center;padding: 10px 0;
|
||||
.below_left{flex: 1;display: flex;align-items: center;justify-content: center;}
|
||||
.percentage{color: $uni-text-color-inverse;}
|
||||
}
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
<view class="person_name">
|
||||
<view class="name">
|
||||
<text class="font15">肖银奎</text>
|
||||
<image src="http://dm-auto.oss-cn-shanghai.aliyuncs.com/mes_wechat/chaojihuiyuan.png" mode=""></image>
|
||||
<image src="http://dm-auto.oss-cn-shanghai.aliyuncs.com/mes_wechat/chaojihuiyuan.png" mode=""></image>
|
||||
</view>
|
||||
<view class="account font12">
|
||||
登录账号：ykxiao
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<view class="page_padding">
|
||||
<view class="detail_list contentboxsty ">
|
||||
<view class="detail_list contentboxsty">
|
||||
<view class="list_top">
|
||||
<view class="top_left">
|
||||
工单号 <text class="padd_left12">{{form.order_sn}}</text>
|
||||
@ -13,11 +13,11 @@
|
||||
<view class="content_left font13">
|
||||
<view class="content_row">
|
||||
<text class="name">生产开始时间</text>
|
||||
<text class="data">{{form.created_at}}</text>
|
||||
<text class="data">{{form.time_start==''?'-':form.time_start}}</text>
|
||||
</view>
|
||||
<view class="content_row">
|
||||
<text class="name">生产结束时间</text>
|
||||
<text class="data">{{form.updated_at}}</text>
|
||||
<text class="data">{{form.time_end==''?'-':form.time_end}}</text>
|
||||
</view>
|
||||
<view class="content_row">
|
||||
<text class="name">工单耗时</text>
|
||||
|
||||
@ -5,7 +5,6 @@
|
||||
<searchView placeholder=" 搜索工单" />
|
||||
</view>
|
||||
<view class="flexBox">
|
||||
<!-- <scroll-view scroll-y="true" class="scrollView"> -->
|
||||
<view v-for="(item,index) in list" :key="index" class="detail_list contentboxsty font13">
|
||||
<view @click="toDetail(item.id)">
|
||||
<view class="list_top">
|
||||
@ -67,7 +66,6 @@
|
||||
</view>
|
||||
</view>
|
||||
<loadMore :noData="loadParams.noData" :loading="loadParams.loading" :loadEnd="loadParams.loadEnd" />
|
||||
<!-- </scroll-view> -->
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
@ -108,6 +106,11 @@
|
||||
// 上拉刷新
|
||||
onPullDownRefresh(){
|
||||
this.params.page = 1;
|
||||
this.loadParams = {
|
||||
noData:false,
|
||||
loading:false,
|
||||
loadEnd:false
|
||||
};
|
||||
this.listData(2);
|
||||
},
|
||||
// 加载下一页
|
||||
@ -127,11 +130,10 @@
|
||||
})
|
||||
}
|
||||
this.$api.request('/order.list',this.params).then(res=>{
|
||||
console.log(res,566)
|
||||
if(type ==2){
|
||||
uni.stopPullDownRefresh();
|
||||
}
|
||||
setTimeout(function () {
|
||||
setTimeout( ()=> {
|
||||
uni.hideLoading();
|
||||
}, 200);
|
||||
|
||||
@ -147,10 +149,8 @@
|
||||
}else{
|
||||
this.list = this.list.concat(res.data.rows);
|
||||
}
|
||||
|
||||
}).catch(err=>{
|
||||
console.log('err',err)
|
||||
setTimeout(function () {
|
||||
setTimeout( ()=> {
|
||||
uni.hideLoading();
|
||||
}, 200);
|
||||
})
|
||||
@ -175,7 +175,7 @@
|
||||
.percentage{color: $uni-text-color-primary;margin: 10px 0 0 0;}
|
||||
}
|
||||
.list_below{padding-bottom: 12px;
|
||||
.row{display: flex;padding-top: 10px;
|
||||
.row{display: flex;padding-top: 12px;
|
||||
.row_left{
|
||||
white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
|
||||
padding-right: 4px;
|
||||
|
||||
270
pages/schedul/list.vue
Normal file
270
pages/schedul/list.vue
Normal file
@ -0,0 +1,270 @@
|
||||
<template>
|
||||
<view class="page_padding columnFlex">
|
||||
<view class="statistics" v-if="form.date == 'day'">
|
||||
<view class="title font14">排程日统计</view>
|
||||
<view class="boxView contentboxsty">
|
||||
<view class="item">
|
||||
<view class="name font13">待生产</view>
|
||||
<view class="font_bold">32</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<view class="name font13">生产中</view>
|
||||
<view class="font_bold">12</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<view class="name font13">生产完成</view>
|
||||
<view class="font_bold">102</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="comView font13" :class="form.date == 'day'?'padd12 contentboxsty':''">
|
||||
<view class="dateView">
|
||||
<view class="dateTitle">
|
||||
<view class="title font14">排程视图 <text class="month">{{dateText}}</text></view>
|
||||
<view class="dateSwitch">
|
||||
<div class="item" :class="form.date == item.value?'dateActive':''" @click="form.date = item.value" v-for="(item,index) in dateList" :key="index">{{item.name}}</div>
|
||||
</view>
|
||||
</view>
|
||||
<view :class="form.date !='day'?'contentboxsty mar_top12 mar_bot12 padd12':'calendarView'">
|
||||
<calendar></calendar>
|
||||
</view>
|
||||
</view>
|
||||
<view class="speedView contentboxsty" :class="form.date!='day'?'padd12':''">
|
||||
<view class="left">
|
||||
<view class="line"></view>
|
||||
</view>
|
||||
<view class="right detail_list">
|
||||
<view class="boxItem padd12" v-for="(item,index) in list" :key="index">
|
||||
<view class="time">{{item.time}}</view>
|
||||
<view class="boxView card_right" :class="item.type==1?'success':item.type==2?'warning':item.type==3?'status':item.type==4?'error':''">
|
||||
<view class="cardStatus" :class="item.type==1?'success':item.type==2?'warning':item.type==3?'status':item.type==4?'error':''">{{item.status}}</view>
|
||||
<view class="row font_bold">
|
||||
<view class="name">工单号：</view>
|
||||
<view class="text">{{item.sn}}</view>
|
||||
</view>
|
||||
<view class="row">
|
||||
<view class="name">规格：</view>
|
||||
<view class="text">4*9*63</view>
|
||||
</view>
|
||||
<view class="row rowDate">
|
||||
<view class="date">
|
||||
<text class="name">开始时间：</text>
|
||||
<text class="text color">00:00</text>
|
||||
</view>
|
||||
<view class="date">
|
||||
<text class="name">剩余时间：</text>
|
||||
<text class="text">00:30</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="yieldView">
|
||||
<view class="box">
|
||||
<view class="num font18 font_bold">74.3<text class="symbol font12">%</text></view>
|
||||
<view class="name">出材率</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
components: {
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
list:[
|
||||
{name:'',sn:"SO20240426000001",num:20,status:'待生产',type:1,time:'00:00'},
|
||||
{name:'',sn:"SO20240426000001",num:70,status:'生产中',type:2,time:'00:30'},
|
||||
{name:'',sn:"SO20240426000001",num:90,status:'生产完成',type:3},
|
||||
{name:'',sn:"SO20240422000002",num:20,status:'生产暂停',type:4,time:'01:00'},
|
||||
{name:'',sn:"SO20240426000001",num:70,status:'待生产',type:1},
|
||||
{name:'',sn:"SO20240426000001",num:90,status:'待生产',type:1,time:'03:00'},
|
||||
{name:'',sn:"SO20240426000001",num:90,status:'待生产',type:1},
|
||||
],
|
||||
dateList:[
|
||||
{time:'00:00'},{time:'00:30'},{time:'01:00'},{time:'03:30'},{time:'04:00'},{time:'05:30'}
|
||||
],
|
||||
dateList:[
|
||||
{name:'日',id:'',value:'day'},
|
||||
{name:'周',id:'',value:'week'},
|
||||
{name:'月',id:'',value:'month'},
|
||||
],
|
||||
dateText:'',
|
||||
form:{
|
||||
date:'day'
|
||||
}
|
||||
}
|
||||
},
|
||||
provide(){
|
||||
return{
|
||||
params:this.form,
|
||||
changeDateText:this.changeDate
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeDate(val){
|
||||
this.dateText = val;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.statistics{
|
||||
.boxView{
|
||||
display: flex;flex-direction: row;align-items: center;margin-top: 12px;
|
||||
.item{
|
||||
flex: 1;display: flex;align-items: center;justify-content:center;flex-direction: column;padding: 12px 0;
|
||||
.name{padding-bottom: 10px;}
|
||||
}
|
||||
}
|
||||
}
|
||||
.comView{margin-top: 12px;}
|
||||
.dateView{width: 100%;}
|
||||
.dateTitle{
|
||||
width: 100%;display: flex;align-items: center;justify-content: space-between;
|
||||
.dateSwitch{
|
||||
display: flex;align-items: center;background: $uni-bg-color-whith;border-radius: 20px;padding: 2px 3px;
|
||||
.item{
|
||||
padding: 5px 18px;
|
||||
color: $uni-text-color-default;
|
||||
}
|
||||
.dateActive{
|
||||
border-radius: 20px;
|
||||
background: $uni-color-primary;
|
||||
color: $uni-text-color-inverse;
|
||||
}
|
||||
}
|
||||
}
|
||||
.calendarView{
|
||||
margin: 20px 0;
|
||||
}
|
||||
.speedView{
|
||||
width: 100%;display: flex;box-sizing: border-box;
|
||||
.left{
|
||||
flex-basis: 45px;
|
||||
display: flex;align-items: flex-start;flex-direction: column;padding: 12px 0 12px 18px;box-sizing: border-box;
|
||||
.line{
|
||||
position: relative;width: 1px;height: 100%;background: $uni-text-color-info;
|
||||
}
|
||||
.line::after{
|
||||
content: '';
|
||||
position: absolute;
|
||||
z-index: 20;
|
||||
bottom: 0;
|
||||
left: -4px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: $uni-text-color-info;
|
||||
}
|
||||
}
|
||||
.right{
|
||||
flex: 1;margin: 0;
|
||||
.boxItem:first-child{
|
||||
margin-top: 6px;
|
||||
}
|
||||
.boxItem:last-child{
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.boxItem{
|
||||
background: $uni-bg-color-schedule;
|
||||
margin: 12px 0;
|
||||
padding-left: 20px;
|
||||
border-radius: 8px;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
.boxView{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.time{
|
||||
position: absolute;
|
||||
left: -45px;
|
||||
top: 0;
|
||||
background: $uni-bg-color-primary;
|
||||
padding: 4px 2px;
|
||||
}
|
||||
.yieldView{
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
top: 12px;
|
||||
z-index: 20;
|
||||
height: calc(100% - 30px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.box{
|
||||
display: flex;flex-direction: column;align-items: center;
|
||||
.num{color: $uni-text-color-warning;}
|
||||
.name{color: $uni-text-color-warning;}
|
||||
}
|
||||
}
|
||||
.cardStatus{
|
||||
display: inline-block;
|
||||
}
|
||||
.row{
|
||||
display: flex;align-items: center;
|
||||
margin-top: 12px;
|
||||
.date{
|
||||
display: flex;align-items: center;
|
||||
}
|
||||
}
|
||||
.rowDate{
|
||||
justify-content: space-between;
|
||||
.color{
|
||||
color: $uni-text-color-primary;
|
||||
}
|
||||
}
|
||||
.status::after{
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 12px;
|
||||
border-top-left-radius: 8px;
|
||||
border-bottom-left-radius: 8px;
|
||||
background: $uni-bg-color-success;
|
||||
}
|
||||
.success::after{
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 12px;
|
||||
border-top-left-radius: 8px;
|
||||
border-bottom-left-radius: 8px;
|
||||
background: $uni-bg-color-success;
|
||||
}
|
||||
.warning::after{
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 12px;
|
||||
border-top-left-radius: 8px;
|
||||
border-bottom-left-radius: 8px;
|
||||
background: $uni-bg-color-warning;
|
||||
}
|
||||
.error::after{
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 12px;
|
||||
border-top-left-radius: 8px;
|
||||
border-bottom-left-radius: 8px;
|
||||
background: $uni-bg-color-error;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user