181 lines
4.1 KiB
Vue
181 lines
4.1 KiB
Vue
<template>
|
|
<view :style="{ height: '100vh', overflow: 'auto', backgroundColor: '#fff' }">
|
|
<u-navbar
|
|
:title="name"
|
|
:autoBack="true"
|
|
:titleStyle="{
|
|
fontSize: '18px',
|
|
}"
|
|
:height="40"
|
|
:safeAreaInsetTop="true"
|
|
leftIconSize="20"
|
|
leftIconColor="rgb(153, 153, 153)"
|
|
>
|
|
</u-navbar>
|
|
<view style="padding: 10px">
|
|
<view class="time-ranger" style="margin-top: 70px">
|
|
<view class="start-time">
|
|
<text>开始时间</text>
|
|
<text
|
|
@click="showTime = true"
|
|
style="margin-left: 10%; color: #3399ef"
|
|
>{{ stm }}</text
|
|
>
|
|
</view>
|
|
<view class="end-time">
|
|
<text>结束时间</text>
|
|
<text
|
|
@click="showTime1 = true"
|
|
style="margin: 0 10%; color: #3399ef"
|
|
>{{ etm }}</text
|
|
>
|
|
<view class="search-btn" @click="searchHandle"> 搜索 </view>
|
|
</view>
|
|
<view v-if="tableData.length != 0">
|
|
<view class="water-chart-area">
|
|
<qiun-data-charts
|
|
:chartData="chartData.chartData"
|
|
:echartsApp="true"
|
|
:eopts="chartData.eopts"
|
|
/>
|
|
</view>
|
|
<view class="water-table-area">
|
|
<Table :tableData="tableData"></Table>
|
|
</view>
|
|
</view>
|
|
<view
|
|
style="
|
|
height: calc(100vh - 150px);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: #fff;
|
|
"
|
|
v-else
|
|
>
|
|
<image src="../../../static/empty.png" mode=""></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<u-datetime-picker
|
|
:show="showTime"
|
|
v-model="startTime"
|
|
mode="datetime"
|
|
@confirm="handleStartTime"
|
|
@cancel="showTime = false"
|
|
></u-datetime-picker>
|
|
<u-datetime-picker
|
|
:show="showTime1"
|
|
v-model="endTime"
|
|
mode="datetime"
|
|
@confirm="handleEndTime"
|
|
@cancel="showTime1 = false"
|
|
></u-datetime-picker>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import moment from "moment";
|
|
import Table from "./jcTable.vue";
|
|
import drpOptions from "./chartOption";
|
|
const stm = moment()
|
|
.subtract(7, "days")
|
|
.set({
|
|
minute: 0,
|
|
second: 0,
|
|
})
|
|
.format("YYYY-MM-DD HH:mm");
|
|
const etm = moment()
|
|
.set({
|
|
minute: 0,
|
|
second: 0,
|
|
})
|
|
.format("YYYY-MM-DD HH:mm");
|
|
export default {
|
|
components: {
|
|
Table,
|
|
},
|
|
data() {
|
|
return {
|
|
name: "",
|
|
startTime: stm,
|
|
endTime: etm,
|
|
stm,
|
|
etm,
|
|
showTime: false,
|
|
showTime1: false,
|
|
tableData: [],
|
|
chartData: {},
|
|
stcd: "",
|
|
};
|
|
},
|
|
methods: {
|
|
handleStartTime(e) {
|
|
let time = moment(e.value).format("YYYY-MM-DD HH:mm");
|
|
this.stm = time;
|
|
this.showTime = false;
|
|
},
|
|
handleEndTime(e) {
|
|
let time = moment(e.value).format("YYYY-MM-DD HH:mm");
|
|
this.etm = time;
|
|
this.showTime1 = false;
|
|
},
|
|
async geTableData() {
|
|
uni.showLoading({
|
|
title: "加载中...",
|
|
mask: true,
|
|
});
|
|
try {
|
|
const { data } = await uni.$http.post(
|
|
"/gunshiApp/tsg/reservoir/water/monitor/data",
|
|
{
|
|
stcd: this.stcd,
|
|
stm: moment(this.stm).format("YYYY-MM-DD HH:mm:ss"),
|
|
etm: moment(this.etm).format("YYYY-MM-DD HH:mm:ss"),
|
|
}
|
|
);
|
|
|
|
if (data.code == 200) {
|
|
uni.hideLoading();
|
|
this.tableData = [...data.data];
|
|
}
|
|
} catch (error) {
|
|
uni.$showMsg();
|
|
}
|
|
},
|
|
searchHandle() {
|
|
this.geTableData();
|
|
},
|
|
},
|
|
watch: {
|
|
tableData(n, o) {
|
|
if (n.length > 0) {
|
|
this.chartData = {
|
|
...drpOptions(n),
|
|
};
|
|
console.log({
|
|
...drpOptions(n),
|
|
});
|
|
}
|
|
},
|
|
},
|
|
mounted() {
|
|
this.geTableData();
|
|
},
|
|
onLoad(options) {
|
|
this.name = options.stnm;
|
|
this.stcd = options.stcd;
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.water-chart-area {
|
|
width: 100%;
|
|
height: 270px;
|
|
}
|
|
|
|
.water-table-area {
|
|
margin-top: 10px;
|
|
}
|
|
</style> |