From 470c8f5bd6ab71cd088a814d268d720cecd5e18d Mon Sep 17 00:00:00 2001
From: zhujiyan <17812234322@163.com>
Date: Tue, 24 Sep 2024 15:20:45 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B6=8B=E5=8A=BF=E6=95=B0=E6=8D=AE/=E6=9A=82?=
 =?UTF-8?q?=E6=80=81=E6=95=B0=E6=8D=AE/=E5=AE=9E=E6=97=B6=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE=E6=B7=BB=E5=8A=A0loading?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/govern/device/control/index.vue | 321 ++++++++++++++--------
 1 file changed, 200 insertions(+), 121 deletions(-)

diff --git a/src/views/govern/device/control/index.vue b/src/views/govern/device/control/index.vue
index bd4329b..462cb07 100644
--- a/src/views/govern/device/control/index.vue
+++ b/src/views/govern/device/control/index.vue
@@ -1,6 +1,10 @@
 <template>
-    <div class="default-main device-control" :style="{ height: pageHeight.height }" v-loading="loading"
-        style="position: relative">
+    <div
+        class="default-main device-control"
+        :style="{ height: pageHeight.height }"
+        v-loading="loading"
+        style="position: relative"
+    >
         <PointTree @node-click="nodeClick" @init="nodeClick" @pointTypeChange="pointTypeChange"></PointTree>
         <div class="device-control-right" v-if="deviceData">
             <el-descriptions title="设备基本信息" class="mb10" :column="3" border>
@@ -39,8 +43,13 @@
                 </el-descriptions-item>
             </el-descriptions>
             <el-tabs v-model="dataSet" type="border-card" class="device-control-box-card" @tab-click="handleClick">
-                <el-tab-pane lazy :label="item.name" :name="item.id" v-for="(item, index) in deviceData.dataSetList"
-                    :key="index">
+                <el-tab-pane
+                    lazy
+                    :label="item.name"
+                    :name="item.id"
+                    v-for="(item, index) in deviceData.dataSetList"
+                    :key="index"
+                >
                     <template #label>
                         <span class="custom-tabs-label">
                             <el-icon>
@@ -49,35 +58,48 @@
                                 <DataAnalysis v-if="item.name.includes('趋势数据')" />
                                 <Timer v-if="item.name.includes('实时数据')" />
                                 <Monitor v-if="item.name.includes('暂态事件')" />
-                                <Odometer v-if="
-                                    item.name != 'APF模块数据' &&
-                                    item.name != '历史APF模块数据' &&
-                                    !item.name.includes('历史监测') &&
-                                    !item.name.includes('趋势数据') &&
-                                    !item.name.includes('实时数据') &&
-                                    !item.name.includes('暂态事件')
-                                " />
-                                <Histogram v-if="
-                                    item.name != 'APF模块数据' &&
-                                    item.name != '历史APF模块数据' &&
-                                    item.name.includes('历史监测') &&
-                                    !item.name.includes('趋势数据') &&
-                                    !item.name.includes('实时数据') &&
-                                    !item.name.includes('暂态事件')
-                                " />
+                                <Odometer
+                                    v-if="
+                                        item.name != 'APF模块数据' &&
+                                        item.name != '历史APF模块数据' &&
+                                        !item.name.includes('历史监测') &&
+                                        !item.name.includes('趋势数据') &&
+                                        !item.name.includes('实时数据') &&
+                                        !item.name.includes('暂态事件')
+                                    "
+                                />
+                                <Histogram
+                                    v-if="
+                                        item.name != 'APF模块数据' &&
+                                        item.name != '历史APF模块数据' &&
+                                        item.name.includes('历史监测') &&
+                                        !item.name.includes('趋势数据') &&
+                                        !item.name.includes('实时数据') &&
+                                        !item.name.includes('暂态事件')
+                                    "
+                                />
                             </el-icon>
                             <span>{{ item.name }}</span>
                         </span>
                     </template>
                 </el-tab-pane>
-                <el-form :inline="true" style="white-space: nowrap; margin-top: 10px" v-if="
-                    dataSet.indexOf('_trenddata') == -1 &&
-                    dataSet.indexOf('_realtimedata') == -1 &&
-                    dataSet.indexOf('_event') == -1
-                ">
+                <el-form
+                    :inline="true"
+                    style="white-space: nowrap; margin-top: 10px"
+                    v-if="
+                        dataSet.indexOf('_trenddata') == -1 &&
+                        dataSet.indexOf('_realtimedata') == -1 &&
+                        dataSet.indexOf('_event') == -1
+                    "
+                >
                     <el-form-item label="指标">
-                        <el-input style="width: 240px" v-model="formInline.searchValue" autocomplete="off" clearable
-                            placeholder="请输入关键词"></el-input>
+                        <el-input
+                            style="width: 240px"
+                            v-model="formInline.searchValue"
+                            autocomplete="off"
+                            clearable
+                            placeholder="请输入关键词"
+                        ></el-input>
                     </el-form-item>
                     <el-form-item label="日期" v-show="dataSet.indexOf('_history') != -1">
                         <DatePicker ref="datePickerRef"></DatePicker>
@@ -92,26 +114,38 @@
                         <el-button type="primary" icon="el-icon-Search" @click="handleClick">查询</el-button>
                     </el-form-item>
                 </el-form>
-                <div style="height: calc(100vh - 300px)" v-if="
-                    dataSet.indexOf('_trenddata') == -1 &&
-                    dataSet.indexOf('_realtimedata') == -1 &&
-                    dataSet.indexOf('_event') == -1 &&
-                    tableData.length == 0
-                " v-loading="tableLoading"></div>
-                <div style="overflow: auto" :style="{ height: tableHeight }" v-if="
-                    dataSet.indexOf('_trenddata') == -1 &&
-                    dataSet.indexOf('_realtimedata') == -1 &&
-                    dataSet.indexOf('_event') == -1 &&
-                    tableData.length != 0
-                ">
+                <div
+                    style="height: calc(100vh - 300px)"
+                    v-if="
+                        dataSet.indexOf('_trenddata') == -1 &&
+                        dataSet.indexOf('_realtimedata') == -1 &&
+                        dataSet.indexOf('_event') == -1 &&
+                        tableData.length == 0
+                    "
+                    v-loading="tableLoading"
+                ></div>
+                <div
+                    style="overflow: auto"
+                    :style="{ height: tableHeight }"
+                    v-if="
+                        dataSet.indexOf('_trenddata') == -1 &&
+                        dataSet.indexOf('_realtimedata') == -1 &&
+                        dataSet.indexOf('_event') == -1 &&
+                        tableData.length != 0
+                    "
+                >
                     <!-- 循环渲染的card 最新数据/历史数据显示 -->
                     <div class="content">
                         <el-card class="box-card" v-for="(item, index) in tableData" :key="index">
                             <template #header>
                                 <div class="clearfix">
                                     <span style="flex: 1">{{ item.name }}</span>
-                                    <Icon name="el-icon-TrendCharts" class="ml10" @click="getDeviceDataTrend(item)"
-                                        style="font-size: 26px; cursor: pointer; color: #fff"></Icon>
+                                    <Icon
+                                        name="el-icon-TrendCharts"
+                                        class="ml10"
+                                        @click="getDeviceDataTrend(item)"
+                                        style="font-size: 26px; cursor: pointer; color: #fff"
+                                    ></Icon>
                                 </div>
                             </template>
                             <!-- 模块数据 -->
@@ -126,37 +160,49 @@
                             </div>
                             <div v-else-if="item.children.length">
                                 <div style="display: flex; align-items: center">
-                                    <el-tag effect="dark" type="danger" style="width: 40px; text-align: center"
-                                        class="mr10">
+                                    <el-tag
+                                        effect="dark"
+                                        type="danger"
+                                        style="width: 40px; text-align: center"
+                                        class="mr10"
+                                    >
                                         MAX
                                     </el-tag>
                                     {{
                                         item.children[0].maxValue === 3.1415956 ||
-                                            typeof item.children[0].maxValue != 'number'
+                                        typeof item.children[0].maxValue != 'number'
                                             ? '暂无数据'
                                             : item.children[0].maxValue
                                     }}
                                 </div>
                                 <div style="display: flex; align-items: center" class="mt10">
-                                    <el-tag effect="dark" type="success" style="width: 40px; text-align: center"
-                                        class="mr10">
+                                    <el-tag
+                                        effect="dark"
+                                        type="success"
+                                        style="width: 40px; text-align: center"
+                                        class="mr10"
+                                    >
                                         AVG
                                     </el-tag>
                                     {{
                                         item.children[0].avgValue === 3.1415956 ||
-                                            typeof item.children[0].avgValue != 'number'
+                                        typeof item.children[0].avgValue != 'number'
                                             ? '暂无数据'
                                             : item.children[0].avgValue
                                     }}
                                 </div>
                                 <div style="display: flex; align-items: center" class="mt10">
-                                    <el-tag effect="dark" type="warning" style="width: 40px; text-align: center"
-                                        class="mr10">
+                                    <el-tag
+                                        effect="dark"
+                                        type="warning"
+                                        style="width: 40px; text-align: center"
+                                        class="mr10"
+                                    >
                                         MIN
                                     </el-tag>
                                     {{
                                         item.children[0].minValue === 3.1415956 ||
-                                            typeof item.children[0].minValue != 'number'
+                                        typeof item.children[0].minValue != 'number'
                                             ? '暂无数据'
                                             : item.children[0].minValue
                                     }}
@@ -166,22 +212,31 @@
                         <el-empty description="暂无数据" v-if="tableData.length === 0"></el-empty>
                     </div>
                 </div>
-                <el-pagination v-if="
-                    tableData.length &&
-                    dataSet.indexOf('_trenddata') == -1 &&
-                    dataSet.indexOf('_realtimedata') == -1 &&
-                    dataSet.indexOf('_event') == -1
-                " background class="mr2 mt10" style="float: right" @size-change="handleSizeChange"
-                    @current-change="pageChange" :current-page="formInline.pageNum" :page-sizes="[20, 30, 40, 50, 100]"
-                    :page-size="formInline.pageSize" layout="total, sizes, prev, pager, next, jumper"
-                    :total="formInline.total"></el-pagination>
+                <el-pagination
+                    v-if="
+                        tableData.length &&
+                        dataSet.indexOf('_trenddata') == -1 &&
+                        dataSet.indexOf('_realtimedata') == -1 &&
+                        dataSet.indexOf('_event') == -1
+                    "
+                    background
+                    class="mr2 mt10"
+                    style="float: right"
+                    @size-change="handleSizeChange"
+                    @current-change="pageChange"
+                    :current-page="formInline.pageNum"
+                    :page-sizes="[20, 30, 40, 50, 100]"
+                    :page-size="formInline.pageSize"
+                    layout="total, sizes, prev, pager, next, jumper"
+                    :total="formInline.total"
+                ></el-pagination>
 
                 <!-- 趋势数据 -->
-                <div style="height: calc(100vh - 200px)" v-show="dataSet.indexOf('_trenddata') != -1">
+                <div style="height: calc(100vh - 200px)" v-show="dataSet.indexOf('_trenddata') != -1" v-loading="tableLoading">
                     <Trend ref="trendRef"></Trend>
                 </div>
                 <!-- 实时数据 -->
-                <div style="height: calc(100vh - 200px)" v-if="dataSet.indexOf('_realtimedata') != -1">
+                <div style="height: calc(100vh - 200px)" v-if="dataSet.indexOf('_realtimedata') != -1" v-loading="tableLoading">
                     <div class="view_top_btn" v-if="realTimeFlag">
                         <!-- <el-button type="primary" size="small" :icon="Platform" @click="handleRecordWaves">
                             实时录波
@@ -203,11 +258,13 @@
                     <!-- 实时数据-实时趋势组件 -->
                     <realTrend v-show="!realTimeFlag && sonTab == 1" ref="realTrendRef"></realTrend>
                     <!-- 实时数据-谐波频谱组件 -->
-                    <harmonicSpectrum v-show="!realTimeFlag && sonTab == 2" ref="harmonicSpectrumRef">
-                    </harmonicSpectrum>
+                    <harmonicSpectrum
+                        v-show="!realTimeFlag && sonTab == 2"
+                        ref="harmonicSpectrumRef"
+                    ></harmonicSpectrum>
                 </div>
                 <!-- 暂态事件 -->
-                <div style="height: calc(100vh - 200px)" v-show="dataSet.indexOf('_event') != -1">
+                <div style="height: calc(100vh - 200px)" v-show="dataSet.indexOf('_event') != -1" v-loading="tableLoading">
                     <Event ref="eventRef"></Event>
                 </div>
                 <div v-if="!tableData" style="height: 42px"></div>
@@ -346,7 +403,6 @@ const deviceId: any = ref('')
 const lineId: any = ref('')
 const dataLevel: any = ref('')
 const nodeClick = async (e: anyObj) => {
-
     deviceId.value = e?.pid
     lineId.value = e?.id
     if (!e) {
@@ -356,40 +412,45 @@ const nodeClick = async (e: anyObj) => {
     if (e.level == 3) {
         loading.value = true
         formInline.lineId = e.id
-        await getDeviceData(e.pid, 'history', e.id).then((res: any) => {
-            deviceData.value = res.data
-            formInline.dataLevel = res.data.dataLevel
-            dataLevel.value = res.data.dataLevel
-            if (dataLevel.value == 'Secondary') {
-                formInline.dataLevel = 'Primary'
-            }
-            if (!res.data.dataSetList) {
-                dataSet.value = ''
-                tableData.value = []
-            } else {
-                res.data.dataSetList.forEach((item: any) => {
-                    //历史
-                    if (item.type === 'history') {
-                        item.id = item.id + '_history'
-                    }
-                    //趋势数据
-                    if (item.type === 'trenddata') {
-                        item.id = item.id + '_trenddata'
-                    }
-                    //实时数据
-                    if (item.type === 'realtimedata') {
-                        item.id = item.id + '_realtimedata'
-                    }
-                    //暂态事件
-                    if (item.type === 'event') {
-                        item.id = item.id + '_event'
-                    }
-                })
-                dataSet.value = res.data.dataSetList[0].id
-                handleClick()
-            }
-            loading.value = false
-        })
+        await getDeviceData(e.pid, 'history', e.id)
+            .then((res: any) => {
+                deviceData.value = res.data
+                formInline.dataLevel = res.data.dataLevel
+                dataLevel.value = res.data.dataLevel
+                if (dataLevel.value == 'Secondary') {
+                    formInline.dataLevel = 'Primary'
+                }
+                if (!res.data.dataSetList) {
+                    dataSet.value = ''
+                    tableData.value = []
+                    loading.value = false
+                } else {
+                    res.data.dataSetList.forEach((item: any) => {
+                        //历史
+                        if (item.type === 'history') {
+                            item.id = item.id + '_history'
+                        }
+                        //趋势数据
+                        if (item.type === 'trenddata') {
+                            item.id = item.id + '_trenddata'
+                        }
+                        //实时数据
+                        if (item.type === 'realtimedata') {
+                            item.id = item.id + '_realtimedata'
+                        }
+                        //暂态事件
+                        if (item.type === 'event') {
+                            item.id = item.id + '_event'
+                        }
+                    })
+                    dataSet.value = res.data.dataSetList[0].id
+                    handleClick()
+                }
+                loading.value = false
+            })
+            .catch(e => {
+                loading.value = false
+            })
     } else {
         loading.value = false
     }
@@ -418,14 +479,13 @@ const eventRef: any = ref()
 const timer: any = ref()
 //tab点击事件
 const handleClick = async (tab?: any) => {
-
+    tableLoading.value = true
+    // loading.value = true
     //点击tab时更新dataSet最新值
     if (tab && tab.props && tab.props.name && dataSet.value != tab.props.name) {
         dataSet.value = tab.props.name
     }
 
-    tableLoading.value = true
-    loading.value = true
     //初始化点击tab隐藏实时录波、实时趋势、谐波频谱按钮
     realTimeFlag.value = false
     //初始化点击tab隐藏子页面
@@ -444,12 +504,19 @@ const handleClick = async (tab?: any) => {
         formInline.startTime = datePickerRef.value && datePickerRef.value.timeValue[0]
         formInline.endTime = datePickerRef.value && datePickerRef.value.timeValue[1]
         formInline.id = dataSet.value.replace('_history', '')
-        await deviceHisData(formInline).then((res: any) => {
-            tableData.value = res.data.records
-            formInline.total = res.data.total
-            tableLoading.value = false
-            loading.value = false
-        })
+        await deviceHisData(formInline)
+            .then((res: any) => {
+                tableData.value = res.data.records
+                formInline.total = res.data.total
+                setTimeout(() => {
+                    tableLoading.value = false
+                }, 1500)
+            })
+            .catch(e => {
+                setTimeout(() => {
+                    tableLoading.value = false
+                }, 1500)
+            })
     }
     //查询趋势数据
     if (dataSet.value.includes('_trenddata')) {
@@ -465,6 +532,9 @@ const handleClick = async (tab?: any) => {
             ]
         }
         trendRef.value && trendRef.value.getTrendRequest(obj)
+        setTimeout(() => {
+            tableLoading.value = false
+        }, 1500)
     }
     //查询实时数据
     if (dataSet.value.includes('_realtimedata')) {
@@ -476,11 +546,9 @@ const handleClick = async (tab?: any) => {
             lineId: lineId.value //e.pid
         }
         intRealTime(obj)
-    }
-    if (!dataSet.value.includes('_realtimedata')) {
-        // if(timer.value){
-        //      window.clearInterval(timer.value)
-        // }
+        setTimeout(() => {
+            tableLoading.value = false
+        }, 1500)
     }
     //查询暂态事件
     if (dataSet.value.includes('_event')) {
@@ -497,22 +565,33 @@ const handleClick = async (tab?: any) => {
         }
         //暂态事件表格请求参数
         eventRef.value && eventRef.value.getTableParams(obj)
+        setTimeout(() => {
+            tableLoading.value = false
+        }, 1500)
     }
     //查询当前指标
     if (!dataSet.value.includes('_')) {
         formInline.id = dataSet.value
-        await deviceRtData(formInline).then((res: any) => {
-            tableData.value = res.data.records
-            formInline.total = res.data.total
-            tableLoading.value = false
-            loading.value = false
-        })
+        await deviceRtData(formInline)
+            .then((res: any) => {
+                tableData.value = res.data.records
+                formInline.total = res.data.total
+                tableLoading.value = false
+                setTimeout(() => {
+                    loading.value = false
+                }, 1500)
+            })
+            .catch(e => {
+                setTimeout(() => {
+                    tableLoading.value = false
+                }, 1500)
+            })
     }
 
     // }, 100)
 }
 //模版下载
-const handleDownLoadTemplate = () => { }
+const handleDownLoadTemplate = () => {}
 //解析列表
 const analysisListRef = ref()
 //打开解析列表
@@ -573,7 +652,7 @@ const openGroup = () => {
         })
     })
 }
-onMounted(() => { })
+onMounted(() => {})
 </script>
 
 <style lang="scss">