联调实时数据页面

src/api/device-boot/communicate.ts

@@ -1,27 +1,43 @@
 import request from '@/utils/request'
 
 // 事件分析  获取数据
-export function getRunOnlineRateData(data:any) {
+export function getRunOnlineRateData(data: any) {
     return request({
-        url: "/device-boot/communicate/getRunOnlineRateData",
+        url: '/device-boot/communicate/getRunOnlineRateData',
-        method: "post",
+        method: 'post',
         data
-    });
+    })
 }
 // 事件分析  运行状态 获取数据
-export function getComFlagInfoData(data:any) {
+export function getComFlagInfoData(data: any) {
     return request({
-        url: "/device-boot/communicate/getComFlagInfoData",
+        url: '/device-boot/communicate/getComFlagInfoData',
-        method: "post",
+        method: 'post',
         data
-    });
+    })
 }
 
 // 事件分析  运行状态 获取数据
-export function getRunInfoData(data:any) {
+export function getRunInfoData(data: any) {
     return request({
-        url: "/device-boot/communicate/getRunInfoData",
+        url: '/device-boot/communicate/getRunInfoData',
-        method: "post",
+        method: 'post',
         data
-    });
+    })
+}
+// 根据监测点id获取越限数值
+export function getOverLimitData(data: any) {
+    return request({
+        url: '/device-boot/line/getOverLimitData',
+        method: 'post',
+        params: data
+    })
+}
+// 获取监测点id取监测点信息
+export function getLineDetail(data: any) {
+    return request({
+        url: '/device-boot/commLine/getLineDetail',
+        method: 'get',
+        params: data
+    })
 }

src/api/event-boot/highAndLowPressure.ts

@@ -16,3 +16,11 @@ export function updateEventReason(data: any) {
         data
     })
 }
+//获取暂态事件明细
+export function queryEventDetailByEventId(params: any) {
+    return request({
+        url: '/event-boot/rmpEventDetail/queryEventDetailByEventId',
+        method: 'GET',
+        params
+    })
+}

src/api/user-boot/user.ts

@@ -54,8 +54,15 @@ export function getUserById() {
 }
 
 // 刷新token
+// 导出一个名为refreshToken的函数，该函数返回一个Promise对象
 export function refreshToken(): Promise<any> {
+    // 调用useAdminInfo函数获取管理员信息，并将其赋值给adminInfo变量
     const adminInfo = useAdminInfo()
+    // 调用login函数，传入一个对象作为参数，该对象包含grant_type、refresh_token和username三个属性
+    // grant_type设置为'refresh_token'，表示使用刷新令牌的方式获取新的访问令牌
+    // refresh_token使用adminInfo中的refresh_token属性
+    // username使用adminInfo中的loginName属性
+    // 返回login函数的调用结果，即一个Promise对象
     return login({
         grant_type: 'refresh_token',
         refresh_token: adminInfo.refresh_token,

src/components/echarts/MyEchart.vue

@@ -15,8 +15,7 @@ import { color, gradeColor3 } from './color'
 import { useConfig } from '@/stores/config'
 const config = useConfig()
 // import { nextTick } from 'process'
-
+const emit = defineEmits(['triggerPoint'])
-
 color[0] = config.layout.elementUiPrimary[0]
 const chartRef = ref<HTMLDivElement>()
 
@@ -37,7 +36,7 @@ const initChart = () => {
         chart?.dispose()
     }
     // chart?.dispose()
-    chart = echarts.init(chartRef.value as HTMLDivElement)
+    chart = echarts.getInstanceByDom(chartRef.value as HTMLDivElement) || echarts.init(chartRef.value as HTMLDivElement)
     const options = {
         title: {
             left: 'center',
@@ -69,10 +68,11 @@ const initChart = () => {
         },
         toolbox: {
             right: 20,
-            top: 20,
+            top: 15,
             feature: {
                 saveAsImage: {
-                    title: '保存图片',
+                    title: '', // 按钮标题
+                    icon: 'path://M892.342857 463.238095l-73.142857-68.266666-258.438095 258.438095V29.257143h-97.52381v624.152381L204.8 394.971429 131.657143 463.238095l380.342857 380.342857zM107.27619 897.219048h804.571429v97.523809H107.27619z' // 自定义图标路径
                 },
 
                 ...(props.options?.toolbox?.featureProps || null)
@@ -87,8 +87,8 @@ const initChart = () => {
             ...(props.options?.toolbox || null)
         },
         legend: {
-            right: 20,
+            right: 50,
-            top: 0,
+            top: 25,
             itemGap: 10,
             itemStyle: {},
             // textStyle: {
@@ -100,7 +100,7 @@ const initChart = () => {
             ...(props.options?.legend || null)
         },
         grid: {
-            top: '60px',
+            top: '70px',
             left: '30px',
             right: '70px',
             bottom: props.options?.options?.dataZoom === null ? '10px' : '40px',
@@ -132,7 +132,13 @@ const initChart = () => {
     handlerBar(options)
     // 处理柱状图
     chart.setOption(options, true)
-
+    chart.group = 'group'
+    // 添加点击事件
+    chart.on('click', function (params) {
+        if (params.seriesName == '暂态触发点') {
+            emit('triggerPoint', params.data)
+        }
+    })
     setTimeout(() => {
         chart.resize()
     }, 0)
@@ -223,9 +229,9 @@ const handlerXAxis = () => {
             // textStyle: {
             fontFamily: 'dinproRegular',
             color: '#000',
-            fontSize: '12',
+            fontSize: '12'
             // }
-        },
+        }
         // boundaryGap: false,
     }
     // props.options?.xAxis 是数组还是对象
@@ -256,11 +262,17 @@ const resizeObserver = new ResizeObserver(entries => {
         }, 100)
     }
 })
+const setOptions = (options: any) => {
+    chart.setOption(options)
+}
+const getChart = () => {
+    return chart
+}
 onMounted(() => {
     initChart()
     resizeObserver.observe(chartRef.value!)
 })
-defineExpose({ initChart })
+defineExpose({ initChart, setOptions, getChart })
 onBeforeUnmount(() => {
     resizeObserver.unobserve(chartRef.value!)
     chart?.dispose()

src/components/echarts/rmsboxi.vue

@@ -4,6 +4,7 @@
             <div id="rmsp" :style="`height:${vh};overflow: hidden;`">
                 <div class="bx" id="rms"></div>
             </div>
+            
         </div>
         <!-- <el-button
             style="position: absolute; right: 10px; top: 0px; z-index: 20000"
@@ -36,6 +37,10 @@ export default {
       type: [String, Number, Boolean],
       default: 3,
     },
+    parentHeight: {
+            type: [String, Number, Boolean],
+            default: 0
+        },
     DColor: {
       type: Boolean,
       default: false,
@@ -103,6 +108,10 @@ export default {
     } else {
       this.vh = mainHeight(165, 2).height
     }
+    if (this.parentHeight != 0) {
+            this.vh = mainHeight(this.parentHeight, 2).height
+
+        }
     this.vw = '100%'
   },
   mounted() {
@@ -936,8 +945,8 @@ export default {
           },
         },
         legend: {
-          left: "70px",
+          right: 50,
-          top: "20",
+          top: 25,
           verticalAlign: "top",
           enabled: true,
           itemDistance: 5,
@@ -953,17 +962,22 @@ export default {
             padding: [0, 0, 0, 0], //[上、右、下、左]
           },
         },
-        // toolbox: {
+        toolbox: {
-        //   show: step != 1 ? true : false,
+          right: 20,
-        //   feature: {
+           top: 15,
-        //     //restore: {},
+                feature: {
-        //     saveAsImage: {
+                    // 移除默认的 saveAsImage
-        //       iconStyle: {
+                    // saveAsImage: { title: '保存图片' }
-        //         borderColor: _this.DColor ? "#fff" : echartsColor.WordColor,
+                    myCustomDownload: {
-        //       },
+                        title: '', // 按钮标题
-        //     },
+                        icon: 'path://M892.342857 463.238095l-73.142857-68.266666-258.438095 258.438095V29.257143h-97.52381v624.152381L204.8 394.971429 131.657143 463.238095l380.342857 380.342857zM107.27619 897.219048h804.571429v97.523809H107.27619z', // 自定义图标路径
-        //   },
+
-        // },
+                        onclick: function () {
+                            _this.download()
+                        }
+                    }
+                }
+            },
         xAxis: {
           type: "value",
           name: "时间\n(ms)",
@@ -1063,7 +1077,7 @@ export default {
           left: "1%",
           right: "45px",
           bottom: "40px",
-          top: "15%",
+             top: '70px',
           containLabel: true,
         },
         dataZoom: [
@@ -1353,8 +1367,8 @@ export default {
           },
         },
         legend: {
-          left: "70px",
+          right: 50,
-          top: "20",
+            top: 25,
           verticalAlign: "top",
           enabled: true,
           itemDistance: 5,
@@ -1483,7 +1497,7 @@ export default {
           left: "1%",
           right: "45px",
           bottom: "40px",
-          top: "15%",
+             top: '70px',
           containLabel: true,
         },
         dataZoom: [

src/components/echarts/shushiboxi.vue

@@ -5,10 +5,10 @@
                 <div class="bx" id="wave"></div>
             </div>
         </div>
-        <el-button style="position: absolute; right: 10px; top: 0px; z-index: 20000" type="primary" link
+        <!-- <el-button style="position: absolute; right: 10px; top: 0px; z-index: 20000" type="primary" link
             icon="el-icon-Download" title="生成图片" @click="download">
             下载
-        </el-button>
+        </el-button> -->
     </div>
 </template>
 <script lang="js">
@@ -28,6 +28,10 @@ export default {
             type: [String, Number, Boolean],
             default: 3
         },
+        parentHeight: {
+            type: [String, Number, Boolean],
+            default: 0
+        },
         DColor: {
             type: Boolean,
             default: false
@@ -78,6 +82,10 @@ export default {
         } else {
             this.vh = mainHeight(165, 2).height
         }
+        if (this.parentHeight != 0) {
+            this.vh = mainHeight(this.parentHeight, 2).height
+
+        }
         this.vw = '100%'
     },
     watch: {
@@ -604,8 +612,8 @@ export default {
                     }
                 },
                 legend: {
-                    left: '70px',
+                    right: 50,
-                    top: '20',
+                    top: 25,
                     verticalAlign: 'top',
                     enabled: true,
                     itemDistance: 5,
@@ -621,17 +629,22 @@ export default {
                         padding: [0, 0, 0, 0] //[上、右、下、左]
                     }
                 },
-                // toolbox: {
+                toolbox: {
-                //   show: step != 1 ? true : false,
+                    right: 20,
-                //   feature: {
+                     top: 15,
-                //     //restore: {},
+                feature: {
-                //     saveAsImage: {
+                    // 移除默认的 saveAsImage
-                //       iconStyle: {
+                    // saveAsImage: { title: '保存图片' }
-                //         borderColor: _this.DColor ? "#fff" : echartsColor.WordColor,
+                    myCustomDownload: {
-                //       },
+                        title: '', // 按钮标题
-                //     },
+                        icon: 'path://M892.342857 463.238095l-73.142857-68.266666-258.438095 258.438095V29.257143h-97.52381v624.152381L204.8 394.971429 131.657143 463.238095l380.342857 380.342857zM107.27619 897.219048h804.571429v97.523809H107.27619z', // 自定义图标路径
-                //   },
+
-                // },
+                        onclick: function () {
+                            _this.download()
+                        }
+                    }
+                }
+            },
                 xAxis: {
                     type: 'value',
                     name: '时间\n(ms)',
@@ -724,7 +737,7 @@ export default {
                     left: '1%',
                     right: '2.8%',
                     bottom: '40px',
-                    top: '15%',
+                    top: '70px',
                     containLabel: true
                 },
                 dataZoom: [
@@ -964,8 +977,8 @@ export default {
                     }
                 },
                 legend: {
-                    left: '70px',
+                    right: 50,
-                    top: '20',
+                    top: 25,
                     verticalAlign: 'top',
                     enabled: true,
                     itemDistance: 5,
@@ -1086,7 +1099,7 @@ export default {
                     left: '1%',
                     right: '2.8%',
                     bottom: '40px',
-                    top: '15%',
+                    top: '70px',
                     containLabel: true
                 },
                 dataZoom: [

src/components/echarts/waveForm.vue

@@ -3,34 +3,64 @@
         <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"
+                <el-select
-                    placeholder="请选择值类型">
+                    style="min-width: 200px; width: 200px"
-                    <el-option v-for="item in options" :key="item.value" :label="item.label"
+                    @change="changeView"
-                        :value="item.value"></el-option>
+                    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"
+                <el-button
-                    style="float: right">
+                    @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"
+                <el-tab-pane
-                    :style="'height:' + bxecharts + ';overflow-y: scroll;'">
+                    label="瞬时波形"
-                    <shushiboxi ref="shushiboxiRef" v-if="bxactiveName == 'ssbx' && showBoxi" :value="value"
+                    name="ssbx"
-                        :boxoList="boxoList" :wp="wp">
+                    class="boxbx pt10 pb10"
-                    </shushiboxi>
+                    :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"
+                <el-tab-pane
-                    :style="'height:' + bxecharts + ';overflow-y: scroll;'">
+                    label="RMS波形"
-                    <rmsboxi ref="rmsboxiRef" v-if="bxactiveName == 'rmsbx' && showBoxi" :value="value"
+                    class="boxbx pt10 pb10"
-                        :boxoList="boxoList" :wp="wp">
+                    name="rmsbx"
-                    </rmsboxi>
+                    :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)
+    }, 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>

src/components/form/datePicker/index.vue

@@ -19,7 +19,7 @@ import { ref, onMounted, nextTick, watch } from 'vue'
 
 interface Props {
     nextFlag?: boolean
-    theCurrentTime: boolean
+    theCurrentTime?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {

src/components/table/header/index.vue

@@ -48,7 +48,7 @@ import { mainHeight } from '@/utils/layout'
 import { useDictData } from '@/stores/dictData'
 import { Search, RefreshLeft } from '@element-plus/icons-vue'
 import { defineProps } from 'vue'
-
+const emit = defineEmits(['selectChange',])
 const tableStore = inject('tableStore') as TableStore
 const tableHeader = ref()
 const datePickerRef = ref()
@@ -139,20 +139,17 @@ onUnmounted(() => {
 })
 
 const handlerHeight = () => {
+    tableStore.table.publicHeight + tableHeader.value.offsetHeight + (tableStore.showPage ? 58 : 0) + 20
     tableStore.table.height = mainHeight(
         tableStore.table.publicHeight + tableHeader.value.offsetHeight + (tableStore.showPage ? 58 : 0) + 20
     ).height as string
 }
 const computedSearchRow = () => {
-
 if (!headerForm.value.$el) return
-
-
 // 清空headerFormSecond.value.$el下的元素
 while (headerFormSecond.value.$el.firstChild) {
     headerForm.value.$el.appendChild(headerFormSecond.value.$el.firstChild)
 }
-
 // 获取第一行放了几个表单
 const elFormItem = headerForm.value.$el.querySelectorAll('.el-form-item')
 
@@ -160,10 +157,10 @@ const elFormItem = headerForm.value.$el.querySelectorAll('.el-form-item')
 let width = 0
 for (let i = 0; i < elFormItem.length; i++) {
     width += elFormItem[i].offsetWidth + 32
+
     if (width > headerForm.value.$el.offsetWidth) {
         headerFormSecond.value.$el.appendChild(elFormItem[i])
     }
-      
 }
 
 // 判断是否需要折叠
@@ -177,6 +174,7 @@ if (headerFormSecond.value.$el.scrollHeight > 0) {
 const showSelect = ref(false)
 const showSelectChange = () => {
     showSelect.value = !showSelect.value
+    emit('selectChange', showSelect.value)
 }
 const onComSearch = async () => {
     if (props.datePicker && timeAll.value) {
@@ -205,7 +203,7 @@ const onExport = () => {
     tableStore.onTableAction('export', { showAllFlag: true })
 }
 
-defineExpose({ onComSearch, areaRef, setDatePicker, setTheDate, datePickerRef, showSelectChange })
+defineExpose({ onComSearch, areaRef, setDatePicker, setTheDate, datePickerRef, showSelectChange,computedSearchRow })
 </script>
 
 <style scoped lang="scss">

src/components/tree/pqs/pointTree.vue

@@ -83,6 +83,7 @@ const loadData = () => {
                         item4.color = config.getColorVal('elementUiPrimary')
                         item4.children.forEach((item5: anyObj) => {
                             item5.alias = `${item.name}>${item2.name}>${item3.name}>${item4.name}>${item5.name}`
+                            item5.pid= item4.id
                             item5.icon = 'fa-solid fa-location-dot'
                             item5.color = config.getColorVal('elementUiPrimary')
                             if (item5.comFlag === 0) {

src/main.ts

@@ -34,12 +34,13 @@ import { setupFormCreate } from '@/plugins/formCreate'
 const setupAll = async () => {
     const app = createApp(App)
 
-    //开启离线地图
+    // //开启离线地图
-    // app.use(BaiduMapOffline, {
+    app.use(BaiduMapOffline, {
-    //     offline: true,
+        offline: true,
-    //     // offlineUrl:'http://sjzx:8088/map/' //window.location.origin + '/map/'
+        // offlineUrl:'http://sjzx:8088/map/' //window.location.origin + '/map/'
-    // })
+    })
     app.use(BaiduMap, {
+        offline: true,
         // ak: 'Yp57V71dkOPiXjiN8VdcFRsVELzlVNKK',
         ak: 'RpQi6WNFZ9tseKzhdwOQsXwFsoVntnsN',
         v: '3.0'

src/stores/monitoringPoint.ts

@@ -3,6 +3,7 @@ import { defineStore } from 'pinia'
 interface MonitoringPoint {
     lineId: string
     lineName: string
+    pid: string
     lineIds: string[]
     showCheckBox: boolean
 }
@@ -13,18 +14,19 @@ export const useMonitoringPoint = defineStore(
         const state: MonitoringPoint = reactive({
             lineId: '',
             lineName: '',
+            pid: '',
             lineIds: [],
             showCheckBox: false
         })
-        const setValue = (key: keyof Pick<MonitoringPoint, 'lineId' | 'lineName' | 'lineIds'>, val: any) => {
+        const setValue = (key: keyof Pick<MonitoringPoint, 'lineId' | 'lineName' | 'lineIds' | 'pid'>, val: any) => {
             state[key] = val
         }
         const setShowCheckBox = (val: boolean) => {
             if (val && state.lineIds.length === 0) {
                 state.lineIds = [state.lineId]
-                console.log('====================================');
+                console.log('====================================')
-                console.log(state.lineIds);
+                console.log(state.lineIds)
-                console.log('====================================');
+                console.log('====================================')
             }
             state.showCheckBox = val
         }

src/utils/echartMethod.ts

@@ -20,6 +20,9 @@ export const yMethod = (arr: any) => {
         } else {
             min = Math.floor(minValue / 100) * 100
         }
+    } else if (maxValue < 60 && minValue > 40) {
+        max = 60
+        min = 40
     } else if (maxValue == minValue && maxValue < 10 && minValue > 0) {
         max = Math.ceil(maxValue / 10) * 10
         min = Math.floor(minValue / 10) * 10

src/utils/webSocketClient.ts

@@ -0,0 +1,197 @@
+import { ElMessage, EVENT_CODE } from 'element-plus'
+
+// 定义消息类型，用于类型检查
+type MessageType = {
+    [key: string]: any
+}
+
+export default class SocketService {
+    // 单例模式实例
+    private static instance: SocketService | null = null
+    // 和服务端连接的socket对象
+    private ws: WebSocket | null = null
+    // 存储回调函数
+    private callBackMapping: { [key: string]: ((message: MessageType) => void) | null } = {}
+    // 标识是否连接成功
+    private connected: boolean = false
+    // 记录重试的次数
+    private sendRetryCount: number = 0
+    // 重新连接尝试的次数
+    private connectRetryCount: number = 0
+    // Web Worker 实例
+    private work: Worker | null = null
+    // 临时的 Blob URL
+    private workerBlobUrl: string | null = null
+    // 上次活动时间戳
+    private lastActivityTime: number = 0
+    // 最后一次收到心跳回复时间
+    private lastResponseHeartTime: number = Date.now()
+    // 重新连接延迟，单位毫秒
+    private reconnectDelay: number = 5000
+
+    // 单例模式获取实例
+    public static get Instance(): SocketService {
+        if (!this.instance) {
+            this.instance = new SocketService()
+        }
+        return this.instance
+    }
+
+    // 定义连接服务器的方法
+    public connect(id: string): void {
+        if (!window.WebSocket) {
+            console.log('您的浏览器不支持WebSocket')
+            return
+        }
+
+        const url = 'ws://192.168.1.79:10407/api/pushMessage/' + id
+        this.ws = new WebSocket(url)
+
+        this.ws.onopen = () => this.handleOpen()
+        this.ws.onclose = () => this.handleClose()
+        this.ws.onerror = () => this.handleError()
+        this.ws.onmessage = event => this.handleMessage(event)
+    }
+
+    // 处理连接成功事件
+    private handleOpen(): void {
+        ElMessage.success('webSocket连接服务端成功了')
+        console.log('连接服务端成功了')
+        this.connected = true
+        this.connectRetryCount = 0
+        this.updateLastActivityTime()
+        this.startHeartbeat()
+    }
+
+    // 处理连接关闭事件
+    private handleClose(): void {
+        console.log('连接webSocket服务端关闭')
+        this.connected = false
+        this.connectRetryCount++
+        this.clearHeartbeat()
+        // 可根据需要添加重连逻辑
+        // setTimeout(() => this.connect(), 500 * this.connectRetryCount);
+    }
+
+    // 处理连接错误事件
+    private handleError(): void {
+        ElMessage.error('webSocket连接异常！')
+    }
+
+    // 处理服务端发送过来的数据
+    private handleMessage(event: MessageEvent): void {
+        // console.log('🚀 ~ SocketService ~ handleMessage ~ event.data:', event.data)
+
+        if (event.data == '连接成功') {
+            this.sendHeartbeat()
+        } else if (event.data.length > 10) {
+            let message: MessageType
+            try {
+                // console.log('Received message:', event.data)
+                message = JSON.parse(event.data)
+            } catch (e) {
+                console.error('消息解析失败', event.data, e)
+                return
+            }
+            // console.log("🚀 ~ SocketService ~ handleMessage ~ message:", message)
+
+            // 通过接受服务端发送的type字段来回调函数
+            if (message.key && this.callBackMapping['message']) {
+                this.callBackMapping['message']!(message)
+            } else {
+                console.log('抛弃====>')
+                // console.log(event.data)
+                // 丢弃或继续写你的逻辑
+            }
+        } else {
+            ElMessage.error(event.data)
+        }
+    }
+
+    // 启动心跳检测
+    private startHeartbeat(): void {
+        this.lastResponseHeartTime = Date.now()
+        const url = window.URL.createObjectURL(
+            new Blob(['(function(e){setInterval(function(){this.postMessage(null)},30000)})()'])
+        )
+        this.workerBlobUrl = url
+        this.work = new Worker(url)
+        this.work.onmessage = e => this.handleWorkerMessage(e)
+    }
+
+    // 处理 Web Worker 消息
+    private handleWorkerMessage(e: MessageEvent): void {
+        // if (this.lastActivityTime - this.lastResponseHeartTime > 30000) {
+        //     // 说明已经三轮心跳没收到回复了，关闭检测，提示用户。
+        //     // ElMessage.error('业务主体模块发生未知异常，请尝试重新启动！')
+        //     this.clearHeartbeat()
+        //     return
+        // }
+        // console.log(123);
+
+        this.sendHeartbeat()
+    }
+
+    // 发送心跳消息
+    private sendHeartbeat(): void {
+        // console.log(new Date() + '进入心跳消息发送。。。。。。。。。。。。。')
+        if (this.ws) {
+            this.ws.send('alive')
+            this.updateLastActivityTime()
+        }
+    }
+
+    // 更新活动时间
+    private updateLastActivityTime(): void {
+        this.lastActivityTime = Date.now()
+    }
+
+    // 清除心跳检测
+    private clearHeartbeat(): void {
+        if (this.work) {
+            this.work.terminate()
+            this.work = null
+        }
+        if (this.workerBlobUrl) {
+            window.URL.revokeObjectURL(this.workerBlobUrl)
+            this.workerBlobUrl = null
+        }
+    }
+
+    // 回调函数的注册
+    public registerCallBack(socketType: string, callBack: (message: MessageType) => void): void {
+        this.callBackMapping[socketType] = callBack
+    }
+
+    // 取消某一个回调函数
+    public unRegisterCallBack(socketType: string): void {
+        this.callBackMapping[socketType] = null
+    }
+
+    // 发送数据的方法
+    public send(data: any): void {
+        if (this.connected) {
+            this.sendRetryCount = 0
+            try {
+                if (this.ws) {
+                    this.ws.send(JSON.stringify(data))
+                }
+            } catch (e) {
+                if (this.ws) {
+                    this.ws.send(data)
+                }
+            }
+        } else {
+            this.sendRetryCount++
+            setTimeout(() => this.send(data), this.sendRetryCount * 500)
+        }
+    }
+
+    // 断开方法
+    public closeWs(): void {
+        if (this.connected && this.ws) {
+            this.ws.close()
+        }
+        console.log('执行WS关闭命令..')
+    }
+}

src/views/pqs/harmonicMonitoring/monitoringPoint/online/index.vue

@@ -2,36 +2,48 @@
     <div class="default-main" style="padding: 10px">
         <splitpanes :style="height" class="default-theme" id="navigation-splitpanes">
             <pane :size="size">
-                <PointTree ref="pointTree" :default-expand-all="false"
+                <PointTree
+                    ref="pointTree"
+                    :default-expand-all="false"
                     :default-expanded-keys="monitoringPoint.state.lineId ? [monitoringPoint.state.lineId] : []"
-                    :current-node-key="monitoringPoint.state.lineId" :show-checkbox="monitoringPoint.state.showCheckBox"
+                    :current-node-key="monitoringPoint.state.lineId"
-                    :default-checked-keys="monitoringPoint.state.lineIds" @check="handleCheckChange"
+                    :show-checkbox="monitoringPoint.state.showCheckBox"
-                    @node-click="handleNodeClick" @init="handleNodeClick"></PointTree>
+                    :default-checked-keys="monitoringPoint.state.lineIds"
+                    @check="handleCheckChange"
+                    @node-click="handleNodeClick"
+                    @init="handleNodeClick"
+                ></PointTree>
             </pane>
             <pane>
                 <div style="position: relative; height: 100%">
-                    <el-tabs v-model="activeName" type="border-card" class="demo-tabs" style="height: 100%">
+                    <el-tabs
+                        v-model="activeName"
+                        type="border-card"
+                        class="demo-tabs"
+                        style="height: 100%"
+                        @tab-change="handleTabChange"
+                    >
                         <!-- <el-tab-pane label="稳态综合评估" name="1" lazy v-if="!isReload">
                             <Wentaizonghepinggu />
                         </el-tab-pane> -->
                         <el-tab-pane label="稳态指标合格率" name="2" lazy v-if="!isReload">
-                            <Wentaizhibiaohegelv />
+                            <Wentaizhibiaohegelv v-if="activeName == '2'" />
                         </el-tab-pane>
                         <el-tab-pane label="稳态数据分析" name="3" lazy v-if="!isReload">
-                            <Wentaishujufenxi />
+                            <Wentaishujufenxi v-if="activeName == '3'" />
                         </el-tab-pane>
                         <el-tab-pane label="谐波频谱" name="4" lazy v-if="!isReload">
-                            <Xiebopingpu />
+                            <Xiebopingpu v-if="activeName == '4'" />
                         </el-tab-pane>
-                        <!-- <el-tab-pane label="告警数据统计" name="5" lazy v-if="!isReload">
+                        <!-- <el-tab-pane label="告警数据统计" name="5" lazy v-if="!isReload ">
-                            <Gaojingshujutongji />
+                            <Gaojingshujutongji v-if=" activeName == '5'"/>
                         </el-tab-pane> -->
                         <el-tab-pane label="监测点运行状态" name="6" lazy v-if="!isReload">
-                            <Yunxingzhuangtai />
+                            <Yunxingzhuangtai v-if="activeName == '6'" />
+                        </el-tab-pane>
+                        <el-tab-pane label="实时数据" name="7" lazy v-if="!isReload">
+                            <Shishishuju v-if="activeName == '7'" />
                         </el-tab-pane>
-                        <!-- <el-tab-pane label="实时数据" name="7" lazy v-if="!isReload">
-                            <Shishishuju />
-                        </el-tab-pane> -->
                     </el-tabs>
                     <!-- <div
                         class="monitoring-point"
@@ -78,7 +90,9 @@ onMounted(() => {
 })
 const handleNodeClick = (data: any, node: any) => {
     if (data.level === 6) {
+        console.log('🚀 ~ handleNodeClick ~ data:', data)
         monitoringPoint.setValue('lineId', data.id)
+        monitoringPoint.setValue('pid', data.pids)
         monitoringPoint.setValue('lineName', data.alias)
     }
 }
@@ -88,6 +102,9 @@ const handleCheckChange = (data: any, node: any) => {
         node.checkedNodes.filter((item: any) => item.level === 6).map((item: any) => item.id)
     )
 }
+const handleTabChange = () => {
+    monitoringPoint.setShowCheckBox(false)
+}
 watch(
     () => router.currentRoute.value.query.lineId,
     (newLineId, oldLineId) => {

src/views/pqs/harmonicMonitoring/monitoringPoint/online/shishishuju/spectrum.vue

@@ -0,0 +1,345 @@
+<template>
+    <div class="pt50">
+        <el-button class="shutDown" icon="el-icon-Back" @click="emit('shutDown')">返回</el-button>
+        <div class="select">
+            <div class="mr10">谐波次数</div>
+            <el-select v-model="selectValue" style="width: 100px" @change="loading = true">
+                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
+        </div>
+        <el-tabs type="border-card" v-model="activeName" @tab-change="handleClick" v-loading="loading">
+            <el-tab-pane v-for="(item, index) in tabsList" :label="item.groupName" :name="index" :key="index">
+                <div>
+                    <div class="realtrend_top">
+                        <div class="realtrend_table">
+                            <div class="thead_left">
+                                <p style="font-weight: 700; background-color: #f3f6f9">次数(次)</p>
+                                <p>{{ item.groupName }}{{ item.unit ? '(' + item.unit + ')' : '' }}</p>
+                            </div>
+                            <div class="thead_right">
+                                <div
+                                    class="right_cell"
+                                    v-for="i in selectValue == '1'
+                                        ? item.title.filter(num => (activeName == 1 ? num - 0.5 : num) % 2 !== 0)
+                                        : selectValue == '2'
+                                        ? item.title.filter(num => (activeName == 1 ? num - 0.5 : num) % 2 == 0)
+                                        : item.title"
+                                    :key="index"
+                                >
+                                    <p style="background-color: #f3f6f9">
+                                        <span>{{ i }}次</span>
+                                    </p>
+                                    <p>
+                                        <span>{{ item.data[`h${i}`] == 0 ? 0 : item.data[`h${i}`] || '/' }}</span>
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="mt10" :style="height">
+                        <MyEchart ref="barCharts" :options="tabsList[0].echartsData"></MyEchart>
+                    </div>
+                </div>
+            </el-tab-pane>
+        </el-tabs>
+    </div>
+</template>
+<script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue'
+import MyEchart from '@/components/echarts/MyEchart.vue'
+import { getOverLimitData } from '@/api/device-boot/communicate'
+import { mainHeight } from '@/utils/layout'
+import { useMonitoringPoint } from '@/stores/monitoringPoint'
+const emit = defineEmits(['shutDown'])
+const monitoringPoint = useMonitoringPoint()
+const options = [
+    {
+        value: '3',
+        label: '全部'
+    },
+
+    {
+        value: '1',
+        label: '奇次'
+    },
+    {
+        value: '2',
+        label: '偶次'
+    }
+]
+const height = mainHeight(315)
+const barCharts = ref()
+const loading = ref(true)
+const crossTheLine: any = ref({})
+const tabsList: any = ref([
+    {
+        id: '6d5470f509ca271d7108a86e83bb283f',
+        groupName: '谐波电压含有率',
+        thdDataVOS: null,
+        thdDataTdVODatas: null,
+        unit: '%',
+        title: [
+            2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30,
+            31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50
+        ],
+        data: {},
+        echartsData: {}
+    },
+    {
+        id: 'ae31115b83f02f03a0d3bd65cb017121',
+        groupName: '间谐波电压含有率',
+        thdDataVOS: null,
+        thdDataTdVODatas: null,
+        unit: '%',
+        title: [
+            0.5, 1.5, 2.5, 3.5, 4.5, 5.5, 6.5, 7.5, 8.5, 9.5, 10.5, 11.5, 12.5, 13.5, 14.5, 15.5, 16.5, 17.5, 18.5,
+            19.5, 20.5, 21.5, 22.5, 23.5, 24.5, 25.5, 26.5, 27.5, 28.5, 29.5, 30.5, 31.5, 32.5, 33.5, 34.5, 35.5, 36.5,
+            37.5, 38.5, 39.5, 40.5, 41.5, 42.5, 43.5, 44.5, 45.5, 46.5, 47.5, 48.5, 49.5
+        ],
+        data: {},
+        echartsData: {}
+    },
+    {
+        id: '8dc260f16280184e2b57d26668dc00b1',
+        groupName: '谐波电流幅值',
+        thdDataVOS: null,
+        thdDataTdVODatas: null,
+        unit: 'A',
+        title: [
+            2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30,
+            31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50
+        ],
+
+        data: {},
+        echartsData: {}
+    }
+])
+
+const selectValue = ref('1')
+const activeName = ref(0)
+// 点击tab
+const handleClick = (tab: any, event: any) => {
+    loading.value = true
+}
+const init = (row: any) => {
+    let vData: any = {}
+    let iData: any = {}
+    let SvData: any = {}
+    for (let i = 1; i < 50; i++) {
+        vData[`h${i + 1}`] =
+            Math.floor(Math.max(...[row.V.A[`V` + i], row.V.B[`V` + i], row.V.C[`V` + i]].map(Number)) * 100) / 100
+
+        SvData[`h${i - 0.5}`] =
+            Math.floor(Math.max(...[row.V.A[`SV_` + i], row.V.B[`SV_` + i], row.V.C[`SV_` + i]].map(Number)) * 100) /
+            100
+        iData[`h${i + 1}`] =
+            Math.floor(Math.max(...[row.I.A[`I` + i], row.I.B[`I` + i], row.I.C[`I` + i]].map(Number)) * 100) / 100
+    }
+    SvData[`h49.5`] =
+        Math.floor(Math.max(...[row.V.A[`SV_50`], row.V.B[`SV_50`], row.V.C[`SV_50`]].map(Number)) * 100) / 100
+
+    tabsList.value[0].data = vData
+    tabsList.value[1].data = SvData
+    tabsList.value[2].data = iData
+
+    let xData =
+        selectValue.value == '1'
+            ? tabsList.value[activeName.value].title.filter(num => (activeName.value == 1 ? num - 0.5 : num) % 2 !== 0)
+            : selectValue.value == '2'
+            ? tabsList.value[activeName.value].title.filter(num => (activeName.value == 1 ? num - 0.5 : num) % 2 === 0)
+            : tabsList.value[activeName.value].title
+
+    barCharts.value[activeName.value]?.setOptions({
+        xAxis: {
+            data: xData.map(num => `${num}次`)
+        },
+        series: [
+            {
+                name: tabsList.value[activeName.value].groupName,
+                type: 'bar',
+                data: xData.map(num => {
+                    return tabsList.value[activeName.value].data[`h${num}`]
+                })
+            },
+            {
+                data: xData.map(num => {
+                    return (
+                        crossTheLine.value[
+                            activeName.value == 0
+                                ? `uharm${num}`
+                                : activeName.value == 1
+                                ? `inuharm${num + 0.5}`
+                                : `iharm${num}`
+                        ] || ''
+                    )
+                })
+            }
+        ]
+    })
+    loading.value = false
+}
+// 设置ecartsData
+const echarts = (num: number) => {
+    return {
+        title: {
+            text: tabsList.value[num].groupName
+        },
+        xAxis: {
+            name: tabsList.value[num].unit,
+            data: []
+        },
+        yAxis: {},
+        color: ['#2E8B57', '#DAA520'],
+        options: {
+            series: [
+                {
+                    name: tabsList.value[num].groupName,
+                    type: 'bar',
+
+                    data: []
+                },
+                {
+                    name: '国标限值(%)',
+                    type: 'bar',
+                    // label: {
+                    //     normal: {
+                    //         position: 'top'
+                    //     }
+                    // },
+                    data: []
+                }
+            ]
+        }
+    }
+}
+onMounted(() => {
+    tabsList.value[0].echartsData = echarts(0)
+    tabsList.value[0].echartsData = echarts(1)
+    tabsList.value[0].echartsData = echarts(2)
+    getOverLimitData({ id: monitoringPoint.state.lineId }).then(res => {
+        crossTheLine.value = res.data
+    })
+})
+defineExpose({
+    init
+})
+</script>
+<style lang="scss" scoped>
+.shutDown {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+}
+.select {
+    position: absolute;
+    top: 10px;
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+}
+.realtrend_top {
+    width: 100%;
+    height: auto;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .table {
+        flex: 1;
+        // min-height: 80px;
+        cursor: pointer;
+        min-height: 90px;
+        max-height: 170px;
+        border: 1px solid #eee;
+        overflow-x: auto;
+        overflow-y: hidden;
+        position: relative;
+
+        ul {
+            width: auto;
+            height: 40px;
+            display: flex;
+
+            li {
+                flex: none;
+                width: 100px;
+                line-height: 40px;
+                border: 1px solid #eee;
+                text-align: center;
+                list-style: none;
+            }
+        }
+
+        ul:nth-child(1) {
+            li {
+                font-weight: 800;
+                background: #f4f6f9;
+            }
+        }
+    }
+
+    // .table::-webkit-scrollbar {
+    //     display: none;
+    // }
+
+    .realtrend_table {
+        width: 100%;
+        height: auto;
+        max-height: 150px;
+        display: flex;
+        border: 2px solid #eee;
+        cursor: pointer;
+        font-size: 13px;
+
+        .thead_left {
+            width: 150px;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            align-items: center;
+            line-height: 50px;
+
+            padding-bottom: 5px;
+
+            p {
+                width: 100%;
+                height: 100%;
+                text-align: center;
+                border: 1px solid #eee;
+                line-height: 38px;
+                margin: 0 !important;
+            }
+        }
+
+        .thead_right {
+            flex: 1;
+            align-items: center;
+            overflow-x: auto;
+            overflow-y: hidden;
+            display: flex;
+            padding-bottom: 5px;
+
+            .right_cell {
+                width: 100%;
+                display: flex;
+                flex-direction: column;
+
+                p {
+                    flex: none;
+                    min-width: 60px;
+                    height: 100%;
+                    text-align: center;
+                    border: 1px solid #eee;
+                    line-height: 38px;
+                    margin: 0 !important;
+                }
+
+                p:nth-child(1) {
+                    font-weight: 800;
+                }
+            }
+        }
+    }
+}
+</style>

src/views/pqs/harmonicMonitoring/monitoringPoint/online/shishishuju/trend.vue

@@ -0,0 +1,384 @@
+<template>
+    <div class="pt50">
+        <el-button class="shutDown" icon="el-icon-Back" @click="emit('shutDown')">返回</el-button>
+        <div class="select">
+            <el-form :model="searchForm" id="history_select">
+                <el-form-item label="稳态指标">
+                    <el-select
+                        multiple
+                        collapse-tags
+                        collapse-tags-tooltip
+                        v-model.trim="searchForm.index"
+                        placeholder="请选择统计指标"
+                        :multiple-limit="3"
+                        value-key="id"
+                        @change="change"
+                    >
+                        <el-option
+                            v-for="(item, index) in indexOptions"
+                            :label="item.name"
+                            :key="index"
+                            :value="item"
+                        ></el-option>
+                    </el-select>
+                </el-form-item>
+            </el-form>
+        </div>
+        <div v-loading="loading" id="trend">
+            <div :style="height" v-for="(item, index) in searchForm.index" :key="index">
+                <MyEchart ref="MyEchartRef" :options="item.echartsData" :isInterVal="true"></MyEchart>
+            </div>
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+import { ref, reactive, onMounted, onBeforeUnmount } from 'vue'
+import MyEchart from '@/components/echarts/MyEchart.vue'
+import { mainHeight } from '@/utils/layout'
+import { timeFormat } from '@/utils/common'
+import { useConfig } from '@/stores/config'
+import { yMethod } from '@/utils/echartMethod'
+import html2canvas from 'html2canvas'
+import * as echarts from 'echarts' // 全引入
+const config = useConfig()
+const props = defineProps({
+    ptName: {
+        type: String
+    }
+})
+const loading = ref(true)
+const emit = defineEmits(['shutDown'])
+const searchForm: any = ref({ index: [] })
+const timeList = ref([])
+const MyEchartRef = ref()
+const height = ref(mainHeight(150, 2))
+//统计指标
+const indexOptions: any = ref([
+    {
+        id: 0,
+        name: '电压总有效值(kV)',
+        children: [
+            { name: 'vRmsA', phase: props.ptName == 'star' ? 'A相' : 'AB相', data: [] },
+            { name: 'vRmsB', phase: props.ptName == 'star' ? 'B相' : 'BC相', data: [] },
+            { name: 'vRmsC', phase: props.ptName == 'star' ? 'C相' : 'CA相', data: [] }
+        ],
+        color: ['#FFCC00', '#2E8B57', '#A52a2a'],
+        unit: 'kV',
+        data: []
+    },
+    {
+        id: 1,
+        name: '电流总有效值(A)',
+        children: [
+            { name: 'iRmsA', phase: 'A相', data: [] },
+            { name: 'iRmsB', phase: 'B相', data: [] },
+            { name: 'iRmsC', phase: 'C相', data: [] }
+        ],
+        color: ['#FFCC00', '#2E8B57', '#A52a2a'],
+        unit: 'A',
+        data: []
+    },
+    {
+        id: 2,
+        name: '有功功率(kW)',
+        children:
+            props.ptName == 'star'
+                ? [
+                      { name: 'pA', phase: 'A相', data: [] },
+                      { name: 'pB', phase: 'B相', data: [] },
+                      { name: 'pC', phase: 'C相', data: [] },
+                      { name: 'pTot', phase: '总', data: [] }
+                  ]
+                : [{ name: 'pTot', phase: '总', data: [] }],
+        color: props.ptName == 'star' ? ['#FFCC00', '#2E8B57', '#A52a2a', '#000'] : ['#000'],
+        unit: 'kW',
+        data: []
+    },
+    {
+        id: 3,
+        name: '无功功率(kW)',
+        children:
+            props.ptName == 'star'
+                ? [
+                      { name: 'qA', phase: 'A相', data: [] },
+                      { name: 'qB', phase: 'B相', data: [] },
+                      { name: 'qC', phase: 'C相', data: [] },
+                      { name: 'qTot', phase: '总', data: [] }
+                  ]
+                : [{ name: 'qTot', phase: '总', data: [] }],
+        color: props.ptName == 'star' ? ['#FFCC00', '#2E8B57', '#A52a2a', '#000'] : ['#000'],
+        unit: 'kW',
+        data: []
+    },
+
+    {
+        id: 4,
+        name: '基波电压总有效值(kV)',
+        children: [
+            { name: 'v1A', phase: props.ptName == 'star' ? 'A相' : 'AB相', data: [] },
+            { name: 'v1B', phase: props.ptName == 'star' ? 'B相' : 'BC相', data: [] },
+            { name: 'v1C', phase: props.ptName == 'star' ? 'C相' : 'CA相', data: [] }
+        ],
+        color: ['#FFCC00', '#2E8B57', '#A52a2a'],
+        unit: 'kV',
+        data: []
+    },
+    {
+        id: 5,
+        name: '基波电流总有效值(A)',
+        children: [
+            { name: 'i1A', phase: 'A相', data: [] },
+            { name: 'i1B', phase: 'B相', data: [] },
+            { name: 'i1C', phase: 'C相', data: [] }
+        ],
+        color: ['#FFCC00', '#2E8B57', '#A52a2a'],
+        unit: 'A',
+        data: []
+    },
+    {
+        id: 6,
+        name: '频率(Hz)',
+        children: [
+            { name: 'freq', phase: '频率', data: [] },
+            { name: 'freqDev', phase: '频率偏差', data: [] }
+        ],
+        color: [config.layout.elementUiPrimary[0], '#00BFF5'],
+        unit: 'Hz',
+        data: []
+    },
+    {
+        id: 7,
+        name: '电压不平衡度(%)',
+        children: [{ name: 'vUnbalance', phase: '电压不平衡度', data: [] }],
+        color: [config.layout.elementUiPrimary[0]],
+        unit: '%',
+        data: []
+    },
+    {
+        id: 8,
+        name: '电流不平衡度(%)',
+        children: [{ name: 'iUnbalance', phase: '电流不平衡度', data: [] }],
+        color: [config.layout.elementUiPrimary[0]],
+        unit: '%',
+        data: []
+    }
+])
+const change = () => {
+    height.value = mainHeight(150, searchForm.value.index.length)
+    // let name = searchForm.value.index.map(item => item.name)
+    // let list = indexOptions.value.filter(item => !name.includes(item.name))
+    loading.value = true
+    searchForm.value.index.forEach((item: any) => {
+        item.echartsData.xAxis.data = []
+        item.echartsData.series.forEach((child: any) => {
+            child.data = []
+        })
+    })
+
+    // console.log("🚀 ~ change ~ MyEchartRef.value[0]?.getChart():", MyEchartRef.value[0]?.getChart())
+}
+onMounted(() => {
+    setEcharts()
+    searchForm.value.index.push(...[indexOptions.value[0], indexOptions.value[1]])
+})
+const init = (row: any) => {
+    // timeList.value.push(timeFormat(row.TIME - 0))
+    searchForm.value.index.forEach((item: any, index: any) => {
+        // item.echartsData.xAxis.data.push(timeFormat(row.TIME - 0))
+        let time = timeFormat(row.TIME - 0)
+        switch (item.name) {
+            case '电压总有效值(kV)':
+                item.echartsData.series[0].data.push([
+                    time,
+                    Math.floor((props.ptName == 'star' ? row.V.A.VRMS : row.V.A.VRMS_LVR) * 100) / 100
+                ])
+                item.echartsData.series[1].data.push([
+                    time,
+                    Math.floor((props.ptName == 'star' ? row.V.B.VRMS : row.V.B.VRMS_LVR) * 100) / 100
+                ])
+                item.echartsData.series[2].data.push([
+                    time,
+                    Math.floor((props.ptName == 'star' ? row.V.C.VRMS : row.V.C.VRMS_LVR) * 100) / 100
+                ])
+                break
+            case '电流总有效值(A)':
+                item.echartsData.series[0].data.push([time, Math.floor(row.I.A.IRMS * 100) / 100])
+                item.echartsData.series[1].data.push([time, Math.floor(row.I.B.IRMS * 100) / 100])
+                item.echartsData.series[2].data.push([time, Math.floor(row.I.C.IRMS * 100) / 100])
+                break
+            case '有功功率(kW)':
+                if (props.ptName == 'star') {
+                    item.echartsData.series[0].data.push([time, Math.floor(row.PQ.A.P * 100) / 100])
+                    item.echartsData.series[1].data.push([time, Math.floor(row.PQ.B.P * 100) / 100])
+                    item.echartsData.series[2].data.push([time, Math.floor(row.PQ.C.P * 100) / 100])
+                    item.echartsData.series[3].data.push([time, Math.floor(row.PQ.T.P * 100) / 100])
+                } else {
+                    item.echartsData.series[0].data.push([time, Math.floor(row.PQ.T.P * 100) / 100])
+                }
+
+                break
+            case '无功功率(kW)':
+                if (props.ptName == 'star') {
+                    item.echartsData.series[0].data.push([time, Math.floor(row.PQ.A.Q * 100) / 100])
+                    item.echartsData.series[1].data.push([time, Math.floor(row.PQ.B.Q * 100) / 100])
+                    item.echartsData.series[2].data.push([time, Math.floor(row.PQ.C.Q * 100) / 100])
+                    item.echartsData.series[3].data.push([time, Math.floor(row.PQ.T.Q * 100) / 100])
+                } else {
+                    item.echartsData.series[0].data.push([time, Math.floor(row.PQ.T.Q * 100) / 100])
+                }
+
+                break
+            case '基波电压总有效值(kV)':
+                item.echartsData.series[0].data.push([time, Math.floor(row.V.A.V1 * 100) / 100])
+                item.echartsData.series[1].data.push([time, Math.floor(row.V.B.V1 * 100) / 100])
+                item.echartsData.series[2].data.push([time, Math.floor(row.V.C.V1 * 100) / 100])
+                break
+            case '基波电流总有效值(A)':
+                item.echartsData.series[0].data.push([time, Math.floor(row.I.A.I1 * 100) / 100])
+                item.echartsData.series[1].data.push([time, Math.floor(row.I.B.I1 * 100) / 100])
+                item.echartsData.series[2].data.push([time, Math.floor(row.I.C.I1 * 100) / 100])
+                break
+            case '频率(Hz)':
+                item.echartsData.series[0].data.push([time, Math.floor(row.V.T.FREQ * 100) / 100])
+                item.echartsData.series[1].data.push([time, Math.floor(row.V.T.DELTA_FREQ * 100) / 100])
+                break
+            case '电压不平衡度(%)':
+                item.echartsData.series[0].data.push([time, Math.floor(row.V.T.V_UNBAN * 100) / 100])
+
+                break
+            case '电流不平衡度(%)':
+                item.echartsData.series[0].data.push([time, Math.floor(row.I.T.I_UNBAN * 100) / 100])
+                break
+        }
+        item.echartsData.series.forEach((item1: any) => {
+            if (item1.data.length > 60) {
+                item1.data.shift()
+            }
+        })
+
+        let [min, max] = yMethod([].concat(...item.echartsData.series.map(k => k.data).map(k1 => k1.map(k2 => k2[1]))))
+        item.echartsData.yAxis.min = min
+        item.echartsData.yAxis.max = max
+    })
+
+    MyEchartRef.value[0]?.setOptions(searchForm.value.index[0].echartsData)
+    MyEchartRef.value[1]?.setOptions(searchForm.value.index[1].echartsData)
+    MyEchartRef.value[2]?.setOptions(searchForm.value.index[2].echartsData)
+    if (loading.value) {
+        echarts.connect('group')
+    }
+
+    loading.value = false
+}
+const setEcharts = () => {
+    indexOptions.value.forEach((item: any, index: any) => {
+        item.echartsData = {
+            title: {
+                text: item.name
+            },
+
+            xAxis: {
+                name: '时间',
+                type: 'time',
+                axisLabel: {
+                    interval: 0, // 强制显示所有标签
+                    formatter: {
+                        day: '{MM}-{dd}',
+                        month: '{MM}',
+                        year: '{yyyy}'
+                    }
+                },
+
+                data: []
+            },
+
+            yAxis: {
+                // type: 'value',
+                name: item.unit,
+                splitNumber: 5,
+                minInterval: 1,
+                alignTicks: true // 强制对齐刻度
+            },
+            toolbox: {
+                right: 20,
+                top: 15,
+                show: index == 0 ? true : false,
+                feature: {
+                    // 移除默认的 saveAsImage
+                    // saveAsImage: { title: '保存图片' }
+                    myCustomDownload: {
+                        title: '', // 按钮标题
+                        icon: 'path://M892.342857 463.238095l-73.142857-68.266666-258.438095 258.438095V29.257143h-97.52381v624.152381L204.8 394.971429 131.657143 463.238095l380.342857 380.342857zM107.27619 897.219048h804.571429v97.523809H107.27619z', // 自定义图标路径
+
+                        onclick: function () {
+                            html2canvas(document.getElementById('trend'), {
+                                scale: 1
+                            }).then(function (canvas) {
+                                // 创建a标签，实现下载
+                                let creatIMg = document.createElement('a')
+                                creatIMg.download = '实时趋势.png' // 设置下载的文件名，
+                                creatIMg.href = canvas.toDataURL() // 下载url
+                                creatIMg.click()
+                                creatIMg.remove() // 下载之后把创建的元素删除
+                            })
+                        }
+                    }
+                }
+            },
+
+            tooltip: {
+                axisPointer: {
+                    type: 'cross',
+                    label: {
+                        color: '#fff',
+                        fontSize: 16
+                    }
+                },
+                textStyle: {
+                    color: '#fff',
+                    fontStyle: 'normal',
+                    opacity: 0.35,
+                    fontSize: 14
+                },
+                backgroundColor: 'rgba(0,0,0,0.55)',
+                borderWidth: 0
+            },
+            series: []
+        }
+        item.children.map((zz: any, zzIndex: any) => {
+            item.echartsData.series.push({
+                name: zz.phase,
+                type: 'line',
+                increment: true,
+                itemStyle: {
+                    barBorderRadius: [3, 3, 0, 0],
+                    color: [...item.color][zzIndex]
+                },
+                data: [],
+                smooth: true, // 这里设置平滑曲线
+                symbol: 'none' // 设置为 'none' 去掉折点小圆
+            })
+        })
+    })
+}
+onBeforeUnmount(() => {
+    echarts.disconnect('group')
+})
+defineExpose({
+    init
+})
+</script>
+<style lang="scss" scoped>
+.shutDown {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+}
+.select {
+    position: absolute;
+    top: 10px;
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+}
+</style>

src/views/pqs/harmonicMonitoring/monitoringPoint/online/wentaishujufenxi/index.vue

@@ -1,6 +1,8 @@
 <template>
-    <div style="display: flex; flex-direction: column; height: 100%">
+    <div>
-        <el-form :inline="true">
+        <div v-show="view">
+            <TableHeader ref="tableHeaderRef" :showSearch="false" @selectChange="selectChange">
+                <template v-slot:select>
                     <el-form-item label="多监测点">
                         <el-checkbox v-model="checked" @change="checkChange" />
                     </el-form-item>
@@ -8,50 +10,87 @@
                         <DatePicker ref="datePickerRef"></DatePicker>
                     </el-form-item>
                     <el-form-item label="指标类型:">
-                <el-select v-model="formData.condition" multiple collapse-tags :multiple-limit="5" filterable
+                        <el-select
-                    placeholder="请选择指标" @change="conditionChange">
+                            v-model="formData.condition"
+                            multiple
+                            collapse-tags
+                            :multiple-limit="5"
+                            filterable
+                            placeholder="请选择指标"
+                            @change="conditionChange"
+                        >
                             <el-option-group v-for="group in indexOptions" :key="group.label" :label="group.label">
-                        <el-option v-for="item in group.options" :key="item.value" :label="item.label"
+                                <el-option
-                            :value="item.value"></el-option>
+                                    v-for="item in group.options"
+                                    :key="item.value"
+                                    :label="item.label"
+                                    :value="item.value"
+                                ></el-option>
                             </el-option-group>
                         </el-select>
                     </el-form-item>
                     <el-form-item label="数值类型:">
                         <el-select style="width: 100%" v-model="formData.valueType" placeholder="请选择类型">
-                    <el-option v-for="item in typeOptions" :key="item.value" :label="item.label"
+                            <el-option
-                        :value="item.value"></el-option>
+                                v-for="item in typeOptions"
+                                :key="item.value"
+                                :label="item.label"
+                                :value="item.value"
+                            ></el-option>
                         </el-select>
                     </el-form-item>
-            <el-form-item label="谐波次数:" v-if="showXieBoCiShu">
+                    <el-form-item label="谐波次数:" v-show="showXieBoCiShu">
                         <el-select style="width: 100%" v-model="formData.harmonic" placeholder="请选择谐波">
-                    <el-option v-for="item in harmonicOptions" :key="item.value" :label="item.label"
+                            <el-option
-                        :value="item.value"></el-option>
+                                v-for="item in harmonicOptions"
+                                :key="item.value"
+                                :label="item.label"
+                                :value="item.value"
+                            ></el-option>
                         </el-select>
                     </el-form-item>
-            <el-form-item v-if="showJianXieBoCiShu" label="间谐波次数:">
+                    <el-form-item v-show="showJianXieBoCiShu" label="间谐波次数:">
                         <el-select style="width: 100%" v-model="formData.inHarmonic" placeholder="请选择间谐波">
-                    <el-option v-for="item in inharmonicOptions" :key="item.value" :label="item.label"
+                            <el-option
-                        :value="item.value"></el-option>
+                                v-for="item in inharmonicOptions"
+                                :key="item.value"
+                                :label="item.label"
+                                :value="item.value"
+                            ></el-option>
                         </el-select>
                     </el-form-item>
-            <el-form-item>
+                </template>
+                <template v-slot:operation>
                     <el-button type="primary" @click="init" icon="el-icon-Search">查询</el-button>
-            </el-form-item>
+                </template>
-        </el-form>
+            </TableHeader>
-        <div style="flex: 1; overflow-y: scroll" class="mt10">
+            <!-- <el-form :inline="true">
-            <my-echart :options="item.option" v-for="item in list" :style="height" />
+           
+        </el-form> -->
+            <div id="canvas" class="mt10" :style="height1" v-loading="loading">
+                <my-echart :options="item.option" v-for="item in list" :style="height" @triggerPoint="triggerPoint" />
+            </div>
+        </div>
+        <div :style="{ height: pageHeight.height }" style="padding: 10px; overflow: hidden" v-if="!view">
+            <waveForm ref="waveFormRef" senior  @backbxlb="backbxlb" />
         </div>
     </div>
 </template>
 
 <script setup lang="ts">
-import { nextTick, onMounted, reactive, ref } from 'vue'
+import { nextTick, onMounted, reactive, ref, onBeforeUnmount } from 'vue'
 import DatePicker from '@/components/form/datePicker/index.vue'
 import MyEchart from '@/components/echarts/MyEchart.vue'
 import { useMonitoringPoint } from '@/stores/monitoringPoint'
 import { indexOptions, harmonicOptions, inharmonicOptions } from '@/utils/dictionary'
 import { getHistoryResult } from '@/api/harmonic-boot/harmonic'
 import { mainHeight } from '@/utils/layout'
+import TableHeader from '@/components/table/header/index.vue'
+import { queryEventDetailByEventId } from '@/api/event-boot/highAndLowPressure'
+import TableStore from '@/utils/tableStore'
+import waveForm from '@/components/echarts/waveForm.vue'
+import html2canvas from 'html2canvas'
+import * as echarts from 'echarts' // 全引入
 const datePickerRef = ref()
 const monitoringPoint = useMonitoringPoint()
 const checked = ref(monitoringPoint.state.showCheckBox)
@@ -75,6 +114,16 @@ const formData = reactive<{
     inHarmonic: 1,
     ptType: 0
 })
+const wp = ref({})
+const pageHeight = mainHeight(20)
+const view = ref(true)
+const waveFormRef = ref()
+const tableStore = new TableStore({
+    url: '',
+    method: 'POST',
+    column: []
+})
+const tableHeaderRef = ref()
 const options = ref({})
 const traceability = ref<any>([])
 const list = ref<any>([])
@@ -90,6 +139,7 @@ onMounted(() => {
     init()
 })
 const height: any = ref(mainHeight(200, 1))
+const height1: any = ref(mainHeight(200))
 const checkChange = () => {
     if (checked.value) {
         monitoringPoint.setShowCheckBox(true)
@@ -111,13 +161,18 @@ const init = () => {
             return false
         }
     })
-    getHistoryResult(formData).then((res: any) => {
+    getHistoryResult(formData)
+        .then((res: any) => {
             if (directionValue >= 0) {
                 res.data[directionValue].targetName = '谐波电流方向'
                 traceability.value = [(res.data as [])[directionValue]]
             }
             list.value = []
             shujuchuli(res)
+            loading.value = false
+        })
+        .catch(() => {
+            loading.value = false
         })
 }
 const shujuchuli = (res: any) => {
@@ -1091,11 +1146,10 @@ const shujuchuli = (res: any) => {
     rendering()
 }
 const rendering = () => {
-    height.value = mainHeight(200, list.value.length > 1 ? 2 : 1)
+    height.value = mainHeight(160, list.value.length)
 
     list.value.forEach((item: any) => {
         if (item.targetName == '电压不平衡') {
-
             item.valueName = ''
             item.legend = item.legend.map((item2: any) => {
                 if (item2 == '零序电压') {
@@ -1107,7 +1161,6 @@ const rendering = () => {
                 }
                 return item2
             })
-           
         }
 
         let opitonserise: any[] = []
@@ -1335,7 +1388,7 @@ const getEcharts = () => {
                     opacity: 0.35,
                     fontSize: 14
                 },
-                backgroundColor: 'rgba(0,0,0,0.35)',
+                backgroundColor: 'rgba(0,0,0,0.55)',
 
                 formatter: function (params: any) {
                     let tips = ''
@@ -1377,12 +1430,12 @@ const getEcharts = () => {
                             let str = (params[i].value[1] * 1).toString()
                             let reg = str.indexOf('.') > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g
                             let str1 = str.replace(reg, '$1,')
-                            tips += params[i].seriesName.replace("(kV)", "") + ':' + str1 + 'kV<br/>'
+                            tips += params[i].seriesName.replace('(kV)', '') + ':' + str1 + 'kV<br/>'
                         } else if (params[i].seriesName == '零序电压(V)' || params[i].seriesName == '负序电压(V)') {
                             let str = (params[i].value[1] * 1).toString()
                             let reg = str.indexOf('.') > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g
                             let str1 = str.replace(reg, '$1,')
-                            tips += params[i].seriesName.replace("(V)", "") + ':' + str1 + 'V<br/>'
+                            tips += params[i].seriesName.replace('(V)', '') + ':' + str1 + 'V<br/>'
                         } else if (params[i].seriesName !== '正序电压(kV)') {
                             let str = (params[i].value[1] * 1).toString()
                             let reg = str.indexOf('.') > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g
@@ -1407,9 +1460,35 @@ const getEcharts = () => {
                     return tips
                 }
             },
+            toolbox: {
+                right: 20,
+                top: 15,
+                show: i == 0 ? true : false,
+                feature: {
+                    // 移除默认的 saveAsImage
+                    // saveAsImage: { title: '保存图片' }
+                    myCustomDownload: {
+                        title: '', // 按钮标题
+                        icon: 'path://M892.342857 463.238095l-73.142857-68.266666-258.438095 258.438095V29.257143h-97.52381v624.152381L204.8 394.971429 131.657143 463.238095l380.342857 380.342857zM107.27619 897.219048h804.571429v97.523809H107.27619z', // 自定义图标路径
+
+                        onclick: function () {
+                            html2canvas(document.getElementById('canvas'), {
+                                scale: 1
+                            }).then(function (canvas) {
+                                // 创建a标签，实现下载
+                                let creatIMg = document.createElement('a')
+                                creatIMg.download = '稳态数据分析.png' // 设置下载的文件名，
+                                creatIMg.href = canvas.toDataURL() // 下载url
+                                creatIMg.click()
+                                creatIMg.remove() // 下载之后把创建的元素删除
+                            })
+                        }
+                    }
+                }
+            },
             legend: {
-                left: '50px',
+                right: 50,
-                top: '25px',
+                top: 25,
                 verticalAlign: 'top',
                 enabled: true,
                 itemDistance: 5,
@@ -1424,7 +1503,7 @@ const getEcharts = () => {
                 }
             },
             grid: {
-                top: '70px',
+                top: '70px'
             },
             xAxis: [
                 {
@@ -1468,7 +1547,7 @@ const getEcharts = () => {
                         show: true,
                         onZero: false, //-----------重点
                         lineStyle: {}
-                    },
+                    }
                     // splitLine: {
                     //     lineStyle: {
                     //         // 使用深浅的间隔色
@@ -1589,6 +1668,7 @@ const getEcharts = () => {
             ]
         }
     })
+    echarts.connect('group')
 }
 const conditionChange = () => {
     //判断一个指标时
@@ -1725,6 +1805,39 @@ const conditionChange = () => {
             { label: 'cp95值', value: 4 }
         ]
     }
+    setTimeout(() => {
+        console.log('🚀 ~ setTimeout ~  tableHeaderRef.value:', tableHeaderRef.value)
+
+        tableHeaderRef.value && tableHeaderRef.value?.computedSearchRow()
+    }, 100)
 }
+
+// 点击暂降触发点
+const triggerPoint = (data: any) => {
+    let nameList = monitoringPoint.state.lineName.split('>')
+
+    view.value = false
+    setTimeout(() => {
+        queryEventDetailByEventId({ eventId: data[2] }).then(res => {
+            waveFormRef.value.open({
+                ...res.data,
+                subName: nameList[nameList.length - 2].split('（')[0] || nameList[nameList.length - 2],
+                lineName: nameList[nameList.length - 1].split('_')[1] || nameList[nameList.length - 1]
+            })
+            waveFormRef.value.setHeight(220, 180)
+        })
+    }, 100)
+}
+// 计算高度
+const selectChange = (flag: boolean) => {
+    height.value = mainHeight(flag ? 220 : 160, list.value.length)
+}
+const backbxlb = () => {
+    view.value = true
+}
+provide('tableStore', tableStore)
+onBeforeUnmount(() => {
+    echarts.disconnect('group')
+})
 </script>
 <style></style>

src/views/pqs/harmonicMonitoring/monitoringPoint/online/wentaizhibiaohegelv/index.vue

@@ -1,19 +1,26 @@
 <template>
     <div style="display: flex; flex-direction: column; height: 100%">
-        <el-form :inline="true">
+        <TableHeader ref="TableHeaderRef" :showSearch="false">
+            <template v-slot:select>
                 <el-form-item label="日期">
                     <DatePicker ref="datePickerRef"></DatePicker>
                 </el-form-item>
                 <el-form-item label="对比">
                     <el-select v-model="searchType" clearable placeholder="可选择同比、环比">
-                    <el-option v-for="item in searchTypeOptions" :key="item.value" :label="item.label"
+                        <el-option
-                        :value="item.value" />
+                            v-for="item in searchTypeOptions"
+                            :key="item.value"
+                            :label="item.label"
+                            :value="item.value"
+                        />
                     </el-select>
                 </el-form-item>
-            <el-form-item>
+            </template>
+            <template v-slot:operation>
                 <el-button type="primary" @click="init" icon="el-icon-Search">查询</el-button>
-            </el-form-item>
+            </template>
-        </el-form>
+        </TableHeader>
+
         <div style="flex: 1" class="mt10" v-loading="loading">
             <my-echart :options="options" />
         </div>
@@ -26,7 +33,13 @@ import MyEchart from '@/components/echarts/MyEchart.vue'
 import { useMonitoringPoint } from '@/stores/monitoringPoint'
 import { getSteadyData } from '@/api/harmonic-boot/pollution'
 import { gradeColor3 } from '@/components/echarts/color'
-import { formatter } from 'element-plus'
+import TableHeader from '@/components/table/header/index.vue'
+import TableStore from '@/utils/tableStore'
+const tableStore = new TableStore({
+    url: '',
+    method: 'POST',
+    column: []
+})
 const datePickerRef = ref()
 const monitoringPoint = useMonitoringPoint()
 const loading = ref(true)
@@ -289,7 +302,7 @@ const init = () => {
         })
     })
 }
-
+provide('tableStore', tableStore)
 onMounted(() => {
     init()
 })

src/views/pqs/harmonicMonitoring/monitoringPoint/online/xiebopingpu/index.vue

@@ -1,6 +1,7 @@
 <template>
     <div style="display: flex; flex-direction: column; height: 100%">
-        <el-form :inline="true">
+        <TableHeader ref="TableHeaderRef" :showSearch="false" >
+            <template v-slot:select>
                 <el-form-item label="日期">
                 <DatePicker ref="datePickerRef"></DatePicker>
             </el-form-item>
@@ -10,10 +11,13 @@
                     <el-radio-button :label="1">谐波电流幅值</el-radio-button>
                 </el-radio-group>
             </el-form-item>
-            <el-form-item>
+            </template>
+            <template v-slot:operation>
                 <el-button type="primary" @click="init" icon="el-icon-Search">查询</el-button>
-            </el-form-item>
+               
-        </el-form>
+            </template>
+        </TableHeader>
+    
         <vxe-table :data="analysisData" v-bind="defaultAttribute">
             <vxe-column field="name" title="指标" width="140px"></vxe-column>
             <vxe-column
@@ -35,7 +39,13 @@ import MyEchart from '@/components/echarts/MyEchart.vue'
 import { useMonitoringPoint } from '@/stores/monitoringPoint'
 import { getHarmInHarmData } from '@/api/harmonic-boot/inHarm'
 import { defaultAttribute } from '@/components/table/defaultAttribute'
-
+import TableHeader from '@/components/table/header/index.vue'
+import TableStore from '@/utils/tableStore'
+const tableStore = new TableStore({
+    url: '',
+    method: 'POST',
+    column: []
+})
 const datePickerRef = ref()
 const monitoringPoint = useMonitoringPoint()
 const loading = ref(true)
@@ -107,6 +117,7 @@ const init = () => {
         })
     })
 }
+provide('tableStore', tableStore)
 onMounted(() => {
     init()
 })

src/views/pqs/harmonicMonitoring/monitoringPoint/online/yunxingzhuangtai/index.vue

@@ -1,6 +1,7 @@
 <template>
     <div style="display: flex; flex-direction: column; height: 100%">
-        <el-form :inline="true">
+        <TableHeader ref="TableHeaderRef" :showSearch="false" >
+            <template v-slot:select>
                 <el-form-item label="日期">
                 <DatePicker ref="datePickerRef"></DatePicker>
             </el-form-item>
@@ -14,10 +15,12 @@
                     />
                 </el-select>
             </el-form-item>
-            <el-form-item>
+            </template>
+            <template v-slot:operation>
                 <el-button type="primary" @click="init" icon="el-icon-Search">查询</el-button>
-            </el-form-item>
+            </template>
-        </el-form>
+        </TableHeader>
+       
         <div style="flex: 1; display: flex; overflow: hidden" class="mt10" v-loading="loading">
             <div style="flex: 1">
                 <my-echart :options="options1" />
@@ -35,7 +38,13 @@ import MyEchart from '@/components/echarts/MyEchart.vue'
 import { useMonitoringPoint } from '@/stores/monitoringPoint'
 import { getProbabilityDistribution } from '@/api/event-boot/monitor'
 import { getRunInfoData, getComFlagInfoData } from '@/api/device-boot/communicate'
-
+import TableHeader from '@/components/table/header/index.vue'
+import TableStore from '@/utils/tableStore'
+const tableStore = new TableStore({
+    url: '',
+    method: 'POST',
+    column: []
+})
 const datePickerRef = ref()
 const monitoringPoint = useMonitoringPoint()
 const loading = ref(true)
@@ -173,5 +182,6 @@ const handlerOptions2 = (data: any) => {
         ]
     }
 }
+provide('tableStore', tableStore)
 </script>
 <style></style>