|  |  | 
 |  |  | <template> | 
 |  |  |   <div class="home"> | 
 |  |  |     <div class="home_total"> | 
 |  |  |       <div class="home_total_head">在厂人员总览</div> | 
 |  |  |       <div class="home_total_head">在园人员总览</div> | 
 |  |  |       <div class="home_total_list"> | 
 |  |  |         <div class="home_total_list_item a"> | 
 |  |  |           <span>{{head && head.workerCount ? head.workerCount : 0}}</span> | 
 |  |  |           <span>{{ head && head.workerCount ? head.workerCount : 0 }}</span> | 
 |  |  |           <span>内部员工</span> | 
 |  |  |         </div> | 
 |  |  |         <div class="home_total_list_item b"> | 
 |  |  |           <span>{{head && head.visitorCount ? head.visitorCount : 0}}</span> | 
 |  |  |           <span>{{ head && head.visitorCount ? head.visitorCount : 0 }}</span> | 
 |  |  |           <span>访客</span> | 
 |  |  |         </div> | 
 |  |  |         <div class="home_total_list_item c"> | 
 |  |  |           <span>{{head && head.lwCount ? head.lwCount : 0}}</span> | 
 |  |  |           <span>{{ head && head.lwCount ? head.lwCount : 0 }}</span> | 
 |  |  |           <span>劳务人员</span> | 
 |  |  |         </div> | 
 |  |  |         <div class="home_total_list_item d"> | 
 |  |  |           <span>{{head && head.presenceCarCount ? head.presenceCarCount : 0}}</span> | 
 |  |  |           <span>{{ | 
 |  |  |             head && head.presenceCarCount ? head.presenceCarCount : 0 | 
 |  |  |           }}</span> | 
 |  |  |           <span>在场车辆</span> | 
 |  |  |         </div> | 
 |  |  |         <div class="home_total_list_item e"> | 
 |  |  |           <span>{{head && head.longCarCount ? head.longCarCount : 0}}</span> | 
 |  |  |           <span>{{ head && head.longCarCount ? head.longCarCount : 0 }}</span> | 
 |  |  |           <span>长期车辆</span> | 
 |  |  |         </div> | 
 |  |  |         <div class="home_total_list_item f"> | 
 |  |  |           <span>{{head && head.visitorCarCount ? head.visitorCarCount : 0}}</span> | 
 |  |  |           <span>{{ | 
 |  |  |             head && head.visitorCarCount ? head.visitorCarCount : 0 | 
 |  |  |           }}</span> | 
 |  |  |           <span>预约车辆</span> | 
 |  |  |         </div> | 
 |  |  |         <div class="home_total_list_item g"> | 
 |  |  |           <span>{{head && head.supplierCount ? head.supplierCount : 0}}</span> | 
 |  |  |           <span>{{ head && head.supplierCount ? head.supplierCount : 0 }}</span> | 
 |  |  |           <span>供应商</span> | 
 |  |  |         </div> | 
 |  |  |       </div> | 
 |  |  |     </div> | 
 |  |  |     <div class="home_charts"> | 
 |  |  |       <div class="home_charts_item"> | 
 |  |  |         <div class="home_charts_item_label">在厂人员占比</div> | 
 |  |  |         <div class="home_charts_item_label">在园人员占比</div> | 
 |  |  |         <div class="home_charts_item_charts" id="chart1"></div> | 
 |  |  |       </div> | 
 |  |  |       <div class="home_charts_item"> | 
 |  |  | 
 |  |  |       </div> | 
 |  |  |     </div> | 
 |  |  |     <div class="home_table"> | 
 |  |  |       <div class="home_table_head">超时预警人员({{total}})</div> | 
 |  |  |       <div class="home_table_head">超时预警人员({{ total }})</div> | 
 |  |  |       <div class="home_table_box"> | 
 |  |  |         <el-table | 
 |  |  |           :data="list" | 
 |  |  |           :header-cell-style="{background: '#dcdde2', color: 'rgb(51, 51, 51)'}" | 
 |  |  |           :header-cell-style="{ | 
 |  |  |             background: '#dcdde2', | 
 |  |  |             color: 'rgb(51, 51, 51)', | 
 |  |  |           }" | 
 |  |  |           border | 
 |  |  |           style="width: 100%"> | 
 |  |  |           <el-table-column | 
 |  |  |             prop="name" | 
 |  |  |             label="访客姓名"> | 
 |  |  |           style="width: 100%" | 
 |  |  |         > | 
 |  |  |           <el-table-column prop="name" label="访客姓名"> </el-table-column> | 
 |  |  |           <el-table-column prop="phone" label="访客电话"> </el-table-column> | 
 |  |  |           <el-table-column prop="companyName" label="访客组织"> | 
 |  |  |           </el-table-column> | 
 |  |  |           <el-table-column | 
 |  |  |             prop="phone" | 
 |  |  |             label="访客电话"> | 
 |  |  |           </el-table-column> | 
 |  |  |           <el-table-column | 
 |  |  |             prop="companyName" | 
 |  |  |             label="访客公司"> | 
 |  |  |           </el-table-column> | 
 |  |  |           <el-table-column | 
 |  |  |             prop="address" | 
 |  |  |             label="人员类型"> | 
 |  |  |             <template slot-scope="{row}"> | 
 |  |  |               <span v-if="row.memberType === 0">劳务访客</span> | 
 |  |  |               <span v-if="row.memberType === 1">普通访客</span> | 
 |  |  |               <span v-if="row.memberType === 2">内部人员</span> | 
 |  |  |           <el-table-column label="人员类型"> | 
 |  |  |             <template slot-scope="{ row }"> | 
 |  |  |               <span v-if="row.type === 0">劳务访客</span> | 
 |  |  |               <span v-if="row.type === 1">普通访客</span> | 
 |  |  |               <span v-if="row.type === 2">内部人员</span> | 
 |  |  |             </template> | 
 |  |  |           </el-table-column> | 
 |  |  |           <el-table-column | 
 |  |  |             prop="endtime" | 
 |  |  |             label="授权到期时间"> | 
 |  |  |           <el-table-column prop="outDate" label="授权到期时间"> | 
 |  |  |           </el-table-column> | 
 |  |  |           <el-table-column | 
 |  |  |             label="状态"> | 
 |  |  |             <template slot-scope="{row}"> | 
 |  |  |           <el-table-column label="状态"> | 
 |  |  |             <template slot-scope="{ row }"> | 
 |  |  |               <span v-if="row.outStatus === 0">未超时</span> | 
 |  |  |               <span style="color: red;" v-if="row.outStatus === 1">已超时</span> | 
 |  |  |               <span style="color: red" v-if="row.outStatus === 1">已超时</span> | 
 |  |  |               <span v-if="row.outStatus === 2">即将超时</span> | 
 |  |  |             </template> | 
 |  |  |           </el-table-column> | 
 |  |  |           <el-table-column | 
 |  |  |             prop="address" | 
 |  |  |             label="处理" | 
 |  |  |             width="80"> | 
 |  |  |           <el-table-column prop="address" label="处理" width="80"> | 
 |  |  |             <template slot-scope="scope"> | 
 |  |  |               <el-button type="text" @click="departure(scope.row.id)">离场</el-button> | 
 |  |  |               <el-button | 
 |  |  |                 type="text" | 
 |  |  |                 @click="departure(scope.row.id)" | 
 |  |  |                 v-if="scope.row.outStatus === 1" | 
 |  |  |                 >离厂</el-button | 
 |  |  |               > | 
 |  |  |             </template> | 
 |  |  |           </el-table-column> | 
 |  |  |         </el-table> | 
 |  |  |         <el-pagination | 
 |  |  |           style="margin-top: 20px;" | 
 |  |  |           style="margin-top: 20px" | 
 |  |  |           @current-change="handleCurrentChange" | 
 |  |  |           :current-page="page" | 
 |  |  |           :page-size="10" | 
 |  |  |           layout="total, prev, pager, next, jumper" | 
 |  |  |           :total="total"> | 
 |  |  |           :total="total" | 
 |  |  |         > | 
 |  |  |         </el-pagination> | 
 |  |  |       </div> | 
 |  |  |     </div> | 
 |  |  | 
 |  |  | import { body, head, timeoutPage, level } from '@/api/business/staging' | 
 |  |  | export default { | 
 |  |  |   name: 'Index', | 
 |  |  |   data () { | 
 |  |  |   data() { | 
 |  |  |     return { | 
 |  |  |       head: null, | 
 |  |  |       list: [], | 
 |  |  |       total: 0, | 
 |  |  |       data1: [], | 
 |  |  |       data2: [[],[]], | 
 |  |  |       data2: [[], []], | 
 |  |  |       page: 1 | 
 |  |  |     } | 
 |  |  |   }, | 
 |  |  |   created () { | 
 |  |  |   created() { | 
 |  |  |     this.getHeader() | 
 |  |  |     this.getData() | 
 |  |  |   }, | 
 |  |  |   mounted () { | 
 |  |  |   mounted() { | 
 |  |  |     // this.getcharts2() | 
 |  |  |   }, | 
 |  |  |   methods: { | 
 |  |  | 
 |  |  |           }) | 
 |  |  |       }).catch(() => { | 
 |  |  |  | 
 |  |  |       }); | 
 |  |  |       }) | 
 |  |  |     }, | 
 |  |  |     getData() { | 
 |  |  |       timeoutPage({ | 
 |  |  | 
 |  |  |         this.getcharts1() | 
 |  |  |       }) | 
 |  |  |     }, | 
 |  |  |     handleCurrentChange (page) { | 
 |  |  |     handleCurrentChange(page) { | 
 |  |  |       this.page = page | 
 |  |  |       this.getData() | 
 |  |  |     }, | 
 |  |  |     getcharts1 () { | 
 |  |  |     getcharts1() { | 
 |  |  |       const myChart = echarts.init(document.getElementById('chart1')) | 
 |  |  |       // 绘制图表 | 
 |  |  |       myChart.setOption({ | 
 |  |  | 
 |  |  |         ] | 
 |  |  |       }) | 
 |  |  |     }, | 
 |  |  |     getcharts2 () { | 
 |  |  |     getcharts2() { | 
 |  |  |       const myChart = echarts.init(document.getElementById('chart2')) | 
 |  |  |       myChart.setOption({ | 
 |  |  |         tooltip: { |