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 15:31:26 +08:00
parent ddc8f81196
commit 7a68a4114b
1 changed files with 18 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,15 +1,10 @@
<template>
<div>
<!--指标拟合图 -->
<TableHeader :showReset="false" datePicker @selectChange="selectChange" v-if="fullscreen">
<TableHeader datePicker @selectChange="selectChange" v-if="fullscreen">
<template v-slot:select>
<el-form-item label="监测点">
<el-select
v-model="tableStore.table.params.lineId"
placeholder="请选择监测点"
clearable
style="width: 130px"
>
<el-select v-model="tableStore.table.params.lineId" placeholder="请选择监测点" clearable>
<el-option
v-for="item in lineList"
:key="item.lineId"
@@ -19,21 +14,12 @@
</el-select>
</el-form-item>
<el-form-item label="用户功率">
<el-select
v-model="tableStore.table.params.power"
placeholder="请选择用户功率"
clearable
style="width: 130px"
>
<el-select v-model="tableStore.table.params.power" placeholder="请选择用户功率" clearable>
<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-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>
@@ -41,38 +27,17 @@
</el-select>
</el-form-item>
<el-form-item label="电能质量指标">
<el-select
v-model="tableStore.table.params.indicator"
placeholder="请选择电能质量指标"
clearable
style="width: 130px"
>
<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 label="越限情况">
<el-select
v-model="tableStore.table.params.exceedingTheLimit"
placeholder="请选择越限情况"
clearable
style="width: 90px"
>
<el-option
v-for="item in exceedingTheLimitList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item> -->
<el-form-item>
<div v-if="shouldShowHarmonicCount()">
<span class="mr12">{{ getHarmonicTypeName() }}谐波次数</span>
<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="width: 100px"
class="mr20"
style="min-width: 80px !important"
>
<el-option
v-for="num in harmonicCountOptions"
@@ -85,7 +50,7 @@
</el-form-item>
</template>
</TableHeader>
<div v-loading="loading">
<div v-loading="tableStore.table.loading">
<my-echart
class="tall"
:options="echartList"
@@ -102,15 +67,10 @@
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 { useDictData } from '@/stores/dictData'
import MyEchart from '@/components/echarts/MyEchart.vue'
import { useConfig } from '@/stores/config'
import { useRoute } from 'vue-router'
import { useTimeCacheStore } from '@/stores/timeCache'
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({
@@ -129,13 +89,11 @@ const lineList: any = ref()
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(() => {
@@ -170,12 +128,6 @@ const initLineList = async () => {
})
}
// 判断下拉框是否存在
const onCountChange = (val: any, index: any) => {
if (val.length == 0) {
countData.value[index].count = countData.value[index].countOptions[0]
}
}
const echartList = ref()
@@ -295,11 +247,11 @@ const selectChange = (showSelect: any, height: any, datePickerValue?: any) => {
}
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 || '电能质量指标'
const indicatorName =
indicatorList.value?.find((item: any) => item.id === tableStore.table.params.indicator)?.name || '电能质量指标'
echartList.value = {
title: {
@@ -324,7 +276,7 @@ const setEchart = () => {
series: [
{
type: 'bar',
name: powerName, // 动态设置功率名称
name: powerName, // 动态设置功率名称
data: [],
itemStyle: {
normal: {
@@ -340,10 +292,10 @@ const setEchart = () => {
yAxisIndex: 0
},
{
name: indicatorName, // 动态设置指标名称
name: indicatorName, // 动态设置指标名称
type: 'line',
showSymbol: false,
smooth: true,
// smooth: true,
data: [],
yAxisIndex: 1
}
@@ -353,7 +305,6 @@ const setEchart = () => {
// 检查是否有数据
if (!chartsList.value || chartsList.value.length === 0) {
loading.value = false
showEchart.value = false // 没有数据时隐藏图表
return
}
@@ -398,7 +349,6 @@ const setEchart = () => {
if (!hasPowerData && !hasQualityData) {
showEchart.value = false
loading.value = false
return
}
@@ -408,16 +358,12 @@ const setEchart = () => {
// 确保图表显示
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 => {
@@ -555,11 +501,6 @@ onMounted(() => {
initLineList().then(() => {
// 确保 lineList 加载完成后再初始化其他数据
initCode()
// 只有非全屏时才调用 tableStore.index()
// if (!fullscreen.value) {
// tableStore.index()
// }
})
})
watch(
@@ -586,7 +527,7 @@ watch(
const addMenu = () => {}
</script>
<style lang="scss" scoped>
:deep(.el-select) {
min-width: 80px;
}
// :deep(.el-select) {
// min-width: 80px;
// }
</style>