From 500ddf6571e656f33ef7fe10c570f6345344c989 Mon Sep 17 00:00:00 2001
From: quanyawei <401863037@qq.com>
Date: Thu, 01 Feb 2024 15:47:38 +0800
Subject: [PATCH] fix:断线监控
---
src/views/onlineRate/detailBox.vue | 118 ++++++++++++++++++++++++++++++---------
src/views/onlineRate/index.vue | 31 +++++++---
2 files changed, 111 insertions(+), 38 deletions(-)
diff --git a/src/views/onlineRate/detailBox.vue b/src/views/onlineRate/detailBox.vue
index 608c90c..98394a2 100644
--- a/src/views/onlineRate/detailBox.vue
+++ b/src/views/onlineRate/detailBox.vue
@@ -35,6 +35,7 @@
value-format="yyyy-MM-dd HH:mm"
:default-date="[macDate.startTime, macDate.endTime]"
:picker-options="pickerOptions"
+ align="right"
@change="changeDay"
/>
</el-form-item>
@@ -43,7 +44,7 @@
<div>
<div class="tit">
<p style="font-size:16px">
- {{ macOnlineDetailData.code }}%
+ ���<span class="greenClor">{{ sum }}</span>{{ time }}��������� <span class="greenClor">{{ macOnlineDetailData.pieChart2 }}</span>{{ time }}������������<span :class=" onlineRate<90 ?'redClor':'greenClor'">{{ onlineRate.toFixed(2) }}%</span>
</p>
<div id="myPieChart" />
</div>
@@ -98,7 +99,11 @@
label="������������"
align="center"
label-class-name="itemSpan"
- />
+ >
+ <template slot-scope="scope">
+ <span>{{ scope.row.mun }}</span>{{ time }}
+ </template>
+ </el-table-column>
</el-table>
</div>
</div>
@@ -117,6 +122,7 @@
data () {
return {
title: '������',
+ sum: '',
formInline: {},
macOnlineDetailData: {},
time: '������',
@@ -132,6 +138,35 @@
// ������
pickerOptions: {
+ shortcuts: [{
+ text: '���1���',
+ onClick (picker) {
+ const end = dayjs().subtract(1, 'hour')
+ const start = dayjs().subtract(1, 'day')
+ picker.$emit('pick', [new Date(start), new Date(end)])
+ }
+ }, {
+ text: '���3���',
+ onClick (picker) {
+ const end = dayjs().subtract(1, 'hour')
+ const start = dayjs().subtract(3, 'day')
+ picker.$emit('pick', [new Date(start), new Date(end)])
+ }
+ }, {
+ text: '���5���',
+ onClick (picker) {
+ const end = dayjs().subtract(1, 'hour')
+ const start = dayjs().subtract(5, 'day')
+ picker.$emit('pick', [new Date(start), new Date(end)])
+ }
+ }, {
+ text: '���7���',
+ onClick (picker) {
+ const end = dayjs().subtract(1, 'hour')
+ const start = dayjs().subtract(7, 'day')
+ picker.$emit('pick', [new Date(start), new Date(end)])
+ }
+ }],
onPick: ({ maxDate, minDate }) => {
// ���������������������������������������������������
this.choiceDate = minDate.getTime()
@@ -161,13 +196,22 @@
}
}
},
+ computed: {
+ onlineRate () {
+ console.log('///', ((this.macOnlineDetailData.pieChart2) / this.sum))
+ return (this.macOnlineDetailData.pieChart2 / this.sum) * 100 || 0
+ }
+ },
watch: {
time (newValue, oldValue) {
if (newValue === '���') {
this.type = 'day'
+ this.lineType = 'day'
} else if (newValue === '������') {
this.type = 'hour'
+ this.lineType = 'hour'
} else if (newValue === '������') {
+ this.lineType = 'hour'
this.type = 'minute'
}
}
@@ -200,23 +244,34 @@
}
},
initPieChart (pieChartData) {
+ let that = this
+ let percent = null
let labelData = {
- show: false,
- }
- if (pieChartData[0] > 0) {
- labelData = {
- show: true,
- position: 'left',
- normal: {
- formatter: function (params) {
- console.log('params22', params)
- let onlineType = params.dataIndex === 0 ? '������' : '������'
- return `${onlineType}: ${params.value}`
- },
- fontSize: 14, // ������������������
- fontStyle: 'italic', // ������������������
+ show: true,
+ position: 'right',
+ alignTo: 'edge',
+ margin: 0,
+ normal: {
+ formatter: function (params) {
+ percent = params.percent
+ let onlineType = params.dataIndex === 0 ? '������' : '������'
+ return `${onlineType}{a|${params.value}}${that.time}:{b|${params.percent}%}`
},
- }
+ fontSize: 14, // ������������������
+ fontStyle: 'italic', // ������������������
+ rich: { // ���rich������������������������������������
+ a: {
+ fontSize: 14,
+ fontStyle: 'italic',
+ color: '#67c23a'
+ },
+ b: {
+ fontSize: 14,
+ fontStyle: 'italic',
+ color: percent !== 0 ? '#67c23a' : 'red'
+ },
+ }
+ },
}
let dom = document.getElementById('myPieChart')
let myChart = echarts.init(dom)
@@ -237,19 +292,21 @@
series: [
{
radius: 30,
- center: ['30%', '50%'],
+ center: ['50%', '50%'],
type: 'pie',
data: pieChartData,
label: labelData,
+ labelLayout: {
+ hideOverlap: false
+ }
},
],
}, true)
},
initChart (myChart, option, dom) {
myChart.setOption(option)
- if (this.lineType === 'hour') {
- myChart.on('click', (params) => {
- console.log(params)
+ myChart.on('click', (params) => {
+ if (this.lineType === 'hour') {
this.lineType = 'minute'
echarts.dispose(dom)
var myChart = echarts.init(dom)
@@ -258,8 +315,9 @@
let endTiem = dayjs(starTiem).add(1, 'hour')
this.getLineData(dayjs(starTiem).format('YYYY-MM-DD HH:mm:ss'), dayjs(endTiem).format('YYYY-MM-DD HH:mm:ss'), 'minute')
myChart.setOption(option, true)
- })
- }
+ }
+ console.log('this.lineType', this.lineType)
+ })
},
renderBack () {
this.lineType = 'hour'
@@ -278,13 +336,10 @@
},
getOption (xData, sData) {
let option = null
- let minTime = xData[0]
- let maxTime = xData[xData.length]
let interval = 3600 * 1000
if (this.type === 'minute') {
interval = 60 * 1000
}
- console.log(minTime, maxTime)
option = {
grid: {
left: '40px', // ���������������
@@ -308,7 +363,7 @@
formatter: function (params) {
console.log(params)
var value = params.data[0]
- let tip = params.value === 1 ? '������: ' + value : '������: ' + value
+ let tip = params.value[1] === 1 ? '������: ' + value : '������: ' + value
return tip
},
},
@@ -401,6 +456,7 @@
})
.then(res => {
this.macOnlineDetailData = res.data
+ this.sum = res.data.sum
this.tableData = res.data.tabulation
let pieChartData = [this.macOnlineDetailData.pieChart1, this.macOnlineDetailData.pieChart2]
this.initPieChart(pieChartData)
@@ -436,7 +492,7 @@
}
#myPieChart {
height: 120px;
- width: 400px!important;
+ width: 600px!important;
canvas {
width: 100%!important;
}
@@ -459,4 +515,10 @@
top: -40px;
}
}
+.redClor{
+ color: red;
+}
+.greenClor{
+ color:#67c23a;
+}
</style>
diff --git a/src/views/onlineRate/index.vue b/src/views/onlineRate/index.vue
index 4b07158..3c664be 100644
--- a/src/views/onlineRate/index.vue
+++ b/src/views/onlineRate/index.vue
@@ -19,9 +19,9 @@
/>
</el-select>
</el-form-item>
- <el-form-item label="������:">
+ <el-form-item label="������������:">
<el-select
- v-model="formInline.state"
+ v-model="formInline.hourState"
clearable
placeholder="������������"
>
@@ -69,7 +69,7 @@
</el-form>
</div>
<div>
- <p>���������������{{ tableData.length }}������������ {{ onlineData }}��������������� <span :class=" onlineRate<90 ?'redClor':'greenClor'">{{ onlineRate }}%</span></p>
+ <p>���������������������<span class="greenClor">{{ tableData.length }}</span>������������<span class="greenClor">{{ onlineData }}</span>��������������� <span :class=" onlineRate<90 ?'redClor':'greenClor'">{{ onlineRate }}%</span></p>
<div>
<el-table
v-loading="loading"
@@ -131,7 +131,11 @@
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"
@@ -140,15 +144,15 @@
align="center"
/>
<el-table-column
- prop="state"
+ prop="hourState"
label-class-name="itemSpan"
- label="������"
- width="80px"
+ label="������������"
+ width="90px"
align="center"
>
<template slot-scope="scope">
<el-button
- v-if="scope.row.state === '0'"
+ v-if="scope.row.hourState === '0'"
style="color:red;font-size:15px"
type="text"
>
@@ -195,6 +199,7 @@
<script>
import dayjs from 'dayjs'
import detailBox from '@/views/onlineRate/detailBox'
+import _ from 'lodash'
export default {
components: {
detailBox
@@ -203,6 +208,8 @@
return {
formInline: {
organizationId: '',
+ hourState: '',
+ state: '',
startTime: dayjs().startOf('day').format('YYYY-MM-DD HH:mm'),
endTime: dayjs().subtract(1, 'hour').format('YYYY-MM-DD HH:mm')
},
@@ -290,12 +297,16 @@
handleDetail (row) {
console.log(row)
this.handleShow = true
- this.macDate = row
+ this.macDate = _.cloneDeep(row)
this.macDate.startTime = this.formInline.startTime
this.macDate.endTime = this.formInline.endTime
},
handleSearch () {
if (this.formInline.organizationId !== '') {
+ if (this.time === '������') {
+ 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',
@@ -305,7 +316,7 @@
}
})
.then(res => {
- this.tableData = res.data
+ this.tableData = res.data || []
this.loading = false
})
.catch(err => {
--
Gitblit v1.8.0