608 lines
14 KiB
Vue
Raw Normal View History

<template>
<view class="fullHeight">
<levitatedsphere :x="100" :y="80"></levitatedsphere>
<headers :showBack="true" class="">
<view class="headerName">
电箱管理
</view>
</headers>
<view class="menuBox">
<view class="menuItem" @click="changeMenu(0)" :class="tabIndex==0?'active':''">
数据总览
</view>
<view class="menuItem" @click="changeMenu(1)" :class="tabIndex==1?'active':''">
操作记录
</view>
<view class="menuItem" @click="changeMenu(2)" :class="tabIndex==2?'active':''">
报警列表
</view>
</view>
<view class="" v-if="tabIndex==0">
<view class="blockBox">
<!-- <view class="aqiBox">
空气质量 <text class="txt">{{aqiData.analysisData}}</text><text class="txt">{{aqiData.analysisType}}</text>
</view> -->
<view class="numContent">
<view class="numBox numBox1">
<view class="num">
{{environmentDevList.length}}
</view>
<view class="label">
已有设备数量
</view>
</view>
<view class="numBox">
<view class="num">
{{onlineDevNum}}
</view>
<view class="label">
正常工作设备数量
</view>
</view>
</view>
</view>
<view class="blockBox">
<view class="selectContent" style="margin: 0 0 20rpx;">
<picker mode="selector" :range="environmentDevList" @change="changeDev" range-key="devName" :value="devIndex">
<view class="selectVideoBox">
<text class="videoName" v-if="environmentDevList.length>0">{{environmentDevList[devIndex].devName}}</text>
<uni-icons2 class="arrow" type="arrowdown" size="15"></uni-icons2>
</view>
</picker>
</view>
<!-- <view class="tipsBox">
<image src="/static/tips.png" class="alarmIcon"></image>
<text>PM10已超标请开启喷淋装置和防尘措施</text>
</view> -->
<view class="realTimeBox">
<view class="item">
<view class="itemInner">
<view class="num">
{{realTimeData.voltageA}} V
</view>
<view class="label">
A相相电压值
</view>
</view>
</view>
<view class="item">
<view class="itemInner">
<view class="num">
{{realTimeData.voltageB}} V
</view>
<view class="label">
B相相电压值
</view>
</view>
</view>
<view class="item">
<view class="itemInner">
<view class="num">
{{realTimeData.voltageC}} V
</view>
<view class="label">
C相相电压值
</view>
</view>
</view>
<view class="item">
<view class="itemInner">
<view class="num">
{{realTimeData.phaseCurrentA}} A
</view>
<view class="label">
A相电流
</view>
</view>
</view>
<view class="item">
<view class="itemInner">
<view class="num">
{{realTimeData.phaseCurrentB}} A
</view>
<view class="label">
B相电流
</view>
</view>
</view>
<view class="item">
<view class="itemInner">
<view class="num">
{{realTimeData.phaseCurrentC}} A
</view>
<view class="label">
C相电流
</view>
</view>
</view>
<view class="item">
<view class="itemInner">
<view class="num">
{{realTimeData.cableTemperatureA}} °C
</view>
<view class="label">
线缆温度A
</view>
</view>
</view>
<view class="item">
<view class="itemInner">
<view class="num">
{{realTimeData.cableTemperatureB}} °C
</view>
<view class="label">
线缆温度B
</view>
</view>
</view>
<view class="item">
<view class="itemInner">
<view class="num">
{{realTimeData.cableTemperatureC}} °C
</view>
<view class="label">
线缆温度C
</view>
</view>
</view>
<view class="item">
<view class="itemInner">
<view class="num">
{{realTimeData.ambientTemperature}} °C
</view>
<view class="label">
环境温度
</view>
</view>
</view>
<view class="item">
<view class="itemInner">
<view class="num">
{{realTimeData.electricLeakage}} mA
</view>
<view class="label">
漏电流
</view>
</view>
</view>
</view>
</view>
<view class="blockTitle">
设备开关
</view>
<view class="blockBox">
<view class="tableBox">
<view class="tableHead">
<view class="item">设备名称</view>
<!-- <view class="item">喷淋类型</view> -->
<view class="item">操作</view>
</view>
<view v-for="(item,index) in environmentDevList" :key="index" class="tableBody">
<view class="item">{{item.devName}}</view>
<!-- <view class="item">{{item.deviceId}}</view> -->
<view class="item">
<image @click="commandFn(1,item.devSn)" v-if="item.lockState==2" src="/static/close.png" class="switchIcon"></image>
<image @click="commandFn(2,item.devSn)" v-else src="/static/open.png" class="switchIcon"></image>
</view>
</view>
</view>
</view>
</view>
<view class="" v-if="tabIndex==1">
<view class="selectContent selectContent2">
<picker mode="date" @change="changeDate" :value="searchDate">
<view class="selectVideoBox">
<text class="videoName">{{searchDate}}</text>
<uni-icons2 class="arrow" type="arrowdown" size="15"></uni-icons2>
</view>
</picker>
<picker mode="selector" :range="environmentDevList" @change="changeDev" range-key="devName" :value="devIndex" style="margin-left:30rpx">
<view class="selectVideoBox">
<text class="videoName" v-if="environmentDevList.length>0">{{environmentDevList[devIndex].devName}}</text>
<uni-icons2 class="arrow" type="arrowdown" size="15"></uni-icons2>
</view>
</picker>
</view>
<view class="blockBox" v-for="(item,index) in operateList" :key="index">
<view class="alarmItem">
<text class="label">操作人</text><text class="value">{{item.realName?item.realName:'项目管理员'}}</text>
</view>
<view class="alarmItem">
<text class="label">操作时间</text><text class="value">{{item.createTime}}</text>
</view>
</view>
<view class="placeholderBox" v-if="operateList.length==0">
<image src="/static/noData.png" mode="" class="noDataImg"></image>
<view class="text">
暂无记录
</view>
</view>
</view>
<view class="" v-if="tabIndex==2">
<view class="selectContent">
<picker mode="selector" :range="environmentDevList" @change="changeDev" range-key="devName" :value="devIndex">
<view class="selectVideoBox">
<text class="videoName" v-if="environmentDevList.length>0">{{environmentDevList[devIndex].devName}}</text>
<uni-icons2 class="arrow" type="arrowdown" size="15"></uni-icons2>
</view>
</picker>
</view>
<view class="blockBox" v-for="(item,index) in alarmList" :key="index">
<view class="alarmItem">
<text class="label">报警类型</text><text class="value">{{item.alarmType}}</text>
</view>
<view class="alarmItem">
<text class="label">报警设备</text><text class="value">{{item.devName}}</text>
</view>
<view class="alarmItem">
<text class="label">报警时间</text><text class="value">{{item.creatTime}}</text>
</view>
<view class="alarmItem">
<text class="label">报警测量值</text><text class="value">{{item.alarmMeasuredValue}}</text>
</view>
</view>
<view class="placeholderBox" v-if="alarmList.length==0">
<image src="/static/noData.png" mode="" class="noDataImg"></image>
<view class="text">
暂无报警
</view>
</view>
</view>
</view>
</template>
<script>
import headers from "@/components/headers/headers.vue"
import {GetDateStr} from "../../../static/js/util.js"
export default {
components:{headers},
data() {
return {
projectDetail:'',
environmentDevList:[],
devIndex:0,
realTimeData:{
ambientTemperature: '--',
voltageB: '--',
voltageC: '--',
phaseCurrentB: '--',
phaseCurrentC: '--',
pressure: '--',
voltageA: '--',
cableTemperatureC: '--',
cableTemperatureB: '--',
cableTemperatureA: '--',
electricLeakage: '--',
phaseCurrentA: '--',
},
alarmList:[],
currentDevDetail:{},
tabIndex:0,
onlineDevNum:0,
operateList:[],
userId:0,
searchDate:""
};
},
mounted() {
this.projectDetail = JSON.parse(uni.getStorageSync('projectDetail'))
var userInfo = JSON.parse(uni.getStorageSync('userInfo'))
this.userId=userInfo.userId
this.searchDate=GetDateStr(0,'-')
this.getEnvironmentDev()
},
methods:{
commandFn(operateType,devSn){
var that = this
this.sendRequest({
url: "xmgl/electricalLockOperateRecord/add",
data: {
projectSn: this.projectDetail.projectSn,
operateType: operateType,
devSn: devSn,
createUser:this.userId
},
method: "POST",
success(res) {
uni.showToast({
title:'操作成功'
})
}
})
},
changeMenu(index){
this.tabIndex=index;
this.loadData()
},
loadData(){
if(this.environmentDevList.length>0){
switch (this.tabIndex){
case 0:
this.getEnvironmentDev()
break;
case 1:
this.getOperateList()
break;
case 2:
this.getAlarmData()
break;
}
}
},
changeDate(e){
this.searchDate = e.target.value
this.getOperateList()
},
changeDev(e){
this.devIndex = e.target.value
this.currentDevDetail=this.environmentDevList[this.devIndex]
this.loadData()
},
//获取报警列表
getAlarmData(){
var that = this
this.sendRequest({
url: "xmgl/electricAlarm/list",
data: {
projectSn: this.projectDetail.projectSn,
pageNo: 1,
pageSize: 100,
// alarmTypeId:this.alarmTypeList[this.alarmTypeIndex].id,
devSn: this.currentDevDetail.devSn
},
method: "POST",
success(res) {
that.alarmList = res.result.records
}
})
},
//获取设备
getEnvironmentDev(){
var that = this
this.sendRequest({
url: "xmgl/electricalDev/list",
data: {
projectSn: this.projectDetail.projectSn
},
method: "POST",
success(res) {
that.environmentDevList = res.result
if(res.result.length>0){
for (var i = 0; i < res.result.length; i++) {
if(res.result[i].isClosed==1){
that.onlineDevNum+=1
}
}
that.currentDevDetail=res.result[that.devIndex]
that.getRealTimeData()
}
}
})
},
//获取实时数据
getRealTimeData(){
var that = this
this.sendRequest({
url: "xmgl/electricalData/getRealTimeDustNoiseData",
data: {
projectSn: this.projectDetail.projectSn,
devSn: this.currentDevDetail.devSn
},
method: "POST",
success(res) {
if(res.result){
that.realTimeData = res.result
}else{
that.realTimeData={
ambientTemperature: '--',
voltageB: '--',
voltageC: '--',
phaseCurrentB: '--',
phaseCurrentC: '--',
pressure: '--',
voltageA: '--',
cableTemperatureC: '--',
cableTemperatureB: '--',
cableTemperatureA: '--',
electricLeakage: '--',
phaseCurrentA: '--',
}
}
}
})
},
//获取操作记录
getOperateList(){
var that = this
this.sendRequest({
url: "xmgl/electricalLockOperateRecord/list",
data: {
projectSn: this.projectDetail.projectSn,
pageNo:1,
pageSize:100,
devSn:this.currentDevDetail.devSn,
startTime:this.searchDate,
endTime:this.searchDate
},
method: "POST",
success(res) {
that.operateList = res.result.records
}
})
}
}
}
</script>
<style lang="scss" scoped>
.menuBox{
display: flex;
align-items: center;
height: 36px;
font-size: 30rpx;
background-color: white;
margin-top: -1px;
position: relative;
z-index: 999;
border-bottom: 1px solid rgba(194, 194, 194, 0.2);
.menuItem{
flex: 1;
text-align: center;
&.active{
color: rgba(43, 141, 243, 1);
}
}
}
.blockBox{
box-shadow: 0 4px 24px 0px rgba(212, 220, 236, 0.69);
border-radius: 16rpx;
margin: 30rpx;
padding: 30rpx;
}
.numContent{
text-align: center;
}
.numBox{
width: 130px;
height: 100rpx;
border-radius: 16rpx;
background-image: linear-gradient(rgba(134, 145, 252, 1),rgba(16, 97, 254, 1));
font-size: 24rpx;
color: white;
text-align: center;
display: inline-block;
.num{
font-size: 30rpx;
margin:10rpx 0 0px;
}
}
.numBox1{
margin-right: 20rpx;
}
.aqiBox{
font-size: 28rpx;
opacity: 0.8;
text-align: center;
margin-bottom: 20rpx;
.txt{
opacity: 1;
margin-left: 30rpx;
font-weight: bold;
}
}
.selectContent {
text-align: center;
margin-top: 30rpx;
}
.selectVideoBox {
border: 1px solid rgba(42, 43, 91, 0.2);
border-radius: 36rpx;
height: 70rpx;
font-size: 30rpx;
display: inline-block;
.videoName {
padding: 0 24rpx 0 30rpx;
// border-right: 1px solid rgba(42, 43, 91, 0.2);
line-height: 70rpx;
height: 70rpx;
}
.arrow {
padding: 0 24rpx 0 4rpx;
}
}
.arrow {
margin-left: 20rpx;
}
// .tipsBox{
// color: rgba(236, 150, 72, 1);
// font-size: 28rpx;
// margin-bottom: 24rpx;
// display: flex;
// align-items: center;
// }
.realTimeBox{
overflow: hidden;
.item{
float: left;
width: 33.33%;
.itemInner{
// box-shadow: 0 4px 24px 0px rgba(212, 220, 236, 0.69);
border: 1px solid rgba(220, 220, 220, 0.3);
margin: 3.10rpx;
font-size: 24rpx;
text-align: center;
padding: 7px 0;
}
.num{
font-size: 30rpx;
color: rgba(43, 141, 243, 1);
}
}
}
.alarmIcon{
width: 40rpx;
height: 40rpx;
}
.switchIcon{
width: 100rpx;
height: 29px;
}
.blockTitle{
text-align: center;
}
.tableBox{
font-size: 28rpx;
width: 100%;
.tableHead{
font-weight: bold;
display: flex;
border-bottom: 1px solid rgba(42, 43, 91, 0.1);
.item{
flex: 1;
padding: 0 0 20rpx;
text-align: center;
}
}
.tableBody{
display: flex;
align-items: center;
.item{
flex: 1;
text-align: center;
justify-content: center;
padding: 20rpx 0 0px;
}
}
}
.chartTitle{
font-size: 28rpx;
font-weight: 500;
margin-bottom: 30rpx;
}
.selectContent2{
display: flex;
align-items: center;
justify-content: center;
}
.alarmItem{
font-size: 28rpx;
.label{
opacity: 0.6;
}
}
</style>