生物安防100%

src/assets/BioSafety/u2475.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" height="21px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1 0 0 1 -1307 -735 )">
+    <path d="M 15.6666666666667 10.6666666666666  L 0 0.666666666666629  L 0 21  L 15.6666666666667 10.6666666666666  Z " fill-rule="nonzero" fill="#01c701" stroke="none" transform="matrix(1 0 0 1 1307 735 )" />
+  </g>
+</svg>

src/assets/BioSafety/u2476.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" height="21px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1 0 0 1 -1467 -735 )">
+    <path d="M 0.333333333333343 10.6666666666666  L 16 0.666666666666629  L 16 21  L 0.333333333333343 10.6666666666666  Z " fill-rule="nonzero" fill="#01c701" stroke="none" transform="matrix(1 0 0 1 1467 735 )" />
+  </g>
+</svg>

src/views/BioSafety/BioSafety.vue

@@ -102,7 +102,94 @@
         </div>
       </div>
     </div>
-    <div class="bio-flex-1"></div>
+    <div class="bio-flex-1">
+      <div class="bio-flex-1-left">
+        <div class="bio-title">
+          <div class="bio-title-left"></div>
+          <div class="bio-title-center">人员管理</div>
+          <div class="bio-title-right"></div>
+        </div>
+        <div class="bio-vertical">
+          <div class="bio-vertical-left">
+            <div class="bio-vertical-title">
+              <div class="title-left"></div>
+              <div class="title-center">
+                <span>进出人次</span>
+                <strong>&nbsp;126</strong>
+              </div>
+              <div class="title-right"></div>
+            </div>
+            <div class="bio-vertical-content">
+              <div class="content-img"></div>
+              <div style="color: white; font-size: 14px">
+                <p>正常进入</p>
+                <span><strong style="font-size: 22px; font-weight: 600">99</strong>人次</span>
+              </div>
+            </div>
+            <div class="bio-vertical-content">
+              <div class="content-img content-img-1"></div>
+              <div style="color: white; font-size: 14px">
+                <p>违规次数</p>
+                <span><strong style="font-size: 22px; font-weight: 600">27</strong>人次</span>
+              </div>
+            </div>
+          </div>
+          <div class="bio-vertical-right">
+            <chart-bar :data="data2"></chart-bar>
+          </div>
+        </div>
+      </div>
+      <div class="bio-flex-1-center">
+        <div class="bio-title">
+          <div class="bio-title-left"></div>
+          <div class="bio-title-center">物资熏蒸</div>
+          <div class="bio-title-right"></div>
+        </div>
+        <div class="bio-vertical">
+          <chart-bar :data="data3"></chart-bar>
+        </div>
+      </div>
+      <div class="bio-flex-1-left">
+        <div class="bio-title">
+          <div class="bio-title-left"></div>
+          <div class="bio-title-center">死猪管控</div>
+          <div class="bio-title-right"></div>
+        </div>
+        <div class="bio-vertical">
+          <div class="bio-vertical-left">
+            <div class="bio-vertical-title">
+              <div class="title-left"></div>
+              <div class="title-center">
+                <span>视频抓取数</span>
+                <strong>&nbsp;126</strong>
+              </div>
+              <div class="title-right"></div>
+            </div>
+            <div class="bio-vertical-content">
+              <div class="content-img content-img-2"></div>
+              <div style="color: white; font-size: 14px">
+                <p>七日抓取次数</p>
+                <span><strong style="font-size: 22px; font-weight: 600">99</strong></span>
+              </div>
+            </div>
+            <div class="bio-vertical-content">
+              <div class="content-img content-img-3"></div>
+              <div style="color: white; font-size: 14px">
+                <p>最近抓取时间</p>
+                <span><strong style="font-size: 22px; font-weight: 600">07-01</strong></span>
+              </div>
+            </div>
+          </div>
+          <div class="bio-vertical-right">
+            <swiper style="height: 100%;  margin-top: auto; margin-bottom: auto;" class="swiper" :options="swiperOption">
+              <swiper-slide v-for="item in 10" :key="item">
+                <div class="case case1"></div>
+              </swiper-slide>
+            </swiper>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -140,6 +227,20 @@ export default {
         data: [12, 13, 10, 13, 90, 23, 21],
         name: '',
         unit: '人次'
+      },
+      data2: {
+        id: 2,
+        time: ['8:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00'],
+        data: [21, 13, 10, 14, 20, 23, 21],
+        name: '',
+        unit: '人次'
+      },
+      data3: {
+        id: 3,
+        time: ['8:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00'],
+        data: [21, 13, 10, 14, 20, 23, 21],
+        name: '',
+        unit: '次'
       }
     }
   }
@@ -201,7 +302,8 @@ export default {
   .bio-out-center {
     width: 280px;
     height: 100%;
-    background-color: #26688E;
+    background: url("../../assets/BioSafety/base.jpg") no-repeat;
+    background-size: 100% 100%;
     display: flex;
     align-items: center;
     justify-content: space-around;
@@ -213,7 +315,7 @@ export default {
     background-size: 100% 100%;
   }
   .bio-title-left {
-    width: 325px;
+    flex: 1;
     height: 26px;
     background: url("../../assets/BioSafety/u1717.svg") no-repeat;
     background-size: 100% 100%;
@@ -237,7 +339,7 @@ export default {
     font-size: 16px;
   }
   .bio-title-right {
-    width: 325px;
+    flex: 1;
     height: 26px;
     background: url("../../assets/BioSafety/u1718.svg") no-repeat;
     background-size: 100% 100%;
@@ -351,4 +453,88 @@ export default {
     display: flex;
     justify-content: space-between;
   }
+  .bio-flex-1-left {
+    width: 600px;
+    height: 100%;
+  }
+  .bio-flex-1-center {
+    width: 500px;
+    height: 100%;
+  }
+  .bio-vertical {
+    width: 100%;
+    height: calc(100% - 26px);
+    box-sizing: border-box;
+    padding: 10px;
+    display: flex;
+    justify-content: space-between;
+  }
+  .bio-vertical-left {
+    width: 165px;
+    height: 100%;
+  }
+  .bio-vertical-right {
+    margin-left: 10px;
+    flex: 1;
+  }
+  .bio-vertical-title {
+    width: 100%;
+    height: 25px;
+    line-height: 25px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .title-left {
+    width: 16px;
+    height: 100%;
+    background: url("../../assets/BioSafety/u2475.svg") no-repeat;
+    background-size: 100% 100%;
+  }
+  .title-center {
+    flex: 1;
+    font-size: 14px;
+    color: #fff;
+    text-align: center;
+  }
+  .title-center strong {
+    font-size: 25px;
+  }
+  .title-right {
+    width: 16px;
+    height: 100%;
+    background: url("../../assets/BioSafety/u2476.svg") no-repeat;
+    background-size: 100% 100%;
+  }
+  .bio-vertical-content {
+    width: 100%;
+    height: 65px;
+    background: url("../../assets/BioSafety/base.jpg") no-repeat;
+    background-size: 100% 100%;
+    margin-top: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+  }
+  .content-img {
+    width: 40px;
+    height: 40px;
+    background: url("../../assets/BioSafety/u3222.png") no-repeat;
+    background-size: 100% 100%;
+  }
+  .content-img-1 {
+    background: url("../../assets/BioSafety/u2500.svg") no-repeat;
+    background-size: 100% 100%;
+  }
+  .content-img-2 {
+    background: url("../../assets/BioSafety/u2168.svg") no-repeat;
+    background-size: 100% 100%;
+  }
+  .content-img-3 {
+    background: url("../../assets/BioSafety/u2179.svg") no-repeat;
+    background-size: 100% 100%;
+  }
+  .case1 {
+    height: 60px;
+  }
 </style>

src/views/BioSafety/chart/ChartBar.vue

@@ -142,6 +142,10 @@ export default {
   mounted() {
     this.myChart = this.$echarts.init(document.getElementById('chartBar-' + this.data.id));
     this.init()
+    let that = this;
+    window.addEventListener('resize', function () {
+      that.myChart.resize()
+    })
   }
 }
 </script>