实时数据-实时趋势页面调试

src/views/govern/device/control/tabs/components/realtrend.vue

@@ -1,8 +1,35 @@
-<!-- 实时趋势 -->
+<!-- 实时数据 - 实时趋势 -->
 <template>
     <div class="realtrend">
         <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
-            <el-tab-pane label="谐波电压含有率" name="0">
+            <el-tab-pane v-for="(item, index) in tabsList" :label="item.groupName" :name="item.id" :key="index">
+                <div v-loading="loading">
+                    <div class="realtrend_top">
+                        <div class="thead">
+                            <ul v-for="(table, tableIndex) in newTableList" :key="tableIndex">
+                                <li>
+                                    {{ table[0].value }}
+                                </li>
+                            </ul>
+                        </div>
+                        <div class="table">
+                            <ul v-for="(table, tableIndex) in newTableList" :key="tableIndex">
+                                <span v-for="(key, keys) in table">
+                                    <li v-if="keys != 0">
+                                        {{ key?.value }}
+                                    </li>
+                                </span>
+                            </ul>
+                        </div>
+                    </div>
+                    <div class="tab_info">
+                        <div class="charts">
+                            <MyEchart ref="barCharts" :options="echartsData"></MyEchart>
+                        </div>
+                    </div>
+                </div>
+            </el-tab-pane>
+            <!-- <el-tab-pane label="谐波电压含有率" name="0">
                 <template #label>
                     <span class="custom-tabs-label">
                         <el-icon><TrendCharts /></el-icon>
@@ -43,7 +70,7 @@
                         <MyEchart ref="barCharts3" :options="echartsData3"></MyEchart>
                     </div>
                 </div>
-            </el-tab-pane>
+            </el-tab-pane> -->
         </el-tabs>
     </div>
 </template>
@@ -53,69 +80,11 @@ 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'
-const activeName = ref('0')
-const tableList = [
-    {
-        name: '2次',
-        value: Math.floor(Math.random() * 101)
-    },
-    {
-        name: '3次',
-        value: Math.floor(Math.random() * 101)
-    },
-    {
-        name: '4次',
-        value: Math.floor(Math.random() * 101)
-    },
-    {
-        name: '5次',
-        value: Math.floor(Math.random() * 101)
-    },
-    {
-        name: '6次',
-        value: Math.floor(Math.random() * 101)
-    },
-    {
-        name: '7次',
-        value: Math.floor(Math.random() * 101)
-    },
-    {
-        name: '8次',
-        value: Math.floor(Math.random() * 101)
-    },
-    {
-        name: '9次',
-        value: Math.floor(Math.random() * 101)
-    },
-    {
-        name: '10次',
-        value: Math.floor(Math.random() * 101)
-    },
-    {
-        name: '11次',
-        value: Math.floor(Math.random() * 101)
-    },
-    {
-        name: '12次',
-        value: Math.floor(Math.random() * 101)
-    },
-    {
-        name: '13次',
-        value: Math.floor(Math.random() * 101)
-    },
-    {
-        name: '14次',
-        value: Math.floor(Math.random() * 101)
-    },
-    {
-        name: '15次',
-        value: Math.floor(Math.random() * 101)
-    },
-    {
-        name: '16次',
-        value: Math.floor(Math.random() * 101)
-    }
-]
+import { getDeviceTrendDataGroup, getDeviceTrendData } from '@/api/cs-device-boot/EquipmentDelivery.ts'
+import Index from '@/components/wangEditor/index.vue'
+const activeName = ref('')
+
+const tableList: any = []
 interface RowVO {
     [key: string]: any
 }
@@ -132,26 +101,101 @@ const gridOptions = ref<VxeGridProps<RowVO>>({
     align: 'center'
 })
 gridOptions.value = { ...defaultAttribute, ...gridOptions.value }
-const myColumns = ref([
-    { field: 'name', title: '次数' },
-    { field: 'value', title: '谐波电压含有率(%)' }
+const myColumns: any = ref([
+    // { field: 'name', title: '次数' }
+    // { field: 'value', title: '谐波电压含有率(%)' }
 ])
+
 const yAxisUnit: any = ref('')
-myColumns.value.map(item => {
-    if (item.field == 'value') {
-        item.title =
-            activeName.value == '0'
-                ? '谐波电压含有率(%)'
-                : activeName.value == '1'
-                ? '间谐波电压含有率(%)'
-                : activeName.value == '2'
-                ? '谐波电流幅值(A)'
-                : ''
-        yAxisUnit.value = item.title.split('(')[0]
-    }
-})
+// myColumns.value.map(item => {
+//     if (item.field == 'value') {
+//         item.title =
+//             activeName.value == '0'
+//                 ? '谐波电压含有率(%)'
+//                 : activeName.value == '1'
+//                 ? '间谐波电压含有率(%)'
+//                 : activeName.value == '2'
+//                 ? '谐波电流幅值(A)'
+//                 : ''
+//         yAxisUnit.value = item.title.split('(')[0]
+//     }
+// })
 
 const myData = tableList
+const tabsList = ref([])
+//接收参数
+const params = ref({})
+const open = (val: any) => {
+    //获取指标tab
+    getDeviceTrendDataGroup().then(res => {
+        tabsList.value = res.data
+        if (tabsList.value.length != 0) {
+            activeName.value = tabsList.value[0]?.id
+        }
+        params.value = { groupId: activeName.value, ...val }
+        findRealTrendDataByGroupId(params.value)
+    })
+    return
+}
+const newTableList: any = ref([])
+//根据指标tab查询实时趋势
+const loading: any = ref(false)
+//echarts数据
+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
+    getDeviceTrendData(obj).then(res => {
+        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 })
+            })
+            list[index + 1] = item.list
+            if (item.list.length == 0) {
+                for (let i = 0; i < countList.length; i++) {
+                    item.list.push({
+                        value: '/',
+                        count: index
+                    })
+                }
+            }
+            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
+                    })
+                }
+            }
+        })
+        // 转换为对象数组
+        list.map((item: any, index: any) => {
+            item.unshift({ value: myColumns.value[index].title, count: '' })
+        })
+        newTableList.value = list
+        loading.value = false
+        init()
+    })
+}
 
 //反转表格
 const reverseTable = () => {
@@ -181,14 +225,145 @@ const reverseTable = () => {
 
 reverseTable()
 
-const echartsData1: any = ref([]),
+const echartsData: any = ref([]),
+    echartsData1: any = ref([]),
     echartsData2: any = ref([]),
     echartsData3: any = ref([]),
+    barCharts = ref(),
     barCharts1 = ref(),
     barCharts2 = ref(),
     barCharts3 = ref()
+
 //加载echarts
 const init = () => {
+    // let list: any = []
+    let timeList: any = []
+    let xAxisList: any = []
+    chartsData.value.map((item: any, index: any) => {
+        chartsYxiasData.value.map((vv: any) => {
+            if (item.phase == vv.phase) {
+                vv.phaseList.push(item.statisticalData)
+                vv.gbList.push(item.internationalValue)
+            }
+        })
+        xAxisList.push(item.frequency + '次')
+    })
+    xAxisList = [...new Set(xAxisList)]
+    echartsData.value = {
+        options: {
+            // backgroundColor: '#0f375f',
+            grid: {
+                top: '22%',
+                bottom: '18%', //也可设置left和right设置距离来控制图表的大小
+                left: '3%',
+                right: '5%'
+            },
+            tooltip: {
+                trigger: 'axis',
+                axisPointer: {
+                    type: 'cross',
+                    label: {
+                        show: false
+                    }
+                }
+            },
+            legend: {
+                data: [],
+                itemGap: 15,
+                type: 'scroll', // 开启滚动分页
+                // orient: 'vertical', // 垂直排列
+                right: '3%', // 位置调整
+                top: 0,
+                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: '次数',
+                data: xAxisList,
+                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: '单位(' + chartsData?.value[0]?.unit?chartsData?.value[0]?.unit:'' + ')',
+                    splitLine: {
+                        show: false
+                    },
+                    axisTick: {
+                        show: true
+                    },
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: '#000'
+                        }
+                    }
+                }
+            ],
+            series: []
+        }
+    }
+    let list: any = []
+    list = []
+    chartsYxiasData.value.map((item: any) => {
+        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']
+    list.map((item: any, index: any) => {
+        echartsData.value.options.legend.data.push(item.title)
+        echartsData.value.options.series.push({
+            name: item.title,
+            type: 'bar',
+            barMaxWidth: 16, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
+            itemStyle: {
+                // normal: {
+                barBorderRadius: [3, 3, 0, 0],
+                // color: '#00CC99'
+                // }e
+                color: colorList[index]
+            },
+            data: item.list
+        })
+    })
+
+    barCharts.value && barCharts.value.initChart()
+    return
     const xDataList: any = [],
         yDataList1: any = [],
         yDataList2: any = []
@@ -522,96 +697,91 @@ const init = () => {
 }
 
 const handleClick = (tab: any, event: any) => {
-    activeName.value = tab.index
-    myColumns.value.map(item => {
-        if (item.field == 'value') {
-            item.title =
-                activeName.value == '0'
-                    ? '谐波电压含有率(%)'
-                    : activeName.value == '1'
-                    ? '间谐波电压含有率(%)'
-                    : activeName.value == '2'
-                    ? '谐波电流幅值(A)'
-                    : ''
-            yAxisUnit.value = item.title.split('(')[0]
-        }
-    })
+    activeName.value = tabsList.value[tab.index].id
+    params.value.groupId = activeName.value
+    findRealTrendDataByGroupId(params.value)
     reverseTable()
     init()
 }
 onMounted(() => {
     init()
 })
+defineExpose({ open })
 </script>
 <style lang="scss" scoped>
 .realtrend {
     width: 100%;
     height: 100%;
-    .table_info {
+    .realtrend_top {
         width: 100%;
         height: auto;
-        overflow-x: auto;
-        .table {
-            width: auto;
-            height: auto;
-            border: 2px solid #eee;
-            display: flex;
-            flex-direction: column;
-            .thead {
-                width: 100%;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .thead {
+            height: 100%;
+            overflow-y: hidden;
+            border: 1px solid #eee;
+            border-right: 0;
+            ul {
+                width: auto;
                 height: 40px;
                 display: flex;
-                border-bottom: 2px solid #eee;
-                .thead_left {
-                    width: 200px !important;
-                    height: 100%;
+                li {
+                    flex: none;
+                    width: 100px;
                     line-height: 40px;
+                    border: 1px solid #eee;
                     text-align: center;
-                    font-size: 14px;
-                    font-weight: 800;
+                    list-style: none;
                 }
-                .thead_right {
-                    flex: 1;
-                    display: flex;
-                    .thead_right_item {
-                        flex: none;
-                        width: 100px;
-                        text-align: center;
-                        line-height: 40px;
-                        border-left: 1px solid #eee;
-                    }
+                li:nth-child(1) {
+                    flex: none;
+                    width: 200px;
                 }
             }
-            .tbody {
-                width: 100%;
-                height: 40px;
-                display: flex;
-                .tbody_left {
-                    width: 200px !important;
-                    height: 100%;
-                    line-height: 40px;
-                    text-align: center;
-                    font-size: 14px;
+            ul:nth-child(1) {
+                li {
                     font-weight: 800;
-                }
-                .tbody_right {
-                    flex: 1;
-                    display: flex;
-                    .tbody_right_item {
-                        flex: none;
-                        width: 100px;
-                        text-align: center;
-                        line-height: 40px;
-                        border-left: 1px solid #eee;
-                    }
+                    background: #f4f6f9;
                 }
             }
         }
+        .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;
+        }
     }
 }
-.reverse-table {
-    // max-height:120px !important;
-}
 .reverse-table .vxe-body--row .vxe-body--column:first-child {
     background-color: #f8f8f9;
 }