From bbe33e5fd87e5961fdab804bfb0b4cf354e0c5b2 Mon Sep 17 00:00:00 2001
From: ZZJ <zzjdsg2300@163.com>
Date: 星期三, 24 十一月 2021 10:00:17 +0800
Subject: [PATCH] 地图接口
---
src/pages/internetEquipment/module/elecModule.vue | 142 ++++++++++++++++++++++++----------------------
1 files changed, 74 insertions(+), 68 deletions(-)
diff --git a/src/pages/internetEquipment/module/elecModule.vue b/src/pages/internetEquipment/module/elecModule.vue
index 59e25cd..08d2c5d 100644
--- a/src/pages/internetEquipment/module/elecModule.vue
+++ b/src/pages/internetEquipment/module/elecModule.vue
@@ -1,89 +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">
- <div class="left">
- <img src="/images/InternetDevice/鐢垫睜.png" alt="">
- <div class="colobox"
- :style="{'width':`${item.elec/100*29}px`,
- 'background-color':`${item.elec >= 30 ? 'rgb(37, 174, 109)' : 'rgb(255, 100, 100)'}`}"></div>
- <div class="elec">鐢甸噺: {{item.elec}}</div>
- </div>
- <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 {
- 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;
+ 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;
+ .title {
+ margin-bottom: 10px;
+ font-size: 14px;
+ font-weight: 700;
+ text-align: left;
+ }
+
+ .elec-item {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 4px;
+ padding: 20px 5px 20px 5px;
+ width: 240px;
+ height: 78px;
+ background: #f9fafc;
+ border-radius: 10px;
+
+ .elec {
+ font-weight: 700;
}
- .elec-item {
- display: flex;
- align-items: center;
- justify-content: space-between;
- margin-bottom: 4px;
- padding: 20px 5px 20px 5px;
- width: 240px;
- height: 78px;
- background: #F9FAFC;
- border-radius: 10px;
+ .left {
+ position: relative;
+ img {
+ width: 40px;
+ height: 20px;
+ }
- .elec {
- font-weight: 700;
- }
-
- .left {
- position: relative;
- img {
- width: 40px;
- height: 20px;
- }
-
- .colobox {
- position: absolute;
- top: 2px;
- left: 10px;
- width: 29px;
- height: 15px;
- border-radius: 2px;
- }
- }
+ .colobox {
+ position: absolute;
+ top: 2px;
+ left: 10px;
+ width: 29px;
+ height: 15px;
+ border-radius: 2px;
+ }
}
+ }
}
</style>
\ No newline at end of file
--
Gitblit v1.8.0