过滤器小程序
This commit is contained in:
@@ -0,0 +1,306 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user