稳态综合评估
This commit is contained in:
仲么了
11
src/api/harmonic-boot/asses.ts
Normal file
11
src/api/harmonic-boot/asses.ts
Normal 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
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
@@ -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%;
|
||||
|
||||
@@ -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']
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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',
|
||||
|
||||
Reference in New Issue
Block a user