perf: 消防物联网区域分布

app/src/assets/css/main.css

@@ -22,3 +22,34 @@ html,body {
 .Ads_adsClose_vIw-Kb img {
   display: none;
 }
+
+
+
+.el-select-dropdown.el-popper {
+  background-color: #4167a0;
+}
+.el-select-dropdown.el-popper .el-select-dropdown__empty{
+  color: #fff;
+}
+.el-popper[x-placement^=bottom] .popper__arrow::after  {
+  border-bottom-color: #4167a0 !important;
+}
+.el-select-dropdown.el-popper {
+  border: 1px solid rgba(0, 213, 255, 0.6) !important;
+}
+.el-select-dropdown.el-popper li.el-select-dropdown__item span {
+  color: #fff;
+}
+.el-select-dropdown.el-popper
+  li.el-select-dropdown__item.selected
+  span {
+  color: #2f7df2;
+}
+.el-select-dropdown.el-popper .el-select-dropdown__item.hover {
+  background-color: #2f7df2;
+}
+.el-select-dropdown.el-popper
+  li.el-select-dropdown__item.hover.selected
+  span {
+  color: #fff !important;
+}

app/src/views/Fire/components/UnitInfo.vue

@@ -301,6 +301,7 @@ export default {
 
 .el-select-dropdown.el-popper {
   background-color: #4167a0;
+  color: #fff;
 }
 .el-popper[x-placement^=bottom] .popper__arrow::after  {
   border-bottom-color: #4167a0 !important;

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

@@ -0,0 +1,165 @@
+<template>
+  <div class="regional-distribution">
+    <div>
+      <el-select v-model="selectOption" style="width: 100%;" size="mini">
+        <el-option
+            v-for="item in options"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          >
+        </el-option>
+      </el-select>
+    </div>
+    <div>
+      <div class="row header">
+        <span class="idx">序号</span>
+        <span class="area">区域</span>
+        <span class="build">建筑数量（栋）</span>
+        <span class="tim">终端数量（个）</span>
+        <span class="percent">覆盖率</span>
+      </div>
+      <VueSeamlessScroll :data="list" :class-option="classOption" class="warp">
+        <ul class="item">
+          <li class="row" v-for="(item, index) in list" :key="index">
+            <span class="idx">{{ index + 1 }}</span>
+            <span class="area">{{ item[0] }}</span>
+            <span class="build">{{ item[1] }}</span>
+            <span class="tim">{{ item[2] }}</span>
+            <span class="percent">{{ item[3] }}</span>
+          </li>
+        </ul>
+      </VueSeamlessScroll>
+    </div>
+  </div>
+</template>
+
+<script>
+import VueSeamlessScroll from "vue-seamless-scroll";
+export default {
+  name: "RegionalDistribution",
+  components: {
+    VueSeamlessScroll,
+  },
+  data() {
+    return {
+      list: [
+        ["万州区", "1200", 8765, "23%"],
+        ["万州区", "1200", 8765, "23%"],
+        ["万州区", "1200", 8765, "23%"],
+        ["万州区", "1200", 8765, "23%"],
+        ["万州区", "1200", 8765, "23%"],
+        ["万州区", "1200", 8765, "23%"],
+        ["万州区", "1200", 8765, "23%"],
+        ["万州区", "1200", 8765, "23%"],
+        ["万州区", "1200", 8765, "23%"],
+      ],
+      options: [
+        {label: '已建物联网排名', value: 1},
+        {label: '已建物水压监测排名', value: 2},
+        {label: '已建电器火灾监测排名', value: 3},
+        {label: '已建消防通道检测排名', value: 4},
+        {label: '已建火灾报警主机监测排名', value: 5},
+        {label: '已建消防控制室人员离岗监控排名', value: 6},
+      ],
+      selectOption: 1
+    };
+  },
+  computed: {
+    classOption() {
+      return {
+        singleHeight: 43,
+      };
+    },
+  },
+};
+</script>
+<style scoped lang="less">
+.regional-distribution {
+  padding: 9px 8px 0px 8px;
+   // padding: 10px 10px 0px 20px;
+   ::v-deep(.el-input__inner) {
+    text-align: right;
+    border: none;
+    background: linear-gradient(360deg, rgba(0,148,255, .5) 0%, rgba(0,148,255, .31) 100%);
+    color: #fff;
+  }
+}
+.warp {
+  height: 374px;
+  margin: 0 auto;
+  overflow: hidden;
+  .item {
+    list-style: none;
+    padding: 0;
+    margin: 0 auto;
+    cursor: pointer;
+  }
+}
+
+.header {
+  color: #61DBFF !important;
+  height: 38px !important;
+  background-color: rgba(0, 163, 255, 0.3) !important;
+  margin-top: 2px;
+  letter-spacing: 1px;
+  .is_notice {
+    line-height: 19px;
+    font-size: 10px;
+  }
+}
+
+li.row > span {
+  text-align: center;
+  font-size: 14x;
+  position: relative;
+  display: inline-block;
+}
+
+li.row {
+  box-sizing: border-box;
+}
+
+.row,
+li,
+a {
+  display: block;
+  height: 39px;
+  line-height: 39px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 14px;
+  background-color: rgba(0, 0, 0, 0.2);
+  color: #fff;
+  margin-top: 4px;
+  .idx,
+  .area,
+  .build,
+  .tim,
+  .percent {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .idx {
+    flex: .1;
+  }
+
+  .area {
+    flex: 0.25;
+  }
+  .build {
+    flex: 0.25;
+  }
+  .tim {
+    flex: 0.25;
+    color: #61DBFF;
+  }
+  .percent {
+    flex: 0.15;
+  }
+}
+</style>
+

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

@@ -5,7 +5,7 @@
         <LinearText
           style="display: inline-block"
           :text="item.num"
-          fontSize="32px"
+          fontSize="24px"
         ></LinearText>
         <div class="text">{{ item.title }}</div>
         <div>
@@ -25,34 +25,21 @@
       <span style="font-size: 16px">检测点位统计</span>
       <div class="online-num">
         <div class="status">
-          <span class="online line"></span>
-          <span>在线</span>
+          <span class="online line">在线</span>
         </div>
         <div>
-          <span class="offline line"></span>
-          <span>离线</span>
+          <span class="offline line">离线</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=""> -->
+          <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
-              >个/栋
+              <span class="calc-percent">{{item.allnum}}/{{ item.average }}</span>个/栋
             </div>
             <div class="on-line">
              <div>
@@ -69,34 +56,20 @@
           </div>
         </div>
       </div>
-      <div class="last-line">
-        <div style="width: 90%; padding: 0px 15px;">
+      <div class="last-line"> 
+        <img src="../../../assets/images/Group 1321314604.png" alt="" />
+        <div style="width: 86%;">
             <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>
+              <span> <span class="calc-percent">10731/676</span>个/栋</span>
             </div>
-            <div class="on-line-two">
-             <div style="margin-right: 48px;">
-                <span class="online lines"></span>
-              <span  style="font-size: 20px;">2613</span
+            <div class="on-line">
+             <div>
+              <span class="online lines" style="font-size: 18px;">2613</span
               >(个/栋)
              </div>
               <div>
-                <span class="offline lines"></span>
-              <span style="font-size: 20px;">613</span
+                <span class="lines offline" style="font-size: 18px;">613</span
               >(个/栋)
               </div>
             </div>
@@ -181,32 +154,36 @@ export default {
 
 <style lang="less" scoped>
 .iot {
-  margin: 10px 10px;
+  margin: 13px 5px 0px 5px ;
   .all-unit {
     display: flex;
     justify-content: space-between;
+    gap: 11px;
   }
   .iot-num {
-    width: 160px;
-    height: 98px;
-    background: #304c5a;
+    width: 168px;
+    height: 88px;
+    background: linear-gradient(360deg, rgba(0,148,255, 0) 0%, rgba(0,148,255, .6) 100%);;
     border: 1px solid #1a5878;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     font-size: 12px;
-    line-height: 30px;
+    padding: 4px 0px;
+    box-sizing: border-box;
+    gap: 4px;
     .num {
-      font-size: 32px;
+      font-size: 24px;
       color: #ffd74b;
+      padding: 0px 5px;
     }
   }
 }
 .PointStatistics {
   width: 94%;
   height: 37px;
-  background: #36494d; //渐变
+  background: rgba(0,213,255, .24); //渐变
   margin: 10px 0;
   color: #fff;
   display: flex;
@@ -228,23 +205,24 @@ export default {
   justify-content: space-between;
   flex-wrap: wrap;
 }
-.line {
+.line::before {
+  content: "";
   display: inline-block;
   width: 8px;
   height: 8px;
   border-radius: 50%;
   margin-right: 5px;
 }
-.online {
+.online::before {
   background-color: #2fde60;
 }
-.offline {
+.offline::before {
   background-color: #ff4f4f;
 }
 .alarm {
-  width: 258px;
+  width: 264px;
   height: 81px;
-  background: #425964;  //渐变
+  background: linear-gradient(360deg, rgba(61,220,255, .30) 0%,rgba(61, 232, 255, .0)  100%);
   line-height: 40px;
   margin-top: 10px;
   letter-spacing: 1px;
@@ -261,14 +239,19 @@ export default {
   img {
     display: inline-block;
     width: 52px;
-    height: 50px;
+    height: 49px;
   }
   .inline-bor{
     // width: 124px;
     border-bottom: 1px dotted #7789CD;
+    .calc-percent {
+      color: #44F1FF;
+      font-size: 18px;
+    }
   }
 }
-.lines{
+.lines::before {
+    content: "";
     display: inline-block;
     border-radius: 50%;
     width: 10px;
@@ -283,17 +266,32 @@ export default {
 .last-line{
     width: 100%;
     height: 80px;
-    background: #1a5878;
+    background: linear-gradient(360deg, rgba(61,220,255, .30) 0%,rgba(61, 232, 255, .0)  100%);
     margin-top: 5px;
     line-height: 40px;
+    display: flex;
+    align-items: center;
+    img {
+      display: inline-block;
+      width: 52px;
+      height: 49px;
+    }
     .inline-bor{
         display: flex;
         justify-content: space-between;
-        border-bottom: 1px dotted #7789CD;
         font-size: 16px;
+        border-bottom: 1px dotted #7789CD;
+        .calc-percent {
+          color: #44F1FF;
+          font-size: 18px;
+        }
     }
-   .on-line-two{
-    display: flex;
-   }
+    .on-line {
+      display: flex;
+      justify-content: start;
+      gap: 20px;
+      padding: 0px 10px;
+    }
+
 }
 </style>

app/src/views/Iot/index.vue

@@ -15,14 +15,14 @@
             <IotVideo/>
         </border-panel>
       </div>
-  
       <div>
         <border-panel
-          height="521px"
-          style="margin-bottom: 6px"
+          height="469px"
+          width="540px" :header-type="4" 
+          style="margin-bottom: 10px"
           title="区域分布"
         >
-     
+         <RegionalDistribution />
         </border-panel>
         <border-panel
           height="421px"
@@ -38,8 +38,9 @@
 import TotalityInfo from './components/TotalityInfo.vue';
 import IotVideo from './components/IotVideo.vue'
 import AlarmHandling from './components/AlarmHandling.vue'
-  export default {
-    components: {  TotalityInfo,IotVideo,AlarmHandling},
+import RegionalDistribution from "./components/RegionalDistribution.vue";
+export default {
+    components: {  TotalityInfo, RegionalDistribution, IotVideo,AlarmHandling },
   };
   </script>