|
|
@@ -0,0 +1,219 @@
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <u-navbar title="设备状态监测" title-color="#101010"></u-navbar>
|
|
|
+
|
|
|
+ <view class="dropdown">
|
|
|
+ <view class="dropdown-item" @click="show1=true">
|
|
|
+
|
|
|
+ <view class="text">
|
|
|
+ {{device}}
|
|
|
+ </view>
|
|
|
+ <view class="item-icon">
|
|
|
+ <u-icon name="arrow-down" color="#999999" v-if="show1==false"></u-icon>
|
|
|
+ <u-icon name="arrow-up" color="#999999" v-else></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="dropdown-item" @click="show2=true">
|
|
|
+ <view class="text">
|
|
|
+ {{company}}
|
|
|
+ </view>
|
|
|
+ <view class="icon">
|
|
|
+ <u-icon name="arrow-down" color="#999999" v-if="show2==false"></u-icon>
|
|
|
+ <u-icon name="arrow-up" color="#999999" v-else></u-icon>
|
|
|
+ </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/energy1.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>
|
|
|
+ </view>
|
|
|
+ <view class="item-state">
|
|
|
+ <view class="dot off-line">
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ 离线
|
|
|
+ </view>
|
|
|
+ <view class="more">
|
|
|
+ <u-icon name="arrow-right" size="24" color="#acacac"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="item">
|
|
|
+ <view class="item-icon">
|
|
|
+ <image class="img" src="@/assets/img/transformer2.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>
|
|
|
+ </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>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ show1: false,
|
|
|
+ show2: false,
|
|
|
+ device: '全部设备',
|
|
|
+ company: '全部公司',
|
|
|
+ deviceList: [],
|
|
|
+ companyList: [],
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .dropdown {
|
|
|
+ background-color: #fff;
|
|
|
+ position: sticky;
|
|
|
+ top: 88rpx;
|
|
|
+ z-index: 999;
|
|
|
+ padding: 18rpx 46rpx;
|
|
|
+ display: flex;
|
|
|
+ border-bottom: 1px solid rgba(245, 245, 245, 1);
|
|
|
+
|
|
|
+ .dropdown-item {
|
|
|
+ width: 50%;
|
|
|
+ text-align: center;
|
|
|
+ height: 60rpx;
|
|
|
+ line-height: 60rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ .text{
|
|
|
+ max-width: 80%;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .main{
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 0 32rpx;
|
|
|
+ .item:last-of-type{
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+ .item{
|
|
|
+ padding: 32rpx 0;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ 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{
|
|
|
+ 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{
|
|
|
+ color: rgba(119,119,119,1);
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .item-state{
|
|
|
+ margin-left: auto;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .dot {
|
|
|
+
|
|
|
+ width: 16rpx;
|
|
|
+ height: 16rpx;
|
|
|
+ border-radius: 999px;
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ .text{
|
|
|
+ margin: 0 8rpx;
|
|
|
+ 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>
|
