|  |  | 
 |  |  |       <div class="home_total_head">在厂人员总览</div> | 
 |  |  |       <div class="home_total_list"> | 
 |  |  |         <div class="home_total_list_item a"> | 
 |  |  |           <span>352</span> | 
 |  |  |           <span>{{head && head.workerCount ? head.workerCount : 0}}</span> | 
 |  |  |           <span>内部员工</span> | 
 |  |  |         </div> | 
 |  |  |         <div class="home_total_list_item b"> | 
 |  |  |           <span>352</span> | 
 |  |  |           <span>{{head && head.visitorCount ? head.visitorCount : 0}}</span> | 
 |  |  |           <span>访客</span> | 
 |  |  |         </div> | 
 |  |  |         <div class="home_total_list_item c"> | 
 |  |  |           <span>352</span> | 
 |  |  |           <span>{{head && head.lwCount ? head.lwCount : 0}}</span> | 
 |  |  |           <span>劳务人员</span> | 
 |  |  |         </div> | 
 |  |  |         <div class="home_total_list_item d"> | 
 |  |  |           <span>352</span> | 
 |  |  |           <span>{{head && head.presenceCarCount ? head.presenceCarCount : 0}}</span> | 
 |  |  |           <span>在场车辆</span> | 
 |  |  |         </div> | 
 |  |  |         <div class="home_total_list_item e"> | 
 |  |  |           <span>352</span> | 
 |  |  |           <span>访客车辆</span> | 
 |  |  |           <span>{{head && head.longCarCount ? head.longCarCount : 0}}</span> | 
 |  |  |           <span>长期车辆</span> | 
 |  |  |         </div> | 
 |  |  |         <div class="home_total_list_item f"> | 
 |  |  |           <span>352</span> | 
 |  |  |           <span>劳务车辆</span> | 
 |  |  |           <span>{{head && head.visitorCarCount ? head.visitorCarCount : 0}}</span> | 
 |  |  |           <span>预约车辆</span> | 
 |  |  |         </div> | 
 |  |  |         <div class="home_total_list_item g"> | 
 |  |  |           <span>352</span> | 
 |  |  |           <span>{{head && head.supplierCount ? head.supplierCount : 0}}</span> | 
 |  |  |           <span>供应商</span> | 
 |  |  |         </div> | 
 |  |  |       </div> | 
 |  |  | 
 |  |  |       </div> | 
 |  |  |     </div> | 
 |  |  |     <div class="home_table"> | 
 |  |  |       <div class="home_table_head">超时预警人员(3)</div> | 
 |  |  |       <div class="home_table_head">超时预警人员({{total}})</div> | 
 |  |  |       <div class="home_table_box"> | 
 |  |  |         <el-table | 
 |  |  |           :data="list" | 
 |  |  | 
 |  |  |           border | 
 |  |  |           style="width: 100%"> | 
 |  |  |           <el-table-column | 
 |  |  |             prop="date" | 
 |  |  |             prop="name" | 
 |  |  |             label="访客姓名"> | 
 |  |  |           </el-table-column> | 
 |  |  |           <el-table-column | 
 |  |  |             prop="name" | 
 |  |  |             prop="phone" | 
 |  |  |             label="访客电话"> | 
 |  |  |           </el-table-column> | 
 |  |  |           <el-table-column | 
 |  |  |             prop="address" | 
 |  |  |             prop="companyName" | 
 |  |  |             label="访客公司"> | 
 |  |  |           </el-table-column> | 
 |  |  |           <el-table-column | 
 |  |  |             prop="address" | 
 |  |  |             label="公司类型"> | 
 |  |  |             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="address" | 
 |  |  |             prop="outDate" | 
 |  |  |             label="授权到期时间"> | 
 |  |  |           </el-table-column> | 
 |  |  |           <el-table-column | 
 |  |  |             prop="address" | 
 |  |  |             label="状态"> | 
 |  |  |             <template slot-scope="{row}"> | 
 |  |  |               <span v-if="row.outStatus === 0">未超时</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"> | 
 |  |  |             <template slot-scope="scope"> | 
 |  |  |               <el-button type="text">离场</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;" | 
 |  |  |           @size-change="handleSizeChange" | 
 |  |  |           @current-change="handleCurrentChange" | 
 |  |  |           :current-page="page" | 
 |  |  |           :page-sizes="[100, 200, 300, 400]" | 
 |  |  |           :page-size="100" | 
 |  |  |           layout="total, sizes, prev, pager, next, jumper" | 
 |  |  |           :total="400"> | 
 |  |  |           :page-size="10" | 
 |  |  |           layout="total, prev, pager, next, jumper" | 
 |  |  |           :total="total"> | 
 |  |  |         </el-pagination> | 
 |  |  |       </div> | 
 |  |  |     </div> | 
 |  |  | 
 |  |  |  | 
 |  |  | <script> | 
 |  |  | import * as echarts from 'echarts' | 
 |  |  | import { body, head, timeoutPage, level } from '@/api/business/staging' | 
 |  |  | export default { | 
 |  |  |   name: 'Index', | 
 |  |  |   data () { | 
 |  |  |     return { | 
 |  |  |       head: null, | 
 |  |  |       list: [], | 
 |  |  |       total: 0, | 
 |  |  |       data1: [], | 
 |  |  |       data2: [[],[]], | 
 |  |  |       page: 1 | 
 |  |  |     } | 
 |  |  |   }, | 
 |  |  |   created () { | 
 |  |  |     this.getHeader() | 
 |  |  |     this.getData() | 
 |  |  |   }, | 
 |  |  |   mounted () { | 
 |  |  |     this.getcharts1() | 
 |  |  |     this.getcharts2() | 
 |  |  |     // this.getcharts2() | 
 |  |  |   }, | 
 |  |  |   methods: { | 
 |  |  |     handleSizeChange () { | 
 |  |  |     departure(id) { | 
 |  |  |       this.$confirm('确定离场吗, 是否继续?', '提示', { | 
 |  |  |         confirmButtonText: '确定', | 
 |  |  |         cancelButtonText: '取消', | 
 |  |  |         type: 'warning' | 
 |  |  |       }).then(() => { | 
 |  |  |         level(id) | 
 |  |  |           .then(res => { | 
 |  |  |             this.page = 1 | 
 |  |  |             this.getData() | 
 |  |  |           }) | 
 |  |  |       }).catch(() => { | 
 |  |  |  | 
 |  |  |       }); | 
 |  |  |     }, | 
 |  |  |     handleCurrentChange () { | 
 |  |  |  | 
 |  |  |     getData() { | 
 |  |  |       timeoutPage({ | 
 |  |  |         capacity: 10, | 
 |  |  |         page: this.page, | 
 |  |  |         model: {} | 
 |  |  |       }).then(res => { | 
 |  |  |         this.list = res.records | 
 |  |  |         this.total = res.total | 
 |  |  |       }) | 
 |  |  |     }, | 
 |  |  |     getHeader() { | 
 |  |  |       head().then(res => { | 
 |  |  |         this.head = res | 
 |  |  |       }) | 
 |  |  |       body().then(res => { | 
 |  |  |         this.data1 = res.retentionUsers.map(item => { | 
 |  |  |           let name = '' | 
 |  |  |           if (item.memberType === 0) { | 
 |  |  |             name = '劳务访客' | 
 |  |  |           } else if (item.memberType === 1) { | 
 |  |  |             name = '普通访客' | 
 |  |  |           } else if (item.memberType === 2) { | 
 |  |  |             name = '内部员工' | 
 |  |  |           } | 
 |  |  |           return { | 
 |  |  |             value: item.memberCount, | 
 |  |  |             name | 
 |  |  |           } | 
 |  |  |         }) | 
 |  |  |         let arr1 = res.companyUsers.map(item => item.companyName) | 
 |  |  |         let arr2 = res.companyUsers.map(item => item.memberCount) | 
 |  |  |         if (arr1.length > 0) { | 
 |  |  |           this.data2 = [arr1, arr2] | 
 |  |  |           this.getcharts2() | 
 |  |  |         } | 
 |  |  |         this.getcharts1() | 
 |  |  |       }) | 
 |  |  |     }, | 
 |  |  |     handleCurrentChange (page) { | 
 |  |  |       this.page = page | 
 |  |  |       this.getData() | 
 |  |  |     }, | 
 |  |  |     getcharts1 () { | 
 |  |  |       const myChart = echarts.init(document.getElementById('chart1')) | 
 |  |  | 
 |  |  |             label: { | 
 |  |  |               formatter: '{b} {d}%' | 
 |  |  |             }, | 
 |  |  |             data: [ | 
 |  |  |               { value: 1048, name: '劳务人员' }, | 
 |  |  |               { value: 735, name: '内部员工' }, | 
 |  |  |               { value: 580, name: '访客' } | 
 |  |  |             ], | 
 |  |  |             data: this.data1, | 
 |  |  |             itemStyle: { | 
 |  |  |               normal: { | 
 |  |  |                 color: function (colors) { | 
 |  |  | 
 |  |  |         }, | 
 |  |  |         yAxis: { | 
 |  |  |           type: 'category', | 
 |  |  |           data: ['海康威视', '农业有限公司', '字幕也有限公司', '万达股份有限公司', '阿里巴巴集团有限公司', '腾讯集团有限公司'] | 
 |  |  |           data: this.data2[0] | 
 |  |  |         }, | 
 |  |  |         series: [ | 
 |  |  |           { | 
 |  |  |             realtimeSort: true, | 
 |  |  |             type: 'bar', | 
 |  |  |             data: [1, 2, 3, 4, 5, 6], | 
 |  |  |             data: this.data2[1], | 
 |  |  |             itemStyle: { | 
 |  |  |               normal: { | 
 |  |  |                 color: '#fc8251' |