修改 bug

src/views/govern/device/control/tabs/components/harmonicSpectrum.vue

@@ -1,29 +1,22 @@
 <!-- 谐波频谱 -->
 <template>
-    <div class="harmonic">
+    <div class="harmonic" :style="heightTop">
         <div class="harmonic_select">
-            <el-form :model="searchForm" class="history_select" id="history_select">
+            <el-form :model="searchForm" id="history_select">
                 <el-form-item label="稳态指标">
-                    <el-select
-                        multiple
-                        collapse-tags
-                        collapse-tags-tooltip
-                        v-model="searchForm.index"
-                        placeholder="请选择统计指标"
-                    >
-                        <el-option
-                            v-for="item in indexOptions"
-                            :key="item.id"
-                            :label="item.name"
-                            :value="item.id"
-                        ></el-option>
+                    <el-select multiple collapse-tags collapse-tags-tooltip v-model="searchForm.index"
+                        placeholder="请选择统计指标">
+                        <el-option v-for="item in indexOptions" :key="item.id" :label="item.name"
+                            :value="item.id"></el-option>
                     </el-select>
                 </el-form-item>
+                <el-button type="primary" :loading="loading" @click="init">查询</el-button>
             </el-form>
-            <el-button type="primary" :loading="loading" @click="init">查询</el-button>
+
         </div>
         <div class="harmonic_body" v-loading="loading">
-            <div class="harmonic_body_charts" v-for="(item, index) in chartsList" :key="index">
+            <div class="harmonic_body_charts" :style="{ height: height }" v-for="(item, index) in chartsList"
+                :key="index">
                 <p class="charts_title">
                     {{
                         indexOptions.find((item: any) => {
@@ -42,6 +35,7 @@ import { queryByCode, queryByid, queryCsDictTree } from '@/api/system-boot/dictT
 import { queryStatistical } from '@/api/system-boot/csstatisticalset'
 import MyEchart from '@/components/echarts/MyEchart.vue'
 import { getDeviceHarmonicSpectrumData, getRealTimeTableList } from '@/api/cs-device-boot/EquipmentDelivery.ts'
+import { mainHeight } from '@/utils/layout'
 const searchForm: any = ref({})
 searchForm.value = {
     index: []
@@ -58,6 +52,8 @@ queryByCode('portable-harmonic').then(res => {
         legendDictList.value = vv.data
     })
 })
+const heightTop = mainHeight(275)
+let height: any = mainHeight(275).height
 //谐波频谱参数
 const params: any = ref({})
 const getHarmonicSpectrumParams = (val: any) => {
@@ -79,6 +75,7 @@ const init = () => {
     })
     //查询谐波频谱
     getDeviceHarmonicSpectrumData(params.value).then(res => {
+        res.data.length > 3 ? height = mainHeight(275, 3 ).height : height = mainHeight(275, res.data.length ).height
         chartsList.value = res.data
         //数据根据相别组装成新数组
         chartsList.value.map((item: any) => {
@@ -98,6 +95,8 @@ const init = () => {
             return
         })
 
+
+
         //循环渲染图表
         chartsList.value &&
             chartsList.value.map((item: any, index: any) => {
@@ -112,12 +111,12 @@ const init = () => {
                                 // text: item.showName
                             }
                         ],
-                        grid: {
-                            top: '16%',
-                            bottom: '15%', //也可设置left和right设置距离来控制图表的大小
-                            left: '3%',
-                            right: '4%'
-                        },
+                        // grid: {
+                        //     top: '16%',
+                        //     bottom: '15%', //也可设置left和right设置距离来控制图表的大小
+                        //     left: '3%',
+                        //     right: '4%'
+                        // },
                         tooltip: {
                             trigger: 'axis',
                             axisPointer: {
@@ -225,37 +224,42 @@ watch(
         immediate: true
     }
 )
-onMounted(() => {})
+onMounted(() => { })
 defineExpose({ getHarmonicSpectrumParams })
 </script>
 <style lang="scss" scoped>
 .harmonic {
     width: 100%;
-    height: 100%;
+    // height: 100%;
     display: flex;
     flex-direction: column;
     position: relative;
+
     .harmonic_select {
         width: 50%;
         height: 30px;
         display: flex;
         position: absolute;
-        top: -30px;
+        top: -32px;
         left: 0;
         justify-content: flex-start;
+
         .el-button {
             margin-left: 10px;
         }
     }
+
     .harmonic_body {
         flex: 1;
         overflow-y: auto;
-        padding-bottom: 200px;
+
+        // padding-bottom: 200px;
         .harmonic_body_charts {
-            height: 200px;
-            margin: 15px 0;
+
+            // margin: 15px 0;
             border: 1px solid #eee;
             position: relative;
+
             .charts_title {
                 position: absolute;
                 top: 10px;