生物安防

src/assets/BioSafety/330x75(1).svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="330px" height="75px" viewBox="0 0 330 75" enable-background="new 0 0 330 75" xml:space="preserve">
+<ellipse fill="none" stroke="#2EA7E0" stroke-miterlimit="10" cx="38.163" cy="37.656" rx="37.5" ry="36.719"/>
+<polygon fill="#2EA7E0" points="233.256,11.667 65.055,11.667 55.875,5.354 47.876,1.751 43.563,1.361 45.938,0 225.607,0 "/>
+<polygon fill="#2EA7E0" points="243.955,11.667 237.517,11.667 230.103,0 236.541,0 "/>
+<polygon fill="#2EA7E0" points="253.516,11.667 247.077,11.667 239.663,0 246.102,0 "/>
+<polygon fill="#2EA7E0" points="263.076,11.667 256.638,11.667 249.224,0 255.662,0 "/>
+<polygon fill="#2EA7E0" points="272.637,11.667 266.198,11.667 258.784,0 265.223,0 "/>
+<polygon fill="#2EA7E0" points="282.197,11.667 275.759,11.667 268.345,0 274.783,0 "/>
+<polygon fill="#2EA7E0" points="291.758,11.667 285.319,11.667 277.905,0 284.344,0 "/>
+<polygon fill="#2EA7E0" points="301.318,11.667 294.88,11.667 287.466,0 293.904,0 "/>
+<polygon fill="#2EA7E0" points="310.879,11.667 304.44,11.667 297.026,0 303.465,0 "/>
+<polygon fill="#2EA7E0" points="320.439,11.667 314.001,11.667 306.587,0 313.025,0 "/>
+<polygon fill="#2EA7E0" points="330,11.667 323.562,11.667 316.147,0 322.586,0 "/>
+</svg>

src/assets/BioSafety/330x75.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="330px" height="75px" viewBox="0 0 330 75" enable-background="new 0 0 330 75" xml:space="preserve">
+<ellipse fill="none" stroke="#2EA7E0" stroke-miterlimit="10" cx="38.163" cy="37.656" rx="37.5" ry="36.719"/>
+<polygon fill="#2EA7E0" points="233.256,8.038 60.625,8.038 53.299,4.587 45.917,1.724 43.563,0.938 45.938,0 225.607,0 "/>
+<polygon fill="#2EA7E0" points="245.678,8.038 239.368,8.038 232.103,0 238.412,0 "/>
+<polygon fill="#2EA7E0" points="255.047,8.038 248.737,8.038 241.472,0 247.781,0 "/>
+<polygon fill="#2EA7E0" points="264.416,8.038 258.106,8.038 250.841,0 257.15,0 "/>
+<polygon fill="#2EA7E0" points="273.785,8.038 267.476,8.038 260.21,0 266.52,0 "/>
+<polygon fill="#2EA7E0" points="283.154,8.038 276.845,8.038 269.579,0 275.889,0 "/>
+<polygon fill="#2EA7E0" points="292.523,8.038 286.214,8.038 278.948,0 285.258,0 "/>
+<polygon fill="#2EA7E0" points="301.893,8.038 295.583,8.038 288.317,0 294.627,0 "/>
+<polygon fill="#2EA7E0" points="311.262,8.038 304.952,8.038 297.687,0 303.996,0 "/>
+<polygon fill="#2EA7E0" points="320.631,8.038 314.321,8.038 307.056,0 313.365,0 "/>
+<polygon fill="#2EA7E0" points="330,8.038 323.69,8.038 316.425,0 322.734,0 "/>
+</svg>

src/assets/BioSafety/370x75(1).svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="370px" height="75px" viewBox="0 0 370 75" enable-background="new 0 0 370 75" xml:space="preserve">
+<ellipse fill="none" stroke="#2EA7E0" stroke-miterlimit="10" cx="38.5" cy="37.969" rx="37.5" ry="36.719"/>
+<polygon fill="#2EA7E0" points="270.103,11.979 65.392,11.979 56.212,5.666 48.213,2.063 43.899,1.673 46.275,0.313 262.454,0.313 
+	"/>
+<polygon fill="#2EA7E0" points="283.955,11.979 277.517,11.979 270.103,0.313 276.541,0.313 "/>
+<polygon fill="#2EA7E0" points="293.516,11.979 287.077,11.979 279.663,0.313 286.102,0.313 "/>
+<polygon fill="#2EA7E0" points="303.076,11.979 296.638,11.979 289.224,0.313 295.662,0.313 "/>
+<polygon fill="#2EA7E0" points="312.637,11.979 306.198,11.979 298.784,0.313 305.223,0.313 "/>
+<polygon fill="#2EA7E0" points="322.197,11.979 315.759,11.979 308.345,0.313 314.783,0.313 "/>
+<polygon fill="#2EA7E0" points="331.758,11.979 325.319,11.979 317.905,0.313 324.344,0.313 "/>
+<polygon fill="#2EA7E0" points="341.318,11.979 334.88,11.979 327.466,0.313 333.904,0.313 "/>
+<polygon fill="#2EA7E0" points="350.879,11.979 344.44,11.979 337.026,0.313 343.465,0.313 "/>
+<polygon fill="#2EA7E0" points="360.439,11.979 354.001,11.979 346.587,0.313 353.025,0.313 "/>
+<polygon fill="#2EA7E0" points="370,11.979 363.562,11.979 356.147,0.313 362.586,0.313 "/>
+</svg>

src/assets/BioSafety/370x75.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="370px" height="75px" viewBox="0 0 370 75" enable-background="new 0 0 370 75" xml:space="preserve">
+<polygon fill="#2EA7E0" points="290.841,8.038 81.631,8.038 81.631,0 283.192,0 "/>
+<polygon fill="#2EA7E0" points="304.416,8.038 298.106,8.038 290.841,0 297.15,0 "/>
+<polygon fill="#2EA7E0" points="313.785,8.038 307.476,8.038 300.21,0 306.52,0 "/>
+<polygon fill="#2EA7E0" points="323.154,8.038 316.845,8.038 309.579,0 315.889,0 "/>
+<polygon fill="#2EA7E0" points="332.523,8.038 326.214,8.038 318.948,0 325.258,0 "/>
+<polygon fill="#2EA7E0" points="341.893,8.038 335.583,8.038 328.317,0 334.627,0 "/>
+<polygon fill="#2EA7E0" points="351.262,8.038 344.952,8.038 337.687,0 343.996,0 "/>
+<polygon fill="#2EA7E0" points="360.631,8.038 354.321,8.038 347.056,0 353.365,0 "/>
+<polygon fill="#2EA7E0" points="370,8.038 363.69,8.038 356.425,0 362.734,0 "/>
+<rect x="0.594" y="0.5" fill="none" stroke="#2EA7E0" stroke-miterlimit="10" width="81.037" height="74.063"/>
+</svg>

src/main.js

@@ -13,7 +13,7 @@ import store from './store'
 import 'lib-flexible/flexible'
 import './assets/ttf/font.css';
 import echart from 'echarts';
-import { DatePicker, Row, Col, Select, Option, Icon, Input, Button, Message, Cascader, Loading } from 'element-ui';
+import { DatePicker, Row, Col, Select, Option, Icon, Input, Button, Message, Cascader, Loading, Avatar } from 'element-ui';
 
 Vue.config.productionTip = false
 Vue.prototype.$echarts = echart
@@ -28,6 +28,7 @@ Vue.use(Button)
 Vue.use(Message)
 Vue.use(Cascader)
 Vue.use(Loading)
+Vue.use(Avatar)
 Vue.prototype.$message = Message;
 
 new Vue({

src/views/Alarm/Alarm.vue

@@ -162,7 +162,7 @@
           <div class="alarm-title-right"></div>
         </div>
         <div class="alarm-content">
-          <swiper style="height: 100%;  margin-top: auto; margin-bottom: auto;" class="swiper" :options="swiperOption">
+          <swiper v-if="personList.length > 0" style="height: 100%;  margin-top: auto; margin-bottom: auto;" class="swiper" :options="swiperOption">
             <swiper-slide v-for="(item, i) in personList" :key="i">
               <div class="case" @click="open(item)">
                 <div class="case-left">
@@ -179,6 +179,7 @@
               </div>
             </swiper-slide>
           </swiper>
+          <div v-else style="line-height: 200px; color: white; font-size: 20px">暂无异常人脸</div>
         </div>
       </div>
     </div>
@@ -598,17 +599,21 @@ export default {
     cursor: pointer;
   }
   .case {
-    width: 100%;
-    height: 100%;
-    background: url("../../assets/BioSafety/some.png") no-repeat;
+    margin: 0 auto;
+    width: 370px;
+    height: 75px;
+    background: url("../../assets/BioSafety/370x75(1).svg") no-repeat;
     background-size: 100% 100%;
+    position: relative;
     display: flex;
-    cursor: pointer;
   }
   .case-left {
-    width: 82px;
-    height: 100%;
+    width: 75px;
+    height: 75px;
     overflow: hidden;
+    border-radius: 100%;
+    display: flex;
+    align-items: center;
   }
   .case-right {
     margin-left: 10px;

src/views/BioSafety/BioSafety.vue

@@ -61,7 +61,8 @@
               <swiper-slide v-for="(item, i) in carListContent" :key="i">
                 <div class="case" @click="open(item, 1)">
                   <div class="case-left1">
-                    <img style="align-items: center;" :src="item.originalPicPath" width="100%" alt="">
+                    <el-avatar :size="75" :src="item.originalPicPath" fit="cover"></el-avatar>
+<!--                    <img style="align-items: center;" :src="item.originalPicPath" width="100%" alt="">-->
                   </div>
                   <div class="case-right">
                     <div class="case-time">{{ item.capTimeStr }}</div>
@@ -130,6 +131,7 @@
               <swiper-slide v-for="(item, i) in personList" :key="i">
                 <div class="case" @click="open(item, 2)">
                   <div class="case-left1">
+<!--                    <el-avatar :size="75" :src="item.recordImage" fit="none"></el-avatar>-->
                     <img :src="item.recordImage" width="100%" alt="">
                   </div>
                   <div class="case-right">
@@ -247,7 +249,8 @@
               <swiper-slide v-for="(item, i) in sizhuList" :key="i">
                 <div class="case case1" @click="open(item, 3)">
                   <div class="case-left">
-                    <img :src="item.alarmPicture" width="100%" alt="">
+                    <el-avatar :size="75" :src="item.alarmPicture" fit="cover"></el-avatar>
+<!--                    <img :src="item.alarmPicture" width="100%" alt="">-->
                   </div>
                   <div class="case-right">
                     <div class="case-time">{{ item.alarmDate }}</div>
@@ -737,9 +740,9 @@ export default {
     color: white;
   }
   .case {
-    width: 100%;
-    height: 100%;
-    background: url("../../assets/BioSafety/some.png") no-repeat;
+    width: 330px;
+    height: 75px;
+    background: url("../../assets/BioSafety/330x75(1).svg") no-repeat;
     background-size: 100% 100%;
     position: relative;
     display: flex;
@@ -833,17 +836,26 @@ export default {
     background-size: 100% 100%;
   }
   .case1 {
-    height: 60px;
+    width: 370px;
+    height: 75px;
+    background: url("../../assets/BioSafety/370x75(1).svg") no-repeat;
+    background-size: 100% 100%;
+    position: relative;
+    display: flex;
   }
   .case-left1 {
-    width: 60px;
-    height: 100%;
+    width: 75px;
+    height: 75px;
+    overflow: hidden;
+    border-radius: 100%;
     display: flex;
     align-items: center;
   }
   .case-left {
-    width: 100px;
-    height: 100%;
+    width: 75px;
+    height: 75px;
+    overflow: hidden;
+    border-radius: 100%;
   }
   .case-right {
     flex: 1;