|  |  | 
 |  |  |     <div class="home_header"> | 
 |  |  |       <div class="mb10 fs17">下午好,{{ userInfo.realname }}</div> | 
 |  |  |       <div class="fs13"> | 
 |  |  |         今天是 {{ nowDate }} {{ nowWeek }},欢迎回到智慧物流园区安消一体化系统 | 
 |  |  |         今天是 {{ nowDate }} {{ nowWeek }},欢迎访问智慧物流园区安消一体化系统 | 
 |  |  |       </div> | 
 |  |  |     </div> | 
 |  |  |     <div class="main"> | 
 |  |  | 
 |  |  |             <div class="header"> | 
 |  |  |               <div class="left"> | 
 |  |  |                 <div class="fs15">今日在园人数(人)</div> | 
 |  |  |                 <div class="num">300</div> | 
 |  |  |                 <div class="num">{{ headerData.todayInParkUserNum }}</div> | 
 |  |  |               </div> | 
 |  |  |               <img src="@/assets/icons/home_icon1.png" alt="" /> | 
 |  |  |             </div> | 
 |  |  |             <div class="content"> | 
 |  |  |               <div>入园人次(人):600</div> | 
 |  |  |               <div>出园人次(人):300</div> | 
 |  |  |               <div>入园人次(人):{{ headerData.todayInUserNum }}</div> | 
 |  |  |               <div>出园人次(人):{{ headerData.todayOutUserNum }}</div> | 
 |  |  |             </div> | 
 |  |  |           </div> | 
 |  |  |           <div class="card"> | 
 |  |  |             <div class="header"> | 
 |  |  |               <div class="left"> | 
 |  |  |                 <div class="fs15">在园访客数(人)</div> | 
 |  |  |                 <div class="num">300</div> | 
 |  |  |                 <div class="num">{{ headerData.inParkVisitUserNum }}</div> | 
 |  |  |               </div> | 
 |  |  |               <img src="@/assets/icons/home_icon2.png" alt="" /> | 
 |  |  |             </div> | 
 |  |  |             <div class="content"> | 
 |  |  |               <div>访客人次(人):200</div> | 
 |  |  |               <div>签离人次(人):300</div> | 
 |  |  |               <div>访客人次(人):{{ headerData.visitUserNum }}</div> | 
 |  |  |               <div>签离人次(人):{{ headerData.signLevelNum }}</div> | 
 |  |  |             </div> | 
 |  |  |           </div> | 
 |  |  |           <div class="card"> | 
 |  |  |             <div class="header"> | 
 |  |  |               <div class="left"> | 
 |  |  |                 <div class="fs15">在园长期相关方数(人)</div> | 
 |  |  |                 <div class="num">300</div> | 
 |  |  |                 <div class="num">{{ headerData.inParkLwUserNum }}</div> | 
 |  |  |               </div> | 
 |  |  |               <img src="@/assets/icons/home_icon3.png" alt="" /> | 
 |  |  |             </div> | 
 |  |  |             <div class="content"> | 
 |  |  |               <div>入园人次(人):600</div> | 
 |  |  |               <div>出园人次(人):300</div> | 
 |  |  |               <div>入园人次(人):{{ headerData.lwUserInNum }}</div> | 
 |  |  |               <div>出园人次(人):{{ headerData.lwUserOutNum }}</div> | 
 |  |  |             </div> | 
 |  |  |           </div> | 
 |  |  |           <div class="card"> | 
 |  |  |             <div class="header"> | 
 |  |  |               <div class="left"> | 
 |  |  |                 <div class="fs15">在园长期相关方数(人)</div> | 
 |  |  |                 <div class="num">300</div> | 
 |  |  |                 <div class="fs15">今日在园车辆(辆)</div> | 
 |  |  |                 <div class="num">{{ headerData.todayInParkCarNum }}</div> | 
 |  |  |               </div> | 
 |  |  |               <img src="@/assets/icons/home_icon4.png" alt="" /> | 
 |  |  |             </div> | 
 |  |  |             <div class="content"> | 
 |  |  |               <div>入园车次(辆):600</div> | 
 |  |  |               <div>出园车次(辆):300</div> | 
 |  |  |               <div>入园车次(辆):{{ headerData.todayInCarNum }}</div> | 
 |  |  |               <div>出园车次(辆):{{ headerData.todayOutCarNum }}</div> | 
 |  |  |             </div> | 
 |  |  |           </div> | 
 |  |  |         </div> | 
 |  |  | 
 |  |  |             <div class="wrap static1"> | 
 |  |  |               <div class="header"> | 
 |  |  |                 <div class="home_title">在场人员占比</div> | 
 |  |  |                 <div class="df_ac more"> | 
 |  |  |                 <!-- <div class="df_ac more"> | 
 |  |  |                   更多<i class="el-icon-arrow-right"></i> | 
 |  |  |                 </div> | 
 |  |  |                 </div> --> | 
 |  |  |               </div> | 
 |  |  |               <div class="content"> | 
 |  |  |                 <div class="echart_wrap"> | 
 |  |  |                   <div class="pie_text"> | 
 |  |  |                     <div class="fs13">总数</div> | 
 |  |  |                     <div class="fs15"><strong>300</strong></div> | 
 |  |  |                     <div class="fs15"><strong>{{ headerData.todayInParkUserNum }}</strong></div> | 
 |  |  |                   </div> | 
 |  |  |                   <div class="echart" id="echart1"></div> | 
 |  |  |                 </div> | 
 |  |  |                 <div class="list"> | 
 |  |  |                   <div class="item"> | 
 |  |  |                     <div class="icon"></div> | 
 |  |  |                     <div class="text">访客</div> | 
 |  |  |                     <div class="num">100</div> | 
 |  |  |                   </div> | 
 |  |  |                   <div class="item"> | 
 |  |  |                     <div :style="{ background: colors[0] }" class="icon"></div> | 
 |  |  |                     <div class="text">访客</div> | 
 |  |  |                     <div class="num">100</div> | 
 |  |  |                   </div> | 
 |  |  |                   <div class="item"> | 
 |  |  |                     <div :style="{ background: colors[1] }" class="icon"></div> | 
 |  |  |                     <div class="text">访客</div> | 
 |  |  |                     <div class="num">100</div> | 
 |  |  |                   <div class="item" v-for="item, i in manningRatio" :key="i"> | 
 |  |  |                     <div :style="{ background: colors[i] }" class="icon"></div> | 
 |  |  |                     <div class="text">{{ item.name }}</div> | 
 |  |  |                     <div class="num">{{ item.value }}</div> | 
 |  |  |                   </div> | 
 |  |  |                 </div> | 
 |  |  |               </div> | 
 |  |  | 
 |  |  |             <div class="wrap static2"> | 
 |  |  |               <div class="header"> | 
 |  |  |                 <div class="home_title">长期相关方分布</div> | 
 |  |  |                 <div class="df_ac more"> | 
 |  |  |                 <!-- <div class="df_ac more"> | 
 |  |  |                   更多<i class="el-icon-arrow-right"></i> | 
 |  |  |                 </div> | 
 |  |  |                 </div> --> | 
 |  |  |               </div> | 
 |  |  |               <div class="echart" id="echart2"></div> | 
 |  |  |             </div> | 
 |  |  | 
 |  |  |             <div class="wrap static3"> | 
 |  |  |               <div class="header"> | 
 |  |  |                 <div class="home_title">7日访客统计</div> | 
 |  |  |                 <div class="df_ac more"> | 
 |  |  |                 <!-- <div class="df_ac more"> | 
 |  |  |                   更多<i class="el-icon-arrow-right"></i> | 
 |  |  |                 </div> | 
 |  |  |                 </div> --> | 
 |  |  |               </div> | 
 |  |  |               <div class="echart" id="echart3"></div> | 
 |  |  |             </div> | 
 |  |  |             <div class="wrap static4"> | 
 |  |  |               <div class="header"> | 
 |  |  |                 <div class="home_title">7日车辆统计</div> | 
 |  |  |                 <div class="df_ac more"> | 
 |  |  |                 <!-- <div class="df_ac more"> | 
 |  |  |                   更多<i class="el-icon-arrow-right"></i> | 
 |  |  |                 </div> | 
 |  |  |                 </div> --> | 
 |  |  |               </div> | 
 |  |  |               <div class="echart" id="echart4"></div> | 
 |  |  |             </div> | 
 |  |  | 
 |  |  |           <div class="header df_sb"> | 
 |  |  |             <div class="home_title df"> | 
 |  |  |               <span>待办事项</span> | 
 |  |  |               <span class="num">10</span> | 
 |  |  |               <span class="num" v-if="taskTotal">{{ taskTotal }}</span> | 
 |  |  |             </div> | 
 |  |  |             <div class="df_ac more"> | 
 |  |  |             <div class="df_ac more" @click="jumpPage('/task/index')"> | 
 |  |  |               更多<i class="el-icon-arrow-right"></i> | 
 |  |  |             </div> | 
 |  |  |           </div> | 
 |  |  |           <div class="list"> | 
 |  |  |             <div class="item"> | 
 |  |  |             <div class="item" v-for="item in taskList" :key="item.id"> | 
 |  |  |               <div class="content"> | 
 |  |  |                 <div class="title">点点滴滴</div> | 
 |  |  |                 <div class="time">time</div> | 
 |  |  |                 <div class="title">{{ item.title }}</div> | 
 |  |  |                 <div class="time">{{ item.createDate }}</div> | 
 |  |  |               </div> | 
 |  |  |               <div class="btn">处理</div> | 
 |  |  |               <div class="btn" v-permissions="['business:staging:query']" @click="handleDetail(item)">处理</div> | 
 |  |  |             </div> | 
 |  |  |             <div class="item"> | 
 |  |  |               <div class="content"> | 
 |  |  |                 <div class="title">点点滴滴</div> | 
 |  |  |                 <div class="time">time</div> | 
 |  |  |               </div> | 
 |  |  |               <div class="btn">处理</div> | 
 |  |  |             <div v-if="taskList.length == 0" class="empty"> | 
 |  |  |               <img src="@/assets/images/default_homeimg.png" alt=""> | 
 |  |  |             </div> | 
 |  |  |           </div> | 
 |  |  |         </div> | 
 |  |  | 
 |  |  |           <div class="header df_sb"> | 
 |  |  |             <div class="home_title df"> | 
 |  |  |               <span>超时预警</span> | 
 |  |  |               <span class="num">10</span> | 
 |  |  |               <span class="num" v-if="warningTotal">{{ warningTotal }}</span> | 
 |  |  |             </div> | 
 |  |  |             <div class="df_ac more"> | 
 |  |  |             <div class="df_ac more" @click="jumpPage('/business/strandedPersonnel')"> | 
 |  |  |               更多<i class="el-icon-arrow-right"></i> | 
 |  |  |             </div> | 
 |  |  |           </div> | 
 |  |  |           <div class="list"> | 
 |  |  |             <div class="item"> | 
 |  |  |             <div class="item" v-for="item in warningList" :key="item.id"> | 
 |  |  |               <div class="name_wrap df_sb"> | 
 |  |  |                 <div class="name">袁隆平</div> | 
 |  |  |                 <div class="identity">普通访客</div> | 
 |  |  |                 <div class="name">{{ item.name }}</div> | 
 |  |  |                 <div class="identity">访客</div> | 
 |  |  |               </div> | 
 |  |  |               <div class="line">联系电话:1888</div> | 
 |  |  |               <div class="line">访客公司:安徽豆米</div> | 
 |  |  |               <div class="line">联系电话:{{ item.phone }}</div> | 
 |  |  |               <div class="line">访客公司:{{ item.companyName }}</div> | 
 |  |  |               <div class="auth df_sb"> | 
 |  |  |                 <div class="time">授权期限:</div> | 
 |  |  |                 <div class="btn">离场</div> | 
 |  |  |                 <div class="time">授权期限:{{ item.endtime }}</div> | 
 |  |  |                 <div class="btn" @click="departure(item.id)">离场</div> | 
 |  |  |               </div> | 
 |  |  |             </div> | 
 |  |  |             <div class="item"> | 
 |  |  |               <div class="name_wrap df_sb"> | 
 |  |  |                 <div class="name">袁隆平</div> | 
 |  |  |                 <div class="identity">普通访客</div> | 
 |  |  |               </div> | 
 |  |  |               <div class="line">联系电话:1888</div> | 
 |  |  |               <div class="line">访客公司:安徽豆米</div> | 
 |  |  |               <div class="auth df_sb"> | 
 |  |  |                 <div class="time">授权期限:</div> | 
 |  |  |                 <div class="btn">离场</div> | 
 |  |  |               </div> | 
 |  |  |             </div> | 
 |  |  |             <div class="item"> | 
 |  |  |               <div class="name_wrap df_sb"> | 
 |  |  |                 <div class="name">袁隆平</div> | 
 |  |  |                 <div class="identity">普通访客</div> | 
 |  |  |               </div> | 
 |  |  |               <div class="line">联系电话:1888</div> | 
 |  |  |               <div class="line">访客公司:安徽豆米</div> | 
 |  |  |               <div class="auth df_sb"> | 
 |  |  |                 <div class="time">授权期限:</div> | 
 |  |  |                 <div class="btn">离场</div> | 
 |  |  |               </div> | 
 |  |  |             </div> | 
 |  |  |           </div> | 
 |  |  |           <div v-if="warningList.length == 0" class="empty"> | 
 |  |  |             <img src="@/assets/images/default_homeimg.png" alt=""> | 
 |  |  |           </div> | 
 |  |  |         </div> | 
 |  |  |       </div> | 
 |  |  |     </div> | 
 |  |  |     <TaskDetail v-if="isShowDetail" ref="DetailRef" @success="SubSuccess('isShowDetail')" /> | 
 |  |  |     <VisReportDetail v-if="isShowReport" ref="VisReportDetailRef" @success="SubSuccess('isShowReport')" /> | 
 |  |  |     <DangetDetail v-if="isShowDanger" ref="DangetDetailRef" @success="SubSuccess('isShowDanger')" /> | 
 |  |  |     <DriverDetail v-if="isShowDriver" ref="DriverDetailRef" @success="SubSuccess('isShowDriver')" /> | 
 |  |  |     <!-- 用车申请 --> | 
 |  |  |     <OperaCarUseBookWindow ref="OperaDetailsWindow" @success="getTaskList" /> | 
 |  |  |     <!-- 隐患 --> | 
 |  |  |     <OperaHiddenDangerWindow ref="OperaHiddenDangerWindow" @success="getTaskList" /> | 
 |  |  |     <!-- 预约详情 --> | 
 |  |  |     <OperaVisitsDesWindow ref="OperaVisitsDesWindow" /> | 
 |  |  |   </div> | 
 |  |  | </template> | 
 |  |  |  | 
 |  |  | 
 |  |  | import * as echarts from 'echarts' | 
 |  |  | import { weeks } from '@/utils/config' | 
 |  |  | import { | 
 |  |  |   getWorkbenchBody, | 
 |  |  |   getWorkbenchHead, | 
 |  |  |   getWorkbenchData, | 
 |  |  |   getAppHeaderNav | 
 |  |  | } from '@/api' | 
 |  |  | import { level } from '@/api/business/visits' | 
 |  |  | import TaskDetail from '@/views/task/visSubDetail.vue' | 
 |  |  | import VisReportDetail from '@/views/task/visReportDetail.vue' | 
 |  |  | import DangetDetail from '@/views/task/dangetDetail.vue' | 
 |  |  | import DriverDetail from '@/views/task/driverDetail.vue' | 
 |  |  | import OperaCarUseBookWindow from '@/components/business/OperaCarUseBookWindow' | 
 |  |  | import OperaHiddenDangerWindow from '@/components/business/OperaHiddenDangerWindow' | 
 |  |  | import OperaVisitsDesWindow from '@/components/business/OperaVisitsDesWindow' | 
 |  |  | const colors = ['#52a4f7', '#7678f7', '#5fc6d5'] | 
 |  |  | export default { | 
 |  |  |   components: { | 
 |  |  |     TaskDetail, | 
 |  |  |     VisReportDetail, | 
 |  |  |     DangetDetail, | 
 |  |  |     DriverDetail, | 
 |  |  |     OperaCarUseBookWindow, | 
 |  |  |     OperaHiddenDangerWindow, | 
 |  |  |     OperaVisitsDesWindow | 
 |  |  |   }, | 
 |  |  |   data() { | 
 |  |  |     return { | 
 |  |  |       colors, | 
 |  |  |       nowDate: '', | 
 |  |  |       nowWeek: '', | 
 |  |  |       headerData: {}, | 
 |  |  |       staticData: {}, | 
 |  |  |       manningRatio: [], | 
 |  |  |       taskList: [], | 
 |  |  |       taskTotal: 0, | 
 |  |  |       warningList: [], | 
 |  |  |       warningTotal: 0, | 
 |  |  |       funcList: [ | 
 |  |  |         { name: '访客报备', path: '', url: require('@/assets/icons/home_func1.png'), path: '/business/reportRecord' }, | 
 |  |  |         { name: '隐患随手拍', path: '', url: require('@/assets/icons/home_func2.png'), path: '/operation/danger/record' }, | 
 |  |  |         { name: '预约会议室', path: '', url: require('@/assets/icons/home_func3.png'), path: '/meeting/bookings' }, | 
 |  |  |         { name: '考勤工作台', path: '', url: require('@/assets/icons/home_func4.png') } | 
 |  |  |       ] | 
 |  |  |       ], | 
 |  |  |       isShowDetail: false, | 
 |  |  |       isShowReport: false, | 
 |  |  |       isShowDanger: false, | 
 |  |  |       isShowDriver: false, | 
 |  |  |     } | 
 |  |  |   }, | 
 |  |  |   computed: { | 
 |  |  | 
 |  |  |     this.initData() | 
 |  |  |   }, | 
 |  |  |   methods: { | 
 |  |  |     SubSuccess(str) { | 
 |  |  |       this[str] = false | 
 |  |  |       this.getTaskList() | 
 |  |  |     }, | 
 |  |  |     funcClick(item) { | 
 |  |  |       if (item.name == '考勤工作台') { | 
 |  |  |         getAppHeaderNav(4).then(res => { | 
 |  |  | 
 |  |  |       this.nowWeek = weeks[new Date().getDay()] | 
 |  |  |     }, | 
 |  |  |     initData() { | 
 |  |  |       this.getWorkBody() //主体数据 | 
 |  |  |       this.getWorkHead() //主体数据 | 
 |  |  |  | 
 |  |  |       this.initEchart1() | 
 |  |  |       this.initEchart2() | 
 |  |  |       this.initEchart3() | 
 |  |  |       this.initEchart4() | 
 |  |  |       this.getWorkHead() | 
 |  |  |       this.getWorkBody() | 
 |  |  |       this.getTaskList() | 
 |  |  |       this.getWarningList() | 
 |  |  |     }, | 
 |  |  |     getWarningList() { | 
 |  |  |       getWorkbenchData({ queryType: 4 }).then(res => { | 
 |  |  |         this.warningList = res.timeOutVisitList || [] | 
 |  |  |         this.warningTotal = res.timeOutVisitNum || 0 | 
 |  |  |       }) | 
 |  |  |     }, | 
 |  |  |     getTaskList() { | 
 |  |  |       getWorkbenchData({ queryType: 3 }).then(res => { | 
 |  |  |         this.taskList = res.noticesList || [] | 
 |  |  |         this.taskTotal = res.noticesNum || 0 | 
 |  |  |       }) | 
 |  |  |     }, | 
 |  |  |     getWorkBody() { | 
 |  |  |       getWorkbenchBody() | 
 |  |  |       getWorkbenchData({ queryType: 2 }).then(res => { | 
 |  |  |         this.staticData = res || {} | 
 |  |  |         this.initEchart2() | 
 |  |  |         this.initEchart3() | 
 |  |  |         this.initEchart4() | 
 |  |  |       }) | 
 |  |  |     }, | 
 |  |  |     getWorkHead() { | 
 |  |  |       getWorkbenchHead() | 
 |  |  |       getWorkbenchData({ queryType: 1 }).then(res => { | 
 |  |  |         this.headerData = res || {} | 
 |  |  |         let arr = [] | 
 |  |  |         arr.push({ name: '访客', value: this.headerData.inParkVisitUserNum }) | 
 |  |  |         arr.push({ name: '内部员工', value: this.headerData.todayInParkUserNum - this.headerData.inParkLwUserNum - this.headerData.inParkVisitUserNum }) | 
 |  |  |         arr.push({ name: '长期相关方', value: this.headerData.inParkLwUserNum }) | 
 |  |  |         arr.sort((a, b) => b.value - a.value) | 
 |  |  |         this.manningRatio = arr | 
 |  |  |         this.initEchart1() | 
 |  |  |       }) | 
 |  |  |     }, | 
 |  |  |     jumpPage(page) { | 
 |  |  |       this.$router.push(page) | 
 |  |  |     }, | 
 |  |  |     departure(id) { | 
 |  |  |       this.$confirm('确定离厂吗, 是否继续?', '提示', { | 
 |  |  |         confirmButtonText: '确定', | 
 |  |  |         cancelButtonText: '取消', | 
 |  |  |         type: 'warning' | 
 |  |  |       }).then(() => { | 
 |  |  |         level(id) | 
 |  |  |           .then(res => { | 
 |  |  |             this.getWarningList() | 
 |  |  |           }) | 
 |  |  |       }).catch(() => { | 
 |  |  |  | 
 |  |  |       }) | 
 |  |  |     }, | 
 |  |  |     handleDetail(row) { | 
 |  |  |       if (row.objType === 2) { | 
 |  |  |         this.$refs.OperaDetailsWindow.open('公务车申请详情', { ...row, id: row.objId }) | 
 |  |  |         return | 
 |  |  |       } | 
 |  |  |       if (row.objType === 1) { | 
 |  |  |         this.isShowReport = true | 
 |  |  |         this.$nextTick(() => { | 
 |  |  |           this.$refs.VisReportDetailRef.id = row.objId | 
 |  |  |           this.$refs.VisReportDetailRef.type = row.objType | 
 |  |  |           this.$refs.VisReportDetailRef.getDetail() | 
 |  |  |           this.$refs.VisReportDetailRef.isShowModal = true | 
 |  |  |         }) | 
 |  |  |         return | 
 |  |  |       } | 
 |  |  |       if (row.objType === 3) { | 
 |  |  |         const obj = { ...row, id: row.objId } | 
 |  |  |         this.$refs.OperaHiddenDangerWindow.open('隐患随手拍详情', obj) | 
 |  |  |         return | 
 |  |  |       } | 
 |  |  |       if (row.objType === 6) { | 
 |  |  |         const obj = { ...row, id: row.objId } | 
 |  |  |         this.isShowDriver = true | 
 |  |  |         this.$nextTick(() => { | 
 |  |  |           this.$refs.DriverDetailRef.id = row.objId | 
 |  |  |           this.$refs.DriverDetailRef.type = row.objType | 
 |  |  |           this.$refs.DriverDetailRef.getDetail() | 
 |  |  |           this.$refs.DriverDetailRef.isShowModal = true | 
 |  |  |         }) | 
 |  |  |         return | 
 |  |  |       } | 
 |  |  |       if (row.objType === 0) { | 
 |  |  |         this.isShowDetail = true | 
 |  |  |         this.$nextTick(() => { | 
 |  |  |           this.$refs.DetailRef.id = row.objId | 
 |  |  |           this.$refs.DetailRef.type = row.objType | 
 |  |  |           this.$refs.DetailRef.getDetail() | 
 |  |  |           this.$refs.DetailRef.isShowModal = true | 
 |  |  |         }) | 
 |  |  |       } | 
 |  |  |     }, | 
 |  |  |     initEchart1() { | 
 |  |  |       const myChart = echarts.init(document.getElementById('echart1')) | 
 |  |  |       let that = this | 
 |  |  |  | 
 |  |  |       const option = { | 
 |  |  |         tooltip: { | 
 |  |  |           trigger: 'item' | 
 |  |  |         }, | 
 |  |  |         series: [ | 
 |  |  |           { | 
 |  |  |             type: 'pie', | 
 |  |  | 
 |  |  |             labelLine: { | 
 |  |  |               show: false | 
 |  |  |             }, | 
 |  |  |             data: [ | 
 |  |  |               { value: 1048, name: 'Search Engine' }, | 
 |  |  |               { value: 735, name: 'Direct' }, | 
 |  |  |               { value: 580, name: 'Email' } | 
 |  |  |             ] | 
 |  |  |             data: that.manningRatio | 
 |  |  |             // data: [ | 
 |  |  |             //   { value: that.headerData.inParkVisitUserNum, name: '访客' }, | 
 |  |  |             //   { value: that.headerData.todayInParkUserNum - that.headerData.inParkVisitUserNum - that.headerData.inParkLwUserNum, name: '内部员工' }, | 
 |  |  |             //   { value: that.headerData.inParkLwUserNum, name: '长期相关方' } | 
 |  |  |             // ] | 
 |  |  |           } | 
 |  |  |         ] | 
 |  |  |       } | 
 |  |  | 
 |  |  |     }, | 
 |  |  |     initEchart2() { | 
 |  |  |       const myChart = echarts.init(document.getElementById('echart2')) | 
 |  |  |       let that = this | 
 |  |  |       myChart.setOption({ | 
 |  |  |         grid: { | 
 |  |  |           top: '4%', | 
 |  |  | 
 |  |  |         }, | 
 |  |  |         yAxis: { | 
 |  |  |           type: 'category', | 
 |  |  |           data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] | 
 |  |  |           data: that.staticData.lwList.map(i => i.name) | 
 |  |  |         }, | 
 |  |  |         series: [ | 
 |  |  |           { | 
 |  |  |             data: [120, 200, 150, 80, 70, 110, 130], | 
 |  |  |             data: that.staticData.lwList.map(i => i.num), | 
 |  |  |             type: 'bar', | 
 |  |  |             barWidth: 10, | 
 |  |  |             itemStyle: { | 
 |  |  | 
 |  |  |                     { offset: 1, color: '#407ff0' } | 
 |  |  |                   ] | 
 |  |  |                 ), | 
 |  |  |                 barBorderRadius: [0, 10, 10, 0] | 
 |  |  |                 // barBorderRadius: [0, 10, 10, 0] | 
 |  |  |               } | 
 |  |  |             } | 
 |  |  |           } | 
 |  |  | 
 |  |  |     }, | 
 |  |  |     initEchart3() { | 
 |  |  |       const myChart = echarts.init(document.getElementById('echart3')) | 
 |  |  |       let that = this | 
 |  |  |       myChart.setOption({ | 
 |  |  |         tooltip: { | 
 |  |  |           trigger: 'axis', | 
 |  |  | 
 |  |  |           formatter: function (params) { | 
 |  |  |             return ` | 
 |  |  |           <div style="background-color: #15323f;margin: -12px;padding: 14px;border: 2px solid rgba(1,217,254,0.5);color: #fff;"> | 
 |  |  |             <div>${params[0].name}日客流</div> | 
 |  |  |             <div>${params[0].name}</div> | 
 |  |  |             <div style="display: flex;align-items: center;"> | 
 |  |  |               <div style="width: 10px;height: 10px;border-radius: 50%;background-color: #6feef0;"></div> | 
 |  |  |               <span style="margin-left: 6px;">${params[0].value}</span> | 
 |  |  | 
 |  |  |         xAxis: { | 
 |  |  |           type: 'category', | 
 |  |  |           boundaryGap: false, | 
 |  |  |           data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] | 
 |  |  |           data: that.staticData.weekVisitList.map(i => i.name) | 
 |  |  |         }, | 
 |  |  |         yAxis: { | 
 |  |  |           type: 'value', | 
 |  |  | 
 |  |  |         grid: { | 
 |  |  |           top: '16%', | 
 |  |  |           left: '2%', | 
 |  |  |           right: '2%', | 
 |  |  |           bottom: '4%', | 
 |  |  |           right: '8%', | 
 |  |  |           bottom: '2%', | 
 |  |  |           containLabel: true | 
 |  |  |         }, | 
 |  |  |         series: [ | 
 |  |  |           { | 
 |  |  |             data: [150, 230, 224, 218, 135, 147, 260], | 
 |  |  |             data: that.staticData.weekVisitList.map(i => i.num), | 
 |  |  |             type: 'line', | 
 |  |  |             areaStyle: { | 
 |  |  |               normal: { | 
 |  |  | 
 |  |  |             symbol: 'circle', | 
 |  |  |             symbolSize: 10, | 
 |  |  |             itemStyle: { | 
 |  |  |               normal: { | 
 |  |  |                 color: '#207FF7' // 折线点的颜色 | 
 |  |  |               } | 
 |  |  |               borderWidth: 1, | 
 |  |  |               borderColor: '#fff', | 
 |  |  |               color: '#207FF7' | 
 |  |  |             }, | 
 |  |  |             smooth: false | 
 |  |  |           } | 
 |  |  | 
 |  |  |     }, | 
 |  |  |     initEchart4() { | 
 |  |  |       const myChart = echarts.init(document.getElementById('echart4')) | 
 |  |  |       let that = this | 
 |  |  |       myChart.setOption({ | 
 |  |  |         tooltip: { | 
 |  |  |           trigger: 'axis', | 
 |  |  | 
 |  |  |           formatter: function (params) { | 
 |  |  |             return ` | 
 |  |  |           <div style="background-color: #15323f;margin: -12px;padding: 14px;border: 2px solid rgba(1,217,254,0.5);color: #fff;"> | 
 |  |  |             <div>${params[0].name}日客流</div> | 
 |  |  |             <div>${params[0].name}</div> | 
 |  |  |             <div style="display: flex;align-items: center;"> | 
 |  |  |               <div style="width: 10px;height: 10px;border-radius: 50%;background-color: #6feef0;"></div> | 
 |  |  |               <span style="margin-left: 6px;">${params[0].value}</span> | 
 |  |  |               <div>人</div> | 
 |  |  |               <div>辆</div> | 
 |  |  |             </div> | 
 |  |  |           </div> | 
 |  |  |         ` | 
 |  |  | 
 |  |  |         xAxis: { | 
 |  |  |           type: 'category', | 
 |  |  |           boundaryGap: false, | 
 |  |  |           data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] | 
 |  |  |           data: that.staticData.weekCarList.map(i => i.name) | 
 |  |  |         }, | 
 |  |  |         yAxis: { | 
 |  |  |           type: 'value', | 
 |  |  | 
 |  |  |         grid: { | 
 |  |  |           top: '16%', | 
 |  |  |           left: '2%', | 
 |  |  |           right: '2%', | 
 |  |  |           right: '8%', | 
 |  |  |           bottom: '4%', | 
 |  |  |           containLabel: true | 
 |  |  |         }, | 
 |  |  |         series: [ | 
 |  |  |           { | 
 |  |  |             data: [150, 230, 224, 218, 135, 147, 260], | 
 |  |  |             data: that.staticData.weekCarList.map(i => i.num), | 
 |  |  |             type: 'line', | 
 |  |  |             areaStyle: { | 
 |  |  |               normal: { | 
 |  |  | 
 |  |  |             symbol: 'circle', | 
 |  |  |             symbolSize: 10, | 
 |  |  |             itemStyle: { | 
 |  |  |               normal: { | 
 |  |  |                 color: '#42D49D' // 折线点的颜色 | 
 |  |  |               } | 
 |  |  |               borderWidth: 1, | 
 |  |  |               borderColor: '#fff', | 
 |  |  |               color: '#42D49D' // 折线点的颜色 | 
 |  |  |             }, | 
 |  |  |             smooth: false | 
 |  |  |           } | 
 |  |  | 
 |  |  |             border: 1px solid #207ff7; | 
 |  |  |             font-size: 13px; | 
 |  |  |             color: #207ff7; | 
 |  |  |             cursor: pointer; | 
 |  |  |           } | 
 |  |  |         } | 
 |  |  |       } | 
 |  |  | 
 |  |  |               width: 58px; | 
 |  |  |               text-align: center; | 
 |  |  |               height: 30px; | 
 |  |  |               cursor: pointer; | 
 |  |  |               line-height: 30px; | 
 |  |  |               background: #ffffff; | 
 |  |  |               border-radius: 2px; | 
 |  |  | 
 |  |  |             } | 
 |  |  |           } | 
 |  |  |         } | 
 |  |  |       } | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     .more { | 
 |  |  |       cursor: pointer; | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     .empty { | 
 |  |  |       height: 300px; | 
 |  |  |       display: flex; | 
 |  |  |       justify-content: center; | 
 |  |  |       align-items: center; | 
 |  |  |  | 
 |  |  |       img { | 
 |  |  |         width: 140px; | 
 |  |  |       } | 
 |  |  |     } | 
 |  |  |   } | 
 |  |  | 
 |  |  |         display: flex; | 
 |  |  |         justify-content: center; | 
 |  |  |         align-items: center; | 
 |  |  |         height: 100%; | 
 |  |  |  | 
 |  |  |         .echart_wrap { | 
 |  |  |           position: relative; |