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-28 15:26:31 +08:00
parent 279db34690
commit 9e288b49be
6 changed files with 211 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/api/harmonic-boot/asses.ts Normal file
View File

@@ -0,0 +1,11 @@
import request from '@/utils/request'
export function getQualityAssessData(data: any) {
return request({
url: '/harmonic-boot/asses/getQualityAssessData',
method: 'post',
data: data
})
}

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

@@ -1,14 +1,14 @@
<template>
<div ref='chartRef' class='my-chart' />
<div ref="chartRef" class="my-chart" />
</template>
<script setup lang='ts'>
<script setup lang="ts">
import { onBeforeUnmount, onMounted, ref, defineExpose, watch } from 'vue'
// import echarts from './echarts'
import * as echarts from 'echarts' // 全引入
import 'echarts-gl'
import 'echarts/lib/component/dataZoom'
import { color, gradeColor } from './color'
import { color, gradeColor3 } from './color'
const chartRef = ref<HTMLDivElement>()
@@ -112,7 +112,9 @@ const handlerBar = (options: any) => {
if (params.value == 0 || params.value == 3.14159) {
return '#ccc'
} else {
return color[params.seriesIndex]
return props.options.color
? props.options.color[params.seriesIndex]
: color[params.seriesIndex]
}
}
},
@@ -212,7 +214,7 @@ watch(
)
</script>
<style lang='scss' scoped>
<style lang="scss" scoped>
.my-chart {
height: 100%;
width: 100%;

3
src/components/echarts/color.ts
View File

@@ -10,4 +10,5 @@ export const color = [
'#66FFCC',
'#B3B3B3'
]
export const gradeColor = ['#339966', '#FFCC33', '#CC0000']
export const gradeColor3 = ['#339966', '#FFCC33', '#CC0000']
export const gradeColor5 = ['#00CC00', '#99CC99', '#FF9900','#996600','#CC0000']

2
src/views/pqs/harmonicMonitoring/monitoringPoint/online/index.vue
View File

@@ -51,7 +51,7 @@ defineOptions({
const isReload = ref(false)
const monitoringPoint = useMonitoringPoint()
const height = mainHeight(82)
const activeName = ref('1')
const activeName = ref('2')
watch(
() => router.currentRoute.value.query.lineId,
(newLineId, oldLineId) => {

239
src/views/pqs/harmonicMonitoring/monitoringPoint/online/wentaizonghepinggu/index.vue
View File

@@ -1,71 +1,64 @@
<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>
<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 { getQualityAssessData } from '@/api/harmonic-boot/asses'
import { gradeColor5 } from '@/components/echarts/color'
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 gradeNames = ['优质', '良好', '一般', '较差', '极差']
const grade = gradeColor5.map((item, index) => {
return {
name: gradeNames[index],
color: item
}
})
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
formData.id = monitoringPoint.state.lineId
formData.searchBeginTime = datePickerRef.value.timeValue[0]
formData.searchEndTime = datePickerRef.value.timeValue[1]
getQualityAssessData(formData).then((res: any) => {
let data = res.data.syn[0]
if (data == 3.14159) {
data = 0.25
} else if (data == 3.1415) {
data = 0.15
}
options.value = {
backgroundColor: '#fff', //背景色,
title: {
text: '持续时间的概率分布函数',
x: 'center'
text: '稳态综合评估',
x: 'center',
y: '0%'
},
legend: {
show: true,
left: 10,
data: ['概率分布', '占比'],
textStyle: {
rich: {
a: {
verticalAlign: 'middle'
}
},
padding: [2, 0, 0, 0] //[上、右、下、左]
}
},
tooltip: {
//提示框组件
trigger: 'axis',
trigger: 'item',
axisPointer: {
type: 'shadow',
label: {
@@ -76,80 +69,123 @@ const init = () => {
textStyle: {
color: '#fff',
fontStyle: 'normal',
opacity: 0.35,
fontSize: 14
},
borderColor: '#fff',
backgroundColor: 'rgba(0,0,0,0.35)',
borderWidth: 0
formatter: function (params: any) {
if (params.value >= 5) {
return params.name + ' : ' + '优质'
} else if (params.value > 4 && params.value <= 5) {
return params.name + ' : ' + '良好'
} else if (params.value > 3 && params.value <= 4) {
return params.name + ' : ' + '合格'
} else if (params.value > 2 && params.value <= 3) {
return params.name + ' : ' + '较差'
} else if (params.value <= 2 && params.value >= 1) {
return params.name + ' : ' + '极差'
} else if (params.value >= 0.25 && params.value < 1) {
return params.name + ' : ' + '暂无数据'
} else if (params.value <= 0.15 && params.value >= 0) {
return params.name + ' : ' + '/'
}
}
},
calculable: true,
xAxis: [
{
name: '指标',
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
},
data: ['稳态综合评估'],
axisLabel: {
formatter: '{value}%'
margin: 10
},
axisTick: {
show: false
},
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
}
symbol: ['none', 'arrow']
}
}
],
yAxis: {
name: '等级',
type: 'value',
min: 0,
max: 6,
axisLabel: {
show: true,
// 这里重新定义就可以
formatter: function (value: number) {
var texts = []
if (value === 1) {
texts.push('1级')
} else if (value === 2) {
texts.push('2级')
} else if (value === 3) {
texts.push('3级')
} else if (value === 4) {
texts.push('4级')
} else if (value === 5) {
texts.push('5级')
}
return texts
}
},
axisLine: {
show: true,
symbol: ['none', 'arrow']
}
},
series: [
{
name: '概率分布',
type: 'line',
data: sisttime,
itemStyle: {
normal: { show: true }
}
},
{
name: '占比',
name: '综合评估',
type: 'bar',
data: persisttime,
barWidth: 30,
label: {
show: true,
position: 'top',
distance: 2,
color: '#fff',
fontWeight: 'bolder'
},
barWidth: '45',
data: [
{
value: data
}
],
markLine: {
silent: false,
symbol: 'circle',
data: grade.map((item, index) => {
return {
yAxis: grade.length - index,
name: item.name,
lineStyle: {
color: item.color
},
label: {
color: item.color,
formatter: item.name
}
}
})
},
itemStyle:{
normal: { show: true }
color: (params: any) => {
if(params.value > 5){
return gradeColor5[0]
}else if(params.value > 4){
return gradeColor5[1]
}else if(params.value > 3){
return gradeColor5[2]
}else if(params.value > 2){
return gradeColor5[3]
}else{
return gradeColor5[4]
}
}
}
}
],
@@ -160,14 +196,11 @@ const init = () => {
nextTick(() => {
loading.value = false
})
})
}
)
}
onMounted(() => {
init()
})
</script>
<style></style>

26
src/views/pqs/voltageSags/monitoringPoint/online/runningCondition/index.vue
View File

@@ -11,12 +11,12 @@
<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>
<el-tag style='width: 20px;height: 12px' :style='{background: gradeColor3[2]}'></el-tag>
<span class='ml2' :style='{color: gradeColor3[2]}'> {{ 'X<60%' }} </span>
<el-tag class='ml10' style='width: 20px;height: 12px' :style='{background: gradeColor3[1]}'></el-tag>
<span class='ml2' :style='{color: gradeColor3[1]}'>{{ '60%≤X<90%' }} </span>
<el-tag class='ml10' style='width: 20px;height: 12px' :style='{background: gradeColor3[0]}'></el-tag>
<span class='ml2' :style='{color: gradeColor3[0]}'> {{ 'X≥90 %' }}</span>
</div>
<my-echart :options='secondOptions' style='flex: 1;height: 100%' />
<my-echart :options='firstOptions' style='flex: 1;height: 100%' />
@@ -29,7 +29,7 @@ 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'
import { gradeColor3 } from '@/components/echarts/color'
const datePickerRef = ref()
const loading = ref(true)
@@ -158,11 +158,11 @@ const initFirst = () => {
return '#ccc'
} else {
if (params.value < 60) {
return gradeColor[2]
return gradeColor3[2]
} else if (params.value < 90) {
return gradeColor[1]
return gradeColor3[1]
} else {
return gradeColor[0]
return gradeColor3[0]
}
}
}
@@ -174,7 +174,7 @@ const initFirst = () => {
{
yAxis: 100,
lineStyle: {
color: gradeColor[0]
color: gradeColor3[0]
},
label: {
position: 'end',
@@ -184,7 +184,7 @@ const initFirst = () => {
{
yAxis: 90,
lineStyle: {
color: gradeColor[1]
color: gradeColor3[1]
},
label: {
position: 'end',
@@ -194,7 +194,7 @@ const initFirst = () => {
{
yAxis: 60,
lineStyle: {
color: gradeColor[2]
color: gradeColor3[2]
},
label: {
position: 'end',