暂降分布统计
This commit is contained in:
仲么了
@@ -6,7 +6,7 @@
|
|||||||
import { onBeforeUnmount, onMounted, ref, defineExpose, watch } from 'vue'
|
import { onBeforeUnmount, onMounted, ref, defineExpose, watch } from 'vue'
|
||||||
// import echarts from './echarts'
|
// import echarts from './echarts'
|
||||||
import * as echarts from 'echarts' // 全引入
|
import * as echarts from 'echarts' // 全引入
|
||||||
import 'echarts-gl';
|
import 'echarts-gl'
|
||||||
import 'echarts/lib/component/dataZoom'
|
import 'echarts/lib/component/dataZoom'
|
||||||
|
|
||||||
const chartRef = ref<HTMLDivElement>()
|
const chartRef = ref<HTMLDivElement>()
|
||||||
@@ -24,90 +24,6 @@ const initChart = () => {
|
|||||||
chart?.dispose()
|
chart?.dispose()
|
||||||
|
|
||||||
chart = echarts.init(chartRef.value as HTMLDivElement)
|
chart = echarts.init(chartRef.value as HTMLDivElement)
|
||||||
console.log({
|
|
||||||
title: {
|
|
||||||
left: 'center',
|
|
||||||
textStyle: {
|
|
||||||
color: '#000',
|
|
||||||
fontSize: 18
|
|
||||||
},
|
|
||||||
...(props.options.title || null)
|
|
||||||
},
|
|
||||||
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,
|
|
||||||
...(props.options.tooltip || null)
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
right: 20,
|
|
||||||
top: 0,
|
|
||||||
itemGap: 10,
|
|
||||||
itemStyle: {},
|
|
||||||
textStyle: {
|
|
||||||
fontSize: 12,
|
|
||||||
padding: [2, 0, 0, 0] //[上、右、下、左]
|
|
||||||
},
|
|
||||||
itemWidth: 15,
|
|
||||||
itemHeight: 10,
|
|
||||||
...(props.options.legend || null)
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
top: '50px',
|
|
||||||
left: '10px',
|
|
||||||
right: '60px',
|
|
||||||
bottom: props.options.options?.dataZoom === null ? '10px' : '40px',
|
|
||||||
containLabel: true
|
|
||||||
},
|
|
||||||
xAxis: handlerXAxis(),
|
|
||||||
yAxis: handlerYAxis(),
|
|
||||||
dataZoom: [
|
|
||||||
{
|
|
||||||
type: 'inside',
|
|
||||||
height: 13,
|
|
||||||
start: 0,
|
|
||||||
bottom: '20px',
|
|
||||||
end: 100,
|
|
||||||
...(props.options.dataZoom || null)
|
|
||||||
},
|
|
||||||
{
|
|
||||||
start: 0,
|
|
||||||
height: 13,
|
|
||||||
bottom: '20px',
|
|
||||||
end: 100,
|
|
||||||
...(props.options.dataZoom || null)
|
|
||||||
}
|
|
||||||
],
|
|
||||||
color: [
|
|
||||||
...(props.options.color || ''),
|
|
||||||
'#07CCCA ',
|
|
||||||
'#00BFF5',
|
|
||||||
'#FFBF00',
|
|
||||||
'#77DA63',
|
|
||||||
'#D5FF6B',
|
|
||||||
'#Ff6600',
|
|
||||||
'#FF9100',
|
|
||||||
'#5B6E96',
|
|
||||||
'#66FFCC',
|
|
||||||
'#B3B3B3'
|
|
||||||
],
|
|
||||||
series: props.options.series,
|
|
||||||
...props.options.options
|
|
||||||
})
|
|
||||||
chart.setOption({
|
chart.setOption({
|
||||||
title: {
|
title: {
|
||||||
left: 'center',
|
left: 'center',
|
||||||
@@ -157,8 +73,8 @@ const initChart = () => {
|
|||||||
bottom: props.options.options?.dataZoom === null ? '10px' : '40px',
|
bottom: props.options.options?.dataZoom === null ? '10px' : '40px',
|
||||||
containLabel: true
|
containLabel: true
|
||||||
},
|
},
|
||||||
xAxis: handlerXAxis(),
|
xAxis: props.options.xAxis ? handlerXAxis() : null,
|
||||||
yAxis: handlerYAxis(),
|
yAxis: props.options.yAxis ? handlerYAxis() : null,
|
||||||
dataZoom: [
|
dataZoom: [
|
||||||
{
|
{
|
||||||
type: 'inside',
|
type: 'inside',
|
||||||
@@ -178,7 +94,7 @@ const initChart = () => {
|
|||||||
],
|
],
|
||||||
color: [
|
color: [
|
||||||
...(props.options.color || ''),
|
...(props.options.color || ''),
|
||||||
'#07CCCA ',
|
'#07CCCA',
|
||||||
'#00BFF5',
|
'#00BFF5',
|
||||||
'#FFBF00',
|
'#FFBF00',
|
||||||
'#77DA63',
|
'#77DA63',
|
||||||
@@ -194,7 +110,7 @@ const initChart = () => {
|
|||||||
})
|
})
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
chart.resize()
|
chart.resize()
|
||||||
},0)
|
}, 0)
|
||||||
}
|
}
|
||||||
const handlerYAxis = () => {
|
const handlerYAxis = () => {
|
||||||
let temp = {
|
let temp = {
|
||||||
|
|||||||
@@ -47,7 +47,7 @@
|
|||||||
<div class='mb10'>IEC61000-2-8(公共用电暂降测量统计)</div>
|
<div class='mb10'>IEC61000-2-8(公共用电暂降测量统计)</div>
|
||||||
<div style='flex: 1;overflow: hidden'>
|
<div style='flex: 1;overflow: hidden'>
|
||||||
<vxe-table v-bind='defaultAttribute' height='100%' size='mini' :data='thirdData'>
|
<vxe-table v-bind='defaultAttribute' height='100%' size='mini' :data='thirdData'>
|
||||||
<vxe-colgroup title='剩余电压' field='name' width='80px'></vxe-colgroup>
|
<vxe-colgroup title='剩余电压' field='name' width='120px'></vxe-colgroup>
|
||||||
<vxe-colgroup title='持续事件'>
|
<vxe-colgroup title='持续事件'>
|
||||||
<vxe-column field='q' title='0.01-0.1s' align='center'></vxe-column>
|
<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='w' title='0.1-0.25s' align='center'></vxe-column>
|
||||||
|
|||||||
@@ -30,7 +30,7 @@ import Zanjiangfenbutongji from './zanjiangfenbutongji/index.vue'
|
|||||||
import Zanjiangfuzhigailvfenbu from './zanjiangfuzhigailvfenbu/index.vue'
|
import Zanjiangfuzhigailvfenbu from './zanjiangfuzhigailvfenbu/index.vue'
|
||||||
import Chixushijiangailvfenbu from './chixushijiangailvfenbu/index.vue'
|
import Chixushijiangailvfenbu from './chixushijiangailvfenbu/index.vue'
|
||||||
|
|
||||||
const activeName = ref('1')
|
const activeName = ref('5')
|
||||||
const height = mainHeight(84)
|
const height = mainHeight(84)
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -1,10 +1,325 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class='default-main'>
|
<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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup lang='ts'>
|
<script setup lang='ts'>
|
||||||
import { ref } from 'vue'
|
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 '@/views/pms/voltageSags/monitoringPoint/online/store'
|
||||||
|
import { getReasonTypeTime, getStatistic } from '@/api/event-boot/monitor'
|
||||||
|
|
||||||
|
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.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',
|
||||||
|
barMaxWidth: 30,
|
||||||
|
barMinHeight: 5,
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: function(params: any) {
|
||||||
|
if (params.data == 0) {
|
||||||
|
return '#ccc'
|
||||||
|
} else {
|
||||||
|
return '#07CCCA'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
textStyle: {
|
||||||
|
label: { show: true, position: 'top' },
|
||||||
|
color: '#8B008B'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
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>
|
</script>
|
||||||
<style></style>
|
<style lang='scss'>
|
||||||
|
.zanjiangfenbutongji {
|
||||||
|
display: flex;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@@ -1,10 +1,337 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class='default-main'>
|
<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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup lang='ts'>
|
<script setup lang='ts'>
|
||||||
import { ref } from 'vue'
|
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 '@/views/pms/voltageSags/monitoringPoint/online/store'
|
||||||
|
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.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>
|
</script>
|
||||||
<style></style>
|
<style></style>
|
||||||
|
|||||||
Reference in New Issue
Block a user