From f442e1eeec6ef9c833129c1d250a520c4d3c2fb6 Mon Sep 17 00:00:00 2001
From: zhujiyan <17812234322@163.com>
Date: Mon, 21 Oct 2024 19:00:52 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../currentDevice.vue                         |   9 +-
 .../tabs/components/harmonicSpectrum.vue      |  27 ++-
 .../control/tabs/components/realtrend.vue     | 207 ++++++------------
 src/views/govern/device/fileService/index.vue |   4 +-
 4 files changed, 92 insertions(+), 155 deletions(-)

diff --git a/src/views/govern/device/control/supplementaryRecruitment/currentDevice.vue b/src/views/govern/device/control/supplementaryRecruitment/currentDevice.vue
index c69e43d..59cdf99 100644
--- a/src/views/govern/device/control/supplementaryRecruitment/currentDevice.vue
+++ b/src/views/govern/device/control/supplementaryRecruitment/currentDevice.vue
@@ -111,16 +111,16 @@ const handleUpDevice = () => {
         ndid: routes.query.ndid,
         proList: proList
     }
-    loading.value = true
+    // loading.value = true
     offlineDataUploadMakeUp(form)
         .then((res: any) => {
             if (res.code == 'A0000') {
                 ElMessage.success(res.message)
-                loading.value = false
+                // loading.value = false
             }
         })
         .catch(e => {
-            loading.value = false
+            // loading.value = false
         })
 }
 const handleIntoDir = (row: any) => {
@@ -173,6 +173,7 @@ mqttRef.value.on('message', (topic: any, message: any) => {
     // console.log('🚀 ~ mqttRef.value.on ~ message:', JSON.parse(message))
     // console.log('mqtt接收到消息', message,topic)
     console.log('mqtt接收到消息', JSON.parse(JSON.stringify(JSON.parse(new TextDecoder().decode(message)))))
+    loading.value = false
     // "{allStep:\""+times+"\",nowStep:"+i+"}"
     let str = JSON.parse(JSON.stringify(JSON.parse(new TextDecoder().decode(message))))
     // eval('(' + str + ')').includes('fileName')
@@ -182,7 +183,7 @@ mqttRef.value.on('message', (topic: any, message: any) => {
         allStep: str.match(regex1)[1],
         nowStep: str.match(regex2)[1]
     }
-    console.log(mqttMessage.value, '?????????')
+    console.log(mqttMessage.value, '=============================================185')
     let checkedList = tableRef.value.getCheckboxRecords().map((item: any) => {
         return item.name
     })
diff --git a/src/views/govern/device/control/tabs/components/harmonicSpectrum.vue b/src/views/govern/device/control/tabs/components/harmonicSpectrum.vue
index 6d1f54a..8b2ffd3 100644
--- a/src/views/govern/device/control/tabs/components/harmonicSpectrum.vue
+++ b/src/views/govern/device/control/tabs/components/harmonicSpectrum.vue
@@ -1,4 +1,4 @@
-<!-- 谐波频谱 -->
+<!-- 实时数据页面 -->
 <template>
     <div class="harmonic" :style="heightTop">
         <div class="harmonic_select">
@@ -275,14 +275,14 @@ const init = () => {
     searchForm.value.index.map((item: any, index: any) => {
         item?.children.map((vv: any, vvs: any) => {
             if (mqttMessage.value[vv.name]) {
-                console.log(
-                    mqttMessage.value[vv.name],
-                    '这是一个哥哥哥哥哥哥哥哥还是哈哈',
-                    mqttMessage.value.dataTime,
-                    vvs,
-                    index,
-                    vv.name
-                )
+                // console.log(
+                //     mqttMessage.value[vv.name],
+                //     '这是一个哥哥哥哥哥哥哥哥还是哈哈',
+                //     mqttMessage.value.dataTime,
+                //     vvs,
+                //     index,
+                //     vv.name
+                // )
                 item.linesList = []
                 item?.data.push({
                     time: mqttMessage.value.dataTime,
@@ -384,7 +384,7 @@ const init = () => {
         searchForm.value.index.length == 3
             ? (height = mainHeight(275, 3).height)
             : (height = mainHeight(275, searchForm.value.index.length).height)
-        item.children.map((zz: any) => {
+        item.children.map((zz: any,zzIndex:any) => {
             item.echartsData.options.legend.data.push(zz.phase)
             item.echartsData.options.series.push({
                 name: zz.phase,
@@ -393,9 +393,14 @@ const init = () => {
                 barMaxWidth: 24, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
                 itemStyle: {
                     // normal: {
-                    barBorderRadius: [3, 3, 0, 0]
+                    barBorderRadius: [3, 3, 0, 0],
+                    color:['#DAA520', '#2E8B57', '#A52a2a', '#000'][zzIndex],
                     // color: '#00CC99'
                     // }e
+                    // 修改线条颜色
+                    // lineStyle: {
+                    //     color: ['#DAA520', '#2E8B57', '#A52a2a', '#000'][index]
+                    // }
                 },
                 data: zz.data,
                 smooth: true, // 这里设置平滑曲线
diff --git a/src/views/govern/device/control/tabs/components/realtrend.vue b/src/views/govern/device/control/tabs/components/realtrend.vue
index 577e785..c527d2c 100644
--- a/src/views/govern/device/control/tabs/components/realtrend.vue
+++ b/src/views/govern/device/control/tabs/components/realtrend.vue
@@ -1,7 +1,7 @@
-<!-- 实时数据 - 实时趋势 -->
+<!-- 实时数据 - 谐波频谱页面 -->
 <template>
     <div class="realtrend" v-loading="loading">
-        <el-tabs type="border-card" v-if="tabsList.length!=0" v-model="activeName" @tab-click="handleClick">
+        <el-tabs type="border-card" v-if="tabsList.length != 0" v-model="activeName" @tab-click="handleClick">
             <el-tab-pane v-for="(item, index) in tabsList" :label="item.groupName" :name="index" :key="index">
                 <div>
                     <div class="realtrend_top">
@@ -28,7 +28,8 @@
                             </div>
                             <div class="thead_right">
                                 <div class="right_cell" v-for="(value, key, index) in tableData" :key="index">
-                                    <p>
+                                    <p v-if="item.groupName.includes('间谐波') && index != 50">{{ index + 0.5 }}次</p>
+                                    <p v-else>
                                         <span>{{ String(key).replace('data', ' ') }}次</span>
                                     </p>
                                     <p>
@@ -55,7 +56,7 @@
                 </div>
             </el-tab-pane>
         </el-tabs>
-        <el-empty v-else/>
+        <!-- <el-empty v-else/> -->
     </div>
 </template>
 <script lang="ts" setup>
@@ -63,9 +64,7 @@ import { ref, onMounted, reactive, nextTick, defineEmits } from 'vue'
 import { VxeGridProps, VxeGridPropTypes } from 'vxe-table'
 import { defaultAttribute } from '@/components/table/defaultAttribute'
 import MyEchart from '@/components/echarts/MyEchart.vue'
-import { Platform, TrendCharts, DataLine } from '@element-plus/icons-vue'
 import { getDeviceTrendDataGroup, getDeviceTrendData } from '@/api/cs-device-boot/EquipmentDelivery.ts'
-import Index from '@/components/wangEditor/index.vue'
 const activeName = ref(0)
 const emit = defineEmits(['changeTrendType'])
 const tableList: any = []
@@ -85,127 +84,58 @@ const gridOptions = ref<VxeGridProps<RowVO>>({
     align: 'center'
 })
 gridOptions.value = { ...defaultAttribute, ...gridOptions.value }
-const myColumns: any = ref([
-    // { field: 'name', title: '次数' }
-    // { field: 'value', title: '谐波电压含有率(%)' }
-])
 
-const myData = tableList
-const tabsList = ref([])
+const tabsList: any = ref([])
+const loading: any = ref(true)
 //接收参数
 const params = ref({})
 const open = async (val: any) => {
-    //获取指标tab
     loading.value = true
-   await getDeviceTrendDataGroup().then(res => {
-        tabsList.value = res.data
-        if (tabsList.value.length != 0) {
-            // activeName.value = tabsList.value[0]?.id
-            activeName.value = val.activeTrendName || 0
+    //获取指标tab
+    // await getDeviceTrendDataGroup().then(res => {
+    //     tabsList.value = res.data.reverse()
+    //     if (tabsList.value.length != 0) {
+    //         // activeName.value = tabsList.value[0]?.id
+    //         activeName.value = val.activeTrendName || 0
+    //     }
+    //     params.value = { groupId: tabsList.value[activeName.value]?.id, ...val }
+    // })
+    tabsList.value = [
+        {
+            id: '6d5470f509ca271d7108a86e83bb283f',
+            groupName: '谐波电压含有率',
+            thdDataVOS: null,
+            thdDataTdVODatas: null
+        },
+        {
+            id: '8dc260f16280184e2b57d26668dc00b1',
+            groupName: '谐波电流幅值',
+            thdDataVOS: null,
+            thdDataTdVODatas: null
+        },
+        {
+            id: 'ae31115b83f02f03a0d3bd65cb017121',
+            groupName: '间谐波电压含有率',
+            thdDataVOS: null,
+            thdDataTdVODatas: null
         }
-        params.value = { groupId: tabsList.value[activeName.value]?.id, ...val }
-    })
+    ]
+    if (tabsList.value.length != 0) {
+        // activeName.value = tabsList.value[0]?.id
+        activeName.value = val.activeTrendName || 0
+    }
+    params.value = { groupId: tabsList.value[activeName.value]?.id, ...val }
     init()
+
+    setTimeout(() => {
+        loading.value = false
+    }, 1500)
     return
 }
-const newTableList: any = ref([])
 //根据指标tab查询实时趋势
-const loading: any = ref(false)
 //echarts数据
 const chartsData: any = ref([])
 const chartsYxiasData: any = ref([])
-const findRealTrendDataByGroupId = (obj: any) => {
-    return
-    chartsData.value = []
-    chartsYxiasData.value = []
-    getDeviceTrendData(obj).then(res => {
-        let list: any = []
-        let countList: any = []
-        myColumns.value = [{ field: 'name', title: '次数' }]
-        chartsData.value = res.data[0].thdDataTdVODatas
-        //处理实时趋势表格
-        let arr = res.data[0].thdDataVOS
-        arr.map((item: any, index: any) => {
-            myColumns.value.push({ field: item.phase, title: item.name })
-            chartsYxiasData.value.push({ phase: item.phase, title: item.name, phaseList: [], gbList: [] })
-            //循环第二层数据
-            item.list = []
-            item.data.map((vv: any, vvs: any) => {
-                if (!(vv.statisticalData + '')) {
-                    vv.statisticalData = '/'
-                }
-                item.list.push({ value: vv.statisticalData, count: vv.frequency - 0 })
-            })
-            list[index + 1] = item.list
-            const minCount = Math.min(...item.list.map((item: any) => item.count))
-            const maxCount = Math.max(...item.list.map((item: any) => item.count))
-            for (let i = 0; i < 50; i++) {
-                countList[i] = { value: i + minCount + '次', count: i + minCount }
-            }
-            countList.map((item: any, index: any) => {
-                if (item.value.replace('次', '') - 0 > 50) {
-                    countList.splice(index, 1)
-                }
-            })
-            list[0] = countList
-            if (item.list.length == 0) {
-                for (let i = 0; i < countList.length; i++) {
-                    item.list.push({
-                        value: '/',
-                        count: index
-                    })
-                }
-            }
-            if (item.list.length != 0) {
-                const maxCount1 = Math.max(...countList.map((item: any) => item.count))
-                const maxCount2 = Math.max(...item.list.map((item: any) => item.count))
-                if (maxCount2 < maxCount1) {
-                    for (let i = 0; i < maxCount1 - maxCount2; i++) {
-                        item.list.push({
-                            value: '/',
-                            count: index
-                        })
-                    }
-                }
-            }
-        })
-        // 转换为对象数组
-        list.map((item: any, index: any) => {
-            item.unshift({ value: myColumns.value[index].title, count: '' })
-        })
-        newTableList.value = list
-        loading.value = false
-        init()
-    })
-}
-
-//反转表格
-const reverseTable = () => {
-    const buildData = myColumns.value.map(column => {
-        const item: any = { col0: column.title }
-        myData.forEach((row, index) => {
-            item[`col${index + 1}`] = row[column.field]
-        })
-        return item
-    })
-    const buildColumns: VxeGridPropTypes.Columns = [
-        {
-            field: 'col0',
-            fixed: 'left',
-            width: 200
-        }
-    ]
-    myData.forEach((item, index) => {
-        buildColumns.push({
-            field: `col${index + 1}`,
-            minWidth: 120
-        })
-    })
-    gridOptions.value.data = buildData
-    gridOptions.value.columns = buildColumns
-}
-
-reverseTable()
 
 const echartsData: any = ref([])
 const barCharts = ref()
@@ -214,7 +144,6 @@ const barCharts = ref()
 const init = () => {
     let trendData: any = []
     for (let key in tableData.value) {
-        console.log(key, ',,,,,')
         trendData.push({
             name: key,
             value: tableData.value[key],
@@ -244,21 +173,21 @@ const init = () => {
     echartsData.value = {
         options: {
             // backgroundColor: '#0f375f',
-            dataZoom: [
-                {
-                    type: 'inside',
-                    height: 13,
-                    start: 0,
-                    bottom: '20px',
-                    end: 20
-                },
-                {
-                    start: 0,
-                    height: 13,
-                    bottom: '20px',
-                    end: 20
-                }
-            ],
+            // dataZoom: [
+            //     {
+            //         type: 'inside',
+            //         height: 13,
+            //         start: 0,
+            //         bottom: '20px',
+            //         end: 20
+            //     },
+            //     {
+            //         start: 0,
+            //         height: 13,
+            //         bottom: '20px',
+            //         end: 20
+            //     }
+            // ],
             grid: {
                 top: '14%',
                 bottom: '70px', //也可设置left和right设置距离来控制图表的大小
@@ -288,7 +217,7 @@ const init = () => {
             xAxis: {
                 name: '次数',
                 data: trendData.map((item: any) => {
-                    return item.count+'次'
+                    return item.count + '次'
                 }),
                 axisLine: {
                     show: true, //隐藏X轴轴线
@@ -358,7 +287,6 @@ const init = () => {
     if (barCharts.value) {
         barCharts.value[activeName.value]?.initChart()
     }
-    loading.value = false
     return
 }
 
@@ -371,19 +299,22 @@ const handleClick = (tab: any, event: any) => {
 //获取mqtt传送的实时数据
 const mqttMessage: any = ref()
 const tableData: any = ref({})
-const colorList = ['#0e8780', '#FFCC00', '#009900', '#CC0000']
+const colorList = ['#DAA520', '#2E8B57', '#A52a2a', '#000']
 const setRealTrendData = (val: any) => {
+    console.log(val, '谐波频谱')
     tableData.value = {}
     mqttMessage.value = val
-    loading.value = true
     for (let key in val) {
         if (String(key).includes('data') && String(key) != 'dataLevel' && String(key) != 'dataTime') {
             tableData.value[key] = val[key]
             delete tableData.value.data1
         }
     }
-    loading.value = false
-    init()
+    if (tableData.value) {
+        init()
+    } else {
+        emit('changeTrendType', activeName.value)
+    }
 }
 //获取国标限值
 const limitData: any = ref()
@@ -485,11 +416,11 @@ defineExpose({ open, setRealTrendData, setOverLimitData })
                     flex-direction: column;
                     p {
                         flex: none;
-                        width: 90px;
+                        width: 60px;
                         height: 100%;
                         text-align: center;
                         border: 1px solid #eee;
-                        line-height: 50px;
+                        line-height: 40px;
                         margin: 0 !important;
                     }
                     p:nth-child(1) {
diff --git a/src/views/govern/device/fileService/index.vue b/src/views/govern/device/fileService/index.vue
index cd78a3f..35c8ade 100644
--- a/src/views/govern/device/fileService/index.vue
+++ b/src/views/govern/device/fileService/index.vue
@@ -149,7 +149,7 @@
                         v-if="item?.type == 'file'"
                         src="@/assets/img/wenjian.svg"
                     />
-                    <span v-if="!item.type">暂无数据</span>
+                    <!-- <span v-if="!item.type">暂无数据</span> -->
                     <p>
                         {{
                             item &&
@@ -162,7 +162,7 @@
                     </p>
                 </div>
             </div>
-            <el-empty v-if="dirList.length === 0" />
+            <!-- <el-empty v-if="dirList.length === 0" /> -->
         </div>
         <popup ref="fileRef"></popup>
         <el-dialog