207 lines
8.0 KiB
Vue
207 lines
8.0 KiB
Vue
<template>
|
|
<div class="app-container">
|
|
<el-form :inline="true" :model="DeviceSearchForm" @submit.native.prevent>
|
|
<el-form-item
|
|
prop="device_id"
|
|
>
|
|
<el-input
|
|
size="mini"
|
|
type="text"
|
|
v-model="DeviceSearchForm.device_id"
|
|
style="width: 10rem"
|
|
auto-complete="off"
|
|
@keyup.enter.native="onSubmit"
|
|
:placeholder="$t('counter.inputDeviceID')"
|
|
></el-input>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-select size="mini"
|
|
style="width: 5.5rem"
|
|
v-model="DeviceSearchForm.status"
|
|
:placeholder="$t('counter.inputStatus')"
|
|
>
|
|
<el-option :label="$t('counter.all')" value=""></el-option>
|
|
<el-option :label="$t('counter.online')" value="1"></el-option>
|
|
<el-option :label="$t('counter.offline')" value="0"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" size="mini" @click="onSubmit">{{$t('counter.search')}}</el-button>
|
|
<el-button size="mini" @click="resetSearch">{{$t('counter.reset')}}</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
|
|
<!-- table -->
|
|
<el-table
|
|
v-loading="listLoading"
|
|
:data="deviceList"
|
|
style="width: 100%">
|
|
<el-table-column
|
|
type="index"
|
|
:label="$t('counter.sn')">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="device_id"
|
|
:label="$t('counter.device')"
|
|
min-width="120">
|
|
<template slot-scope="scope">
|
|
<span>{{ scope.row.device_id }} <el-tag v-if="scope.row.chip_type === 'AIR-V2'" type="success" size="mini">V2</el-tag></span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="device_name"
|
|
:label="$t('counter.deviceName')"
|
|
min-width="150">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="status"
|
|
:label="$t('counter.status')"
|
|
min-width="80">
|
|
<template slot-scope="scope">
|
|
<span v-if="scope.row.status==0" style="color: #F56C6C" ><i class="el-icon-error"></i> {{$t('counter.offline')}}</span>
|
|
<span v-if="scope.row.status==1" style="color: #67C23A" ><i class="el-icon-success"></i> {{$t('counter.online')}}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="count"
|
|
:label="$t('counter.count')"
|
|
min-width="80">
|
|
<template slot-scope="scope">
|
|
<span ><i class="el-icon-alimosquito"></i> {{scope.row.count}}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="signal"
|
|
:label="$t('counter.signal')"
|
|
min-width="80">
|
|
<template slot-scope="scope">
|
|
<span v-if="scope.row.signal>=24" style="color: #67C23A" ><i class="el-icon-alisignal-4"></i></span>
|
|
<span v-if="scope.row.signal>=16 && scope.row.signal<24" style="color: #67C23A" ><i class="el-icon-alisignal-3"></i></span>
|
|
<span v-if="scope.row.signal>=8 && scope.row.signal<16" style="color: #FF9B21" ><i class="el-icon-alisignal-2"></i></span>
|
|
<span v-if="scope.row.signal>=0 && scope.row.signal<8" style="color: #F56C6C" ><i class="el-icon-alisignal-1"></i></span>
|
|
</template>
|
|
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="energy"
|
|
:label="$t('counter.energy')"
|
|
min-width="100">
|
|
<template slot-scope="scope">
|
|
<span v-if="scope.row.energy.replace('%','') >= 90" style="color: #67C23A" ><i class="el-icon-alipower_9"></i> {{scope.row.energy}}</span>
|
|
<span v-if="scope.row.energy.replace('%','') >= 80 && scope.row.energy.replace('%','') < 90" style="color: #67C23A" ><i class="el-icon-alipower_8" size="small"></i> {{scope.row.energy}}</span>
|
|
<span v-if="scope.row.energy.replace('%','') >= 70 && scope.row.energy.replace('%','') < 80" style="color: #67C23A" ><i class="el-icon-alipower_7"></i> {{scope.row.energy}}</span>
|
|
<span v-if="scope.row.energy.replace('%','') >= 60 && scope.row.energy.replace('%','') < 70" style="color: #67C23A" ><i class="el-icon-alipower_6"></i> {{scope.row.energy}}</span>
|
|
<span v-if="scope.row.energy.replace('%','') >= 50 && scope.row.energy.replace('%','') < 60" style="color: #67C23A" ><i class="el-icon-alipower_5"></i> {{scope.row.energy}}</span>
|
|
<span v-if="scope.row.energy.replace('%','') >= 40 && scope.row.energy.replace('%','') < 50" style="color: #FF9B21" ><i class="el-icon-alipower_4"></i> {{scope.row.energy}}</span>
|
|
<span v-if="scope.row.energy.replace('%','') >= 30 && scope.row.energy.replace('%','') < 40" style="color: #FF9B21" ><i class="el-icon-alipower_3" ></i> {{scope.row.energy}}</span>
|
|
<span v-if="scope.row.energy.replace('%','') >= 20 && scope.row.energy.replace('%','') < 30" style="color: #FF9B21" ><i class="el-icon-alipower_2"></i> {{scope.row.energy}}</span>
|
|
<span v-if="scope.row.energy.replace('%','') >= 10 && scope.row.energy.replace('%','') < 20" style="color: #F56C6C" ><i class="el-icon-alipower_1"></i> {{scope.row.energy}}</span>
|
|
<span v-if="scope.row.energy.replace('%','') >= 0 && scope.row.energy.replace('%','') < 10" style="color: #F56C6C" ><i class="el-icon-alipower_"></i> <{{'10.0%'}}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="time"
|
|
:label="$t('counter.time')"
|
|
min-width="100">
|
|
</el-table-column>
|
|
<el-table-column
|
|
fixed="right"
|
|
:label="$t('counter.action')"
|
|
min-width="100">
|
|
<template slot-scope="scope">
|
|
<el-button type="text" title="Detail"
|
|
@click="handleDetailClick(scope.row.device_id)" ><i class="el-icon-alixiangqing"></i>
|
|
</el-button>
|
|
<el-button type="text" title="Map"
|
|
@click="handleMapClick(scope.row.device_id)" ><i class="el-icon-alimap"></i>
|
|
</el-button>
|
|
</template>
|
|
</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 } from '@/api/counter'
|
|
export default {
|
|
name: 'device',
|
|
data() {
|
|
return {
|
|
deviceList: [],
|
|
listLoading: true,
|
|
DeviceSearchForm: {
|
|
device_id: null,
|
|
status: null
|
|
},
|
|
total: 0
|
|
}
|
|
},
|
|
methods: {
|
|
getDevices(params) {
|
|
fetchDeviceList(params).then(response => {
|
|
this.deviceList = response.data.results
|
|
this.total = response.data.count
|
|
this.listLoading = false
|
|
})
|
|
},
|
|
onSubmit() {
|
|
const device_id = this.DeviceSearchForm.device_id
|
|
const status = this.DeviceSearchForm.status
|
|
this.getDevices({ device_id, status })
|
|
},
|
|
resetSearch() {
|
|
this.DeviceSearchForm.device_id = ''
|
|
this.DeviceSearchForm.status = ''
|
|
this.getDevices()
|
|
},
|
|
handleCurrentChange(page) {
|
|
this.listLoading = true
|
|
this.getDevices({ page })
|
|
},
|
|
handleSizeChange(page) {
|
|
this.listLoading = true
|
|
this.getDevices({ page })
|
|
},
|
|
handleDetailClick(deviceID) {
|
|
// console.log(deviceID)
|
|
this.$store.dispatch('changeDeviceID', deviceID).then(() => {
|
|
this.$router.push('/counter/detail')
|
|
}).catch(() => {
|
|
console.log('Err: get device_id failed in device page')
|
|
})
|
|
},
|
|
handleMapClick(deviceID) {
|
|
// console.log(deviceID)
|
|
this.$store.dispatch('changeMapClick', true).then(() => {
|
|
console.log('go to map')
|
|
}).catch(() => {
|
|
console.log('Err: click map failed')
|
|
})
|
|
this.$store.dispatch('changeDeviceID', deviceID).then(() => {
|
|
this.$router.push({ path: '/counter/map', query: { device_id: deviceID }})
|
|
}).catch(() => {
|
|
console.log('Err: get device_id failed in device page')
|
|
})
|
|
}
|
|
},
|
|
created() {
|
|
this.getDevices()
|
|
},
|
|
deactivated() {
|
|
this.$destroy(true)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
|
|
</style>
|