556 lines
20 KiB
Vue
556 lines
20 KiB
Vue
<template>
|
||
<div class="device-control">
|
||
<!--趋势对比 -->
|
||
<div v-show="fullscreen">
|
||
<!-- <PointTree :height="flag ? 106 : 50" @node-click="nodeClick" @pointTypeChange="pointTypeChange"></PointTree> -->
|
||
<APFTree :height="flag ? 126 : 70" @node-click="handleNodeClick" @init="handleNodeClick"></APFTree>
|
||
</div>
|
||
<div>
|
||
|
||
<TableHeader datePicker ref="TableHeaderRef" :timeKeyList="prop.timeKey" :showReset="false"
|
||
@selectChange="selectChange" v-if="fullscreen">
|
||
<template v-slot:select>
|
||
<!-- <el-form-item label="监测对象">
|
||
<el-select filterable v-model="tableStore.table.params.sensitiveUserId" placeholder="请选择监测对象"
|
||
clearable>
|
||
<el-option v-for="item in idList" :key="item.id" :label="item.name" :value="item.id" />
|
||
</el-select>
|
||
</el-form-item> -->
|
||
<!-- <el-form-item label="监测点名称">
|
||
<el-select v-model="tableStore.table.params.lineId" placeholder="请选择监测点名称" clearable>
|
||
<el-option
|
||
v-for="item in lineIdList"
|
||
:key="item.lineId"
|
||
:label="item.name"
|
||
:value="item.lineId"
|
||
/>
|
||
</el-select>
|
||
</el-form-item> -->
|
||
<el-form-item label="电能质量指标">
|
||
<el-select v-model="tableStore.table.params.indicator" placeholder="请选择电能质量指标" clearable>
|
||
<el-option v-for="item in indicatorList" :key="item.id" :label="item.name"
|
||
:value="item.id" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-radio-group v-model="tableStore.table.params.dataLevel" @change="tableStore.index()">
|
||
<el-radio-button label="一次值" value="Primary" />
|
||
<el-radio-button label="二次值" value="Secondary" />
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<el-form-item label="统计类型">
|
||
<el-select style="min-width: 120px !important" placeholder="请选择"
|
||
v-model="tableStore.table.params.valueType">
|
||
<el-option value="max" label="最大值"></el-option>
|
||
<el-option value="min" label="最小值"></el-option>
|
||
<el-option value="avg" label="平均值"></el-option>
|
||
<el-option value="cp95" label="cp95"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<div v-if="shouldShowHarmonicCount()"
|
||
style="display: flex; color: var(--el-text-color-regular)">
|
||
<span style="width: 160px">{{ getHarmonicTypeName() }}谐波次数</span>
|
||
<el-select v-model="tableStore.table.params.harmonicCount" placeholder="请选择谐波次数"
|
||
style="min-width: 80px !important">
|
||
<el-option v-for="num in harmonicCountOptions" :key="num" :label="num"
|
||
:value="num"></el-option>
|
||
</el-select>
|
||
</div>
|
||
</el-form-item>
|
||
</template>
|
||
</TableHeader>
|
||
<my-echart v-loading="tableStore.table.loading" class="tall" :options="echartList" :style="{
|
||
width: `calc(${prop.width} - ${fullscreen ? 290 : 0}px)`,
|
||
height: `calc(${prop.height} - ${headerHeight}px + ${fullscreen ? 0 : 56}px)`
|
||
}" />
|
||
</div>
|
||
<!-- <el-empty description="暂无数据" /> -->
|
||
</div>
|
||
</template>
|
||
<script setup lang="ts">
|
||
import { ref, onMounted, provide, reactive, watch, h, computed, nextTick } from 'vue'
|
||
import TableStore from '@/utils/tableStore'
|
||
import TableHeader from '@/components/table/header/index.vue'
|
||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||
import { useConfig } from '@/stores/config'
|
||
import { queryByCode, queryCsDictTree } from '@/api/system-boot/dictTree'
|
||
import { getListByIds } from '@/api/harmonic-boot/cockpit/cockpit'
|
||
import { getTime } from '@/utils/formatTime'
|
||
import { yMethod, exportSeriesCSV, completeTimeSeries } from '@/utils/echartMethod'
|
||
import APFTree from '@/components/tree/govern/APFTree.vue'
|
||
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 },
|
||
flag: { type: Boolean }
|
||
})
|
||
|
||
const TableHeaderRef = ref()
|
||
const config = useConfig()
|
||
|
||
// 计算是否全屏展示
|
||
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
|
||
}
|
||
})
|
||
// 添加谐波次数选项（2-50）
|
||
const harmonicCountOptions = ref(Array.from({ length: 49 }, (_, i) => i + 2))
|
||
|
||
const indicatorList = ref()
|
||
|
||
const echartList = ref()
|
||
const timeControl = ref(false)
|
||
|
||
const headerHeight = ref(57)
|
||
|
||
// 监测对象
|
||
const idList = ref([])
|
||
|
||
// 监测对象
|
||
const initListByIds = () => {
|
||
getListByIds({}).then((res: any) => {
|
||
if (res.data?.length > 0) {
|
||
idList.value = res.data
|
||
|
||
} else {
|
||
tableStore.index()
|
||
}
|
||
})
|
||
}
|
||
|
||
|
||
const exportSubjectName = ref('')
|
||
|
||
const handleNodeClick = async (data: any) => {
|
||
|
||
|
||
if (data?.level == 3 || data?.level == 2) {
|
||
exportSubjectName.value = data.name || ''
|
||
tableStore.exportName = { subject: exportSubjectName.value, feature: '趋势对比' }
|
||
tableStore.table.params.sensitiveUserId = data.id
|
||
await tableStore.index()
|
||
} else {
|
||
tableStore.table.loading = false
|
||
}
|
||
}
|
||
|
||
|
||
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 initCode = () => {
|
||
queryByCode('steady_state_limit_trend').then(res => {
|
||
queryCsDictTree(res.data.id).then(item => {
|
||
indicatorList.value = item.data
|
||
tableStore.table.params.indicator = indicatorList.value[0].id
|
||
nextTick(() => {
|
||
// tableStore.index()
|
||
})
|
||
})
|
||
})
|
||
}
|
||
// 治理前
|
||
const chartsListBefore = ref()
|
||
// 治理后
|
||
const chartsListAfter = ref()
|
||
|
||
const setEchart = () => {
|
||
// 从接口数据中提取治理前和治理后的数据
|
||
const beforeData = chartsListBefore.value || []
|
||
const afterData = chartsListAfter.value || []
|
||
|
||
// 按相位分组数据
|
||
const beforeGroupedByPhase: any = {}
|
||
const afterGroupedByPhase: any = {}
|
||
|
||
// 处理治理前数据
|
||
beforeData.forEach((item: any) => {
|
||
const phase = item.phase || 'default'
|
||
if (!beforeGroupedByPhase[phase]) {
|
||
beforeGroupedByPhase[phase] = []
|
||
}
|
||
beforeGroupedByPhase[phase].push([item.time, item.statisticalData, item.unit, 'solid'])
|
||
})
|
||
|
||
// 处理治理后数据
|
||
afterData.forEach((item: any) => {
|
||
const phase = item.phase || 'default'
|
||
if (!afterGroupedByPhase[phase]) {
|
||
afterGroupedByPhase[phase] = []
|
||
}
|
||
afterGroupedByPhase[phase].push([item.time, item.statisticalData, item.unit, 'dashed'])
|
||
})
|
||
|
||
// 构建系列数据
|
||
const series: any = []
|
||
|
||
// 定义相位颜色
|
||
const phaseColors: any = {
|
||
A: '#DAA520',
|
||
B: '#2E8B57',
|
||
C: '#A52a2a'
|
||
}
|
||
|
||
// 添加治理前数据系列（实线）
|
||
Object.keys(beforeGroupedByPhase).forEach(phase => {
|
||
const phaseName = phase === 'default' ? '' : `${phase}相`
|
||
const color = phaseColors[phase] || config.layout.elementUiPrimary[0]
|
||
|
||
series.push({
|
||
name: `${phaseName}_治理前`,
|
||
type: 'line',
|
||
showSymbol: false,
|
||
smooth: true,
|
||
symbol: 'none',
|
||
data: beforeGroupedByPhase[phase],
|
||
itemStyle: {
|
||
normal: {
|
||
color: color
|
||
}
|
||
},
|
||
lineStyle: {
|
||
type: 'solid', // 实线
|
||
},
|
||
yAxisIndex: 0
|
||
})
|
||
})
|
||
|
||
// 添加治理后数据系列（虚线）
|
||
Object.keys(afterGroupedByPhase).forEach(phase => {
|
||
const phaseName = phase === 'default' ? '' : `${phase}相`
|
||
const color = phaseColors[phase] || config.layout.elementUiPrimary[0]
|
||
|
||
series.push({
|
||
name: `${phaseName}_治理后`,
|
||
type: 'line',
|
||
showSymbol: false,
|
||
smooth: true,
|
||
symbol: 'none',
|
||
data: timeControl.value ? completeTimeSeries(afterGroupedByPhase[phase]) : afterGroupedByPhase[phase],
|
||
itemStyle: {
|
||
normal: {
|
||
color: color
|
||
}
|
||
},
|
||
lineStyle: {
|
||
type: 'dashed', // 虚线
|
||
},
|
||
yAxisIndex: 0
|
||
})
|
||
})
|
||
|
||
// 获取指标名称用于图表标题
|
||
let titleText = '治理前后对比'
|
||
if (beforeData.length > 0 && beforeData[0].anotherName) {
|
||
titleText = beforeData[0].anotherName+'治理前后对比'
|
||
} else if (afterData.length > 0 && afterData[0].anotherName) {
|
||
titleText = afterData[0].anotherName+'治理前后对比'
|
||
}
|
||
|
||
// statisticalData
|
||
// chartsListBefore.value.map((item: any) => item.statisticalData)
|
||
// chartsListAfter.value = tableStore.table.data.after
|
||
|
||
|
||
// 构建图例数据
|
||
const legendData = series.map((item: any, index: number) => {
|
||
let color = config.layout.elementUiPrimary[0]
|
||
const name = item.name
|
||
if (name.includes('A相')) {
|
||
color = '#DAA520'
|
||
} else if (name.includes('B相')) {
|
||
color = '#2E8B57'
|
||
} else if (name.includes('C相')) {
|
||
color = '#A52a2a'
|
||
}
|
||
|
||
// 判断是治理前还是治理后，设置不同的线条样式
|
||
const isBefore = name.includes('治理前')
|
||
|
||
return {
|
||
name: item.name,
|
||
// icon: isBefore
|
||
// ? 'rect'
|
||
// : 'path://M0,2 L8,2 L8,6 L0,6 Z M12,2 L20,2 L20,6 L12,6 Z M24,2 L32,2 L32,6 L24,6 Z M36,2 L44,2 L44,6 L36,6 Z', // 矩形组成的粗虚线
|
||
itemStyle: {
|
||
color: color // 明确指定图例图标的颜色
|
||
},
|
||
lineStyle: {
|
||
type: isBefore ? 'solid' : 'dashed', // 治理前实线，治理后虚线
|
||
width: 2
|
||
}
|
||
}
|
||
})
|
||
let [min, max] = yMethod(
|
||
[...chartsListBefore.value.map((item: any) => item.statisticalData),
|
||
...chartsListAfter.value.map((item: any) => item.statisticalData)]
|
||
)
|
||
echartList.value = {
|
||
exportFileName: {
|
||
subject: exportSubjectName.value,
|
||
feature: '趋势对比',
|
||
date: tableStore.table.params.searchEndTime || tableStore.table.params.searchBeginTime
|
||
},
|
||
title: {
|
||
text: titleText
|
||
},
|
||
tooltip: {
|
||
axisPointer: {
|
||
type: 'cross',
|
||
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(params: any) {
|
||
const xname = params[0].value[0]
|
||
let str = `${xname}<br>`
|
||
params.forEach((el: any, index: any) => {
|
||
let marker = ''
|
||
if (el.value[3] == 'dashed') {
|
||
for (let i = 0; i < 3; i++) {
|
||
marker += `<span style="display:inline-block;border: 2px ${el.color} solid;margin-right:5px;width:10px;height:0px;background-color:#ffffff00;"></span>`
|
||
}
|
||
} else {
|
||
marker = `<span style="display:inline-block;border: 2px ${el.color} ${el.value[3]};margin-right:5px;width:40px;height:0px;background-color:#ffffff00;"></span>`//`<span style="display:inline-block;border: 2px ${el.color} ${el.value[3]};margin-right:5px;width:40px;height:0px;background-color:#ffffff00;"></span>`
|
||
|
||
}
|
||
|
||
str += `${marker}${el.seriesName.split('(')[0]}：${el.value[1] != null ? el.value[1] + ' ' + (el.value[2] == null ? '' : el.value[2]) : '-'
|
||
}<br>`
|
||
})
|
||
return str
|
||
}
|
||
},
|
||
legend: {
|
||
data: legendData,
|
||
// icon: 'rect',
|
||
itemWidth: 18,
|
||
itemHeight: 3,
|
||
type: 'scroll',
|
||
|
||
itemStyle: {
|
||
borderWidth: 0
|
||
},
|
||
lineStyle: {
|
||
width: 2 // 确保图例线条宽度与系列线条宽度一致
|
||
}
|
||
},
|
||
xAxis: {
|
||
type: 'time',
|
||
axisLabel: {
|
||
formatter: {
|
||
day: '{MM}-{dd}',
|
||
month: '{MM}',
|
||
year: '{yyyy}'
|
||
}
|
||
}
|
||
},
|
||
yAxis: {
|
||
name: beforeData.length > 0 ? beforeData[0].unit : afterData.length > 0 ? afterData[0].unit : '',
|
||
max: max,
|
||
min: min,
|
||
},
|
||
grid: {
|
||
left: '10px',
|
||
right: '20px'
|
||
},
|
||
toolbox: {
|
||
featureProps: {
|
||
myTool1: {
|
||
show: true,
|
||
title: '下载csv',
|
||
icon: 'path://M642 673.1H301.6c-9.9 0-17.9-8-17.9-17.9s8-17.9 17.9-17.9H642c9.9 0 17.9 8 17.9 17.9s-8 17.9-17.9 17.9zM642 511.8H301.6c-9.9 0-17.9-8-17.9-17.9 0-9.9 8-17.9 17.9-17.9H642c9.9 0 17.9 8 17.9 17.9 0 9.9-8 17.9-17.9 17.9zM480.7 350.6H301.6c-9.9 0-17.9-8-17.9-17.9s8-17.9 17.9-17.9h179.2c9.9 0 17.9 8 17.9 17.9s-8.1 17.9-18 17.9zM874.9 350.6H695.7c-49.4 0-89.6-40.2-89.6-89.6V81.9c0-9.9 8-17.9 17.9-17.9 9.9 0 17.9 8 17.9 17.9V261c0 29.6 24.1 53.7 53.7 53.7h179.2c9.9 0 17.9 8 17.9 17.9s-7.9 18-17.8 18zM794.3 959.7H221c-49.4 0-89.6-40.2-89.6-89.6V153.5c0-49.4 40.2-89.6 89.6-89.6h403.1c4.8 0 9.3 1.9 12.7 5.2L887.6 320c3.4 3.4 5.2 7.9 5.2 12.7v537.5c0 52.7-51.9 89.5-98.5 89.5zM221 99.8c-29.6 0-53.7 24.1-53.7 53.7v716.6c0 29.6 24.1 53.7 53.7 53.7h573.3c29 0 62.7-23.5 62.7-53.7v-530L616.7 99.8H221z',
|
||
onclick: () => {
|
||
exportSeriesCSV(echartList.value.series, echartList.value.exportFileName)
|
||
}
|
||
},
|
||
myTool2: {
|
||
show: true,
|
||
title: timeControl.value ? '关闭缺失数据' : '缺失数据',
|
||
icon: 'path://M832 512l-192-192v128H128v128h512v128l192-192zM192 512l192 192v-128h512v-128H384V320L192 512z',
|
||
iconStyle: timeControl.value ? { borderColor: '#409EFF' } : {},
|
||
onclick: () => {
|
||
setTimeControl()
|
||
}
|
||
}
|
||
}
|
||
},
|
||
series: series
|
||
}
|
||
}
|
||
|
||
const setTimeControl = () => {
|
||
timeControl.value = !timeControl.value
|
||
setEchart()
|
||
}
|
||
|
||
const tableStore: any = new TableStore({
|
||
url: '/cs-device-boot/csGroup/sensitiveUserTrendData',
|
||
method: 'POST',
|
||
showPage: false,
|
||
exportName: '趋势对比',
|
||
column: [],
|
||
beforeSearchFun: () => {
|
||
setTime()
|
||
// if (!tableStore.table.params.sensitiveUserId && idList.value?.length > 0) {
|
||
// tableStore.table.params.sensitiveUserId = idList.value[0].id
|
||
// }
|
||
let lists: any = []
|
||
// 处理电能质量指标
|
||
const selectedIndicator = indicatorList.value?.find(
|
||
(item: any) => item.id === tableStore.table.params.indicator
|
||
)
|
||
if (selectedIndicator) {
|
||
let frequencys = ''
|
||
if (selectedIndicator.name.includes('谐波含有率')) {
|
||
frequencys = tableStore.table.params.harmonicCount
|
||
}
|
||
|
||
lists.push({
|
||
statisticalId: tableStore.table.params.indicator,
|
||
frequency: frequencys !== null && frequencys !== undefined ? String(frequencys) : ''
|
||
})
|
||
}
|
||
|
||
// 将 lists 添加到请求参数中
|
||
tableStore.table.params.list = lists
|
||
},
|
||
loadCallback: () => {
|
||
tableStore.table.height = `calc(${prop.height} - 80px)`
|
||
// 数据加载完成后的处理
|
||
if (tableStore.table.data) {
|
||
chartsListBefore.value = tableStore.table.data.before
|
||
chartsListAfter.value = tableStore.table.data.after
|
||
setEchart()
|
||
}
|
||
}
|
||
})
|
||
|
||
tableStore.table.params.indicator = ''
|
||
tableStore.table.params.exceedingTheLimit = ''
|
||
tableStore.table.params.dataLevel = 'Primary'
|
||
tableStore.table.params.valueType = 'avg'
|
||
provide('tableStore', tableStore)
|
||
|
||
onMounted(() => {
|
||
initCode()
|
||
// initListByIds()
|
||
})
|
||
|
||
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 不是一个有效数组')
|
||
}
|
||
}
|
||
|
||
// 判断是否应该显示谐波次数选择框
|
||
const shouldShowHarmonicCount = () => {
|
||
if (!tableStore.table.params.indicator || !indicatorList.value) return false
|
||
|
||
const currentIndicator = indicatorList.value.find((item: any) => item.id === tableStore.table.params.indicator)
|
||
|
||
return (
|
||
currentIndicator &&
|
||
(currentIndicator.name.includes('幅值') || currentIndicator.name.includes('含有率'))
|
||
)
|
||
}
|
||
|
||
// 获取谐波类型名称
|
||
const getHarmonicTypeName = () => {
|
||
const currentIndicator = indicatorList.value.find((item: any) => item.id === tableStore.table.params.indicator)
|
||
|
||
if (currentIndicator) {
|
||
if (currentIndicator.name.includes('电压')) {
|
||
return '电压'
|
||
} else if (currentIndicator.name.includes('电流')) {
|
||
return '电流'
|
||
}
|
||
}
|
||
return ''
|
||
}
|
||
|
||
watch(
|
||
() => prop.timeKey,
|
||
val => {
|
||
tableStore.index()
|
||
}
|
||
)
|
||
watch(
|
||
() => prop.timeValue,
|
||
(newVal, oldVal) => {
|
||
tableStore.index()
|
||
},
|
||
{
|
||
deep: true
|
||
}
|
||
)
|
||
|
||
// 监听指标变化，当指标变化时重置谐波次数
|
||
watch(
|
||
() => tableStore.table.params.indicator,
|
||
newVal => {
|
||
if (shouldShowHarmonicCount()) {
|
||
// 如果之前没有设置过谐波次数，则默认设置为2
|
||
if (!tableStore.table.params.harmonicCount) {
|
||
tableStore.table.params.harmonicCount = 2
|
||
}
|
||
} else {
|
||
// 如果不是谐波含有率指标，则清除谐波次数设置
|
||
tableStore.table.params.harmonicCount = ''
|
||
}
|
||
}
|
||
)
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
// :deep(.el-select) {
|
||
// min-width: 80px;
|
||
// }
|
||
.device-control {
|
||
display: flex;
|
||
}
|
||
|
||
:deep(.cn-tree) {
|
||
padding: 0 10px 0 0 !important;
|
||
}
|
||
</style>
|