2026-06-11 20:27:37 +08:00
|
|
|
|
<template>
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<!--ITIC曲线 -->
|
|
|
|
|
|
<TableHeader ref="TableHeaderRef" :showReset="false" :timeKeyList="prop.timeKey" @selectChange="selectChange"
|
|
|
|
|
|
datePicker v-if="fullscreen"></TableHeader>
|
|
|
|
|
|
<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 v-loading="tableStore.table.loading" ref="chartRef" class="tall" :options="echartList" :style="{
|
|
|
|
|
|
width: prop.width,
|
|
|
|
|
|
height: `calc(${prop.height} - 80px - ${headerHeight}px + ${fullscreen ? 0 : 56}px)`
|
|
|
|
|
|
}" @chart-click="handleChartClick" />
|
|
|
|
|
|
<el-dialog v-model="isWaveCharts" v-if="isWaveCharts" draggable :title="dialogTitle" append-to-body width="70%">
|
|
|
|
|
|
<waveFormAnalysis v-loading="loading" ref="waveFormAnalysisRef" @handleHideCharts="isWaveCharts = false"
|
|
|
|
|
|
:wp="wp" />
|
|
|
|
|
|
</el-dialog>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
|
|
|
import { ref, onMounted, provide, reactive, watch, computed, nextTick } from 'vue'
|
|
|
|
|
|
import TableStore from '@/utils/tableStore'
|
|
|
|
|
|
import MyEchart from '@/components/echarts/MyEchart.vue'
|
|
|
|
|
|
import waveFormAnalysis from '@/views/govern/device/control/tabs/components/waveFormAnalysis.vue'
|
|
|
|
|
|
import TableHeader from '@/components/table/header/index.vue'
|
|
|
|
|
|
import { analyseWave } from '@/api/common'
|
|
|
|
|
|
import { ElMessage } from 'element-plus'
|
|
|
|
|
|
import { getTime } from '@/utils/formatTime'
|
|
|
|
|
|
|
|
|
|
|
|
const prop = defineProps({
|
|
|
|
|
|
w: { type: [String, Number] },
|
|
|
|
|
|
h: { type: [String, Number] },
|
|
|
|
|
|
width: { type: [String, Number] },
|
|
|
|
|
|
height: { type: [String, Number] },
|
|
|
|
|
|
timeKey: { type: Array as () => string[] },
|
|
|
|
|
|
timeValue: { type: Object },
|
|
|
|
|
|
interval: { type: Number }
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
const TableHeaderRef = ref()
|
|
|
|
|
|
|
|
|
|
|
|
const headerHeight = ref(57)
|
|
|
|
|
|
|
|
|
|
|
|
const dialogTitle = ref('波形分析')
|
|
|
|
|
|
const selectChange = (showSelect: any, height: any, datePickerValue?: any) => {
|
|
|
|
|
|
headerHeight.value = height
|
|
|
|
|
|
|
|
|
|
|
|
if (datePickerValue && datePickerValue.timeValue) {
|
|
|
|
|
|
// 更新时间参数
|
|
|
|
|
|
tableStore.table.params.searchBeginTime = datePickerValue.timeValue[0]
|
|
|
|
|
|
tableStore.table.params.searchEndTime = datePickerValue.timeValue[1]
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// 计算是否全屏展示
|
|
|
|
|
|
const fullscreen = computed(() => {
|
|
|
|
|
|
const w = Number(prop.w)
|
|
|
|
|
|
const h = Number(prop.h)
|
|
|
|
|
|
if (!isNaN(w) && !isNaN(h) && w === 12 && h === 6) {
|
|
|
|
|
|
// 执行相应逻辑
|
|
|
|
|
|
return true
|
|
|
|
|
|
} else {
|
|
|
|
|
|
return false
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
const echartList = ref()
|
|
|
|
|
|
|
|
|
|
|
|
const chartRef = ref()
|
|
|
|
|
|
// 波形
|
|
|
|
|
|
const isWaveCharts = ref(false)
|
|
|
|
|
|
|
|
|
|
|
|
const loading = ref(false)
|
|
|
|
|
|
|
|
|
|
|
|
const wp = ref({})
|
|
|
|
|
|
|
|
|
|
|
|
const boxoList: any = ref({})
|
|
|
|
|
|
|
|
|
|
|
|
const waveFormAnalysisRef: any = ref(null)
|
|
|
|
|
|
|
|
|
|
|
|
const data = reactive({
|
|
|
|
|
|
name: '事件个数',
|
|
|
|
|
|
gs: 0,
|
|
|
|
|
|
krr: 0,
|
|
|
|
|
|
bkrr: 0
|
|
|
|
|
|
})
|
|
|
|
|
|
const tableStore: any = new TableStore({
|
|
|
|
|
|
url: '/cs-harmonic-boot/csevent/f47Curve',
|
|
|
|
|
|
method: 'POST',
|
|
|
|
|
|
|
|
|
|
|
|
showPage: false,
|
|
|
|
|
|
|
|
|
|
|
|
column: [],
|
|
|
|
|
|
beforeSearchFun: () => {
|
|
|
|
|
|
setTime()
|
|
|
|
|
|
},
|
|
|
|
|
|
loadCallback: () => {
|
|
|
|
|
|
const gongData = gongfunction(tableStore.table.data)
|
|
|
|
|
|
data.gs = tableStore.table.data.length
|
|
|
|
|
|
data.krr = gongData.pointI.length
|
|
|
|
|
|
data.bkrr = gongData.pointIun.length
|
|
|
|
|
|
echartList.value = {
|
|
|
|
|
|
title: {
|
|
|
|
|
|
text: `ITIC曲线`
|
|
|
|
|
|
},
|
|
|
|
|
|
legend: {
|
|
|
|
|
|
data: ['上限', '下限', '可容忍事件', '不可容忍事件'],
|
|
|
|
|
|
// itemWidth: 10,
|
|
|
|
|
|
// itemHeight: 10,
|
|
|
|
|
|
itemGap: 15
|
|
|
|
|
|
},
|
|
|
|
|
|
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 = `<strong>${a.seriesName}</strong><br/>`
|
|
|
|
|
|
|
|
|
|
|
|
relVal += "<font style='color:" + "'>发生时间：" + a.value[2] + '</font><br/>'
|
|
|
|
|
|
relVal += "<font style='color:" + "'>特征幅值：" + Math.floor(a.value[1] * 100) / 100 + '%</font><br/>'
|
|
|
|
|
|
relVal += "<font style='color:" + "'>持续时间：" + a.value[0] + 's</font><br/>'
|
|
|
|
|
|
relVal += "<font style='color:" + "'>监测点名称：" + (a.value[4] || '/') + '</font><br/>'
|
|
|
|
|
|
relVal += "<font style='color:" + "'>设备名称：" + (a.value[5] || '/') + '</font><br/>'
|
|
|
|
|
|
relVal += "<font style='color:" + "'>项目名称：" + (a.value[6] || '/') + '</font><br/>'
|
|
|
|
|
|
relVal += "<font style='color:" + "'>工程名称：" + (a.value[7] || '/') + '</font>'
|
|
|
|
|
|
|
|
|
|
|
|
return relVal
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
xAxis: [
|
|
|
|
|
|
{
|
|
|
|
|
|
type: 'log',
|
|
|
|
|
|
min: 0.001,
|
|
|
|
|
|
max: 1000,
|
|
|
|
|
|
splitLine: {
|
|
|
|
|
|
show: false
|
|
|
|
|
|
},
|
|
|
|
|
|
name: 's'
|
|
|
|
|
|
}
|
|
|
|
|
|
],
|
|
|
|
|
|
yAxis: [
|
|
|
|
|
|
{
|
|
|
|
|
|
type: 'value',
|
|
|
|
|
|
splitNumber: 10,
|
|
|
|
|
|
minInterval: 3,
|
|
|
|
|
|
name: '%'
|
|
|
|
|
|
}
|
|
|
|
|
|
],
|
|
|
|
|
|
color: ['#FF8C00', '#00BFFF', 'green', 'red'],
|
|
|
|
|
|
options: {
|
|
|
|
|
|
dataZoom: null,
|
|
|
|
|
|
series: [
|
|
|
|
|
|
{
|
|
|
|
|
|
name: '上限',
|
|
|
|
|
|
type: 'line',
|
|
|
|
|
|
data: [
|
|
|
|
|
|
[0.001, 200],
|
|
|
|
|
|
[0.003, 140],
|
|
|
|
|
|
[0.003, 120],
|
|
|
|
|
|
[0.5, 120],
|
|
|
|
|
|
[0.5, 110],
|
|
|
|
|
|
[10, 110],
|
|
|
|
|
|
[1000, 110]
|
|
|
|
|
|
],
|
|
|
|
|
|
showSymbol: false,
|
|
|
|
|
|
tooltips: {
|
|
|
|
|
|
show: false
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
name: '下限',
|
|
|
|
|
|
type: 'line',
|
|
|
|
|
|
data: [
|
|
|
|
|
|
[0.02, 0],
|
|
|
|
|
|
[0.02, 70],
|
|
|
|
|
|
[0.5, 70],
|
|
|
|
|
|
[0.5, 80],
|
|
|
|
|
|
[10, 80],
|
|
|
|
|
|
[10, 90],
|
|
|
|
|
|
[1000, 90]
|
|
|
|
|
|
],
|
|
|
|
|
|
showSymbol: false,
|
|
|
|
|
|
tooltips: {
|
|
|
|
|
|
show: false
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
name: '可容忍事件',
|
|
|
|
|
|
type: 'scatter',
|
|
|
|
|
|
symbol: 'circle',
|
|
|
|
|
|
symbolSize: 8,
|
|
|
|
|
|
data: gongData.pointI,
|
|
|
|
|
|
legendSymbol: 'circle'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
name: '不可容忍事件',
|
|
|
|
|
|
type: 'scatter',
|
|
|
|
|
|
symbol: 'circle',
|
|
|
|
|
|
symbolSize: 8,
|
|
|
|
|
|
data: gongData.pointIun,
|
|
|
|
|
|
legendSymbol: 'rect'
|
|
|
|
|
|
}
|
|
|
|
|
|
]
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
const tableRef = ref()
|
|
|
|
|
|
provide('tableRef', tableRef)
|
|
|
|
|
|
provide('tableStore', tableStore)
|
|
|
|
|
|
|
|
|
|
|
|
const setTime = () => {
|
|
|
|
|
|
const time = getTime(
|
|
|
|
|
|
(TableHeaderRef.value?.datePickerRef.interval || prop.interval) ?? 0,
|
|
|
|
|
|
prop.timeKey,
|
|
|
|
|
|
fullscreen.value
|
|
|
|
|
|
? [tableStore.table.params.searchBeginTime, tableStore.table.params.searchEndTime]
|
|
|
|
|
|
: prop.timeValue
|
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
|
|
if (Array.isArray(time)) {
|
|
|
|
|
|
tableStore.table.params.searchBeginTime = time[0]
|
|
|
|
|
|
tableStore.table.params.searchEndTime = time[1]
|
|
|
|
|
|
TableHeaderRef.value?.setInterval(time[2] - 0)
|
|
|
|
|
|
TableHeaderRef.value?.setTimeInterval([time[0], time[1]])
|
|
|
|
|
|
} else {
|
|
|
|
|
|
console.warn('获取时间失败，time 不是一个有效数组')
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function gongfunction(arr: any) {
|
|
|
|
|
|
let standI = 0
|
|
|
|
|
|
let unstandI = 0
|
|
|
|
|
|
let pointIun: any[] = []
|
|
|
|
|
|
let pointI: any[] = []
|
|
|
|
|
|
const total = arr.length
|
|
|
|
|
|
|
|
|
|
|
|
if (total > 0) {
|
|
|
|
|
|
for (let i = 0; i < arr.length; i++) {
|
|
|
|
|
|
const xx = arr[i].persistTime
|
|
|
|
|
|
const yy = arr[i].eventValue
|
|
|
|
|
|
const time = arr[i].time
|
|
|
|
|
|
const eventId = arr[i].eventId
|
|
|
|
|
|
const lineName = arr[i].lineName
|
|
|
|
|
|
let equipmentName = arr[i].equipmentName
|
|
|
|
|
|
let projectName = arr[i].projectName
|
|
|
|
|
|
let engineeringName = arr[i].engineeringName
|
|
|
|
|
|
// let index =arr[i].eventDetailIndex;
|
|
|
|
|
|
const point = [xx, yy, time, eventId, lineName, equipmentName, projectName, engineeringName]
|
|
|
|
|
|
|
|
|
|
|
|
if (xx <= 0.003) {
|
|
|
|
|
|
const line = 230 - 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' } }
|
|
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
|
standI,
|
|
|
|
|
|
unstandI,
|
|
|
|
|
|
pointI,
|
|
|
|
|
|
pointIun
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
onMounted(() => {
|
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
|
tableStore.index()
|
|
|
|
|
|
}, 100)
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
// 点击事件处理函数
|
|
|
|
|
|
const handleChartClick = (params: any) => {
|
|
|
|
|
|
if (params.seriesName === '可容忍事件') {
|
|
|
|
|
|
// 处理可容忍事件点击
|
|
|
|
|
|
dialogTitle.value = '可容忍事件波形分析'
|
|
|
|
|
|
handleTolerableEventClick(params)
|
|
|
|
|
|
} else if (params.seriesName === '不可容忍事件') {
|
|
|
|
|
|
dialogTitle.value = '不可容忍事件波形分析'
|
|
|
|
|
|
// 处理不可容忍事件点击
|
|
|
|
|
|
// ElMessage.info(`点击了不可容忍事件: 持续时间${params.value[0]}s, 幅值${params.value[1].toFixed(2)}%`)
|
|
|
|
|
|
handleTolerableEventClick(params)
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// 可容忍事件点击处理函数
|
|
|
|
|
|
const handleTolerableEventClick = async (row: any) => {
|
|
|
|
|
|
loading.value = true
|
|
|
|
|
|
nextTick(() => {
|
|
|
|
|
|
if (waveFormAnalysisRef.value) {
|
|
|
|
|
|
//waveFormAnalysisRef.value.setHeight(false, 360)
|
|
|
|
|
|
// waveFormAnalysisRef.value.setHeight(999, 130, 1.6666666)
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
const messageInstance = ElMessage.info(`正在加载，请稍等...`)
|
|
|
|
|
|
await analyseWave(row.value[3]) //eventId
|
|
|
|
|
|
.then(res => {
|
|
|
|
|
|
row.loading1 = false
|
|
|
|
|
|
if (res != undefined) {
|
|
|
|
|
|
boxoList.value = {
|
|
|
|
|
|
persistTime: row.value[0], //持续时间
|
|
|
|
|
|
featureAmplitude: (row.value[1] / 100), //残余电压
|
|
|
|
|
|
startTime: row.value[2], //时间
|
2026-06-16 08:34:45 +08:00
|
|
|
|
lineName: row.value[4], //监测点名称
|
|
|
|
|
|
engineeringName: row.value[5],
|
2026-06-11 20:27:37 +08:00
|
|
|
|
}
|
|
|
|
|
|
boxoList.value.systemType = 'YPT'
|
|
|
|
|
|
wp.value = res.data
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
isWaveCharts.value = true
|
|
|
|
|
|
loading.value = false
|
|
|
|
|
|
})
|
|
|
|
|
|
.catch(() => {
|
|
|
|
|
|
messageInstance.close()
|
|
|
|
|
|
row.loading1 = false
|
|
|
|
|
|
loading.value = false
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
nextTick(() => {
|
|
|
|
|
|
waveFormAnalysisRef.value && waveFormAnalysisRef.value.setHeight(999, 130, 1.6666666)
|
|
|
|
|
|
waveFormAnalysisRef.value && waveFormAnalysisRef.value.getWpData(wp.value, boxoList.value, true)
|
|
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// 不可容忍事件点击处理函数
|
|
|
|
|
|
const handleIntolerableEventClick = (params: any) => {
|
|
|
|
|
|
console.log('不可容忍事件详情:', params)
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
watch(
|
|
|
|
|
|
() => prop.timeKey,
|
|
|
|
|
|
val => {
|
|
|
|
|
|
tableStore.index()
|
|
|
|
|
|
}
|
|
|
|
|
|
)
|
|
|
|
|
|
watch(
|
|
|
|
|
|
() => prop.timeValue,
|
|
|
|
|
|
(newVal, oldVal) => {
|
|
|
|
|
|
// 当外部时间值变化时，更新表格的时间参数
|
|
|
|
|
|
if (newVal && (!oldVal || newVal[0] !== oldVal[0] || newVal[1] !== oldVal[1])) {
|
|
|
|
|
|
tableStore.table.params.searchBeginTime = newVal[0]
|
|
|
|
|
|
tableStore.table.params.searchEndTime = newVal[1]
|
|
|
|
|
|
tableStore.index()
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
deep: true
|
|
|
|
|
|
}
|
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
|
|
const addMenu = () => { }
|
|
|
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped></style>
|
