|
|
@@ -1,12 +1,12 @@
|
|
|
<template>
|
|
|
<view>
|
|
|
<u-navbar title="设备状态监测" title-color="#101010"></u-navbar>
|
|
|
-
|
|
|
+
|
|
|
<view class="dropdown">
|
|
|
<view class="dropdown-item" @click="show1=true">
|
|
|
-
|
|
|
+
|
|
|
<view class="text">
|
|
|
- {{device}}
|
|
|
+ {{device}}
|
|
|
</view>
|
|
|
<view class="item-icon">
|
|
|
<u-icon name="arrow-down" color="#999999" v-if="show1==false"></u-icon>
|
|
|
@@ -15,7 +15,7 @@
|
|
|
</view>
|
|
|
<view class="dropdown-item" @click="show2=true">
|
|
|
<view class="text">
|
|
|
- {{company}}
|
|
|
+ {{statusName}}
|
|
|
</view>
|
|
|
<view class="icon">
|
|
|
<u-icon name="arrow-down" color="#999999" v-if="show2==false"></u-icon>
|
|
|
@@ -23,125 +23,201 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <u-select v-model="show1" mode="single-column" :list="deviceList" ></u-select>
|
|
|
-
|
|
|
- <u-select v-model="show2" mode="single-column" :list="companyList" ></u-select>
|
|
|
-
|
|
|
- <view class="main">
|
|
|
- <view class="item">
|
|
|
- <view class="item-icon">
|
|
|
- <image class="img" src="@/assets/img/transformer1.svg" mode=""></image>
|
|
|
- </view>
|
|
|
- <view class="item-content">
|
|
|
- <view class="content1">
|
|
|
- <view class="name1">
|
|
|
- 格莱慧费控电表
|
|
|
- </view>
|
|
|
- <view class="name2">
|
|
|
- 荆鹏A栋1101
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="content2">
|
|
|
- <view class="text">
|
|
|
- 费控电量计量仪
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="item-state">
|
|
|
- <view class="dot on-line">
|
|
|
-
|
|
|
- </view>
|
|
|
- <view class="text">
|
|
|
- 在线
|
|
|
- </view>
|
|
|
- <view class="more">
|
|
|
- <u-icon name="arrow-right" size="24" color="#acacac"></u-icon>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
+ <u-select v-model="show1" mode="single-column" :list="deviceTypeList" @confirm="deviceChange"></u-select>
|
|
|
+
|
|
|
+ <u-select v-model="show2" mode="single-column" :list="statusList" @confirm="statusChange"></u-select>
|
|
|
+
|
|
|
+ <view class="main">
|
|
|
+ <view class="item" v-for="(item,index) in deviceList" :key="index" @click="toElectronicMonitoring(item)">
|
|
|
+ <view class="item-icon" v-if="item.classify == '1'">
|
|
|
+ <image class="img" src="@/assets/img/energy1.svg" mode=""></image>
|
|
|
</view>
|
|
|
-
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="item">
|
|
|
- <view class="item-icon">
|
|
|
+ <view class="item-icon" v-if="item.classify == '2'">
|
|
|
<image class="img" src="@/assets/img/transformer2.svg" mode=""></image>
|
|
|
</view>
|
|
|
<view class="item-content">
|
|
|
<view class="content1">
|
|
|
<view class="name1">
|
|
|
- 格莱慧费控电表
|
|
|
+ {{item.name}}
|
|
|
</view>
|
|
|
<view class="name2">
|
|
|
- 荆鹏A栋1101
|
|
|
+ {{item.installationAddress}}
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="content2">
|
|
|
<view class="text">
|
|
|
- 费控电量计量仪
|
|
|
+ {{item.deviceTypeN}}
|
|
|
</view>
|
|
|
-
|
|
|
+
|
|
|
<view class="item-state">
|
|
|
- <view class="dot on-line">
|
|
|
-
|
|
|
+ <view class="dot" :class="item.online ? 'on-line' : 'off-line'">
|
|
|
+
|
|
|
</view>
|
|
|
<view class="text">
|
|
|
- 在线
|
|
|
+ {{item.online ? '在线' : '离线'}}
|
|
|
</view>
|
|
|
<view class="more">
|
|
|
<u-icon name="arrow-right" size="24" color="#acacac"></u-icon>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="content3">
|
|
|
+
|
|
|
+ <view class="content3" v-if="item.classify == '2'">
|
|
|
<view class="state-item">
|
|
|
<view class="state-title">
|
|
|
运行状态：
|
|
|
</view>
|
|
|
- <view class="state-value">
|
|
|
+ <view class="state-value" v-if="item.deviceStatus == '1'">
|
|
|
正常
|
|
|
</view>
|
|
|
+ <view class="state-value2" v-else>
|
|
|
+ 异常
|
|
|
+ </view>
|
|
|
</view>
|
|
|
<view class="state-item">
|
|
|
<view class="state-title">
|
|
|
温度状态：
|
|
|
</view>
|
|
|
- <view class="state-value">
|
|
|
+ <view class="state-value" v-if="item.temperatureStatus == '1'">
|
|
|
正常
|
|
|
</view>
|
|
|
+ <view class="state-value2" v-else>
|
|
|
+ 异常
|
|
|
+ </view>
|
|
|
</view>
|
|
|
<view class="state-item">
|
|
|
<view class="state-title">
|
|
|
烟感状态：
|
|
|
</view>
|
|
|
- <view class="state-value2">
|
|
|
+ <view class="state-value" v-if="item.smokeStatus == '1'">
|
|
|
+ 正常
|
|
|
+ </view>
|
|
|
+ <view class="state-value2" v-else>
|
|
|
异常
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
-
|
|
|
</view>
|
|
|
- </view>
|
|
|
-
|
|
|
-
|
|
|
+ </view>
|
|
|
+
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+ import * as API from '@/apis/pagejs/index.js'
|
|
|
+ import * as API_electricityMeter from '@/apis/pagejs/electricityMeter.js'
|
|
|
+
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
- show1: false,
|
|
|
- show2: false,
|
|
|
- device: '全部设备',
|
|
|
- company: '全部公司',
|
|
|
deviceList: [],
|
|
|
- companyList: [],
|
|
|
-
|
|
|
+ show1: false,
|
|
|
+ show2: false,
|
|
|
+ device: '全部设备',
|
|
|
+ statusName: '全部状态',
|
|
|
+ deviceTypeList: [],
|
|
|
+ statusList: [{
|
|
|
+ value: '',
|
|
|
+ label: '全部状态'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: '1',
|
|
|
+ label: '离线'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: '2',
|
|
|
+ label: '温度异常'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: '3',
|
|
|
+ label: '烟感异常'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: '4',
|
|
|
+ label: '设备异常'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ status: '',
|
|
|
+ deviceType: ''
|
|
|
}
|
|
|
},
|
|
|
+ onReady() {
|
|
|
+ this.getDeviceStatusMonitoring();
|
|
|
+ this.getDeviceTypeList();
|
|
|
+ },
|
|
|
methods: {
|
|
|
-
|
|
|
+ //设备查询
|
|
|
+ deviceChange(e) {
|
|
|
+ // console.log(e);
|
|
|
+ this.deviceType = e[0].value;
|
|
|
+ this.device = e[0].label;
|
|
|
+
|
|
|
+ this.getDeviceStatusMonitoring();
|
|
|
+ },
|
|
|
+ //状态查询
|
|
|
+ statusChange(e) {
|
|
|
+ // console.log(e);
|
|
|
+ this.status = e[0].value;
|
|
|
+ this.statusName = e[0].label;
|
|
|
+
|
|
|
+ this.getDeviceStatusMonitoring();
|
|
|
+ },
|
|
|
+ getDeviceStatusMonitoring() {
|
|
|
+ uni.showLoading({
|
|
|
+ title: "加载中",
|
|
|
+ mask: true,
|
|
|
+ })
|
|
|
+ API.deviceStatusMonitoring({
|
|
|
+ pageIndex: 1,
|
|
|
+ pageSize: 100,
|
|
|
+ deviceType: this.deviceType,
|
|
|
+ status: this.status
|
|
|
+ }).then((response) => {
|
|
|
+ uni.hideLoading();
|
|
|
+ this.deviceList = response.data.data;
|
|
|
+ }).catch(error => {
|
|
|
+ uni.showToast({
|
|
|
+ title: error,
|
|
|
+ icon: "none"
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //查询设备类型list
|
|
|
+ getDeviceTypeList() {
|
|
|
+ uni.showLoading({
|
|
|
+ title: "加载中",
|
|
|
+ mask: true,
|
|
|
+ })
|
|
|
+ API_electricityMeter.findByName({
|
|
|
+ name: '设备类型'
|
|
|
+ }).then((res) => {
|
|
|
+ uni.hideLoading();
|
|
|
+ var list = [];
|
|
|
+ list = res.data.map(item => {
|
|
|
+ return {
|
|
|
+ label: item.name,
|
|
|
+ value: item.value
|
|
|
+ }
|
|
|
+ })
|
|
|
+ list.unshift({
|
|
|
+ label: '全部设备',
|
|
|
+ value: ''
|
|
|
+ })
|
|
|
+ this.deviceTypeList = list;
|
|
|
+ }).catch(error => {
|
|
|
+ uni.showToast({
|
|
|
+ title: error,
|
|
|
+ icon: "none"
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ toElectronicMonitoring(item) {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/equipmentDataMonitoring/electronicMonitoring?id=' + item.id + '&name=' + item.name +
|
|
|
+ '&companyId=' + item.companyId
|
|
|
+ })
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
@@ -155,7 +231,7 @@
|
|
|
padding: 18rpx 46rpx;
|
|
|
display: flex;
|
|
|
border-bottom: 1px solid rgba(245, 245, 245, 1);
|
|
|
-
|
|
|
+
|
|
|
.dropdown-item {
|
|
|
width: 50%;
|
|
|
text-align: center;
|
|
|
@@ -164,7 +240,8 @@
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
- .text{
|
|
|
+
|
|
|
+ .text {
|
|
|
max-width: 80%;
|
|
|
white-space: nowrap;
|
|
|
overflow: hidden;
|
|
|
@@ -173,109 +250,125 @@
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .main{
|
|
|
- background-color: #fff;
|
|
|
- padding: 0 32rpx;
|
|
|
- .item:last-of-type{
|
|
|
- border: none;
|
|
|
- }
|
|
|
- .item{
|
|
|
- padding: 32rpx 0;
|
|
|
- display: flex;
|
|
|
-
|
|
|
- border-bottom: 1px solid rgba(245,245,245,1);
|
|
|
- .item-icon{
|
|
|
- width: 72rpx;
|
|
|
- height: 72rpx;
|
|
|
- border-radius: 4px;
|
|
|
- background-color: rgba(219,234,255,1);
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- .img{
|
|
|
- width: 48rpx;
|
|
|
- height: 48rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- .item-content{
|
|
|
- flex: 1;
|
|
|
- margin-left: 16rpx;
|
|
|
- .content1{
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- .name1{
|
|
|
- color: rgba(51,51,51,1);
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
- .name2{
|
|
|
- color: rgba(119,119,119,1);
|
|
|
- font-size: 24rpx;
|
|
|
- margin-left: 16rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- .content2{
|
|
|
- margin-top: 4rpx;
|
|
|
-
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- .text{
|
|
|
- color: rgba(119,119,119,1);
|
|
|
- font-size: 24rpx;
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
- .content3{
|
|
|
- margin-top: 8rpx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- padding-right: 16rpx;
|
|
|
- .state-item{
|
|
|
- display: flex;
|
|
|
-
|
|
|
- color: rgba(51,51,51,1);
|
|
|
- font-size: 24rpx;
|
|
|
- .state-value{
|
|
|
- color: #00B962 ;
|
|
|
- }
|
|
|
- .state-value2{
|
|
|
- color: #FF6923;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .item-state{
|
|
|
+ .main {
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 0 32rpx;
|
|
|
+
|
|
|
+ .item:last-of-type {
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item {
|
|
|
+ padding: 32rpx 0;
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ border-bottom: 1px solid rgba(245, 245, 245, 1);
|
|
|
+
|
|
|
+ .item-icon {
|
|
|
+ width: 72rpx;
|
|
|
+ height: 72rpx;
|
|
|
+ border-radius: 4px;
|
|
|
+ background-color: rgba(219, 234, 255, 1);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ .img {
|
|
|
+ width: 48rpx;
|
|
|
+ height: 48rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-content {
|
|
|
+ flex: 1;
|
|
|
+ margin-left: 16rpx;
|
|
|
+
|
|
|
+ .content1 {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .name1 {
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ font-weight: bold;
|
|
|
+ width: 50%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .name2 {
|
|
|
+ color: rgba(119, 119, 119, 1);
|
|
|
+ font-size: 24rpx;
|
|
|
+ margin-left: 16rpx;
|
|
|
+ width: 50%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .content2 {
|
|
|
+ margin-top: 4rpx;
|
|
|
+
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .text {
|
|
|
+ color: rgba(119, 119, 119, 1);
|
|
|
+ font-size: 24rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .content3 {
|
|
|
+ margin-top: 8rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding-right: 16rpx;
|
|
|
+
|
|
|
+ .state-item {
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ font-size: 24rpx;
|
|
|
+
|
|
|
+ .state-value {
|
|
|
+ color: #00B962;
|
|
|
+ }
|
|
|
+
|
|
|
+ .state-value2 {
|
|
|
+ color: #FF6923;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-state {
|
|
|
margin-left: auto;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
+
|
|
|
.dot {
|
|
|
-
|
|
|
+
|
|
|
width: 16rpx;
|
|
|
height: 16rpx;
|
|
|
border-radius: 999px;
|
|
|
-
|
|
|
-
|
|
|
+
|
|
|
+
|
|
|
}
|
|
|
- .text{
|
|
|
+
|
|
|
+ .text {
|
|
|
margin: 0 8rpx;
|
|
|
- color: rgba(51,51,51,1);
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
font-size: 24rpx;
|
|
|
}
|
|
|
+
|
|
|
.off-line {
|
|
|
-
|
|
|
+
|
|
|
background-color: rgba(255, 123, 0, 1);
|
|
|
-
|
|
|
+
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
.on-line {
|
|
|
background-color: rgba(0, 185, 98, 1);
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-</style>
|
|
|
+ }
|
|
|
+</style>
|
wkyy