Compare commits
2 Commits
6303bd1e2c
...
5580d0618e
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
5580d0618e | ||
|
|
c1ebcfed6f |
@@ -70,6 +70,14 @@ export function limitExtentData(data: any) {
|
|||||||
data: data
|
data: data
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
// 指标日趋势图数据
|
||||||
|
export function limitExtentDayData(data: any) {
|
||||||
|
return request({
|
||||||
|
url: '/harmonic-boot/limitRateDetailD/limitExtentDayData',
|
||||||
|
method: 'post',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -12,12 +12,20 @@
|
|||||||
ref="chartRef"
|
ref="chartRef"
|
||||||
class="tall"
|
class="tall"
|
||||||
:options="echartList"
|
:options="echartList"
|
||||||
:style="{ width: prop.width, height: `calc(${prop.height} - 80px - ${headerHeight}px + ${fullscreen ? 0 : 56}px)` }"
|
:style="{
|
||||||
|
width: prop.width,
|
||||||
|
height: `calc(${prop.height} - 80px - ${headerHeight}px + ${fullscreen ? 0 : 56}px)`
|
||||||
|
}"
|
||||||
@chart-click="handleChartClick"
|
@chart-click="handleChartClick"
|
||||||
/>
|
/>
|
||||||
<el-dialog v-model="isWaveCharts" draggable title="瞬时/RMS波形" append-to-body width="70%">
|
<el-dialog v-model="isWaveCharts" draggable title="瞬时/RMS波形" append-to-body width="70%">
|
||||||
<waveFormAnalysis v-loading="loading" v-if="isWaveCharts" ref="waveFormAnalysisRef"
|
<waveFormAnalysis
|
||||||
@handleHideCharts="isWaveCharts = false" :wp="wp" />
|
v-loading="loading"
|
||||||
|
v-if="isWaveCharts"
|
||||||
|
ref="waveFormAnalysisRef"
|
||||||
|
@handleHideCharts="isWaveCharts = false"
|
||||||
|
:wp="wp"
|
||||||
|
/>
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@@ -27,10 +35,11 @@ import TableStore from '@/utils/tableStore'
|
|||||||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||||
import { getTimeOfTheMonth } from '@/utils/formatTime'
|
import { getTimeOfTheMonth } from '@/utils/formatTime'
|
||||||
import waveFormAnalysis from '@/views/govern/device/control/tabs/components/waveFormAnalysis.vue';
|
import waveFormAnalysis from '@/views/govern/device/control/tabs/components/waveFormAnalysis.vue'
|
||||||
import TableHeader from '@/components/table/header/index.vue'
|
import TableHeader from '@/components/table/header/index.vue'
|
||||||
import { useRoute } from 'vue-router'
|
import { useRoute } from 'vue-router'
|
||||||
import { useTimeCacheStore } from '@/stores/timeCache'
|
import { useTimeCacheStore } from '@/stores/timeCache'
|
||||||
|
import { analyseWave } from '@/api/common'
|
||||||
|
|
||||||
const prop = defineProps({
|
const prop = defineProps({
|
||||||
w: { type: String },
|
w: { type: String },
|
||||||
@@ -79,7 +88,10 @@ const loading = ref(false)
|
|||||||
|
|
||||||
const wp = ref({})
|
const wp = ref({})
|
||||||
|
|
||||||
const OverLimitDetailsRef = ref()
|
const boxoList: any = ref({})
|
||||||
|
|
||||||
|
const waveFormAnalysisRef: any = ref(null)
|
||||||
|
|
||||||
const data = reactive({
|
const data = reactive({
|
||||||
name: '事件个数',
|
name: '事件个数',
|
||||||
gs: 0,
|
gs: 0,
|
||||||
@@ -93,7 +105,7 @@ const tableStore: any = new TableStore({
|
|||||||
showPage: false,
|
showPage: false,
|
||||||
|
|
||||||
column: [],
|
column: [],
|
||||||
beforeSearchFun: () => {
|
beforeSearchFun: () => {
|
||||||
// 尝试从缓存获取时间值
|
// 尝试从缓存获取时间值
|
||||||
let beginTime, endTime
|
let beginTime, endTime
|
||||||
|
|
||||||
@@ -419,7 +431,6 @@ onMounted(() => {
|
|||||||
|
|
||||||
// 点击事件处理函数
|
// 点击事件处理函数
|
||||||
const handleChartClick = (params: any) => {
|
const handleChartClick = (params: any) => {
|
||||||
|
|
||||||
if (params.seriesName === '可容忍事件') {
|
if (params.seriesName === '可容忍事件') {
|
||||||
// 处理可容忍事件点击
|
// 处理可容忍事件点击
|
||||||
ElMessage.info(`点击了可容忍事件: 持续时间${params.value[0]}s, 幅值${params.value[1].toFixed(2)}%`)
|
ElMessage.info(`点击了可容忍事件: 持续时间${params.value[0]}s, 幅值${params.value[1].toFixed(2)}%`)
|
||||||
@@ -432,9 +443,30 @@ const handleChartClick = (params: any) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// 可容忍事件点击处理函数
|
// 可容忍事件点击处理函数
|
||||||
const handleTolerableEventClick = (params: any) => {
|
const handleTolerableEventClick = async (row: any) => {
|
||||||
console.log('可容忍事件详情:', params)
|
console.log('可容忍事件详情:', row)
|
||||||
isWaveCharts.value = true
|
isWaveCharts.value = true
|
||||||
|
loading.value = true
|
||||||
|
isWaveCharts.value = true
|
||||||
|
await analyseWave(row.id)
|
||||||
|
.then(res => {
|
||||||
|
row.loading1 = false
|
||||||
|
if (res != undefined) {
|
||||||
|
boxoList.value = row
|
||||||
|
boxoList.value.featureAmplitude = row.evtParamVVaDepth != '-' ? row.evtParamVVaDepth - 0 : null
|
||||||
|
boxoList.value.systemType = 'WX'
|
||||||
|
wp.value = res.data
|
||||||
|
}
|
||||||
|
loading.value = false
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
row.loading1 = false
|
||||||
|
loading.value = false
|
||||||
|
})
|
||||||
|
|
||||||
|
nextTick(() => {
|
||||||
|
waveFormAnalysisRef.value && waveFormAnalysisRef.value.getWpData(wp.value, boxoList.value, true)
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
// 不可容忍事件点击处理函数
|
// 不可容忍事件点击处理函数
|
||||||
|
|||||||
@@ -1,11 +1,9 @@
|
|||||||
<template>
|
<template>
|
||||||
<!-- 指标日趋势图 -->
|
<!-- 指标日趋势图 -->
|
||||||
<el-dialog draggable title="指标日趋势图" v-model="dialogVisible" append-to-body width="70%">
|
<el-dialog draggable :title="dialogTitle" v-model="dialogVisible" append-to-body width="70%">
|
||||||
<my-echart
|
<div :style="pageHeight">
|
||||||
class="tall"
|
<my-echart class="tall" :options="echartList" style="width: 98%" />
|
||||||
:options="echartList"
|
</div>
|
||||||
style="width: 98%; height: 320px"
|
|
||||||
/>
|
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -13,6 +11,9 @@
|
|||||||
import { ref, onMounted, provide, reactive, watch, h } from 'vue'
|
import { ref, onMounted, provide, reactive, watch, h } from 'vue'
|
||||||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||||
import { useConfig } from '@/stores/config'
|
import { useConfig } from '@/stores/config'
|
||||||
|
import { mainHeight } from '@/utils/layout'
|
||||||
|
import { limitExtentDayData } from '@/api/harmonic-boot/cockpit/cockpit'
|
||||||
|
|
||||||
const prop = defineProps({
|
const prop = defineProps({
|
||||||
width: { type: String },
|
width: { type: String },
|
||||||
height: { type: String },
|
height: { type: String },
|
||||||
@@ -20,70 +21,130 @@ const prop = defineProps({
|
|||||||
timeValue: { type: Object }
|
timeValue: { type: Object }
|
||||||
})
|
})
|
||||||
|
|
||||||
|
const pageHeight = ref(mainHeight(332))
|
||||||
|
|
||||||
const dialogVisible: any = ref(false)
|
const dialogVisible: any = ref(false)
|
||||||
|
|
||||||
|
const dialogTitle = ref('')
|
||||||
|
|
||||||
const config = useConfig()
|
const config = useConfig()
|
||||||
|
|
||||||
const echartList = ref({
|
const dialogText = ref('')
|
||||||
title: {
|
|
||||||
text: '指标日趋势图',
|
const echartList = ref()
|
||||||
},
|
|
||||||
xAxis: {
|
const init = () => {
|
||||||
type: 'category',
|
echartList.value = {
|
||||||
data: [
|
title: {
|
||||||
'00:00', '01:00', '02:00', '03:00', '04:00', '05:00',
|
text: dialogText.value,
|
||||||
'06:00', '07:00', '08:00', '09:00', '10:00', '11:00',
|
textStyle: {
|
||||||
'12:00', '13:00', '14:00', '15:00', '16:00', '17:00',
|
fontSize: 14,
|
||||||
'18:00', '19:00', '20:00', '21:00', '22:00', '23:00'
|
rich: {
|
||||||
],
|
lineName: {
|
||||||
axisLabel: {
|
color: '#333',
|
||||||
interval: 1
|
fontSize: 14
|
||||||
}
|
},
|
||||||
},
|
timeLabel: {
|
||||||
yAxis: {
|
color: '#333',
|
||||||
type: 'value',
|
fontSize: 14,
|
||||||
name: '数值'
|
padding: [0, 0, 0, 10]
|
||||||
},
|
},
|
||||||
grid: {
|
name: {
|
||||||
left: '10px',
|
color: '#333',
|
||||||
right: '20px',
|
fontSize: 14,
|
||||||
containLabel: true
|
padding: [0, 0, 0, 10]
|
||||||
},
|
|
||||||
options: {
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: '指标值',
|
|
||||||
type: 'line',
|
|
||||||
showSymbol: true,
|
|
||||||
smooth: true,
|
|
||||||
data: [
|
|
||||||
10, 12, 15, 18, 22, 28,
|
|
||||||
35, 45, 60, 75, 88, 95,
|
|
||||||
100, 98, 90, 80, 70, 60,
|
|
||||||
50, 40, 30, 25, 20, 15
|
|
||||||
],
|
|
||||||
itemStyle: {
|
|
||||||
normal: {
|
|
||||||
color: config.layout.elementUiPrimary[0]
|
|
||||||
}
|
}
|
||||||
},
|
|
||||||
areaStyle: {
|
|
||||||
opacity: 0.3
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
]
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: []
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value',
|
||||||
|
name: '数值'
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: '1%',
|
||||||
|
right: '45px',
|
||||||
|
bottom: '40px',
|
||||||
|
top: '15%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
dataZoom: [
|
||||||
|
{
|
||||||
|
type: 'inside',
|
||||||
|
height: 13,
|
||||||
|
start: 0,
|
||||||
|
bottom: '20px',
|
||||||
|
end: 100
|
||||||
|
},
|
||||||
|
{
|
||||||
|
start: 0,
|
||||||
|
height: 13,
|
||||||
|
bottom: '20px',
|
||||||
|
end: 100
|
||||||
|
}
|
||||||
|
],
|
||||||
|
options: {
|
||||||
|
series: []
|
||||||
|
}
|
||||||
}
|
}
|
||||||
})
|
}
|
||||||
|
|
||||||
|
const initData = async (row: any) => {
|
||||||
|
limitExtentDayData({ code: row.code, lineId: row.lineId, time: row.time }).then(res => {
|
||||||
|
if (res.data && res.data.length > 0) {
|
||||||
|
// 重新初始化图表
|
||||||
|
init()
|
||||||
|
|
||||||
onMounted(() => {
|
// 从第一条数据中提取时间作为x轴数据
|
||||||
|
const firstItem = res.data[0]
|
||||||
})
|
const xAxisData = firstItem.time.split(',')
|
||||||
|
|
||||||
|
// 定义相位颜色映射
|
||||||
|
const phaseColors: any = {
|
||||||
|
A: '#DAA520',
|
||||||
|
B: '#2E8B57',
|
||||||
|
C: '#A52a2a'
|
||||||
|
}
|
||||||
|
|
||||||
|
// 处理每条相位数据
|
||||||
|
const seriesData = res.data.map((item: any) => {
|
||||||
|
const values = item.value.split(',').map((v: string) => parseFloat(v) || 0)
|
||||||
|
|
||||||
|
return {
|
||||||
|
name: `${item.phasic}相`,
|
||||||
|
type: 'line',
|
||||||
|
showSymbol: true,
|
||||||
|
smooth: true,
|
||||||
|
data: values,
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
// 根据相位设置对应颜色
|
||||||
|
color: phaseColors[item.phasic] || config.layout.elementUiPrimary[0]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// 更新图表配置
|
||||||
|
echartList.value.xAxis.data = xAxisData
|
||||||
|
echartList.value.options.series = seriesData
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {})
|
||||||
|
|
||||||
const open = async (row: any) => {
|
const open = async (row: any) => {
|
||||||
dialogVisible.value = true
|
dialogVisible.value = true
|
||||||
|
dialogTitle.value = row.name + '日趋势图'
|
||||||
|
dialogText.value = `{lineName|${row.lineName}}{timeLabel|${row.time}}{name|${row.name}日趋势图}`
|
||||||
|
nextTick(() => {
|
||||||
|
initData(row)
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
defineExpose({ open })
|
defineExpose({ open })
|
||||||
|
|||||||
@@ -66,34 +66,6 @@ const fullscreen = computed(() => {
|
|||||||
|
|
||||||
const echartList = ref()
|
const echartList = ref()
|
||||||
|
|
||||||
// const echartList = ref({
|
|
||||||
// title: {
|
|
||||||
// text: '指标越限严重度'
|
|
||||||
// },
|
|
||||||
|
|
||||||
// xAxis: {
|
|
||||||
// data: ['闪变', '谐波电压', '谐波电流', '电压偏差', '三相不平衡']
|
|
||||||
// },
|
|
||||||
|
|
||||||
// yAxis: {
|
|
||||||
// name: '%', // 给X轴加单位
|
|
||||||
// interval: 20
|
|
||||||
// },
|
|
||||||
// grid: {
|
|
||||||
// left: '10px',
|
|
||||||
// right: '20px'
|
|
||||||
// },
|
|
||||||
// options: {
|
|
||||||
// series: [
|
|
||||||
// {
|
|
||||||
// type: 'bar',
|
|
||||||
// name: '越限占比',
|
|
||||||
// data: [0, 7.5, 36, 0, 80],
|
|
||||||
// barMaxWidth: 30
|
|
||||||
// }
|
|
||||||
// ]
|
|
||||||
// }
|
|
||||||
// })
|
|
||||||
const dailyTrendChartRef = ref()
|
const dailyTrendChartRef = ref()
|
||||||
const tableStore: any = new TableStore({
|
const tableStore: any = new TableStore({
|
||||||
url: '/harmonic-boot/limitRateDetailD/limitExtentData',
|
url: '/harmonic-boot/limitRateDetailD/limitExtentData',
|
||||||
@@ -122,7 +94,7 @@ const tableStore: any = new TableStore({
|
|||||||
minWidth: '60',
|
minWidth: '60',
|
||||||
render: 'customTemplate',
|
render: 'customTemplate',
|
||||||
customTemplate: (row: any) => {
|
customTemplate: (row: any) => {
|
||||||
return `<span style='cursor: pointer;text-decoration: underline;'>${row.type}</span>`
|
return `<span style='cursor: pointer;text-decoration: underline;'>${row.maxValue}</span>`
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@@ -138,12 +110,32 @@ const tableStore: any = new TableStore({
|
|||||||
{
|
{
|
||||||
title: '发生日期',
|
title: '发生日期',
|
||||||
field: 'time',
|
field: 'time',
|
||||||
minWidth: '100'
|
minWidth: '60',
|
||||||
|
render: 'customTemplate',
|
||||||
|
customTemplate: (row: any) => {
|
||||||
|
if (
|
||||||
|
row.time !== null &&
|
||||||
|
row.time !== undefined &&
|
||||||
|
row.time !== ''
|
||||||
|
) {
|
||||||
|
return `<span>${row.time}</span>`
|
||||||
|
} else {
|
||||||
|
return `<span>/</span>`
|
||||||
|
}
|
||||||
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '越限最高监测点',
|
title: '越限最高监测点',
|
||||||
field: 'lineName',
|
field: 'lineName',
|
||||||
minWidth: '90'
|
minWidth: '90',
|
||||||
|
render: 'customTemplate',
|
||||||
|
customTemplate: (row: any) => {
|
||||||
|
if (row.lineName !== null && row.lineName !== undefined && row.lineName !== '') {
|
||||||
|
return `<span>${row.lineName}</span>`
|
||||||
|
} else {
|
||||||
|
return `<span>/</span>`
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
beforeSearchFun: () => {
|
beforeSearchFun: () => {
|
||||||
@@ -166,12 +158,12 @@ const tableStore: any = new TableStore({
|
|||||||
// 定义 x 轴标签顺序
|
// 定义 x 轴标签顺序
|
||||||
const xAxisLabels = ['闪变', '谐波电压', '谐波电流', '电压偏差', '三相不平衡']
|
const xAxisLabels = ['闪变', '谐波电压', '谐波电流', '电压偏差', '三相不平衡']
|
||||||
|
|
||||||
// 根据指标名称顺序提取对应的 maxValue 数据
|
// 根据指标名称顺序提取对应的 extent 数据
|
||||||
const chartData = xAxisLabels.map(label => {
|
const chartData = xAxisLabels.map(label => {
|
||||||
// 在表格数据中查找对应指标名称的数据项
|
// 在表格数据中查找对应指标名称的数据项
|
||||||
const item = tableStore.table.data.find((row: any) => row.name === label)
|
const item = tableStore.table.data.find((row: any) => row.name === label)
|
||||||
// 如果找到对应项,则返回 maxValue 值,否则返回 0
|
// 如果找到对应项,则返回 extent 值,否则返回 0
|
||||||
return item ? parseFloat(item.maxValue) || 0 : 0
|
return item ? item.extent || 0 : 0
|
||||||
})
|
})
|
||||||
echartList.value = {
|
echartList.value = {
|
||||||
title: {
|
title: {
|
||||||
@@ -183,8 +175,8 @@ const tableStore: any = new TableStore({
|
|||||||
},
|
},
|
||||||
|
|
||||||
yAxis: {
|
yAxis: {
|
||||||
name: '%', // 给X轴加单位
|
name: '%' // 给X轴加单位
|
||||||
interval: 20
|
// interval: 20
|
||||||
},
|
},
|
||||||
grid: {
|
grid: {
|
||||||
left: '10px',
|
left: '10px',
|
||||||
@@ -211,8 +203,7 @@ provide('tableStore', tableStore)
|
|||||||
|
|
||||||
// 点击行
|
// 点击行
|
||||||
const cellClickEvent = ({ row, column }: any) => {
|
const cellClickEvent = ({ row, column }: any) => {
|
||||||
if (column.field != 'name') {
|
if (column.field == 'maxValue' && row.lineId) {
|
||||||
console.log(row)
|
|
||||||
dailyTrendChartRef.value.open(row)
|
dailyTrendChartRef.value.open(row)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<el-dialog draggable title="谐波电压/电流含有率" v-model="dialogVisible" append-to-body width="70%">
|
<el-dialog draggable title="趋势图" v-model="dialogVisible" append-to-body width="70%">
|
||||||
<!-- 总体指标占比详情谐波含有率 -->
|
<!-- 总体指标占比详情谐波含有率 -->
|
||||||
<div>
|
<div>
|
||||||
<TableHeader ref="tableHeaderRef" :showSearch="false" @selectChange="selectChange">
|
<TableHeader ref="tableHeaderRef" :showSearch="false" @selectChange="selectChange">
|
||||||
|
|||||||
@@ -11,7 +11,7 @@
|
|||||||
<Table
|
<Table
|
||||||
ref="tableRef"
|
ref="tableRef"
|
||||||
@cell-click="cellClickEvent"
|
@cell-click="cellClickEvent"
|
||||||
:height="`calc(${prop.height} - ${headerHeight}px + ${fullscreen ? -50 : 56}px )`"
|
:height="`calc(${prop.height} - ${headerHeight}px + ${fullscreen ? -58 : 56}px )`"
|
||||||
></Table>
|
></Table>
|
||||||
<!-- 指标越限详情 -->
|
<!-- 指标越限详情 -->
|
||||||
<OverLimitDetails ref="OverLimitDetailsRef" />
|
<OverLimitDetails ref="OverLimitDetailsRef" />
|
||||||
|
|||||||
Reference in New Issue
Block a user