307 lines
7.8 KiB
Vue
307 lines
7.8 KiB
Vue
<template>
|
|
<view class="container">
|
|
<view class="top-container">
|
|
<image class="bg-img" :src="apiHost+'/miniapp/static/mybg.png'"></image>
|
|
<view class="mybox">
|
|
<view class="box">
|
|
<view class="item">
|
|
<view style="color:#4652C0;font-weight:bold;">闸门调控次数</view>
|
|
<view style="color:#4652C0;font-weight:bold;font-size:50rpx">{{total_gate_count}}</view>
|
|
<hr color="#E5E5E5" size="1px"/>
|
|
<view style="color:#000;font-size:20rpx">
|
|
<text>本月 {{current_gate_count}}</text>
|
|
<text style="display:inline-block;margin-left:30rpx">总计 {{total_gate_count}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="item">
|
|
<view style="color:#4652C0;font-weight:bold;">水泵调控次数</view>
|
|
<view style="color:#4652C0;font-weight:bold;font-size:50rpx">{{total_pump_count}}</view>
|
|
<hr color="#E5E5E5" size="1px"/>
|
|
<view style="color:#000;font-size:20rpx">
|
|
<text>本月 {{current_pump_count}}</text>
|
|
<text style="display:inline-block;margin-left:30rpx">总计 {{total_pump_count}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="content">
|
|
<tui-card class="mycard">
|
|
<qiun-title-bar title="闸门调控统计"/>
|
|
<view class="tui-flex-box">
|
|
<tui-tag margin="20rpx 20rpx 0 0" padding="12rpx" :type="colorM1" @click="timeRange('m1')">月</tui-tag>
|
|
<tui-tag margin="20rpx 20rpx 0 0" padding="12rpx" :type="colorD1" @click="timeRange('d1')">年</tui-tag>
|
|
</view>
|
|
<view class="charts-box">
|
|
<qiun-data-charts type="column" :chartData="chartsDataColumn" :echartsH5="true" :opts="opts" :echartsApp="true"/>
|
|
</view>
|
|
</tui-card>
|
|
<tui-card class="mycard">
|
|
<qiun-title-bar title="水泵调控次数统计"/>
|
|
<view class="tui-flex-box">
|
|
<tui-tag margin="20rpx 20rpx 0 0" padding="12rpx" :type="colorM2" @click="timeRange('m2')">月</tui-tag>
|
|
<tui-tag margin="20rpx 20rpx 0 0" padding="12rpx" :type="colorD2" @click="timeRange('d2')">年</tui-tag>
|
|
</view>
|
|
<view class="charts-box">
|
|
<qiun-data-charts type="demotype" :eopts="{seriesTemplate:{areaStyle:{opacity:0.2}}}" :chartData="chartsDataLine" :echartsH5="true" :echartsApp="true"/>
|
|
</view>
|
|
</tui-card>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import myapp from '@/common/js/myapp.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
apiHost: myapp.apiHost,
|
|
total_gate_count: '',
|
|
current_gate_count: '',
|
|
total_pump_count: '',
|
|
current_pump_count: '',
|
|
chartsDataColumn:{},
|
|
chartsDataLine:{},
|
|
colorM1: 'blue',
|
|
colorD1: 'btn-gray',
|
|
colorM2: 'blue',
|
|
colorD2: 'btn-gray',
|
|
opts: {
|
|
legend:{
|
|
show: false
|
|
},
|
|
extra: {
|
|
column:{
|
|
width: 10
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
onShow: function() {
|
|
// 验证登录信息是否过期
|
|
let user = myapp.checkLogin()
|
|
|
|
// 将 data 存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容
|
|
uni.setStorageSync('lastPagePath', '/packagePage/pages/overview/overview')
|
|
|
|
let that = this;
|
|
// 获取总览内容中闸门总次数以及本月闸门次数
|
|
myapp.request('/?c=overview&a=getOverviewGateActionInfo',function(res) {
|
|
that.total_gate_count = res.data.data.total_gate_count
|
|
that.current_gate_count = res.data.data.current_gate_count
|
|
},{token:user.token})
|
|
// 获取总览内容中水泵总次数以及本月水泵次数
|
|
myapp.request('/?c=overview&a=getOverviewPumpActionInfo',function(res) {
|
|
that.total_pump_count = res.data.data.total_pump_count
|
|
that.current_pump_count = res.data.data.current_pump_count
|
|
},{token:user.token})
|
|
|
|
setTimeout(() => {
|
|
let that = this;
|
|
// 闸门调控统计
|
|
myapp.request('/?c=overview&a=getOverviewGateLine',function(res) {
|
|
that.chartsDataColumn = {
|
|
"legend": {
|
|
"show":false
|
|
},
|
|
"categories": res.data.data.time,
|
|
"series": [{
|
|
"name": "调控次数",
|
|
"data": res.data.data.count,
|
|
"color": "#70A3FC"
|
|
}]
|
|
}
|
|
},{token:user.token,type:'month'})
|
|
|
|
// 水泵调控统计
|
|
myapp.request('/?c=overview&a=getOverviewPumpLine',function(res) {
|
|
that.chartsDataLine = {
|
|
"categories": res.data.data.time,
|
|
"series": [{
|
|
"name": "次数",
|
|
"data": res.data.data.count,
|
|
"color": "#5087EC"
|
|
}]
|
|
}
|
|
},{token:user.token,type:'month'})
|
|
|
|
}, 1000)
|
|
},
|
|
methods: {
|
|
timeRange: function(tagType) {
|
|
// 验证登录信息是否过期
|
|
let user = myapp.checkLogin()
|
|
let that = this;
|
|
switch (tagType) {
|
|
case 'm1':
|
|
this.colorM1 = 'blue'
|
|
this.colorD1 = 'btn-gray'
|
|
// 闸门调控统计
|
|
myapp.request('/?c=overview&a=getOverviewGateLine',function(res) {
|
|
that.chartsDataColumn = {
|
|
"legend": {
|
|
"show":false
|
|
},
|
|
"categories": res.data.data.time,
|
|
"series": [{
|
|
"name": "调控次数",
|
|
"data": res.data.data.count,
|
|
"color": "#70A3FC"
|
|
}]
|
|
}
|
|
},{token:user.token,type:'month'})
|
|
break;
|
|
case 'd1':
|
|
this.colorM1 = 'btn-gray'
|
|
this.colorD1 = 'blue'
|
|
// 闸门调控统计
|
|
myapp.request('/?c=overview&a=getOverviewGateLine',function(res) {
|
|
that.chartsDataColumn = {
|
|
"legend": {
|
|
"show":false
|
|
},
|
|
"categories": res.data.data.time,
|
|
"series": [{
|
|
"name": "调控次数",
|
|
"data": res.data.data.count,
|
|
"color": "#70A3FC"
|
|
}]
|
|
}
|
|
},{token:user.token,type:'year'})
|
|
break;
|
|
case 'm2':
|
|
this.colorM2 = 'blue'
|
|
this.colorD2 = 'btn-gray'
|
|
myapp.request('/?c=overview&a=getOverviewPumpLine',function(res) {
|
|
that.chartsDataLine = {
|
|
"categories": res.data.data.time,
|
|
"series": [{
|
|
"name": "次数",
|
|
"data": res.data.data.count,
|
|
"color": "#5087EC"
|
|
}]
|
|
}
|
|
},{token:user.token,type:'month'})
|
|
break;
|
|
case 'd2':
|
|
this.colorM2 = 'btn-gray'
|
|
this.colorD2 = 'blue'
|
|
myapp.request('/?c=overview&a=getOverviewPumpLine',function(res) {
|
|
that.chartsDataLine = {
|
|
"categories": res.data.data.time,
|
|
"series": [{
|
|
"name": "次数",
|
|
"data": res.data.data.count,
|
|
"color": "#5087EC"
|
|
}]
|
|
}
|
|
},{token:user.token,type:'year'})
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
@import '../../../static/style/thorui.css';
|
|
|
|
page {
|
|
background-color: #F5F6FA;
|
|
}
|
|
|
|
.mybox {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
position: relative;
|
|
z-index: 2;
|
|
margin-top: 30rpx;
|
|
margin-bottom:20rpx;
|
|
margin-left:28rpx;
|
|
margin-right:28rpx;
|
|
background-color:transparent;
|
|
}
|
|
|
|
.mycard {
|
|
margin-bottom: 40rpx;
|
|
}
|
|
|
|
.container {
|
|
position: relative;
|
|
padding-bottom: 100rpx;
|
|
}
|
|
|
|
.top-container {
|
|
height: 320rpx;
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.bg-img {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 460rpx;
|
|
}
|
|
|
|
.content {
|
|
padding-top: 150rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
position:absolute;
|
|
top:90rpx;
|
|
width:100%
|
|
}
|
|
|
|
.charts-box {
|
|
width: 100%;
|
|
height: 200px;
|
|
background-color: #FFF;
|
|
}
|
|
|
|
.box {
|
|
display: flex;
|
|
display: -webkit-flex;
|
|
justify-content: space-between;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
box-sizing: border-box;
|
|
border:none;
|
|
}
|
|
|
|
.item {
|
|
width: 48%;
|
|
padding: 20rpx 0rpx 20rpx 30rpx;
|
|
box-sizing: border-box;
|
|
border-radius: 8rpx;
|
|
color: #fff;
|
|
margin-bottom: 30rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
font-size: 30rpx;
|
|
margin:0;
|
|
background-color:#FFF;
|
|
}
|
|
|
|
.mybtn {
|
|
padding:0;
|
|
width:10px;
|
|
}
|
|
|
|
.tui-flex-box {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
flex-direction: row-reverse;
|
|
justify-content: flex-start;
|
|
align-items: flex-start;
|
|
margin-bottom: 26rpx;
|
|
position: relative;
|
|
top:-80rpx;
|
|
}
|
|
</style>
|