398 lines
8.4 KiB
Vue
398 lines
8.4 KiB
Vue
<template>
|
|
<view class="page">
|
|
<view class="backImg">
|
|
<image src="https://api.ccttiot.com/smartmeter/img/static/utkroSMjT09nmCYaA7FT" mode=""></image>
|
|
</view>
|
|
<view class="tipbox">
|
|
<view class="tip_cont">
|
|
<image src="https://api.ccttiot.com/smartmeter/img/static/uKW514Tl8TVUiaJW2ygl" mode=""></image>
|
|
<view class="txt">
|
|
蜂箱数量:10
|
|
</view>
|
|
</view>
|
|
<view class="tip_cont" style="margin-top: 48rpx;">
|
|
<image src="https://api.ccttiot.com/smartmeter/img/static/uBEd8suIZ2vdqOGI8rP6" mode=""></image>
|
|
<view class="txt">
|
|
蜂箱数量:10
|
|
</view>
|
|
</view>
|
|
<view class="tip_cont" style="margin-top: 48rpx;">
|
|
<image src="https://api.ccttiot.com/smartmeter/img/static/ufgkE5w8AND4eLZD94RR" mode=""></image>
|
|
<view class="txt">
|
|
蜂箱数量:10
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" v-if="isLoading" />
|
|
<view class="warp_box">
|
|
<swiper class="swiper" :style="{ height: swiperHeight + 'rpx' }" :current='curtitidx'
|
|
previous-margin='50rpx' next-margin='50rpx' :circular='true' @change="swiperchange">
|
|
<swiper-item v-for="(item, index) in swiperItems" :key="index"
|
|
:class="{ 'active': curtitidx === index }">
|
|
<view class="swiper-item">
|
|
<view class="card_box">
|
|
<view class="card">
|
|
<image src="https://api.ccttiot.com/smartmeter/img/static/uMgejepZdfttR61bJlpP" mode="">
|
|
</image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
<view class="info_cont">
|
|
<view class="cont">
|
|
<view class="cont_top">
|
|
电量不足
|
|
</view>
|
|
<view class="cont_bot">
|
|
0
|
|
</view>
|
|
</view>
|
|
<view class="cont">
|
|
<view class="cont_top">
|
|
电量不足
|
|
</view>
|
|
<view class="cont_bot">
|
|
0
|
|
</view>
|
|
</view>
|
|
<view class="cont">
|
|
<view class="cont_top">
|
|
电量不足
|
|
</view>
|
|
<view class="cont_bot">
|
|
0
|
|
</view>
|
|
</view>
|
|
<view class="cont">
|
|
<view class="cont_top">
|
|
电量不足
|
|
</view>
|
|
<view class="cont_bot">
|
|
0
|
|
</view>
|
|
</view>
|
|
<view class="cont">
|
|
<view class="cont_top">
|
|
电量不足
|
|
</view>
|
|
<view class="cont_bot">
|
|
0
|
|
</view>
|
|
</view>
|
|
<view class="cont">
|
|
<view class="cont_top">
|
|
电量不足
|
|
</view>
|
|
<view class="cont_bot">
|
|
0
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
<tab-bar :indexs='0'></tab-bar>
|
|
</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 {
|
|
ec: {
|
|
lazyLoad: true
|
|
},
|
|
bgc: {
|
|
backgroundColor: "#F7FAFE",
|
|
|
|
},
|
|
iconType: 'flower',
|
|
status: 'loadmore',
|
|
loadText: {
|
|
loadmore: '轻轻上拉',
|
|
loading: '努力加载中',
|
|
nomore: '实在没有了'
|
|
},
|
|
curtitidx: 1,
|
|
swiperHeight: 426,
|
|
activeSwiperHeight: 500, // 激活的swiper高度
|
|
swiperItems: [1, 2, 3], // Placeholder for swiper items
|
|
}
|
|
},
|
|
|
|
onShow() {
|
|
|
|
|
|
},
|
|
onPullDownRefresh() {
|
|
|
|
|
|
|
|
},
|
|
|
|
methods: {
|
|
swiperchange(e) {
|
|
this.curtitidx = e.detail.current
|
|
// console.log(e, 'aaaa');
|
|
},
|
|
initChart(canvas, width, height, canvasDpr) {
|
|
let that = this
|
|
console.log(canvas, width, height, canvasDpr)
|
|
let value = 100;
|
|
let value2 = this.deviceInfo.totalElectriQuantity
|
|
const option = {
|
|
// backgroundColor:"#061740",
|
|
// title: {
|
|
// show: false,
|
|
// text: `历史请求满意度`, // 图表标题
|
|
// x: 'center',
|
|
// y: '20',
|
|
// textStyle: {
|
|
// color: '#333', //'#fff',
|
|
// fontSize: 20,
|
|
// },
|
|
// },
|
|
series: [{
|
|
type: 'pie', // 饼图类型
|
|
radius: ['98%', '70%'], // 饼图半径，第一个值是内半径，第二个值是外半径
|
|
silent: true,
|
|
clockwise: true,
|
|
startAngle: 90, // 起始角度
|
|
z: 0,
|
|
zlevel: 0,
|
|
data: [{
|
|
value: value,
|
|
name: '占比', // 数据项名称
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#8883F0', // 数据项颜色
|
|
},
|
|
},
|
|
label: {
|
|
normal: {
|
|
position: 'center',
|
|
formatter: ` {a|${value2}}\n\n{b|剩余电量}`, // 标签内容格式
|
|
rich: {
|
|
a: {
|
|
fontSize: 15,
|
|
fontWeight: '700',
|
|
color: '#333',
|
|
},
|
|
b: {
|
|
fontSize: 11,
|
|
color: '#888',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
// {
|
|
// value: 100 - value2,
|
|
// name: '',
|
|
// label: {
|
|
// normal: {
|
|
// show: false,
|
|
// },
|
|
// },
|
|
// itemStyle: {
|
|
// normal: {
|
|
// color: '#173164',
|
|
// },
|
|
// },
|
|
// },
|
|
],
|
|
},
|
|
// {
|
|
// type: 'gauge', // 仪表盘类型
|
|
// radius: '130%', // 仪表盘半径，占图表容器的百分比
|
|
// center: ['50%', '50%'], // 仪表盘中心位置
|
|
// startAngle: 359,
|
|
// endAngle: 359.9,
|
|
// splitNumber: 2, // 刻度分割段数
|
|
// hoverAnimation: true,
|
|
// axisTick: {
|
|
// show: true, // 是否显示刻度线
|
|
// length: 10, // 刻度线长度
|
|
// lineStyle: {
|
|
// color: 'auto',
|
|
// width: 1,
|
|
// },
|
|
// },
|
|
// splitLine: {
|
|
// length: 0, // 刻度线分隔线长度
|
|
// lineStyle: {
|
|
// width: 1,
|
|
// color: '#061740',
|
|
// },
|
|
// },
|
|
// axisLabel: {
|
|
// show: false, // 是否显示刻度标签
|
|
// },
|
|
// pointer: {
|
|
// show: false, // 是否显示指针
|
|
// },
|
|
// axisLine: {
|
|
// lineStyle: {
|
|
// opacity: 0,
|
|
// },
|
|
// },
|
|
// detail: {
|
|
// show: false, // 是否显示仪表盘详情
|
|
// },
|
|
// data: [{
|
|
// value: 0,
|
|
// name: '',
|
|
// }, ],
|
|
// },
|
|
],
|
|
};
|
|
chart = echarts.init(canvas, null, {
|
|
width: width,
|
|
height: height,
|
|
devicePixelRatio: canvasDpr
|
|
})
|
|
console.log(chart);
|
|
// option.series[0].data = that.chartData
|
|
canvas.setChart(chart)
|
|
chart.setOption(option)
|
|
return chart
|
|
},
|
|
// 获取设备详情
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
background-color: #F7FAFE;
|
|
}
|
|
|
|
.page {
|
|
width: 750rpx;
|
|
|
|
.backImg {
|
|
position: fixed;
|
|
top: 0;
|
|
z-index: -1;
|
|
|
|
image {
|
|
width: 750rpx;
|
|
height: 870rpx;
|
|
}
|
|
}
|
|
|
|
.info_cont {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
// justify-content: space-around;
|
|
padding: 38rpx 74rpx 28rpx 74rpx;
|
|
margin: 32rpx auto;
|
|
width: 638rpx;
|
|
height: 256rpx;
|
|
background: #FFFFFF;
|
|
box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.15);
|
|
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
|
.cont:nth-child(3n){
|
|
margin-right: 0rpx;
|
|
}
|
|
.cont{
|
|
margin-right: 100rpx;
|
|
width: 96rpx;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
.cont_top{
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #808080;
|
|
|
|
}
|
|
.cont_bot{
|
|
|
|
margin-top: 4rpx;
|
|
width: 96rpx;
|
|
text-align: center;
|
|
font-weight: 500;
|
|
font-size: 32rpx;
|
|
color: #3D3D3D;
|
|
}
|
|
}
|
|
}
|
|
|
|
.warp_box {
|
|
margin-top: 128rpx;
|
|
|
|
.swiper {
|
|
.swiper-item {
|
|
display: flex;
|
|
justify-content: center;
|
|
transition: height 0.3s ease-in-out;
|
|
|
|
&.active {
|
|
height: 500rpx; // 激活状态的高度
|
|
}
|
|
|
|
&:not(.active) {
|
|
height: 426rpx; // 非激活状态的高度
|
|
}
|
|
|
|
.card_box {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
|
|
.card {
|
|
width: 638rpx;
|
|
|
|
image {
|
|
width: 638rpx;
|
|
height: 428rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.tipbox {
|
|
width: 300rpx;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
// position: relative;
|
|
margin-top: 186rpx;
|
|
margin-left: 56rpx;
|
|
|
|
.tip_cont {
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
align-items: center;
|
|
|
|
image {
|
|
margin-right: 6rpx;
|
|
width: 38rpx;
|
|
height: 38rpx;
|
|
}
|
|
|
|
// display: inline-flexbox;
|
|
flex-wrap: nowrap;
|
|
padding: 8rpx 22rpx;
|
|
background: rgba(61, 61, 61, 0.5);
|
|
box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.15);
|
|
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
|
|
|
font-weight: 500;
|
|
font-size: 32rpx;
|
|
color: #FAFDFD;
|
|
|
|
}
|
|
}
|
|
}
|
|
</style> |