稳态指标合格率
This commit is contained in:
仲么了
9
src/api/harmonic-boot/pollution.ts
Normal file
9
src/api/harmonic-boot/pollution.ts
Normal file
@@ -0,0 +1,9 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
export function getSteadyData(data: any) {
|
||||
return request({
|
||||
url: '/harmonic-boot/pollution/getSteadyData',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
@@ -451,7 +451,39 @@ const setTimeOptions = (list: any) => {
|
||||
timeOptions.value = list
|
||||
}
|
||||
|
||||
defineExpose({ timeValue, interval, timeFlag, setTimeOptions })
|
||||
// 获取时间范围的同比
|
||||
function getYearOnYear(startDate: string, endDate: string): [string, string] {
|
||||
const startYearAgo = new Date(startDate)
|
||||
startYearAgo.setFullYear(startYearAgo.getFullYear() - 1)
|
||||
|
||||
const endYearAgo = new Date(endDate)
|
||||
endYearAgo.setFullYear(endYearAgo.getFullYear() - 1)
|
||||
|
||||
return [formatDate(startYearAgo), formatDate(endYearAgo)]
|
||||
}
|
||||
|
||||
// 获取时间范围的环比
|
||||
function getMonthOnMonth(startDate: string, endDate: string): [string, string] {
|
||||
const start = new Date(startDate)
|
||||
const end = new Date(endDate)
|
||||
|
||||
const diffTime = end.getTime() - start.getTime() + 60 * 60 * 24 * 1000 // 计算时间差
|
||||
const startMonthAgo = new Date(start)
|
||||
startMonthAgo.setTime(startMonthAgo.getTime() - diffTime) // 将开始时间向前推移相同的时间差
|
||||
|
||||
const endMonthAgo = new Date(start)
|
||||
endMonthAgo.setDate(start.getDate() - 1) // 结束时间是开始时间的前一天
|
||||
|
||||
return [formatDate(startMonthAgo), formatDate(endMonthAgo)]
|
||||
}
|
||||
// 格式化日期为 YYYY-MM-DD
|
||||
function formatDate(date: Date): string {
|
||||
const year = date.getFullYear()
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0')
|
||||
const day = String(date.getDate()).padStart(2, '0')
|
||||
return `${year}-${month}-${day}`
|
||||
}
|
||||
defineExpose({ timeValue, interval, timeFlag, setTimeOptions, getYearOnYear, getMonthOnMonth })
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@@ -137,11 +137,8 @@ const pageSizes = computed(() => {
|
||||
* 记录选择的项
|
||||
*/
|
||||
const selectChangeEvent: VxeTableEvents.CheckboxChange<any> = ({ checked }) => {
|
||||
const $table = tableRef.value
|
||||
if ($table) {
|
||||
const records = $table.getCheckboxRecords()
|
||||
tableStore.onTableAction('selection-change', records)
|
||||
}
|
||||
const records = (tableRef.value as VxeTableInstance).getCheckboxRecords()
|
||||
tableStore.onTableAction('selection-change', records)
|
||||
}
|
||||
|
||||
const getRef = () => {
|
||||
|
||||
@@ -1,173 +1,300 @@
|
||||
<template>
|
||||
<div style='display: flex;flex-direction: column;height: 100%'>
|
||||
<el-form :inline='true'>
|
||||
<el-form-item label='日期'>
|
||||
<DatePicker ref='datePickerRef'></DatePicker>
|
||||
<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 label="类型">
|
||||
<el-select v-model="searchType" clearable placeholder="可选择同比、环比">
|
||||
<el-option
|
||||
v-for="item in searchTypeOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type='primary' @click='init'>查询</el-button>
|
||||
<el-button type="primary" @click="init">查询</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div style='flex: 1;' class='mt10'>
|
||||
<my-echart :options='options' />
|
||||
<div style="flex: 1" class="mt10">
|
||||
<my-echart :options="options" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang='ts'>
|
||||
<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'
|
||||
|
||||
import { getSteadyData } from '@/api/harmonic-boot/pollution'
|
||||
import { gradeColor3 } from '@/components/echarts/color'
|
||||
import { formatter } from 'element-plus'
|
||||
const datePickerRef = ref()
|
||||
const monitoringPoint = useMonitoringPoint()
|
||||
const loading = ref(true)
|
||||
const formData = reactive({
|
||||
lineIndex: monitoringPoint.state.lineId,
|
||||
startTime: '',
|
||||
endTime: ''
|
||||
id: '',
|
||||
searchBeginTime: '',
|
||||
searchEndTime: '',
|
||||
periodBeginTime: '',
|
||||
periodEndTime: ''
|
||||
})
|
||||
const options = ref({})
|
||||
|
||||
const searchType = ref('')
|
||||
const searchTypeOptions = [
|
||||
{
|
||||
label: '同比',
|
||||
value: '1'
|
||||
},
|
||||
{
|
||||
label: '环比',
|
||||
value: '2'
|
||||
}
|
||||
]
|
||||
const gradeNames = ['优质', '良好', '一般', '较差', '极差']
|
||||
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: {
|
||||
formData.id = monitoringPoint.state.lineId
|
||||
formData.searchBeginTime = datePickerRef.value.timeValue[0]
|
||||
formData.searchEndTime = datePickerRef.value.timeValue[1]
|
||||
if (searchType.value == '1') {
|
||||
;[formData.periodBeginTime, formData.periodEndTime] = datePickerRef.value.getYearOnYear(
|
||||
formData.searchBeginTime,
|
||||
formData.searchEndTime
|
||||
)
|
||||
} else if (searchType.value == '2') {
|
||||
;[formData.periodBeginTime, formData.periodEndTime] = datePickerRef.value.getMonthOnMonth(
|
||||
formData.searchBeginTime,
|
||||
formData.searchEndTime
|
||||
)
|
||||
} else {
|
||||
formData.periodBeginTime = ''
|
||||
formData.periodEndTime = ''
|
||||
}
|
||||
getSteadyData(formData).then((res: any) => {
|
||||
const { steadyInfoData, steadyInfoList } = res.data
|
||||
let yData = [],
|
||||
yData2 = []
|
||||
for (let i = 0; i < steadyInfoList.length; i++) {
|
||||
if (steadyInfoList[i] == 3.1415) {
|
||||
steadyInfoList[i] = 1
|
||||
yData.push(steadyInfoList[i])
|
||||
} else if (steadyInfoList[i] == 3.14159) {
|
||||
steadyInfoList[i] = 1
|
||||
yData.push(steadyInfoList[i])
|
||||
} else if (steadyInfoList[i] !== 3.14159) {
|
||||
yData.push(steadyInfoList[i])
|
||||
}
|
||||
}
|
||||
for (let i = 0; i < steadyInfoData.length; i++) {
|
||||
if (steadyInfoData[i] == 3.1415) {
|
||||
steadyInfoData[i] = 1
|
||||
yData2.push(steadyInfoData[i])
|
||||
} else if (steadyInfoData[i] == 3.14159) {
|
||||
steadyInfoData[i] = 1
|
||||
yData2.push(steadyInfoData[i])
|
||||
} else if (steadyInfoData[i] !== 3.14159) {
|
||||
yData2.push(steadyInfoData[i])
|
||||
}
|
||||
}
|
||||
let series: any[] = [
|
||||
{
|
||||
name: formData.searchBeginTime + '至' + formData.searchEndTime,
|
||||
type: 'bar',
|
||||
barMaxWidth: 30,
|
||||
label: {
|
||||
show: true,
|
||||
left: 10,
|
||||
data: ['概率分布', '占比'],
|
||||
|
||||
textStyle: {
|
||||
rich: {
|
||||
a: {
|
||||
verticalAlign: 'middle'
|
||||
}
|
||||
},
|
||||
|
||||
padding: [2, 0, 0, 0] //[上、右、下、左]
|
||||
}
|
||||
position: 'top',
|
||||
distance: 2,
|
||||
color: '#fff',
|
||||
fontWeight: 'bolder'
|
||||
},
|
||||
|
||||
tooltip: {
|
||||
//提示框组件
|
||||
trigger: 'axis',
|
||||
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
label: {
|
||||
color: '#fff',
|
||||
fontSize: 16
|
||||
data: yData,
|
||||
markLine: {
|
||||
silent: false,
|
||||
symbol: 'circle',
|
||||
data: [
|
||||
{
|
||||
name: '',
|
||||
yAxis: 100,
|
||||
lineStyle: {
|
||||
color: gradeColor3[0]
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
formatter: '优质',
|
||||
color: gradeColor3[0]
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '',
|
||||
yAxis: 90,
|
||||
lineStyle: {
|
||||
color: gradeColor3[1]
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
color: gradeColor3[1],
|
||||
formatter: '良好'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '',
|
||||
yAxis: 60,
|
||||
lineStyle: {
|
||||
color: gradeColor3[2]
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
color: gradeColor3[2],
|
||||
formatter: '合格'
|
||||
}
|
||||
}
|
||||
},
|
||||
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
|
||||
}
|
||||
itemStyle: {
|
||||
color: (params: any) => {
|
||||
if (params.value > 90) {
|
||||
return gradeColor3[0]
|
||||
} else if (params.value > 60) {
|
||||
return gradeColor3[1]
|
||||
} else {
|
||||
return gradeColor3[2]
|
||||
}
|
||||
}
|
||||
],
|
||||
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
|
||||
]
|
||||
if (searchType.value) {
|
||||
series.push({
|
||||
name: formData.periodBeginTime + '至' + formData.periodEndTime,
|
||||
type: 'bar',
|
||||
barMaxWidth: 30,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
distance: 2,
|
||||
color: '#fff',
|
||||
fontWeight: 'bolder'
|
||||
},
|
||||
data: yData2,
|
||||
itemStyle: {
|
||||
color: (params: any) => {
|
||||
if (params.value > 90) {
|
||||
return gradeColor3[0]
|
||||
} else if (params.value > 60) {
|
||||
return gradeColor3[1]
|
||||
} else {
|
||||
return gradeColor3[2]
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
)
|
||||
options.value = {
|
||||
title: {
|
||||
text: '稳态指标合格率'
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
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) {
|
||||
//console.log(params)
|
||||
let msg = ''
|
||||
msg += params[0].name + '<br/>'
|
||||
for (let i in params) {
|
||||
if (params[i].data == 1) {
|
||||
msg += params[i].seriesName + ':暂无数据<br/>'
|
||||
} else {
|
||||
msg += params[i].seriesName + ':' + params[i].data + '<br/>'
|
||||
}
|
||||
}
|
||||
return msg
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
width: 1
|
||||
},
|
||||
symbol: ['none', 'arrow']
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
fontFamily: 'dinproRegular'
|
||||
}
|
||||
},
|
||||
data: [
|
||||
'频率偏差',
|
||||
'闪变',
|
||||
'三相电压不平衡',
|
||||
'谐波电压',
|
||||
'谐波电流',
|
||||
'电压偏差',
|
||||
'负序电流',
|
||||
'间谐波电压含有率'
|
||||
]
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
name: '%',
|
||||
type: 'value',
|
||||
min: 0,
|
||||
max: 100,
|
||||
position: 'left',
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
width: 1
|
||||
},
|
||||
symbol: ['none', 'arrow']
|
||||
}
|
||||
},
|
||||
{
|
||||
position: 'left',
|
||||
axisLine: {
|
||||
show: true,
|
||||
symbol: ['none', 'arrow']
|
||||
},
|
||||
splitLine: {
|
||||
//分割线配置
|
||||
lineStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series
|
||||
}
|
||||
nextTick(() => {
|
||||
loading.value = false
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
init()
|
||||
})
|
||||
|
||||
</script>
|
||||
<style></style>
|
||||
|
||||
@@ -93,6 +93,9 @@ const init = () => {
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
name: '指标',
|
||||
@@ -113,7 +116,7 @@ const init = () => {
|
||||
name: '等级',
|
||||
type: 'value',
|
||||
min: 0,
|
||||
max: 6,
|
||||
max: 5,
|
||||
axisLabel: {
|
||||
show: true,
|
||||
// 这里重新定义就可以
|
||||
|
||||
Reference in New Issue
Block a user