谐波监测点目录搭建
This commit is contained in:
仲么了
@@ -1,352 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div style='display: flex;flex-direction: column;height: 100%' v-loading='loading'>
|
|
||||||
<el-form :inline='true'>
|
|
||||||
<el-form-item label='日期'>
|
|
||||||
<DatePicker ref='datePickerRef'></DatePicker>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item>
|
|
||||||
<el-button type='primary' @click='init'>查询</el-button>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
<el-descriptions
|
|
||||||
class='mt2'
|
|
||||||
direction='vertical'
|
|
||||||
:column='4'
|
|
||||||
border
|
|
||||||
>
|
|
||||||
<el-descriptions-item align='center' label='名称'>{{ data.name }}</el-descriptions-item>
|
|
||||||
<el-descriptions-item align='center' label='事件总数'>{{ data.gs }}</el-descriptions-item>
|
|
||||||
<el-descriptions-item align='center' label='可容忍'>{{ data.krr }}</el-descriptions-item>
|
|
||||||
<el-descriptions-item align='center' label='不可容忍'> {{ data.bkrr }}</el-descriptions-item>
|
|
||||||
</el-descriptions>
|
|
||||||
<div style='flex: 1;' class='mt10'>
|
|
||||||
<my-echart :options='options' />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup lang='ts'>
|
|
||||||
import { nextTick, onMounted, reactive, ref } from 'vue'
|
|
||||||
import DatePicker from '@/components/form/datePicker/index.vue'
|
|
||||||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
|
||||||
import { useMonitoringPoint } from '@/stores/monitoringPoint'
|
|
||||||
import { getPlot } from '@/api/event-boot/monitor'
|
|
||||||
|
|
||||||
const datePickerRef = ref()
|
|
||||||
const loading = ref(true)
|
|
||||||
const monitoringPoint = useMonitoringPoint()
|
|
||||||
const formData = reactive({
|
|
||||||
lineIndex: monitoringPoint.state.lineId,
|
|
||||||
startTime: '',
|
|
||||||
endTime: ''
|
|
||||||
})
|
|
||||||
const data = reactive({
|
|
||||||
name: '事件个数',
|
|
||||||
gs: 0,
|
|
||||||
krr: 0,
|
|
||||||
bkrr: 0
|
|
||||||
})
|
|
||||||
const options = ref({})
|
|
||||||
|
|
||||||
const init = () => {
|
|
||||||
loading.value = true
|
|
||||||
formData.lineIndex = monitoringPoint.state.lineId
|
|
||||||
formData.startTime = datePickerRef.value.timeValue[0]
|
|
||||||
formData.endTime = datePickerRef.value.timeValue[1]
|
|
||||||
getPlot(formData).then(
|
|
||||||
(res: any) => {
|
|
||||||
const gongData = gongfunction(res.data.voltageToleranceCurveDataList)
|
|
||||||
data.gs = res.data.voltageToleranceCurveDataList.length
|
|
||||||
data.krr = gongData.pointI.length
|
|
||||||
data.bkrr = gongData.pointIun.length
|
|
||||||
console.log(gongData)
|
|
||||||
options.value = {
|
|
||||||
// backgroundColor: "#f9f9f9", //地图背景色深蓝
|
|
||||||
title: {
|
|
||||||
// text: `ITIC曲线(总统计:${gongData.pointI.length + gongData.pointIun.length}个,可容忍:${gongData.pointI.length}个,不可容忍:${gongData.pointIun.length}个)`
|
|
||||||
text: `ITIC曲线`
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
data: ['上限', '下限', '可容忍事件', '不可容忍事件'],
|
|
||||||
x: 'left'
|
|
||||||
},
|
|
||||||
tooltip: {
|
|
||||||
trigger: 'item',
|
|
||||||
show: true,
|
|
||||||
axisPointer: {
|
|
||||||
type: 'shadow',
|
|
||||||
label: {
|
|
||||||
color: '#fff',
|
|
||||||
fontSize: 16
|
|
||||||
}
|
|
||||||
},
|
|
||||||
textStyle: {
|
|
||||||
color: '#fff',
|
|
||||||
fontStyle: 'normal',
|
|
||||||
opacity: 0.35,
|
|
||||||
fontSize: 14
|
|
||||||
},
|
|
||||||
backgroundColor: 'rgba(0,0,0,0.35)',
|
|
||||||
borderWidth: 0,
|
|
||||||
formatter: function(a: any) {
|
|
||||||
var relVal = ''
|
|
||||||
relVal =
|
|
||||||
'<font style=\'color:' +
|
|
||||||
'\'>发生时间:' +
|
|
||||||
a.value[2] +
|
|
||||||
'</font><br/>'
|
|
||||||
relVal +=
|
|
||||||
'<font style=\'color:' +
|
|
||||||
'\'>持续时间:' +
|
|
||||||
a.value[0] +
|
|
||||||
's</font><br/>'
|
|
||||||
relVal +=
|
|
||||||
'<font style=\'color:' +
|
|
||||||
'\'>特征幅值:' +
|
|
||||||
a.value[1].toFixed(2) +
|
|
||||||
'%</font>'
|
|
||||||
return relVal
|
|
||||||
}
|
|
||||||
},
|
|
||||||
xAxis: [
|
|
||||||
{
|
|
||||||
type: 'log',
|
|
||||||
min: 0.001,
|
|
||||||
max: 1000,
|
|
||||||
splitLine: {
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
name: 's'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
yAxis: [
|
|
||||||
{
|
|
||||||
type: 'value',
|
|
||||||
splitNumber: 10,
|
|
||||||
minInterval: 3,
|
|
||||||
name: '%'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
options: {
|
|
||||||
dataZoom: null,
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: '上限',
|
|
||||||
type: 'line',
|
|
||||||
data: [
|
|
||||||
[0.001, 200],
|
|
||||||
[0.003, 140],
|
|
||||||
[0.003, 120],
|
|
||||||
[0.5, 120],
|
|
||||||
[0.5, 110],
|
|
||||||
[10, 110],
|
|
||||||
[1000, 110]
|
|
||||||
],
|
|
||||||
showSymbol: false,
|
|
||||||
tooltips: {
|
|
||||||
show: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '下限',
|
|
||||||
type: 'line',
|
|
||||||
data: [
|
|
||||||
[0.02, 0],
|
|
||||||
[0.02, 70],
|
|
||||||
[0.5, 70],
|
|
||||||
[0.5, 80],
|
|
||||||
[10, 80],
|
|
||||||
[10, 90],
|
|
||||||
[1000, 90]
|
|
||||||
],
|
|
||||||
showSymbol: false,
|
|
||||||
tooltips: {
|
|
||||||
show: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '可容忍事件',
|
|
||||||
type: 'scatter',
|
|
||||||
symbol: 'circle',
|
|
||||||
data: gongData.pointI
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '不可容忍事件',
|
|
||||||
type: 'scatter',
|
|
||||||
symbol: 'circle',
|
|
||||||
data: gongData.pointIun
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
nextTick(() => {
|
|
||||||
loading.value = false
|
|
||||||
})
|
|
||||||
}
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function gongfunction(arr: any) {
|
|
||||||
let standI = 0
|
|
||||||
let unstandI = 0
|
|
||||||
let standF = 0
|
|
||||||
let unstandF = 0
|
|
||||||
let total = 0
|
|
||||||
let pointIun = []
|
|
||||||
let pointI = []
|
|
||||||
let pointF = []
|
|
||||||
let pointFun = []
|
|
||||||
total = arr.length
|
|
||||||
if (total == 0) {
|
|
||||||
} else {
|
|
||||||
for (let i = 0; i < arr.length; i++) {
|
|
||||||
let point = []
|
|
||||||
let xx = arr[i].persistTime
|
|
||||||
let yy = arr[i].eventValue
|
|
||||||
let time = arr[i].time
|
|
||||||
let eventId = arr[i].eventId
|
|
||||||
// let index =arr[i].eventDetailIndex;
|
|
||||||
point = [xx, yy, time, eventId]
|
|
||||||
|
|
||||||
if (xx <= 0.003) {
|
|
||||||
let line = 0
|
|
||||||
line = 250 - 30000 * xx
|
|
||||||
if (yy > line) {
|
|
||||||
unstandI++
|
|
||||||
pointIun.push({
|
|
||||||
value: point,
|
|
||||||
itemStyle: { normal: { color: 'red' } }
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
standI++
|
|
||||||
pointI.push({
|
|
||||||
value: point,
|
|
||||||
itemStyle: { normal: { color: 'green' } }
|
|
||||||
})
|
|
||||||
}
|
|
||||||
} else if (xx <= 0.02) {
|
|
||||||
if (yy > 120) {
|
|
||||||
unstandI++
|
|
||||||
pointIun.push({
|
|
||||||
value: point,
|
|
||||||
itemStyle: { normal: { color: 'red' } }
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
standI++
|
|
||||||
pointI.push({
|
|
||||||
value: point,
|
|
||||||
itemStyle: { normal: { color: 'green' } }
|
|
||||||
})
|
|
||||||
}
|
|
||||||
} else if (xx <= 0.5) {
|
|
||||||
if (yy > 120 || yy < 70) {
|
|
||||||
unstandI++
|
|
||||||
pointIun.push({
|
|
||||||
value: point,
|
|
||||||
itemStyle: { normal: { color: 'red' } }
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
standI++
|
|
||||||
pointI.push({
|
|
||||||
value: point,
|
|
||||||
itemStyle: { normal: { color: 'green' } }
|
|
||||||
})
|
|
||||||
}
|
|
||||||
} else if (xx <= 10) {
|
|
||||||
if (yy > 110 || yy < 80) {
|
|
||||||
unstandI++
|
|
||||||
pointIun.push({
|
|
||||||
value: point,
|
|
||||||
itemStyle: { normal: { color: 'red' } }
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
standI++
|
|
||||||
pointI.push({
|
|
||||||
value: point,
|
|
||||||
itemStyle: { normal: { color: 'green' } }
|
|
||||||
})
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
if (yy > 110 || yy < 90) {
|
|
||||||
unstandI++
|
|
||||||
pointIun.push({
|
|
||||||
value: point,
|
|
||||||
itemStyle: { normal: { color: 'red' } }
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
standI++
|
|
||||||
pointI.push({
|
|
||||||
value: point,
|
|
||||||
itemStyle: { normal: { color: 'green' } }
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (xx < 0.05) {
|
|
||||||
standF++
|
|
||||||
pointF.push({
|
|
||||||
value: point,
|
|
||||||
itemStyle: { normal: { color: 'green' } }
|
|
||||||
})
|
|
||||||
} else if (xx < 0.2) {
|
|
||||||
if (yy > 50) {
|
|
||||||
standF++
|
|
||||||
pointF.push({
|
|
||||||
value: point,
|
|
||||||
itemStyle: { normal: { color: 'green' } }
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
unstandF++
|
|
||||||
pointFun.push({
|
|
||||||
value: point,
|
|
||||||
itemStyle: { normal: { color: 'red' } }
|
|
||||||
})
|
|
||||||
}
|
|
||||||
} else if (xx < 0.5) {
|
|
||||||
if (yy > 70) {
|
|
||||||
standF++
|
|
||||||
pointF.push({
|
|
||||||
value: point,
|
|
||||||
itemStyle: { normal: { color: 'green' } }
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
unstandF++
|
|
||||||
pointFun.push({
|
|
||||||
value: point,
|
|
||||||
itemStyle: { normal: { color: 'red' } }
|
|
||||||
})
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
if (yy > 80) {
|
|
||||||
standF++
|
|
||||||
pointF.push({
|
|
||||||
value: point,
|
|
||||||
itemStyle: { normal: { color: 'green' } }
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
unstandF++
|
|
||||||
pointFun.push({
|
|
||||||
value: point,
|
|
||||||
itemStyle: { normal: { color: 'red' } }
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return {
|
|
||||||
standI,
|
|
||||||
unstandI,
|
|
||||||
pointI,
|
|
||||||
pointIun,
|
|
||||||
standF,
|
|
||||||
unstandF,
|
|
||||||
pointF,
|
|
||||||
pointFun
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
init()
|
|
||||||
})
|
|
||||||
|
|
||||||
</script>
|
|
||||||
<style></style>
|
|
||||||
@@ -1,338 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div style='display: flex;flex-direction: column;height: 100%'>
|
|
||||||
<el-form :inline='true'>
|
|
||||||
<el-form-item label='日期'>
|
|
||||||
<DatePicker ref='datePickerRef'></DatePicker>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item>
|
|
||||||
<el-button type='primary' @click='init'>查询</el-button>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
<el-descriptions
|
|
||||||
class='mt2'
|
|
||||||
direction='vertical'
|
|
||||||
:column='4'
|
|
||||||
border
|
|
||||||
>
|
|
||||||
<el-descriptions-item align='center' label='名称'>{{ data.name }}</el-descriptions-item>
|
|
||||||
<el-descriptions-item align='center' label='事件总数'>{{ data.gs }}</el-descriptions-item>
|
|
||||||
<el-descriptions-item align='center' label='可容忍'>{{ data.krr }}</el-descriptions-item>
|
|
||||||
<el-descriptions-item align='center' label='不可容忍'> {{ data.bkrr }}</el-descriptions-item>
|
|
||||||
</el-descriptions>
|
|
||||||
<div style='flex: 1;' class='mt10'>
|
|
||||||
<my-echart :options='options' />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup lang='ts'>
|
|
||||||
import { nextTick, onMounted, reactive, ref } from 'vue'
|
|
||||||
import DatePicker from '@/components/form/datePicker/index.vue'
|
|
||||||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
|
||||||
import { useMonitoringPoint } from '@/stores/monitoringPoint'
|
|
||||||
import { getPlot } from '@/api/event-boot/monitor'
|
|
||||||
|
|
||||||
const datePickerRef = ref()
|
|
||||||
const monitoringPoint = useMonitoringPoint()
|
|
||||||
const loading = ref(true)
|
|
||||||
const formData = reactive({
|
|
||||||
lineIndex: monitoringPoint.state.lineId,
|
|
||||||
startTime: '',
|
|
||||||
endTime: ''
|
|
||||||
})
|
|
||||||
const data = reactive({
|
|
||||||
name: '事件个数',
|
|
||||||
gs: 0,
|
|
||||||
krr: 0,
|
|
||||||
bkrr: 0
|
|
||||||
})
|
|
||||||
const options = ref({})
|
|
||||||
|
|
||||||
const init = () => {
|
|
||||||
loading.value = true
|
|
||||||
formData.lineIndex = monitoringPoint.state.lineId
|
|
||||||
formData.startTime = datePickerRef.value.timeValue[0]
|
|
||||||
formData.endTime = datePickerRef.value.timeValue[1]
|
|
||||||
getPlot(formData).then(
|
|
||||||
(res: any) => {
|
|
||||||
const gongData = gongfunction(res.data.voltageToleranceCurveDataList)
|
|
||||||
data.gs = res.data.voltageToleranceCurveDataList.length
|
|
||||||
data.krr = gongData.pointI.length
|
|
||||||
data.bkrr = gongData.pointIun.length
|
|
||||||
console.log(gongData)
|
|
||||||
options.value = {
|
|
||||||
// backgroundColor: "#f9f9f9", //地图背景色深蓝
|
|
||||||
title: {
|
|
||||||
text: `SEMI F47曲线`
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
data: ['上限', '下限', '可容忍事件', '不可容忍事件'],
|
|
||||||
x: 'left'
|
|
||||||
},
|
|
||||||
tooltip: {
|
|
||||||
trigger: 'item',
|
|
||||||
show: true,
|
|
||||||
axisPointer: {
|
|
||||||
type: 'shadow',
|
|
||||||
label: {
|
|
||||||
color: '#fff',
|
|
||||||
fontSize: 16
|
|
||||||
}
|
|
||||||
},
|
|
||||||
textStyle: {
|
|
||||||
color: '#fff',
|
|
||||||
fontStyle: 'normal',
|
|
||||||
opacity: 0.35,
|
|
||||||
fontSize: 14
|
|
||||||
},
|
|
||||||
backgroundColor: 'rgba(0,0,0,0.35)',
|
|
||||||
borderWidth: 0,
|
|
||||||
formatter: function(a: any) {
|
|
||||||
var relVal = ''
|
|
||||||
relVal =
|
|
||||||
'<font style=\'color:' +
|
|
||||||
'\'>发生时间:' +
|
|
||||||
a.value[2] +
|
|
||||||
'</font><br/>'
|
|
||||||
relVal +=
|
|
||||||
'<font style=\'color:' +
|
|
||||||
'\'>持续时间:' +
|
|
||||||
a.value[0] +
|
|
||||||
's</font><br/>'
|
|
||||||
relVal +=
|
|
||||||
'<font style=\'color:' +
|
|
||||||
'\'>特征幅值:' +
|
|
||||||
a.value[1].toFixed(2) +
|
|
||||||
'%</font>'
|
|
||||||
return relVal
|
|
||||||
}
|
|
||||||
},
|
|
||||||
xAxis: [
|
|
||||||
{
|
|
||||||
type: 'log',
|
|
||||||
min: 0.001,
|
|
||||||
max: 1000,
|
|
||||||
splitLine: {
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
name: 's'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
yAxis: [
|
|
||||||
{
|
|
||||||
type: 'value',
|
|
||||||
max: function(value: any) {
|
|
||||||
return value.max + 20
|
|
||||||
},
|
|
||||||
splitNumber: 10,
|
|
||||||
minInterval: 0.1,
|
|
||||||
name: '%'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
options: {
|
|
||||||
dataZoom: null,
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: '边界线',
|
|
||||||
type: 'line',
|
|
||||||
data: [
|
|
||||||
[0.05, 0],
|
|
||||||
[0.05, 50],
|
|
||||||
[0.2, 50],
|
|
||||||
[0.2, 70],
|
|
||||||
[0.5, 70],
|
|
||||||
[0.5, 80],
|
|
||||||
[10, 80],
|
|
||||||
[1000, 80]
|
|
||||||
],
|
|
||||||
showSymbol: false,
|
|
||||||
tooltips: {
|
|
||||||
show: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '可容忍事件',
|
|
||||||
type: 'scatter',
|
|
||||||
symbol: 'circle',
|
|
||||||
data: gongData.pointI
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '不可容忍事件',
|
|
||||||
type: 'scatter',
|
|
||||||
symbol: 'circle',
|
|
||||||
data: gongData.pointIun
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
nextTick(() => {
|
|
||||||
loading.value = false
|
|
||||||
})
|
|
||||||
}
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function gongfunction(arr: any) {
|
|
||||||
let standI = 0
|
|
||||||
let unstandI = 0
|
|
||||||
let standF = 0
|
|
||||||
let unstandF = 0
|
|
||||||
let total = 0
|
|
||||||
let pointIun = []
|
|
||||||
let pointI = []
|
|
||||||
let pointF = []
|
|
||||||
let pointFun = []
|
|
||||||
total = arr.length
|
|
||||||
if (total == 0) {
|
|
||||||
} else {
|
|
||||||
for (let i = 0; i < arr.length; i++) {
|
|
||||||
let point = []
|
|
||||||
let xx = arr[i].persistTime
|
|
||||||
let yy = arr[i].eventValue
|
|
||||||
let time = arr[i].time
|
|
||||||
let eventId = arr[i].eventId
|
|
||||||
// let index =arr[i].eventDetailIndex;
|
|
||||||
point = [xx, yy, time, eventId]
|
|
||||||
|
|
||||||
if (xx <= 0.003) {
|
|
||||||
let line = 0
|
|
||||||
line = 250 - 30000 * xx
|
|
||||||
if (yy > line) {
|
|
||||||
unstandI++
|
|
||||||
pointIun.push({
|
|
||||||
value: point,
|
|
||||||
itemStyle: { normal: { color: 'red' } }
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
standI++
|
|
||||||
pointI.push({
|
|
||||||
value: point,
|
|
||||||
itemStyle: { normal: { color: 'green' } }
|
|
||||||
})
|
|
||||||
}
|
|
||||||
} else if (xx <= 0.02) {
|
|
||||||
if (yy > 120) {
|
|
||||||
unstandI++
|
|
||||||
pointIun.push({
|
|
||||||
value: point,
|
|
||||||
itemStyle: { normal: { color: 'red' } }
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
standI++
|
|
||||||
pointI.push({
|
|
||||||
value: point,
|
|
||||||
itemStyle: { normal: { color: 'green' } }
|
|
||||||
})
|
|
||||||
}
|
|
||||||
} else if (xx <= 0.5) {
|
|
||||||
if (yy > 120 || yy < 70) {
|
|
||||||
unstandI++
|
|
||||||
pointIun.push({
|
|
||||||
value: point,
|
|
||||||
itemStyle: { normal: { color: 'red' } }
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
standI++
|
|
||||||
pointI.push({
|
|
||||||
value: point,
|
|
||||||
itemStyle: { normal: { color: 'green' } }
|
|
||||||
})
|
|
||||||
}
|
|
||||||
} else if (xx <= 10) {
|
|
||||||
if (yy > 110 || yy < 80) {
|
|
||||||
unstandI++
|
|
||||||
pointIun.push({
|
|
||||||
value: point,
|
|
||||||
itemStyle: { normal: { color: 'red' } }
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
standI++
|
|
||||||
pointI.push({
|
|
||||||
value: point,
|
|
||||||
itemStyle: { normal: { color: 'green' } }
|
|
||||||
})
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
if (yy > 110 || yy < 90) {
|
|
||||||
unstandI++
|
|
||||||
pointIun.push({
|
|
||||||
value: point,
|
|
||||||
itemStyle: { normal: { color: 'red' } }
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
standI++
|
|
||||||
pointI.push({
|
|
||||||
value: point,
|
|
||||||
itemStyle: { normal: { color: 'green' } }
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (xx < 0.05) {
|
|
||||||
standF++
|
|
||||||
pointF.push({
|
|
||||||
value: point,
|
|
||||||
itemStyle: { normal: { color: 'green' } }
|
|
||||||
})
|
|
||||||
} else if (xx < 0.2) {
|
|
||||||
if (yy > 50) {
|
|
||||||
standF++
|
|
||||||
pointF.push({
|
|
||||||
value: point,
|
|
||||||
itemStyle: { normal: { color: 'green' } }
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
unstandF++
|
|
||||||
pointFun.push({
|
|
||||||
value: point,
|
|
||||||
itemStyle: { normal: { color: 'red' } }
|
|
||||||
})
|
|
||||||
}
|
|
||||||
} else if (xx < 0.5) {
|
|
||||||
if (yy > 70) {
|
|
||||||
standF++
|
|
||||||
pointF.push({
|
|
||||||
value: point,
|
|
||||||
itemStyle: { normal: { color: 'green' } }
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
unstandF++
|
|
||||||
pointFun.push({
|
|
||||||
value: point,
|
|
||||||
itemStyle: { normal: { color: 'red' } }
|
|
||||||
})
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
if (yy > 80) {
|
|
||||||
standF++
|
|
||||||
pointF.push({
|
|
||||||
value: point,
|
|
||||||
itemStyle: { normal: { color: 'green' } }
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
unstandF++
|
|
||||||
pointFun.push({
|
|
||||||
value: point,
|
|
||||||
itemStyle: { normal: { color: 'red' } }
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return {
|
|
||||||
standI,
|
|
||||||
unstandI,
|
|
||||||
pointI,
|
|
||||||
pointIun,
|
|
||||||
standF,
|
|
||||||
unstandF,
|
|
||||||
pointF,
|
|
||||||
pointFun
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
init()
|
|
||||||
})
|
|
||||||
|
|
||||||
</script>
|
|
||||||
<style></style>
|
|
||||||
@@ -1,299 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div v-loading='loading' class='dianyazanjiangbaojimidu'>
|
|
||||||
<el-form :inline='true'>
|
|
||||||
<el-form-item label='日期'>
|
|
||||||
<DatePicker ref='datePickerRef'></DatePicker>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item>
|
|
||||||
<el-button type='primary' @click='init'>查询</el-button>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
<div class='mt10 dianyazanjiang'>
|
|
||||||
<div class='first'>
|
|
||||||
<div class='mb10'>DISDIP表格(国际发配电联盟UNIPEDE)</div>
|
|
||||||
<div style='flex: 1;overflow: hidden'>
|
|
||||||
<vxe-table v-bind='defaultAttribute' height='100%' size='mini' :data='firstData'>
|
|
||||||
<vxe-colgroup title='剩余电压' field='name' width='80px'></vxe-colgroup>
|
|
||||||
<vxe-colgroup title='持续事件'>
|
|
||||||
<vxe-column field='twentyMs' title='20ms'></vxe-column>
|
|
||||||
<vxe-column field='oneHundredMs' title='100ms'></vxe-column>
|
|
||||||
<vxe-column field='fiveHundredMs' title='500ms'></vxe-column>
|
|
||||||
<vxe-column field='oneS' title='1s'></vxe-column>
|
|
||||||
<vxe-column field='threeS' title='2s'></vxe-column>
|
|
||||||
<vxe-column field='twentyS' title='20s'></vxe-column>
|
|
||||||
<vxe-column field='sixtyS' title='60s'></vxe-column>
|
|
||||||
<vxe-column field='oneEightyS' title='180s'></vxe-column>
|
|
||||||
</vxe-colgroup>
|
|
||||||
</vxe-table>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class='second'>
|
|
||||||
<div class='mb10'>EC61000-4-11(用电终端的电压暂降抗度)</div>
|
|
||||||
<div style='flex: 1;overflow: hidden'>
|
|
||||||
<vxe-table v-bind='defaultAttribute' height='100%' size='mini' :data='secondData'>
|
|
||||||
<vxe-colgroup title='剩余电压' field='name' width='80px'></vxe-colgroup>
|
|
||||||
<vxe-colgroup title='持续事件'>
|
|
||||||
<vxe-column field='tenTwentyMs' title='10-20ms'></vxe-column>
|
|
||||||
<vxe-column field='twentyOneHundredMs' title='20-100ms'></vxe-column>
|
|
||||||
<vxe-column field='zeroPiontOneTwoS' title='0.1-0.2s'></vxe-column>
|
|
||||||
<vxe-column field='zeroPiontFive1S' title='0.2-0.5s'></vxe-column>
|
|
||||||
<vxe-column field='zeroPiontTwoFiveS' title='0.5-1s'></vxe-column>
|
|
||||||
<vxe-column field='role' title='>1s'></vxe-column>
|
|
||||||
</vxe-colgroup>
|
|
||||||
</vxe-table>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class='third'>
|
|
||||||
<div class='mb10'>IEC61000-2-8(公共用电暂降测量统计)</div>
|
|
||||||
<div style='flex: 1;overflow: hidden'>
|
|
||||||
<vxe-table v-bind='defaultAttribute' height='100%' size='mini' :data='thirdData'>
|
|
||||||
<vxe-colgroup title='剩余电压' field='name' width='120px'></vxe-colgroup>
|
|
||||||
<vxe-colgroup title='持续事件'>
|
|
||||||
<vxe-column field='q' title='0.01-0.1s' align='center'></vxe-column>
|
|
||||||
<vxe-column field='w' title='0.1-0.25s' align='center'></vxe-column>
|
|
||||||
<vxe-column field='e' title='0.25-0.5s' align='center'></vxe-column>
|
|
||||||
<vxe-column field='r' title='0.5-1s' align='center'></vxe-column>
|
|
||||||
<vxe-column field='t' title='1-3s' align='center'></vxe-column>
|
|
||||||
<vxe-column field='y' title='3-20s' align='center'></vxe-column>
|
|
||||||
<vxe-column field='u' title='20-60s' align='center'></vxe-column>
|
|
||||||
<vxe-column field='i' title='60-180s' align='center'></vxe-column>
|
|
||||||
</vxe-colgroup>
|
|
||||||
</vxe-table>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class='charts' id='charts'>
|
|
||||||
<MyEchart :options='options' />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup lang='ts'>
|
|
||||||
import { nextTick, onMounted, reactive, ref } from 'vue'
|
|
||||||
import DatePicker from '@/components/form/datePicker/index.vue'
|
|
||||||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
|
||||||
import { useMonitoringPoint } from '@/stores/monitoringPoint'
|
|
||||||
import { eventDisdip, getCoords, IEC28, IEC411 } from '@/api/event-boot/monitor'
|
|
||||||
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
|
||||||
|
|
||||||
const datePickerRef = ref()
|
|
||||||
const loading = ref(true)
|
|
||||||
const monitoringPoint = useMonitoringPoint()
|
|
||||||
const formData = reactive({
|
|
||||||
lineIndex: monitoringPoint.state.lineId,
|
|
||||||
startTime: '',
|
|
||||||
endTime: ''
|
|
||||||
})
|
|
||||||
const options = ref({})
|
|
||||||
const firstData = ref([])
|
|
||||||
const secondData = ref([])
|
|
||||||
const thirdData = ref([])
|
|
||||||
const chartsData = ref([])
|
|
||||||
|
|
||||||
const init = () => {
|
|
||||||
formData.lineIndex = monitoringPoint.state.lineId
|
|
||||||
formData.startTime = datePickerRef.value.timeValue[0]
|
|
||||||
formData.endTime = datePickerRef.value.timeValue[1]
|
|
||||||
loading.value = true
|
|
||||||
Promise.all([eventDisdip(formData), IEC411(formData), IEC28(formData), getCoords(formData)]).then(res => {
|
|
||||||
firstData.value = res[0].data
|
|
||||||
secondData.value = res[1].data
|
|
||||||
thirdData.value = res[2].data
|
|
||||||
chartsData.value = res[3].data
|
|
||||||
options.value = {
|
|
||||||
options: {
|
|
||||||
xAxis: null,
|
|
||||||
yAxis: null,
|
|
||||||
dataZoom: null,
|
|
||||||
backgroundColor: '#fff',
|
|
||||||
tooltip: {
|
|
||||||
trigger: 'axis'
|
|
||||||
},
|
|
||||||
title: {
|
|
||||||
text: '暂降密度图',
|
|
||||||
x: 'center'
|
|
||||||
},
|
|
||||||
toolbox: {
|
|
||||||
show: true,
|
|
||||||
feature: {
|
|
||||||
// dataView: { show: true },
|
|
||||||
// dataZoom: { show: true },
|
|
||||||
//restore: { show: true },
|
|
||||||
// saveAsImage: { show: true },
|
|
||||||
myFull: {
|
|
||||||
show: true,
|
|
||||||
title: '全屏查看',
|
|
||||||
icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
|
|
||||||
onclick: () => {
|
|
||||||
let element = document.getElementById('charts') as HTMLElement
|
|
||||||
// 全屏，如果已经全屏，则退出全屏
|
|
||||||
if (document.fullscreenElement) {
|
|
||||||
if (document.exitFullscreen) {
|
|
||||||
document.exitFullscreen()
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
if (element.requestFullscreen) {
|
|
||||||
element.requestFullscreen()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
visualMap: {
|
|
||||||
max: 20,
|
|
||||||
show: false,
|
|
||||||
inRange: {
|
|
||||||
color: ['#313695', '#00BB00', '#ff8000', '#a50026']
|
|
||||||
}
|
|
||||||
},
|
|
||||||
xAxis3D: {
|
|
||||||
type: 'category',
|
|
||||||
name: '剩余电压(%)',
|
|
||||||
data: ['0-10', '10-20', '20-30', '30-40', '40-50', '50-60', '60-70', '70-80', '80-90', '90-100'],
|
|
||||||
axisLine: {
|
|
||||||
lineStyle: {
|
|
||||||
color: '#111'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
axisLabel: {
|
|
||||||
color: '#111'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
yAxis3D: {
|
|
||||||
type: 'category',
|
|
||||||
name: '持续时间(cyc)',
|
|
||||||
data: ['1cyc', '2cyc', '3cyc', '4cyc', '5cyc', '6~10cyc', '10~20cyc', '20~30cyc', '30~60cyc'],
|
|
||||||
nameTextStyle: {
|
|
||||||
color: '#111'
|
|
||||||
},
|
|
||||||
axisLine: {
|
|
||||||
show: true,
|
|
||||||
lineStyle: {
|
|
||||||
color: '#111'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
axisLabel: {
|
|
||||||
color: '#111'
|
|
||||||
},
|
|
||||||
splitLine: {
|
|
||||||
lineStyle: {
|
|
||||||
// 使用深浅的间隔色
|
|
||||||
color: ['#111'],
|
|
||||||
type: 'dashed',
|
|
||||||
opacity: 0.5
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
zAxis3D: {
|
|
||||||
type: 'value',
|
|
||||||
splitNumber: 10,
|
|
||||||
minInterval: 10,
|
|
||||||
name: '次数'
|
|
||||||
},
|
|
||||||
grid3D: {
|
|
||||||
viewControl: {
|
|
||||||
projection: 'perspective',
|
|
||||||
distance: 250
|
|
||||||
},
|
|
||||||
boxWidth: 200,
|
|
||||||
boxDepth: 80,
|
|
||||||
light: {
|
|
||||||
main: {
|
|
||||||
intensity: 1.2
|
|
||||||
},
|
|
||||||
ambient: {
|
|
||||||
intensity: 0.3
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
type: 'bar3D',
|
|
||||||
data: chartsData.value.map(function(item: any) {
|
|
||||||
return {
|
|
||||||
value: [item['x'], item['y'], item['z']]
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
shading: 'realistic',
|
|
||||||
label: {
|
|
||||||
show: false,
|
|
||||||
textStyle: {
|
|
||||||
fontSize: 16,
|
|
||||||
borderWidth: 1
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
itemStyle: {
|
|
||||||
opacity: 1
|
|
||||||
},
|
|
||||||
emphasis: {
|
|
||||||
label: {
|
|
||||||
textStyle: {
|
|
||||||
fontSize: 20,
|
|
||||||
color: '#900'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
itemStyle: {
|
|
||||||
color: '#900'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
loading.value = false
|
|
||||||
})
|
|
||||||
}
|
|
||||||
onMounted(() => {
|
|
||||||
init()
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
<style lang='scss'>
|
|
||||||
.dianyazanjiangbaojimidu {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
height: 100%;
|
|
||||||
overflow: scroll;
|
|
||||||
|
|
||||||
.dianyazanjiang {
|
|
||||||
flex: 1;
|
|
||||||
min-width: 1200px;
|
|
||||||
min-height: 800px;
|
|
||||||
display: grid;
|
|
||||||
grid-template-areas:
|
|
||||||
'first charts'
|
|
||||||
'second charts'
|
|
||||||
'third third '
|
|
||||||
'third third ';
|
|
||||||
grid-template-rows: 1fr 1fr 1fr 1fr;
|
|
||||||
grid-template-columns: 1fr 1fr;
|
|
||||||
grid-gap: 10px;
|
|
||||||
|
|
||||||
.first {
|
|
||||||
grid-area: first;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.second {
|
|
||||||
grid-area: second;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.third {
|
|
||||||
grid-area: third;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.charts {
|
|
||||||
grid-area: charts;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,51 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-tabs v-model='activeName' type='border-card' class='event-statistics' tab-position='left' :style='height'>
|
|
||||||
<el-tab-pane lazy label='ITIC曲线分析' name='1'>
|
|
||||||
<ITICquxianfenxi />
|
|
||||||
</el-tab-pane>
|
|
||||||
<el-tab-pane lazy label='SEMI F47 分析' name='2'>
|
|
||||||
<SEMIF47fenxi />
|
|
||||||
</el-tab-pane>
|
|
||||||
<el-tab-pane lazy label='电压暂降表及密度' name='3'>
|
|
||||||
<Dianyazanjiangbiaojimidu />
|
|
||||||
</el-tab-pane>
|
|
||||||
<el-tab-pane lazy label='暂降分布统计' name='4'>
|
|
||||||
<Zanjiangfenbutongji />
|
|
||||||
</el-tab-pane>
|
|
||||||
<el-tab-pane lazy label='暂降幅值概率分布' name='5'>
|
|
||||||
<Zanjiangfuzhigailvfenbu />
|
|
||||||
</el-tab-pane>
|
|
||||||
<el-tab-pane lazy label='持续时间概率分布' name='6'>
|
|
||||||
<Chixushijiangailvfenbu />
|
|
||||||
</el-tab-pane>
|
|
||||||
</el-tabs>
|
|
||||||
</template>
|
|
||||||
<script setup lang='ts'>
|
|
||||||
import { ref } from 'vue'
|
|
||||||
import { mainHeight } from '@/utils/layout'
|
|
||||||
import ITICquxianfenxi from './ITICquxianfenxi/index.vue'
|
|
||||||
import SEMIF47fenxi from './SEMIF47fenxi/index.vue'
|
|
||||||
import Dianyazanjiangbiaojimidu from './dianyazanjiangbiaojimidu/index.vue'
|
|
||||||
import Zanjiangfenbutongji from './zanjiangfenbutongji/index.vue'
|
|
||||||
import Zanjiangfuzhigailvfenbu from './zanjiangfuzhigailvfenbu/index.vue'
|
|
||||||
import Chixushijiangailvfenbu from './chixushijiangailvfenbu/index.vue'
|
|
||||||
|
|
||||||
const activeName = ref('1')
|
|
||||||
const height = mainHeight(84)
|
|
||||||
|
|
||||||
</script>
|
|
||||||
<style lang='scss'>
|
|
||||||
.event-statistics {
|
|
||||||
.el-tabs__header.is-left {
|
|
||||||
margin-right: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-tabs__content {
|
|
||||||
height: 100%;
|
|
||||||
|
|
||||||
.el-tab-pane {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,325 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div style='display: flex;flex-direction: column;height: 100%' v-loading='loading'>
|
|
||||||
<el-form :inline='true'>
|
|
||||||
<el-form-item label='日期'>
|
|
||||||
<DatePicker ref='datePickerRef'></DatePicker>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item>
|
|
||||||
<el-button type='primary' @click='init'>查询</el-button>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
<div style='flex: 1;' class='mt10 zanjiangfenbutongji'>
|
|
||||||
<my-echart :options='firstOptions' style='flex: 1;height: 100%' />
|
|
||||||
<div style='width: 712px;height: 100%;display: flex;flex-direction: column'>
|
|
||||||
<my-echart :options='secondOptions' style='flex: 1' />
|
|
||||||
<my-echart :options='thirdOptions' style='flex: 1' />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup lang='ts'>
|
|
||||||
import { nextTick, onMounted, reactive, ref } from 'vue'
|
|
||||||
import DatePicker from '@/components/form/datePicker/index.vue'
|
|
||||||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
|
||||||
import { useMonitoringPoint } from '@/stores/monitoringPoint'
|
|
||||||
import { getReasonTypeTime, getStatistic } from '@/api/event-boot/monitor'
|
|
||||||
import { color } from '@/components/echarts/color'
|
|
||||||
|
|
||||||
const datePickerRef = ref()
|
|
||||||
const loading = ref(true)
|
|
||||||
const monitoringPoint = useMonitoringPoint()
|
|
||||||
const formData = reactive({
|
|
||||||
lineIndex: monitoringPoint.state.lineId,
|
|
||||||
startTime: '',
|
|
||||||
endTime: '',
|
|
||||||
flag: 1
|
|
||||||
})
|
|
||||||
const firstOptions = ref<any>({})
|
|
||||||
const secondOptions = ref<any>({})
|
|
||||||
const thirdOptions = ref<any>({})
|
|
||||||
const firstData = ref<any>([])
|
|
||||||
const secondData = ref<any>([])
|
|
||||||
const thirdData = ref<any>([])
|
|
||||||
|
|
||||||
|
|
||||||
const init = () => {
|
|
||||||
|
|
||||||
loading.value = true
|
|
||||||
formData.lineIndex = monitoringPoint.state.lineId
|
|
||||||
formData.startTime = datePickerRef.value.timeValue[0]
|
|
||||||
formData.endTime = datePickerRef.value.timeValue[1]
|
|
||||||
formData.flag = datePickerRef.value.interval
|
|
||||||
Promise.all([getReasonTypeTime(formData), getStatistic(formData)]).then(res => {
|
|
||||||
firstData.value = res[0].data
|
|
||||||
secondData.value = res[1].data.reason
|
|
||||||
thirdData.value = res[1].data.types
|
|
||||||
initFirst()
|
|
||||||
initSecond()
|
|
||||||
initThird()
|
|
||||||
loading.value = false
|
|
||||||
})
|
|
||||||
}
|
|
||||||
const initFirst = () => {
|
|
||||||
let months = new Array()
|
|
||||||
let handle = new Array()
|
|
||||||
for (let i = 0; i < firstData.value.length; i++) {
|
|
||||||
if ((firstData.value[i].month == '01') || (i == 0)) {
|
|
||||||
if (formData.flag == 0) {
|
|
||||||
months[i] = firstData.value[i].month
|
|
||||||
} else {
|
|
||||||
months[i] = firstData.value[i].month + '-' + firstData.value[i].day
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
if (formData.flag == 0) {
|
|
||||||
months[i] = firstData.value[i].month
|
|
||||||
} else {
|
|
||||||
months[i] = firstData.value[i].month + '-' + firstData.value[i].day
|
|
||||||
}
|
|
||||||
}
|
|
||||||
handle[i] = firstData.value[i].times
|
|
||||||
}
|
|
||||||
|
|
||||||
firstOptions.value = {
|
|
||||||
backgroundColor: '#fff', //背景色,
|
|
||||||
title: {
|
|
||||||
text:
|
|
||||||
formData.flag == 3
|
|
||||||
? '月份统计'
|
|
||||||
: formData.flag == 2
|
|
||||||
? '季度统计'
|
|
||||||
: formData.flag == 1
|
|
||||||
? '年份统计'
|
|
||||||
: '',
|
|
||||||
x: 'center'
|
|
||||||
},
|
|
||||||
tooltip: {
|
|
||||||
trigger: 'axis',
|
|
||||||
axisPointer: {
|
|
||||||
type: 'shadow',
|
|
||||||
label: {
|
|
||||||
color: '#fff',
|
|
||||||
fontSize: 16
|
|
||||||
}
|
|
||||||
},
|
|
||||||
textStyle: {
|
|
||||||
color: '#fff',
|
|
||||||
fontStyle: 'normal',
|
|
||||||
opacity: 0.35,
|
|
||||||
fontSize: 14
|
|
||||||
},
|
|
||||||
backgroundColor: 'rgba(0,0,0,0.35)',
|
|
||||||
formatter: function(params: any) {
|
|
||||||
let tips = ''
|
|
||||||
tips += '<font>时间:' + params[0].name + '</font><br/>'
|
|
||||||
tips += '<font>暂降次数:' + params[0].data + '</font>'
|
|
||||||
return tips
|
|
||||||
}
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
data: ['暂降次数'],
|
|
||||||
x: 'right'
|
|
||||||
},
|
|
||||||
xAxis: [
|
|
||||||
{
|
|
||||||
type: 'category',
|
|
||||||
data: months,
|
|
||||||
name: '时间'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
yAxis: [
|
|
||||||
{
|
|
||||||
type: 'value',
|
|
||||||
name: '次',
|
|
||||||
minInterval: 1
|
|
||||||
}
|
|
||||||
],
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: '暂降次数',
|
|
||||||
type: 'bar',
|
|
||||||
barMinHeight: 10,
|
|
||||||
itemStyle: {
|
|
||||||
normal: {
|
|
||||||
color: function(params: any) {
|
|
||||||
if (params.data == 0) {
|
|
||||||
return '#ccc'
|
|
||||||
} else {
|
|
||||||
return color[0]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
label: {
|
|
||||||
show: true,
|
|
||||||
textStyle: {
|
|
||||||
label: { show: true, position: 'top' }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data: handle
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
const initSecond = () => {
|
|
||||||
let reaArray = []
|
|
||||||
let valueArray = []
|
|
||||||
secondData.value.reverse()
|
|
||||||
for (let i = 0; i < secondData.value.length; i++) {
|
|
||||||
reaArray.push(secondData.value[i].reason)
|
|
||||||
valueArray.push({
|
|
||||||
name: secondData.value[i].reason,
|
|
||||||
value: secondData.value[i].times
|
|
||||||
})
|
|
||||||
}
|
|
||||||
secondOptions.value = {
|
|
||||||
backgroundColor: '#fff', //背景色,
|
|
||||||
animation: false,
|
|
||||||
title: {
|
|
||||||
text: '暂降原因',
|
|
||||||
x: 'center'
|
|
||||||
},
|
|
||||||
tooltip: {
|
|
||||||
trigger: 'item',
|
|
||||||
axisPointer: {
|
|
||||||
type: 'shadow',
|
|
||||||
label: {
|
|
||||||
color: '#fff',
|
|
||||||
fontSize: 16
|
|
||||||
}
|
|
||||||
},
|
|
||||||
textStyle: {
|
|
||||||
color: '#fff',
|
|
||||||
fontStyle: 'normal',
|
|
||||||
opacity: 0.35,
|
|
||||||
fontSize: 14
|
|
||||||
},
|
|
||||||
backgroundColor: 'rgba(0,0,0,0.35)',
|
|
||||||
formatter: '{a} <br/>{b} : {c} ({d}%)'
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
orient: 'vertical',
|
|
||||||
left: 'left',
|
|
||||||
data: reaArray
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: '暂降原因',
|
|
||||||
type: 'pie',
|
|
||||||
radius: '70%',
|
|
||||||
center: ['50%', '53%'],
|
|
||||||
label: {
|
|
||||||
normal: {
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
emphasis: {
|
|
||||||
show: true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
lableLine: {
|
|
||||||
normal: {
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
emphasis: {
|
|
||||||
show: true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data: valueArray,
|
|
||||||
itemStyle: {
|
|
||||||
emphasis: {
|
|
||||||
shadowBlur: 10,
|
|
||||||
shadowOffsetX: 0,
|
|
||||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
const initThird = () => {
|
|
||||||
let typeArray = []
|
|
||||||
let valueArray = []
|
|
||||||
for (let i = 0; i < thirdData.value.length; i++) {
|
|
||||||
typeArray.push(thirdData.value[i].type)
|
|
||||||
valueArray.push({
|
|
||||||
name: thirdData.value[i].type,
|
|
||||||
value: thirdData.value[i].times
|
|
||||||
}
|
|
||||||
)
|
|
||||||
}
|
|
||||||
thirdOptions.value = {
|
|
||||||
backgroundColor: '#fff', //背景色,
|
|
||||||
animation: false,
|
|
||||||
title: {
|
|
||||||
text: '暂降类型',
|
|
||||||
x: 'center'
|
|
||||||
},
|
|
||||||
|
|
||||||
tooltip: {
|
|
||||||
trigger: 'item',
|
|
||||||
axisPointer: {
|
|
||||||
type: 'shadow',
|
|
||||||
label: {
|
|
||||||
color: '#fff',
|
|
||||||
fontSize: 16
|
|
||||||
}
|
|
||||||
},
|
|
||||||
textStyle: {
|
|
||||||
color: '#fff',
|
|
||||||
fontStyle: 'normal',
|
|
||||||
opacity: 0.35,
|
|
||||||
fontSize: 14
|
|
||||||
},
|
|
||||||
backgroundColor: 'rgba(0,0,0,0.35)',
|
|
||||||
formatter: '{a} <br/>{b} : {c} ({d}%)'
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
orient: 'vertical',
|
|
||||||
left: 'left',
|
|
||||||
data: typeArray
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: '暂降类型',
|
|
||||||
type: 'pie',
|
|
||||||
radius: '70%',
|
|
||||||
center: ['50%', '60%'],
|
|
||||||
label: {
|
|
||||||
normal: {
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
emphasis: {
|
|
||||||
show: true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
lableLine: {
|
|
||||||
normal: {
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
emphasis: {
|
|
||||||
show: true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data: valueArray,
|
|
||||||
itemStyle: {
|
|
||||||
emphasis: {
|
|
||||||
shadowBlur: 10,
|
|
||||||
shadowOffsetX: 0,
|
|
||||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
init()
|
|
||||||
})
|
|
||||||
|
|
||||||
</script>
|
|
||||||
<style lang='scss'>
|
|
||||||
.zanjiangfenbutongji {
|
|
||||||
display: flex;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,122 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<!-- 表头 -->
|
|
||||||
<TableHeader date-picker>
|
|
||||||
<template v-slot:operation>
|
|
||||||
<el-button :icon='Download' type='primary' @click='download'>波形下载</el-button>
|
|
||||||
</template>
|
|
||||||
</TableHeader>
|
|
||||||
<!-- 表格 -->
|
|
||||||
<Table ref='tableRef' :checkboxConfig='checkboxConfig' />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup lang='ts'>
|
|
||||||
import { Download } from '@element-plus/icons-vue'
|
|
||||||
import { ref, onMounted, provide, reactive } from 'vue'
|
|
||||||
import { ElMessageBox, ElMessage } from 'element-plus'
|
|
||||||
import TableStore from '@/utils/tableStore'
|
|
||||||
import Table from '@/components/table/index.vue'
|
|
||||||
import TableHeader from '@/components/table/header/index.vue'
|
|
||||||
import { mainHeight } from '@/utils/layout'
|
|
||||||
import { useMonitoringPoint } from '@/stores/monitoringPoint'
|
|
||||||
import { useDictData } from '@/stores/dictData'
|
|
||||||
import { checkUser } from '@/api/user-boot/user'
|
|
||||||
import { VxeTablePropTypes } from 'vxe-table'
|
|
||||||
import { downloadWaveFile, getMonitorEventAnalyseWave } from '@/api/event-boot/transient'
|
|
||||||
|
|
||||||
const dictData = useDictData()
|
|
||||||
const eventTypeOptions = dictData.getBasicData('Event_Statis')
|
|
||||||
const monitoringPoint = useMonitoringPoint()
|
|
||||||
const tableStore = new TableStore({
|
|
||||||
publicHeight: 60,
|
|
||||||
url: '/event-boot/monitor/getMonitorEventAnalyseQuery',
|
|
||||||
method: 'POST',
|
|
||||||
column: [
|
|
||||||
{ width: '60', type: 'checkbox' },
|
|
||||||
{ title: '序号', type: 'seq', width: '60' },
|
|
||||||
{ title: '变电站名称', field: 'subName', minWidth: '130' },
|
|
||||||
{ title: '监测点名称', field: 'lineName', minWidth: '130' },
|
|
||||||
{ title: '网络参数', field: 'ip', minWidth: '130' },
|
|
||||||
{ title: '电压等级(kV)', field: 'voltageScale', width: '100' },
|
|
||||||
{ title: '暂降发生时刻', field: 'startTime', width: '200' },
|
|
||||||
{ title: '暂降类型', field: 'advanceType', minWidth: '130' },
|
|
||||||
{ title: '暂降原因', field: 'advanceReason', minWidth: '130' },
|
|
||||||
{ title: '触发类型', field: 'eventTypeName', minWidth: '80' },
|
|
||||||
{ title: '暂降(骤升)幅值(%)', field: 'featureAmplitude', minWidth: '80' },
|
|
||||||
{ title: '持续时间(s)', field: 'duration', minWidth: '80' },
|
|
||||||
{ title: '严重度', field: 'severity', minWidth: '80' },
|
|
||||||
{
|
|
||||||
title: '操作',
|
|
||||||
width: '180',
|
|
||||||
render: 'buttons',
|
|
||||||
fixed: 'right',
|
|
||||||
buttons: [
|
|
||||||
{
|
|
||||||
name: 'edit',
|
|
||||||
title: '波形查看',
|
|
||||||
type: 'primary',
|
|
||||||
icon: 'el-icon-Lock',
|
|
||||||
render: 'basicButton',
|
|
||||||
disabled: row => {
|
|
||||||
return row.fileFlag === 0
|
|
||||||
},
|
|
||||||
click: row => {
|
|
||||||
getMonitorEventAnalyseWave({
|
|
||||||
id: row.eventId,
|
|
||||||
systemType: 0,
|
|
||||||
type: 0
|
|
||||||
}).then(res => {
|
|
||||||
console.log(res)
|
|
||||||
ElMessage.error('暂无可下载的波形文件!')
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
],
|
|
||||||
beforeSearchFun: () => {
|
|
||||||
tableStore.table.params.lineId = monitoringPoint.state.lineId
|
|
||||||
console.log('beforeSearchFun')
|
|
||||||
},
|
|
||||||
loadCallback: () => {
|
|
||||||
tableStore.table.data.forEach((item: any) => {
|
|
||||||
item.eventTypeName = eventTypeOptions.find(item2 => item2.id === item.eventType)?.name
|
|
||||||
item.featureAmplitude = (item.featureAmplitude * 100).toFixed(0)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
})
|
|
||||||
provide('tableStore', tableStore)
|
|
||||||
tableStore.table.params.searchState = 0
|
|
||||||
onMounted(() => {
|
|
||||||
// 加载数据
|
|
||||||
tableStore.index()
|
|
||||||
})
|
|
||||||
const checkboxConfig = reactive<VxeTablePropTypes.CheckboxConfig<any>>({
|
|
||||||
checkMethod: ({ row }) => {
|
|
||||||
return row.fileFlag === 1
|
|
||||||
}
|
|
||||||
})
|
|
||||||
const download = () => {
|
|
||||||
if (!tableStore.table.selection.length) {
|
|
||||||
ElMessage.warning('请选择数据')
|
|
||||||
return
|
|
||||||
}
|
|
||||||
downloadWaveFile({
|
|
||||||
lineId: tableStore.table.selection.map((item: any) => item.eventId)
|
|
||||||
}).then((res: any) => {
|
|
||||||
if (res.type == 'application/json') {
|
|
||||||
ElMessage.warning('暂无可下载的波形文件!')
|
|
||||||
return
|
|
||||||
}
|
|
||||||
ElMessage.success('下载中。。。!')
|
|
||||||
let blob = new Blob([res], { type: 'application/zip' }) // console.log(blob) // var href = window.URL.createObjectURL(blob); //创建下载的链接
|
|
||||||
const url = window.URL.createObjectURL(blob)
|
|
||||||
const link = document.createElement('a') // 创建a标签
|
|
||||||
link.href = url
|
|
||||||
link.download = '波形分析下载' // 设置下载的文件名
|
|
||||||
document.body.appendChild(link)
|
|
||||||
link.click() //执行下载
|
|
||||||
document.body.removeChild(link) //释放标签
|
|
||||||
})
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@@ -4,19 +4,26 @@
|
|||||||
<el-tab-pane label='导航' name='1' :style='height' lazy>
|
<el-tab-pane label='导航' name='1' :style='height' lazy>
|
||||||
<Navigation @changeTab='changeTab' />
|
<Navigation @changeTab='changeTab' />
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
<el-tab-pane label='稳态综合评估' name='2' lazy v-if='!isReload'>
|
<el-tab-pane label='稳态综合评估' name='2' lazy :style='height' v-if='!isReload'>
|
||||||
|
<Wentaizonghepinggu />
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
<el-tab-pane label='稳态指标合格率' name='3' lazy v-if='!isReload'>
|
<el-tab-pane label='稳态指标合格率' name='3' lazy :style='height' v-if='!isReload'>
|
||||||
|
<Wentaizhibiaohegelv />
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
<el-tab-pane label='稳态数据分析' name='4' lazy :style='height' v-if='!isReload'>
|
<el-tab-pane label='稳态数据分析' name='4' lazy :style='height' v-if='!isReload'>
|
||||||
|
<Wentaishujufenxi />
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
<el-tab-pane label='谐波频普' name='5' lazy :style='height' v-if='!isReload'>
|
<el-tab-pane label='谐波频普' name='5' lazy :style='height' v-if='!isReload'>
|
||||||
|
<Xiebopingpu />
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
<el-tab-pane label='告警数据统计' name='6' lazy :style='height' v-if='!isReload'>
|
<el-tab-pane label='告警数据统计' name='6' lazy :style='height' v-if='!isReload'>
|
||||||
|
<Gaojingshujutongji />
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
<el-tab-pane label='监测点运行状态' name='7' lazy :style='height' v-if='!isReload'>
|
<el-tab-pane label='监测点运行状态' name='7' lazy :style='height' v-if='!isReload'>
|
||||||
|
<Yunxingzhuangtai />
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
<el-tab-pane label='实时数据' name='7' lazy :style='height' v-if='!isReload'>
|
<el-tab-pane label='实时数据' name='8' lazy :style='height' v-if='!isReload'>
|
||||||
|
<Shishishuju />
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
</el-tabs>
|
</el-tabs>
|
||||||
<div class='monitoring-point'>当前位置：{{ monitoringPoint.state.lineName }}</div>
|
<div class='monitoring-point'>当前位置：{{ monitoringPoint.state.lineName }}</div>
|
||||||
@@ -24,11 +31,17 @@
|
|||||||
</template>
|
</template>
|
||||||
<script setup lang='ts'>
|
<script setup lang='ts'>
|
||||||
import { defineOptions, nextTick, ref, watch } from 'vue'
|
import { defineOptions, nextTick, ref, watch } from 'vue'
|
||||||
import Navigation from './navigation/index.vue'
|
|
||||||
import EventStatistics from './eventStatistics/index.vue'
|
|
||||||
import EventStudy from './eventStudy/index.vue'
|
|
||||||
import RunningCondition from './runningCondition/index.vue'
|
|
||||||
import { mainHeight } from '@/utils/layout'
|
import { mainHeight } from '@/utils/layout'
|
||||||
|
import Navigation from './navigation/index.vue'
|
||||||
|
import Wentaizonghepinggu from './wentaizonghepinggu/index.vue'
|
||||||
|
import Wentaizhibiaohegelv from './wentaizhibiaohegelv/index.vue'
|
||||||
|
import Wentaishujufenxi from './wentaishujufenxi/index.vue'
|
||||||
|
import Xiebopingpu from './xiebopingpu/index.vue'
|
||||||
|
import Gaojingshujutongji from './gaojingshujutongji/index.vue'
|
||||||
|
import Yunxingzhuangtai from './yunxingzhuangtai/index.vue'
|
||||||
|
import Shishishuju from './shishishuju/index.vue'
|
||||||
|
|
||||||
|
|
||||||
import router from '@/router'
|
import router from '@/router'
|
||||||
import { useMonitoringPoint } from '@/stores/monitoringPoint'
|
import { useMonitoringPoint } from '@/stores/monitoringPoint'
|
||||||
|
|
||||||
|
|||||||
@@ -1,329 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div v-loading='loading' class='running-condition'>
|
|
||||||
<el-form :inline='true'>
|
|
||||||
<el-form-item label='日期'>
|
|
||||||
<DatePicker ref='datePickerRef'></DatePicker>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item>
|
|
||||||
<el-button type='primary' @click='init'>查询</el-button>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
<div style='flex: 1;' class='mt10 zanjiangfenbutongji'>
|
|
||||||
<div
|
|
||||||
style='position: absolute; right: 10px; top: 10px; z-index: 2;display: flex;align-items: center;font-size: 12px'>
|
|
||||||
<el-tag style='width: 20px;height: 12px' :style='{background: gradeColor[2]}'></el-tag>
|
|
||||||
<span class='ml2' :style='{color: gradeColor[2]}'> {{ 'X<60%' }} </span>
|
|
||||||
<el-tag class='ml10' style='width: 20px;height: 12px' :style='{background: gradeColor[1]}'></el-tag>
|
|
||||||
<span class='ml2' :style='{color: gradeColor[1]}'>{{ '60%≤X<90%' }} </span>
|
|
||||||
<el-tag class='ml10' style='width: 20px;height: 12px' :style='{background: gradeColor[0]}'></el-tag>
|
|
||||||
<span class='ml2' :style='{color: gradeColor[0]}'> {{ 'X≥90 %' }}</span>
|
|
||||||
</div>
|
|
||||||
<my-echart :options='secondOptions' style='flex: 1;height: 100%' />
|
|
||||||
<my-echart :options='firstOptions' style='flex: 1;height: 100%' />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup lang='ts'>
|
|
||||||
import { nextTick, onMounted, reactive, ref, watch } from 'vue'
|
|
||||||
import DatePicker from '@/components/form/datePicker/index.vue'
|
|
||||||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
|
||||||
import { useMonitoringPoint } from '@/stores/monitoringPoint'
|
|
||||||
import { getComFlagInfoData, getRunOnlineRateData } from '@/api/device-boot/communicate'
|
|
||||||
import { gradeColor } from '@/components/echarts/color'
|
|
||||||
|
|
||||||
const datePickerRef = ref()
|
|
||||||
const loading = ref(true)
|
|
||||||
const monitoringPoint = useMonitoringPoint()
|
|
||||||
const formData = reactive({
|
|
||||||
id: '',
|
|
||||||
searchBeginTime: '',
|
|
||||||
searchEndTime: '',
|
|
||||||
timeFlag: 1
|
|
||||||
})
|
|
||||||
const firstOptions = ref<any>({})
|
|
||||||
const secondOptions = ref<any>({})
|
|
||||||
const firstData = ref<any>([])
|
|
||||||
const secondData = ref<any>([])
|
|
||||||
|
|
||||||
const init = () => {
|
|
||||||
loading.value = true
|
|
||||||
formData.id = monitoringPoint.state.lineId
|
|
||||||
formData.searchBeginTime = datePickerRef.value.timeValue[0]
|
|
||||||
formData.searchEndTime = datePickerRef.value.timeValue[1]
|
|
||||||
formData.timeFlag = datePickerRef.value.interval
|
|
||||||
Promise.all([getRunOnlineRateData(formData), getComFlagInfoData(formData)]).then(res => {
|
|
||||||
firstData.value = res[0].data
|
|
||||||
secondData.value = res[1].data
|
|
||||||
initFirst()
|
|
||||||
initSecond()
|
|
||||||
loading.value = false
|
|
||||||
})
|
|
||||||
}
|
|
||||||
const initFirst = () => {
|
|
||||||
let months = new Array()
|
|
||||||
let handle = new Array()
|
|
||||||
let year = firstData.value[0].year
|
|
||||||
|
|
||||||
for (let i = 0; i < firstData.value.length; i++) {
|
|
||||||
if (formData.timeFlag == 0) {
|
|
||||||
months[i] = firstData.value[i].month
|
|
||||||
months[0] = firstData.value[i].month + '\n' + '(' + year + ')'
|
|
||||||
} else {
|
|
||||||
months[i] = firstData.value[i].month + '-' + firstData.value[i].day
|
|
||||||
months[0] = firstData.value[i].month + '-' + firstData.value[i].day + '\n' + '(' + year + ')'
|
|
||||||
}
|
|
||||||
handle.push(firstData.value[i].onlineRate)
|
|
||||||
}
|
|
||||||
firstOptions.value = {
|
|
||||||
title: {
|
|
||||||
text: '在线率统计',
|
|
||||||
x: 'center',
|
|
||||||
textStyle: {
|
|
||||||
fontWeight: 'normal'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
tooltip: {
|
|
||||||
trigger: 'axis',
|
|
||||||
axisPointer: {
|
|
||||||
type: 'shadow',
|
|
||||||
label: {
|
|
||||||
color: '#fff',
|
|
||||||
fontSize: 16
|
|
||||||
}
|
|
||||||
},
|
|
||||||
textStyle: {
|
|
||||||
color: '#fff',
|
|
||||||
fontStyle: 'normal',
|
|
||||||
opacity: 0.35,
|
|
||||||
fontSize: 14
|
|
||||||
},
|
|
||||||
backgroundColor: 'rgba(0,0,0,0.35)',
|
|
||||||
formatter: function(params: any) {
|
|
||||||
let tips = ''
|
|
||||||
tips += '时间:' + year + '-' + params[0].name + '</br/>'
|
|
||||||
for (let i = 0; i < params.length; i++) {
|
|
||||||
if (params[i].value == 3.14159) {
|
|
||||||
tips += '在线率' + ':暂无数据<br/>'
|
|
||||||
} else {
|
|
||||||
tips += '在线率' + ':' + params[i].value + '%<br/>'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return tips
|
|
||||||
}
|
|
||||||
},
|
|
||||||
xAxis: [
|
|
||||||
{
|
|
||||||
type: 'category',
|
|
||||||
data: months,
|
|
||||||
name: '时间',
|
|
||||||
nameTextStyle: {
|
|
||||||
verticalAlign: 'top', //标题位置
|
|
||||||
padding: [-5, 0, 0, -10]
|
|
||||||
},
|
|
||||||
|
|
||||||
splitLine: {
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
axisLine: {
|
|
||||||
show: true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
],
|
|
||||||
yAxis: [
|
|
||||||
{
|
|
||||||
min: 0,
|
|
||||||
max: 100,
|
|
||||||
type: 'value',
|
|
||||||
name: '%',
|
|
||||||
axisLine: {
|
|
||||||
show: true
|
|
||||||
},
|
|
||||||
splitLine: {
|
|
||||||
show: false,
|
|
||||||
lineStyle: {
|
|
||||||
// 使用深浅的间隔色
|
|
||||||
type: 'dashed',
|
|
||||||
opacity: 0.5
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
],
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
type: 'bar',
|
|
||||||
data: handle,
|
|
||||||
itemStyle: {
|
|
||||||
color: (params: any) => {
|
|
||||||
if (params.value == 3.14159) {
|
|
||||||
return '#ccc'
|
|
||||||
} else {
|
|
||||||
if (params.value < 60) {
|
|
||||||
return gradeColor[2]
|
|
||||||
} else if (params.value < 90) {
|
|
||||||
return gradeColor[1]
|
|
||||||
} else {
|
|
||||||
return gradeColor[0]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
markLine: {
|
|
||||||
silent: false,
|
|
||||||
symbol: 'circle',
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
yAxis: 100,
|
|
||||||
lineStyle: {
|
|
||||||
color: gradeColor[0]
|
|
||||||
},
|
|
||||||
label: {
|
|
||||||
position: 'end',
|
|
||||||
formatter: '100%'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
yAxis: 90,
|
|
||||||
lineStyle: {
|
|
||||||
color: gradeColor[1]
|
|
||||||
},
|
|
||||||
label: {
|
|
||||||
position: 'end',
|
|
||||||
formatter: '90%'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
yAxis: 60,
|
|
||||||
lineStyle: {
|
|
||||||
color: gradeColor[2]
|
|
||||||
},
|
|
||||||
label: {
|
|
||||||
position: 'end',
|
|
||||||
formatter: '60%'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
const initSecond = () => {
|
|
||||||
let list = secondData.value.type
|
|
||||||
let items = secondData.value.updateTime
|
|
||||||
|
|
||||||
for (let i = 0; i < items.length; i++) {
|
|
||||||
if (i != 0) {
|
|
||||||
i
|
|
||||||
items[i] = items[i].slice(11)
|
|
||||||
} else if (i == 0) {
|
|
||||||
let date = items[i].slice(11)
|
|
||||||
let t = items[i].slice(0, 10)
|
|
||||||
items[i] = '(' + date + ')' + '\n' + t
|
|
||||||
}
|
|
||||||
}
|
|
||||||
secondOptions.value = {
|
|
||||||
tooltip: {
|
|
||||||
trigger: 'axis',
|
|
||||||
axisPointer: {
|
|
||||||
type: 'shadow',
|
|
||||||
label: {
|
|
||||||
color: '#fff',
|
|
||||||
fontSize: 16
|
|
||||||
}
|
|
||||||
},
|
|
||||||
textStyle: {
|
|
||||||
color: '#fff',
|
|
||||||
fontStyle: 'normal',
|
|
||||||
opacity: 0.35,
|
|
||||||
fontSize: 14
|
|
||||||
},
|
|
||||||
backgroundColor: 'rgba(0,0,0,0.35)',
|
|
||||||
formatter: function(params: any) {
|
|
||||||
let res = '时间: ' + params[0].name + '<br/>运行状态：'
|
|
||||||
let texts = ''
|
|
||||||
if (params[0].value === 2 || params[0].value === '2') {
|
|
||||||
texts = '退出'
|
|
||||||
} else if (params[0].value === 0 || params[0].value === '0') {
|
|
||||||
texts = '中断'
|
|
||||||
} else if (params[0].value === 1 || params[0].value === '1') {
|
|
||||||
texts = '正常'
|
|
||||||
}
|
|
||||||
res = res + texts
|
|
||||||
return res
|
|
||||||
}
|
|
||||||
},
|
|
||||||
dataZoom: [
|
|
||||||
{
|
|
||||||
type: 'inside',
|
|
||||||
height: 13,
|
|
||||||
start: 0,
|
|
||||||
end: 100,
|
|
||||||
bottom: '25px'
|
|
||||||
},
|
|
||||||
|
|
||||||
{ height: 13, start: 0, bottom: '25px', end: 100 }
|
|
||||||
],
|
|
||||||
|
|
||||||
xAxis: {
|
|
||||||
name: '时间',
|
|
||||||
type: 'category',
|
|
||||||
data: items,
|
|
||||||
boundaryGap: false
|
|
||||||
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
name: '状态',
|
|
||||||
type: 'value',
|
|
||||||
axisLine: {
|
|
||||||
show: true
|
|
||||||
},
|
|
||||||
axisLabel: {
|
|
||||||
show: true,
|
|
||||||
textStyle: {
|
|
||||||
color: 'blue'
|
|
||||||
},
|
|
||||||
// 这里重新定义就可以
|
|
||||||
formatter: function(value: number) {
|
|
||||||
let texts = []
|
|
||||||
if (value === 2) {
|
|
||||||
texts.push('退出')
|
|
||||||
} else if (value === 0) {
|
|
||||||
texts.push('中断')
|
|
||||||
} else if (value === 1) {
|
|
||||||
texts.push('正常')
|
|
||||||
}
|
|
||||||
return texts
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: '运行状态',
|
|
||||||
type: 'line',
|
|
||||||
step: 'end',
|
|
||||||
data: list
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
onMounted(() => {
|
|
||||||
init()
|
|
||||||
})
|
|
||||||
|
|
||||||
</script>
|
|
||||||
<style lang='scss'>
|
|
||||||
.running-condition {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
height: 100%;
|
|
||||||
box-sizing: border-box;
|
|
||||||
padding: 14px;
|
|
||||||
border: 1px solid var(--el-border-color);
|
|
||||||
|
|
||||||
.zanjiangfenbutongji {
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -38,12 +38,12 @@ const init = () => {
|
|||||||
getProbabilityDistribution(formData).then(
|
getProbabilityDistribution(formData).then(
|
||||||
(res: any) => {
|
(res: any) => {
|
||||||
let data = res.data
|
let data = res.data
|
||||||
let eventValue = data.eventvalue
|
let sisttime = data.sisttime
|
||||||
let pereventValue = data.pereventvalue
|
let persisttime = data.persisttime
|
||||||
options.value = {
|
options.value = {
|
||||||
backgroundColor: '#fff', //背景色,
|
backgroundColor: '#fff', //背景色,
|
||||||
title: {
|
title: {
|
||||||
text: '暂降幅值的概率分布函数',
|
text: '持续时间的概率分布函数',
|
||||||
x: 'center'
|
x: 'center'
|
||||||
},
|
},
|
||||||
legend: {
|
legend: {
|
||||||
@@ -91,19 +91,7 @@ const init = () => {
|
|||||||
nameTextStyle: {
|
nameTextStyle: {
|
||||||
fontSize: 12
|
fontSize: 12
|
||||||
},
|
},
|
||||||
data: [
|
data: ['0.01', '0.1', '0.25', '0.5', '1', '3', '20', '60', '180']
|
||||||
'0',
|
|
||||||
'10%',
|
|
||||||
'20%',
|
|
||||||
'30%',
|
|
||||||
'40%',
|
|
||||||
'50%',
|
|
||||||
'60%',
|
|
||||||
'70%',
|
|
||||||
'80%',
|
|
||||||
'90%',
|
|
||||||
'100%'
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
yAxis: [
|
yAxis: [
|
||||||
@@ -148,18 +136,18 @@ const init = () => {
|
|||||||
],
|
],
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
name: '占比',
|
name: '概率分布',
|
||||||
type: 'bar',
|
type: 'line',
|
||||||
data: pereventValue,
|
data: sisttime,
|
||||||
barWidth: 30,
|
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
normal: { show: true }
|
normal: { show: true }
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '概率分布',
|
name: '占比',
|
||||||
type: 'line',
|
type: 'bar',
|
||||||
data: eventValue,
|
data: persisttime,
|
||||||
|
barWidth: 30,
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
normal: { show: true }
|
normal: { show: true }
|
||||||
}
|
}
|
||||||
@@ -0,0 +1,173 @@
|
|||||||
|
<template>
|
||||||
|
<div style='display: flex;flex-direction: column;height: 100%'>
|
||||||
|
<el-form :inline='true'>
|
||||||
|
<el-form-item label='日期'>
|
||||||
|
<DatePicker ref='datePickerRef'></DatePicker>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type='primary' @click='init'>查询</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<div style='flex: 1;' class='mt10'>
|
||||||
|
<my-echart :options='options' />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup lang='ts'>
|
||||||
|
import { nextTick, onMounted, reactive, ref } from 'vue'
|
||||||
|
import DatePicker from '@/components/form/datePicker/index.vue'
|
||||||
|
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||||
|
import { useMonitoringPoint } from '@/stores/monitoringPoint'
|
||||||
|
import { getProbabilityDistribution } from '@/api/event-boot/monitor'
|
||||||
|
|
||||||
|
const datePickerRef = ref()
|
||||||
|
const monitoringPoint = useMonitoringPoint()
|
||||||
|
const loading = ref(true)
|
||||||
|
const formData = reactive({
|
||||||
|
lineIndex: monitoringPoint.state.lineId,
|
||||||
|
startTime: '',
|
||||||
|
endTime: ''
|
||||||
|
})
|
||||||
|
const options = ref({})
|
||||||
|
|
||||||
|
const init = () => {
|
||||||
|
loading.value = true
|
||||||
|
formData.lineIndex = monitoringPoint.state.lineId
|
||||||
|
formData.startTime = datePickerRef.value.timeValue[0]
|
||||||
|
formData.endTime = datePickerRef.value.timeValue[1]
|
||||||
|
getProbabilityDistribution(formData).then(
|
||||||
|
(res: any) => {
|
||||||
|
let data = res.data
|
||||||
|
let sisttime = data.sisttime
|
||||||
|
let persisttime = data.persisttime
|
||||||
|
options.value = {
|
||||||
|
backgroundColor: '#fff', //背景色,
|
||||||
|
title: {
|
||||||
|
text: '持续时间的概率分布函数',
|
||||||
|
x: 'center'
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
show: true,
|
||||||
|
left: 10,
|
||||||
|
data: ['概率分布', '占比'],
|
||||||
|
|
||||||
|
textStyle: {
|
||||||
|
rich: {
|
||||||
|
a: {
|
||||||
|
verticalAlign: 'middle'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
padding: [2, 0, 0, 0] //[上、右、下、左]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
tooltip: {
|
||||||
|
//提示框组件
|
||||||
|
trigger: 'axis',
|
||||||
|
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow',
|
||||||
|
label: {
|
||||||
|
color: '#fff',
|
||||||
|
fontSize: 16
|
||||||
|
}
|
||||||
|
},
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff',
|
||||||
|
fontStyle: 'normal',
|
||||||
|
opacity: 0.35,
|
||||||
|
fontSize: 14
|
||||||
|
},
|
||||||
|
backgroundColor: 'rgba(0,0,0,0.35)',
|
||||||
|
borderWidth: 0
|
||||||
|
},
|
||||||
|
calculable: true,
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: 'category',
|
||||||
|
name: '暂降幅值',
|
||||||
|
nameGap: 10,
|
||||||
|
nameTextStyle: {
|
||||||
|
fontSize: 12
|
||||||
|
},
|
||||||
|
data: ['0.01', '0.1', '0.25', '0.5', '1', '3', '20', '60', '180']
|
||||||
|
}
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
name: '概率分布',
|
||||||
|
nameTextStyle: {
|
||||||
|
fontSize: 15
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
formatter: '{value}%'
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: true
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
lineStyle: {
|
||||||
|
// 使用深浅的间隔色
|
||||||
|
type: 'dashed',
|
||||||
|
opacity: 0.5
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
name: '占比',
|
||||||
|
|
||||||
|
nameTextStyle: {
|
||||||
|
fontSize: 15
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: true
|
||||||
|
},
|
||||||
|
|
||||||
|
splitLine: {
|
||||||
|
lineStyle: {
|
||||||
|
type: 'dashed',
|
||||||
|
opacity: 0.5
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '概率分布',
|
||||||
|
type: 'line',
|
||||||
|
data: sisttime,
|
||||||
|
itemStyle: {
|
||||||
|
normal: { show: true }
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '占比',
|
||||||
|
type: 'bar',
|
||||||
|
data: persisttime,
|
||||||
|
barWidth: 30,
|
||||||
|
itemStyle: {
|
||||||
|
normal: { show: true }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
options: {
|
||||||
|
dataZoom: null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
nextTick(() => {
|
||||||
|
loading.value = false
|
||||||
|
})
|
||||||
|
}
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
init()
|
||||||
|
})
|
||||||
|
|
||||||
|
</script>
|
||||||
|
<style></style>
|
||||||
@@ -0,0 +1,173 @@
|
|||||||
|
<template>
|
||||||
|
<div style='display: flex;flex-direction: column;height: 100%'>
|
||||||
|
<el-form :inline='true'>
|
||||||
|
<el-form-item label='日期'>
|
||||||
|
<DatePicker ref='datePickerRef'></DatePicker>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type='primary' @click='init'>查询</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<div style='flex: 1;' class='mt10'>
|
||||||
|
<my-echart :options='options' />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup lang='ts'>
|
||||||
|
import { nextTick, onMounted, reactive, ref } from 'vue'
|
||||||
|
import DatePicker from '@/components/form/datePicker/index.vue'
|
||||||
|
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||||
|
import { useMonitoringPoint } from '@/stores/monitoringPoint'
|
||||||
|
import { getProbabilityDistribution } from '@/api/event-boot/monitor'
|
||||||
|
|
||||||
|
const datePickerRef = ref()
|
||||||
|
const monitoringPoint = useMonitoringPoint()
|
||||||
|
const loading = ref(true)
|
||||||
|
const formData = reactive({
|
||||||
|
lineIndex: monitoringPoint.state.lineId,
|
||||||
|
startTime: '',
|
||||||
|
endTime: ''
|
||||||
|
})
|
||||||
|
const options = ref({})
|
||||||
|
|
||||||
|
const init = () => {
|
||||||
|
loading.value = true
|
||||||
|
formData.lineIndex = monitoringPoint.state.lineId
|
||||||
|
formData.startTime = datePickerRef.value.timeValue[0]
|
||||||
|
formData.endTime = datePickerRef.value.timeValue[1]
|
||||||
|
getProbabilityDistribution(formData).then(
|
||||||
|
(res: any) => {
|
||||||
|
let data = res.data
|
||||||
|
let sisttime = data.sisttime
|
||||||
|
let persisttime = data.persisttime
|
||||||
|
options.value = {
|
||||||
|
backgroundColor: '#fff', //背景色,
|
||||||
|
title: {
|
||||||
|
text: '持续时间的概率分布函数',
|
||||||
|
x: 'center'
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
show: true,
|
||||||
|
left: 10,
|
||||||
|
data: ['概率分布', '占比'],
|
||||||
|
|
||||||
|
textStyle: {
|
||||||
|
rich: {
|
||||||
|
a: {
|
||||||
|
verticalAlign: 'middle'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
padding: [2, 0, 0, 0] //[上、右、下、左]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
tooltip: {
|
||||||
|
//提示框组件
|
||||||
|
trigger: 'axis',
|
||||||
|
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow',
|
||||||
|
label: {
|
||||||
|
color: '#fff',
|
||||||
|
fontSize: 16
|
||||||
|
}
|
||||||
|
},
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff',
|
||||||
|
fontStyle: 'normal',
|
||||||
|
opacity: 0.35,
|
||||||
|
fontSize: 14
|
||||||
|
},
|
||||||
|
backgroundColor: 'rgba(0,0,0,0.35)',
|
||||||
|
borderWidth: 0
|
||||||
|
},
|
||||||
|
calculable: true,
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: 'category',
|
||||||
|
name: '暂降幅值',
|
||||||
|
nameGap: 10,
|
||||||
|
nameTextStyle: {
|
||||||
|
fontSize: 12
|
||||||
|
},
|
||||||
|
data: ['0.01', '0.1', '0.25', '0.5', '1', '3', '20', '60', '180']
|
||||||
|
}
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
name: '概率分布',
|
||||||
|
nameTextStyle: {
|
||||||
|
fontSize: 15
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
formatter: '{value}%'
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: true
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
lineStyle: {
|
||||||
|
// 使用深浅的间隔色
|
||||||
|
type: 'dashed',
|
||||||
|
opacity: 0.5
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
name: '占比',
|
||||||
|
|
||||||
|
nameTextStyle: {
|
||||||
|
fontSize: 15
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: true
|
||||||
|
},
|
||||||
|
|
||||||
|
splitLine: {
|
||||||
|
lineStyle: {
|
||||||
|
type: 'dashed',
|
||||||
|
opacity: 0.5
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '概率分布',
|
||||||
|
type: 'line',
|
||||||
|
data: sisttime,
|
||||||
|
itemStyle: {
|
||||||
|
normal: { show: true }
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '占比',
|
||||||
|
type: 'bar',
|
||||||
|
data: persisttime,
|
||||||
|
barWidth: 30,
|
||||||
|
itemStyle: {
|
||||||
|
normal: { show: true }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
options: {
|
||||||
|
dataZoom: null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
nextTick(() => {
|
||||||
|
loading.value = false
|
||||||
|
})
|
||||||
|
}
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
init()
|
||||||
|
})
|
||||||
|
|
||||||
|
</script>
|
||||||
|
<style></style>
|
||||||
@@ -0,0 +1,173 @@
|
|||||||
|
<template>
|
||||||
|
<div style='display: flex;flex-direction: column;height: 100%'>
|
||||||
|
<el-form :inline='true'>
|
||||||
|
<el-form-item label='日期'>
|
||||||
|
<DatePicker ref='datePickerRef'></DatePicker>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type='primary' @click='init'>查询</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<div style='flex: 1;' class='mt10'>
|
||||||
|
<my-echart :options='options' />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup lang='ts'>
|
||||||
|
import { nextTick, onMounted, reactive, ref } from 'vue'
|
||||||
|
import DatePicker from '@/components/form/datePicker/index.vue'
|
||||||
|
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||||
|
import { useMonitoringPoint } from '@/stores/monitoringPoint'
|
||||||
|
import { getProbabilityDistribution } from '@/api/event-boot/monitor'
|
||||||
|
|
||||||
|
const datePickerRef = ref()
|
||||||
|
const monitoringPoint = useMonitoringPoint()
|
||||||
|
const loading = ref(true)
|
||||||
|
const formData = reactive({
|
||||||
|
lineIndex: monitoringPoint.state.lineId,
|
||||||
|
startTime: '',
|
||||||
|
endTime: ''
|
||||||
|
})
|
||||||
|
const options = ref({})
|
||||||
|
|
||||||
|
const init = () => {
|
||||||
|
loading.value = true
|
||||||
|
formData.lineIndex = monitoringPoint.state.lineId
|
||||||
|
formData.startTime = datePickerRef.value.timeValue[0]
|
||||||
|
formData.endTime = datePickerRef.value.timeValue[1]
|
||||||
|
getProbabilityDistribution(formData).then(
|
||||||
|
(res: any) => {
|
||||||
|
let data = res.data
|
||||||
|
let sisttime = data.sisttime
|
||||||
|
let persisttime = data.persisttime
|
||||||
|
options.value = {
|
||||||
|
backgroundColor: '#fff', //背景色,
|
||||||
|
title: {
|
||||||
|
text: '持续时间的概率分布函数',
|
||||||
|
x: 'center'
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
show: true,
|
||||||
|
left: 10,
|
||||||
|
data: ['概率分布', '占比'],
|
||||||
|
|
||||||
|
textStyle: {
|
||||||
|
rich: {
|
||||||
|
a: {
|
||||||
|
verticalAlign: 'middle'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
padding: [2, 0, 0, 0] //[上、右、下、左]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
tooltip: {
|
||||||
|
//提示框组件
|
||||||
|
trigger: 'axis',
|
||||||
|
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow',
|
||||||
|
label: {
|
||||||
|
color: '#fff',
|
||||||
|
fontSize: 16
|
||||||
|
}
|
||||||
|
},
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff',
|
||||||
|
fontStyle: 'normal',
|
||||||
|
opacity: 0.35,
|
||||||
|
fontSize: 14
|
||||||
|
},
|
||||||
|
backgroundColor: 'rgba(0,0,0,0.35)',
|
||||||
|
borderWidth: 0
|
||||||
|
},
|
||||||
|
calculable: true,
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: 'category',
|
||||||
|
name: '暂降幅值',
|
||||||
|
nameGap: 10,
|
||||||
|
nameTextStyle: {
|
||||||
|
fontSize: 12
|
||||||
|
},
|
||||||
|
data: ['0.01', '0.1', '0.25', '0.5', '1', '3', '20', '60', '180']
|
||||||
|
}
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
name: '概率分布',
|
||||||
|
nameTextStyle: {
|
||||||
|
fontSize: 15
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
formatter: '{value}%'
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: true
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
lineStyle: {
|
||||||
|
// 使用深浅的间隔色
|
||||||
|
type: 'dashed',
|
||||||
|
opacity: 0.5
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
name: '占比',
|
||||||
|
|
||||||
|
nameTextStyle: {
|
||||||
|
fontSize: 15
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: true
|
||||||
|
},
|
||||||
|
|
||||||
|
splitLine: {
|
||||||
|
lineStyle: {
|
||||||
|
type: 'dashed',
|
||||||
|
opacity: 0.5
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '概率分布',
|
||||||
|
type: 'line',
|
||||||
|
data: sisttime,
|
||||||
|
itemStyle: {
|
||||||
|
normal: { show: true }
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '占比',
|
||||||
|
type: 'bar',
|
||||||
|
data: persisttime,
|
||||||
|
barWidth: 30,
|
||||||
|
itemStyle: {
|
||||||
|
normal: { show: true }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
options: {
|
||||||
|
dataZoom: null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
nextTick(() => {
|
||||||
|
loading.value = false
|
||||||
|
})
|
||||||
|
}
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
init()
|
||||||
|
})
|
||||||
|
|
||||||
|
</script>
|
||||||
|
<style></style>
|
||||||
@@ -0,0 +1,173 @@
|
|||||||
|
<template>
|
||||||
|
<div style='display: flex;flex-direction: column;height: 100%'>
|
||||||
|
<el-form :inline='true'>
|
||||||
|
<el-form-item label='日期'>
|
||||||
|
<DatePicker ref='datePickerRef'></DatePicker>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type='primary' @click='init'>查询</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<div style='flex: 1;' class='mt10'>
|
||||||
|
<my-echart :options='options' />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup lang='ts'>
|
||||||
|
import { nextTick, onMounted, reactive, ref } from 'vue'
|
||||||
|
import DatePicker from '@/components/form/datePicker/index.vue'
|
||||||
|
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||||
|
import { useMonitoringPoint } from '@/stores/monitoringPoint'
|
||||||
|
import { getProbabilityDistribution } from '@/api/event-boot/monitor'
|
||||||
|
|
||||||
|
const datePickerRef = ref()
|
||||||
|
const monitoringPoint = useMonitoringPoint()
|
||||||
|
const loading = ref(true)
|
||||||
|
const formData = reactive({
|
||||||
|
lineIndex: monitoringPoint.state.lineId,
|
||||||
|
startTime: '',
|
||||||
|
endTime: ''
|
||||||
|
})
|
||||||
|
const options = ref({})
|
||||||
|
|
||||||
|
const init = () => {
|
||||||
|
loading.value = true
|
||||||
|
formData.lineIndex = monitoringPoint.state.lineId
|
||||||
|
formData.startTime = datePickerRef.value.timeValue[0]
|
||||||
|
formData.endTime = datePickerRef.value.timeValue[1]
|
||||||
|
getProbabilityDistribution(formData).then(
|
||||||
|
(res: any) => {
|
||||||
|
let data = res.data
|
||||||
|
let sisttime = data.sisttime
|
||||||
|
let persisttime = data.persisttime
|
||||||
|
options.value = {
|
||||||
|
backgroundColor: '#fff', //背景色,
|
||||||
|
title: {
|
||||||
|
text: '持续时间的概率分布函数',
|
||||||
|
x: 'center'
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
show: true,
|
||||||
|
left: 10,
|
||||||
|
data: ['概率分布', '占比'],
|
||||||
|
|
||||||
|
textStyle: {
|
||||||
|
rich: {
|
||||||
|
a: {
|
||||||
|
verticalAlign: 'middle'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
padding: [2, 0, 0, 0] //[上、右、下、左]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
tooltip: {
|
||||||
|
//提示框组件
|
||||||
|
trigger: 'axis',
|
||||||
|
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow',
|
||||||
|
label: {
|
||||||
|
color: '#fff',
|
||||||
|
fontSize: 16
|
||||||
|
}
|
||||||
|
},
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff',
|
||||||
|
fontStyle: 'normal',
|
||||||
|
opacity: 0.35,
|
||||||
|
fontSize: 14
|
||||||
|
},
|
||||||
|
backgroundColor: 'rgba(0,0,0,0.35)',
|
||||||
|
borderWidth: 0
|
||||||
|
},
|
||||||
|
calculable: true,
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: 'category',
|
||||||
|
name: '暂降幅值',
|
||||||
|
nameGap: 10,
|
||||||
|
nameTextStyle: {
|
||||||
|
fontSize: 12
|
||||||
|
},
|
||||||
|
data: ['0.01', '0.1', '0.25', '0.5', '1', '3', '20', '60', '180']
|
||||||
|
}
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
name: '概率分布',
|
||||||
|
nameTextStyle: {
|
||||||
|
fontSize: 15
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
formatter: '{value}%'
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: true
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
lineStyle: {
|
||||||
|
// 使用深浅的间隔色
|
||||||
|
type: 'dashed',
|
||||||
|
opacity: 0.5
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
name: '占比',
|
||||||
|
|
||||||
|
nameTextStyle: {
|
||||||
|
fontSize: 15
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: true
|
||||||
|
},
|
||||||
|
|
||||||
|
splitLine: {
|
||||||
|
lineStyle: {
|
||||||
|
type: 'dashed',
|
||||||
|
opacity: 0.5
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '概率分布',
|
||||||
|
type: 'line',
|
||||||
|
data: sisttime,
|
||||||
|
itemStyle: {
|
||||||
|
normal: { show: true }
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '占比',
|
||||||
|
type: 'bar',
|
||||||
|
data: persisttime,
|
||||||
|
barWidth: 30,
|
||||||
|
itemStyle: {
|
||||||
|
normal: { show: true }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
options: {
|
||||||
|
dataZoom: null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
nextTick(() => {
|
||||||
|
loading.value = false
|
||||||
|
})
|
||||||
|
}
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
init()
|
||||||
|
})
|
||||||
|
|
||||||
|
</script>
|
||||||
|
<style></style>
|
||||||
@@ -0,0 +1,173 @@
|
|||||||
|
<template>
|
||||||
|
<div style='display: flex;flex-direction: column;height: 100%'>
|
||||||
|
<el-form :inline='true'>
|
||||||
|
<el-form-item label='日期'>
|
||||||
|
<DatePicker ref='datePickerRef'></DatePicker>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type='primary' @click='init'>查询</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<div style='flex: 1;' class='mt10'>
|
||||||
|
<my-echart :options='options' />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup lang='ts'>
|
||||||
|
import { nextTick, onMounted, reactive, ref } from 'vue'
|
||||||
|
import DatePicker from '@/components/form/datePicker/index.vue'
|
||||||
|
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||||
|
import { useMonitoringPoint } from '@/stores/monitoringPoint'
|
||||||
|
import { getProbabilityDistribution } from '@/api/event-boot/monitor'
|
||||||
|
|
||||||
|
const datePickerRef = ref()
|
||||||
|
const monitoringPoint = useMonitoringPoint()
|
||||||
|
const loading = ref(true)
|
||||||
|
const formData = reactive({
|
||||||
|
lineIndex: monitoringPoint.state.lineId,
|
||||||
|
startTime: '',
|
||||||
|
endTime: ''
|
||||||
|
})
|
||||||
|
const options = ref({})
|
||||||
|
|
||||||
|
const init = () => {
|
||||||
|
loading.value = true
|
||||||
|
formData.lineIndex = monitoringPoint.state.lineId
|
||||||
|
formData.startTime = datePickerRef.value.timeValue[0]
|
||||||
|
formData.endTime = datePickerRef.value.timeValue[1]
|
||||||
|
getProbabilityDistribution(formData).then(
|
||||||
|
(res: any) => {
|
||||||
|
let data = res.data
|
||||||
|
let sisttime = data.sisttime
|
||||||
|
let persisttime = data.persisttime
|
||||||
|
options.value = {
|
||||||
|
backgroundColor: '#fff', //背景色,
|
||||||
|
title: {
|
||||||
|
text: '持续时间的概率分布函数',
|
||||||
|
x: 'center'
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
show: true,
|
||||||
|
left: 10,
|
||||||
|
data: ['概率分布', '占比'],
|
||||||
|
|
||||||
|
textStyle: {
|
||||||
|
rich: {
|
||||||
|
a: {
|
||||||
|
verticalAlign: 'middle'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
padding: [2, 0, 0, 0] //[上、右、下、左]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
tooltip: {
|
||||||
|
//提示框组件
|
||||||
|
trigger: 'axis',
|
||||||
|
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow',
|
||||||
|
label: {
|
||||||
|
color: '#fff',
|
||||||
|
fontSize: 16
|
||||||
|
}
|
||||||
|
},
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff',
|
||||||
|
fontStyle: 'normal',
|
||||||
|
opacity: 0.35,
|
||||||
|
fontSize: 14
|
||||||
|
},
|
||||||
|
backgroundColor: 'rgba(0,0,0,0.35)',
|
||||||
|
borderWidth: 0
|
||||||
|
},
|
||||||
|
calculable: true,
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: 'category',
|
||||||
|
name: '暂降幅值',
|
||||||
|
nameGap: 10,
|
||||||
|
nameTextStyle: {
|
||||||
|
fontSize: 12
|
||||||
|
},
|
||||||
|
data: ['0.01', '0.1', '0.25', '0.5', '1', '3', '20', '60', '180']
|
||||||
|
}
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
name: '概率分布',
|
||||||
|
nameTextStyle: {
|
||||||
|
fontSize: 15
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
formatter: '{value}%'
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: true
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
lineStyle: {
|
||||||
|
// 使用深浅的间隔色
|
||||||
|
type: 'dashed',
|
||||||
|
opacity: 0.5
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
name: '占比',
|
||||||
|
|
||||||
|
nameTextStyle: {
|
||||||
|
fontSize: 15
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: true
|
||||||
|
},
|
||||||
|
|
||||||
|
splitLine: {
|
||||||
|
lineStyle: {
|
||||||
|
type: 'dashed',
|
||||||
|
opacity: 0.5
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '概率分布',
|
||||||
|
type: 'line',
|
||||||
|
data: sisttime,
|
||||||
|
itemStyle: {
|
||||||
|
normal: { show: true }
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '占比',
|
||||||
|
type: 'bar',
|
||||||
|
data: persisttime,
|
||||||
|
barWidth: 30,
|
||||||
|
itemStyle: {
|
||||||
|
normal: { show: true }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
options: {
|
||||||
|
dataZoom: null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
nextTick(() => {
|
||||||
|
loading.value = false
|
||||||
|
})
|
||||||
|
}
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
init()
|
||||||
|
})
|
||||||
|
|
||||||
|
</script>
|
||||||
|
<style></style>
|
||||||
Reference in New Issue
Block a user