177 lines
4.3 KiB
Vue
177 lines
4.3 KiB
Vue
<template>
|
|
<div class="app-container">
|
|
<el-tabs v-model="activeName" @tab-click="handleTabClick">
|
|
<el-tab-pane label="显示屏" name="screen">
|
|
<transition>
|
|
<screen
|
|
:deviceID="this.$store.getters.deviceID"
|
|
:lastItem="lastItem"
|
|
:status="status"
|
|
v-if="flag"
|
|
>
|
|
</screen>
|
|
</transition>
|
|
</el-tab-pane>
|
|
<el-tab-pane label="趋势图" name="chart">
|
|
<el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
|
|
<chart
|
|
:chart-data="lineChartData.total"
|
|
:showChart="showChart"
|
|
>
|
|
</chart>
|
|
</el-row>
|
|
</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 { fetchDeviceList, fetchDeviceLogs } from '@/api/counter'
|
|
import Screen from './components/screen'
|
|
import Chart from './components/chart'
|
|
|
|
const defaultLastItem = {
|
|
mosq_count: '0',
|
|
signal: '0',
|
|
energy: '0'
|
|
}
|
|
export default {
|
|
name: 'deviceDetail',
|
|
components: {
|
|
Screen,
|
|
Chart
|
|
},
|
|
data() {
|
|
return {
|
|
lineChartData: {
|
|
total: {
|
|
historyData: [],
|
|
xAxis: [],
|
|
title: 'Trend'
|
|
}
|
|
},
|
|
listLoading: true,
|
|
deviceLogs: [],
|
|
activeName: 'screen',
|
|
total: 0,
|
|
lastItem: {},
|
|
status: 0,
|
|
showChart: false,
|
|
flag: false
|
|
}
|
|
},
|
|
watch: {
|
|
activeName(val) {
|
|
if (val === 'chart') {
|
|
this.showChart = true
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
getDeviceLogs(params) {
|
|
fetchDeviceLogs(params).then(response => {
|
|
const dateList = []
|
|
this.deviceLogs = response.data.results
|
|
this.deviceLogs.forEach((item, index) => {
|
|
this.lineChartData.total.historyData.push(item.mosq_count)
|
|
dateList.push(item.calc_time.substr(11))
|
|
})
|
|
this.total = response.data.count
|
|
this.lineChartData.total.xAxis = dateList.reverse()
|
|
this.listLoading = false
|
|
this.lastItem = this.deviceLogs[0]
|
|
if (this.lastItem === undefined) {
|
|
this.lastItem = defaultLastItem
|
|
}
|
|
this.flag = true
|
|
})
|
|
},
|
|
getDevices(params) {
|
|
fetchDeviceList(params).then(response => {
|
|
this.deviceList = response.data.results
|
|
this.status = this.deviceList[0].status
|
|
})
|
|
},
|
|
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 })
|
|
this.getDevices({ device_id })
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.v-enter, .v-leave-to {
|
|
opacity: 0;
|
|
}
|
|
.v-enter-active, .v-leave-active {
|
|
transition: opacity 1.5s
|
|
}
|
|
</style>
|