|  |  |  | 
|---|
|  |  |  | <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)">离场</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' | 
|---|