|  |  | 
 |  |  |               <div class="rate"> | 
 |  |  |                 <div class="la"> | 
 |  |  |                   <span>车位使用率</span> | 
 |  |  |                   <span v-if="data.inParkCarTotal && data.parkingLotTotal" class="num">{{ data.parkingUseRate }}%</span> | 
 |  |  |                   <span class="num">{{ data.parkingUseRate }}%</span> | 
 |  |  |                 </div> | 
 |  |  |                 <div class="val"> | 
 |  |  |                   <Percent :rate="data.parkingUseRate" /> | 
 |  |  | 
 |  |  |             <div class="car_static"> | 
 |  |  |               <div class="echart_wrap"> | 
 |  |  |                 <div class="pie_text"> | 
 |  |  |                   <div class="fs30"><strong v-if="data.visitJobCarTotal || data.visitJobCarTotal == 0">{{ data.internalJobCarTotal + | 
 |  |  |                   <div class="fs30"><strong v-if="data.visitJobCarTotal || data.visitJobCarTotal == 0">{{ | 
 |  |  |                     data.internalJobCarTotal + | 
 |  |  |                     data.relatedJobCarTotal + data.visitJobCarTotal }}</strong></div> | 
 |  |  |                   <div>货车</div> | 
 |  |  |                 </div> | 
 |  |  | 
 |  |  |               <div class="menus"> | 
 |  |  |                 <div class="search_wrap"> | 
 |  |  |                   <img class="search" src="@/assets/images/SecurityControl/ic_search@2x.png" alt=""> | 
 |  |  |                   <input v-model="dataValue5" @blur="getData5" @keyup.enter="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> | 
 |  |  |             <img src="@/assets/images/title@2x.png" class="bg" alt="" /> | 
 |  |  |           </div> | 
 |  |  |           <div class="list one-swiper"> | 
 |  |  |             <div class="swiper-wrapper"> | 
 |  |  |               <div class="one-swiper-slide swiper-slide item" v-for="item in warningList"> | 
 |  |  |                 <div class="item_wrap"> | 
 |  |  |                   <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> | 
 |  |  |                     <div class="wrap"> | 
 |  |  |                       <div class="line addr"> | 
 |  |  |                         <img class="icon" src="@/assets/images/SecurityControl/xiaofang_ic_weizhi@2x.png" alt=""> | 
 |  |  |                         <span>{{ item.addr }}</span> | 
 |  |  |           <div class="one_swiper_wrap"> | 
 |  |  |             <div class="list one-swiper"> | 
 |  |  |               <div class="swiper-wrapper"> | 
 |  |  |                 <div class="one-swiper-slide swiper-slide item" v-for="item in warningList"> | 
 |  |  |                   <div class="item_wrap"> | 
 |  |  |                     <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> | 
 |  |  |                       <div class="line time"> | 
 |  |  |                         <img class="icon" src="@/assets/images/SecurityControl/clock.png" alt=""> | 
 |  |  |                         <span>{{ item.createDate }}</span> | 
 |  |  |                       <div class="wrap"> | 
 |  |  |                         <div class="line addr"> | 
 |  |  |                           <img class="icon" src="@/assets/images/SecurityControl/xiaofang_ic_weizhi@2x.png" alt=""> | 
 |  |  |                           <span>{{ item.addr }}</span> | 
 |  |  |                         </div> | 
 |  |  |                         <div class="line time"> | 
 |  |  |                           <img class="icon" src="@/assets/images/SecurityControl/clock.png" alt=""> | 
 |  |  |                           <span>{{ item.createDate }}</span> | 
 |  |  |                         </div> | 
 |  |  |                       </div> | 
 |  |  |                     </div> | 
 |  |  |                   </div> | 
 |  |  |                   <div v-if="item.title0 && item.createDate0" class="item_wrap"> | 
 |  |  |                     <img :src="item.img0" class="avatar" alt=""> | 
 |  |  |                     <div class="content"> | 
 |  |  |                       <div class="header"> | 
 |  |  |                         <div class="name">{{ item.title0 }}</div> | 
 |  |  |                         <div class="have_time">已经发生{{ item.haveTime0 }}</div> | 
 |  |  |                       </div> | 
 |  |  |                       <div class="wrap"> | 
 |  |  |                         <div class="line addr"> | 
 |  |  |                           <img class="icon" src="@/assets/images/SecurityControl/xiaofang_ic_weizhi@2x.png" alt=""> | 
 |  |  |                           <span>{{ item.addr0 }}</span> | 
 |  |  |                         </div> | 
 |  |  |                         <div class="line time"> | 
 |  |  |                           <img class="icon" src="@/assets/images/SecurityControl/clock.png" alt=""> | 
 |  |  |                           <span>{{ item.createDate0 }}</span> | 
 |  |  |                         </div> | 
 |  |  |                       </div> | 
 |  |  |                     </div> | 
 |  |  |                   </div> | 
 |  |  | 
 |  |  |               </div> | 
 |  |  |             </div> | 
 |  |  |           </div> | 
 |  |  |  | 
 |  |  |         </div> | 
 |  |  |         <div class="garden_warning"> | 
 |  |  |           <div class="com_header"> | 
 |  |  | 
 |  |  |               <div class="dept">拜访部门</div> | 
 |  |  |               <div class="dept">超时时长</div> | 
 |  |  |             </div> | 
 |  |  |             <div class="three-swiper list"> | 
 |  |  |             <div v-if="dataList3.length > 0" 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> | 
 |  |  |               </div> | 
 |  |  |             </div> | 
 |  |  |  | 
 |  |  |             <div v-if="dataList3.length == 0" class="empty_wrap"> | 
 |  |  |               <img src="@/assets/images/default_empty.png" alt=""> | 
 |  |  |             </div> | 
 |  |  |           </div> | 
 |  |  |         </div> | 
 |  |  |       </div> | 
 |  |  | 
 |  |  |     }])] | 
 |  |  |   const data = [] | 
 |  |  |   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  }) | 
 |  |  |   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: { | 
 |  |  | 
 |  |  |         gap: 4, | 
 |  |  |         label: { | 
 |  |  |           show: false, | 
 |  |  |           formatter: '', | 
 |  |  |           lineHeight: 0, | 
 |  |  |           position: 'inside' | 
 |  |  |         }, | 
 |  |  |         tooltip: { | 
 |  |  |           trigger: 'none', // 当鼠标悬浮在某个数据项上时触发 | 
 |  |  | 
 |  |  | const data4 = ref({}) | 
 |  |  | const getData3 = () => { | 
 |  |  |   visitSecurityData().then(res => { | 
 |  |  |     if( !res.code == 200) return | 
 |  |  |     if (!res.code == 200) return | 
 |  |  |     data4.value = res.data || {} | 
 |  |  |     let obj = data4.value | 
 |  |  |     data4.value.total = obj.levelNum + obj.retentionNum + obj.registerVisitNum + obj.waitVisitNum     | 
 |  |  |     data4.value.total = obj.levelNum + obj.retentionNum + obj.registerVisitNum + obj.waitVisitNum | 
 |  |  |     const result = res.data.visitRetentionDataList || [] | 
 |  |  |     dataList3.value = result.map(i => { | 
 |  |  |       if (i.timeOutMinute) { | 
 |  |  | 
 |  |  |       item.haveTime = dayjs.duration(new Date().getTime() - new Date(item.createDate).getTime()).format('HH小时mm分钟') | 
 |  |  |       return item | 
 |  |  |     }) | 
 |  |  |     // loopFn1() | 
 |  |  |     let temp = [] | 
 |  |  |     warningList.value.forEach((item, i) => { | 
 |  |  |       // console.log(i); | 
 |  |  |       if (i == 0 || i % 2 == 0) { | 
 |  |  |         console.log(i) | 
 |  |  |         temp.push(item) | 
 |  |  |       } else { | 
 |  |  |         temp[temp.length - 1].addr0 = item.addr | 
 |  |  |         temp[temp.length - 1].createDate0 = item.createDate | 
 |  |  |         temp[temp.length - 1].haveTime0 = item.haveTime | 
 |  |  |         temp[temp.length - 1].img0 = item.img | 
 |  |  |         temp[temp.length - 1].title0 = item.title | 
 |  |  |       } | 
 |  |  |     }) | 
 |  |  |     warningList.value = temp | 
 |  |  |     // console.log('temp', warningList.value); | 
 |  |  |     loopFn1() | 
 |  |  |   }) | 
 |  |  | } | 
 |  |  | const tasClick = (val) => { | 
 |  |  | 
 |  |  | const loopFn1 = () => { | 
 |  |  |   var newSwiper1 = new Swiper('.one-swiper', { | 
 |  |  |     initialSlide: 0, | 
 |  |  |     loop: true, // 循环模式选项 | 
 |  |  |     // loop: true, // 循环模式选项 | 
 |  |  |     direction: 'vertical', //竖直方向 | 
 |  |  |     slidesPerView: 1, | 
 |  |  |     slidesPerGroup: 2, | 
 |  |  |     slidesPerColumn: 2, | 
 |  |  |     // autoplay: { delay: 500, disableOnInteraction: false }, | 
 |  |  |     autoplay: warningList.value.length > 2 ? { delay: 500, disableOnInteraction: false } : false, | 
 |  |  |     slidesPerView: 2, | 
 |  |  |     autoplay: warningList.value.length > 1 ? { delay: 4000, disableOnInteraction: false } : false, | 
 |  |  |     observer: true, //修改swiper自己或子元素时,自动初始化swiper | 
 |  |  |   }) | 
 |  |  | } | 
 |  |  | 
 |  |  |     initialSlide: 0, | 
 |  |  |     direction: 'vertical', //竖直方向 | 
 |  |  |     slidesPerView: 3, | 
 |  |  |     autoplay: autoplayFlag(dataList2.value, 3, 2000), | 
 |  |  |     autoplay: autoplayFlag(dataList2.value, 3, 4000), | 
 |  |  |     observer: true, //修改swiper自己或子元素时,自动初始化swiper | 
 |  |  |   }) | 
 |  |  | } | 
 |  |  | 
 |  |  |           .menu_wrap { | 
 |  |  |             margin-top: 15px; | 
 |  |  |             max-height: 440px; | 
 |  |  |             overflow: auto; | 
 |  |  |             overflow: hidden; | 
 |  |  |  | 
 |  |  |             .menu { | 
 |  |  |               .menu_name { | 
 |  |  | 
 |  |  |     margin-right: 20px; | 
 |  |  |  | 
 |  |  |     /* one-swiper */ | 
 |  |  |     .one_swiper_wrap{ | 
 |  |  |       height: 140px; | 
 |  |  |       overflow: hidden; | 
 |  |  |     } | 
 |  |  |     .list { | 
 |  |  |       height: 124px; | 
 |  |  |       overflow: auto; | 
 |  |  |       height: 204px; | 
 |  |  |       overflow: hidden; | 
 |  |  |       margin-top: 15px; | 
 |  |  |       scrollbar-width: none; | 
 |  |  |       display: flex; | 
 |  |  | 
 |  |  |       margin-left: 20px; | 
 |  |  |  | 
 |  |  |       .item { | 
 |  |  |         width: 366px; | 
 |  |  |         /* width: 50%; */ | 
 |  |  |         float: left; | 
 |  |  |         width: 736px; | 
 |  |  |         height: 102px !important; | 
 |  |  |         font-size: 13px; | 
 |  |  |         color: #D2E0FF; | 
 |  |  |         margin-right: 10px; | 
 |  |  |         display: flex; | 
 |  |  |  | 
 |  |  |         &:nth-of-type(2n) { | 
 |  |  |           margin-right: 0; | 
 |  |  |         } | 
 |  |  |  | 
 |  |  |         /* border: 1px solid; */ | 
 |  |  |         .item_wrap { | 
 |  |  |           width: 368px; | 
 |  |  |           height: 90px; | 
 |  |  |           padding: 10px; | 
 |  |  |           background: linear-gradient(270deg, rgba(1, 217, 254, 0) 0%, rgba(1, 217, 254, 0.19) 100%); | 
 |  |  |           border: 1px solid #006E81; | 
 |  |  |           display: flex; | 
 |  |  |           margin-right: 10px; | 
 |  |  |  | 
 |  |  |           &:nth-of-type(2n) { | 
 |  |  |             margin-right: 0; | 
 |  |  |           } | 
 |  |  |         } | 
 |  |  |  | 
 |  |  |  | 
 |  |  | 
 |  |  |       .table { | 
 |  |  |         .list { | 
 |  |  |           height: 102px !important; | 
 |  |  |           overflow: auto; | 
 |  |  |           overflow: hidden; | 
 |  |  |  | 
 |  |  |           .item { | 
 |  |  |             height: 34px !important; | 
 |  |  | 
 |  |  |     .table { | 
 |  |  |       .list { | 
 |  |  |         height: 102px !important; | 
 |  |  |         overflow: auto; | 
 |  |  |         overflow: hidden; | 
 |  |  |  | 
 |  |  |         .item { | 
 |  |  |           height: 34px !important; |