|
@@ -1,169 +1,175 @@
|
|
|
-<template>
|
|
|
- <view>
|
|
|
- <u-navbar title="异常设备排名" title-color="#101010" ></u-navbar>
|
|
|
- <view class="background">
|
|
|
- <view class="title">
|
|
|
- 设备累计异常报警
|
|
|
- </view>
|
|
|
- <view class="else">
|
|
|
- <view class="time">
|
|
|
- 共 42 次
|
|
|
- </view>
|
|
|
- <view class="date">
|
|
|
- <text>2024年</text><u-icon name="arrow-down" size="20" color="#f2f4d6"></u-icon>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="main">
|
|
|
- <view class="item" @click="gotoUrl('/pages/equipmentDataMonitoring/electronicMonitoring?id='+'&name=')">
|
|
|
- <view class="ranking">
|
|
|
- 1
|
|
|
- </view>
|
|
|
- <view class="icon">
|
|
|
- <image class="img" src="@/assets/img/transformer1.svg" mode=""></image>
|
|
|
- </view>
|
|
|
- <view class="name">
|
|
|
- <view class="name1">
|
|
|
- 荆鹏软件园01
|
|
|
- </view>
|
|
|
- <view class="name2">
|
|
|
- 荆鹏集团
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="time">
|
|
|
- 5次
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="item">
|
|
|
- <view class="ranking">
|
|
|
- 2
|
|
|
- </view>
|
|
|
- <view class="icon">
|
|
|
- <image class="img" src="@/assets/img/transformer1.svg" mode=""></image>
|
|
|
- </view>
|
|
|
- <view class="name">
|
|
|
- <view class="name1">
|
|
|
- 荆鹏软件园01
|
|
|
- </view>
|
|
|
- <view class="name2">
|
|
|
- 荆鹏集团
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="time">
|
|
|
- 5次
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="item">
|
|
|
- <view class="ranking">
|
|
|
- 3
|
|
|
- </view>
|
|
|
- <view class="icon">
|
|
|
- <image class="img" src="@/assets/img/transformer1.svg" mode=""></image>
|
|
|
- </view>
|
|
|
- <view class="name">
|
|
|
- <view class="name1">
|
|
|
- 荆鹏软件园01
|
|
|
- </view>
|
|
|
- <view class="name2">
|
|
|
- 荆鹏集团
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="time">
|
|
|
- 5次
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
- export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
-
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss" scoped>
|
|
|
- page{
|
|
|
- background-color: #fff;
|
|
|
- }
|
|
|
- .background{
|
|
|
- background-color: rgba(22,119,255,1);
|
|
|
- padding: 32rpx;
|
|
|
- color: rgba(255,255,255,1);
|
|
|
- height: 184rpx;
|
|
|
- .title{
|
|
|
- font-weight: bold;
|
|
|
- font-size: 32rpx;
|
|
|
- }
|
|
|
- .else{
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- margin-top: 8rpx;
|
|
|
- .date{
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- text{
|
|
|
- margin-right: 8rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
-.main{
|
|
|
- padding: 40rpx 48rpx;
|
|
|
- margin-top: -32rpx;
|
|
|
- border-radius: 16px;
|
|
|
- background-color: #fff;
|
|
|
- .item{
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- margin-bottom: 32rpx;
|
|
|
- .ranking{
|
|
|
- color: rgba(16,16,16,1);
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
-
|
|
|
- .icon{
|
|
|
- width: 72rpx;
|
|
|
- height: 72rpx;
|
|
|
- border-radius: 4px;
|
|
|
- background-color: rgba(219,234,255,1);
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- margin-left: 24rpx;
|
|
|
- .img{
|
|
|
- width: 48rpx;
|
|
|
- height: 48rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- .name{
|
|
|
- margin-left: 16rpx;
|
|
|
- .name1{
|
|
|
- color: rgba(51,51,51,1);
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
- .name2{
|
|
|
- color: rgba(119,119,119,1);
|
|
|
- font-size: 24rpx;
|
|
|
- margin-top: 4rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- .time{
|
|
|
- color: rgba(16,16,16,1);
|
|
|
- margin-left: auto;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
-}
|
|
|
-</style>
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <u-navbar title="异常设备排名" title-color="#101010" ></u-navbar>
|
|
|
+ <view class="background">
|
|
|
+ <view class="title">
|
|
|
+ 设备累计异常报警
|
|
|
+ </view>
|
|
|
+ <view class="else">
|
|
|
+ <view class="time">
|
|
|
+ 共 42 次
|
|
|
+ </view>
|
|
|
+ <view class="date">
|
|
|
+ <text>2024年</text><u-icon name="arrow-down" size="20" color="#f2f4d6"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="main">
|
|
|
+ <view class="item" @click="gotoUrl('/pages/equipmentDataMonitoring/electronicMonitoring?id='+'&name=')">
|
|
|
+ <view class="ranking">
|
|
|
+ 1
|
|
|
+ </view>
|
|
|
+ <view class="icon">
|
|
|
+ <image class="img" src="@/assets/img/transformer1.svg" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="name">
|
|
|
+ <view class="name1">
|
|
|
+ 荆鹏软件园01
|
|
|
+ </view>
|
|
|
+ <view class="name2">
|
|
|
+ 荆鹏集团
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="time">
|
|
|
+ 5次
|
|
|
+ </view>
|
|
|
+ <!-- 箭头 -->
<view class="more">
<u-icon name="arrow-right" color="#acacac" size="24"></u-icon>
</view>
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <view class="ranking">
|
|
|
+ 2
|
|
|
+ </view>
|
|
|
+ <view class="icon">
|
|
|
+ <image class="img" src="@/assets/img/transformer1.svg" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="name">
|
|
|
+ <view class="name1">
|
|
|
+ 荆鹏软件园01
|
|
|
+ </view>
|
|
|
+ <view class="name2">
|
|
|
+ 荆鹏集团
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="time">
|
|
|
+ 5次
|
|
|
+ </view>
|
|
|
+ <!-- 箭头 -->
<view class="more">
<u-icon name="arrow-right" color="#acacac" size="24"></u-icon>
</view>
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <view class="ranking">
|
|
|
+ 3
|
|
|
+ </view>
|
|
|
+ <view class="icon">
|
|
|
+ <image class="img" src="@/assets/img/transformer1.svg" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="name">
|
|
|
+ <view class="name1">
|
|
|
+ 荆鹏软件园01
|
|
|
+ </view>
|
|
|
+ <view class="name2">
|
|
|
+ 荆鹏集团
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="time">
|
|
|
+ 5次
|
|
|
+ </view>
|
|
|
+ <!-- 箭头 -->
<view class="more">
<u-icon name="arrow-right" color="#acacac" size="24"></u-icon>
</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ page{
|
|
|
+ background-color: #fff;
|
|
|
+ }
|
|
|
+ .background{
|
|
|
+ background-color: rgba(22,119,255,1);
|
|
|
+ padding: 32rpx;
|
|
|
+ color: rgba(255,255,255,1);
|
|
|
+ height: 184rpx;
|
|
|
+ .title{
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 32rpx;
|
|
|
+ }
|
|
|
+ .else{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-top: 8rpx;
|
|
|
+ .date{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ text{
|
|
|
+ margin-right: 8rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+.main{
|
|
|
+ padding: 40rpx 48rpx;
|
|
|
+ margin-top: -32rpx;
|
|
|
+ border-radius: 16px;
|
|
|
+ background-color: #fff;
|
|
|
+ .item{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 32rpx;
|
|
|
+ .ranking{
|
|
|
+ color: rgba(16,16,16,1);
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .icon{
|
|
|
+ width: 72rpx;
|
|
|
+ height: 72rpx;
|
|
|
+ border-radius: 4px;
|
|
|
+ background-color: rgba(219,234,255,1);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin-left: 24rpx;
|
|
|
+ .img{
|
|
|
+ width: 48rpx;
|
|
|
+ height: 48rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .name{
|
|
|
+ margin-left: 16rpx;
|
|
|
+ .name1{
|
|
|
+ color: rgba(51,51,51,1);
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .name2{
|
|
|
+ color: rgba(119,119,119,1);
|
|
|
+ font-size: 24rpx;
|
|
|
+ margin-top: 4rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .time{
|
|
|
+ color: rgba(16,16,16,1);
|
|
|
+ margin-left: auto;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .more{
|
|
|
+ margin-left: 8rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+}
|
|
|
+</style>
|