From 9bfd32ac0781b51d2b8479b91a9754f18060fcb9 Mon Sep 17 00:00:00 2001
From: liukangdong <898885815@qq.com>
Date: 星期四, 14 十一月 2024 17:48:50 +0800
Subject: [PATCH] ll

---
 screen/src/views/SecurityControl.vue |  375 +++++++++++++++++++++++++++++++++--------------------
 1 files changed, 231 insertions(+), 144 deletions(-)

diff --git a/screen/src/views/SecurityControl.vue b/screen/src/views/SecurityControl.vue
index 4953e4a..282403c 100644
--- a/screen/src/views/SecurityControl.vue
+++ b/screen/src/views/SecurityControl.vue
@@ -43,11 +43,10 @@
               <div class="rate">
                 <div class="la">
                   <span>杞︿綅浣跨敤鐜�</span>
-                  <span v-if="data.inParkCarTotal && data.parkingLotTotal" class="num">{{ ((data.inParkCarTotal /
-                    data.parkingLotTotal) * 100).toFixed(0) }}%</span>
+                  <span v-if="data.inParkCarTotal && data.parkingLotTotal" class="num">{{ data.parkingUseRate }}%</span>
                 </div>
                 <div class="val">
-                  <Percent :rate="((data.inParkCarTotal / data.parkingLotTotal) * 100).toFixed(0)" />
+                  <Percent :rate="data.parkingUseRate" />
                 </div>
               </div>
             </div>
@@ -89,7 +88,7 @@
             <div class="car_static">
               <div class="echart_wrap">
                 <div class="pie_text">
-                  <div class="fs30"><strong v-if="data.visitJobCarTotal">{{ data.internalJobCarTotal +
+                  <div class="fs30"><strong v-if="data.visitJobCarTotal || data.visitJobCarTotal == 0">{{ data.internalJobCarTotal +
                     data.relatedJobCarTotal + data.visitJobCarTotal }}</strong></div>
                   <div>璐ц溅</div>
                 </div>
@@ -111,30 +110,30 @@
           <div v-if="showJk" class="jiankong">
             <img class="jk_bg" src="@/assets/images/SecurityControl/jiankong_bg@2x.png" alt="">
             <div class="content">
-              <div class="video"></div>
+              <video :src="activeVideo" class="video"></video>
             </div>
             <div class="right_wrap">
               <div class="menus">
                 <div class="search_wrap">
                   <img class="search" src="@/assets/images/SecurityControl/ic_search@2x.png" alt="">
-                  <input v-model="dataValue5" @input="getData5" class="input" type="text" placeholder="鎼滅储鐩戞帶鍚嶇О">
+                  <input v-model="dataValue5" @blur="getData5" @keyup.enter="getData5" class="input" type="text" placeholder="鎼滅储鐩戞帶鍚嶇О">
                 </div>
                 <div class="menu_wrap">
                   <div class="menu" v-for="menu, i in data5">
                     <div class="menu_name" @click="menuClick(i)">
                       <div class="name">{{ menu.name }}</div>
-                      <!-- <img v-if="activeJkIndex == i" class="open" src="@/assets/images/SecurityControl/ar_close@2x.png"
+                      <img v-if="activeJkIndex == i" class="open" src="@/assets/images/SecurityControl/ar_close@2x.png"
                         alt="">
-                      <img v-else class="icon" src="@/assets/images/SecurityControl/ar_open@2x.png" alt=""> -->
+                      <img v-else class="icon" src="@/assets/images/SecurityControl/ar_open@2x.png" alt="">
                     </div>
-                    <!-- <div v-if="activeJkIndex == i" class="list">
-                      <div class="item" @click="menuItemClick(item.name)" v-for="item in menu.childen">
-                        <img v-if="activeMenu == item.name" class="icon"
+                    <div v-if="activeJkIndex == i" class="list">
+                      <div class="item" @click="menuItemClick(item)" v-for="item in menu.carmeraList">
+                        <img v-if="activeMenu.indexCode == item.indexCode" class="icon"
                           src="@/assets/images/SecurityControl/ic_jiankong_sel@2x.png" alt="">
                         <img v-else class="icon" src="@/assets/images/SecurityControl/ic_jiankon.png" alt="">
-                        <span :class="{ active: activeMenu == item.name }">{{ item.name }}</span>
+                        <span :class="{ active: activeMenu.indexCode == item.indexCode }">{{ item.name }}</span>
                       </div>
-                    </div> -->
+                    </div>
                   </div>
 
                 </div>
@@ -161,7 +160,7 @@
                   <img src="@/assets/images/SecurityControl/title_short@2x.png" class="bg" alt="">
                 </div>
                 <div class="num_wrap">
-                  <div class="num">{{ data.inParkCarTotal }}</div>
+                  <div class="num">{{ data.internalCarTotal }}</div>
                   <img src="@/assets/images/SecurityControl/anfang_ic_data@2x.png" class="bg" alt="">
                 </div>
               </div>
@@ -171,7 +170,7 @@
                   <img src="@/assets/images/SecurityControl/title_short@2x.png" class="bg" alt="">
                 </div>
                 <div class="num_wrap">
-                  <div class="num">{{ data.deviceTotal }}</div>
+                  <div class="num">{{ data2 }}</div>
                   <img src="@/assets/images/SecurityControl/anfang_ic_data@2x.png" class="bg" alt="">
                 </div>
               </div>
@@ -181,7 +180,7 @@
                   <img src="@/assets/images/SecurityControl/title_short@2x.png" class="bg" alt="">
                 </div>
                 <div class="num_wrap">
-                  <div class="num">{{ data.errTotal }}</div>
+                  <div class="num">{{ warningNum }}</div>
                   <img src="@/assets/images/SecurityControl/anfang_ic_data@2x.png" class="bg" alt="">
                 </div>
               </div>
@@ -208,24 +207,25 @@
                 <img src="@/assets/images/SecurityControl/staff_ic_neibu@2x.png" alt="">
                 <div class="content">
                   <div class="name">鍐呴儴鍛樺伐</div>
-                  <div class="num" v-if="data.internalTotal && data.inParkTotal"><span>{{ data.internalTotal }}</span> |
-                    {{ ((data.internalTotal / data.inParkTotal) * 100).toFixed(1) }}%</div>
+                  <div class="num"><span>{{ data.internalTotal || 0 }}</span> |
+                    {{ data.inParkTotal ? ((data.internalTotal / data.inParkTotal) * 100).toFixed(1) : 0 }}%</div>
                 </div>
               </div>
               <div class="item">
                 <img src="@/assets/images/SecurityControl/staff_ic_xiangguanfang@2x.png" alt="">
                 <div class="content">
                   <div class="name">闀挎湡鐩稿叧鏂�</div>
-                  <div class="num today" v-if="data.relatedTotal && data.inParkTotal"><span>{{ data.relatedTotal
-                      }}</span> | {{ ((data.relatedTotal / data.inParkTotal) * 100).toFixed(1) }}%</div>
+                  <div class="num today"><span>{{ data.relatedTotal || 0
+                      }}</span> | {{ data.inParkTotal ? ((data.relatedTotal / data.inParkTotal) * 100).toFixed(1) : 0
+                    }}%</div>
                 </div>
               </div>
               <div class="item">
                 <img src="@/assets/images/SecurityControl/staff_ic_fangke@2x.png" alt="">
                 <div class="content">
                   <div class="name">鍦ㄥ洯璁垮</div>
-                  <div class="num finish" v-if="data.visitTotal && data.inParkTotal"><span>{{ data.visitTotal }}</span>
-                    | {{ ((data.visitTotal / data.inParkTotal) * 100).toFixed(1) }}%</div>
+                  <div class="num finish"><span>{{ data.visitTotal || 0 }}</span>
+                    | {{ data.inParkTotal ? ((data.visitTotal / data.inParkTotal) * 100).toFixed(1) : 0 }}%</div>
                 </div>
               </div>
             </div>
@@ -314,11 +314,11 @@
               <div>瀹夐槻鍛婅</div>
             </div>
             <div class="tabs">
-              <div class="tab active">鍏ㄩ儴</div>
+              <div class="tab" :class="{ active: warningTab == '0' }" @click="tasClick('0')">鍏ㄩ儴</div>
               <div class="separate"></div>
-              <div class="tab">鍖哄煙鍛婅</div>
+              <div class="tab" :class="{ active: warningTab == '1' }" @click="tasClick('1')">鍖哄煙鍛婅</div>
               <div class="separate"></div>
-              <div class="tab">琛屼负鍛婅</div>
+              <div class="tab" :class="{ active: warningTab == '2' }" @click="tasClick('2')">琛屼负鍛婅</div>
             </div>
             <img src="@/assets/images/title@2x.png" class="bg" alt="" />
           </div>
@@ -329,17 +329,17 @@
                   <img :src="item.img" class="avatar" alt="">
                   <div class="content">
                     <div class="header">
-                      <div class="name">{{item.title}}</div>
-                      <div class="have_time">宸茬粡鍙戠敓{{item.haveTime}}</div>
+                      <div class="name">{{ item.title }}</div>
+                      <div class="have_time">宸茬粡鍙戠敓{{ item.haveTime }}</div>
                     </div>
                     <div class="wrap">
                       <div class="line addr">
                         <img class="icon" src="@/assets/images/SecurityControl/xiaofang_ic_weizhi@2x.png" alt="">
-                        <span>{{item.addr}}</span>
+                        <span>{{ item.addr }}</span>
                       </div>
                       <div class="line time">
                         <img class="icon" src="@/assets/images/SecurityControl/clock.png" alt="">
-                        <span>{{item.createDate}}</span>
+                        <span>{{ item.createDate }}</span>
                       </div>
                     </div>
                   </div>
@@ -391,18 +391,23 @@
                 <div>绂荤嚎鏁�</div>
                 <div>鍦ㄧ嚎鐜�</div>
               </div>
-              <template v-for="item, i in dataList2">
-                <div class="line">
-                  <div class="driver">{{ item.deviceType }}</div>
-                  <div>{{ item.totalNum }}</div>
-                  <div>{{ item.onlineNum }}</div>
-                  <div>{{ item.offlineDeviceNum }}</div>
-                  <div>{{ item.totalNum ? ((item.onlineNum / item.totalNum) * 100).toFixed(0) : 0 }}%
-                  </div>
+              <div class="list two-swiper">
+                <div class="swiper-wrapper">
+                  <template v-for="item, i in dataList2">
+                    <div class="item two-swiper-slide swiper-slide">
+                      <div class="line">
+                        <div class="driver">{{ item.deviceType }}</div>
+                        <div>{{ item.totalNum }}</div>
+                        <div>{{ item.onlineNum }}</div>
+                        <div>{{ item.offlineDeviceNum }}</div>
+                        <div>{{ item.totalNum ? ((item.onlineNum / item.totalNum) * 100).toFixed(0) : 0 }}%
+                        </div>
+                      </div>
+                      <div class="separate"></div>
+                    </div>
+                  </template>
                 </div>
-                <div class="separate"></div>
-              </template>
-
+              </div>
             </div>
           </div>
         </div>
@@ -420,14 +425,19 @@
               <div class="dept">鎷滆閮ㄩ棬</div>
               <div class="dept">瓒呮椂鏃堕暱</div>
             </div>
-            <template v-for="item in dataList3">
-              <div class="line">
-                <div>{{ item.name }}</div>
-                <div class="dept">{{ item.companyName }}</div>
-                <div class="dept">{{ item.timeOutMinuteT }}</div>
+            <div class="three-swiper list">
+              <div class="swiper-wrapper">
+                <div class="item swiper-slide three-swiper-slide" v-for="item in dataList3">
+                  <div class="line">
+                    <div>{{ item.name }}</div>
+                    <div class="dept">{{ item.companyName }}</div>
+                    <div class="dept">{{ item.timeOutMinuteT }}</div>
+                  </div>
+                  <div class="separate"></div>
+                </div>
               </div>
-              <div class="separate"></div>
-            </template>
+            </div>
+
           </div>
         </div>
       </div>
@@ -445,7 +455,16 @@
 import * as echarts from 'echarts'
 import 'swiper/css/swiper.min.css'
 import Swiper from 'swiper'
-import { getEnergyCenterData,afwarningEventData, getSecurityDeviceData, getVisitRetentionData, afgetVisitData, afregionTreea } from '@/api'
+import {
+  getEnergyCenterData,
+  afgetCarmeraPreviemUrl,
+  afwarningEventData,
+  getSecurityDeviceData,
+  getVisitRetentionData,
+  afgetVisitData,
+  afregionTreea,
+  visitSecurityData
+} from '@/api'
 
 
 const weekMap = ['鏄熸湡鏃�', '鏄熸湡涓�', '鏄熸湡浜�', '鏄熸湡涓�', '鏄熸湡鍥�', '鏄熸湡浜�', '鏄熸湡鍏�',]
@@ -459,41 +478,6 @@
 
 }, 1000)
 
-const showJk = ref(true)
-const activeJkIndex = ref(0)
-const activeMenu = ref('')
-const jkList = ref([
-  {
-    name: '鏈堝彴鍖�',
-    childen: [
-      { name: '鏈堝彴1', id: 0 },
-      { name: '鏈堝彴2', id: 0 },
-      { name: '鏈堝彴3', id: 0 },
-    ]
-  },
-  {
-    name: '鍔炲叕妤�',
-    childen: []
-  },
-  {
-    name: '鍘傛埧',
-    childen: []
-  },
-  {
-    name: '澶ч棬',
-    childen: []
-  },
-])
-const menuClick = (val) => {
-  if (val == activeJkIndex.value) {
-    activeJkIndex.value = -1
-  } else {
-    activeJkIndex.value = val
-  }
-}
-const menuItemClick = (val) => {
-  activeMenu.value = val
-}
 
 
 const arr = ['#68e2e3', '#50afd3', '#377cdb', '#d5ae3a']
@@ -608,7 +592,7 @@
           show: false,
           position: 'center'
         },
-        padAngle: 5,
+        padAngle: 3,
         itemStyle: {
           borderRadius: 10
         },
@@ -658,10 +642,10 @@
       color: '#61d3f9'
     }])]
   const data = []
-  data.push({ name: '寰呰闂�', value: data4.value.waitVisitNum, rate: data4.value.waitVisitRata })
-  data.push({ name: '宸茬櫥璁�', value: data4.value.registerVisitNum, rate: data4.value.registerVisitRata })
-  data.push({ name: '宸茬寮�', value: data4.value.levelNum, rate: data4.value.levelRata })
-  data.push({ name: '婊炵暀', value: data4.value.retentionNum, rate: data4.value.retentionRata })
+  data.push({ name: '寰呰闂�', value: data4.value.waitVisitNum, rate: data4.value.waitVisitNum / data4.value.total })
+  data.push({ name: '宸茬櫥璁�', value: data4.value.registerVisitNum, rate: data4.value.registerVisitNum / data4.value.total  })
+  data.push({ name: '宸茬寮�', value: data4.value.levelNum, rate: data4.value.levelNum / data4.value.total  })
+  data.push({ name: '婊炵暀', value: data4.value.retentionNum, rate: data4.value.retentionNum / data4.value.total  })
   const option = {
     color: colors,
     tooltip: {
@@ -722,7 +706,7 @@
         label: {
           show: true,
           position: 'outside',
-          formatter: '{a|{b}}  {a|{c}%}',
+          formatter: '{a|{b}}  {a|{d}%}',
           rich: {
             a: {
               color: '#869CC9',
@@ -766,70 +750,130 @@
 const data = ref({})
 const getData1 = () => {
   getEnergyCenterData().then(res => {
-    const result = res.data
-    data.value = result
-    initEchart1()
+    if (res.code == 200) {
+      const result = res.data
+      data.value = result
+      initEchart1()
+    }
   })
 }
 
 const dataList2 = ref([])
+const data2 = ref(0)
 const dataListT2 = ref([])
 const getData2 = () => {
   getSecurityDeviceData().then(res => {
-    if(res.code == 200 && res.data && res.data.length > 0){
+    if (res.code == 200 && res.data && res.data.length > 0) {
       const result = res.data
-    let temp = []
-    let online = 0
-    let outline = 0
-    dataList2.value = result.map(item => {
-      online += item.onlineNum
-      outline += item.offlineDeviceNum
-      return item
-    })
-    if (online >= outline) {
-      temp.push({ name: '鍦ㄧ嚎', value: online, rate: ((online / (online + outline)) * 100).toFixed(1) })
-      temp.push({ name: '绂荤嚎', value: outline, rate: ((outline / (online + outline)) * 100).toFixed(1) })
-    } else {
-      temp.push({ name: '绂荤嚎', value: outline, rate: ((outline / (online + outline)) * 100).toFixed(1) })
-      temp.push({ name: '鍦ㄧ嚎', value: online, rate: ((online / (online + outline)) * 100).toFixed(1) })
-    }
+      let temp = []
+      let online = 0
+      let outline = 0
+      let total = 0
+      dataList2.value = result.map(item => {
+        total += item.totalNum
+        online += item.onlineNum
+        outline += item.offlineDeviceNum
+        if (item.deviceType && item.deviceType.length > 6) {
+          item.deviceType = item.deviceType.slice(0, 6) + '...'
+        }
+        return item
+      })
+      data2.value = total
+      if (online >= outline) {
+        temp.push({ name: '鍦ㄧ嚎', value: online, rate: ((online / (online + outline)) * 100).toFixed(1) })
+        temp.push({ name: '绂荤嚎', value: outline, rate: ((outline / (online + outline)) * 100).toFixed(1) })
+      } else {
+        temp.push({ name: '绂荤嚎', value: outline, rate: ((outline / (online + outline)) * 100).toFixed(1) })
+        temp.push({ name: '鍦ㄧ嚎', value: online, rate: ((online / (online + outline)) * 100).toFixed(1) })
+      }
 
-    dataListT2.value = temp
+      dataListT2.value = temp
     }
-    
     initEchart2()
+    loopFn2()
   })
 }
 
 const dataList3 = ref([])
+const data4 = ref({})
 const getData3 = () => {
-  getVisitRetentionData().then(res => {
-    const result = res.data || []
+  visitSecurityData().then(res => {
+    if( !res.code == 200) return
+    data4.value = res.data || {}
+    let obj = data4.value
+    data4.value.total = obj.levelNum + obj.retentionNum + obj.registerVisitNum + obj.waitVisitNum    
+    const result = res.data.visitRetentionDataList || []
     dataList3.value = result.map(i => {
-      i.timeOutMinuteT = dayjs.duration(i.timeOutMinute * 60 * 1000).format('HH:mm')
+      if (i.timeOutMinute) {
+        i.timeOutMinute = Math.abs(i.timeOutMinute)
+      }
+      if (i.timeOutMinute > 60 * 24) {
+        i.timeOutMinuteT = dayjs.duration(i.timeOutMinute * 60 * 1000).format('D澶〩鏃秏鍒�')
+      } else if (i.timeOutMinute > 60) {
+        i.timeOutMinuteT = dayjs.duration(i.timeOutMinute * 60 * 1000).format('H鏃秏鍒�')
+      } else {
+        i.timeOutMinuteT = item.timeOutMinuteT + '鍒�'
+      }
+
       return i
     })
-  })
-}
-const data4 = ref({})
-const getData4 = () => {
-  afgetVisitData().then(res => {
-    const result = res.data || {}
-    data4.value = result
     initEchart3()
+    loopFn3()
   })
-}
 
+  // getVisitRetentionData().then(res => {
+  //   const result = res.data || []
+  //   dataList3.value = result.map(i => {
+  //     if (i.timeOutMinute) {
+  //       i.timeOutMinute = Math.abs(i.timeOutMinute)
+  //     }
+  //     if (i.timeOutMinute > 60 * 24) {
+  //       i.timeOutMinuteT = dayjs.duration(i.timeOutMinute * 60 * 1000).format('D澶〩鏃秏鍒�')
+  //     } else if (i.timeOutMinute > 60) {
+  //       i.timeOutMinuteT = dayjs.duration(i.timeOutMinute * 60 * 1000).format('H鏃秏鍒�')
+  //     } else {
+  //       i.timeOutMinuteT = item.timeOutMinuteT + '鍒�'
+  //     }
+
+  //     return i
+  //   })
+  //   loopFn3()
+  // })
+}
+// const data4 = ref({})
+// const getData4 = () => {
+//   afgetVisitData().then(res => {
+//     const result = res.data || {}
+//     data4.value = result
+//     initEchart3()
+//   })
+// }
+
+const warningTab = ref('0')
+const warningNum = ref(0)
 const warningList = ref([])
 const getWarning = () => {
-  afwarningEventData({type: 0}).then(res => {
-    const result = res.data || []
+  afwarningEventData({ type: warningTab.value }).then(res => {
+    if (!res.data) return
+    const result = res.data.list || []
+    warningNum.value = res.data.total
     warningList.value = result.map(item => {
       item.haveTime = dayjs.duration(new Date().getTime() - new Date(item.createDate).getTime()).format('HH灏忔椂mm鍒嗛挓')
       return item
     })
+    // loopFn1()
   })
 }
+const tasClick = (val) => {
+  warningTab.value = val
+  getWarning()
+}
+
+
+const showJk = ref(false)
+const activeJkIndex = ref(0)
+const activeMenu = ref({})
+const activeVideo = ref('')
 const dataValue5 = ref('')
 const data5 = ref([])
 const getData5 = () => {
@@ -838,7 +882,20 @@
     withCameras: 1
   }).then(res => {
     const result = res.data || []
-    data5.value = result
+    data5.value = result.filter(item => item.carmeraList && item.carmeraList.length > 0)
+  })
+}
+const menuClick = (val) => {
+  if (val == activeJkIndex.value) {
+    activeJkIndex.value = -1
+  } else {
+    activeJkIndex.value = val
+  }
+}
+const menuItemClick = (val) => {
+  activeMenu.value = val
+  afgetCarmeraPreviemUrl({ indexCode: val.indexCode }).then(res => {
+    activeVideo.value = res.data
   })
 }
 
@@ -851,26 +908,23 @@
 }
 const loopFn1 = () => {
   var newSwiper1 = new Swiper('.one-swiper', {
-    // initialSlide: 0,
+    initialSlide: 0,
     loop: true, // 寰幆妯″紡閫夐」
-    // direction: 'vertical', //绔栫洿鏂瑰悜
-    slidesPerView: 2,
+    direction: 'vertical', //绔栫洿鏂瑰悜
+    slidesPerView: 1,
     slidesPerGroup: 2,
     slidesPerColumn: 2,
     // autoplay: { delay: 500, disableOnInteraction: false },
-    autoplay: autoplayFlag(dataList2.value, 2, 2000),
+    autoplay: warningList.value.length > 2 ? { delay: 500, disableOnInteraction: false } : false,
     observer: true, //淇敼swiper鑷繁鎴栧瓙鍏冪礌鏃讹紝鑷姩鍒濆鍖杝wiper
   })
 }
-loopFn1()
 const loopFn2 = () => {
   var newSwiper1 = new Swiper('.two-swiper', {
     initialSlide: 0,
-    // loop: true, // 寰幆妯″紡閫夐」
     direction: 'vertical', //绔栫洿鏂瑰悜
     slidesPerView: 3,
-    // autoplay: { delay: 500, disableOnInteraction: false },
-    autoplay: autoplayFlag(dataList2.value, 3, 4000),
+    autoplay: autoplayFlag(dataList2.value, 3, 2000),
     observer: true, //淇敼swiper鑷繁鎴栧瓙鍏冪礌鏃讹紝鑷姩鍒濆鍖杝wiper
   })
 }
@@ -881,7 +935,7 @@
     direction: 'vertical', //绔栫洿鏂瑰悜
     slidesPerView: 3,
     // autoplay: { delay: 500, disableOnInteraction: false },
-    autoplay: autoplayFlag(dataList2.value, 3, 4000),
+    autoplay: autoplayFlag(dataList3.value, 3, 4000),
     observer: true, //淇敼swiper鑷繁鎴栧瓙鍏冪礌鏃讹紝鑷姩鍒濆鍖杝wiper
   })
 }
@@ -892,7 +946,7 @@
   getData1()
   getData2()
   getData3()
-  getData4()
+  // getData4()
   getData5()
   getWarning()
 
@@ -906,9 +960,11 @@
 div {
   box-sizing: border-box;
 }
+
 .swiper-wrapper {
-    display: block !important;
-  }
+  display: block !important;
+}
+
 .main_content {
   display: flex;
   padding: 20px 25px 0;
@@ -1134,8 +1190,8 @@
         padding: 16px 0px 32px 20px;
 
         .video {
+          width: 100%;
           height: 100%;
-          border: 1px solid;
         }
       }
 
@@ -1174,8 +1230,9 @@
 
           .menu_wrap {
             margin-top: 15px;
-            max-height: 400px;
-              overflow: auto;
+            max-height: 440px;
+            overflow: auto;
+
             .menu {
               .menu_name {
                 display: flex;
@@ -1199,16 +1256,17 @@
               .list {
                 .item {
                   display: flex;
-                  align-items: center;
-                  height: 34px;
+                  /* align-items: center; */
                   margin-left: 10px;
                   cursor: pointer;
                   color: #D2E0FF;
+                  margin-top: 8px;
 
                   .icon {
                     width: 15px;
                     height: 14px;
                     margin-right: 8px;
+                    margin-top: 2px;
                   }
 
                   .active {
@@ -1473,6 +1531,7 @@
   .safe_warning {
     width: 786px;
     margin-right: 20px;
+
     /* one-swiper */
     .list {
       height: 124px;
@@ -1481,13 +1540,21 @@
       scrollbar-width: none;
       display: flex;
       flex-wrap: wrap;
-      
+      margin-left: 20px;
+
       .item {
         width: 366px;
         /* width: 50%; */
-        height: 102px;
+        float: left;
+        height: 102px !important;
         font-size: 13px;
         color: #D2E0FF;
+        margin-right: 10px;
+
+        &:nth-of-type(2n) {
+          margin-right: 0;
+        }
+
         .item_wrap {
           height: 90px;
           padding: 10px;
@@ -1630,14 +1697,25 @@
       }
 
       .table {
+        .list {
+          height: 102px !important;
+          overflow: auto;
+
+          .item {
+            height: 34px !important;
+          }
+        }
+
         .line {
+          height: 32px !important;
+
           div {
             justify-content: flex-end;
             padding-right: 10px;
           }
 
           .driver {
-            flex: 4;
+            flex: 5;
             justify-content: center;
           }
         }
@@ -1686,6 +1764,15 @@
     width: 360px;
 
     .table {
+      .list {
+        height: 102px !important;
+        overflow: auto;
+
+        .item {
+          height: 34px !important;
+        }
+      }
+
       .line {
         div {
           .dept {

--
Gitblit v1.9.3