Web/admin-govern
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

指标拟合图联调

Browse Source
This commit is contained in:
stt
2025-11-18 14:21:31 +08:00
parent 4184d35854
commit 2048da5e52
2 changed files with 446 additions and 184 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/api/harmonic-boot/cockpit/cockpit.ts
View File

@@ -88,5 +88,13 @@ export function limitCalendarData(data: any) {
})
}
//指标拟合图数据
export function fittingData(data: any) {
return request({
url: '/cs-device-boot/csGroup/fittingData',
method: 'post',
data: data
})
}

622
src/components/cockpit/listOfMainMonitoringPoints/index.vue
View File

@@ -25,12 +25,19 @@
clearable
style="width: 130px"
>
<el-option
v-for="item in powerList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
<el-option v-for="item in powerList" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</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 label="电能质量指标">
@@ -40,15 +47,10 @@
clearable
style="width: 130px"
>
<el-option
v-for="item in indicatorList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
<el-option v-for="item in indicatorList" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
<el-form-item label="越限情况">
<!-- <el-form-item label="越限情况">
<el-select
v-model="tableStore.table.params.exceedingTheLimit"
placeholder="请选择越限情况"
@@ -62,64 +64,84 @@
:value="item.value"
/>
</el-select>
</el-form-item> -->
<el-form-item>
<div v-if="shouldShowHarmonicCount()">
<span class="mr12">{{ getHarmonicTypeName() }}谐波次数</span>
<el-select
v-model="tableStore.table.params.harmonicCount"
placeholder="请选择谐波次数"
style="width: 100px"
class="mr20"
>
<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
class="tall"
:options="echartList"
:style="{
width: prop.width,
height: `calc(${prop.height} - ${headerHeight}px + ${fullscreen ? 0 : 56}px )`
}"
/>
<div v-loading="loading">
<my-echart
class="tall"
:options="echartList"
:style="{
width: prop.width,
height: `calc(${prop.height} - ${headerHeight}px + ${fullscreen ? 0 : 56}px )`
}"
v-if="showEchart"
/>
</div>
</div>
</template>
<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 Table from '@/components/table/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 { useConfig } from '@/stores/config'
import { useRoute } from 'vue-router'
import { useTimeCacheStore } from '@/stores/timeCache'
import { cslineList } from '@/api/harmonic-boot/cockpit/cockpit'
import { cslineList, fittingData } from '@/api/harmonic-boot/cockpit/cockpit'
import { queryByCode, queryCsDictTree } from '@/api/system-boot/dictTree'
import { queryStatistical } from '@/api/system-boot/csstatisticalset'
import { color } from '@/components/echarts/color'
import { ElMessage } from 'element-plus'
const prop = defineProps({
w: { type: [String, Number]},
h: { type: [String, Number]},
width: { type: [String, Number]},
height: { type: [String, Number]},
timeKey: { type: [String, Number]},
w: { type: [String, Number] },
h: { type: [String, Number] },
width: { type: [String, Number] },
height: { type: [String, Number] },
timeKey: { type: [String, Number] },
timeValue: { type: Object }
})
const route = useRoute()
const timeCacheStore = useTimeCacheStore()
const config = useConfig()
const lineList: any = ref()
const powerList: any = ref([
{
label: '三相总有功功率',
value: '1'
},
{
label: '三相总无功功率',
value: '2'
}
])
const powerList: any = ref()
const countData: any = ref([])
const countDataCopy: any = ref([])
const showEchart = ref(true)
const chartsList = ref<any>([])
const loading = ref(false)
// 计算是否全屏展示
const fullscreen = computed(() => {
const w = Number(prop.w)
const h = Number(prop.h)
if (!isNaN(w) && !isNaN(h) && w === 12 && h === 6) {
initLineList()
// 执行相应逻辑
return true
} else {
@@ -136,24 +158,8 @@ const exceedingTheLimitList: any = ref([
value: '0'
}
])
const indicatorList: any = ref([
{
label: '谐波电压总畸变率',
value: '1'
},
{
label: '各次谐波电压',
value: '2'
},
{
label: '各次谐波电压',
value: '3'
},
{
label: '三相电压不平衡',
value: '4'
}
])
const indicatorList = ref()
const initLineList = async () => {
cslineList({}).then(res => {
@@ -164,154 +170,397 @@ const initLineList = async () => {
})
}
const echartList = ref({
title: {
text: '谐波电压总畸变率越限与功率负荷曲线拟合图'
},
// 判断下拉框是否存在
const onCountChange = (val: any, index: any) => {
if (val.length == 0) {
countData.value[index].count = countData.value[index].countOptions[0]
}
}
xAxis: {
type: 'time',
axisLabel: {
formatter: {
day: '{MM}-{dd}',
month: '{MM}',
year: '{yyyy}'
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 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 setEchart = () => {
loading.value = true
// 获取当前选择的功率和指标名称
const powerName = powerList.value?.find((item: any) => item.id === tableStore.table.params.power)?.name || '功率'
const indicatorName = indicatorList.value?.find((item: any) => item.id === tableStore.table.params.indicator)?.name || '电能质量指标'
echartList.value = {
title: {
text: `${indicatorName}与${powerName}负荷曲线拟合图`
},
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]
],
itemStyle: {
normal: {
//这里是颜色
color: function (params: any) {
if (params.value[1] == 0 || params.value[1] == 3.14159) {
return '#ccc'
} else {
return config.layout.elementUiPrimary[0]
},
yAxis: [{}, {}],
grid: {
left: '10px',
right: '20px'
},
options: {
series: [
{
type: 'bar',
name: powerName, // 动态设置功率名称
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
},
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
}
]
{
name: indicatorName, // 动态设置指标名称
type: 'line',
showSymbol: false,
smooth: true,
data: [],
yAxisIndex: 1
}
]
}
}
})
const headerHeight = ref(57)
const selectChange = (showSelect: any, height: any) => {
headerHeight.value = height
}
const tableStore: any = new TableStore({
url: '/user-boot/role/selectRoleDetail?id=0',
method: 'POST',
// 检查是否有数据
if (!chartsList.value || chartsList.value.length === 0) {
loading.value = false
showEchart.value = false // 没有数据时隐藏图表
return
}
try {
// 用户功率数据和电能质量数据
let powerData: any[] = []
let qualityData: any[] = []
chartsList.value.forEach((item: any) => {
// 根据统计项ID判断是功率数据还是电能质量数据
if (item.statisticalIndex === tableStore.table.params.power) {
powerData.push(item)
} else if (item.statisticalIndex === tableStore.table.params.indicator) {
qualityData.push(item)
}
})
// 处理功率数据
const processedPowerData = powerData.map((item: any) => {
return [
item.time,
item.statisticalData !== null && item.statisticalData !== undefined
? parseFloat(item.statisticalData.toFixed(2))
: null
]
})
// 处理电能质量数据
const processedQualityData = qualityData.map((item: any) => {
return [
item.time,
item.statisticalData !== null && item.statisticalData !== undefined
? parseFloat(item.statisticalData.toFixed(2))
: null
]
})
// 检查是否有有效数据
const hasPowerData = processedPowerData.length > 0 && processedPowerData.some(item => item[1] !== null)
const hasQualityData = processedQualityData.length > 0 && processedQualityData.some(item => item[1] !== null)
if (!hasPowerData && !hasQualityData) {
showEchart.value = false
loading.value = false
return
}
// 更新图表配置
echartList.value.options.series[0].data = processedPowerData
echartList.value.options.series[1].data = processedQualityData
// 确保图表显示
showEchart.value = true
} catch (error) {
console.error('处理图表数据时出错:', error)
showEchart.value = false
} finally {
loading.value = false
}
}
const initCode = () => {
queryByCode('steady_state_limit_fitting').then(res => {
queryCsDictTree(res.data.id).then(item => {
powerList.value = item.data.filter((item: any) => {
return item.name == '三相总无功功率' || item.name == '三相总有功功率'
})
indicatorList.value = item.data.filter((item: any) => {
return item.name != '三相总无功功率' && item.name != '三相总有功功率'
})
tableStore.table.params.power = powerList.value[0].id
tableStore.table.params.indicator = indicatorList.value[0].id
nextTick(() => {
tableStore.index()
})
})
})
}
const tableStore: any = new TableStore({
url: '/cs-device-boot/csGroup/fittingData',
method: 'POST',
showPage: false,
exportName: '主要监测点列表',
column: [],
beforeSearchFun: () => {
// 尝试从缓存获取时间值
let beginTime, endTime
// 设置时间参数
tableStore.table.params.searchBeginTime = tableStore.table.params.searchBeginTime || prop.timeValue?.[0]
tableStore.table.params.searchEndTime = tableStore.table.params.searchEndTime || prop.timeValue?.[1]
if (fullscreen.value) {
const cached = timeCacheStore.getCache(route.path)
if (cached && cached.timeValue) {
beginTime = cached.timeValue[0]
endTime = cached.timeValue[1]
}
}
// 如果缓存中没有则使用默认值
tableStore.table.params.searchBeginTime = beginTime || prop.timeValue?.[0]
tableStore.table.params.searchEndTime = endTime || prop.timeValue?.[1]
// 只有当 lineList 已加载且有数据时才设置默认 lineId
if (!tableStore.table.params.lineId && lineList.value && lineList.value.length > 0) {
tableStore.table.params.lineId = lineList.value[0].lineId
}
// 构建请求参数 lists
let lists: any = []
// 处理用户功率指标
const selectedPower = powerList.value?.find((item: any) => item.id === tableStore.table.params.power)
if (selectedPower) {
lists.push({
statisticalId: tableStore.table.params.power,
valueType: tableStore.table.params.valueType
})
}
// 处理电能质量指标
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
tableStore.table.params.dataLevel = 'Primary'
},
loadCallback: () => {
tableStore.table.height = `calc(${prop.height} - 80px)`
// 数据加载完成后的处理
if (tableStore.table.data && tableStore.table.data.length > 0) {
chartsList.value = JSON.parse(JSON.stringify(tableStore.table.data))
setEchart()
} else if (tableStore.table.data) {
showEchart.value = false
}
}
})
const tableRef = ref()
provide('tableRef', tableRef)
tableStore.table.params.power = '1'
tableStore.table.params.indicator = '1'
tableStore.table.params.exceedingTheLimit = '1'
tableStore.table.params.valueType = 'avg'
tableStore.table.params.searchValue = ''
provide('tableStore', tableStore)
// 添加谐波次数选项（2-50）
const harmonicCountOptions = ref(Array.from({ length: 49 }, (_, i) => i + 2))
// 判断是否应该显示谐波次数选择框
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(
() => tableStore.table.params.indicator,
newVal => {
if (shouldShowHarmonicCount()) {
// 如果之前没有设置过谐波次数，则默认设置为2
if (!tableStore.table.params.harmonicCount) {
tableStore.table.params.harmonicCount = 2
}
} else {
// 如果不是谐波含有率指标，则清除谐波次数设置
tableStore.table.params.harmonicCount = ''
}
}
)
onMounted(() => {
tableStore.index()
initLineList().then(() => {
// 确保 lineList 加载完成后再初始化其他数据
initCode()
// 只有非全屏时才调用 tableStore.index()
// if (!fullscreen.value) {
// tableStore.index()
// }
})
})
watch(
() => prop.timeKey,
@@ -320,12 +569,17 @@ watch(
}
)
watch(
() => prop.timeValue, // 监听的目标（函数形式避免直接传递 props 导致的警告）
() => prop.timeValue,
(newVal, oldVal) => {
tableStore.index()
// 当外部时间值变化时，更新表格的时间参数
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 // 若 timeValue 是对象/数组，需开启深度监听
deep: true
}
)