131 lines
2.3 KiB
Vue
131 lines
2.3 KiB
Vue
<template>
|
|
<view>
|
|
<view class="search-bar">
|
|
<view class="time-ranger">
|
|
<uni-datetime-picker type="daterange" v-model="tm" @change="handleRanger" :clear-icon="false"
|
|
rangeSeparator="至"></uni-datetime-picker>
|
|
</view>
|
|
<view class="select-bar">
|
|
<uni-data-select v-model="value" :localdata="list" @change="change" :clear="false">
|
|
</uni-data-select>
|
|
</view>
|
|
</view>
|
|
<div class="tableHead">
|
|
<div class="td t1">监测点</div>
|
|
<div class="td t2">监测时间</div>
|
|
<div class="td t3">x方向(mm)</div>
|
|
<div class="td t4">y方向(mm)</div>
|
|
<div class="td t5">z方向(mm)</div>
|
|
</div>
|
|
<div class="tableBody">
|
|
<div v-for="(item, index) in tableData" class="tableRow">
|
|
<div class="td t1">{{ }}</div>
|
|
<div class="td t2">{{ item.tm ? item.tm.slice(5, 16) : "" }}</div>
|
|
<div class="td t3">{{}}</div>
|
|
<div class="td t4">{{}}</div>
|
|
<div class="td t5">{{}}</div>
|
|
</div>
|
|
<div :style="{ height: '80px' }">
|
|
</div>
|
|
</div>
|
|
</view>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import moment from "moment"
|
|
const stm = moment().subtract(3, 'days').format("YYYY-MM-DD");
|
|
const etm = moment().format("YYYY-MM-DD");
|
|
export default {
|
|
props: {
|
|
tableData: {
|
|
type: Array,
|
|
default: [],
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
tm: [stm, etm],
|
|
list: [],
|
|
value: "",
|
|
}
|
|
},
|
|
methods: {
|
|
handleRanger(e) {
|
|
this.tm = [...e]
|
|
},
|
|
change(e) {
|
|
this.value = e;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.search-bar {
|
|
display: flex;
|
|
margin: 5px 0;
|
|
align-items: center;
|
|
}
|
|
|
|
.time-ranger {
|
|
flex: 1;
|
|
}
|
|
|
|
.select-bar {
|
|
width: 30%;
|
|
margin-left: 1%;
|
|
}
|
|
|
|
.tableHead {
|
|
width: 100%;
|
|
margin-top: 5px;
|
|
height: 50px;
|
|
background-color: #e4f2fe;
|
|
display: flex;
|
|
color: #208FEE;
|
|
}
|
|
|
|
.tableBody {
|
|
width: 100%;
|
|
height: calc(60vh - 214px);
|
|
// background-color: #f7f7f7; //#ffffff;
|
|
overflow-y: scroll;
|
|
}
|
|
|
|
.tableRow {
|
|
width: 100%;
|
|
height: 46px;
|
|
display: flex;
|
|
border-bottom: 1px solid #eee;
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
.td {
|
|
text-align: center;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.t1 {
|
|
width: 20%;
|
|
}
|
|
|
|
.t2 {
|
|
width: 20%;
|
|
}
|
|
|
|
.t3 {
|
|
width: 20%;
|
|
}
|
|
|
|
.t4 {
|
|
width: 20%;
|
|
}
|
|
|
|
.t5 {
|
|
width: 20%;
|
|
}
|
|
</style> |