From f2a96f17f59771c4e3997311dfa45c1b43884a39 Mon Sep 17 00:00:00 2001
From: zhujiyan <17812234322@163.com>
Date: Wed, 31 Jul 2024 15:23:48 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=9E=E6=97=B6=E8=B6=8B=E5=8A=BF=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../control/tabs/components/realtrend.vue     | 443 +++---------------
 1 file changed, 65 insertions(+), 378 deletions(-)

diff --git a/src/views/govern/device/control/tabs/components/realtrend.vue b/src/views/govern/device/control/tabs/components/realtrend.vue
index e81c466..89bc6b9 100644
--- a/src/views/govern/device/control/tabs/components/realtrend.vue
+++ b/src/views/govern/device/control/tabs/components/realtrend.vue
@@ -2,7 +2,7 @@
 <template>
     <div class="realtrend">
         <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
-            <el-tab-pane v-for="(item, index) in tabsList" :label="item.groupName" :name="item.id" :key="index">
+            <el-tab-pane v-for="(item, index) in tabsList" :label="item.groupName" :name="index" :key="index">
                 <div v-loading="loading">
                     <div class="realtrend_top">
                         <div class="thead">
@@ -75,14 +75,14 @@
     </div>
 </template>
 <script lang="ts" setup>
-import { ref, onMounted, reactive } from 'vue'
+import { ref, onMounted, reactive, nextTick } 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('')
+const activeName = ref(0)
 
 const tableList: any = []
 interface RowVO {
@@ -130,9 +130,10 @@ const open = (val: any) => {
     getDeviceTrendDataGroup().then(res => {
         tabsList.value = res.data
         if (tabsList.value.length != 0) {
-            activeName.value = tabsList.value[0]?.id
+            // activeName.value = tabsList.value[0]?.id
+            activeName.value = 0
         }
-        params.value = { groupId: activeName.value, ...val }
+        params.value = { groupId: tabsList.value[activeName.value]?.id, ...val }
         findRealTrendDataByGroupId(params.value)
     })
     return
@@ -145,15 +146,11 @@ const chartsData: any = ref([])
 const chartsYxiasData: any = ref([])
 const findRealTrendDataByGroupId = (obj: any) => {
     loading.value = true
-    chartsData.value=[]
-    chartsYxiasData.value=[]
-    let list = []
-    let countList = []
-    for (let i = 2; i <= 50; i++) {
-        countList.push({ value: i + '次', count: i })
-    }
-    list[0] = countList
+    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
         //处理实时趋势表格
@@ -167,9 +164,20 @@ const findRealTrendDataByGroupId = (obj: any) => {
                 if (!(vv.statisticalData + '')) {
                     vv.statisticalData = '/'
                 }
-                item.list.push({ value: vv.statisticalData, count: vv.frequency })
+                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({
@@ -178,12 +186,17 @@ const findRealTrendDataByGroupId = (obj: any) => {
                     })
                 }
             }
-            if (item.list.length != 0 && item.list.length < countList.length) {
-                for (let i = 0; i < countList.length - item.list.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))
+                console.log(maxCount2, maxCount1)
+                if (maxCount2 < maxCount1) {
+                    for (let i = 0; i < maxCount1 - maxCount2; i++) {
+                        item.list.push({
+                            value: '/',
+                            count: index
+                        })
+                    }
                 }
             }
         })
@@ -240,10 +253,12 @@ const init = () => {
     let timeList: any = []
     let xAxisList: any = []
     chartsData.value.map((item: any, index: any) => {
-        chartsYxiasData.value.map((vv: any) => {
+        chartsYxiasData.value.map((vv: any, vvs: any) => {
             if (item.phase == vv.phase) {
+                if (vvs == 0) {
+                    vv.gbList.push(item.internationalValue)
+                }
                 vv.phaseList.push(item.statisticalData)
-                vv.gbList.push(item.internationalValue)
             }
         })
         xAxisList.push(item.frequency + '次')
@@ -252,9 +267,21 @@ const init = () => {
     echartsData.value = {
         options: {
             // backgroundColor: '#0f375f',
+            dataZoom: [
+                {
+                    show: true,
+                    start: 0,
+                    end: 20
+                },
+                {
+                    type: 'inside',
+                    start: 0,
+                    end: 20
+                }
+            ],
             grid: {
-                top: '22%',
-                bottom: '18%', //也可设置left和right设置距离来控制图表的大小
+                top: '14%',
+                bottom: '22%', //也可设置left和right设置距离来控制图表的大小
                 left: '3%',
                 right: '5%'
             },
@@ -277,19 +304,6 @@ const init = () => {
                 bottom: 20,
                 width: 400,
                 height: 50
-                // icon: 'icon'
-                //  icon: "circle", //icon 长方形 circle 圆形 arrow箭头型 diamond菱形
-                // itemWidth: 14,
-                // itemHeight: 14,
-                // textStyle: {
-                //     inside: true,
-                //     color: '#000',
-                //     padding: [11, 0, 10, 0],
-                //     align: 'left',
-                //     verticalAlign: 'center',
-                //     fontSize: 14,
-                //     rich: {}
-                // }
             },
             xAxis: {
                 name: '次数',
@@ -316,7 +330,7 @@ const init = () => {
             yAxis: [
                 {
                     type: 'value',
-                    name: '单位(' + chartsData?.value[0]?.unit?chartsData?.value[0]?.unit:'' + ')',
+                    name: chartsData?.value[0]?.unit ? '单位(' + chartsData?.value[0]?.unit+ ')' : '' ,
                     splitLine: {
                         show: false
                     },
@@ -337,14 +351,15 @@ const init = () => {
     let list: any = []
     list = []
     chartsYxiasData.value.map((item: any) => {
+        console.log(item.gbList, 'guobialist340')
+        if (item.gbList.length != 0) {
+            list.push({ phase: item.phase, title: '国标限值', list: item.gbList })
+        }
         if (item.phaseList.length != 0) {
             list.push({ phase: item.phase, title: item.title, list: item.phaseList })
         }
-        if (item.gbList.length != 0) {
-            list.push({ phase: item.phase, title: item.title + '国标限值', list: item.gbList })
-        }
     })
-    const colorList = ['#DAA521', 'aqua', '#d81e06', 'coral', '#1DD0CE', 'cadetblue']
+    const colorList = ['#00CC99', '#FF9900', '#1DD0CE', 'cadetblue']
     list.map((item: any, index: any) => {
         echartsData.value.options.legend.data.push(item.title)
         echartsData.value.options.series.push({
@@ -361,350 +376,22 @@ const init = () => {
             data: item.list
         })
     })
-
-    barCharts.value && barCharts.value.initChart()
-    return
-    const xDataList: any = [],
-        yDataList1: any = [],
-        yDataList2: any = []
-    tableList.map((item: any) => {
-        xDataList.push(item.name)
-        yDataList1.push(item.value)
-        yDataList2.push(Math.floor(Math.random() * 101) + Math.floor(Math.random() * 101))
-        yDataList2.push(Math.floor(Math.random() * 101) + Math.floor(Math.random() * 101))
+    nextTick(() => {
+        barCharts.value && barCharts.value.initChart()
     })
-    if (activeName.value == '0') {
-        echartsData1.value = {
-            options: {
-                // backgroundColor: '#0f375f',
-                grid: {
-                    top: '22%',
-                    bottom: '15%', //也可设置left和right设置距离来控制图表的大小
-                    left: '3%',
-                    right: '5%'
-                },
-                tooltip: {
-                    trigger: 'axis',
-                    axisPointer: {
-                        type: 'cross',
-                        label: {
-                            show: false
-                        }
-                    }
-                },
-                legend: {
-                    data: ['国标限值', yAxisUnit.value],
-                    top: '2%',
-                    right: '2%'
-                    // icon: 'icon'
-                    //  icon: "circle", //icon 长方形 circle 圆形 arrow箭头型 diamond菱形
-                    // itemWidth: 14,
-                    // itemHeight: 14,
-                    // textStyle: {
-                    //     inside: true,
-                    //     color: '#000',
-                    //     padding: [11, 0, 10, 0],
-                    //     align: 'left',
-                    //     verticalAlign: 'center',
-                    //     fontSize: 14,
-                    //     rich: {}
-                    // }
-                },
-                xAxis: {
-                    name: '次数',
-                    data: xDataList,
-                    axisLine: {
-                        show: true, //隐藏X轴轴线
-                        lineStyle: {
-                            color: '#000'
-                        }
-                    },
-                    axisTick: {
-                        show: true //隐藏X轴刻度
-                    },
-                    axisPointer: {
-                        type: 'shadow'
-                    },
-                    axisLabel: {
-                        show: true,
-                        textStyle: {
-                            color: '#000' //X轴文字颜色
-                        }
-                    }
-                },
-                yAxis: [
-                    {
-                        type: 'value',
-                        name: '单位(' + '%' + ')',
-                        splitLine: {
-                            show: false
-                        },
-                        axisTick: {
-                            show: true
-                        },
-                        axisLine: {
-                            show: true,
-                            lineStyle: {
-                                color: '#000'
-                            }
-                        }
-                    }
-                ],
-                series: [
-                    {
-                        name: '国标限值',
-                        type: 'bar',
-                        barMaxWidth: 24, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
-                        itemStyle: {
-                            // normal: {
-                            barBorderRadius: [3, 3, 0, 0],
-                            color: '#00CC99'
-                            // }e
-                        },
-                        data: yDataList1
-                    },
-                    {
-                        name: yAxisUnit.value,
-                        type: 'bar',
-                        barMaxWidth: 24,
-                        itemStyle: {
-                            // normal: {
-                            barBorderRadius: [3, 3, 0, 0],
-
-                            color: '#FF9900'
-                            // }
-                        },
-                        data: yDataList2
-                    }
-                ]
-            }
-        }
-        barCharts1.value.initChart()
-    } else if (activeName.value == '1') {
-        echartsData2.value = {
-            options: {
-                // backgroundColor: '#0f375f',
-                grid: {
-                    top: '22%',
-                    bottom: '15%', //也可设置left和right设置距离来控制图表的大小
-                    left: '3%',
-                    right: '5%'
-                },
-                tooltip: {
-                    trigger: 'axis',
-                    axisPointer: {
-                        type: 'cross',
-                        label: {
-                            show: false
-                        }
-                    }
-                },
-                legend: {
-                    data: ['国标限值', yAxisUnit.value],
-                    top: '2%',
-                    right: '2%'
-                    // icon: 'icon'
-                    //  icon: "circle", //icon 长方形 circle 圆形 arrow箭头型 diamond菱形
-                    // itemWidth: 14,
-                    // itemHeight: 14,
-                    // textStyle: {
-                    //     inside: true,
-                    //     color: '#000',
-                    //     padding: [11, 0, 10, 0],
-                    //     align: 'left',
-                    //     verticalAlign: 'center',
-                    //     fontSize: 14,
-                    //     rich: {}
-                    // }
-                },
-                xAxis: {
-                    name: '次数',
-                    data: xDataList,
-                    axisLine: {
-                        show: true, //隐藏X轴轴线
-                        lineStyle: {
-                            color: '#000'
-                        }
-                    },
-                    axisTick: {
-                        show: true //隐藏X轴刻度
-                    },
-                    axisPointer: {
-                        type: 'shadow'
-                    },
-                    axisLabel: {
-                        show: true,
-                        textStyle: {
-                            color: '#000' //X轴文字颜色
-                        }
-                    }
-                },
-                yAxis: [
-                    {
-                        type: 'value',
-                        name: '单位(' + '%' + ')',
-                        splitLine: {
-                            show: false
-                        },
-                        axisTick: {
-                            show: true
-                        },
-                        axisLine: {
-                            show: true,
-                            lineStyle: {
-                                color: '#000'
-                            }
-                        }
-                    }
-                ],
-                series: [
-                    {
-                        name: '国标限值',
-                        type: 'bar',
-                        barMaxWidth: 24, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
-                        itemStyle: {
-                            // normal: {
-                            barBorderRadius: [3, 3, 0, 0],
-                            color: '#00CC99'
-                            // }e
-                        },
-                        data: yDataList1
-                    },
-                    {
-                        name: yAxisUnit.value,
-                        type: 'bar',
-                        barMaxWidth: 24,
-                        itemStyle: {
-                            // normal: {
-                            barBorderRadius: [3, 3, 0, 0],
-                            color: '#FF9900'
-                            // }
-                        },
-                        data: yDataList2
-                    }
-                ]
-            }
-        }
-        barCharts2.value.initChart()
-    } else if (activeName.value == '2') {
-        echartsData3.value = {
-            options: {
-                // backgroundColor: '#0f375f',
-                grid: {
-                    top: '22%',
-                    bottom: '15%', //也可设置left和right设置距离来控制图表的大小
-                    left: '3%',
-                    right: '5%'
-                },
-                tooltip: {
-                    trigger: 'axis',
-                    axisPointer: {
-                        type: 'cross',
-                        label: {
-                            show: false
-                        }
-                    }
-                },
-                legend: {
-                    data: ['国标限值', yAxisUnit.value],
-                    top: '2%',
-                    right: '2%'
-                    // icon: 'icon'
-                    //  icon: "circle", //icon 长方形 circle 圆形 arrow箭头型 diamond菱形
-                    // itemWidth: 14,
-                    // itemHeight: 14,
-                    // textStyle: {
-                    //     inside: true,
-                    //     color: '#000',
-                    //     padding: [11, 0, 10, 0],
-                    //     align: 'left',
-                    //     verticalAlign: 'center',
-                    //     fontSize: 14,
-                    //     rich: {}
-                    // }
-                },
-                xAxis: {
-                    name: '次数',
-                    data: xDataList,
-                    axisLine: {
-                        show: true, //隐藏X轴轴线
-                        lineStyle: {
-                            color: '#000'
-                        }
-                    },
-                    axisTick: {
-                        show: true //隐藏X轴刻度
-                    },
-                    axisPointer: {
-                        type: 'shadow'
-                    },
-                    axisLabel: {
-                        show: true,
-                        textStyle: {
-                            color: '#000' //X轴文字颜色
-                        }
-                    }
-                },
-                yAxis: [
-                    {
-                        type: 'value',
-                        name: '单位(' + '%' + ')',
-                        splitLine: {
-                            show: false
-                        },
-                        axisTick: {
-                            show: true
-                        },
-                        axisLine: {
-                            show: true,
-                            lineStyle: {
-                                color: '#000'
-                            }
-                        }
-                    }
-                ],
-                series: [
-                    {
-                        name: '国标限值',
-                        type: 'bar',
-                        barMaxWidth: 24, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
-                        itemStyle: {
-                            // normal: {
-                            barBorderRadius: [3, 3, 0, 0],
-                            color: '#00CC99'
-                            // }e
-                        },
-                        data: yDataList1
-                    },
-                    {
-                        name: yAxisUnit.value,
-                        type: 'bar',
-                        barMaxWidth: 24,
-                        itemStyle: {
-                            // normal: {
-                            barBorderRadius: [3, 3, 0, 0],
-
-                            color: '#FF9900'
-                            // }
-                        },
-                        data: yDataList2
-                    }
-                ]
-            }
-        }
-        barCharts3.value.initChart()
-    }
+    return
 }
 
 const handleClick = (tab: any, event: any) => {
-    activeName.value = tabsList.value[tab.index].id
-    params.value.groupId = activeName.value
+    // activeName.value = tabsList.value[tab.index].id
+    // activeName.value = tab.index
+    params.value.groupId = tabsList.value[tab.index].id
     findRealTrendDataByGroupId(params.value)
-    reverseTable()
+    // reverseTable()
     init()
 }
 onMounted(() => {
-    init()
+    // init()
 })
 defineExpose({ open })
 </script>