345 lines
11 KiB
Vue
345 lines
11 KiB
Vue
|
<template>
|
||
|
|
<div>
|
||
|
|
<!--F47曲线 -->
|
||
|
|
<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>
|
||
|
|
<my-echart
|
||
|
|
class="tall"
|
||
|
|
:options="echartList"
|
||
|
|
:style="{ width: prop.width, height: `calc(${prop.height} - 80px)` }"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { ref, onMounted, provide, reactive, watch, h } from 'vue'
|
||
|
|
import TableStore from '@/utils/tableStore'
|
||
|
|
import Table from '@/components/table/index.vue'
|
||
|
|
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||
|
|
import { useDictData } from '@/stores/dictData'
|
||
|
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
||
|
|
import { getTimeOfTheMonth } from '@/utils/formatTime'
|
||
|
|
const prop = defineProps({
|
||
|
|
width: { type: String },
|
||
|
|
height: { type: String },
|
||
|
|
timeKey: { type: String },
|
||
|
|
timeValue: { type: Object }
|
||
|
|
})
|
||
|
|
|
||
|
|
const echartList = ref({})
|
||
|
|
const OverLimitDetailsRef = ref()
|
||
|
|
const data = reactive({
|
||
|
|
name: '事件个数',
|
||
|
|
gs: 0,
|
||
|
|
krr: 0,
|
||
|
|
bkrr: 0
|
||
|
|
})
|
||
|
|
const tableStore: any = new TableStore({
|
||
|
|
url: '/user-boot/dept/deptTree',
|
||
|
|
method: 'POST',
|
||
|
|
|
||
|
|
showPage: false,
|
||
|
|
|
||
|
|
column: [],
|
||
|
|
beforeSearchFun: () => {
|
||
|
|
tableStore.table.params.searchBeginTime = prop.timeValue?.[0] || getTimeOfTheMonth(prop.timeKey)[0]
|
||
|
|
tableStore.table.params.searchEndTime = prop.timeValue?.[1] || getTimeOfTheMonth(prop.timeKey)[1]
|
||
|
|
},
|
||
|
|
loadCallback: () => {
|
||
|
|
let res = {
|
||
|
|
data: { totalNumberOfEvents: 0, voltageToleranceCurveDataList: [] }
|
||
|
|
}
|
||
|
|
|
||
|
|
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)
|
||
|
|
echartList.value = {
|
||
|
|
// backgroundColor: "#f9f9f9", //地图背景色深蓝
|
||
|
|
title: {
|
||
|
|
text: `F47曲线`
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
data: ['上限', '下限', '可容忍事件', '不可容忍事件']
|
||
|
|
},
|
||
|
|
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.55)',
|
||
|
|
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: '%'
|
||
|
|
}
|
||
|
|
],
|
||
|
|
color: ['#DAA520', 'green', 'red'],
|
||
|
|
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.pointF
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '不可容忍事件',
|
||
|
|
type: 'scatter',
|
||
|
|
symbol: 'circle',
|
||
|
|
data: gongData.pointFun
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
const tableRef = ref()
|
||
|
|
provide('tableRef', tableRef)
|
||
|
|
provide('tableStore', tableStore)
|
||
|
|
|
||
|
|
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(() => {
|
||
|
|
setTimeout(() => {
|
||
|
|
tableStore.index()
|
||
|
|
}, 100)
|
||
|
|
})
|
||
|
|
watch(
|
||
|
|
() => prop.timeKey,
|
||
|
|
val => {
|
||
|
|
tableStore.index()
|
||
|
|
}
|
||
|
|
)
|
||
|
|
watch(
|
||
|
|
() => prop.timeValue, // 监听的目标（函数形式避免直接传递 props 导致的警告）
|
||
|
|
(newVal, oldVal) => {
|
||
|
|
tableStore.index()
|
||
|
|
},
|
||
|
|
{
|
||
|
|
deep: true // 若 timeValue 是对象/数组，需开启深度监听
|
||
|
|
}
|
||
|
|
)
|
||
|
|
|
||
|
|
const addMenu = () => {}
|
||
|
|
</script>
|
||
|
|
<style lang="scss" scoped></style>
|