|  |  | 
 |  |  |           </div> | 
 |  |  |         </div> | 
 |  |  |         <div class="center_box"> | 
 |  |  |           <div v-if="showJk" class="jiankong"> | 
 |  |  |           <div v-show="showJk" class="jiankong"> | 
 |  |  |             <img class="jk_bg" src="@/assets/images/SecurityControl/jiankong_bg@2x.png" alt=""> | 
 |  |  |             <div class="content"> | 
 |  |  |               <video :src="activeVideo" class="video"></video> | 
 |  |  |               <Video v-if="showJk && activeMenu && activeMenu.indexCode" :href="data.videoPluginUrl" :indexCode="activeMenu.indexCode" /> | 
 |  |  |               <!-- <div class="player_bg" style="width: 100%;height: 100%;" id="playWnd"> </div> --> | 
 |  |  |             </div> | 
 |  |  |             <div class="right_wrap"> | 
 |  |  |               <div class="menus"> | 
 |  |  | 
 |  |  |             </div> | 
 |  |  |  | 
 |  |  |           </div> | 
 |  |  |           <div v-else class="center_box_one"> | 
 |  |  |           <div v-show="!showJk" class="center_box_one"> | 
 |  |  |             <div class="list"> | 
 |  |  |               <div class="item"> | 
 |  |  |                 <div class="name_wrap"> | 
 |  |  | 
 |  |  |             </div> | 
 |  |  |             <img src="@/assets/images/task/title@2x.png" class="bg" alt="" /> | 
 |  |  |           </div> | 
 |  |  |           <div class="monitoring" @click="showJk = !showJk"> | 
 |  |  |           <div class="monitoring" @click="changeMon"> | 
 |  |  |             <img src="@/assets/images/SecurityControl/ic_jiankong@2x.png" class="icon" alt=""> | 
 |  |  |             <div>监控列表</div> | 
 |  |  |             <img v-if="showJk" src="@/assets/images/SecurityControl/jiankong_ic_close@2x.png" class="top" alt=""> | 
 |  |  | 
 |  |  |               </div> | 
 |  |  |               <div class="list two-swiper"> | 
 |  |  |                 <div class="swiper-wrapper"> | 
 |  |  |                   <template v-for="item, i in dataList2"> | 
 |  |  |                   <template v-for="item, i in dataList2.filter(i => i.total > 0)"> | 
 |  |  |                     <div class="item two-swiper-slide swiper-slide"> | 
 |  |  |                       <div class="line"> | 
 |  |  |                         <div class="driver">{{ item.deviceType }}</div> | 
 |  |  | 
 |  |  | </template> | 
 |  |  |  | 
 |  |  | <script setup> | 
 |  |  | import { ref, onMounted } from 'vue' | 
 |  |  | import { ref, onMounted, nextTick } from 'vue' | 
 |  |  | import VScaleScreen from 'v-scale-screen' | 
 |  |  | import Percent from '@/components/percent.vue' | 
 |  |  | import dayjs from 'dayjs' | 
 |  |  | 
 |  |  | import * as echarts from 'echarts' | 
 |  |  | import 'swiper/css/swiper.min.css' | 
 |  |  | import Swiper from 'swiper' | 
 |  |  | import Video from './videoUrl/Video.vue' | 
 |  |  | import { | 
 |  |  |   getEnergyCenterData, | 
 |  |  |   afgetCarmeraPreviemUrl, | 
 |  |  | 
 |  |  |   time.value = dayjs().format('HH:mm:ss') | 
 |  |  |  | 
 |  |  | }, 1000) | 
 |  |  |  | 
 |  |  |  | 
 |  |  |  | 
 |  |  | const arr = ['#68e2e3', '#50afd3', '#377cdb', '#d5ae3a'] | 
 |  |  | const initEnergy = () => { | 
 |  |  | 
 |  |  |     data4.value = res.data || {} | 
 |  |  |     let obj = data4.value | 
 |  |  |     data4.value.total = obj.levelNum + obj.retentionNum + obj.registerVisitNum + obj.waitVisitNum | 
 |  |  |     const result = res.data.visitRetentionDataList || [] | 
 |  |  |     const result = res.data?.visitRetentionDataList || [] | 
 |  |  |     dataList3.value = result.map(i => { | 
 |  |  |       if (i.timeOutMinute) { | 
 |  |  |         i.timeOutMinute = Math.abs(i.timeOutMinute) | 
 |  |  | 
 |  |  |     data5.value = result.filter(item => item.carmeraList && item.carmeraList.length > 0) | 
 |  |  |   }) | 
 |  |  | } | 
 |  |  | const changeMon = () => { | 
 |  |  |   showJk.value = !showJk.value | 
 |  |  |   if(!showJk.value){ | 
 |  |  |     activeJkIndex.value = -1 | 
 |  |  |     activeMenu.value = {} | 
 |  |  |   } | 
 |  |  | } | 
 |  |  | const menuClick = (val) => { | 
 |  |  |   if (val == activeJkIndex.value) { | 
 |  |  |     activeJkIndex.value = -1 | 
 |  |  | 
 |  |  | } | 
 |  |  | const menuItemClick = (val) => { | 
 |  |  |   activeMenu.value = val | 
 |  |  |   afgetCarmeraPreviemUrl({ indexCode: val.indexCode }).then(res => { | 
 |  |  |     activeVideo.value = res.data | 
 |  |  |   }) | 
 |  |  | } | 
 |  |  |  | 
 |  |  | } | 
 |  |  | const autoplayFlag = (list = [], leng = 4, time = 2000) => { | 
 |  |  |   if (list.length > leng) { | 
 |  |  |     return { delay: time, disableOnInteraction: false } | 
 |  |  | 
 |  |  |     initialSlide: 0, | 
 |  |  |     direction: 'vertical', //竖直方向 | 
 |  |  |     slidesPerView: 3, | 
 |  |  |     autoplay: autoplayFlag(dataList2.value, 3, 4000), | 
 |  |  |     autoplay: autoplayFlag(dataList2.value.filter(i => i.total > 0), 3, 4000), | 
 |  |  |     observer: true, //修改swiper自己或子元素时,自动初始化swiper | 
 |  |  |   }) | 
 |  |  | } | 
 |  |  | 
 |  |  |     observer: true, //修改swiper自己或子元素时,自动初始化swiper | 
 |  |  |   }) | 
 |  |  | } | 
 |  |  |  | 
 |  |  |  | 
 |  |  |  | 
 |  |  |  | 
 |  |  | 
 |  |  |         display: flex; | 
 |  |  |         justify-content: center; | 
 |  |  |         align-items: center; | 
 |  |  |         padding: 16px 24px; | 
 |  |  |         padding-top: 16px; | 
 |  |  |         padding-left: 24px; | 
 |  |  |  | 
 |  |  |         .echart_wrap { | 
 |  |  |           position: relative; | 
 |  |  | 
 |  |  |         } | 
 |  |  |  | 
 |  |  |         .list { | 
 |  |  |           margin-left: 36px; | 
 |  |  |           margin-left: 32px; | 
 |  |  |           flex: 1; | 
 |  |  |           display: flex; | 
 |  |  |           flex-direction: column; |