Web/admin-sjzx
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

暂降分布统计

Browse Source
This commit is contained in:
仲么了
2024-02-26 19:17:08 +08:00
parent 31e4aa1eb7
commit 592d795e2b
5 changed files with 656 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
src/components/echarts/MyEchart.vue
View File

@@ -6,7 +6,7 @@
import { onBeforeUnmount, onMounted, ref, defineExpose, watch } from 'vue'
// import echarts from './echarts'
import * as echarts from 'echarts' // 全引入
import 'echarts-gl';
import 'echarts-gl'
import 'echarts/lib/component/dataZoom'
const chartRef = ref<HTMLDivElement>()
@@ -24,90 +24,6 @@ const initChart = () => {
chart?.dispose()
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({
title: {
left: 'center',
@@ -157,8 +73,8 @@ const initChart = () => {
bottom: props.options.options?.dataZoom === null ? '10px' : '40px',
containLabel: true
},
xAxis: handlerXAxis(),
yAxis: handlerYAxis(),
xAxis: props.options.xAxis ? handlerXAxis() : null,
yAxis: props.options.yAxis ? handlerYAxis() : null,
dataZoom: [
{
type: 'inside',

2
src/views/pms/voltageSags/monitoringPoint/online/eventStatistics/dianyazanjiangbiaojimidu/index.vue
View File

@@ -47,7 +47,7 @@
<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='80px'></vxe-colgroup>
<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>

2
src/views/pms/voltageSags/monitoringPoint/online/eventStatistics/index.vue
View File

@@ -30,7 +30,7 @@ import Zanjiangfenbutongji from './zanjiangfenbutongji/index.vue'
import Zanjiangfuzhigailvfenbu from './zanjiangfuzhigailvfenbu/index.vue'
import Chixushijiangailvfenbu from './chixushijiangailvfenbu/index.vue'
const activeName = ref('1')
const activeName = ref('5')
const height = mainHeight(84)
</script>

323
src/views/pms/voltageSags/monitoringPoint/online/eventStatistics/zanjiangfenbutongji/index.vue
View File

@@ -1,10 +1,325 @@
<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>
</template>
<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>
<style></style>
<style lang='scss'>
.zanjiangfenbutongji {
display: flex;
overflow: hidden;
}
</style>

333
src/views/pms/voltageSags/monitoringPoint/online/eventStatistics/zanjiangfuzhigailvfenbu/index.vue
View File

@@ -1,10 +1,337 @@
<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>
</template>
<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>
<style></style>