| | |
| | | <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>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 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">超时预警人员(3)</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="date" |
| | | 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="name" |
| | | label="访客电话"> |
| | | <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="address" |
| | | label="访客公司"> |
| | | <el-table-column prop="outDate" label="授权到期时间"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="address" |
| | | label="公司类型"> |
| | | <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 v-if="row.outStatus === 2">即将超时</span> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="address" |
| | | label="授权到期时间"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="address" |
| | | label="状态"> |
| | | </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">离场</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" |
| | | style="margin-top: 20px" |
| | | @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 () { |
| | | data() { |
| | | return { |
| | | head: null, |
| | | list: [], |
| | | total: 0, |
| | | data1: [], |
| | | data2: [[], []], |
| | | page: 1 |
| | | } |
| | | }, |
| | | mounted () { |
| | | this.getcharts1() |
| | | this.getcharts2() |
| | | created() { |
| | | this.getHeader() |
| | | this.getData() |
| | | }, |
| | | mounted() { |
| | | // 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 |
| | | }) |
| | | }, |
| | | getcharts1 () { |
| | | 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')) |
| | | // 绘制图表 |
| | | myChart.setOption({ |
| | |
| | | label: { |
| | | formatter: '{b} {d}%' |
| | | }, |
| | | data: [ |
| | | { value: 1048, name: '劳务人员' }, |
| | | { value: 735, name: '内部员工' }, |
| | | { value: 580, name: '访客' } |
| | | ], |
| | | data: this.data1, |
| | | itemStyle: { |
| | | normal: { |
| | | color: function (colors) { |
| | |
| | | ] |
| | | }) |
| | | }, |
| | | getcharts2 () { |
| | | getcharts2() { |
| | | const myChart = echarts.init(document.getElementById('chart2')) |
| | | myChart.setOption({ |
| | | tooltip: { |
| | |
| | | }, |
| | | 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' |