From 39880bb3cd54d412a0ed8f73f0c82005dbbbee44 Mon Sep 17 00:00:00 2001 From: quanyawei <401863037@qq.com> Date: Thu, 07 Mar 2024 15:07:42 +0800 Subject: [PATCH] fix:断线统计修改 --- src/views/onlineRate/index.vue | 105 +++++++++++++++++++++++++++++++++++++++++----------- 1 files changed, 83 insertions(+), 22 deletions(-) diff --git a/src/views/onlineRate/index.vue b/src/views/onlineRate/index.vue index 717daa8..de31d70 100644 --- a/src/views/onlineRate/index.vue +++ b/src/views/onlineRate/index.vue @@ -7,7 +7,7 @@ class="demo-form-inline" > <el-form-item label="������������:"> - <el-select + <!-- <el-select v-model="formInline.organizationId" placeholder="������������" > @@ -17,7 +17,16 @@ :label="item.name" :value="item.id" /> - </el-select> + </el-select> --> + <el-cascader + ref="cascader" + :show-all-levels="false" + :options="orgData" + collapse-tags + :props="props" + clearable + @change="changeCascader" + /> </el-form-item> <el-form-item> <el-radio-group @@ -36,10 +45,12 @@ 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" + @change="changeDay()" /> </el-form-item> <el-form-item label="������������:"> @@ -69,7 +80,7 @@ </el-form> </div> <div> - <p>���������������������<span class="greenClor">{{ tableData.length }}</span>������������<span class="greenClor">{{ onlineData }}</span>��������������� <span :class=" onlineRate<90 ?'redClor':'greenClor'">{{ onlineRate.toFixed(2) }}%</span></p> + <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" @@ -207,16 +218,18 @@ data () { return { formInline: { - organizationId: '', + macs: [], hourState: '', state: '', - startTime: dayjs().startOf('day').format('YYYY-MM-DD HH:mm'), - endTime: dayjs().subtract(1, 'hour').format('YYYY-MM-DD HH:mm') + startTime: '', + endTime: '' }, time: '������', - selectTime: '', + selectTime: [], macDate: {}, + macOnlineData: {}, orgData: [], + props: { multiple: true, label: 'name', value: 'id', children: 'monitorPoint' }, tableData: [], handleShow: false, loading: false, @@ -266,48 +279,81 @@ time (newValue, oldValue) { let now = dayjs() // ������������������ if (newValue === '���1���') { - this.selectTime = [] + 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.selectTime = [] + 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.selectTime = [] + 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.selectTime = [] + 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.selectTime = [] + 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') } } }, - created () { + mounted () { this.getOrganizationId() + 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 () { + }, methods: { + changeCascader (val) { + let nodesInfo = this.$refs['cascader'].getCheckedNodes() + let macList = nodesInfo.map(({ data: { mac } }) => mac) + this.formInline.macs = macList.filter(item => item !== undefined) + console.log(macList) + }, changeDay () { - console.log(this.selectTime) - this.formInline.startTime = this.selectTime[0] - this.formInline.endTime = this.selectTime[1] + 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) { - console.log(row) this.handleShow = true this.macDate = _.cloneDeep(row) - this.macDate.startTime = this.formInline.startTime - this.macDate.endTime = this.formInline.endTime + this.macDate.startTime = this.selectTime[0] + this.macDate.endTime = this.selectTime[1] + console.log(this.macDate) }, handleSearch () { - if (this.formInline.organizationId !== '') { + console.log(' this.formInline', this.formInline) + if (this.formInline.macs.length > 0) { 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.getOnlineData() this.$request({ url: '/onlineRate/page', method: 'post', @@ -326,9 +372,24 @@ this.$message.warning('���������������������������') } }, + getOnlineData () { + this.$request({ + url: '/onlineRate/state', + method: 'post', + data: { + macs: this.formInline.macs + } + }) + .then(res => { + this.macOnlineData = res.data + }) + .catch(err => { + console.log(err) + }) + }, getOrganizationId () { this.$request({ - url: '/organization/getOrganizationId', + url: '/organization/queryDevices', method: 'get' }) .then(res => { -- Gitblit v1.8.0