490 lines
9.5 KiB
Vue
490 lines
9.5 KiB
Vue
<template>
|
|
<view class="page">
|
|
<u-navbar :is-back="false" title="运营" :border-bottom="false" back-icon-color="000" :background="bgc"
|
|
title-color='#000' title-size='36' height='40' id="navbar">
|
|
</u-navbar>
|
|
<tab-bars :indexs='1' style=""></tab-bars>
|
|
<image src="https://api.ccttiot.com/smartmeter/img/static/umtXLN0X6kijXgwlI4bg" class="imgbj" mode=""></image>
|
|
<view class="box">
|
|
<view class="shouru">
|
|
<view class="name">
|
|
收入统计
|
|
</view>
|
|
<view class="tongji">
|
|
<view class="one">
|
|
<view class="bot">
|
|
今日收入
|
|
</view>
|
|
<view class="top">
|
|
0
|
|
</view>
|
|
<view class="bot">
|
|
今日订单数
|
|
</view>
|
|
<view class="top">
|
|
0
|
|
</view>
|
|
</view>
|
|
<view class="one">
|
|
<view class="bot">
|
|
本周收入
|
|
</view>
|
|
<view class="top">
|
|
0
|
|
</view>
|
|
<view class="bot">
|
|
本周订单数
|
|
</view>
|
|
<view class="top">
|
|
0
|
|
</view>
|
|
</view>
|
|
<view class="one">
|
|
<view class="bot">
|
|
本月收入
|
|
</view>
|
|
<view class="top">
|
|
0
|
|
</view>
|
|
<view class="bot">
|
|
本月订单数
|
|
</view>
|
|
<view class="top">
|
|
0
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="gailan">
|
|
<view class="name">
|
|
运营概览
|
|
</view>
|
|
<view class="top">
|
|
<view class="lt">
|
|
经营概况
|
|
</view>
|
|
<view class="rt">
|
|
<view @click="btntab(1)" :class="tabindex == 1 ? 'actives' : ''">
|
|
近30天
|
|
</view>
|
|
<view @click="btntab(2)" :class="tabindex == 2 ? 'actives' : ''">
|
|
近七天
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="zhixian">
|
|
<l-echart class="line-chart" ref="lineChart2"></l-echart>
|
|
<view class="shuom">
|
|
<view class="">
|
|
<image src="https://api.ccttiot.com/smartmeter/img/static/uk2PaAnt4mMTrYhbM7PY" mode="">
|
|
</image>订单营收
|
|
</view>
|
|
<view class="">
|
|
<image src="https://api.ccttiot.com/smartmeter/img/static/ubLD9khOF4jiHmD9O9QA" mode="">
|
|
</image>订单数
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="bijiao">
|
|
<view class="lt" style="border-right: 1px solid #D8D8D8;">
|
|
<view class="price">
|
|
1359
|
|
</view>
|
|
<view class="wz">
|
|
订单营收(元)
|
|
</view>
|
|
</view>
|
|
<view class="lt" style="padding-left: 34rpx;box-sizing: border-box;">
|
|
<view class="price">
|
|
1359
|
|
</view>
|
|
<view class="wz">
|
|
订单数(单)
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="shebei">
|
|
<view class="name">
|
|
当前运营情况 <image @click="smflag = !smflag" src="https://api.ccttiot.com/smartmeter/img/static/uvgciot52bbI8bBduvPK" mode=""></image> <text v-if="smflag">使用数/总数</text>
|
|
</view>
|
|
<view class="bd">
|
|
<view class="one">
|
|
<view class="">
|
|
房间
|
|
</view>
|
|
<view class="cu">
|
|
<text>2</text>/10
|
|
</view>
|
|
</view>
|
|
<view class="one">
|
|
<view class="">
|
|
大厅设施
|
|
</view>
|
|
<view class="cu">
|
|
<text>3</text>/10
|
|
</view>
|
|
</view>
|
|
<view class="one" style="border: none;">
|
|
<view class="">
|
|
设备总数
|
|
</view>
|
|
<view class="cu">
|
|
<text>5</text>/20
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import * as echarts from '@/uni_modules/lime-echart/static/echarts.min.js';
|
|
export default {
|
|
data() {
|
|
return {
|
|
bgc: {
|
|
backgroundColor: "",
|
|
},
|
|
tabindex: 1,
|
|
smflag:false
|
|
}
|
|
},
|
|
onLoad() {
|
|
|
|
},
|
|
onShow() {
|
|
//加载折线图数据
|
|
this.loadLineData2()
|
|
},
|
|
mounted() {
|
|
|
|
},
|
|
methods: {
|
|
// 点击切换周还是月
|
|
btntab(num) {
|
|
this.tabindex = num
|
|
},
|
|
//加载折线图数据
|
|
loadLineData2() {
|
|
//这里请求服务器拿到数据
|
|
let res = {
|
|
//x轴数据
|
|
xData: ['6/11', '6/12', '6/13', '6/14', '6/15', '6/16', '6/17'],
|
|
//y轴数据
|
|
yData: [50, 120, 150, 220, 180, 300, 130], //订单数
|
|
yData1: [2000, 1820, 2350, 1200, 800, 3000, 2190], //营收
|
|
}
|
|
let option = {
|
|
xAxis: {
|
|
type: 'category',
|
|
// x轴数据文字颜色
|
|
axisLabel: {
|
|
color: '#a7a7a7'
|
|
},
|
|
// x轴那天坐标轴线的颜色
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#f1f1f1',
|
|
}
|
|
},
|
|
//x轴上面刻度线隐藏
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
//这里是x轴数据
|
|
data: res.xData
|
|
},
|
|
//设置网格
|
|
grid: {
|
|
top: 40,
|
|
bottom: 30,
|
|
},
|
|
//y轴设置
|
|
yAxis: {
|
|
type: 'value',
|
|
//y轴标签文字颜色
|
|
axisLabel: {
|
|
color: '#a7a7a7'
|
|
},
|
|
// y轴分割线设置为虚线
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
type: 'dashed'
|
|
}
|
|
}
|
|
},
|
|
//设置提示为点击时
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
triggerOn: 'click',
|
|
formatter: '{b}: \n {a0}: {c0} \n {a1}: {c1}'
|
|
},
|
|
//设置曲线的颜色
|
|
color: ['#A9D2FF', '#B1A5FF'],
|
|
series: [{
|
|
name: "订单营收",
|
|
//这里是数据
|
|
data: res.yData1,
|
|
type: 'line',
|
|
//设置为平滑，默认为折线
|
|
smooth: false,
|
|
},
|
|
{
|
|
name: "订单数",
|
|
//这里是数据
|
|
data: res.yData,
|
|
type: 'line',
|
|
//设置为平滑，默认为折线
|
|
smooth: false,
|
|
}
|
|
]
|
|
}
|
|
this.$refs.lineChart2.init(echarts, chart => {
|
|
chart.setOption(option);
|
|
})
|
|
}
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.page {
|
|
// background: #fff;
|
|
}
|
|
|
|
.actives {
|
|
background: #fff !important;
|
|
box-shadow: 0rpx 0rpx 4rpx 0rpx rgba(0, 0, 0, 0.15) !important;
|
|
}
|
|
|
|
.box {
|
|
width: 100%;
|
|
height: 80vh;
|
|
overflow: scroll;
|
|
}
|
|
.shebei{
|
|
width: 680rpx;
|
|
margin: auto;
|
|
margin-top: 34rpx;
|
|
.name{
|
|
font-weight: 600;
|
|
font-size: 36rpx;
|
|
color: #3D3D3D;
|
|
display: flex;
|
|
align-items: center;
|
|
text{
|
|
width: 184rpx;
|
|
height: 54rpx;
|
|
background: #E8E8E8;
|
|
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
|
line-height: 54rpx;
|
|
text-align: center;
|
|
font-size: 26rpx;
|
|
color: #3D3D3D;
|
|
margin-left: 20rpx;
|
|
}
|
|
image{
|
|
margin-left: 10rpx;
|
|
width: 30rpx;
|
|
height: 30rpx;
|
|
}
|
|
}
|
|
.bd{
|
|
width: 680rpx;
|
|
height: 172rpx;
|
|
background: #FFFFFF;
|
|
box-shadow: 0rpx 8rpx 40rpx 0rpx rgba(72,137,59,0.1);
|
|
border-radius: 24rpx 24rpx 24rpx 24rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
text-align: center;
|
|
margin-top: 20rpx;
|
|
.one{
|
|
border-right: 1px solid #C7C7C7;
|
|
width: 33%;
|
|
view{
|
|
font-size: 24rpx;
|
|
color: #3D3D3D;
|
|
}
|
|
.cu{
|
|
font-weight: 600;
|
|
font-size: 40rpx;
|
|
color: #3D3D3D;
|
|
margin-top: 8rpx;
|
|
text{
|
|
color: #48893B;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.gailan {
|
|
width: 680rpx;
|
|
max-height: 1868rpx;
|
|
background: #FFFFFF;
|
|
box-shadow: 0rpx 8rpx 40rpx 0rpx rgba(72, 137, 59, 0.1);
|
|
border-radius: 24rpx 24rpx 24rpx 24rpx;
|
|
margin: auto;
|
|
margin-top: 34rpx;
|
|
padding: 0 30rpx;
|
|
padding-top: 38rpx;
|
|
padding-bottom: 24rpx;
|
|
box-sizing: border-box;
|
|
|
|
.bijiao {
|
|
width: 636rpx;
|
|
max-height: 204rpx;
|
|
background: #DEF1DA;
|
|
border-radius: 24rpx 24rpx 24rpx 24rpx;
|
|
display: flex;
|
|
padding: 24rpx 40rpx;
|
|
box-sizing: border-box;
|
|
margin-top: 34rpx;
|
|
|
|
.lt {
|
|
width: 50%;
|
|
|
|
.price {
|
|
font-weight: 600;
|
|
font-size: 36rpx;
|
|
color: #3D3D3D;
|
|
}
|
|
|
|
.wz {
|
|
font-size: 24rpx;
|
|
color: #3D3D3D;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 10rpx;
|
|
|
|
image {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
margin-left: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.zhixian {
|
|
.shuom {
|
|
margin-top: 26rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 76rpx;
|
|
box-sizing: border-box;
|
|
justify-content: space-between;
|
|
|
|
view {
|
|
font-size: 24rpx;
|
|
color: #3D3D3D;
|
|
|
|
image {
|
|
width: 76rpx;
|
|
height: 18rpx;
|
|
margin-right: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.top {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
height: 66rpx;
|
|
line-height: 66rpx;
|
|
align-items: center;
|
|
margin-top: 24rpx;
|
|
|
|
.lt {
|
|
border-left: 10rpx solid #48893B;
|
|
font-weight: 600;
|
|
font-size: 32rpx;
|
|
color: #3D3D3D;
|
|
height: 50rpx;
|
|
line-height: 50rpx;
|
|
padding-left: 16rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.rt {
|
|
width: 236rpx;
|
|
height: 66rpx;
|
|
background: #F6F6F6;
|
|
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
view {
|
|
width: 116rpx;
|
|
height: 58rpx;
|
|
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
|
text-align: center;
|
|
line-height: 58rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.name {
|
|
font-weight: 600;
|
|
font-size: 36rpx;
|
|
color: #3D3D3D;
|
|
text-align: center;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.shouru {
|
|
width: 680rpx;
|
|
max-height: 838rpx;
|
|
background: #FFFFFF;
|
|
box-shadow: 0rpx 8rpx 40rpx 0rpx rgba(72, 137, 59, 0.1);
|
|
border-radius: 24rpx 24rpx 24rpx 24rpx;
|
|
margin: auto;
|
|
margin-top: 24rpx;
|
|
padding: 26rpx 32rpx;
|
|
box-sizing: border-box;
|
|
|
|
.tongji {
|
|
display: flex;
|
|
text-align: center;
|
|
margin-top: 20rpx;
|
|
box-sizing: border-box;
|
|
justify-content: space-between;
|
|
|
|
.one {
|
|
.top {
|
|
font-weight: 600;
|
|
font-size: 36rpx;
|
|
color: #48893B;
|
|
}
|
|
|
|
.bot {
|
|
font-size: 28rpx;
|
|
color: #7C7C7C;
|
|
}
|
|
}
|
|
}
|
|
|
|
.name {
|
|
font-weight: 600;
|
|
font-size: 36rpx;
|
|
color: #3D3D3D;
|
|
}
|
|
}
|
|
|
|
.imgbj {
|
|
width: 100%;
|
|
height: 100vh;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: -1;
|
|
}
|
|
</style> |