指标拟合图联调

src/components/cockpit/listOfMainMonitoringPoints/index.vue

@@ -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
+                    <el-select v-model="tableStore.table.params.lineId" placeholder="请选择监测点" clearable>
-                        v-model="tableStore.table.params.lineId"
-                        placeholder="请选择监测点"
-                        clearable
-                        style="width: 130px"
-                    >
                         <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
+                    <el-select v-model="tableStore.table.params.power" placeholder="请选择用户功率" clearable>
-                        v-model="tableStore.table.params.power"
-                        placeholder="请选择用户功率"
-                        clearable
-                        style="width: 130px"
-                    >
                         <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
+                    <el-select style="min-width: 120px !important" placeholder="请选择" v-model="tableStore.table.params.valueType">
-                        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
+                    <el-select v-model="tableStore.table.params.indicator" placeholder="请选择电能质量指标" clearable>
-                        v-model="tableStore.table.params.indicator"
-                        placeholder="请选择电能质量指标"
-                        clearable
-                        style="width: 130px"
-                    >
                         <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()">
+                    <div v-if="shouldShowHarmonicCount()" style="display: flex;color: var(--el-text-color-regular);">
-                        <span class="mr12">{{ getHarmonicTypeName() }}谐波次数</span>
+                        <span style="width: 160px;">{{ getHarmonicTypeName() }}谐波次数</span>
                         <el-select
                             v-model="tableStore.table.params.harmonicCount"
                             placeholder="请选择谐波次数"
-                            style="width: 100px"
+                            style="min-width: 80px !important"
-                            class="mr20"
                         >
                             <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) {
+// :deep(.el-select) {
-    min-width: 80px;
+//     min-width: 80px;
-}
+// }
 </style>