feat:智慧消防

app/src/views/HomeView.vue

@@ -56,7 +56,7 @@
             style="margin-bottom: 6px"
             title="智慧消防"
           >
-            2222
+          <WisdomFire/>
           </border-panel>
           <border-panel height="298px" title="火灾指标"> 3333 
             <template #ext-header>
@@ -77,12 +77,14 @@ import AlarmingSituationDynamics from './components/AlarmingSituationDynamics.vu
 import AutonomousManagement from './components/AutonomousManagement.vue'
 import MapCharts from "./components/MapCharts.vue";
 import RiskWarning from './components/RiskWarning.vue';
+import WisdomFire from './components/WisdomFire.vue'
 export default {
   components: {
     Headers,
     FirstHight,AlarmingSituationDynamics,
     MapCharts,RiskWarning,
-    AutonomousManagement
+    AutonomousManagement,
+    WisdomFire
   }
 };
 </script>

app/src/views/components/FireIndex.vue

@@ -0,0 +1,15 @@
+<template>
+    <div>
+<div>
+    
+</div>
+    </div>
+</template>
+
+<script >
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>

app/src/views/components/RiskWarning.vue

@@ -121,6 +121,7 @@ methods:{
 						show: false,
 						textStyle: {
 							fontSize: 14,
+                            color:'#fff'
 							// fontWeight: 'bold'
 						}
 					}

app/src/views/components/WisdomFire.vue

@@ -0,0 +1,192 @@
+<template>
+    <div>
+        <div class="num-box">
+            <!-- 物联网建筑数量 -->
+            <div class="build-num">
+                <div class="build">
+                    <span><img src="../../assets/Vector (3).png" alt="">
+                        <span>已接入物联网建筑数</span>
+                    </span>
+                    <span class="num">1542</span>
+                    <span>栋</span>
+                </div>
+            </div>
+            <!-- 设备数 -->
+            
+            <div class="point-num">
+                <div class="build-num">
+                <div class="build">
+                   <span>设备总数
+                    <span class="num">1276</span>
+                   </span>
+                   <span>在线
+                    <span class="online">1200</span>
+                   </span>
+                   <span>警告
+                    <span class="warning">786</span>
+                   </span>
+                </div>
+                </div>
+                <div class="pressure">
+                    <div class="pressure-num">
+                        <div class="pressure-bg">2436</div>
+                      <ul class="pressure-list">
+                        <li>水压监测点位（个）</li>
+                        <li class="pressure-line">
+                            <span>在线</span>
+                         <img class="pressure-img" src="../../assets/Ellipse 275.png" alt="">
+                            <span class="bumer">2670
+                            </span>
+                            <span class="unit">个</span>
+                        </li>
+                        <li class="pressure-line">
+                            <span>告警</span>
+                         <img class="pressure-img" src="../../assets/Ellipse 275 (1).png" alt="">
+                            <span class="bumer">3144</span>
+                            <span class="unit">个</span>
+                        </li>
+                      </ul>
+                    </div>
+                    <div class="pressure-num">
+                        <div class="pressure-bg">2436</div>
+                      <ul class="pressure-list">
+                        <li>水压监测点位（个）</li>
+                        <li class="pressure-line">
+                            <span>在线</span>
+                         <img class="pressure-img" src="../../assets/Ellipse 275.png" alt="">
+                            <span class="bumer">2670
+                            </span>
+                            <span class="unit">个</span>
+                        </li>
+                        <li class="pressure-line">
+                            <span>告警</span>
+                         <img class="pressure-img" src="../../assets/Ellipse 275 (1).png" alt="">
+                            <span class="bumer">31</span>
+                            <span class="unit">个</span>
+                        </li>
+                      </ul>
+                    </div>
+                      <div class="pressure-num">
+                        <div class="pressure-bg">2436</div>
+                      <ul class="pressure-list">
+                        <li>水压监测点位（个）</li>
+                        <li class="pressure-line">
+                            <span>在线</span>
+                         <img class="pressure-img" src="../../assets/Ellipse 275.png" alt="">
+                            <span class="bumer">2670
+                            </span>
+                            <span class="unit">个</span>
+                        </li>
+                        <li class="pressure-line">
+                            <span>告警</span>
+                         <img class="pressure-img" src="../../assets/Ellipse 275 (1).png" alt="">
+                            <span class="bumer">31</span>
+                            <span class="unit">个</span>
+                        </li>
+                      </ul>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script >
+
+</script>
+
+<style  scoped>
+.num-box{
+    width: 414px;
+    display: flex;
+    flex-direction: column;
+    padding: 20px 15px;
+    
+}
+.build-num{
+    width: 100%;
+    height: 42px;
+    background: #657f91;
+    border-radius: 5px;
+   
+}
+.build{
+    height: 100%;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    font-size: 12px;
+    color: #fff;
+}
+.point-num{
+    flex: 1;
+    margin-top: 10px;
+}
+.num{
+    font-size: 30px;
+    color: #FFD74B;
+    margin-left: 5px;
+}
+img{
+    width: 20px;
+    height: 19px;
+}
+.online{
+    font-size: 30px;
+    color: #00FF66;
+    margin-left: 5px;
+}
+.warning{
+    font-size: 30px;
+    color: #FF4B23;
+    margin-left: 5px;
+}
+.pressure{
+    margin-top: 10px;
+    display: flex;
+    justify-content: space-between;
+}
+.pressure-num{
+    width: 30%;
+    height: 150px;
+    letter-spacing: 1px;
+    font-size: 12px;
+}
+.pressure-img{
+  display: inline-block !important;
+    width: 8px;
+    height: 8px;
+    margin-left: 5px;
+}
+.pressure-list{
+font-size: 12px;
+color: #fff;
+line-height: 25px;
+font-family: 'Abel';
+}
+.pressure-bg{
+    width: 66px;
+    height: 77px;
+    background: url('../../assets/water.png') no-repeat;
+    font-size:24px;
+    text-align: center;
+    padding-left: 3px;
+    margin: auto;
+}
+.pressure-line{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+   
+}
+.bumer{
+    width: 50px;
+    font-size: 16px;
+    font-family:'Abel' ;
+    text-align: center;
+    /* margin-right: 8px; */
+}
+.unit{
+    margin-right:12px;
+}
+</style>