布局
This commit is contained in:
225
src/pages/proj/RunOperate.1.vue
Normal file
225
src/pages/proj/RunOperate.1.vue
Normal 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>
|
||||
@@ -1,79 +1,88 @@
|
||||
<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 class="box">
|
||||
<div class="box1">
|
||||
<div class="d-status">
|
||||
<label class="d-label1">设备状态</label>
|
||||
<span class="obt obt1">自动</span>
|
||||
<span class="obt obt2">系统运行</span>
|
||||
<span class="obt obt3">联机模式</span>
|
||||
</div>
|
||||
<div class="d_item">
|
||||
<div class="d_input">
|
||||
<label class="d-label2">A侧档压压力(kg)</label>
|
||||
<div class="showbox bggray">222{{val1}}</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="d_item">
|
||||
<div class="d_input">
|
||||
<label class="d-label2">B侧档压压力(kg)</label>
|
||||
<div class="showbox bggray">{{val1}}</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="d_item">
|
||||
<div class="d_input">
|
||||
<label class="d-label2">管径（mm）</label>
|
||||
<div class="showbox" @click="toChange(1, val1)">{{val1}}</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="d_item">
|
||||
<div class="d_input">
|
||||
<label class="d-label2">管长（mm）</label>
|
||||
<div class="showbox" @click="toChange(2, val2)">{{val2}}</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="d_item">
|
||||
<div class="d_input">
|
||||
<label class="d-label2">壁厚（mm）</label>
|
||||
<div class="showbox" @click="toChange(3, val3)">{{val3}}</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 class="d_item">
|
||||
<div class="d_input">
|
||||
<label class="d-label2">颜色</label>
|
||||
<div class="f_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="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 class="d_item">
|
||||
<div class="d_input">
|
||||
<label class="d-label2">合格提升每次提升根数</label>
|
||||
<div class="showbox" @click="toChange(5, val5)">{{val5}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d_item">
|
||||
<div class="d_input">
|
||||
<label class="d-label2">每捆根数</label>
|
||||
<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>
|
||||
@@ -96,7 +105,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {queryDeviceInfo, putPoint} from '@config/getData'
|
||||
// import {queryDeviceInfo, putPoint} from '@config/getData'
|
||||
import NavBar from '@components/NavBar.vue'
|
||||
export default {
|
||||
name: 'RunOperate',
|
||||
@@ -208,11 +217,93 @@ export default {
|
||||
console.log(2)
|
||||
let _this = this
|
||||
_this.val1 = '200'
|
||||
},
|
||||
toSure () {
|
||||
console.log(2)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<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
|
||||
padding 0.05rem 0.2rem
|
||||
margin 0
|
||||
|
||||
@@ -771,16 +771,3 @@ header
|
||||
button:disabled
|
||||
background-color #e1e1e1
|
||||
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
|
||||
Reference in New Issue
Block a user