461 lines
12 KiB
Vue
461 lines
12 KiB
Vue
<template>
|
||
<view class="home-box">
|
||
<view class="home-ctn">
|
||
<u-swiper :list="bannerList" border-radius="30" height="294"></u-swiper>
|
||
<view class="home-new-alrm">
|
||
<u-notice-bar mode="horizontal" border-radius="30" type="error" bg-color="#f9f9f9" :list="alrmNotice"
|
||
:is-circular="playState" :play-state="playState?'play':'paused'"></u-notice-bar>
|
||
</view>
|
||
<view class="home-title">
|
||
<view class="home-title-txt">
|
||
今日状况
|
||
</view>
|
||
<view class="home-title-remark">随时随地更新项目概况</view>
|
||
</view>
|
||
<view class="home-status-box menu-box">
|
||
<view class="home-status-item menu-item">
|
||
<view class="home-status-item-name">
|
||
运行状态
|
||
</view>
|
||
<view class="home-status-item-value" :style="{color:pageIndexData.todayAlarmTotal?'#FB3534':'#00AB40'}">
|
||
{{pageIndexData.todayAlarmTotal?'异常':'正常'}}</view>
|
||
<view class="home-status-item-bg">
|
||
<view class="running-state-box" :class="pageIndexData.todayAlarmTotal?'state-red':''">
|
||
<view class="running-state-txt">
|
||
{{pageIndexData.todayAlarmTotal?'异常':'正常'}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="home-status-item menu-item" @click="goUrl('/pages/home/wisdomElectricity/index?deviceState=ONLINE')">
|
||
<view class="home-status-item-name">
|
||
在线设备
|
||
</view>
|
||
<view class="home-status-item-value">{{(pageIndexData && pageIndexData.onlineTotal) || "0"}}</view>
|
||
<view class="home-status-item-bg">
|
||
<image :src="cdnImgUrl + '/home/status1.png'" mode=""></image>
|
||
</view>
|
||
</view>
|
||
<view class="home-status-item menu-item">
|
||
<view class="home-status-item-name">
|
||
项目总数
|
||
</view>
|
||
<view class="home-status-item-value">{{(pageIndexData && pageIndexData.projectTotal) || "0"}}</view>
|
||
<view class="home-status-item-bg">
|
||
<image :src="cdnImgUrl + '/home/status2.png'" mode=""></image>
|
||
</view>
|
||
</view>
|
||
<view class="home-status-item menu-item" @click="goUrl('/pages/home/wisdomElectricity/index')">
|
||
<view class="home-status-item-name">
|
||
设备总数
|
||
</view>
|
||
<view class="home-status-item-value" :style="{color:pageIndexData.deviceTotal?'#00AB40':'#000'}">
|
||
{{(pageIndexData && pageIndexData.deviceTotal) || "0"}}</view>
|
||
<view class="home-status-item-bg">
|
||
<image :src="cdnImgUrl + '/home/status3.png'" mode=""></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="home-title">
|
||
<view class="home-title-txt">
|
||
数智管理
|
||
</view>
|
||
<view class="home-title-remark"></view>
|
||
</view>
|
||
<view class="home-menu-box menu-box">
|
||
<view class="home-menu-item menu-item" v-for="(item,index) in navListArr" :key="index"
|
||
@click="goFuctionUrlFn(item)">
|
||
<view class="home-menu-item-header">
|
||
<view class="home-menu-item-name">
|
||
{{item.name}}
|
||
</view>
|
||
<view class="home-menu-item-right">
|
||
<u-icon name="arrow-right" color="#d4d4d4" size="24"></u-icon>
|
||
</view>
|
||
</view>
|
||
<view class="home-menu-item-bg">
|
||
<image :src="cdnImgUrl + item.imgUrl" mode=""></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import uCharts from '@/components/u-charts/u-charts.js';
|
||
import homeNavList from "@/common/script/homeNavList.js"
|
||
import {
|
||
getLenPx
|
||
} from "@/utils/mapCalculate.js"
|
||
|
||
var _self;
|
||
var canvaColumn = null;
|
||
var canvaLineA = null;
|
||
var canvaArcbar1 = null;
|
||
export default {
|
||
data() {
|
||
return {
|
||
passwordStatus: false,
|
||
bannerList: [{
|
||
name: '111',
|
||
image: 'http://static.drgyen.com/app/hc-app-power/images/home/banner/banner3.jpg',
|
||
}, {
|
||
name: '222',
|
||
image: 'http://static.drgyen.com/app/hc-app-power/images/home/banner/banner4.jpg',
|
||
}],
|
||
alrmNotice: [],
|
||
cWidth: '',
|
||
cHeight: '',
|
||
pixelRatio: 1,
|
||
pageIndexData: {
|
||
projectTotal: 0,
|
||
deviceTotal: 0,
|
||
onlineDeviceTotal: 0,
|
||
todayAlarmTotal: 0,
|
||
alarmTotal: 0
|
||
}, // 首页数据
|
||
arcbarWidth: '', //圆弧进度图，进度条宽度,此设置可使各端宽度一致
|
||
navListArr: [],
|
||
playState: false, // 滚动状态
|
||
lineProgressData: {
|
||
alarmTotalPercent: 0,
|
||
processedPercent: 0,
|
||
unProcessedPercent: 0,
|
||
},
|
||
mapLatitude: "",
|
||
mapLongitude: "",
|
||
mapMarkers: [],
|
||
cdnImgUrl: 'http://static.drgyen.com/app/hc-app-power/images'
|
||
}
|
||
},
|
||
onPullDownRefresh(e) {
|
||
this.getPowerIndexDataFn();
|
||
},
|
||
onLoad() {
|
||
this.cdnImgUrl = this.$config.cdnImgUrl;
|
||
// this.getPasswordStatus();
|
||
this.getUserInfo();
|
||
uni.setNavigationBarTitle({
|
||
title: this.$store.state.app.appConfig.name
|
||
})
|
||
_self = this;
|
||
this.navListArr = homeNavList;
|
||
// uni.upx2px(750) 这是uni-app自带的自适应，以750的尺寸为基准。动态变化
|
||
this.cWidth = uni.upx2px(750);
|
||
this.cHeight = uni.upx2px(260);
|
||
this.arcbarWidth = uni.upx2px(20);
|
||
|
||
this.getPowerIndexDataFn();
|
||
this.getProjectList()
|
||
},
|
||
methods: {
|
||
goUrl(url){
|
||
uni.navigateTo({
|
||
url:url
|
||
})
|
||
},
|
||
getUserInfo() {
|
||
this.$get("/system/user/profile").then((res) => {
|
||
console.log(res, "res");
|
||
if (!res.data) return;
|
||
this.userInfo = res.data;
|
||
this.tenantInfo = res.data.tenant;
|
||
uni.setStorageSync("tenantInfo", res.data.tenant)
|
||
uni.setStorageSync("userInfo", this.userInfo)
|
||
})
|
||
},
|
||
getPasswordStatus() {
|
||
try {
|
||
let passwordStatus = uni.getStorageSync('passwordStatus');
|
||
console.log("passwordStatus", passwordStatus)
|
||
if (passwordStatus === '') {
|
||
this.passwordStatus = true;
|
||
} else {
|
||
this.passwordStatus = passwordStatus;
|
||
}
|
||
} catch (e) {
|
||
console.log("e", e)
|
||
this.passwordStatus = true;
|
||
}
|
||
},
|
||
readPasswordStatus() {
|
||
try {
|
||
uni.setStorageSync('passwordStatus', false);
|
||
this.passwordStatus = false;
|
||
} catch (e) {}
|
||
},
|
||
// 判断是否登录
|
||
checkToken() {
|
||
let userToken = uni.getStorageSync('userToken');
|
||
if (userToken) {
|
||
uni.switchTab({
|
||
url: "../tabBar/home"
|
||
})
|
||
}
|
||
},
|
||
getProjectList() {
|
||
let obj = {
|
||
pageSize: 100,
|
||
pageNum: 1,
|
||
}
|
||
this.$get("/app/project/table", obj).then((res) => {
|
||
if (res.rows && res.rows.length > 0) {
|
||
// 接口返回的当前页数据列表 (数组)
|
||
let curPageData = res.rows;
|
||
if (curPageData.length > 0) {
|
||
this.mapLatitude = curPageData[0].projectLat;
|
||
this.mapLongitude = curPageData[0].projectLng;
|
||
curPageData.forEach((item) => {
|
||
this.mapMarkers.push({
|
||
latitude: item.projectLat,
|
||
longitude: item.projectLng,
|
||
iconPath: 'http://static.drgyen.com/app/hc-app-power/images/project/location-blue.png',
|
||
label: {
|
||
content: item.projectName,
|
||
textAlign: 'right',
|
||
color: '#2e66e7',
|
||
anchorX: -(0.5 * getLenPx(item.projectName, 9)),
|
||
fontSize: 9
|
||
},
|
||
width: 18,
|
||
height: 20
|
||
})
|
||
})
|
||
this.projectList = curPageData || [];
|
||
} else {
|
||
this.mapMarkers = [];
|
||
this.projectList = [];
|
||
}
|
||
} else {
|
||
this.mapMarkers = [];
|
||
this.projectList = [];
|
||
}
|
||
}).catch(() => {
|
||
//联网失败, 结束加载
|
||
this.mapMarkers = [];
|
||
})
|
||
},
|
||
goProjectMapFn() {
|
||
let projectListStr = this.projectList && this.projectList.length > 0 ? JSON.stringify(this.projectList) : "";
|
||
uni.navigateTo({
|
||
url: `/pages/project/projectMap?projectList=${projectListStr}`
|
||
})
|
||
},
|
||
// 获取首页数据
|
||
getPowerIndexDataFn() {
|
||
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("暂无警报");
|
||
}
|
||
}).catch((err) => {
|
||
console.log(err, "errr");
|
||
}).finally(() => {
|
||
uni.stopPullDownRefresh();
|
||
})
|
||
},
|
||
goFuctionUrlFn(item) {
|
||
console.log("item",item.url)
|
||
uni.navigateTo({
|
||
url: item.url
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.home-ctn {
|
||
width: 100%;
|
||
height: 100%;
|
||
// background-color: #F9F9F9;
|
||
padding: 30rpx;
|
||
font-family: Source Han Sans CN;
|
||
|
||
:not(not) {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.home-title {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 20rpx 15rpx;
|
||
|
||
.home-title-txt {
|
||
font-weight: 600;
|
||
font-size: 36rpx;
|
||
}
|
||
|
||
.home-title-remark {
|
||
margin-left: 20rpx;
|
||
font-size: 20rpx;
|
||
color: #999999;
|
||
}
|
||
}
|
||
|
||
.menu-box {
|
||
display: flex;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
padding: 0 15rpx;
|
||
|
||
.menu-item {
|
||
width: 320rpx;
|
||
height: 200rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 20rpx;
|
||
padding: 30rpx 15rpx 15rpx 30rpx;
|
||
margin-bottom: 20rpx;
|
||
position: relative;
|
||
|
||
&:nth-child(2n-1) {
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.home-status-item-name {
|
||
font-weight: 550;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.home-status-item-value {
|
||
font-size: 30rpx;
|
||
font-weight: 700;
|
||
margin-top: 10rpx;
|
||
}
|
||
|
||
.home-status-item-bg {
|
||
position: absolute;
|
||
right: 15rpx;
|
||
bottom: 15rpx;
|
||
width: 180rpx;
|
||
height: 120rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
|
||
.running-state-box {
|
||
width: 120rpx;
|
||
height: 120rpx;
|
||
background: url("http://static.drgyen.com/app/hc-app-power/images/home/state/state-bg.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
position: relative;
|
||
font-size: 28rpx;
|
||
color: #2897FF;
|
||
font-weight: bold;
|
||
|
||
&:after {
|
||
content: '';
|
||
animation: spin 2s linear infinite;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 120rpx;
|
||
height: 120rpx;
|
||
background: url("http://static.drgyen.com/app/hc-app-power/images/home/state/state.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
&.state-red {
|
||
color: #FB3534;
|
||
background: url("http://static.drgyen.com/app/hc-app-power/images/home/state/state-bg-red.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
|
||
&:after {
|
||
background: url("http://static.drgyen.com/app/hc-app-power/images/home/state/state-red.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
}
|
||
}
|
||
|
||
>image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.home-menu-item-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.home-menu-item-name {
|
||
font-weight: 550;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.home-menu-item-right {
|
||
width: 38rpx;
|
||
height: 38rpx;
|
||
background: #EFEFEF;
|
||
border-radius: 50%;
|
||
padding-left: 2rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
}
|
||
|
||
.home-menu-item-bg {
|
||
width: 180rpx;
|
||
height: 120rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
margin-left: 30rpx;
|
||
margin-top: 10rpx;
|
||
|
||
>image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.home-new-alrm {
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
|
||
/* 定义关键帧动画 */
|
||
@keyframes spin {
|
||
0% {
|
||
transform: rotate(0deg);
|
||
}
|
||
|
||
/* 动画开始时的角度 */
|
||
100% {
|
||
transform: rotate(360deg);
|
||
}
|
||
|
||
/* 动画结束时的角度 */
|
||
}
|
||
}
|
||
</style> |