From 832896ccaf8ac6a8ca31394e55577f064bc5eacf Mon Sep 17 00:00:00 2001
From: ZZJ <zzjdsg2300@163.com>
Date: 星期一, 20 十二月 2021 11:05:48 +0800
Subject: [PATCH] 暂存
---
src/pages/internetEquipment/module/elecModule.vue | 103 +++++++++++++++++++++++++++++++++++++++------------
1 files changed, 79 insertions(+), 24 deletions(-)
diff --git a/src/pages/internetEquipment/module/elecModule.vue b/src/pages/internetEquipment/module/elecModule.vue
index c157c30..0f726fc 100644
--- a/src/pages/internetEquipment/module/elecModule.vue
+++ b/src/pages/internetEquipment/module/elecModule.vue
@@ -1,40 +1,95 @@
<template>
<div class="elec-module">
- <div class="title"></div>
+ <div class="title">鐢甸噺杩囦綆棰勮</div>
- <div class="elec-item"
- v-for="(item,index) in warnArr"
- :key="index">
- <warnDescription
- :warnDes="{code:item.code,
- time:item.time,
- location:item.location}"/>
+ <div class="elec-item" v-for="(item, index) in lowBatteryArr" :key="index">
+ <div class="left">
+ <img src="/images/InternetDevice/鐢垫睜.png" alt="" />
+ <div
+ class="colobox"
+ :style="{
+ width: `${(item.battery / 100) * 29}px`,
+ 'background-color': `${
+ item.battery >= 30 ? 'rgb(37, 174, 109)' : 'rgb(255, 100, 100)'
+ }`,
+ }"
+ ></div>
+ <div class="elec">鐢甸噺: {{ item.battery }}</div>
</div>
-
+ <warnDescription
+ :warnDes="{
+ code: item.device_sn,
+ time: item.updated_at,
+ longitude: item.lng,
+ latitude: item.lat,
+ }"
+ />
+ </div>
</div>
</template>
<script>
-import warnDescription from '@/pages/internetEquipment/components/warnDescription'
+import warnDescription from "@/pages/internetEquipment/components/warnDescription";
export default {
- props :{
- warnArr:{
- type: Array
- }
+ props: {
+ lowBatteryArr: {
+ type: Array,
},
- components :{
- warnDescription
- }
-}
+ },
+ components: {
+ warnDescription,
+ },
+};
</script>
<style scoped lang="scss">
.elec-module {
- width: 280px;
- height: 292px;
- background-color: #fff;
- box-shadow: 0px 2px 10px rgba(141, 164, 187, 0.25);
- border-radius: 15px;
- overflow-y: scroll;
+ padding: 20px;
+ width: 280px;
+ height: 292px;
+ background-color: #fff;
+ box-shadow: 0px 2px 10px rgba(141, 164, 187, 0.25);
+ border-radius: 15px;
+ overflow-y: scroll;
+
+ .title {
+ margin-bottom: 10px;
+ font-size: 14px;
+ font-weight: 700;
+ text-align: left;
+ }
+
+ .elec-item {
+ display: flex;
+ align-items: center;
+ justify-content: space-around;
+ margin-bottom: 4px;
+ padding: 20px 0;
+ width: 100%;
+ height: 78px;
+ background: #f9fafc;
+ border-radius: 10px;
+
+ .elec {
+ font-weight: 700;
+ }
+
+ .left {
+ position: relative;
+ img {
+ width: 40px;
+ height: 20px;
+ }
+
+ .colobox {
+ position: absolute;
+ top: 2px;
+ left: 5px;
+ width: 29px;
+ height: 15px;
+ border-radius: 2px;
+ }
+ }
+ }
}
</style>
\ No newline at end of file
--
Gitblit v1.8.0