| | |
| | | <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.memberType === 0">å³å¡è®¿å®¢</span> |
| | | <span v-if="row.memberType === 1">æ®é访客</span> |
| | | <span v-if="row.memberType === 2">å
é¨äººå</span> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="address" |
| | | prop="endtime" |
| | | 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' |