联调实时数据页面

src/components/echarts/waveForm.vue

@@ -2,35 +2,65 @@
     <div v-if="view2">
         <el-row>
             <el-col :span="12">
-                <span style="font-size: 14px;  line-height: 30px">值类型选择:</span>
-                <el-select style="min-width: 200px; width: 200px" @change="changeView" v-model="value"
-                    placeholder="请选择值类型">
-                    <el-option v-for="item in options" :key="item.value" :label="item.label"
-                        :value="item.value"></el-option>
+                <span style="font-size: 14px; line-height: 30px">值类型选择:</span>
+                <el-select
+                    style="min-width: 200px; width: 200px"
+                    @change="changeView"
+                    v-model="value"
+                    placeholder="请选择值类型"
+                >
+                    <el-option
+                        v-for="item in options"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value"
+                    ></el-option>
                 </el-select>
                 <!-- <el-button v-if="view2 && senior" class="ml10" type="primary"
                     @click="AdvancedAnalytics">高级分析</el-button> -->
             </el-col>
             <el-col :span="12">
-                <el-button @click="backbxlb" class="el-icon-refresh-right" icon="el-icon-CloseBold"
-                    style="float: right">
+                <el-button
+                    @click="backbxlb"
+                    class="el-icon-refresh-right"
+                    icon="el-icon-CloseBold"
+                    style="float: right"
+                >
                     返回
                 </el-button>
             </el-col>
         </el-row>
         <div v-loading="loading" style="height: calc(100vh - 190px)">
             <el-tabs v-if="view4" class="default-main" v-model="bxactiveName" @tab-click="bxhandleClick">
-                <el-tab-pane label="瞬时波形" name="ssbx" class="boxbx pt10 pb10"
-                    :style="'height:' + bxecharts + ';overflow-y: scroll;'">
-                    <shushiboxi ref="shushiboxiRef" v-if="bxactiveName == 'ssbx' && showBoxi" :value="value"
-                        :boxoList="boxoList" :wp="wp">
-                    </shushiboxi>
+                <el-tab-pane
+                    label="瞬时波形"
+                    name="ssbx"
+                    class="boxbx pt10 pb10"
+                    :style="'height:' + bxecharts + ';overflow-y: scroll;'"
+                >
+                    <shushiboxi
+                        ref="shushiboxiRef"
+                        v-if="bxactiveName == 'ssbx' && showBoxi"
+                        :value="value"
+                        :parentHeight="parentHeight"
+                        :boxoList="boxoList"
+                        :wp="wp"
+                    ></shushiboxi>
                 </el-tab-pane>
-                <el-tab-pane label="RMS波形" class="boxbx pt10 pb10" name="rmsbx"
-                    :style="'height:' + bxecharts + ';overflow-y: scroll;'">
-                    <rmsboxi ref="rmsboxiRef" v-if="bxactiveName == 'rmsbx' && showBoxi" :value="value"
-                        :boxoList="boxoList" :wp="wp">
-                    </rmsboxi>
+                <el-tab-pane
+                    label="RMS波形"
+                    class="boxbx pt10 pb10"
+                    name="rmsbx"
+                    :style="'height:' + bxecharts + ';overflow-y: scroll;'"
+                >
+                    <rmsboxi
+                        ref="rmsboxiRef"
+                        v-if="bxactiveName == 'rmsbx' && showBoxi"
+                        :value="value"
+                        :parentHeight="parentHeight"
+                        :boxoList="boxoList"
+                        :wp="wp"
+                    ></rmsboxi>
                 </el-tab-pane>
             </el-tabs>
             <el-empty v-else description="暂无数据" style="height: calc(100vh - 190px)" />
@@ -60,6 +90,7 @@ interface Props {
 const props = withDefaults(defineProps<Props>(), {
     senior: false
 })
+const parentHeight = ref(0)
 const loading = ref(true)
 const bxactiveName = ref('ssbx')
 const rmsboxiRef = ref()
@@ -75,7 +106,7 @@ const options = ref([
     }
 ])
 const shushiboxiRef = ref()
-const bxecharts = mainHeight(95).height as any
+const bxecharts = ref(mainHeight(95).height as any)
 const view2 = ref(true)
 const boxoList = ref(null)
 const wp = ref(null)
@@ -88,7 +119,6 @@ const open = async (row: any) => {
     loading.value = true
     await getMonitorEventAnalyseWave({ id: row.eventId, systemType: 0 })
         .then(res => {
-
             row.loading = false
             if (res != undefined) {
                 boxoList.value = row
@@ -106,15 +136,13 @@ const bxhandleClick = (tab: any) => {
     if (tab.name == 'ssbx') {
         if (rmsboxiRef.value) rmsboxiRef.value.backbxlb()
         bxactiveName.value = 'ssbx'
-       
     } else if (tab.name == 'rmsbx') {
         if (shushiboxiRef.value) shushiboxiRef.value.backbxlb()
         bxactiveName.value = 'rmsbx'
-        
     }
     setTimeout(() => {
-        loading.value = false 
-    },0)
+        loading.value = false
+    }, 0)
     //  console.log(tab, event);
 }
 const backbxlb = () => {
@@ -125,6 +153,15 @@ const backbxlb = () => {
 
     emit('backbxlb')
 }
+const setHeight = (h: any, vh: any) => {
+    if (h != false) {
+        parentHeight.value = h
+    }
+
+    setTimeout(() => {
+        bxecharts.value = mainHeight(vh).height
+    }, 100)
+}
 // 高级分析
 const AdvancedAnalytics = () => {
     analysis({
@@ -145,6 +182,6 @@ const gaoBack = () => {
     view2.value = true
     view3.value = false
 }
-defineExpose({ open })
+defineExpose({ open, setHeight })
 </script>
 <style lang="scss" scoped></style>