趋势对比联调修改
This commit is contained in:
@@ -171,3 +171,12 @@ export function getReportUrl(data: any) {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 查询监测对象电网侧和负载侧监测点指标趋势对比数据
|
||||||
|
export function sensitiveUserTrendData(data: any) {
|
||||||
|
return request({
|
||||||
|
url: '/cs-device-boot/csGroup/sensitiveUserTrendData',
|
||||||
|
method: 'post',
|
||||||
|
params: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -131,110 +131,6 @@ const initLineList = async () => {
|
|||||||
|
|
||||||
const echartList = ref()
|
const echartList = ref()
|
||||||
|
|
||||||
// const echartList = ref({
|
|
||||||
// title: {
|
|
||||||
// text: '谐波电压总畸变率越限与功率负荷曲线拟合图'
|
|
||||||
// },
|
|
||||||
|
|
||||||
// xAxis: {
|
|
||||||
// type: 'time',
|
|
||||||
// axisLabel: {
|
|
||||||
// formatter: {
|
|
||||||
// day: '{MM}-{dd}',
|
|
||||||
// month: '{MM}',
|
|
||||||
// year: '{yyyy}'
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// },
|
|
||||||
|
|
||||||
// yAxis: [{}, {}],
|
|
||||||
// grid: {
|
|
||||||
// left: '10px',
|
|
||||||
// right: '20px'
|
|
||||||
// },
|
|
||||||
// options: {
|
|
||||||
// series: [
|
|
||||||
// {
|
|
||||||
// // name: '暂降次数',
|
|
||||||
// type: 'bar',
|
|
||||||
// name: '有功功率',
|
|
||||||
// // data: [
|
|
||||||
// // ['2025-10-16 07:00:00', 10],
|
|
||||||
// // ['2025-10-16 07:15:00', 10],
|
|
||||||
// // ['2025-10-16 07:30:00', 10],
|
|
||||||
// // ['2025-10-16 07:45:00', 10],
|
|
||||||
// // ['2025-10-16 08:00:00', 30],
|
|
||||||
// // ['2025-10-16 08:15:00', 50],
|
|
||||||
// // ['2025-10-16 08:30:00', 60],
|
|
||||||
// // ['2025-10-16 08:45:00', 70],
|
|
||||||
// // ['2025-10-16 09:00:00', 100],
|
|
||||||
// // ['2025-10-16 09:15:00', 120],
|
|
||||||
// // ['2025-10-16 09:30:00', 130],
|
|
||||||
// // ['2025-10-16 09:45:00', 140],
|
|
||||||
// // ['2025-10-16 10:00:00', 160],
|
|
||||||
// // ['2025-10-16 10:15:00', 160],
|
|
||||||
// // ['2025-10-16 10:30:00', 130],
|
|
||||||
// // ['2025-10-16 10:45:00', 120],
|
|
||||||
// // ['2025-10-16 11:00:00', 140],
|
|
||||||
// // ['2025-10-16 11:15:00', 80],
|
|
||||||
// // ['2025-10-16 11:30:00', 70],
|
|
||||||
// // ['2025-10-16 11:45:00', 90],
|
|
||||||
// // ['2025-10-16 12:00:00', 60],
|
|
||||||
// // ['2025-10-16 12:15:00', 60],
|
|
||||||
// // ['2025-10-16 12:30:00', 60],
|
|
||||||
// // ['2025-10-16 12:45:00', 60]
|
|
||||||
// // ],
|
|
||||||
// data:[],
|
|
||||||
// itemStyle: {
|
|
||||||
// normal: {
|
|
||||||
// //这里是颜色
|
|
||||||
// color: function (params: any) {
|
|
||||||
// if (params.value[1] == 0 || params.value[1] == 3.14159) {
|
|
||||||
// return '#ccc'
|
|
||||||
// } else {
|
|
||||||
// return config.layout.elementUiPrimary[0]
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// },
|
|
||||||
// yAxisIndex: 0
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// name: '谐波总畸变率',
|
|
||||||
// type: 'line',
|
|
||||||
// showSymbol: false,
|
|
||||||
// smooth: true,
|
|
||||||
// data: [
|
|
||||||
// ['2025-10-16 07:00:00', 0],
|
|
||||||
// ['2025-10-16 07:15:00', 0],
|
|
||||||
// ['2025-10-16 07:30:00', 0],
|
|
||||||
// ['2025-10-16 07:45:00', 0],
|
|
||||||
// ['2025-10-16 08:00:00', 0],
|
|
||||||
// ['2025-10-16 08:15:00', 0.1],
|
|
||||||
// ['2025-10-16 08:30:00', 0.1],
|
|
||||||
// ['2025-10-16 08:45:00', 0.1],
|
|
||||||
// ['2025-10-16 09:00:00', 1],
|
|
||||||
// ['2025-10-16 09:15:00', 1],
|
|
||||||
// ['2025-10-16 09:30:00', 1],
|
|
||||||
// ['2025-10-16 09:45:00', 1],
|
|
||||||
// ['2025-10-16 10:00:00', 0.8],
|
|
||||||
// ['2025-10-16 10:15:00', 0.8],
|
|
||||||
// ['2025-10-16 10:30:00', 0.8],
|
|
||||||
// ['2025-10-16 10:45:00', 0.8],
|
|
||||||
// ['2025-10-16 11:00:00', 0.8],
|
|
||||||
// ['2025-10-16 11:15:00', 0.1],
|
|
||||||
// ['2025-10-16 11:30:00', 0.1],
|
|
||||||
// ['2025-10-16 11:45:00', 0.1],
|
|
||||||
// ['2025-10-16 12:00:00', 0],
|
|
||||||
// ['2025-10-16 12:15:00', 0],
|
|
||||||
// ['2025-10-16 12:30:00', 0],
|
|
||||||
// ['2025-10-16 12:45:00', 0]
|
|
||||||
// ],
|
|
||||||
// yAxisIndex: 1
|
|
||||||
// }
|
|
||||||
// ]
|
|
||||||
// }
|
|
||||||
// })
|
|
||||||
const headerHeight = ref(57)
|
const headerHeight = ref(57)
|
||||||
const selectChange = (showSelect: any, height: any, datePickerValue?: any) => {
|
const selectChange = (showSelect: any, height: any, datePickerValue?: any) => {
|
||||||
headerHeight.value = height
|
headerHeight.value = height
|
||||||
|
|||||||
@@ -1,77 +1,88 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<!--趋势对比 -->
|
<!--趋势对比 -->
|
||||||
<TableHeader :showReset="false" datePicker @selectChange="selectChange" v-if="fullscreen">
|
<TableHeader datePicker :showReset="false" @selectChange="selectChange" v-if="fullscreen">
|
||||||
<template v-slot:select>
|
<template v-slot:select>
|
||||||
<el-form-item label="监测点名称">
|
<el-form-item label="监测对象">
|
||||||
<el-select
|
<el-select v-model="tableStore.table.params.sensitiveUserId" placeholder="请选择监测对象" clearable>
|
||||||
v-model="tableStore.table.params.power"
|
<el-option v-for="item in idList" :key="item.id" :label="item.name" :value="item.id" />
|
||||||
placeholder="请选择监测点名称"
|
|
||||||
clearable
|
|
||||||
style="width: 130px"
|
|
||||||
>
|
|
||||||
<el-option
|
|
||||||
v-for="item in powerList"
|
|
||||||
:key="item.value"
|
|
||||||
:label="item.label"
|
|
||||||
:value="item.value"
|
|
||||||
/>
|
|
||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</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-form-item label="电能质量指标">
|
||||||
<el-select
|
<el-select v-model="tableStore.table.params.indicator" placeholder="请选择电能质量指标" clearable>
|
||||||
v-model="tableStore.table.params.indicator"
|
<el-option v-for="item in indicatorList" :key="item.id" :label="item.name" :value="item.id" />
|
||||||
placeholder="请选择电能质量指标"
|
|
||||||
clearable
|
|
||||||
style="width: 130px"
|
|
||||||
>
|
|
||||||
<el-option
|
|
||||||
v-for="item in indicatorList"
|
|
||||||
:key="item.value"
|
|
||||||
:label="item.label"
|
|
||||||
:value="item.value"
|
|
||||||
/>
|
|
||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="谐波次数">
|
<el-form-item>
|
||||||
|
<el-radio-group v-model="tableStore.table.params.dataLevel">
|
||||||
|
<el-radio-button label="一次值" value="Primary" />
|
||||||
|
<el-radio-button label="二次值" value="Secondary" />
|
||||||
|
</el-radio-group>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="统计类型">
|
||||||
<el-select
|
<el-select
|
||||||
v-model="tableStore.table.params.exceedingTheLimit"
|
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="请选择谐波次数"
|
placeholder="请选择谐波次数"
|
||||||
clearable
|
style="min-width: 80px !important"
|
||||||
style="width: 90px"
|
|
||||||
>
|
>
|
||||||
<el-option
|
<el-option
|
||||||
v-for="item in exceedingTheLimitList"
|
v-for="num in harmonicCountOptions"
|
||||||
:key="item.value"
|
:key="num"
|
||||||
:label="item.label"
|
:label="num"
|
||||||
:value="item.value"
|
:value="num"
|
||||||
/>
|
></el-option>
|
||||||
</el-select>
|
</el-select>
|
||||||
|
</div>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</template>
|
</template>
|
||||||
</TableHeader>
|
</TableHeader>
|
||||||
<my-echart
|
<my-echart
|
||||||
|
v-loading="tableStore.table.loading"
|
||||||
class="tall"
|
class="tall"
|
||||||
:options="echartList"
|
:options="echartList"
|
||||||
:style="{
|
:style="{
|
||||||
width: prop.width,
|
width: prop.width,
|
||||||
height: `calc(${prop.height} - ${headerHeight}px + ${fullscreen ? 0 : 56}px)`
|
height: `calc(${prop.height} - ${headerHeight}px + ${fullscreen ? 0 : 56}px)`
|
||||||
}"
|
}"
|
||||||
|
v-if="showEchart"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, onMounted, provide, reactive, watch, h, computed } from 'vue'
|
import { ref, onMounted, provide, reactive, watch, h, computed, nextTick } from 'vue'
|
||||||
import TableStore from '@/utils/tableStore'
|
import TableStore from '@/utils/tableStore'
|
||||||
import Table from '@/components/table/index.vue'
|
|
||||||
import TableHeader from '@/components/table/header/index.vue'
|
import TableHeader from '@/components/table/header/index.vue'
|
||||||
import { useDictData } from '@/stores/dictData'
|
|
||||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
|
||||||
import { getTimeOfTheMonth } from '@/utils/formatTime'
|
|
||||||
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 { useRoute } from 'vue-router'
|
import { useRoute } from 'vue-router'
|
||||||
import { useTimeCacheStore } from '@/stores/timeCache'
|
import { useTimeCacheStore } from '@/stores/timeCache'
|
||||||
|
import { queryByCode, queryCsDictTree } from '@/api/system-boot/dictTree'
|
||||||
|
import { getListByIds } from '@/api/harmonic-boot/cockpit/cockpit'
|
||||||
|
|
||||||
const prop = defineProps({
|
const prop = defineProps({
|
||||||
w: { type: [String, Number] },
|
w: { type: [String, Number] },
|
||||||
h: { type: [String, Number] },
|
h: { type: [String, Number] },
|
||||||
@@ -84,16 +95,9 @@ const prop = defineProps({
|
|||||||
const route = useRoute()
|
const route = useRoute()
|
||||||
const timeCacheStore = useTimeCacheStore()
|
const timeCacheStore = useTimeCacheStore()
|
||||||
const config = useConfig()
|
const config = useConfig()
|
||||||
const powerList: any = ref([
|
|
||||||
{
|
const lineIdList = ref(JSON.parse(window.localStorage.getItem('lineIdList') || '[]'))
|
||||||
label: '1#变压器',
|
|
||||||
value: '1'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '2#变压器',
|
|
||||||
value: '2'
|
|
||||||
}
|
|
||||||
])
|
|
||||||
// 计算是否全屏展示
|
// 计算是否全屏展示
|
||||||
const fullscreen = computed(() => {
|
const fullscreen = computed(() => {
|
||||||
const w = Number(prop.w)
|
const w = Number(prop.w)
|
||||||
@@ -105,47 +109,208 @@ const fullscreen = computed(() => {
|
|||||||
return false
|
return false
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
const exceedingTheLimitList: any = ref([
|
// 添加谐波次数选项(2-50)
|
||||||
{
|
const harmonicCountOptions = ref(Array.from({ length: 49 }, (_, i) => i + 2))
|
||||||
label: '2次',
|
|
||||||
value: '2'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '3次',
|
|
||||||
value: '3'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '4次',
|
|
||||||
value: '4'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '5次',
|
|
||||||
value: '5'
|
|
||||||
}
|
|
||||||
])
|
|
||||||
const indicatorList: any = ref([
|
|
||||||
{
|
|
||||||
label: '谐波电压总畸变率',
|
|
||||||
value: '1'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '各次谐波电压',
|
|
||||||
value: '2'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '各次谐波电压',
|
|
||||||
value: '3'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '三相电压不平衡',
|
|
||||||
value: '4'
|
|
||||||
}
|
|
||||||
])
|
|
||||||
const echartList = ref({
|
|
||||||
title: {
|
|
||||||
text: '趋势对比'
|
|
||||||
},
|
|
||||||
|
|
||||||
|
const indicatorList = ref()
|
||||||
|
|
||||||
|
const echartList = ref()
|
||||||
|
|
||||||
|
const showEchart = ref(true)
|
||||||
|
|
||||||
|
const headerHeight = ref(57)
|
||||||
|
|
||||||
|
// 监测对象
|
||||||
|
const idList = ref()
|
||||||
|
|
||||||
|
// 监测对象
|
||||||
|
const initListByIds = () => {
|
||||||
|
getListByIds({}).then((res: any) => {
|
||||||
|
if (res.data.length > 0) {
|
||||||
|
idList.value = res.data
|
||||||
|
initCode()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
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])
|
||||||
|
})
|
||||||
|
|
||||||
|
// 处理治理后数据
|
||||||
|
afterData.forEach((item: any) => {
|
||||||
|
const phase = item.phase || 'default'
|
||||||
|
if (!afterGroupedByPhase[phase]) {
|
||||||
|
afterGroupedByPhase[phase] = []
|
||||||
|
}
|
||||||
|
afterGroupedByPhase[phase].push([item.time, item.statisticalData])
|
||||||
|
})
|
||||||
|
|
||||||
|
// 构建系列数据
|
||||||
|
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: function (params: any) {
|
||||||
|
if (params.value[1] == 0 || params.value[1] == 3.14159) {
|
||||||
|
return '#ccc'
|
||||||
|
} else {
|
||||||
|
return color
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
lineStyle: {
|
||||||
|
type: 'solid', // 实线
|
||||||
|
width: 2 // 线条宽度
|
||||||
|
},
|
||||||
|
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: afterGroupedByPhase[phase],
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: function (params: any) {
|
||||||
|
if (params.value[1] == 0 || params.value[1] == 3.14159) {
|
||||||
|
return '#ccc'
|
||||||
|
} else {
|
||||||
|
return color
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
lineStyle: {
|
||||||
|
type: 'dashed', // 虚线
|
||||||
|
width: 2 // 线条宽度
|
||||||
|
},
|
||||||
|
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
|
||||||
|
}
|
||||||
|
|
||||||
|
// 构建图例数据
|
||||||
|
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
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
echartList.value = {
|
||||||
|
title: {
|
||||||
|
text: titleText
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: legendData,
|
||||||
|
icon: 'rect',
|
||||||
|
itemWidth: 18,
|
||||||
|
itemHeight: 3,
|
||||||
|
itemStyle: {
|
||||||
|
borderWidth: 0
|
||||||
|
},
|
||||||
|
lineStyle: {
|
||||||
|
width: 2 // 确保图例线条宽度与系列线条宽度一致
|
||||||
|
}
|
||||||
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
type: 'time',
|
type: 'time',
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
@@ -156,130 +321,98 @@ const echartList = ref({
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
yAxis: {
|
||||||
yAxis: {},
|
name: beforeData.length > 0 ? beforeData[0].unit : afterData.length > 0 ? afterData[0].unit : ''
|
||||||
|
},
|
||||||
grid: {
|
grid: {
|
||||||
left: '10px',
|
left: '10px',
|
||||||
right: '20px'
|
right: '20px'
|
||||||
},
|
},
|
||||||
options: {
|
series: series
|
||||||
series: [
|
|
||||||
{
|
|
||||||
// name: '暂降次数',
|
|
||||||
type: 'line',
|
|
||||||
name: '治理前',
|
|
||||||
showSymbol: false,
|
|
||||||
smooth: true,
|
|
||||||
data: [
|
|
||||||
['2025-10-16 07:00:00', 1],
|
|
||||||
['2025-10-16 07:15:00', 1],
|
|
||||||
['2025-10-16 07:30:00', 1],
|
|
||||||
['2025-10-16 07:45:00', 1],
|
|
||||||
['2025-10-16 08:00:00', 3],
|
|
||||||
['2025-10-16 08:15:00', 5],
|
|
||||||
['2025-10-16 08:30:00', 6],
|
|
||||||
['2025-10-16 08:45:00', 7],
|
|
||||||
['2025-10-16 09:00:00', 10],
|
|
||||||
['2025-10-16 09:15:00', 12],
|
|
||||||
['2025-10-16 09:30:00', 13],
|
|
||||||
['2025-10-16 09:45:00', 14],
|
|
||||||
['2025-10-16 10:00:00', 16],
|
|
||||||
['2025-10-16 10:15:00', 16],
|
|
||||||
['2025-10-16 10:30:00', 13],
|
|
||||||
['2025-10-16 10:45:00', 12],
|
|
||||||
['2025-10-16 11:00:00', 14],
|
|
||||||
['2025-10-16 11:15:00', 8],
|
|
||||||
['2025-10-16 11:30:00', 7],
|
|
||||||
['2025-10-16 11:45:00', 9],
|
|
||||||
['2025-10-16 12:00:00', 6],
|
|
||||||
['2025-10-16 12:15:00', 6],
|
|
||||||
['2025-10-16 12:30:00', 6],
|
|
||||||
['2025-10-16 12:45:00', 6]
|
|
||||||
],
|
|
||||||
itemStyle: {
|
|
||||||
normal: {
|
|
||||||
//这里是颜色
|
|
||||||
color: function (params: any) {
|
|
||||||
if (params.value[1] == 0 || params.value[1] == 3.14159) {
|
|
||||||
return '#ccc'
|
|
||||||
} else {
|
|
||||||
return config.layout.elementUiPrimary[0]
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
},
|
|
||||||
yAxisIndex: 0
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '治理后',
|
|
||||||
type: 'line',
|
|
||||||
showSymbol: false,
|
|
||||||
smooth: true,
|
|
||||||
data: [
|
|
||||||
['2025-10-16 07:00:00', 10],
|
|
||||||
['2025-10-16 07:15:00', 10],
|
|
||||||
['2025-10-16 07:30:00', 10],
|
|
||||||
['2025-10-16 07:45:00', 10],
|
|
||||||
['2025-10-16 08:00:00', 30],
|
|
||||||
['2025-10-16 08:15:00', 50],
|
|
||||||
['2025-10-16 08:30:00', 60],
|
|
||||||
['2025-10-16 08:45:00', 70],
|
|
||||||
['2025-10-16 09:00:00', 100],
|
|
||||||
['2025-10-16 09:15:00', 120],
|
|
||||||
['2025-10-16 09:30:00', 130],
|
|
||||||
['2025-10-16 09:45:00', 140],
|
|
||||||
['2025-10-16 10:00:00', 160],
|
|
||||||
['2025-10-16 10:15:00', 160],
|
|
||||||
['2025-10-16 10:30:00', 130],
|
|
||||||
['2025-10-16 10:45:00', 120],
|
|
||||||
['2025-10-16 11:00:00', 140],
|
|
||||||
['2025-10-16 11:15:00', 80],
|
|
||||||
['2025-10-16 11:30:00', 70],
|
|
||||||
['2025-10-16 11:45:00', 90],
|
|
||||||
['2025-10-16 12:00:00', 60],
|
|
||||||
['2025-10-16 12:15:00', 60],
|
|
||||||
['2025-10-16 12:30:00', 60],
|
|
||||||
['2025-10-16 12:45:00', 60]
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
})
|
|
||||||
const headerHeight = ref(57)
|
|
||||||
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 tableStore: any = new TableStore({
|
const tableStore: any = new TableStore({
|
||||||
url: '/user-boot/role/selectRoleDetail?id=0',
|
url: '/cs-device-boot/csGroup/sensitiveUserTrendData',
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
|
|
||||||
showPage: false,
|
showPage: false,
|
||||||
exportName: '主要监测点列表',
|
exportName: '趋势对比',
|
||||||
column: [],
|
column: [],
|
||||||
beforeSearchFun: () => {
|
beforeSearchFun: () => {
|
||||||
tableStore.table.params.searchBeginTime = tableStore.table.params.searchBeginTime || prop.timeValue?.[0]
|
tableStore.table.params.searchBeginTime = tableStore.table.params.searchBeginTime || prop.timeValue?.[0]
|
||||||
tableStore.table.params.searchEndTime = tableStore.table.params.searchEndTime || prop.timeValue?.[1]
|
tableStore.table.params.searchEndTime = tableStore.table.params.searchEndTime || prop.timeValue?.[1]
|
||||||
|
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: () => {
|
loadCallback: () => {
|
||||||
tableStore.table.height = `calc(${prop.height} - 80px)`
|
tableStore.table.height = `calc(${prop.height} - 80px)`
|
||||||
|
// 数据加载完成后的处理
|
||||||
|
if (tableStore.table.data) {
|
||||||
|
chartsListBefore.value = tableStore.table.data.before
|
||||||
|
chartsListAfter.value = tableStore.table.data.after
|
||||||
|
setEchart()
|
||||||
|
} else if (tableStore.table.data) {
|
||||||
|
showEchart.value = false
|
||||||
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
tableStore.table.params.power = '1'
|
|
||||||
tableStore.table.params.indicator = '1'
|
tableStore.table.params.indicator = '1'
|
||||||
tableStore.table.params.exceedingTheLimit = '1'
|
tableStore.table.params.exceedingTheLimit = '1'
|
||||||
tableStore.table.params.searchValue = ''
|
tableStore.table.params.dataLevel = 'Primary'
|
||||||
|
tableStore.table.params.valueType = 'avg'
|
||||||
provide('tableStore', tableStore)
|
provide('tableStore', tableStore)
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
tableStore.index()
|
initListByIds()
|
||||||
})
|
})
|
||||||
|
|
||||||
|
// 判断是否应该显示谐波次数选择框
|
||||||
|
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(
|
watch(
|
||||||
() => prop.timeKey,
|
() => prop.timeKey,
|
||||||
val => {
|
val => {
|
||||||
@@ -301,10 +434,26 @@ watch(
|
|||||||
}
|
}
|
||||||
)
|
)
|
||||||
|
|
||||||
|
// 监听指标变化,当指标变化时重置谐波次数
|
||||||
|
watch(
|
||||||
|
() => tableStore.table.params.indicator,
|
||||||
|
newVal => {
|
||||||
|
if (shouldShowHarmonicCount()) {
|
||||||
|
// 如果之前没有设置过谐波次数,则默认设置为2
|
||||||
|
if (!tableStore.table.params.harmonicCount) {
|
||||||
|
tableStore.table.params.harmonicCount = 2
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// 如果不是谐波含有率指标,则清除谐波次数设置
|
||||||
|
tableStore.table.params.harmonicCount = ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
const addMenu = () => {}
|
const addMenu = () => {}
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
:deep(.el-select) {
|
// :deep(.el-select) {
|
||||||
min-width: 80px;
|
// min-width: 80px;
|
||||||
}
|
// }
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -52,7 +52,7 @@ export default class TableStore {
|
|||||||
beforeSearchFun: null,
|
beforeSearchFun: null,
|
||||||
height: '',
|
height: '',
|
||||||
publicHeight: 0,
|
publicHeight: 0,
|
||||||
filename: '',
|
filename: ''
|
||||||
})
|
})
|
||||||
|
|
||||||
constructor(public options: TableStoreParams) {
|
constructor(public options: TableStoreParams) {
|
||||||
@@ -98,10 +98,14 @@ export default class TableStore {
|
|||||||
this.table.data = []
|
this.table.data = []
|
||||||
this.table.total = 0
|
this.table.total = 0
|
||||||
}
|
}
|
||||||
|
// 只有当 this.table.data 是数组时才执行 filtration 处理
|
||||||
|
if (Array.isArray(this.table.data)) {
|
||||||
this.table.copyData = filtration(this.table.data)
|
this.table.copyData = filtration(this.table.data)
|
||||||
|
}
|
||||||
if (Array.isArray(res)) {
|
if (Array.isArray(res)) {
|
||||||
this.table.data = res
|
this.table.data = res
|
||||||
}
|
}
|
||||||
|
|
||||||
if (this.isWebPaging) {
|
if (this.isWebPaging) {
|
||||||
this.table.webPagingData = window.XEUtils.chunk(this.table.data, this.table.params.pageSize)
|
this.table.webPagingData = window.XEUtils.chunk(this.table.data, this.table.params.pageSize)
|
||||||
this.table.data = this.table.webPagingData[this.table.params.pageNum - 1]
|
this.table.data = this.table.webPagingData[this.table.params.pageNum - 1]
|
||||||
@@ -109,7 +113,6 @@ export default class TableStore {
|
|||||||
|
|
||||||
this.table.loadCallback && this.table.loadCallback()
|
this.table.loadCallback && this.table.loadCallback()
|
||||||
this.table.loading = false
|
this.table.loading = false
|
||||||
|
|
||||||
})
|
})
|
||||||
.catch(() => {
|
.catch(() => {
|
||||||
this.table.loading = false
|
this.table.loading = false
|
||||||
@@ -145,7 +148,6 @@ export default class TableStore {
|
|||||||
'selection-change',
|
'selection-change',
|
||||||
() => {
|
() => {
|
||||||
this.table.selection = data as TableRow[]
|
this.table.selection = data as TableRow[]
|
||||||
|
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
[
|
[
|
||||||
|
|||||||
Reference in New Issue
Block a user