|  |  | 
 |  |  |       <img src="@/assets/images/SecurityControl/bg@2x.png" class="main_bg" alt="" /> | 
 |  |  |       <div class="main_header"> | 
 |  |  |         <img src="@/assets/images/maintitle.gif" class="main_header_bg" alt="" /> | 
 |  |  |         <div class="title">安泰智慧物流园区-安防智能监测</div> | 
 |  |  |         <div class="title">安泰智慧物流园区-智能安防监测</div> | 
 |  |  |         <div class="time_wrap"> | 
 |  |  |           <span class="date">{{ date }}</span> | 
 |  |  |           <span class="week">{{ week }}</span> | 
 |  |  | 
 |  |  |           <div v-show="showJk" class="jiankong"> | 
 |  |  |             <img class="jk_bg" src="@/assets/images/SecurityControl/jiankong_bg@2x.png" alt=""> | 
 |  |  |             <div class="content"> | 
 |  |  |               <Video v-if="showJk && activeMenu && activeMenu.indexCode" :href="data.videoPluginUrl" :indexCode="activeMenu.indexCode" /> | 
 |  |  |               <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"> | 
 |  |  | 
 |  |  |                   <img src="@/assets/images/SecurityControl/title_short@2x.png" class="bg" alt=""> | 
 |  |  |                 </div> | 
 |  |  |                 <div class="num_wrap"> | 
 |  |  |                   <div class="num">{{ data.internalCarTotal }}</div> | 
 |  |  |                   <div class="num">{{ data.inParkCarTotal || 0 }}</div> | 
 |  |  |                   <img src="@/assets/images/SecurityControl/anfang_ic_data@2x.png" class="bg" alt=""> | 
 |  |  |                 </div> | 
 |  |  |               </div> | 
 |  |  | 
 |  |  |                 <div class="content"> | 
 |  |  |                   <div class="name">长期相关方</div> | 
 |  |  |                   <div class="num today"><span>{{ data.relatedTotal || 0 | 
 |  |  |                       }}</span> | {{ data.inParkTotal ? ((data.relatedTotal / data.inParkTotal) * 100).toFixed(1) : 0 | 
 |  |  |                     }}%</div> | 
 |  |  |                   }}</span> | {{ data.inParkTotal ? ((data.relatedTotal / data.inParkTotal) * 100).toFixed(1) : 0 | 
 |  |  |                       }}%</div> | 
 |  |  |                 </div> | 
 |  |  |               </div> | 
 |  |  |               <div class="item"> | 
 |  |  | 
 |  |  |           </div> | 
 |  |  |         </div> --> | 
 |  |  |         <div class="safe_warning"> | 
 |  |  |           <Loading v-if="loading1" /> | 
 |  |  |           <div class="com_header"> | 
 |  |  |             <div class="title"> | 
 |  |  |               <img src="@/assets/images/ic_title@2x.png" class="icon" alt="" /> | 
 |  |  | 
 |  |  |                 </div> | 
 |  |  |               </div> | 
 |  |  |             </div> | 
 |  |  |  | 
 |  |  |           </div> | 
 |  |  |  | 
 |  |  |         </div> | 
 |  |  | 
 |  |  |               </div> | 
 |  |  |               <div class="list two-swiper"> | 
 |  |  |                 <div class="swiper-wrapper"> | 
 |  |  |                   <template v-for="item, i in dataList2.filter(i => i.total > 0)"> | 
 |  |  |                   <template v-for="item, i in dataList2.filter(i => i.totalNum > 0)"> | 
 |  |  |                     <div class="item two-swiper-slide swiper-slide"> | 
 |  |  |                       <div class="line"> | 
 |  |  |                         <div class="driver">{{ item.deviceType }}</div> | 
 |  |  | 
 |  |  |             <div class="line header"> | 
 |  |  |               <div>姓名</div> | 
 |  |  |               <div class="dept">拜访部门</div> | 
 |  |  |               <div class="dept">超时时长</div> | 
 |  |  |               <div class="time">超时时长</div> | 
 |  |  |             </div> | 
 |  |  |             <div v-if="dataList3.length > 0" class="three-swiper list"> | 
 |  |  |               <div class="swiper-wrapper"> | 
 |  |  | 
 |  |  |                   <div class="line"> | 
 |  |  |                     <div>{{ item.name }}</div> | 
 |  |  |                     <div class="dept">{{ item.companyName }}</div> | 
 |  |  |                     <div class="dept">{{ item.timeOutMinuteT }}</div> | 
 |  |  |                     <div class="time">{{ item.timeOutMinuteT }}</div> | 
 |  |  |                   </div> | 
 |  |  |                   <div class="separate"></div> | 
 |  |  |                 </div> | 
 |  |  | 
 |  |  | import 'swiper/css/swiper.min.css' | 
 |  |  | import Swiper from 'swiper' | 
 |  |  | import Video from './videoUrl/Video.vue' | 
 |  |  | import Loading from '@/components/Loading.vue' | 
 |  |  | import { | 
 |  |  |   getEnergyCenterData, | 
 |  |  |   afgetCarmeraPreviemUrl, | 
 |  |  | 
 |  |  |   }) | 
 |  |  | } | 
 |  |  |  | 
 |  |  | const colors = ['#FEAF01', '#01ABFE', '#51F9E4'] | 
 |  |  | const colors = ['#01ABFE', '#FEAF01', '#51F9E4'] | 
 |  |  | const initEchart2 = () => { | 
 |  |  |   const myChart = echarts.init(document.getElementById('echart2')) | 
 |  |  |   const option = { | 
 |  |  | 
 |  |  |     }]), | 
 |  |  |   ] | 
 |  |  |   const data = [] | 
 |  |  |   data.push({ name: '待访问', value: data4.value.waitVisitNum, rate: (data4.value.waitVisitNum / data4.value.total).toFixed(1) }) | 
 |  |  |   data.push({ name: '已登记', value: data4.value.registerVisitNum, rate: (data4.value.registerVisitNum / data4.value.total).toFixed(1) }) | 
 |  |  |   data.push({ name: '已离开', value: data4.value.levelNum, rate: (data4.value.levelNum / data4.value.total).toFixed(1) }) | 
 |  |  |   data.push({ name: '滞留', value: data4.value.retentionNum, rate: (data4.value.retentionNum / data4.value.total).toFixed(1) }) | 
 |  |  |   if (data4.value.total) { | 
 |  |  |     data.push({ name: '待访问', value: data4.value.waitVisitNum, rate: (data4.value.waitVisitNum / data4.value.total).toFixed(3) }) | 
 |  |  |     data.push({ name: '已登记', value: data4.value.registerVisitNum, rate: (data4.value.registerVisitNum / data4.value.total).toFixed(3) }) | 
 |  |  |     data.push({ name: '已离开', value: data4.value.levelNum, rate: (data4.value.levelNum / data4.value.total).toFixed(3) }) | 
 |  |  |     data.push({ name: '滞留', value: data4.value.retentionNum, rate: (data4.value.retentionNum / data4.value.total).toFixed(3) }) | 
 |  |  |   } else { | 
 |  |  |     data.push({ name: '待访问', value: data4.value.waitVisitNum, rate: 0 }) | 
 |  |  |     data.push({ name: '已登记', value: data4.value.registerVisitNum, rate: 0 }) | 
 |  |  |     data.push({ name: '已离开', value: data4.value.levelNum, rate: 0 }) | 
 |  |  |     data.push({ name: '滞留', value: data4.value.retentionNum, rate: 0 }) | 
 |  |  |   } | 
 |  |  |   data.sort((a, b) => (b.value - a.value)) | 
 |  |  |   // console.log('data', data); | 
 |  |  |  | 
 |  |  |   const option = { | 
 |  |  |     color: colors, | 
 |  |  |     tooltip: { | 
 |  |  | 
 |  |  |           position: 'outside', | 
 |  |  |           formatter: (params) => { | 
 |  |  |             const index = params.dataIndex | 
 |  |  |             return `{color${index}|${params.data.name} ${params.data.rate}%}` | 
 |  |  |             return `{color${index}|${params.data.name} ${(params.data.rate * 100).toFixed(1)}%}` | 
 |  |  |             // return `<div>${params.data.name}</div>` | 
 |  |  |           }, | 
 |  |  |           rich: { | 
 |  |  | 
 |  |  |         } | 
 |  |  |         return item | 
 |  |  |       }) | 
 |  |  |       console.log('dataList2', dataList2.value) | 
 |  |  |  | 
 |  |  |       data2.value = total | 
 |  |  |       if (online >= outline) { | 
 |  |  |         temp.push({ name: '在线', value: online, rate: ((online / (online + outline)) * 100).toFixed(1) }) | 
 |  |  | 
 |  |  |     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 => { | 
 |  |  |       if (i.timeOutMinute) { | 
 |  |  | 
 |  |  |       } else if (i.timeOutMinute > 60) { | 
 |  |  |         i.timeOutMinuteT = dayjs.duration(i.timeOutMinute * 60 * 1000).format('H时m分') | 
 |  |  |       } else { | 
 |  |  |         i.timeOutMinuteT = item.timeOutMinuteT + '分' | 
 |  |  |         i.timeOutMinuteT = i.timeOutMinute + '分' | 
 |  |  |       } | 
 |  |  |  | 
 |  |  |       return i | 
 |  |  | 
 |  |  |   }) | 
 |  |  | } | 
 |  |  |  | 
 |  |  | const loading1 = ref(false) | 
 |  |  | const warningTab = ref('0') | 
 |  |  | const warningNum = ref(0) | 
 |  |  | const warningList = ref([]) | 
 |  |  | const getWarning = () => { | 
 |  |  |   loading1.value = true | 
 |  |  |   afwarningEventData({ type: warningTab.value }).then(res => { | 
 |  |  |     loading1.value = false | 
 |  |  |     if (!res.data) return | 
 |  |  |     const result = res.data.list || [] | 
 |  |  |     warningNum.value = res.data.total | 
 |  |  | 
 |  |  |     }) | 
 |  |  |     warningList.value = temp | 
 |  |  |     // console.log('temp', warningList.value); | 
 |  |  |   }, () => { | 
 |  |  |     loading1.value = false | 
 |  |  |   }) | 
 |  |  | } | 
 |  |  | const tasClick = (val) => { | 
 |  |  | 
 |  |  | } | 
 |  |  | const changeMon = () => { | 
 |  |  |   showJk.value = !showJk.value | 
 |  |  |   if(!showJk.value){ | 
 |  |  |   if (!showJk.value) { | 
 |  |  |     activeJkIndex.value = -1 | 
 |  |  |     activeMenu.value = {} | 
 |  |  |   } | 
 |  |  | 
 |  |  |     initialSlide: 0, | 
 |  |  |     direction: 'vertical', //竖直方向 | 
 |  |  |     slidesPerView: 3, | 
 |  |  |     autoplay: autoplayFlag(dataList2.value.filter(i => i.total > 0), 3, 4000), | 
 |  |  |     autoplay: autoplayFlag(dataList2.value.filter(i => i.totalNum > 0), 3, 4000), | 
 |  |  |     observer: true, //修改swiper自己或子元素时,自动初始化swiper | 
 |  |  |   }) | 
 |  |  | } | 
 |  |  | 
 |  |  |   .safe_warning { | 
 |  |  |     width: 786px; | 
 |  |  |     margin-right: 20px; | 
 |  |  |     position: relative; | 
 |  |  |  | 
 |  |  |     /* one-swiper */ | 
 |  |  |     .one_swiper_wrap { | 
 |  |  | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     .dept { | 
 |  |  |       flex: 5; | 
 |  |  |       flex: 8; | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     .time { | 
 |  |  |       flex: 4; | 
 |  |  |       flex: 5; | 
 |  |  |     } | 
 |  |  |   } | 
 |  |  |  |