root/pad-hlzgbz
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

布局

Browse Source
This commit is contained in:
xiangxy
2022-10-26 15:23:19 +08:00
parent 6d19ec211a
commit 4584a4dece
3 changed files with 382 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

225
src/pages/proj/RunOperate.1.vue Normal file
View File

@@ -0,0 +1,225 @@
<template>
<div class="inner-wrap">
<nav-bar title="运行操作"></nav-bar>
<div class="wrap2">
<div class="wrap-filter-button">
<div class="wrap-filter clearfix">
<div class="fl filter_item">
<div class="filter_input">
<label class="filter-label">管径（mm）</label>
<div class="iliblock">
<div class="showbox" @click="toChange(1, val1)">{{val1}}</div>
</div>
</div>
</div>
<div class="fl filter_item">
<div class="filter_input">
<label class="filter-label">管长（mm）</label>
<div class="iliblock">
<!-- <input type="number" class="input" v-model="val2"> -->
<div class="showbox" @click="toChange(2, val2)">{{val2}}</div>
</div>
</div>
</div>
<div class="fl filter_item">
<div class="filter_input">
<label class="filter-label">壁厚（mm）</label>
<div class="iliblock">
<!-- <input type="number" class="input" v-model="val3"> -->
<div class="showbox" @click="toChange(3, val3)">{{val3}}</div>
</div>
</div>
</div>
<div class="fl filter_item">
<div class="filter_input">
<label class="filter-label">颜色</label>
<div class="iliblock from_item">
<el-select v-model="val4" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
</div>
</div>
<div class="fl filter_item">
<div class="filter_input">
<label class="filter-label">合格提升每次提升根数</label>
<div class="iliblock">
<!-- <input type="number" class="input" v-model="val5"> -->
<div class="showbox" @click="toChange(5, val5)">{{val5}}</div>
</div>
</div>
</div>
<div class="fl filter_item">
<div class="filter_input">
<label class="filter-label">每捆根数</label>
<div class="iliblock">
<!-- <input type="number" class="input" v-model="val6"> -->
<div class="showbox" @click="toChange(6, val6)">{{val6}}</div>
</div>
</div>
</div>
</div>
<div class="wrap-button clearfix">
<!-- <button class="button--primary" :disabled="disabled1" @touchstart="handleTouchStart" @touchend="handleTouchEnd">启动</button>
<button class="button--primary" :disabled="disabled1" @click="toStop">停止</button>
<button class="button--primary" :class="{'button--defalut': 1}" :disabled="disabled1" @click="toSendMessage1">A测摇杆出料异常复位</button>
<button class="button--primary" :class="{'button--defalut': 1}" :disabled="disabled1" @click="toSendMessage1">A测皮带出料异常复位</button>
<button class="button--primary" :class="{'button--defalut': 1}" :disabled="disabled1" @click="toSendMessage1">裹膜机控制权</button>
<button class="button--primary" :class="{'button--defalut': 1}" :disabled="disabled1" @click="toSendMessage1">捆扎完成</button>
<button class="button--primary" :class="{'button--defalut': 1}" :disabled="disabled1" @click="toSendMessage1">B测摇杆出料异常复位</button>
<button class="button--primary" :class="{'button--defalut': 1}" :disabled="disabled1" @click="toSendMessage1">B测皮带出料异常复位</button>
<button class="button--primary" :class="{'button--defalut': 1}" :disabled="disabled1" @click="toSendMessage1">故障复位</button> -->
</div>
</div>
</div>
<div v-if="active" class="msg_wrapper">
<div class="msg_box">
<div class="msg_item">
<div class="label_item">修改</div>
<div class="from_item">
<input type="number" class="msg_input" v-model="val">
</div>
</div>
<div class="msg_btns">
<button class="msg_btn" :disabled="disabled2" @click="msgSure">确认</button>
<button class="msg_btn" @click="msgCancle">取消</button>
</div>
</div>
</div>
<div v-if="active" class="mask"></div>
</div>
</template>
<script>
import {queryDeviceInfo, putPoint} from '@config/getData'
import NavBar from '@components/NavBar.vue'
export default {
name: 'RunOperate',
components: {
NavBar
},
data () {
return {
opt: '', // 标识
interTime: this.$store.getters.setTime,
timer: null,
active: false,
val: '', // 弹框值
val1: '',
val2: '',
val3: '',
val4: '',
val5: '',
val6: '',
options: [
{
value: '1',
label: '1蓝'
},
{
value: '2',
label: '2黑'
},
{
value: '3',
label: '3红'
},
{
value: '4',
label: '4白'
},
{
value: '5',
label: '5黄'
},
{
value: '6',
label: '6绿'
},
{
value: '7',
label: '7粉'
},
{
value: '8',
label: '8墨绿'
},
{
value: '9',
label: '9紫'
}
],
disabled1: false,
disabled2: false
}
},
// created () {
// this.refresh()
// },
// beforeDestroy () {
// clearInterval(this.timer)
// this.timer = null
// },
methods: {
refresh () {
this._queryDeviceInfo()
this.timer = setInterval(() => {
this._queryDeviceInfo()
}, this.interTime)
},
toChange (a, v) {
this.opt = a
this.val = v
this.active = true
},
msgSure () {
if (this.opt === 1) {
this.val1 = this.val
}
if (this.opt === 2) {
this.val2 = this.val
}
if (this.opt === 3) {
this.val3 = this.val
}
if (this.opt === 5) {
this.val5 = this.val
}
if (this.opt === 6) {
this.val6 = this.val
}
this.active = false
},
msgCancle () {
this.active = false
},
handleTouchStart (event) {
event.preventDefault()
console.log(1)
let _this = this
_this.val1 = '100'
},
handleTouchEnd (event) {
console.log(2)
let _this = this
_this.val1 = '200'
}
}
}
</script>
<style lang="stylus" scoped>
.wrap-filter-button
padding 0.05rem 0.2rem
margin 0
.wrap-button
margin 0.01rem auto
.filter-table
margin 0.08rem 0
.filter_item
margin 0.08rem 0 0 0
</style>

223
src/pages/proj/RunOperate.vue
View File

@@ -1,79 +1,88 @@
<template> <template>
<div class="inner-wrap"> <div class="inner-wrap">
<nav-bar title="运行操作"></nav-bar> <nav-bar title="运行操作"></nav-bar>
<div class="wrap2"> <div class="box">
<div class="wrap-filter-button"> <div class="box1">
<div class="wrap-filter clearfix"> <div class="d-status">
<div class="fl filter_item"> <label class="d-label1">设备状态</label>
<div class="filter_input"> <span class="obt obt1">自动</span>
<label class="filter-label">管径（mm）</label> <span class="obt obt2">系统运行</span>
<div class="iliblock"> <span class="obt obt3">联机模式</span>
<div class="showbox" @click="toChange(1, val1)">{{val1}}</div> </div>
</div> <div class="d_item">
</div> <div class="d_input">
<label class="d-label2">A侧档压压力(kg)</label>
<div class="showbox bggray">222{{val1}}</div>
</div> </div>
<div class="fl filter_item"> </div>
<div class="filter_input"> <div class="d_item">
<label class="filter-label">管长（mm）</label> <div class="d_input">
<div class="iliblock"> <label class="d-label2">B侧档压压力(kg)</label>
<!-- <input type="number" class="input" v-model="val2"> --> <div class="showbox bggray">{{val1}}</div>
<div class="showbox" @click="toChange(2, val2)">{{val2}}</div>
</div>
</div>
</div> </div>
<div class="fl filter_item"> </div>
<div class="filter_input"> <div class="d_item">
<label class="filter-label">壁厚（mm）</label> <div class="d_input">
<div class="iliblock"> <label class="d-label2">管径（mm）</label>
<!-- <input type="number" class="input" v-model="val3"> --> <div class="showbox" @click="toChange(1, val1)">{{val1}}</div>
<div class="showbox" @click="toChange(3, val3)">{{val3}}</div>
</div>
</div>
</div> </div>
<div class="fl filter_item"> </div>
<div class="filter_input"> <div class="d_item">
<label class="filter-label">颜色</label> <div class="d_input">
<div class="iliblock from_item"> <label class="d-label2">管长（mm）</label>
<el-select v-model="val4" placeholder="请选择"> <div class="showbox" @click="toChange(2, val2)">{{val2}}</div>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
</div>
</div> </div>
<div class="fl filter_item"> </div>
<div class="filter_input"> <div class="d_item">
<label class="filter-label">合格提升每次提升根数</label> <div class="d_input">
<div class="iliblock"> <label class="d-label2">壁厚（mm）</label>
<!-- <input type="number" class="input" v-model="val5"> --> <div class="showbox" @click="toChange(3, val3)">{{val3}}</div>
<div class="showbox" @click="toChange(5, val5)">{{val5}}</div>
</div>
</div>
</div> </div>
<div class="fl filter_item"> </div>
<div class="filter_input"> <div class="d_item">
<label class="filter-label">每捆根数</label> <div class="d_input">
<div class="iliblock"> <label class="d-label2">颜色</label>
<!-- <input type="number" class="input" v-model="val6"> --> <div class="f_item">
<div class="showbox" @click="toChange(6, val6)">{{val6}}</div> <el-select v-model="val4" placeholder="请选择">
</div> <el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div> </div>
</div> </div>
</div> </div>
<div class="wrap-button clearfix"> <div class="d_item">
<!-- <button class="button--primary" :disabled="disabled1" @touchstart="handleTouchStart" @touchend="handleTouchEnd">启动</button> <div class="d_input">
<button class="button--primary" :disabled="disabled1" @click="toStop">停止</button> <label class="d-label2">合格提升每次提升根数</label>
<button class="button--primary" :class="{'button--defalut': 1}" :disabled="disabled1" @click="toSendMessage1">A测摇杆出料异常复位</button> <div class="showbox" @click="toChange(5, val5)">{{val5}}</div>
<button class="button--primary" :class="{'button--defalut': 1}" :disabled="disabled1" @click="toSendMessage1">A测皮带出料异常复位</button> </div>
<button class="button--primary" :class="{'button--defalut': 1}" :disabled="disabled1" @click="toSendMessage1">裹膜机控制权</button> </div>
<button class="button--primary" :class="{'button--defalut': 1}" :disabled="disabled1" @click="toSendMessage1">捆扎完成</button> <div class="d_item">
<button class="button--primary" :class="{'button--defalut': 1}" :disabled="disabled1" @click="toSendMessage1">B测摇杆出料异常复位</button> <div class="d_input">
<button class="button--primary" :class="{'button--defalut': 1}" :disabled="disabled1" @click="toSendMessage1">B测皮带出料异常复位</button> <label class="d-label2">每捆根数</label>
<button class="button--primary" :class="{'button--defalut': 1}" :disabled="disabled1" @click="toSendMessage1">故障复位</button> --> <div class="showbox" @click="toChange(6, val6)">{{val6}}</div>
</div>
</div>
<div class="d_btm">
<button class="button--primary">启动</button>
<button class="button--primary">停止</button>
</div>
</div>
<div class="box2"></div>
<div class="box3">
<div class="b3_btm fl">
<button class="button--primary" :class="{'button--defalut': 1}" :disabled="disabled1" @click="toSure">A测摇杆出料异常复位</button>
<button class="button--primary" :class="{'button--defalut': 1}" :disabled="disabled1" @click="toSure">A测皮带出料异常复位</button>
<button class="button--primary" :class="{'button--defalut': 1}" :disabled="disabled1" @click="toSure">裹膜机控制权</button>
<button class="button--primary" :class="{'button--defalut': 1}" :disabled="disabled1" @click="toSure">捆扎完成</button>
</div>
<div class="b3_btm fr">
<button class="button--primary" :class="{'button--defalut': 1}" :disabled="disabled1" @click="toSure">B测摇杆出料异常复位</button>
<button class="button--primary" :class="{'button--defalut': 1}" :disabled="disabled1" @click="toSure">B测皮带出料异常复位</button>
<button class="button--primary" :class="{'button--defalut': 1}" :disabled="disabled1" @click="toSure">故障复位</button>
</div> </div>
</div> </div>
</div> </div>
@@ -96,7 +105,7 @@
</template> </template>
<script> <script>
import {queryDeviceInfo, putPoint} from '@config/getData' // import {queryDeviceInfo, putPoint} from '@config/getData'
import NavBar from '@components/NavBar.vue' import NavBar from '@components/NavBar.vue'
export default { export default {
name: 'RunOperate', name: 'RunOperate',
@@ -208,11 +217,93 @@ export default {
console.log(2) console.log(2)
let _this = this let _this = this
_this.val1 = '200' _this.val1 = '200'
},
toSure () {
console.log(2)
} }
} }
} }
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.box
display flex
width 100%
.box1
width 28%
height 800px
// background #fff
padding .1rem
.box2
width 42%
height 800px
background #fc0
.box3
width 30%
height 800px
background #ccc
position relative
display flex
.d-status
margin-bottom 8px
.d-label1
font-size 15px
margin-right 5px
.obt
display inline-block
width 20%
text-align center
line-height .2rem
font-size 15px
color #fff
border 1px solid #eee
.obt1
background-color blue
.obt2
background-color green
.obt3
background-color #fc0
.d-label2
font-size: 15px;
color: #464646;
width: 1.2rem;
line-height: .34rem;
height: .34rem;
// text-align: justify;
// text-align-last: justify;
.d_input
width: 100%;
display: flex;
justify-content: space-between;
.showbox
display inline-block
// width calc(100% - .8rem)
width 60%
height .34rem
line-height .34rem
font-size 13px
color #606266
text-indent .16rem
background-color #fff
border 1px solid #D1D1D1
border-radius 4px
margin-bottom 8px
.bggray
background-color #f2f6ff
.f_item
display inline-block
width 60%
.d_btm
margin-top .12rem
button
font-size 20px
.b3_btm
// position fixed
// bottom .5rem
display inline-block
.button--primary
font-size 18px
width 90%
margin .02rem
.wrap-filter-button .wrap-filter-button
padding 0.05rem 0.2rem padding 0.05rem 0.2rem
margin 0 margin 0

13
src/style/layout.styl
View File

@@ -771,16 +771,3 @@ header
button:disabled button:disabled
background-color #e1e1e1 background-color #e1e1e1
color #444 color #444
// same input
.showbox
display inline-block
// width calc(100% - .8rem)
width 100%
height .4rem
line-height .3rem
font-size .13rem
color #606266
text-indent .16rem
background-color #fff
border 1px solid #D1D1D1
border-radius 4px