156 lines
2.8 KiB
Vue
156 lines
2.8 KiB
Vue
|
<template>
|
||
|
|
<view :style="{height:'100vh',overflow:'hidden',background:'#f7f7f7'}">
|
||
|
|
<u-status-bar></u-status-bar>
|
||
|
|
<u-navbar
|
||
|
|
title="2024年调度令05号"
|
||
|
|
:autoBack="true"
|
||
|
|
:titleStyle="{
|
||
|
|
fontSize:'18px'
|
||
|
|
}"
|
||
|
|
:height='44'
|
||
|
|
:safeAreaInsetTop=true
|
||
|
|
leftIconSize='20'
|
||
|
|
leftIconColor='rgb(153, 153, 153)'
|
||
|
|
>
|
||
|
|
<view
|
||
|
|
slot="right"
|
||
|
|
hover-class="is-hover"
|
||
|
|
class="searchBox_right_btn"
|
||
|
|
hover-stay-time=100
|
||
|
|
@click="myShow"
|
||
|
|
>
|
||
|
|
<u--image :src="'../../static/images/filter.png'" width="20px" height="20px"></u--image>
|
||
|
|
</view>
|
||
|
|
</u-navbar>
|
||
|
|
<u-tabs
|
||
|
|
:list="tabsOptions"
|
||
|
|
@click="tabsChange"
|
||
|
|
:scrollable=false
|
||
|
|
class="tabsClass"
|
||
|
|
:activeStyle="{color: 'rgb(37, 157, 255)',fontSize: '16px'}"
|
||
|
|
:inactiveStyle="{color: '#606266',fontSize: '16px'}"
|
||
|
|
lineColor="transparent"
|
||
|
|
itemStyle="height: 44px"
|
||
|
|
>
|
||
|
|
</u-tabs>
|
||
|
|
<div class="mybody">
|
||
|
|
<component :is="tabsVal" :record="record"></component>
|
||
|
|
<div :style="{height:'100px'}"></div>
|
||
|
|
</div>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import moment from 'moment'
|
||
|
|
import uniZl from './zl.vue';
|
||
|
|
import uniFk from './fk.vue'
|
||
|
|
const tabsOptions = [
|
||
|
|
{
|
||
|
|
name:'调度指令',
|
||
|
|
components:uniZl
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name:'执行反馈',
|
||
|
|
components:uniFk
|
||
|
|
},
|
||
|
|
]
|
||
|
|
|
||
|
|
export default {
|
||
|
|
components: { uniZl, uniFk },
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
tabsOptions:tabsOptions,
|
||
|
|
tabsVal:uniZl,
|
||
|
|
record:{}
|
||
|
|
};
|
||
|
|
},
|
||
|
|
onLoad(props){
|
||
|
|
const myRecord = JSON.parse(props.obj)
|
||
|
|
this.record = myRecord
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
tabsChange(item) {
|
||
|
|
this.tabsVal = item.components
|
||
|
|
}
|
||
|
|
},
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.myTitleStyle{
|
||
|
|
font-size: 30px;
|
||
|
|
background-color: red;
|
||
|
|
height: 200px;
|
||
|
|
}
|
||
|
|
.tabsClass{
|
||
|
|
background-color: #ffffff;
|
||
|
|
margin-top: 44px;
|
||
|
|
height: 44px;
|
||
|
|
padding: 0 40px;
|
||
|
|
border-top: 1px solid #eee;
|
||
|
|
border-bottom: 1px solid #eee;
|
||
|
|
}
|
||
|
|
.searchBox_right_btn{
|
||
|
|
width: 40px;
|
||
|
|
height: 40px;
|
||
|
|
border-radius: 5px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
.is-hover{
|
||
|
|
background-color: #eee;
|
||
|
|
}
|
||
|
|
.checkItem{
|
||
|
|
margin-right: 10px;
|
||
|
|
}
|
||
|
|
.tmPicker{
|
||
|
|
width: 100%;
|
||
|
|
height: 30px;
|
||
|
|
border: 1px solid rgba(240, 240, 240, 1);
|
||
|
|
border-radius: 4px;
|
||
|
|
margin-right: 10px;
|
||
|
|
font-size: 14px;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-around;
|
||
|
|
align-items: center;
|
||
|
|
// padding-left: 10px;
|
||
|
|
}
|
||
|
|
.mybody{
|
||
|
|
background-color: #ffffff;
|
||
|
|
margin: 5px 5px;
|
||
|
|
// padding: 5px 20px;
|
||
|
|
height: calc( 100vh - 100px );
|
||
|
|
overflow: scroll;
|
||
|
|
}
|
||
|
|
.countNum{
|
||
|
|
width: 100%;
|
||
|
|
text-align: right;
|
||
|
|
font-size: 13px;
|
||
|
|
}
|
||
|
|
.listItem{
|
||
|
|
width: 100%;
|
||
|
|
border-bottom: 1px solid #eee;
|
||
|
|
padding: 10px 0;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
}
|
||
|
|
.row1{
|
||
|
|
font-size: 14px;
|
||
|
|
font-weight: 700;
|
||
|
|
color: #333333;
|
||
|
|
width: 100%;
|
||
|
|
height: 30px;
|
||
|
|
line-height: 30px;
|
||
|
|
}
|
||
|
|
.row2{
|
||
|
|
font-size: 12px;
|
||
|
|
color: #999999;
|
||
|
|
width: 100%;
|
||
|
|
height: 30px;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
</style>
|