<template>
<view class="page">
<u-navbar is-back="false" title="历史走势" :border-bottom="false" :background="bgc" title-color='#000'
title-size='36' :title-bold='true' height='45' id="navbar">
</u-navbar>
<view class="echarts_box">
<view class="echarts_top">
<view class="top_left">
重量
<image style="width: 28rpx;height: 33rpx;" src="https://api.ccttiot.com/smartmeter/img/static/uk7CvwzeU0ukxvS9cBtD" mode=""></image>
</view>
<view class="top_cont">
最近30日
</view>
<view class="top_right">
<view style="width: 1rpx;">
</view>
<view class="txt">
<!-- 历史走势<view class="iconfont icon-xiangyou1"></view> -->
</view>
</view>
</view>
<view class="echarts">
<uni-ec-canvas class="uni-ec-canvas" id="uni-ec-canvas" ref="canvas3" canvas-id="uni-ec-canvas"
:ec="ec">
</uni-ec-canvas>
</view>
</view>
<view class="echarts_box">
<view class="echarts_top">
<view class="top_left">
进出量
<image style="width: 33rpx;height: 33rpx;" src="https://api.ccttiot.com/smartmeter/img/static/uhsU6Y1K35jxA4aRauzy" mode=""></image>
</view>
<view class="top_cont">
最近30日
</view>
<view class="top_right">
<view style="width: 1rpx;">
</view>
<view class="txt">
<!-- 历史走势<view class="iconfont icon-xiangyou1"></view> -->
</view>
</view>
</view>
<view class="echarts">
<uni-ec-canvas class="uni-ec-canvas" id="uni-ec-canvas" ref="canvas4" canvas-id="uni-ec-canvas"
:ec="ec">
</uni-ec-canvas>
</view>
</view>
</view>
</template>
<script>
import uniEcCanvas from '@/components/uni-ec-canvas/uni-ec-canvas.vue'
import * as echarts from '@/components/uni-ec-canvas/echarts'
let chart = null
export default {
components: {
uniEcCanvas
},
data() {
return {
bgc: {
backgroundColor: " #F4FAF8",
},
ec: {
lazyLoad: true
},
chartday: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
chartData: [120, 200, 150, 80, 70, 110, 130],
chartData1: [],
chartData2: [],
chartData3: [],
chartData4: [],
chartData5: [],
chartData6: [],
chartData7: [],
chartData8: [],
yeartime: {
year: '',
month: '',
day: ''
},
yeartimes: {
year: '',
month: '',
day: ''
},
num:'',
beehiveId:'',
modelTags:[],
height:false,
io:false,
xnwd:false,
xnsd:false,
sypl:false,
eyht:false,
}
},
onLoad(option) {
this.beehiveId = option.beehiveId
},
onShow() {
setTimeout(() => {
this.$refs.canvas3.init(this.initChart3)
this.$refs.canvas4.init(this.initChart4)
}, 1000)
let now = new Date();
let previousDay = new Date(now)
this.yeartime.year = now.getFullYear()
this.yeartime.month = String(previousDay.getMonth() + 1).padStart(2, '0')
this.yeartime.day = String(now.getDate()).padStart(2, '0')
previousDay.setDate(now.getDate() - 30)
this.yeartimes.year = previousDay.getFullYear()
this.yeartimes.month = String(previousDay.getMonth() + 1).padStart(2, '0')
this.yeartimes.day = String(previousDay.getDate()).padStart(2, '0')
this.getchartData3()
this.getchartData4()
},
methods: {
// 重量图表
getchartData3() {
let time = this.yeartime.year + '-' + this.yeartime.month + '-' + this.yeartime.day
let times = this.yeartimes.year + '-' + this.yeartimes.month + '-' + this.yeartimes.day
this.$u.get(`/farmer/report/weightDay?dateRange=${times},${time}&apiaryId=${this.beehiveId}`).then(
res => {
if (res.code == 200) {
this.chartData3 = res.data.map(item => item.value)
}
})
},
// 进出量图表
getchartData4() {
let time = this.yeartime.year + '-' + this.yeartime.month + '-' + this.yeartime.day
let times = this.yeartimes.year + '-' + this.yeartimes.month + '-' + this.yeartimes.day
this.$u.get(`/farmer/report/ioCount?dateRange=${times},${time}&apiaryId=${this.beehiveId}`).then(res => {
if (res.code == 200) {
this.chartData4 = res.data.map(item => item.value)
}
})
},
//重量图表
initChart3(canvas, width, height, canvasDpr) {
let that = this
const option = {
grid: {
left: '4%',
right: '4%',
bottom: '3%',
top: '4%',
containLabel: true
},
xAxis: {
show: true,
type: 'category',
boundaryGap: false,
axisLine: {
show: false // 隐藏X轴线
},
axisTick: {
show: false // 隐藏X轴刻度
},
axisLabel: {
show: false // 隐藏X轴标签
},
axisLabel: {
show: true,
color: '#ccc',
fontSize: 11,
rotate: 0,
},
splitLine: {
show: false,
},
// data: that.chartday,
},
yAxis: {
show: true,
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
show: true,
color: '#ccc',
fontSize: 11,
formatter: function(value) {
// 保留两位小数，没有小数时显示00
return (value / 1000).toFixed(1) + 'Kg'
},
},
splitLine: {
show: true, // 显示X轴网格线
lineStyle: {
type: 'dashed', // 设置网格线为虚线
color: '#ccc', // 可以设置虚线的颜色
width: 1 // 可以设置虚线的宽度
}
}
},
visualMap: {
type: 'piecewise',
show: false,
dimension: 0,
seriesIndex: 0,
pieces: [{
gt: 1,
lt: 3,
color: 'RGBA(255, 241, 201, 1)',
},
{
gt: 5,
lt: 7,
color: 'RGBA(255, 241, 201, 1)',
},
],
},
series: [{
type: 'line',
smooth: 0.6,
symbol: 'none',
lineStyle: {
color: '#FFE28C',
width: 4,
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#FFF1C9'
}, ]),
},
},
data: that.chartData3,
}],
};
chart = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: canvasDpr
})
option.series[0].data = that.chartData3
canvas.setChart(chart)
chart.setOption(option)
return chart
},
// 进出量图表
initChart4(canvas, width, height, canvasDpr) {
let that = this
const option = {
grid: {
left: '4%',
right: '4%',
bottom: '3%',
top: '4%',
containLabel: true
},
xAxis: {
show: true,
type: 'category',
boundaryGap: false,
axisLine: {
show: false // 隐藏X轴线
},
axisTick: {
show: false // 隐藏X轴刻度
},
axisLabel: {
show: false // 隐藏X轴标签
},
axisLabel: {
show: true,
color: '#ccc',
fontSize: 11,
rotate: 0,
},
splitLine: {
show: false,
},
// data: that.chartday,
},
yAxis: {
show: true,
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
show: true,
color: '#ccc',
fontSize: 11,
formatter: function(value) {
// 保留两位小数，没有小数时显示00
return Math.ceil(value) + '只'
},
},
splitLine: {
show: true, // 显示X轴网格线
lineStyle: {
type: 'dashed', // 设置网格线为虚线
color: '#ccc', // 可以设置虚线的颜色
width: 1 // 可以设置虚线的宽度
}
}
},
visualMap: {
type: 'piecewise',
show: false,
dimension: 0,
seriesIndex: 0,
pieces: [{
gt: 1,
lt: 3,
color: 'RGBA(255, 241, 201, 1)',
},
{
gt: 5,
lt: 7,
color: 'RGBA(255, 241, 201, 1)',
},
],
},
series: [{
type: 'line',
smooth: 0.6,
symbol: 'none',
lineStyle: {
color: '#FFE28C',
width: 4,
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#FFF1C9'
}, ]),
},
},
data: that.chartData4,
}],
};
chart = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: canvasDpr
})
option.series[0].data = that.chartData4
canvas.setChart(chart)
chart.setOption(option)
return chart
},
}
}
</script>
<style lang="scss">
page {
background-color: #FAFDFD;
}
.input-placeholder{
color: red;
}
.page {
// position: relative;
width: 750rpx;
// padding-bottom: 200rpx;
padding: 38rpx;
box-sizing: border-box;
.echarts_box {
margin-top: 26rpx;
padding: 18rpx 36rpx;
width: 674rpx;
background: #FFFFFF;
box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.15);
border-radius: 28rpx 28rpx 28rpx 28rpx;
.echarts {
margin-top: 24rpx;
// width: 100%;
// height: 80%;
width: 100%;
height: 330rpx;
}
.echarts_top {
display: flex;
align-items: center;
// justify-content: space-between;
.top_left {
width: 38.33%;
display: flex;
align-items: center;
font-weight: 500;
font-size: 36rpx;
color: #3D3D3D;
padding-left: 24rpx;
image {
margin-left: 10rpx;
width: 25.03rpx;
height: 34rpx;
}
}
.top_cont {
width: 33.33%;
text-align: center;
font-weight: 600;
font-size: 36rpx;
color: #3D3D3D;
}
.top_right {
width: 33.33%;
display: flex;
align-items: center;
.txt {
display: flex;
align-items: center;
flex-wrap: nowrap;
margin-left: auto;
font-weight: 400;
font-size: 32rpx;
color: #4D4D4D;
.icon-xiangyou1 {
margin-top: 4rpx;
margin-left: 8rpx;
}
}
}
}
}
}
</style>