|  |  |  | 
|---|
|  |  |  | <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: { | 
|---|