You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
199 lines
4.2 KiB
199 lines
4.2 KiB
<template>
|
|
<view class="container">
|
|
<view class="carousel-section">
|
|
<swiper class="carousel" indicator-dots circular autoplay interval="3000">
|
|
<swiper-item v-for="(item, index) in carouselList" :key="index" class="carousel-item"><image :src="item.src" /></swiper-item>
|
|
</swiper>
|
|
</view>
|
|
<view class="qiun-columns">
|
|
<view class="qiun-bg-white qiun-title-bar qiun-common-mt"><view class="qiun-title-dot-light">设备概览</view></view>
|
|
<view class="qiun-charts"><canvas canvas-id="canvasRing" id="canvasRing" class="charts" @touchstart="touchRing"></canvas></view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { statisticsDevice } from '@/api/device.js';
|
|
import uCharts from '@/js_sdk/u-charts/u-charts/u-charts.js';
|
|
var canvaRing = null;
|
|
var _self;
|
|
export default {
|
|
data() {
|
|
return {
|
|
cWidth: '',
|
|
cHeight: '',
|
|
pixelRatio: 1,
|
|
carouselList: [
|
|
{
|
|
src: '/static/banner1.png'
|
|
},
|
|
{
|
|
src: '/static/banner2.png'
|
|
},
|
|
{
|
|
src: '/static/banner1.png'
|
|
}
|
|
],
|
|
chartData:{
|
|
title: {name:'设备总量',value:0},
|
|
series: [{ name: '在线', data: 0 }, { name: '离线', data: 0 }, { name: '未激活', data: 0 }]
|
|
}
|
|
};
|
|
},
|
|
onLoad() {
|
|
_self = this;
|
|
this.cWidth = uni.upx2px(750);
|
|
this.cHeight = uni.upx2px(500);
|
|
this.fetchStatisticsDevice()
|
|
this.showRing('canvasRing', this.chartData);
|
|
},
|
|
methods: {
|
|
fetchStatisticsDevice() {
|
|
statisticsDevice().then(response => {
|
|
console.log(response.data);
|
|
this.chartData.series[0].data = response.data.online
|
|
this.chartData.series[1].data = response.data.offline
|
|
this.chartData.series[2].data = response.data.total - response.data.active
|
|
this.chartData.title.value = response.data.total
|
|
this.showRing('canvasRing', this.chartData);
|
|
});
|
|
},
|
|
showRing(canvasId, chartData) {
|
|
canvaRing = new uCharts({
|
|
$this: _self,
|
|
canvasId: canvasId,
|
|
type: 'ring',
|
|
fontSize: 11,
|
|
padding: [5, 5, 5, 5],
|
|
legend: {
|
|
show: true,
|
|
position: 'right',
|
|
float: 'center',
|
|
itemGap: 10,
|
|
padding: 5,
|
|
lineHeight: 26,
|
|
margin: 5,
|
|
//backgroundColor:'rgba(41,198,90,0.2)',
|
|
//borderColor :'rgba(41,198,90,0.5)',
|
|
borderWidth: 1
|
|
},
|
|
background: '#FFFFFF',
|
|
pixelRatio: _self.pixelRatio,
|
|
series: chartData.series,
|
|
animation: false,
|
|
width: _self.cWidth * _self.pixelRatio,
|
|
height: _self.cHeight * _self.pixelRatio,
|
|
disablePieStroke: true,
|
|
dataLabel: false,
|
|
subtitle: {
|
|
name: chartData.title.value + '',
|
|
color: '#7cb5ec',
|
|
fontSize: 25 * _self.pixelRatio
|
|
},
|
|
title: {
|
|
name: chartData.title.name,
|
|
color: '#666666',
|
|
fontSize: 15 * _self.pixelRatio
|
|
},
|
|
extra: {
|
|
pie: {
|
|
offsetAngle: -105,
|
|
ringWidth: 40 * _self.pixelRatio,
|
|
labelWidth: 15
|
|
}
|
|
}
|
|
});
|
|
},
|
|
touchRing(e) {
|
|
canvaRing.touchLegend(e, {
|
|
animation: false
|
|
});
|
|
canvaRing.showToolTip(e, {
|
|
format: function(item) {
|
|
return item.name + ':' + item.data;
|
|
}
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
.cate-section {
|
|
position: relative;
|
|
z-index: 5;
|
|
margin-top: 10upx;
|
|
}
|
|
.carousel-section {
|
|
padding: 0;
|
|
.carousel {
|
|
.carousel-item {
|
|
padding: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.carousel-section {
|
|
position: relative;
|
|
padding-top: 10px;
|
|
}
|
|
.carousel {
|
|
width: 100%;
|
|
height: 350upx;
|
|
|
|
.carousel-item {
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 0 28upx;
|
|
overflow: hidden;
|
|
}
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 10upx;
|
|
}
|
|
}
|
|
.hover {
|
|
background-color: #eee;
|
|
}
|
|
.cate-section {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
padding: 30upx 22upx;
|
|
background: #fff;
|
|
.cate-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
font-size: $font-sm + 2upx;
|
|
color: $font-color-dark;
|
|
}
|
|
/* 原图标颜色太深,不想改图了,所以加了透明度 */
|
|
image {
|
|
width: 88upx;
|
|
height: 88upx;
|
|
margin-bottom: 14upx;
|
|
border-radius: 50%;
|
|
opacity: 0.7;
|
|
box-shadow: 4upx 4upx 20upx rgba(250, 67, 106, 0.3);
|
|
}
|
|
}
|
|
</style>
|
|
<style>
|
|
/*样式的width和height一定要与定义的cWidth和cHeight相对应*/
|
|
.qiun-charts {
|
|
width: 750upx;
|
|
height: 500upx;
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
.charts {
|
|
width: 750upx;
|
|
height: 500upx;
|
|
background-color: #ffffff;
|
|
}
|
|
</style>
|
|
|