441 lines
14 KiB
Vue
441 lines
14 KiB
Vue
<style lang="scss" scoped>
|
||
.home-ctn{
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: #F9F9F9;
|
||
padding: 30rpx;
|
||
:not(not) {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.home-nav{
|
||
background-color: #fff;
|
||
border-radius: 16rpx;
|
||
box-shadow: $box-shadow;
|
||
// height: 400rpx;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
padding: 30rpx;
|
||
&-box{
|
||
width: 25%;
|
||
text-align: center;
|
||
margin-bottom: 20rpx;
|
||
&-icon{
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
// padding: 16rpx;
|
||
// background: linear-gradient(-55deg, #52AA52, #76D296);
|
||
// box-shadow: 0px 9px 15px 0px rgba(87, 175, 91, 0.3);
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #fff;
|
||
margin: 0 auto;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
}
|
||
}
|
||
.home-statistical{
|
||
border-radius: 16rpx;
|
||
width: 100%;
|
||
background-color: #fff;
|
||
margin-top: 30rpx;
|
||
box-shadow: $box-shadow;
|
||
padding: 20rpx 0rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
&-box{
|
||
width: 24%;
|
||
text-align: center;
|
||
&-title{
|
||
padding-bottom: 10rpx;
|
||
}
|
||
&-line{
|
||
height: 40rpx;
|
||
width: 2rpx;
|
||
background-color: #ddd;
|
||
margin-top: 20rpx;
|
||
}
|
||
&-value{
|
||
color: #1492FF;
|
||
font-size: 36rpx;
|
||
}
|
||
}
|
||
}
|
||
.home-new-alrm{
|
||
margin-top: 20rpx;
|
||
}
|
||
.home-progress-bar{
|
||
// margin-top: 40rpx;
|
||
width: 100%;
|
||
&-box{
|
||
display: flex;
|
||
width: 100%;
|
||
margin-top: 20rpx;
|
||
&-title{
|
||
width: 120rpx;
|
||
}
|
||
&-progress{
|
||
width: calc(100% - 120rpx) ;
|
||
}
|
||
}
|
||
}
|
||
.canvas-processed{
|
||
width: 100%;
|
||
height: 260rpx;
|
||
margin: 10rpx 0;
|
||
}
|
||
}
|
||
.pwd-style {
|
||
width: 100%;
|
||
padding: 20upx 30upx;
|
||
}
|
||
</style>
|
||
<template>
|
||
<view class="">
|
||
<headerBg></headerBg>
|
||
<view class="home-ctn">
|
||
<view class="home-nav">
|
||
<view class="home-nav-box" v-for="(item,index) in navListArr" :key="index" @click="goFuctionUrlFn(item)">
|
||
<!-- <image src="../../static/images/car.png" mode=""></image> -->
|
||
<!-- #ifdef MP-WEIXIN -->
|
||
<view class="home-nav-box-icon" :style="{background:item.background,boxShadow:item.boxShadow}">
|
||
<!-- #endif -->
|
||
<!-- #ifndef MP-WEIXIN -->
|
||
<view class="home-nav-box-icon" :style="{backgroundColor:item.background}">
|
||
<!-- #endif -->
|
||
<!-- <view class="home-nav-box-icon" :style="{background:item.background,boxShadow:item.boxShadow}"> -->
|
||
<tui-icon :name="item.icon" size="50" color="#fff"></tui-icon>
|
||
</view>
|
||
<view class="home-nav-box-text">{{item.name}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="home-statistical" v-if="pageIndexData">
|
||
<view class="home-statistical-box">
|
||
<view class="home-statistical-box-title">项目总数</view>
|
||
<view class="home-statistical-box-value">{{(pageIndexData && pageIndexData.projectTotal) || "-" }}</view>
|
||
</view>
|
||
<view class="home-statistical-box-line"></view>
|
||
<view class="home-statistical-box">
|
||
<view class="home-statistical-box-title">设备总数</view>
|
||
<view class="home-statistical-box-value" style="color: #8CDEAF;">{{(pageIndexData && pageIndexData.deviceTotal + '') || "-"}}</view>
|
||
</view>
|
||
<view class="home-statistical-box-line"></view>
|
||
<view class="home-statistical-box">
|
||
<view class="home-statistical-box-title">在线设备</view>
|
||
<view class="home-statistical-box-value" style="color: #8CDEAF;">{{(pageIndexData && pageIndexData.onlineTotal + '') || "-"}}</view>
|
||
</view>
|
||
<view class="home-statistical-box-line"></view>
|
||
<view class="home-statistical-box">
|
||
<view class="home-statistical-box-title">今日报警数</view>
|
||
<view class="home-statistical-box-value" style="color: #FF7976;">{{(pageIndexData && pageIndexData.todayAlarmTotal + '') || "-"}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="home-new-alrm">
|
||
<!-- <u-tag size="mini" class="mr20" style="width:140rpx;" text="最新报警" type="error" mode="plain" /> -->
|
||
<u-notice-bar mode="horizontal" type="error" :list="alrmNotice" :is-circular="playState" :play-state="playState?'play':'paused'"></u-notice-bar>
|
||
<!-- <text>A公司 福州鼓楼区洪山镇 照明于2020-11-17 8:46:55 发生异常分闸，请及时处理</text> -->
|
||
</view>
|
||
<image v-if="canvasImg" :src="canvasImg" class="canvas-processed"></image>
|
||
<canvas v-else canvas-id="dealWithChartsId" class="canvas-processed" id="canvasArcbarID"></canvas>
|
||
<view class="home-progress-bar" >
|
||
<view class="home-progress-bar-box">
|
||
<view class="home-progress-bar-box-title ">报警总数</view>
|
||
<u-line-progress class="home-progress-bar-box-progress ml20" active-color="#F88F30" :striped="true" :striped-active="true" :textValue="pageIndexData.alarmTotal || '0'" :percent="lineProgressData.alarmTotalPercent || '0'"></u-line-progress>
|
||
</view>
|
||
<view class="home-progress-bar-box">
|
||
<view class="home-progress-bar-box-title ">已修理</view>
|
||
<u-line-progress class="home-progress-bar-box-progress ml20" active-color="#2979ff" :striped="true" :striped-active="true" :textValue="pageIndexData.processed" :percent="lineProgressData.processedPercent"></u-line-progress>
|
||
</view>
|
||
<view class="home-progress-bar-box">
|
||
<view class="home-progress-bar-box-title ">未处理</view>
|
||
<u-line-progress class="home-progress-bar-box-progress ml20" active-color="#D41E00" :striped="true" :striped-active="true" :textValue="pageIndexData.unProcessed" :percent="lineProgressData.unProcessedPercent"></u-line-progress>
|
||
</view>
|
||
<view class="home-progress-bar-box" v-for="(item,index) in pageIndexData.alarmModelList" :key="index">
|
||
<view class="home-progress-bar-box-title ">{{item.modelName || "-"}}</view>
|
||
<u-line-progress class="home-progress-bar-box-progress ml20" active-color="#2979ff" :striped="true" :striped-active="true" :textValue="item.modelTotal" :percent="(item.modelTotal / (pageIndexData.unProcessed + pageIndexData.processed))*100"></u-line-progress>
|
||
</view>
|
||
<!-- <view class="home-progress-bar-box">
|
||
<view class="home-progress-bar-box-title ">电气火灾</view>
|
||
<u-line-progress class="home-progress-bar-box-progress pl20" active-color="#2979ff" :striped="true" :striped-active="true" :percent="60"></u-line-progress>
|
||
</view>
|
||
<view class="home-progress-bar-box">
|
||
<view class="home-progress-bar-box-title ">水位水压</view>
|
||
<u-line-progress class="home-progress-bar-box-progress pl20" active-color="#D41E00" :striped="true" :striped-active="true" :percent="89"></u-line-progress>
|
||
</view>
|
||
<view class="home-progress-bar-box">
|
||
<view class="home-progress-bar-box-title ">烟雾</view>
|
||
<u-line-progress class="home-progress-bar-box-progress pl20" active-color="#D41E00" :striped="true" :striped-active="true" :percent="180"></u-line-progress>
|
||
</view> -->
|
||
</view>
|
||
</view>
|
||
<u-modal v-model="show" show-cancel-button @confirm="addDevice">
|
||
<view class="slot-content pwd-style">
|
||
<u-input v-model="password" type="password" placeholder="请输入设备密码" />
|
||
</view>
|
||
</u-modal>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import uCharts from '@/components/u-charts/u-charts.js';
|
||
import headerBg from "@/components/headerBg/headerBg.vue";
|
||
|
||
var _self;
|
||
var canvaColumn = null;
|
||
var canvaLineA = null;
|
||
var canvaArcbar1 = null;
|
||
export default {
|
||
data() {
|
||
return {
|
||
alrmNotice: [],
|
||
cWidth:'',
|
||
cHeight:'',
|
||
pixelRatio:1,
|
||
pageIndexData:null, // 首页数据
|
||
arcbarWidth:'',//圆弧进度图，进度条宽度,此设置可使各端宽度一致
|
||
navListArr:[],
|
||
playState:false, // 滚动状态
|
||
lineProgressData:null,
|
||
tabbar:[
|
||
{
|
||
"pagePath": "/pages/tabBar/home",
|
||
"text": "首页",
|
||
"iconPath": "/static/images/toolbar/home.png",
|
||
"selectedIconPath": "/static/images/toolbar/act-home.png"
|
||
},{
|
||
"pagePath": "/pages/tabBar/project",
|
||
"text": "项目",
|
||
"iconPath": "/static/images/toolbar/project.png",
|
||
"selectedIconPath": "/static/images/toolbar/act-project.png"
|
||
},{
|
||
"pagePath": "/pages/tabBar/alarm",
|
||
"text": "报警",
|
||
"iconPath": "/static/images/toolbar/alarm.png",
|
||
"selectedIconPath": "/static/images/toolbar/act-alarm.png"
|
||
},{
|
||
"pagePath": "/pages/tabBar/my",
|
||
"text": "我的",
|
||
"iconPath": "/static/images/toolbar/my.png",
|
||
"selectedIconPath": "/static/images/toolbar/act-my.png"
|
||
}],
|
||
show: false,
|
||
password: '',
|
||
deviceKey: '',
|
||
canvasImg: null
|
||
}
|
||
},
|
||
components:{
|
||
headerBg
|
||
},
|
||
onPullDownRefresh(e){
|
||
this.getPowerIndexDataFn();
|
||
},
|
||
created() {
|
||
_self = this;
|
||
this.navListArr = [
|
||
{
|
||
name:"智慧用电",
|
||
icon:"tubiaoshangchuanmoban",
|
||
url:"../home/wisdomElectricity/index",
|
||
// #ifdef MP-WEIXIN
|
||
background:"linear-gradient(-55deg, #52AA52, #76D296);",
|
||
// #endif
|
||
// #ifndef MP-WEIXIN
|
||
background:"#76D296",
|
||
// #endif
|
||
boxShadow: "0px 9px 15px 0px rgba(87, 175, 91, 0.3);"
|
||
},
|
||
{
|
||
name:"扫码",
|
||
icon:"saoma",
|
||
url:"none",
|
||
method: "scanCode",
|
||
// #ifdef MP-WEIXIN
|
||
background:"linear-gradient(-55deg, #0292F6, #5FB8FD);",
|
||
// #endif
|
||
// #ifndef MP-WEIXIN
|
||
background:"#5FB8FD",
|
||
// #endif
|
||
boxShadow: "0px 9px 15px 0px rgba(3, 183, 250, 0.3);"
|
||
}
|
||
];
|
||
console.log('this.navListArr: ', this.navListArr)
|
||
// uni.upx2px(750) 这是uni-app自带的自适应，以750的尺寸为基准。动态变化
|
||
this.cWidth=uni.upx2px(750);
|
||
this.cHeight=uni.upx2px(260);
|
||
this.arcbarWidth=uni.upx2px(20);
|
||
this.getPowerIndexDataFn();
|
||
},
|
||
methods: {
|
||
// 获取首页数据
|
||
getPowerIndexDataFn(){
|
||
/****** 模拟数据 ***********/
|
||
// this.pageIndexData = {
|
||
// projectTotal:10,
|
||
// deviceTotal:20,
|
||
// onlineDeviceTotal:30,
|
||
// todayAlarmTotal:40,
|
||
// alarmTotal:100
|
||
// }
|
||
// this.alrmNotice = ["福建福州中德润德润物联中空开于2021年2月1日14:13:30发生报警"];
|
||
// this.playState = true;
|
||
// this.drawChartsFn(parseFloat(30) / 100);
|
||
// this.lineProgressData = {
|
||
// alarmTotalPercent:100,
|
||
// processedPercent:(70 / 100) * 100,
|
||
// unProcessedPercent:(30 / 100) * 100,
|
||
// }
|
||
// return;
|
||
/****** 模拟数据---end ***********/
|
||
this.$get('/app/index').then((res)=>{
|
||
console.log(res,"rdddd");
|
||
if(res.code != 200) return;
|
||
this.pageIndexData = res.data;
|
||
let {tenantAlarmRecordVo,processedRate,alarmTotal,processed,unProcessed} = this.pageIndexData;
|
||
|
||
// 最新报警
|
||
if(!!tenantAlarmRecordVo){
|
||
let {projectName,spaceName,projectAddress,deviceName,alarmTime,typeName} = tenantAlarmRecordVo;
|
||
let alarmStr = `${projectAddress || "-"} ${(projectName + spaceName) || "-"}中${deviceName || "-"} 于${alarmTime || "-"}发生${typeName || "-"}`
|
||
this.alrmNotice.push(alarmStr);
|
||
this.playState = true;
|
||
} else{
|
||
this.alrmNotice.push("暂无警报");
|
||
}
|
||
// 处理率
|
||
this.drawChartsFn(parseFloat(processedRate) / 100);
|
||
// 百分比数据
|
||
this.lineProgressData = {
|
||
alarmTotalPercent:alarmTotal!=0?100:0,
|
||
processedPercent:(processed / alarmTotal) * 100,
|
||
unProcessedPercent:(unProcessed / alarmTotal) * 100,
|
||
// zhyd:(zhyd / alarmTotal) * 100,
|
||
// dqhz:(dqhz / alarmTotal) * 100,
|
||
// swsy:(processed / alarmTotal) * 100,
|
||
// yw:(yw / alarmTotal) * 100
|
||
};
|
||
}).catch((err)=>{
|
||
console.log(err,"errr");
|
||
}).finally(()=>{
|
||
uni.stopPullDownRefresh();
|
||
})
|
||
},
|
||
drawChartsFn(value){
|
||
console.log(value,"value");
|
||
let obj = {
|
||
color: "#1890ff",
|
||
data: value,
|
||
index: 0,
|
||
legendShape: "circle",
|
||
name: "已处理率",
|
||
pointShape: "circle",
|
||
show: true,
|
||
type: "arcbar"
|
||
}
|
||
let Arcbar3 = {
|
||
series:[obj]
|
||
}
|
||
// 找到id为dealWithChartsId的块
|
||
_self.showArcbar("dealWithChartsId", Arcbar3);
|
||
},
|
||
goFuctionUrlFn(item){
|
||
if (item.url !== 'none') {
|
||
uni.navigateTo({
|
||
url:item.url
|
||
})
|
||
} else {
|
||
uni[item.method]({
|
||
success(res) {
|
||
if (res.errMsg === 'scanCode:ok') {
|
||
_self.show = true;
|
||
_self.deviceKey = res.result;
|
||
}
|
||
}
|
||
})
|
||
}
|
||
},
|
||
addDevice () {
|
||
let data = {
|
||
deviceKey: this.deviceKey,
|
||
devicePassword: this.password
|
||
};
|
||
this.$post('/app/device/binding-device', data).then((res) => {
|
||
console.log(res)
|
||
if (res.code === 200) {
|
||
this.$u.toast('添加成功', 3000);
|
||
} else {
|
||
this.$u.toast(res.msg, 3000);
|
||
}
|
||
}).catch((err) => {
|
||
console.log(err);
|
||
})
|
||
},
|
||
toJSON () {},
|
||
// 展示图标的函数 接收参数，一个块的id,一个数据
|
||
showArcbar(canvasId, chartData) {
|
||
canvaLineA = new uCharts({
|
||
$this:_self,
|
||
canvasId: canvasId,
|
||
type: 'arcbar',
|
||
fontSize:11,
|
||
legend:false,
|
||
title: {
|
||
name: Math.round(chartData.series[0].data*100)+'%',
|
||
color: chartData.series[0].color,
|
||
fontSize: 25*_self.pixelRatio
|
||
},
|
||
subtitle: {
|
||
name: chartData.series[0].name,
|
||
color: '#666666',
|
||
fontSize: 15*_self.pixelRatio
|
||
},
|
||
extra: {
|
||
arcbar:{
|
||
type:'circle',//整圆类型进度条图
|
||
width: _self.arcbarWidth*_self.pixelRatio,//圆弧的宽度
|
||
startAngle:0.5//整圆类型只需配置起始角度即可
|
||
}
|
||
},
|
||
background:'#FFFFFF',
|
||
pixelRatio:_self.pixelRatio,
|
||
series: chartData.series,
|
||
animation: true,
|
||
width: _self.cWidth*_self.pixelRatio,
|
||
height: _self.cHeight*_self.pixelRatio,
|
||
dataLabel: true,
|
||
});
|
||
canvaLineA.addEventListener('renderComplete', () => {//监控图表渲染完成
|
||
setTimeout(() => {
|
||
uni.canvasToTempFilePath({
|
||
width: 345,
|
||
height: 130,
|
||
x: 0,
|
||
y: 0,
|
||
canvasId: 'dealWithChartsId',
|
||
success: function(res) {
|
||
// 在H5平台下，tempFilePath 为 base64
|
||
console.log(res.tempFilePath)
|
||
_self.canvasImg = res.tempFilePath;
|
||
},
|
||
fail: function(err) {
|
||
console.log(err)
|
||
}
|
||
}, _self);
|
||
}, 100);
|
||
});
|
||
},
|
||
// 点击图表显示的内容
|
||
touchLineA(e) {
|
||
// 使用声明的变量canvaLineA
|
||
canvaArcbar1.showToolTip(e, {
|
||
format: function(item, category) {
|
||
return category + ' ' + item.name + ':' + item.data
|
||
}
|
||
});
|
||
}
|
||
}
|
||
}
|
||
</script>
|