246 lines
7.3 KiB
Vue
246 lines
7.3 KiB
Vue
<template>
|
||
<view>
|
||
<u-navbar
|
||
class="u-navbar"
|
||
title="现场监护"
|
||
placeholder
|
||
@leftClick="leftClick"
|
||
leftIconColor="#fff"
|
||
bgColor="#00337A"
|
||
:titleStyle="{ color: '#FFF', fontSize: '32rpx' }"
|
||
/>
|
||
|
||
<view class="custody-container">
|
||
<view class="header-btn">
|
||
<view :class="{ active: current === 0 }" @tap="onCheckTap(0)">新增数据</view>
|
||
<view :class="{ active: current === 1 }" @tap="onCheckTap(1)">我的数据</view>
|
||
</view>
|
||
|
||
<view style="width: 100%">
|
||
<swiper style="width: 100%" :current="current" @change="onSwiperChange" :style="{ height: navHeight + 'px' }">
|
||
<swiper-item class="swiper-item-content" :style="{ height: navHeight + 'px' }">
|
||
<scroll-view scroll-y="true" class="scroll-view-y" :style="{ height: navHeight + 'px' }">
|
||
<view class="risk-header">
|
||
<view class="risk-left">
|
||
<view>今日</view>
|
||
<view>风险</view>
|
||
</view>
|
||
<view class="risk-right">
|
||
<view style="margin-top: 16rpx">
|
||
<text>我的项目</text>
|
||
<text style="color: #ca6d58">高风险 0</text>
|
||
<text style="color: #c2a95d; margin-left: 46rpx">中风险 0</text>
|
||
<text style="color: #b12d3f; margin-left: 46rpx">特高风险 0</text>
|
||
</view>
|
||
<view>
|
||
<text>全部项目</text>
|
||
<text style="color: #ca6d58">高风险 0</text>
|
||
<text style="color: #c2a95d; margin-left: 46rpx">中风险 0</text>
|
||
<text style="color: #b12d3f; margin-left: 46rpx">特高风险 0</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 选择今日 日计划风险 -->
|
||
<view class="change-today">
|
||
<view class="today-title">
|
||
<view class="title-bold">选择今日 日计划风险</view>
|
||
<view>去选择风险点</view>
|
||
</view>
|
||
|
||
<uni-forms label-position="top" label-width="200">
|
||
<uni-forms-item label="作业风险内容" required>
|
||
<uni-easyinput type="text" placeholder="请填写" />
|
||
</uni-forms-item>
|
||
<uni-forms-item label="风险等级" required>
|
||
<uni-easyinput type="text" placeholder="请填写" />
|
||
</uni-forms-item>
|
||
<uni-forms-item label="工程名称" required>
|
||
<uni-easyinput type="text" placeholder="请填写" />
|
||
</uni-forms-item>
|
||
</uni-forms>
|
||
</view>
|
||
|
||
<!-- 现场监护 -->
|
||
|
||
<view class="scene-container">
|
||
<view class="title-bold">现场监护</view>
|
||
<uni-forms label-position="top" label-width="200">
|
||
<uni-forms-item label="当前位置" required>
|
||
<uni-easyinput type="text" placeholder="请填写" />
|
||
</uni-forms-item>
|
||
<uni-forms-item label="附件上传(1-6张照片)" required>
|
||
<view class="example-body">
|
||
<uni-file-picker limit="6" title="最多选择6张图片"></uni-file-picker>
|
||
</view>
|
||
</uni-forms-item>
|
||
<uni-forms-item label="电子签名" required>
|
||
<uni-easyinput type="text" placeholder="请填写" />
|
||
</uni-forms-item>
|
||
<uni-forms-item label="备注" required>
|
||
<uni-easyinput type="text" placeholder="请填写" />
|
||
</uni-forms-item>
|
||
<button>提交</button>
|
||
</uni-forms>
|
||
</view>
|
||
</scroll-view>
|
||
</swiper-item>
|
||
<swiper-item></swiper-item>
|
||
</swiper>
|
||
</view>
|
||
</view>
|
||
|
||
<m-tabbar fixed fill :current="0" :tabbar="tabbar" class="bottom-tab"></m-tabbar>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import TabbarConfig from '../util/tabbar'
|
||
export default {
|
||
data() {
|
||
return {
|
||
current: 0,
|
||
tabbar: TabbarConfig,
|
||
navHeight: 100,
|
||
pH: 0 //窗口高度
|
||
}
|
||
},
|
||
methods: {
|
||
leftClick() {
|
||
uni.navigateBack()
|
||
},
|
||
onCheckTap(type) {
|
||
this.current = type
|
||
},
|
||
onSwiperChange(e) {
|
||
console.log('轮播图change事件', e)
|
||
this.current = e.target.current
|
||
}
|
||
},
|
||
onReady() {
|
||
let that = this
|
||
uni.getSystemInfo({
|
||
//调用uni-app接口获取屏幕高度
|
||
success(res) {
|
||
//成功回调函数
|
||
that._data.pH = res.windowHeight //windoHeight为窗口高度，主要使用的是这个
|
||
console.log('res.windowHeight窗口高度', res.windowHeight)
|
||
let titleH = uni.createSelectorQuery().select('.scroll-view-y') //想要获取高度的元素名（class/id）
|
||
// let bottomBox = uni.createSelectorQuery().select('.bottom-tab')
|
||
// let bottomHeight = 0
|
||
// bottomBox
|
||
// .boundingClientRect(data => {
|
||
// console.log('data----', data)
|
||
// bottomHeight = data.height
|
||
// })
|
||
// .exec()
|
||
titleH
|
||
.boundingClientRect(data => {
|
||
let pH = that._data.pH
|
||
that._data.navHeight = pH - data.top //计算高度：元素高度=窗口高度-元素距离顶部的距离（data.top）
|
||
|
||
console.log('that._data.navHeight', that._data.navHeight)
|
||
})
|
||
.exec()
|
||
}
|
||
})
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.custody-container {
|
||
// background-color: #ccc;
|
||
|
||
.header-btn {
|
||
display: flex;
|
||
background-color: #fff;
|
||
|
||
view {
|
||
flex: 1;
|
||
padding: 30rpx 0;
|
||
color: #a8a8ad;
|
||
font-size: 36rpx;
|
||
text-align: center;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.active {
|
||
color: #043372;
|
||
border-bottom: 2px solid #043372;
|
||
}
|
||
}
|
||
|
||
.swiper-item-content {
|
||
background-color: #efefef;
|
||
}
|
||
|
||
.scroll-view-y {
|
||
width: 100%;
|
||
background-color: #efefef;
|
||
|
||
.title-bold {
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
}
|
||
.risk-header {
|
||
width: 94%;
|
||
margin: 16rpx auto;
|
||
display: flex;
|
||
align-items: center;
|
||
background-color: #fff;
|
||
padding: 2rpx 14rpx;
|
||
border: 1px solid #ccc;
|
||
border-radius: 6rpx;
|
||
|
||
.risk-left {
|
||
padding: 10rpx;
|
||
border-radius: 10rpx;
|
||
background-color: #da0019;
|
||
color: #fff;
|
||
}
|
||
|
||
.risk-right {
|
||
margin-left: 6rpx;
|
||
}
|
||
}
|
||
|
||
.change-today {
|
||
width: 94%;
|
||
margin: 16rpx auto;
|
||
padding: 26rpx;
|
||
border: 1px solid #ccc;
|
||
background-color: #fff;
|
||
border-radius: 6rpx;
|
||
|
||
.today-title {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.today-title view:last-child {
|
||
padding: 26rpx 6rpx;
|
||
background-color: #d6001a;
|
||
border-radius: 20rpx;
|
||
color: #fff;
|
||
}
|
||
|
||
::v-deep .uni-forms-item__label {
|
||
font-weight: bold;
|
||
color: #000;
|
||
font-size: 26rpx;
|
||
}
|
||
}
|
||
.scene-container {
|
||
width: 94%;
|
||
margin: 16rpx auto;
|
||
padding: 26rpx;
|
||
border: 1px solid #ccc;
|
||
background-color: #fff;
|
||
border-radius: 6rpx;
|
||
}
|
||
}
|
||
}
|
||
</style>
|