Merge branch 'zz-test' into master

app/src/views/Iot/components/TotalityInfo.vue

@@ -1,57 +1,195 @@
 <template>
-    <div class="iot">
+  <div class="iot">
     <div class="all-unit">
-         <div class="iot-num" v-for="(item,index) in list" :key="index">
-            <LinearText
-            style="display: inline-block"
-            :text="item.num"
-            fontSize="32px"
-          ></LinearText>
-            <div class="text">{{  item.title}}</div>
-            <div>设备总数
-                <span class="num">{{ item.allNum }}</span>个
-            </div>
-         </div>
+      <div class="iot-num" v-for="(item, index) in list" :key="index">
+        <LinearText
+          style="display: inline-block"
+          :text="item.num"
+          fontSize="32px"
+        ></LinearText>
+        <div class="text">{{ item.title }}</div>
+        <div>
+          {{ item.text }}
+          <span
+            class="num"
+            :style="{
+              color: changaColor(item.text),
+            }"
+            >{{ item.allNum }}</span
+          >个
+        </div>
+      </div>
+    </div>
+    <!-- 检测点位统计 -->
+    <div class="PointStatistics">
+      <span style="font-size: 16px">检测点位统计</span>
+      <div class="online-num">
+        <div class="status">
+          <span class="online line"></span>
+          <span>在线</span>
+        </div>
+        <div>
+          <span class="offline line"></span>
+          <span>离线</span>
+        </div>
+      </div>
     </div>
+    <div class="ala-n">
+      <div v-for="(item, index) in lineList" :key="index" class="alarm">
+        <div class="alarm-host">
+          <!-- <img :src="item.imgs" alt=""> -->
+          <div style="width: 90%;">
+            <div class="inline-bor">
+              <span style="font-size: 14px">{{ item.text }}</span>
+              <LinearText
+                style="display: inline-block"
+                :text="item.allnum"
+                fontSize="20px"
+              ></LinearText>
+              /
+              <LinearText
+                style="display: inline-block"
+                :text="item.average"
+                fontSize="20px"
+              ></LinearText
+              >个/栋
+            </div>
+            <div class="on-line">
+             <div>
+                <span class="online lines"></span>
+              <span  style="font-size: 18px;">{{ item.line }}</span
+              >(个/栋)
+             </div>
+              <div>
+                <span class="offline lines"></span>
+              <span style="font-size: 18px;">{{ item.offNum }}</span
+              >(个/栋)
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="last-line">
+        <div style="width: 90%;">
+            <div class="inline-bor">
+              <span style="font-size: 14px">消防控制室人员离岗</span>
+                <div>
+                    <LinearText
+                style="display: inline-block"
+                text="10731"
+                fontSize="20px"
+              ></LinearText>
+              /
+              <LinearText
+                style="display: inline-block"
+                text="676"
+                fontSize="20px"
+              ></LinearText
+              >个/栋
+                </div>
+            </div>
+            <div class="on-line">
+             <div>
+                <span class="online lines"></span>
+              <span  style="font-size: 18px;">2613</span
+              >(个/栋)
+             </div>
+              <div>
+                <span class="offline lines"></span>
+              <span style="font-size: 18px;">613</span
+              >(个/栋)
+              </div>
+            </div>
+          </div>
+      </div>
     </div>
+  </div>
 </template>
 
-<script >
-export default{
-    data(){
-        return{
-            list:[
-                {
-                    num:1542,
-                    title:'已完成物联网建筑数(栋)',
-                    allNum:1276
-                },
-                {
-                    num:1542,
-                    title:'在线建筑数(栋)',
-                    allNum:1200
-                },
-                {
-                    num:542,
-                    title:'告警建筑数(栋)',
-                    allNum:768
-                }
-            ]
-        }
-    }
-}
+<script>
+import imgs from "../../../assets/images/Group 1321314604.png";
+export default {
+  data() {
+    return {
+      list: [
+        {
+          num: 1542,
+          title: "已完成物联网建筑数(栋)",
+          text: "设备总数",
+          allNum: 1276,
+        },
+        {
+          num: 1542,
+          title: "在线建筑数(栋)",
+          text: "在线",
+          allNum: 1200,
+        },
+        {
+          num: 542,
+          title: "告警建筑数(栋)",
+          text: "报警",
+          allNum: 768,
+        },
+      ],
+      lineList: [
+        {
+          imgs: imgs,
+          text: "火灾报警主机",
+          allnum: 10731,
+          average: 676,
+          line: 2613,
+          offNum: 613,
+        },
+        {
+          imgs: imgs,
+          text: "水压",
+          allnum: 10731,
+          average: 676,
+          line: 2613,
+          offNum: 613,
+        },
+        {
+          imgs: imgs,
+          text: "点起火灾",
+          allnum: 10731,
+          average: 676,
+          line: 2613,
+          offNum: 613,
+        },
+        {
+          imgs: imgs,
+          text: "生命通道",
+          allnum: 10731,
+          average: 676,
+          line: 2613,
+          offNum: 613,
+        },
+      ],
+    };
+  },
+  methods: {
+    changaColor(text) {
+      return {
+        设备总数: "#FFD74B",
+        在线: "#00FF66",
+        报警: "#FF4B23",
+      }[text];
+    },
+  },
+};
 </script>
 
 <style lang="less" scoped>
-.iot{
-    margin: 10px 10px;
-   .all-unit{
+.iot {
+  margin: 10px 10px;
+  .all-unit {
     display: flex;
-   }
-.iot-num{
+    justify-content: space-between;
+  }
+  .iot-num {
     width: 160px;
     height: 98px;
-    background:#304c5a ;
+    background: #304c5a;
     border: 1px solid #1a5878;
     display: flex;
     flex-direction: column;
@@ -59,10 +197,100 @@ export default{
     align-items: center;
     font-size: 12px;
     line-height: 30px;
-    .num{
+    .num {
       font-size: 32px;
-        color: #FFD74B;
+      color: #ffd74b;
+    }
+  }
+}
+.PointStatistics {
+  width: 94%;
+  height: 37px;
+  background: #36494d; //渐变
+  margin: 10px 0;
+  color: #fff;
+  display: flex;
+  justify-content: space-between;
+
+  align-items: center;
+  padding: 0 15px;
+  .online-num {
+    display: flex;
+    margin-right: 32px;
+
+    .status {
+      margin-right: 22px;
     }
+  }
+}
+.ala-n {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+.line {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  margin-right: 5px;
+}
+.online {
+  background-color: #2fde60;
+}
+.offline {
+  background-color: #ff4f4f;
+}
+.alarm {
+  width: 258px;
+  height: 81px;
+  background: #425964;  //渐变
+  line-height: 40px;
+  margin-top: 10px;
+  letter-spacing: 1px;
+  .alarm-host {
+    display: inline-block;
+    // width: 124px;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    text-align: center;
+    // background: url('../../../assets/images/Group 1321314604.png') no-repeat;
+    // background-size: 100% 100%;
+  }
+  img {
+    display: inline-block;
+    width: 52px;
+    height: 50px;
+  }
+  .inline-bor{
+    // width: 124px;
+    border-bottom: 1px dotted #7789CD;
+  }
+}
+.lines{
+    display: inline-block;
+    border-radius: 50%;
+    width: 10px;
+    height: 10px;
+    margin-right: 6px;
 }
+.on-line{
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+}
+.last-line{
+    width: 100%;
+    height: 80px;
+    background: #1a5878;
+    margin-top: 5px;
+    line-height: 40px;
+    .inline-bor{
+        display: flex;
+        justify-content: space-between;
+       
+        font-size: 16px;
+    }
 }
-</style>
+</style>

app/src/views/Iot/index.vue

@@ -2,13 +2,16 @@
     <div style="padding: 0px 35px; display: flex; justify-content: space-between">
       <div>
         <border-panel
-          height="443px"     
+          height="492px"  
+          :header-type="4" 
+          width="544px"  
           style="margin-bottom: 6px"
           title="总体情况            "
         >
         <TotalityInfo/>
         </border-panel>
-        <border-panel height="500px" style="margin-bottom: 6px" title="管理内容">
+        <border-panel height="450px"  :header-type="4" 
+          width="544px"   style="margin-bottom: 6px" title="视频监控">
       
         </border-panel>
       </div>