From f12fafd0f2f2a8bd77d4319fde7871495608d73b Mon Sep 17 00:00:00 2001
From: zhujiyan <17812234322@163.com>
Date: Fri, 1 Nov 2024 11:21:12 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/echarts/MyEchart.vue           | 19 +++--
 src/styles/element.scss                       |  5 ++
 src/views/govern/alarm/Transient.vue          | 78 ++++++++++++------
 src/views/govern/device/control/index.vue     | 33 ++++----
 .../control/offLineDataImport/index.vue       | 24 +++---
 .../tabs/components/harmonicSpectrum.vue      | 80 ++++++++++---------
 src/views/govern/device/fileService/index.vue |  1 +
 src/views/govern/device/planData/index.vue    |  6 +-
 8 files changed, 145 insertions(+), 101 deletions(-)

diff --git a/src/components/echarts/MyEchart.vue b/src/components/echarts/MyEchart.vue
index 888b2cd..d671b92 100644
--- a/src/components/echarts/MyEchart.vue
+++ b/src/components/echarts/MyEchart.vue
@@ -34,6 +34,7 @@ const resizeHandler = () => {
     })
 }
 const initChart = () => {
+    console.log(props.options,"888888888");
     if (!props.isInterVal && !props.pieInterVal) {
         chart?.dispose()
     }
@@ -65,7 +66,7 @@ const initChart = () => {
             },
             backgroundColor: 'rgba(0,0,0,0.35)',
             borderWidth: 0,
-            confine:true,
+            confine: true,
             ...(props.options?.tooltip || null)
         },
         toolbox: {
@@ -73,10 +74,9 @@ const initChart = () => {
             top: 20,
             feature: {
                 saveAsImage: {
-                    title: '保存图片',
+                    title: '保存图片'
                 },
-                ...(props.options?.toolbox?.featureProps || null),
-               
+                ...(props.options?.toolbox?.featureProps || null)
             },
             // },
             ...(props.options?.toolbox || null)
@@ -123,9 +123,10 @@ const initChart = () => {
         series: props.options?.series,
         ...props.options?.options
     }
+    // console.log(options.series,"获取x轴");
     handlerBar(options)
     // 处理柱状图
-    chart.setOption(options,true)
+    chart.setOption(options, true)
 
     setTimeout(() => {
         chart.resize()
@@ -214,9 +215,10 @@ const handlerXAxis = () => {
             // textStyle: {
             fontFamily: 'dinproRegular',
             color: '#000',
-            fontSize: '12'
+            fontSize: '12',
             // }
-        }
+        },
+        // boundaryGap: false,
     }
     // props.options?.xAxis 是数组还是对象
     if (Array.isArray(props.options?.xAxis)) {
@@ -234,9 +236,6 @@ const handlerXAxis = () => {
     }
 }
 
-
-
-
 let throttle: ReturnType<typeof setTimeout>
 // 动态计算table高度
 const resizeObserver = new ResizeObserver(entries => {
diff --git a/src/styles/element.scss b/src/styles/element.scss
index 899baf6..7a9bfb2 100644
--- a/src/styles/element.scss
+++ b/src/styles/element.scss
@@ -230,3 +230,8 @@
 .el-collapse-item__content{
     padding-bottom: 0;
 }
+
+//解决打开dialog body容器宽度变为 calc(100% - 8px)问题
+.el-popup-parent--hidden{
+    width: 100%;
+}
\ No newline at end of file
diff --git a/src/views/govern/alarm/Transient.vue b/src/views/govern/alarm/Transient.vue
index 67204c1..13c88d4 100644
--- a/src/views/govern/alarm/Transient.vue
+++ b/src/views/govern/alarm/Transient.vue
@@ -3,9 +3,15 @@
         <TableHeader datePicker>
             <template v-slot:select>
                 <el-form-item label="数据来源">
-                    <el-cascader placeholder="请选择数据来源" @change="sourceChange" v-model="tableStore.table.params.cascader"
-                        :options="deviceTreeOptions" :show-all-levels="false" :props="{ checkStrictly: true }"
-                        clearable></el-cascader>
+                    <el-cascader
+                        placeholder="请选择数据来源"
+                        @change="sourceChange"
+                        v-model="tableStore.table.params.cascader"
+                        :options="deviceTreeOptions"
+                        :show-all-levels="false"
+                        :props="{ checkStrictly: true }"
+                        clearable
+                    ></el-cascader>
                     <!-- <el-input v-model="tableStore.table.params.searchValue" placeholder="请输入设备名称" /> -->
                 </el-form-item>
                 <!-- <el-form-item label="级别">
@@ -25,28 +31,54 @@
                 <div v-if="view2" style="display: flex">
                     <span style="font-size: 14px; line-height: 30px">值类型选择:</span>
                     <el-select @change="changeView" style="width: 240px" v-model="value" placeholder="请选择值类型">
-                        <el-option v-for="item in options" :key="item.value" :label="item.label"
-                            :value="item.value"></el-option>
+                        <el-option
+                            v-for="item in options"
+                            :key="item.value"
+                            :label="item.label"
+                            :value="item.value"
+                        ></el-option>
                     </el-select>
                 </div>
             </el-col>
             <el-col :span="12">
-                <el-button v-if="view2" @click="backbxlb" type="primary" class="el-icon-refresh-right"
-                    icon="el-icon-Back" style="float: right">
+                <el-button
+                    v-if="view2"
+                    @click="backbxlb"
+                    type="primary"
+                    class="el-icon-refresh-right"
+                    icon="el-icon-Back"
+                    style="float: right"
+                >
                     返回
                 </el-button>
             </el-col>
         </el-row>
         <el-tabs v-if="view2" v-model="bxactiveName" @tab-click="bxhandleClick">
-            <el-tab-pane label="瞬时波形" name="ssbx" class="boxbx pt10 pb10"
-                :style="'height:' + bxecharts + ';overflow-y: scroll;'">
-                <shushiboxi 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
+                    v-if="bxactiveName == 'ssbx' && showBoxi"
+                    :value="value"
+                    :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 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
+                    v-if="bxactiveName == 'rmsbx' && showBoxi"
+                    :value="value"
+                    :boxoList="boxoList"
+                    :wp="wp"
+                ></rmsboxi>
             </el-tab-pane>
         </el-tabs>
         <!-- <xiebofenxi  ref="child"  :bxshuju="bxshuju" @backfh="back"></xiebofenxi>  -->
@@ -109,7 +141,7 @@ const tableStore = new TableStore({
         { title: '相别', field: 'evtParamPhase', align: 'center' },
         { title: '持续时间(s)', field: 'evtParamTm', align: 'center' },
         { title: '暂降深度(%)', field: 'evtParamVVaDepth', align: 'center' },
-        { title: '发生时刻', field: 'startTime', align: 'center' },
+        { title: '发生时刻', field: 'startTime', align: 'center', width: '240' },
         {
             title: '操作',
             align: 'center',
@@ -130,8 +162,8 @@ const tableStore = new TableStore({
                         row.loading1 = true
                         boxoList.value = row
                         boxoList.value.systemType = 'WX'
-                        boxoList.value.featureAmplitude = row.evtParamVVaDepth != '-' ? (row.evtParamVVaDepth - 0) : null
-                        boxoList.value.persistTime = row.evtParamTm != '-' ? (row.evtParamTm - 0) : null
+                        boxoList.value.featureAmplitude = row.evtParamVVaDepth != '-' ? row.evtParamVVaDepth - 0 : null
+                        boxoList.value.persistTime = row.evtParamTm != '-' ? row.evtParamTm - 0 : null
                         await analyseWave(row.id)
                             .then(res => {
                                 row.loading1 = false
@@ -188,9 +220,10 @@ const tableStore = new TableStore({
     loadCallback: () => {
         tableStore.table.data.forEach((item: any) => {
             item.loading = false
-            item.evtParamTm = item.evtParamTm.split('s')[0] != '-' ? (item.evtParamTm.split('s')[0] - 0).toFixed(2) : '-'
-            item.evtParamVVaDepth = item.evtParamVVaDepth.split('%')[0] != "-" ? (item.evtParamVVaDepth.split('%')[0] - 0).toFixed(2) : '-'
-
+            item.evtParamTm =
+                item.evtParamTm.split('s')[0] != '-' ? (item.evtParamTm.split('s')[0] - 0).toFixed(2) : '-'
+            item.evtParamVVaDepth =
+                item.evtParamVVaDepth.split('%')[0] != '-' ? (item.evtParamVVaDepth.split('%')[0] - 0).toFixed(2) : '-'
         })
     }
 })
@@ -235,7 +268,6 @@ const sourceChange = (e: any) => {
             tableStore.table.params.deviceTypeId = e[0] || ''
             tableStore.table.params.engineeringid = e[1] || ''
             tableStore.table.params.projectId = e[2] || ''
-
         }
     }
 
@@ -299,6 +331,6 @@ setTimeout(() => {
     tableStore.table.height = mainHeight(200).height as any
 }, 0)
 
-const addMenu = () => { }
+const addMenu = () => {}
 </script>
 <style scoped lang="scss"></style>
diff --git a/src/views/govern/device/control/index.vue b/src/views/govern/device/control/index.vue
index 5e25227..d6cc2e3 100644
--- a/src/views/govern/device/control/index.vue
+++ b/src/views/govern/device/control/index.vue
@@ -126,7 +126,7 @@
                         <el-button type="primary" icon="el-icon-Search" @click="handleClick">查询</el-button>
                         <el-button
                             type="primary"
-                            :loading="tableLoading"
+                            :disabled="tableLoading"
                             v-if="realTimeFlag"
                             :icon="DataLine"
                             @click="handleTrend"
@@ -138,7 +138,7 @@
                             v-if="realTimeFlag"
                             :icon="TrendCharts"
                             @click="handleHarmonicSpectrum"
-                            :loading="tableLoading"
+                            :disabled="tableLoading"
                         >
                             实时趋势
                         </el-button>
@@ -190,7 +190,7 @@
                     "
                 >
                     <!-- 循环渲染的card 最新数据/历史数据显示 -->
-                    <div class="content">
+                    <div class="content" v-if="tableData.length != 0 && !tableLoading">
                         <el-card class="box-card" v-for="(item, index) in tableData" :key="index">
                             <template #header>
                                 <div class="clearfix">
@@ -354,7 +354,7 @@ import {
     getOverLimitData
 } from '@/api/cs-device-boot/EquipmentDelivery'
 import { deviceHisData, deviceRtData } from '@/api/cs-device-boot/csGroup'
-import { ref, reactive, onMounted, onUnmounted, inject, nextTick } from 'vue'
+import { ref, reactive, onMounted, onUnmounted, inject, nextTick, onBeforeUnmount } from 'vue'
 import { ElMessage } from 'element-plus'
 import DatePicker from '@/components/form/datePicker/index.vue'
 import Trend from './tabs/trend.vue' //趋势数据
@@ -444,10 +444,10 @@ const handleTrend = async () => {
                         trendDataTime.value = obj.dataTime
                         realTrendRef.value && realTrendRef.value.setRealTrendData(obj)
                         tableLoading.value = false
-                        console.log(
-                            '谐波频谱---mqtt接收到消息',
-                            JSON.parse(JSON.stringify(JSON.parse(new TextDecoder().decode(message))))
-                        )
+                        // console.log(
+                        //     '谐波频谱---mqtt接收到消息',
+                        //     JSON.parse(JSON.stringify(JSON.parse(new TextDecoder().decode(message))))
+                        // )
                     }
                     // else {
                     //     trendDataTime.value = obj.dataTime
@@ -644,6 +644,7 @@ const connectMqtt = () => {
     mqttRef.value = mqtt.connect(url, options)
 }
 const getRealDataMqttMsg = async () => {
+    tableLoading.value=true
     if (realDataTimer.value) {
         window.clearInterval(realDataTimer.value)
     }
@@ -783,6 +784,7 @@ const getRealDataMqttMsg = async () => {
                     mqttMessage.value = obj
                     //更新实时数据主页面值
                     realTimeFlag.value && realTimeRef.value && realTimeRef.value.setRealData(mqttMessage.value)
+                    tableLoading.value = false
                     //更新实时趋势折线图数据
                     if (sonTab.value == 2) {
                         !realTimeFlag.value &&
@@ -792,7 +794,6 @@ const getRealDataMqttMsg = async () => {
                     }
                 }
 
-                tableLoading.value = false
 
                 //更新谐波频谱数据
                 // !realTimeFlag.value &&
@@ -822,6 +823,7 @@ const getRealDataMqttMsg = async () => {
 const realDataTimer: any = ref()
 const mqttMessage = ref<any>({})
 const handleClick = async (tab?: any) => {
+    tableLoading.value=true
     if (realDataTimer.value) {
         clearInterval(realDataTimer.value)
     }
@@ -831,7 +833,6 @@ const handleClick = async (tab?: any) => {
     sonTab.value = null
     activeTrendName.value = 0
     mqttMessage.value = {}
-    tableLoading.value = true
     //点击tab时更新dataSet最新值
     if (tab && tab.props && tab.props.name && dataSet.value != tab.props.name) {
         dataSet.value = tab.props.name
@@ -984,13 +985,11 @@ const echoName = (value: any, arr: any[]) => {
 }
 
 onMounted(() => {})
-onUnmounted(() => {
-    if (realDataTimer.value) {
-        window.clearInterval(realDataTimer.value)
-    }
-    if (trendTimer.value) {
-        window.clearInterval(trendTimer.value)
-    }
+onBeforeUnmount(() => {
+   clearInterval(realDataTimer.value)
+   clearInterval(trendTimer.value)
+    realDataTimer.value = 0
+    trendTimer.value = 0
     if (mqttRef.value) {
         mqttRef.value.end()
     }
diff --git a/src/views/govern/device/control/offLineDataImport/index.vue b/src/views/govern/device/control/offLineDataImport/index.vue
index 414e37c..e8beb7f 100644
--- a/src/views/govern/device/control/offLineDataImport/index.vue
+++ b/src/views/govern/device/control/offLineDataImport/index.vue
@@ -4,6 +4,15 @@
         <!-- 上传文件列表 -->
         <div class="offline_data">
             <div class="offline_data_btn">
+                <el-button
+                    :loading="loading"
+                    style="margin-left: 10px"
+                    size="small"
+                    type="primary"
+                    @click="submitUpload"
+                >
+                    上传离线数据
+                </el-button>
                 <el-button
                     type="primary"
                     @click="handleUpload"
@@ -24,16 +33,6 @@
                 </el-button>
             </div>
             <div class="offline_data_list">
-                <el-button
-                    :loading="loading"
-                    style="margin-left: 10px"
-                    size="small"
-                    type="primary"
-                    @click="submitUpload"
-                >
-                    上传离线数据
-                </el-button>
-                <div>
                     <div :style="tableHeight">
                         <vxe-table border auto-resize height="auto" :data="offLineFileList" v-bind="defaultAttribute">
                             <vxe-column field="name" align="center" title="文件名"></vxe-column>
@@ -60,13 +59,12 @@
                             </vxe-column>
                         </vxe-table>
                     </div>
-                </div>
             </div>
         </div>
         <template #footer>
             <div class="dialog-footer">
-                <el-button @click="close">取消</el-button>
-                <!-- <el-button type="primary" @click="close">提交</el-button> -->
+                <!-- <el-button @click="close">取消</el-button> -->
+                <el-button type="primary" @click="close">确定</el-button>
             </div>
         </template>
     </el-dialog>
diff --git a/src/views/govern/device/control/tabs/components/harmonicSpectrum.vue b/src/views/govern/device/control/tabs/components/harmonicSpectrum.vue
index 16e5c81..5bf0069 100644
--- a/src/views/govern/device/control/tabs/components/harmonicSpectrum.vue
+++ b/src/views/govern/device/control/tabs/components/harmonicSpectrum.vue
@@ -4,18 +4,33 @@
         <div class="harmonic_select" v-if="!loading">
             <el-form :model="searchForm" id="history_select">
                 <el-form-item label="稳态指标">
-                    <el-select multiple collapse-tags collapse-tags-tooltip v-model="searchForm.index"
-                        placeholder="请选择统计指标" :multiple-limit="3" value-key="id">
-                        <el-option v-for="(item, index) in indexOptions" :label="item.name" :key="index"
-                            :value="item"></el-option>
+                    <el-select
+                        multiple
+                        collapse-tags
+                        collapse-tags-tooltip
+                        v-model="searchForm.index"
+                        placeholder="请选择统计指标"
+                        :multiple-limit="3"
+                        value-key="id"
+                    >
+                        <el-option
+                            v-for="(item, index) in indexOptions"
+                            :label="item.name"
+                            :key="index"
+                            :value="item"
+                        ></el-option>
                     </el-select>
                 </el-form-item>
                 <!-- <el-button type="primary" :loading="loading" @click="init">查询</el-button> -->
             </el-form>
         </div>
         <div class="harmonic_body">
-            <div class="harmonic_body_charts" :style="{ height: height }" v-for="(item, index) in searchForm.index"
-                :key="index">
+            <div
+                class="harmonic_body_charts"
+                :style="{ height: height }"
+                v-for="(item, index) in searchForm.index"
+                :key="index"
+            >
                 <MyEchart :ref="setChildRef(index)" :options="item.echartsData" :isInterVal="true"></MyEchart>
             </div>
         </div>
@@ -143,6 +158,7 @@ let height: any = mainHeight(275).height
 
 const loading = ref(false)
 const allDataList: any = ref([])
+const xAixsTimeList: any = ref([])
 const resetData = () => {
     loading.value = true
     indexOptions.value = [
@@ -252,11 +268,11 @@ const resetData = () => {
     searchForm.value.index = []
     searchForm.value.index[0] = indexOptions.value[0]
     allDataList.value = []
+    xAixsTimeList.value = []
 }
 resetData()
 const mqttMessage: any = ref()
 const setHarmonicSpectrumData = (val: any) => {
-    console.log(val,"来了来了来了");
     mqttMessage.value = val
     init()
 }
@@ -271,36 +287,30 @@ const init = () => {
         item?.children.map((vv: any, vvs: any) => {
             if (mqttMessage.value[vv.name]) {
                 item.data.push({
-                    time: mqttMessage.value.dataTime,
+                    // time: mqttMessage.value.dataTime,
                     value: mqttMessage.value[vv.name],
                     key: vv.name
                 })
                 allDataList.value.push(mqttMessage.value[vv.name])
                 vv.data.push(mqttMessage.value[vv.name])
-                vv.yMethodList.push([mqttMessage.value.dataTime, mqttMessage.value[vv.name] + '', vv.phase])
+                vv.yMethodList.push([mqttMessage.value.dataTime.split(" ")[1], mqttMessage.value[vv.name] + '', vv.phase])
             }
         })
     })
     //循环渲染图表
-    let timeList: any = []
+
+
+    xAixsTimeList.value.push(mqttMessage.value.dataTime.split(" ")[1])
     searchForm.value.index.map((item: any, index: any) => {
-        timeList = Array.from(
-            new Set(
-                item.data.map((vv: any) => {
-                    return vv.time
-                })
-            )
-        )
+  
         //循环渲染图表
         const refName = setChildRef(index)
         childRefs[refName] = ref(null) // 初始化ref
 
         item.echartsData = {
-            title:
-            {
+            title: {
                 text: item.name
-            }
-            ,
+            },
             // grid: {
             //     top: '16%',
             //     bottom: '15%', //也可设置left和right设置距离来控制图表的大小
@@ -326,21 +336,22 @@ const init = () => {
             },
             xAxis: {
                 name: '时间',
-                type: 'time',
-                axisLabel: {
-                    formatter: {
-                        day: '{MM}-{dd}',
-                        month: '{MM}',
-                        year: '{yyyy}'
-                    }
-                }
-                // data: timeList
+                type: 'category',
+                // axisLabel: {
+                //     formatter: {
+                //         day: '{MM}-{dd}',
+                //         month: '{MM}',
+                //         year: '{yyyy}'
+                //     }
+                // },
+                boundaryGap: false,
+                data: xAixsTimeList.value
             },
             yAxis: {
                 // type: 'value',
                 name: item.unit,
                 splitNumber: 5,
-                minInterval: 1,
+                minInterval: 1
             },
             series: []
         }
@@ -349,8 +360,6 @@ const init = () => {
             ? (height = mainHeight(275, 3).height)
             : (height = mainHeight(275, searchForm.value.index.length).height)
         item.children.map((zz: any, zzIndex: any) => {
-
-
             item.echartsData.series.push({
                 name: zz.phase,
                 type: 'line',
@@ -363,9 +372,8 @@ const init = () => {
                 smooth: true, // 这里设置平滑曲线
                 symbol: 'none' // 设置为 'none' 去掉折点小圆
             })
-
         })
-        let arrList = item.children?.map(item => item.yMethodList.map(val => val[1])).flat()
+        let arrList = item.children?.map((item: any) => item.yMethodList.map((val: any) => val[1])).flat()
         let [min, max] = yMethod(arrList.length == 0 ? [0] : arrList)
         item.echartsData.yAxis.max = max
         item.echartsData.yAxis.min = min
@@ -374,7 +382,7 @@ const init = () => {
     loading.value = false
 }
 
-onMounted(() => { })
+onMounted(() => {})
 defineExpose({ resetData, setHarmonicSpectrumData })
 </script>
 <style lang="scss" scoped>
diff --git a/src/views/govern/device/fileService/index.vue b/src/views/govern/device/fileService/index.vue
index 8618eb0..9c27476 100644
--- a/src/views/govern/device/fileService/index.vue
+++ b/src/views/govern/device/fileService/index.vue
@@ -601,6 +601,7 @@ onMounted(() => {
     changeType.value = localStorage.getItem('changeType') ? localStorage.getItem('changeType') : ''
 })
 onBeforeUnmount(() => {
+    console.log(6666);
     if (mqttRef.value) {
         mqttRef.value.end()
     }
diff --git a/src/views/govern/device/planData/index.vue b/src/views/govern/device/planData/index.vue
index e011564..537c7aa 100644
--- a/src/views/govern/device/planData/index.vue
+++ b/src/views/govern/device/planData/index.vue
@@ -753,9 +753,11 @@ const formatCountOptions = (list: any) => {
         countData.value.map((item: any, key: any) => {
             if (item.name.includes('谐波电流有效值')) {
                 item.name = '谐波电流次数'
-            } else if (item.name.includes('谐波电压含有率')) {
+            }
+            if (item.name.includes('谐波电压含有率')) {
                 item.name = '谐波电压次数'
-            } else if (item.name.includes('间谐波电压含有率')) {
+            }
+            if (item.name.includes('间谐波电压含有率')) {
                 item.name = '间谐波电压次数'
             }
         })