534 lines
12 KiB
Vue
534 lines
12 KiB
Vue
<template>
|
||
<view>
|
||
<view class="personCount">
|
||
<view class="title">
|
||
人员统计
|
||
</view>
|
||
<view class="card-list">
|
||
<view class="card" style="background: rgba(44,119,227,0.8);">
|
||
<view class="person-type">
|
||
楼宇人数
|
||
</view>
|
||
<view class="person-num">
|
||
{{staffData.buildingNum}}
|
||
</view>
|
||
</view>
|
||
<view class="card" style="background: rgba(25,224,39,0.8);">
|
||
<view class="person-type">
|
||
员工人数
|
||
</view>
|
||
<view class="person-num">
|
||
{{staffData.workNum}}
|
||
</view>
|
||
</view>
|
||
<view class="card" style="background: rgba(255,173,41,0.8);">
|
||
<view class="person-type">
|
||
访客人数
|
||
</view>
|
||
<view class="person-num">
|
||
{{staffData.visitorNum}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
<view>
|
||
<canvas canvas-id="personCount" id="personCount" class="charts" @touchend="tap"/>
|
||
</view>
|
||
<view class="border-bottom"></view>
|
||
|
||
<view class="titleBox">
|
||
<view class="title">
|
||
能耗统计
|
||
</view>
|
||
</view>
|
||
<view class="ele-title">今日用电：{{todayElectricity}}度</view>
|
||
<view>
|
||
<canvas canvas-id="todayElectricity" id="todayElectricity" class="charts" @touchend="tap"/>
|
||
</view>
|
||
<view class="ele-contrast">
|
||
<view style="margin-left: 100rpx;font-size: 20rpx;">
|
||
<view>大楼本月用电</view>
|
||
<view style="font-size: 40rpx;margin: 18rpx 0;">{{monthData.powerByMonth}}<text style="font-size: 24rpx;margin-left:10rpx">kw.h</text></view>
|
||
<view v-if="monthData.powerYOYRate[0]=='-'">
|
||
同比 <text style="color: #19E027;">{{monthData.powerYOYRate}} ↓</text>
|
||
</view>
|
||
<view else>
|
||
同比 <text style="color: #E31414;">{{monthData.powerYOYRate}} ↑</text>
|
||
</view>
|
||
</view>
|
||
<view style="color: #494949;font-size: 28rpx;">vs</view>
|
||
<view style="margin-right: 100rpx;font-size: 20rpx;">
|
||
<view>大楼上月用电</view>
|
||
<view style="font-size: 40rpx;margin: 18rpx 0;">{{monthData.powerByLastMonth}}<text style="font-size: 24rpx;margin-left:10rpx">kw.h</text></view>
|
||
<view v-if="monthData.powerQOQRate[0]=='-'">
|
||
环比 <text style="color: #19E027;">{{monthData.powerQOQRate}} ↓</text>
|
||
</view>
|
||
<view else>
|
||
环比 <text style="color: #E31414;">{{monthData.powerQOQRate}} ↑</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="water-title">今日用水：{{todayWater}}吨</view>
|
||
<view>
|
||
<canvas canvas-id="todayWater" id="todayWater" class="charts" @touchend="tap"/>
|
||
</view>
|
||
<view class="water-contrast">
|
||
<view style="margin-left: 100rpx;font-size: 20rpx;">
|
||
<view>大楼本月用水</view>
|
||
<view style="font-size: 40rpx;margin: 18rpx 0;">{{monthData.waterByMonth}}<text style="font-size: 24rpx;margin-left:10rpx">m³</text></view>
|
||
<view v-if="monthData.waterYOYRate[0]=='-'">
|
||
同比 <text style="color: #19E027;">{{monthData.waterYOYRate}} ↓</text>
|
||
</view>
|
||
<view v-else>
|
||
同比 <text style="color: #E31414;">{{monthData.waterYOYRate}} ↑</text>
|
||
</view>
|
||
</view>
|
||
<view style="color: #494949;font-size: 28rpx;">vs</view>
|
||
<view style="margin-right: 100rpx;font-size: 20rpx;">
|
||
<view>大楼上月用水</view>
|
||
<view style="font-size: 40rpx;margin: 18rpx 0;">{{monthData.waterByLastMonth}}<text style="font-size: 24rpx;margin-left:10rpx">m³</text></view>
|
||
<view v-if="monthData.waterQOQRate[0]=='-'">
|
||
环比 <text style="color: #19E027;">{{monthData.waterQOQRate}} ↓</text>
|
||
</view>
|
||
<view v-else>
|
||
环比 <text style="color: #E31414;">{{monthData.waterQOQRate}} ↑</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="border-bottom"></view>
|
||
|
||
<view class="titleBox">
|
||
<view class="title">
|
||
设备统计
|
||
</view>
|
||
</view>
|
||
<view>
|
||
<canvas canvas-id="deviceCount" id="deviceCount" class="charts" @touchend="tap"/>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import uCharts from '@/uni_modules/qiun-data-charts/js_sdk/u-charts/u-charts.js';
|
||
import {
|
||
personnelStatistics, waterByDay, electricityByDay, getPowerOrWaterByMonth, assetStatistics
|
||
} from '@/service/url.js';
|
||
|
||
|
||
|
||
var uChartsInstance = {};
|
||
export default {
|
||
data() {
|
||
return {
|
||
cWidth: 550,
|
||
cHeight: 400,
|
||
staffData:{},
|
||
monthData:{},
|
||
todayElectricity:'',
|
||
todayWater:'',
|
||
};
|
||
},
|
||
onReady() {
|
||
//这里的 750 对应 css .charts 的 width
|
||
this.cWidth = uni.upx2px(750);
|
||
//这里的 500 对应 css .charts 的 height
|
||
this.cHeight = uni.upx2px(500);
|
||
this.getPowerOrWaterByMonth()
|
||
|
||
this.getServerData();
|
||
this.getServerData1();
|
||
this.getServerData2();
|
||
this.getServerData3();
|
||
},
|
||
methods: {
|
||
getPowerOrWaterByMonth (){
|
||
let pram = {
|
||
|
||
}
|
||
this.$http.post(getPowerOrWaterByMonth,pram).then(res => {
|
||
if (res) {
|
||
// console.log(res)
|
||
if(res.code == 200){
|
||
console.log(res.data)
|
||
this.monthData = res.data;
|
||
}
|
||
}
|
||
}).catch(error => {
|
||
console.log(error)
|
||
})
|
||
|
||
},
|
||
|
||
getServerData() {
|
||
let pram = {
|
||
|
||
}
|
||
this.$http.post(personnelStatistics,pram).then(res => {
|
||
if (res) {
|
||
// console.log(res)
|
||
if(res.code == 200){
|
||
console.log(res.data)
|
||
this.staffData = res.data;
|
||
let data = {
|
||
series: [
|
||
{
|
||
data: [{"name":"到岗人数","value":res.data.dutyNum,"labelText":"到岗:"+res.data.dutyNum+"个"},{"name":"未到岗人数","value":res.data.noDutyNum,"labelText":"未到岗:"+res.data.noDutyNum+"个"}]
|
||
}
|
||
]
|
||
};
|
||
this.drawCharts('personCount', data);
|
||
}
|
||
}
|
||
}).catch(error => {
|
||
console.log(error)
|
||
})
|
||
},
|
||
drawCharts(id,data){
|
||
console.log(data)
|
||
const ctx = uni.createCanvasContext(id, this);
|
||
uChartsInstance[id] = new uCharts({
|
||
type: "ring",
|
||
context: ctx,
|
||
width: this.cWidth,
|
||
height: this.cHeight,
|
||
series: data.series,
|
||
animation: true,
|
||
rotate: false,
|
||
rotateLock: false,
|
||
// background: "#FFFFFF",
|
||
color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
|
||
padding: [15,15,15,15],
|
||
dataLabel: true,
|
||
enableScroll: false,
|
||
legend: {
|
||
show: false,
|
||
position: "right",
|
||
lineHeight: 25
|
||
},
|
||
title: {
|
||
name: this.staffData.dutyRate,
|
||
fontSize: 24,
|
||
color: "#494949"
|
||
},
|
||
subtitle: {
|
||
name: "到岗率",
|
||
fontSize: 12,
|
||
color: "#494949"
|
||
},
|
||
extra: {
|
||
ring: {
|
||
ringWidth: 40,
|
||
activeOpacity: 0.5,
|
||
activeRadius: 10,
|
||
offsetAngle: 0,
|
||
labelWidth: 1,
|
||
borderColor: "#FFFFFF",
|
||
linearType: "custom"
|
||
}
|
||
}
|
||
});
|
||
},
|
||
|
||
|
||
getServerData1() {
|
||
let pram = {
|
||
|
||
}
|
||
this.$http.post(electricityByDay,pram).then(res => {
|
||
if (res) {
|
||
// console.log(res)
|
||
if(res.code == 200){
|
||
console.log(res.data)
|
||
this.todayElectricity = res.data.totalValue;
|
||
// this.staffData = res.data;
|
||
let data = {
|
||
categories: res.data.nameList,
|
||
series: [
|
||
{
|
||
name: "用电量",
|
||
data: res.data.valueList
|
||
},
|
||
]
|
||
};
|
||
this.drawCharts1('todayElectricity', data);
|
||
}
|
||
}
|
||
}).catch(error => {
|
||
console.log(error)
|
||
})
|
||
},
|
||
drawCharts1(id,data){
|
||
const ctx = uni.createCanvasContext(id, this);
|
||
uChartsInstance[id] = new uCharts({
|
||
type: "area",
|
||
context: ctx,
|
||
width: this.cWidth,
|
||
height: this.cHeight,
|
||
categories: data.categories,
|
||
series: data.series,
|
||
animation: true,
|
||
// background: "#FFFFFF",
|
||
color: ["#333FFF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
|
||
padding: [15,15,0,15],
|
||
enableScroll: false,
|
||
legend: {
|
||
show:false
|
||
},
|
||
xAxis: {
|
||
disableGrid: true
|
||
},
|
||
yAxis: {
|
||
gridType: "dash",
|
||
dashLength: 2
|
||
},
|
||
extra: {
|
||
area: {
|
||
type: "curve",
|
||
opacity: 0.2,
|
||
addLine: true,
|
||
width: 2,
|
||
gradient: true,
|
||
activeType: "hollow"
|
||
}
|
||
}
|
||
});
|
||
},
|
||
|
||
getServerData2() {
|
||
let pram = {
|
||
|
||
}
|
||
this.$http.post(waterByDay,pram).then(res => {
|
||
if (res) {
|
||
// console.log(res)
|
||
if(res.code == 200){
|
||
console.log(res.data)
|
||
this.todayWater = res.data.totalValue;
|
||
// this.staffData = res.data;
|
||
let data = {
|
||
categories: res.data.nameList,
|
||
series: [
|
||
{
|
||
name: "用水量",
|
||
data: res.data.valueList
|
||
},
|
||
]
|
||
};
|
||
this.drawCharts2('todayWater', data);
|
||
}
|
||
}
|
||
}).catch(error => {
|
||
console.log(error)
|
||
})
|
||
},
|
||
drawCharts2(id,data){
|
||
const ctx = uni.createCanvasContext(id, this);
|
||
uChartsInstance[id] = new uCharts({
|
||
type: "area",
|
||
context: ctx,
|
||
width: this.cWidth,
|
||
height: this.cHeight,
|
||
categories: data.categories,
|
||
series: data.series,
|
||
animation: true,
|
||
// background: "#FFFFFF",
|
||
color: ["#33FFFF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
|
||
padding: [15,15,0,15],
|
||
enableScroll: false,
|
||
// enableScroll: true,
|
||
legend: {
|
||
show:false
|
||
},
|
||
xAxis: {
|
||
disableGrid: true
|
||
},
|
||
yAxis: {
|
||
gridType: "dash",
|
||
dashLength: 2
|
||
},
|
||
extra: {
|
||
area: {
|
||
type: "curve",
|
||
opacity: 0.2,
|
||
addLine: true,
|
||
width: 2,
|
||
gradient: true,
|
||
activeType: "hollow"
|
||
}
|
||
}
|
||
});
|
||
},
|
||
|
||
getServerData3() {
|
||
let pram = {
|
||
|
||
}
|
||
this.$http.post(assetStatistics,pram).then(res => {
|
||
if (res) {
|
||
// console.log(res)
|
||
if(res.code == 200){
|
||
console.log(res.data)
|
||
let data = {
|
||
series: [
|
||
{
|
||
data: [{"name":"新增","value":res.data.addNum},{"name":"在用","value":res.data.usedNum},{"name":"报废","value":res.data.paperNum}]
|
||
}
|
||
]
|
||
};
|
||
this.drawCharts3('deviceCount', data);
|
||
}
|
||
}
|
||
}).catch(error => {
|
||
console.log(error)
|
||
})
|
||
},
|
||
drawCharts3(id,data){
|
||
const ctx = uni.createCanvasContext(id, this);
|
||
uChartsInstance[id] = new uCharts({
|
||
type: "ring",
|
||
context: ctx,
|
||
width: this.cWidth,
|
||
height: this.cHeight,
|
||
series: data.series,
|
||
animation: true,
|
||
rotate: false,
|
||
rotateLock: false,
|
||
// background: "#FFFFFF",
|
||
color: ["#47E652","#FFBD54","#5692E9","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
|
||
padding: [5,5,5,5],
|
||
dataLabel: true,
|
||
enableScroll: false,
|
||
legend: {
|
||
show: true,
|
||
position: "bottom",
|
||
lineHeight: 25
|
||
},
|
||
extra: {
|
||
ring: {
|
||
ringWidth: 35,
|
||
activeOpacity: 0.5,
|
||
activeRadius: 10,
|
||
offsetAngle: 0,
|
||
labelWidth: 15,
|
||
border: false,
|
||
borderWidth: 3,
|
||
borderColor: "#FFFFFF"
|
||
}
|
||
}
|
||
});
|
||
},
|
||
|
||
|
||
|
||
|
||
tap(e){
|
||
uChartsInstance[e.target.id].touchLegend(e);
|
||
uChartsInstance[e.target.id].showToolTip(e);
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.personCount{
|
||
width: 90%;
|
||
margin:40rpx;
|
||
.title{
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
color: #494949;
|
||
line-height: 33rpx;
|
||
font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
|
||
}
|
||
.card-list{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
// margin: 0 auto;
|
||
width: 100%;
|
||
margin-top: 24rpx;
|
||
}
|
||
.card{
|
||
width: 180rpx;
|
||
height: 90rpx;
|
||
border-radius: 12rpx;
|
||
padding: 16rpx;
|
||
opacity: 1;
|
||
color: #fff;
|
||
|
||
.person-type{
|
||
font-size: 24rpx;
|
||
}
|
||
.person-num{
|
||
font-size: 40rpx;
|
||
margin-top: 10rpx;
|
||
}
|
||
}
|
||
|
||
}
|
||
.ele-title{
|
||
font-size: 20rpx;
|
||
color: #494949;
|
||
margin-left: 80rpx;
|
||
// float: right;
|
||
// margin-right: 40rpx;
|
||
// padding-bottom: 20rpx;
|
||
// height: 40rpx;
|
||
}
|
||
|
||
.charts{
|
||
width: 750rpx;
|
||
height: 500rpx;
|
||
}
|
||
.border-bottom{
|
||
width: 90%;
|
||
margin: 0 auto;
|
||
border-bottom: 1px solid rgba(73,73,73,0.2);
|
||
}
|
||
.titleBox{
|
||
width: 90%;
|
||
margin:40rpx;
|
||
// border-bottom: 1px solid #494949;
|
||
.title{
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
color: #494949;
|
||
line-height: 33rpx;
|
||
font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
|
||
}
|
||
}
|
||
.ele-contrast{
|
||
width: 90%;
|
||
height: 180rpx;
|
||
margin: 40rpx auto;
|
||
border: 1px solid #EAEBF0;
|
||
border-radius: 4rpx 4rpx 4rpx 4rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
box-shadow: 0px 4px 12px 0px rgba(73,73,73,0.05);
|
||
}
|
||
|
||
.water-title{
|
||
font-size: 20rpx;
|
||
color: #494949;
|
||
margin-left: 80rpx;
|
||
}
|
||
.water-contrast{
|
||
width: 90%;
|
||
height: 180rpx;
|
||
margin: 40rpx auto;
|
||
border: 1px solid #EAEBF0;
|
||
border-radius: 4rpx 4rpx 4rpx 4rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
box-shadow: 0px 4px 12px 0px rgba(73,73,73,0.05);
|
||
margin-bottom: 50rpx;
|
||
}
|
||
|
||
|
||
|
||
</style>
|