|
|
@@ -0,0 +1,399 @@
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <!-- <u-navbar title="设备数据监测" title-color="#101010" > -->
|
|
|
+ <view class="navbar-c">
|
|
|
+ <view class="back">
|
|
|
+ <u-icon name="arrow-left" color="#101010" size="36"></u-icon>
|
|
|
+ </view>
|
|
|
+ <view class="title">
|
|
|
+ 设备数据监测<image class="img" src="@/assets/img/refresh-line.svg"></image>
|
|
|
+ </view>
|
|
|
+ <view class="right">
|
|
|
+ <image class="img" src="@/assets/img/riLine-road-map-line.svg" mode=""></image>列表
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="slot" slot="right">
|
|
|
+ <image class="img" src="@/assets/img/riLine-list-check-2.svg" mode=""></image>地图
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </u-navbar>
|
|
|
+ <view class="dropdown">
|
|
|
+ <u-dropdown>
|
|
|
+ <u-dropdown-item v-model="value1" title="全部设备" :options="options1"></u-dropdown-item>
|
|
|
+ <u-dropdown-item v-model="value2" title="全部状态" :options="options2"></u-dropdown-item>
|
|
|
+ </u-dropdown>
|
|
|
+ </view>
|
|
|
+ <!-- 地图 -->
|
|
|
+ <view class="map">
|
|
|
+ <image class="img" src="@/assets/img/map.png" mode=""></image>
|
|
|
+ <!-- 标注1 -->
|
|
|
+ <view class="location1">
|
|
|
+ <image class="img" src="@/assets/img/antFill-alert Copy 1.svg" mode=""></image>
|
|
|
+ <view class="corner">
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 标注2 -->
|
|
|
+ <view class="location2">
|
|
|
+ <view class="icon2-left">
|
|
|
+ <image class="img1" src="@/assets/img/antFill-alert.svg" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="icon2-right">
|
|
|
+ <view class="corner2"></view>
|
|
|
+ <view class="corner2-top">
|
|
|
+ 荆鹏软件园01
|
|
|
+ </view>
|
|
|
+ <view class="corner2-bottom">
|
|
|
+ <image class="img2" src="@/assets/img/antFill-alert(2).svg"></image>正常
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="card">
|
|
|
+ <view class="item">
|
|
|
+ <view class="title">
|
|
|
+ <view class="icon-box">
|
|
|
+ <image class="img" src="@/assets/img/transformer1.svg" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="equipment">
|
|
|
+ <view class="name1">
|
|
|
+ 御河社区03
|
|
|
+ </view>
|
|
|
+ <view class="name2">
|
|
|
+ 荆鹏集团
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 状态 -->
|
|
|
+ <view class="state">
|
|
|
+ <view class="state1">
|
|
|
+ <view class="icon icon2">
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ 温度异常
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="state1">
|
|
|
+ <view class="icon">
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ 烟感正常
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 设备信息 -->
|
|
|
+ <view class="infos">
|
|
|
+ <view class="infos-item" >
|
|
|
+ <view class="item-title">
|
|
|
+ 当前电流：
|
|
|
+ </view>
|
|
|
+ <view class="item-value">
|
|
|
+ 20A
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="infos-item" >
|
|
|
+ <view class="item-title">
|
|
|
+ 当前电压：
|
|
|
+ </view>
|
|
|
+ <view class="item-value">
|
|
|
+ 380V
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="infos-item" >
|
|
|
+ <view class="item-title">
|
|
|
+ 当前温度：
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="item-value">
|
|
|
+ 80°C
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="infos-item" >
|
|
|
+ <view class="item-title">
|
|
|
+ 当前功率：
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="item-value">
|
|
|
+ 80kW
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="infos-item" >
|
|
|
+ <view class="item-title">
|
|
|
+ 当前功率因数：
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="item-value">
|
|
|
+ 0.98
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="infos-item" >
|
|
|
+ <view class="item-title">
|
|
|
+ 平均功率因数：
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="item-value">
|
|
|
+ 0.97
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ value1: 1,
|
|
|
+ value2: 1,
|
|
|
+ options1: [{
|
|
|
+ label: '荆鹏集团',
|
|
|
+ value: 1,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '青少年宫',
|
|
|
+ value: 2,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '荆州院子',
|
|
|
+ value: 3,
|
|
|
+ },
|
|
|
+
|
|
|
+ ],
|
|
|
+ options2: [{
|
|
|
+ label: '设备离线',
|
|
|
+ value: 1,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '温度异常',
|
|
|
+ value: 2,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '电压异常',
|
|
|
+ value: 3,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '功率因数异常',
|
|
|
+ value: 4,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+
|
|
|
+ .slot{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .img{
|
|
|
+ width: 32rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ margin-right: 4rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .dropdown{
|
|
|
+ background-color: #fff;
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ top: 88rpx;
|
|
|
+ z-index: 999;
|
|
|
+ }
|
|
|
+ // 地图
|
|
|
+ .map{
|
|
|
+ position: relative;
|
|
|
+ .img{
|
|
|
+ width: 100%;
|
|
|
+ height: 100vh;
|
|
|
+ }
|
|
|
+ .location1 {
|
|
|
+ width: 36px;
|
|
|
+ height: 36px;
|
|
|
+
|
|
|
+ text-align: center;
|
|
|
+ border: 2px solid #FF3D00;
|
|
|
+ border-radius: 999px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ position: absolute;
|
|
|
+ top: 89px;
|
|
|
+ left: 38px;
|
|
|
+ .img{
|
|
|
+ width: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ }
|
|
|
+ .corner {
|
|
|
+ width: 0;
|
|
|
+ height: 0;
|
|
|
+ position: absolute;
|
|
|
+ top: 34px;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ margin: auto;
|
|
|
+ border-bottom: 8rpx solid transparent;
|
|
|
+ border-left: 8rpx solid transparent;
|
|
|
+ border-right: 8rpx solid transparent;
|
|
|
+ border-top: 12rpx solid #FF3D00;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .location2 {
|
|
|
+ width: 280rpx;
|
|
|
+ border-radius: 50px;
|
|
|
+ background-color: #27B148;
|
|
|
+ display: flex;
|
|
|
+ position: absolute;
|
|
|
+ top: 370rpx;
|
|
|
+ left: 280rpx;
|
|
|
+
|
|
|
+ .icon2-left {
|
|
|
+ width: 72rpx;
|
|
|
+ height: 72rpx;
|
|
|
+ line-height: 72rpx;
|
|
|
+ text-align: center;
|
|
|
+ border: 1px solid rgba(0, 185, 98, 100);
|
|
|
+ border-radius: 999px;
|
|
|
+ background-color: #fff;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ .img1{
|
|
|
+ width: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .icon2-right {
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 36rpx;
|
|
|
+ padding-left: 8rpx;
|
|
|
+ font-size: 14px;
|
|
|
+ .corner2-top{
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .corner2-bottom{
|
|
|
+ font-size: 24rpx;
|
|
|
+ .img2{
|
|
|
+ width: 24rpx;
|
|
|
+ height: 24rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .corner2 {
|
|
|
+ width: 0;
|
|
|
+ height: 0;
|
|
|
+ position: absolute;
|
|
|
+ top: 72rpx;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ margin: auto;
|
|
|
+ border-bottom: 6px solid transparent;
|
|
|
+ border-left: 6px solid transparent;
|
|
|
+ border-right: 6px solid transparent;
|
|
|
+ border-top: 8px solid #27B148;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 卡片
|
|
|
+ .card{
|
|
|
+ border-radius: 8px;
|
|
|
+ border: 1px solid rgba(232,232,232,1);
|
|
|
+ box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.4);
|
|
|
+ background-color: rgba(255,255,255,1);
|
|
|
+ position: fixed;
|
|
|
+ left: 24rpx;
|
|
|
+ right: 24rpx;
|
|
|
+ bottom: 32rpx;
|
|
|
+ .item{
|
|
|
+ border-bottom: 1px solid rgba(245,245,245,1);
|
|
|
+ padding: 32rpx 16rpx 16rpx 16rpx;
|
|
|
+ .title{
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-start;
|
|
|
+ .icon-box{
|
|
|
+ width: 72rpx;
|
|
|
+ height: 72rpx;
|
|
|
+ border-radius: 4px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ background-color: rgba(219,234,255,1);
|
|
|
+ .img{
|
|
|
+ width: 48rpx;
|
|
|
+ height: 48rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .equipment{
|
|
|
+ margin-left: 16rpx;
|
|
|
+ .name1{
|
|
|
+ color: rgba(51,51,51,1);
|
|
|
+ }
|
|
|
+ .name2{
|
|
|
+ color: rgba(119,119,119,1);
|
|
|
+ font-size: 24rpx;
|
|
|
+ margin-top: 4rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 状态
|
|
|
+ .state{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-left: auto;
|
|
|
+ .state1{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-left: 24rpx;
|
|
|
+ .icon{
|
|
|
+ width: 16rpx;
|
|
|
+ height: 16rpx;
|
|
|
+ border-radius: 99px;
|
|
|
+ background-color: rgba(22,119,255,1);
|
|
|
+ margin-right: 8rpx;
|
|
|
+ }
|
|
|
+ .icon2{
|
|
|
+ background-color:#FF4F3F;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 设备信息
|
|
|
+ .infos{
|
|
|
+ margin-top: 32rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ font-size: 24rpx;
|
|
|
+ .infos-item{
|
|
|
+
|
|
|
+ display: flex;
|
|
|
+ margin-bottom: 16rpx;
|
|
|
+ .warning{
|
|
|
+ color: rgba(255,61,0,1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
