119 lines
2.8 KiB
Vue
119 lines
2.8 KiB
Vue
<template>
|
|
<div class="app-container">
|
|
<el-tabs v-model="activeName" @tab-click="handleTabClick">
|
|
<el-tab-pane label="显示屏" name="screen">
|
|
<screen
|
|
:deviceID="this.$store.getters.deviceID"
|
|
:lastItem="lastItem"
|
|
v-if="flag"
|
|
></screen>
|
|
</el-tab-pane>
|
|
<el-tab-pane label="趋势图" name="chart">配置管理</el-tab-pane>
|
|
</el-tabs>
|
|
<el-table
|
|
v-loading="listLoading"
|
|
:data="deviceLogs"
|
|
style="width: 100%">
|
|
<el-table-column
|
|
type="index"
|
|
label="序号">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="device_id"
|
|
label="设备ID"
|
|
min-width="150">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="mosq_count"
|
|
label="计数"
|
|
min-width="80">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="signal"
|
|
label="信号"
|
|
min-width="50">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="energy"
|
|
label="电量"
|
|
min-width="80">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="coordinate"
|
|
label="坐标"
|
|
min-width="270"
|
|
:formatter="coordinate">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="calc_time"
|
|
label="时间"
|
|
min-width="100">
|
|
</el-table-column>
|
|
</el-table>
|
|
<el-pagination
|
|
class="pagination"
|
|
background
|
|
layout="total, prev, pager, next, jumper"
|
|
@current-change="handleCurrentChange"
|
|
@size-change="handleSizeChange"
|
|
:total="total">
|
|
</el-pagination>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { fetchDeviceLogs } from '@/api/counter'
|
|
import Screen from './components/screen'
|
|
export default {
|
|
name: 'deviceDetail',
|
|
components: {
|
|
Screen
|
|
},
|
|
data() {
|
|
return {
|
|
listLoading: true,
|
|
deviceLogs: [],
|
|
activeName: 'screen',
|
|
total: 0,
|
|
lastItem: {},
|
|
flag: false
|
|
}
|
|
},
|
|
methods: {
|
|
getDeviceLogs(params) {
|
|
fetchDeviceLogs(params).then(response => {
|
|
this.deviceLogs = response.data.results
|
|
this.total = response.data.count
|
|
this.listLoading = false
|
|
this.lastItem = this.deviceLogs[0]
|
|
this.flag = true
|
|
})
|
|
},
|
|
coordinate(row, column) {
|
|
return row.longitude + ', ' + row.latitude
|
|
},
|
|
handleCurrentChange(page) {
|
|
this.listLoading = true
|
|
const device_id = this.$store.getters.deviceID
|
|
this.getDeviceLogs({ device_id, page })
|
|
},
|
|
handleSizeChange(page) {
|
|
this.listLoading = true
|
|
const device_id = this.$store.getters.deviceID
|
|
this.getDeviceLogs({ device_id, page })
|
|
},
|
|
handleTabClick(tab, event) {
|
|
console.log(tab, event)
|
|
}
|
|
},
|
|
created() {
|
|
const device_id = this.$store.getters.deviceID
|
|
this.getDeviceLogs({ device_id })
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
|
|
</style>
|