300 lines
6.5 KiB
Vue
300 lines
6.5 KiB
Vue
<template>
|
|
<view class="szPageBox">
|
|
<u-navbar
|
|
:title="name"
|
|
titleColor="#ffffff"
|
|
:titleStyle="{ color: '#FFF' }"
|
|
height='70px'
|
|
:autoBack="true"
|
|
bgColor="#007afd"
|
|
leftIconColor="#ffffff"
|
|
:safeAreaInsetTop="false"
|
|
>
|
|
</u-navbar>
|
|
<div style="height: 70px;visibility: hidden;">占位</div>
|
|
<div class="countCard">
|
|
<div class="datetimePicker">
|
|
<span @click="showStm = true">{{this.stmStr}}</span>
|
|
<span style="color: #7f7f7f;font-size: 14px;">至</span>
|
|
<span @click="showEtm = true">{{this.etmStr}}</span>
|
|
<u-icon name="calendar"></u-icon>
|
|
</div>
|
|
<u-button text="搜索" size="normal" class="searchBtn" @click="getData"></u-button>
|
|
</div>
|
|
<u-datetime-picker
|
|
:show="showStm"
|
|
v-model="stm"
|
|
mode="datetime"
|
|
@cancel="showStm = false"
|
|
@confirm="stmConfirm"
|
|
></u-datetime-picker>
|
|
<u-datetime-picker
|
|
:show="showEtm"
|
|
v-model="etm"
|
|
mode="datetime"
|
|
@cancel="showEtm = false"
|
|
@confirm="etmConfirm"
|
|
></u-datetime-picker>
|
|
<div class="countCard2">
|
|
<u-subsection
|
|
mode="subsection"
|
|
fontSize='12px'
|
|
:list="['数据表', '数据图']"
|
|
:current="current"
|
|
@change="index=>current = index"
|
|
class="tabBox"
|
|
></u-subsection>
|
|
<div>
|
|
<view class="container" v-if="current===0">
|
|
<view class="table-header">
|
|
<view class="cell">序号</view>
|
|
<view class="cell" style="flex: 1.8;">时间</view>
|
|
<view class="cell">pH</view>
|
|
<view class="cell">总磷(mg/L)</view>
|
|
<view class="cell">CODcr(mg/L)</view>
|
|
<view class="cell">氨氮(mg/L)</view>
|
|
</view>
|
|
<view class="table-body">
|
|
<view class="row" v-for="(item, index) in tableData" :key="index">
|
|
<view class="cell">{{ index+1 }}</view>
|
|
<view class="cell" style="flex: 1.8;">{{ item.tm2 }}</view>
|
|
<view class="cell">{{ item.ph }}</view>
|
|
<view class="cell">{{ item.p }}</view>
|
|
<view class="cell">{{ item.cod }}</view>
|
|
<view class="cell">{{ item.ad }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<div v-if="current===1" style="padding: 10px;">
|
|
<qiun-data-charts type="line" :opts="opts" :chartData="chartData" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import moment from 'moment'
|
|
export default {
|
|
data() {
|
|
return {
|
|
id:'水质站',
|
|
name:'水质站',
|
|
current: 0,
|
|
tableData: [],
|
|
chartData:{},
|
|
stm: Number(moment().add(-7,'days')),
|
|
showStm:false,
|
|
etm: Number(moment()),
|
|
showEtm:false,
|
|
opts:{
|
|
dataLabel: false,
|
|
dataPointShape: false,
|
|
enableScroll: false,
|
|
padding: [10,15,20,5],
|
|
xAxis: {
|
|
fontSize:12,
|
|
labelCount: 5,
|
|
// itemCount: 10,
|
|
boundaryGap:'justify',
|
|
marginTop:5,
|
|
},
|
|
},
|
|
opt:{
|
|
categories: [],
|
|
series: [
|
|
{
|
|
name: "pH",
|
|
data: []
|
|
},
|
|
{
|
|
name: "总磷",
|
|
data: []
|
|
},
|
|
{
|
|
name: "COD",
|
|
data: []
|
|
},
|
|
{
|
|
name: "氨氮",
|
|
data: []
|
|
}
|
|
]
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
stmStr() {
|
|
return moment(this.stm).format('YYYY-MM-DD HH:mm')
|
|
},
|
|
etmStr() {
|
|
return moment(this.etm).format('YYYY-MM-DD HH:mm')
|
|
},
|
|
},
|
|
onLoad(options) {
|
|
// options 中包含传递过来的参数
|
|
this.id = options.id;
|
|
this.name = options.name;
|
|
this.getData()
|
|
},
|
|
mounted() {
|
|
},
|
|
methods: {
|
|
stmConfirm(value){
|
|
this.showStm = false
|
|
this.stm = value
|
|
},
|
|
etmConfirm(value){
|
|
this.showEtm = false
|
|
this.etm = value
|
|
},
|
|
sectionChange(index){
|
|
},
|
|
getData(){
|
|
const params = {
|
|
startTime:moment(this.stm).format('YYYY-MM-DD HH:mm:00'),
|
|
endTime:moment(this.etm).format('YYYY-MM-DD HH:mm:00'),
|
|
mn:this.id
|
|
}
|
|
console.log(1111111100000000)
|
|
console.log(params)
|
|
uni.request(
|
|
{
|
|
url: 'http://ywxj.cloudowr.cn/yjt/wq/list',
|
|
method: 'POST',
|
|
data: {
|
|
...params
|
|
},
|
|
success: (res) => {
|
|
if(res.data.code!==200){
|
|
this.chartData = this.opt
|
|
this.tableData = []
|
|
return
|
|
}
|
|
const list = res?.data?.data?.map((item,index)=>{
|
|
return {
|
|
...item,
|
|
tm2:item.tm?.slice(5,16)
|
|
}
|
|
})
|
|
const sorted = (res?.data?.data || []).slice().sort((a,b)=>moment(a.tm).valueOf()-moment(b.tm).valueOf())
|
|
const tmArr = sorted.map(item=>item.tm?.slice(5,10))
|
|
const phs = sorted.map(item=>item.ph)
|
|
const ps = sorted.map(item=>item.p)
|
|
const cods = sorted.map(item=>item.cod)
|
|
const ads = sorted.map(item=>item.ad)
|
|
let options = {
|
|
categories: tmArr,
|
|
series: [
|
|
{
|
|
name: "pH",
|
|
data: phs
|
|
},
|
|
{
|
|
name: "总磷",
|
|
data: ps
|
|
},
|
|
{
|
|
name: "CODcr",
|
|
data: cods
|
|
},
|
|
{
|
|
name: "氨氮",
|
|
data: ads
|
|
}
|
|
]
|
|
};
|
|
this.chartData = JSON.parse(JSON.stringify(options));
|
|
this.tableData = list
|
|
},
|
|
fail: (err) => {
|
|
this.chartData = this.opt
|
|
this.tableData = []
|
|
console.log('失败:', err);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.szPageBox{
|
|
width: 100%;
|
|
height: 100vh;
|
|
background: #f6f6f6;
|
|
}
|
|
.countCard{
|
|
padding: 10px 0;
|
|
background: #ffffff;
|
|
border-bottom: 1px solid #eee;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items:center
|
|
}
|
|
.countCard2{
|
|
padding: 10px 0;
|
|
height: calc( 100vh - 151px );
|
|
overflow: hidden;
|
|
background: #ffffff;
|
|
}
|
|
.datetimePicker{
|
|
width: 80%;
|
|
margin-left: 10px;
|
|
height: 30px;
|
|
border: 1px solid #eee;
|
|
font-size: 13px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
}
|
|
.searchBtn{
|
|
width: 20%;
|
|
border: 0;
|
|
margin: 0 5px;
|
|
color: #208fee;
|
|
}
|
|
.tabBox{
|
|
width: 120px;
|
|
height: 26px;
|
|
margin-left: 10px;
|
|
margin-bottom: 10px;
|
|
}
|
|
.container {
|
|
margin: 0 5px;
|
|
border: 1px solid #eee;
|
|
}
|
|
.table-header, .row {
|
|
display: flex;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
.table-header .cell {
|
|
font-weight: 400;
|
|
background-color: #e5f3fe;
|
|
color: #208fee;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.row:nth-child(even) {
|
|
background-color: #fafafa;
|
|
}
|
|
.cell {
|
|
flex: 1;
|
|
padding: 24rpx 10rpx;
|
|
text-align: center;
|
|
font-size: 10px;
|
|
font-weight: 400;
|
|
word-break: break-all;
|
|
box-sizing: border-box;
|
|
border-right: 1px solid #eee;
|
|
}
|
|
.cell:last-child {
|
|
border-right: none;
|
|
}
|
|
.table-body{
|
|
height: calc( 100vh - 237px);
|
|
overflow-y: scroll;
|
|
}
|
|
</style>
|