<template>
|
<div class="main">
|
<div>
|
<el-form
|
:inline="true"
|
:model="formInline"
|
class="demo-form-inline"
|
>
|
<el-form-item label="选择组织:">
|
<el-select
|
v-model="formInline.organizationId"
|
placeholder="选择组织"
|
>
|
<el-option
|
v-for="(item,index) in orgData"
|
:key="index"
|
:label="item.name"
|
:value="item.id"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item>
|
<el-radio-group
|
v-model="time"
|
>
|
<el-radio-button label="今天" />
|
<el-radio-button label="近1天" />
|
<el-radio-button label="近3天" />
|
<el-radio-button label="近5天" />
|
<el-radio-button label="近7天" />
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item label="其他时间:">
|
<el-date-picker
|
v-model="selectTime"
|
type="datetimerange"
|
range-separator="至"
|
start-placeholder="开始日期"
|
:clearable="false"
|
end-placeholder="结束日期"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
:default-date="[selectTime[0], selectTime[1]]"
|
:picker-options="pickerOptions"
|
@change="changeDay()"
|
/>
|
</el-form-item>
|
<el-form-item label="小时状态:">
|
<el-select
|
v-model="formInline.hourState"
|
clearable
|
placeholder="选择状态"
|
>
|
<el-option
|
label="在线"
|
value="1"
|
/>
|
<el-option
|
label="离线"
|
value="0"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item>
|
<el-button
|
type="primary"
|
@click="handleSearch"
|
>
|
查询
|
</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
<div>
|
<p>实时在线率：共<span class="greenClor">{{ macOnlineData.sum }}</span>台，在线<span class="greenClor">{{ macOnlineData.online }}</span>台，在线率 <span :class="Number(macOnlineData.onlineRate)<90 ?'redClor':'greenClor'">{{ macOnlineData.onlineRate }}%</span></p>
|
<div>
|
<el-table
|
v-loading="loading"
|
:data="tableData"
|
max-height="700"
|
border
|
style="width: 100%"
|
>
|
<el-table-column
|
type="index"
|
label="序号"
|
width="60"
|
align="center"
|
label-class-name="itemSpan"
|
/>
|
<el-table-column
|
prop="mac"
|
label="mac号"
|
align="center"
|
label-class-name="itemSpan"
|
/>
|
<el-table-column
|
prop="name"
|
label="设备名称"
|
align="center"
|
label-class-name="itemSpan"
|
>
|
<template #default="scope">
|
<el-button
|
type="text"
|
@click="handleDetail(scope.row)"
|
>
|
{{ scope.row.name }}
|
</el-button>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="endTime"
|
label="最近一次掉线时间"
|
align="center"
|
label-class-name="itemSpan"
|
/>
|
<el-table-column
|
prop="startTime"
|
label="最近一次上线时间"
|
align="center"
|
label-class-name="itemSpan"
|
/>
|
<el-table-column
|
prop="num"
|
label="掉线次数"
|
width="90px"
|
label-class-name="itemSpan"
|
align="center"
|
/>
|
<el-table-column
|
prop="onlineRate"
|
label-class-name="itemSpan"
|
label="在线率"
|
width="100px"
|
align="center"
|
>
|
<template slot-scope="scope">
|
<span :class=" scope.row.onlineRate<90 ?'redClor':'greenClor'">{{ scope.row.onlineRate }}%</span>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="onlineTime"
|
label-class-name="itemSpan"
|
label="当前在线时长"
|
width="120px"
|
align="center"
|
/>
|
<el-table-column
|
prop="hourState"
|
label-class-name="itemSpan"
|
label="小时状态"
|
width="90px"
|
align="center"
|
>
|
<template slot-scope="scope">
|
<el-button
|
v-if="scope.row.hourState === '0'"
|
style="color:red;font-size:15px"
|
type="text"
|
>
|
离线
|
</el-button>
|
<el-button
|
v-else
|
style="color:#67c23a;font-size:15px"
|
type="text"
|
>
|
在线
|
</el-button>
|
</template>
|
</el-table-column>
|
<!-- <el-table-column
|
prop="address"
|
align="center"
|
width="80px"
|
label-class-name="itemSpan"
|
label="操作"
|
>
|
<template slot-scope="scope">
|
<el-button
|
size="mini"
|
type="text"
|
style="font-size:15px"
|
@click="handleDetail(scope.row)"
|
>
|
详情
|
</el-button>
|
</template>
|
</el-table-column> -->
|
</el-table>
|
</div>
|
</div>
|
<detailBox
|
v-if="handleShow"
|
:visible.sync="handleShow"
|
:mac-date="macDate"
|
/>
|
</div>
|
</template>
|
|
<script>
|
import dayjs from 'dayjs'
|
import detailBox from '@/views/onlineRate/detailBox'
|
import _ from 'lodash'
|
export default {
|
components: {
|
detailBox
|
},
|
data () {
|
return {
|
formInline: {
|
organizationId: '',
|
hourState: '',
|
state: '',
|
startTime: '',
|
endTime: ''
|
},
|
time: '今天',
|
selectTime: [],
|
macDate: {},
|
macOnlineData: {},
|
orgData: [],
|
tableData: [],
|
handleShow: false,
|
loading: false,
|
choiceDate: null,
|
|
// 重点
|
|
pickerOptions: {
|
onPick: ({ maxDate, minDate }) => {
|
// 把选择的第一个日期赋值给一个变量。
|
this.choiceDate = minDate.getTime()
|
// 如何你选择了两个日期了，就把那个变量置空
|
if (maxDate) this.choiceDate = ''
|
},
|
disabledDate: time => {
|
// 如何选择了一个日期
|
if (this.choiceDate) {
|
// 7天的时间戳
|
const one = 6 * 24 * 3600 * 1000
|
// 当前日期 - one = 6天之前
|
const minTime = this.choiceDate - one
|
// 当前日期 + one = 6天之后
|
const maxTime = this.choiceDate + one
|
return (
|
time.getTime() < minTime ||
|
time.getTime() > maxTime ||
|
// 限制不能选择今天及以后
|
time.getTime() > Date.now()
|
)
|
} else {
|
// 如果没有选择日期，就要限制不能选择今天及以后
|
return time.getTime() > Date.now()
|
}
|
}
|
}
|
}
|
},
|
computed: {
|
onlineData () {
|
return this.tableData.filter(item => item.state !== '0').length || 0
|
},
|
onlineRate () {
|
return (this.onlineData / this.tableData.length) * 100 || 0
|
}
|
},
|
watch: {
|
time (newValue, oldValue) {
|
let now = dayjs() // 获取当前时间
|
if (newValue === '近1天') {
|
this.$set(this.selectTime, 0, new Date(now.subtract(1, 'day').format('YYYY-MM-DD HH:mm')))
|
this.$set(this.selectTime, 1, new Date(now.format('YYYY-MM-DD HH:mm')))
|
this.formInline.endTime = now.subtract(1, 'hour').format('YYYY-MM-DD HH:mm')
|
this.formInline.startTime = now.subtract(1, 'day').format('YYYY-MM-DD HH:mm') // 获取昨天的零点
|
} else if (newValue === '近3天') {
|
this.$set(this.selectTime, 0, new Date(now.subtract(3, 'day').format('YYYY-MM-DD HH:mm')))
|
this.$set(this.selectTime, 1, new Date(now.format('YYYY-MM-DD HH:mm')))
|
this.formInline.endTime = now.subtract(1, 'hour').format('YYYY-MM-DD HH:mm')
|
this.formInline.startTime = now.subtract(3, 'day').format('YYYY-MM-DD HH:mm') // 获取前天的零点
|
} else if (newValue === '近5天') {
|
this.$set(this.selectTime, 0, new Date(now.subtract(5, 'day').format('YYYY-MM-DD HH:mm')))
|
this.$set(this.selectTime, 1, new Date(now.format('YYYY-MM-DD HH:mm')))
|
this.formInline.endTime = now.subtract(1, 'hour').format('YYYY-MM-DD HH:mm')
|
this.formInline.startTime = now.subtract(5, 'day').format('YYYY-MM-DD HH:mm') // 获取前天的零点
|
} else if (newValue === '近7天') {
|
this.$set(this.selectTime, 0, new Date(now.subtract(7, 'day').format('YYYY-MM-DD HH:mm')))
|
this.$set(this.selectTime, 1, new Date(now.format('YYYY-MM-DD HH:mm')))
|
this.formInline.endTime = now.subtract(1, 'hour').format('YYYY-MM-DD HH:mm')
|
this.formInline.startTime = now.subtract(7, 'day').format('YYYY-MM-DD HH:mm') // 获取前天的零点
|
} else if (newValue === '今天') {
|
this.$set(this.selectTime, 0, new Date(dayjs().startOf('day').format('YYYY-MM-DD HH:mm')))
|
this.$set(this.selectTime, 1, new Date(now.format('YYYY-MM-DD HH:mm')))
|
this.formInline.endTime = now.subtract(1, 'hour').format('YYYY-MM-DD HH:mm')
|
console.log('000', dayjs().startOf('day').format('YYYY-MM-DD HH:mm'))
|
this.formInline.startTime = dayjs().startOf('day').format('YYYY-MM-DD HH:mm')
|
}
|
}
|
},
|
mounted () {
|
this.$set(this.selectTime, 0, new Date(dayjs().startOf('day').format('YYYY-MM-DD HH:mm')))
|
this.$set(this.selectTime, 1, new Date(dayjs().format('YYYY-MM-DD HH:mm')))
|
},
|
created () {
|
this.getOrganizationId()
|
},
|
methods: {
|
changeDay () {
|
console.log('this.selectTime', this.selectTime)
|
if (this.selectTime !== null) {
|
console.log(this.selectTime)
|
this.formInline.startTime = this.selectTime[0]
|
|
if (dayjs(this.selectTime[1]).format('YYYY-MM-DD HH') === dayjs().format('YYYY-MM-DD HH')) {
|
this.formInline.endTime = dayjs(this.selectTime[1]).subtract(1, 'hour').format('YYYY-MM-DD HH:mm')
|
} else {
|
this.formInline.endTime = dayjs(this.selectTime[1]).startOf('day').format('YYYY-MM-DD HH:mm')
|
}
|
}
|
console.log('this.formInline12', this.formInline)
|
this.time = ''
|
},
|
handleDetail (row) {
|
this.handleShow = true
|
this.macDate = _.cloneDeep(row)
|
this.macDate.startTime = this.selectTime[0]
|
this.macDate.endTime = this.selectTime[1]
|
console.log(this.macDate)
|
},
|
handleSearch () {
|
this.getOnlineData()
|
console.log(' this.formInline', this.formInline)
|
if (this.formInline.organizationId !== '') {
|
if (this.time === '今天') {
|
console.log('今天今天')
|
this.formInline.startTime = dayjs().startOf('day').format('YYYY-MM-DD HH:mm')
|
this.formInline.endTime = dayjs().subtract(1, 'hour').format('YYYY-MM-DD HH:mm')
|
}
|
this.loading = true
|
this.$request({
|
url: '/onlineRate/page',
|
method: 'post',
|
data: {
|
...this.formInline
|
}
|
})
|
.then(res => {
|
this.tableData = res.data || []
|
this.loading = false
|
})
|
.catch(err => {
|
console.log(err)
|
})
|
} else {
|
this.$message.warning('请选择组织或者时间')
|
}
|
},
|
getOnlineData () {
|
this.$request({
|
url: '/onlineRate/state',
|
method: 'get',
|
params: {
|
organizationId: this.formInline.organizationId
|
}
|
})
|
.then(res => {
|
this.macOnlineData = res.data
|
})
|
.catch(err => {
|
console.log(err)
|
})
|
},
|
getOrganizationId () {
|
this.$request({
|
url: '/organization/getOrganizationId',
|
method: 'get'
|
})
|
.then(res => {
|
this.orgData = res.data
|
})
|
.catch(err => {
|
console.log(err)
|
})
|
},
|
},
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.main{
|
padding: 10px;
|
font-size: 18px;
|
}
|
/deep/.el-form-item__label{
|
font-size: 16px;
|
}
|
/deep/.itemSpan {
|
font-size: 15px;
|
color: rgba(16, 16, 16, 1);
|
}
|
/deep/.cell{
|
font-size: 15px;
|
}
|
.redClor{
|
color: red;
|
}
|
.greenClor{
|
color:#67c23a;
|
}
|
</style>>
|
