|  |  | 
 |  |  |       <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 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 class="spacing"></div> | 
 |  |  |               <div class="item"> | 
 |  |  |                 <div class="name">已登记</div> | 
 |  |  |                 <div class="name">已访问</div> | 
 |  |  |                 <div class="num_wrap"> | 
 |  |  |                   <span class="num">{{ data4.registerVisitNum }}</span> | 
 |  |  |                   <span>人</span> | 
 |  |  | 
 |  |  |             <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> | 
 |  |  | 
 |  |  |   }) | 
 |  |  | } | 
 |  |  |  | 
 |  |  | const colors = [ '#01ABFE','#FEAF01', '#51F9E4'] | 
 |  |  | const colors = ['#01ABFE', '#FEAF01', '#51F9E4'] | 
 |  |  | const initEchart2 = () => { | 
 |  |  |   const myChart = echarts.init(document.getElementById('echart2')) | 
 |  |  |   const option = { | 
 |  |  | 
 |  |  |   ] | 
 |  |  |   const data = [] | 
 |  |  |   if (data4.value.total) { | 
 |  |  |     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) }) | 
 |  |  |     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.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, | 
 |  |  | 
 |  |  |           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); | 
 |  |  |        | 
 |  |  |       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 | 
 |  |  | 
 |  |  |     width: 786px; | 
 |  |  |     margin-right: 20px; | 
 |  |  |     position: relative; | 
 |  |  |  | 
 |  |  |     /* one-swiper */ | 
 |  |  |     .one_swiper_wrap { | 
 |  |  |       height: 140px; | 
 |  |  | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     .dept { | 
 |  |  |       flex: 5; | 
 |  |  |       flex: 8; | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     .time { | 
 |  |  |       flex: 4; | 
 |  |  |       flex: 5; | 
 |  |  |     } | 
 |  |  |   } | 
 |  |  |  | 
 |  |  | 
 |  |  |   object-fit: cover; | 
 |  |  |   z-index: -1; | 
 |  |  | } | 
 |  |  | </style> | 
 |  |  | </style> |