稳态综合评估
This commit is contained in:
仲么了
@@ -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) => {
|
||||
|
||||
@@ -1,173 +1,206 @@
|
||||
<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
|
||||
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
|
||||
})
|
||||
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 = {
|
||||
title: {
|
||||
text: '稳态综合评估',
|
||||
x: 'center',
|
||||
y: '0%'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
label: {
|
||||
color: '#fff',
|
||||
fontSize: 16
|
||||
}
|
||||
},
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontStyle: 'normal',
|
||||
|
||||
opacity: 0.35,
|
||||
fontSize: 14
|
||||
},
|
||||
borderColor: '#fff',
|
||||
backgroundColor: 'rgba(0,0,0,0.35)',
|
||||
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 + ' : ' + '/'
|
||||
}
|
||||
}
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
name: '指标',
|
||||
type: 'category',
|
||||
data: ['稳态综合评估'],
|
||||
axisLabel: {
|
||||
margin: 10
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
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: 'bar',
|
||||
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:{
|
||||
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]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
options: {
|
||||
dataZoom: null
|
||||
}
|
||||
}
|
||||
nextTick(() => {
|
||||
loading.value = false
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
init()
|
||||
})
|
||||
|
||||
</script>
|
||||
<style></style>
|
||||
|
||||
Reference in New Issue
Block a user