修改 方案数据echart数据格式

src/components/table/header/index.vue

@@ -191,7 +191,7 @@ defineExpose({ onComSearch, areaRef, setDatePicker, setInterval, datePickerRef,
     background-color: var(--ba-bg-color-overlay);
 
     border-bottom: none;
-    padding: 13px 15px;
+    padding: 13px 15px 9px;
     font-size: 14px;
 
     .table-header-operate-text {

src/utils/echartMethod.ts

@@ -11,7 +11,11 @@ export const yMethod = (arr: any) => {
 
     if (maxValue > 1000) {
         max = Math.ceil(maxValue / 100) * 100
+        if (minValue == 0) {
+            min = 0
+        } else {
             min = (Math.floor(minValue / 100) - 1) * 100
+        }
     } else {
         max = Math.ceil(maxValue / 10) * 10
         min = Math.floor(minValue / 10) * 10

src/utils/request.ts

@@ -226,14 +226,16 @@ function getPendingKey(config: AxiosRequestConfig) {
 /**
  * 根据请求方法组装请求数据/参数
  */
-export function requestPayload(method: Method, data: anyObj) {
+export function requestPayload(method: Method, data: anyObj, paramsPOST: boolean) {
     if (method == 'GET') {
         return {
             params: data
         }
     } else if (method == 'POST') {
-        return {
+        if (paramsPOST) {
-            data: data
+            return { params: data }
+        } else {
+            return { data: data }
         }
     }
 }

src/views/govern/device/planData/index.vue

@@ -15,19 +15,15 @@
                     {{ deviceData.describe ? deviceData.describe : '/' }}
                 </el-descriptions-item>
             </el-descriptions>
-            <el-collapse v-model="activeColName" accordion>
+            <el-collapse v-model="activeColName" @change="handleChange">
                 <el-collapse-item title="测试项信息" name="0">
                     <div class="monitor_info" v-if="deviceData.records && deviceData.records.length != 0">
                         <!-- <div class="history_title">
                             <p>测试项信息</p>
                         </div> -->
                         <el-tabs v-model="activeName" type="border-card" @click="handleClickTabs">
-                            <el-tab-pane
+                            <el-tab-pane v-for="(item, index) in deviceData.records" :label="item.itemName"
-                                v-for="(item, index) in deviceData.records"
+                                :name="item.id" :key="index">
-                                :label="item.itemName"
-                                :name="item.id"
-                                :key="index"
-                            >
                                 <template #label>
                                     <span class="custom-tabs-label">
                                         <el-icon>
@@ -101,27 +97,22 @@
                         <el-empty />
                     </div>
                 </el-collapse-item>
-                <el-collapse-item title="历史趋势" name="1" class="history_collapse">
+                <!-- <el-collapse-item title="历史趋势" name="1" class="history_collapse"> -->
+
+                <!-- </el-collapse-item> -->
+            </el-collapse>
+            <h3 class="mt10 mb10">历史趋势</h3>
             <div class="history_trend">
                 <div class="history_header" ref="headerRef">
                     <!-- <el-form :model="searchForm" class="history_select" id="history_select"> -->
-                            <TableHeader :showSearch="false" ref="tableHeaderRef" :key="searchFormIndex">
+                    <TableHeader :showSearch="false" ref="tableHeaderRef" :key="searchFormIndex"
+                        @selectChange="selectChange">
                         <template v-slot:select>
                             <el-form-item for="-" label="统计指标" label-width="80px">
-                                        <el-select
+                                <el-select collapse-tags collapse-tags-tooltip v-model="searchForm.index"
-                                            collapse-tags
+                                    placeholder="请选择统计指标" multiple :multiple-limit="3">
-                                            collapse-tags-tooltip
+                                    <el-option v-for="item in indexOptions" :key="item.id" :label="item.name"
-                                            v-model="searchForm.index"
+                                        :value="item.id"></el-option>
-                                            placeholder="请选择统计指标"
-                                            multiple
-                                            :multiple-limit="3"
-                                        >
-                                            <el-option
-                                                v-for="item in indexOptions"
-                                                :key="item.id"
-                                                :label="item.name"
-                                                :value="item.id"
-                                            ></el-option>
                                 </el-select>
                             </el-form-item>
                             <el-form-item for="-" label="值类型" label-width="80px">
@@ -131,37 +122,20 @@
                                 </el-select>
                             </el-form-item>
                             <div v-for="(item, index) in countData" :key="index">
-                                        <el-form-item
+                                <el-form-item for="-" :label="item.name + '谐波次数'" label-width="180px"
-                                            for="-"
+                                    v-if="item.countOptions.length != 0">
-                                            :label="item.name + '谐波次数'"
-                                            label-width="180px"
-                                            v-if="item.countOptions.length != 0"
-                                        >
                                     <!-- multiple -->
-                                            <el-select
+                                    <el-select v-model="item.count" collapse-tags collapse-tags-tooltip
-                                                v-model="item.count"
+                                        placeholder="请选择谐波次数" style="width: 100px">
-                                                collapse-tags
+                                        <el-option v-for="vv in item.countOptions" :key="vv" :label="vv"
-                                                collapse-tags-tooltip
+                                            :value="vv"></el-option>
-                                                placeholder="请选择谐波次数"
-                                                style="width: 100px"
-                                            >
-                                                <el-option
-                                                    v-for="vv in item.countOptions"
-                                                    :key="vv"
-                                                    :label="vv"
-                                                    :value="vv"
-                                                ></el-option>
                                     </el-select>
                                 </el-form-item>
                             </div>
                             <el-form-item for="-" label="统计类型" label-width="80px">
                                 <el-select v-model="searchForm.type" placeholder="请选择值类型">
-                                            <el-option
+                                    <el-option v-for="item in typeOptions" :key="item.id" :label="item.name"
-                                                v-for="item in typeOptions"
+                                        :value="item.id"></el-option>
-                                                :key="item.id"
-                                                :label="item.name"
-                                                :value="item.id"
-                                            ></el-option>
                                 </el-select>
                             </el-form-item>
                         </template>
@@ -178,12 +152,11 @@
                 <div class="history_title">
                     <p>{{ chartTitle }}</p>
                 </div>
-                        <div class="history_chart" v-loading="loading" ref="chartRef">
+                <div class="history_chart" v-loading="loading" :style="EcharHeight" :key="EcharHeight.height"
+                    ref="chartRef">
                     <MyEchart ref="historyChart" v-if="echartsData" :isExport="true" :options="echartsData" />
                 </div>
             </div>
-                </el-collapse-item>
-            </el-collapse>
         </div>
         <el-empty v-else description="请选择设备" class="device-manage-right" />
         <popup ref="dialogRef" @onSubmit="refreshTree" />
@@ -203,19 +176,24 @@ import { useDictData } from '@/stores/dictData'
 import { queryStatistical } from '@/api/system-boot/csstatisticalset'
 import { TrendCharts, Plus, Platform } from '@element-plus/icons-vue'
 import { yMethod } from '@/utils/echartMethod'
+import { color, gradeColor3 } from '@/components/echarts/color'
 import TableHeader from '@/components/table/header/index.vue'
+import { useConfig } from '@/stores/config'
 const dictData = useDictData()
 defineOptions({
     name: 'govern/device/planData/index'
 })
+const config = useConfig()
+color[0] = config.layout.elementUiPrimary[0]
 //电压等级
 const voltageLevelList = dictData.getBasicData('Dev_Voltage')
 //接线方式
 const volConTypeList = dictData.getBasicData('Dev_Connect')
 //值类型
 const pageHeight = mainHeight(20)
+const EcharHeight = ref(mainHeight(510))
 const loading = ref(false)
-const searchForm = ref({})
+const searchForm: any = ref({})
 const typeOptions = [
     {
         name: '平均值',
@@ -258,7 +236,7 @@ queryByCode('portable-harmonic').then(res => {
     })
 })
 const activeName: any = ref()
-const activeColName: any = ref('1')
+const activeColName: any = ref('0')
 const deviceData: any = ref([])
 const schemeTreeRef = ref()
 //历史趋势devId
@@ -333,43 +311,12 @@ const range = (start: any, end: any, step: any) => {
     return Array.from({ length: (end - start) / step + 1 }, (_, i) => start + i * step)
 }
 //二维数组去除相同数据的数组
-const filterArray = (array: any) => {
+
-    const newArray: any = []
-    array.forEach((currentValue: any) => {
-        let isPush = true
-        newArray.forEach((currentValueIn: any) => {
-            if (currentValueIn) {
-                if (currentValue[0] === currentValueIn[0] && currentValue[1] === currentValueIn[1]) {
-                    isPush = false
-                }
-            } else {
-                newArray.push(currentValue)
-            }
-        })
-        if (isPush) {
-            newArray.push(currentValue)
-        }
-    })
-    return newArray
-}
 const init = (flag: boolean) => {
     //调用子组件的方法切换的时候tree的节点也变化
     let list: any = []
     //颜色数组
-    const colorList = [
+
-        '#DAA521',
-        '#A5292A',
-        'aqua',
-        '#d81e06',
-        '#2E8B58',
-        'coral',
-        '#012B6A',
-        'brown',
-        '#70B601',
-        'blueviolet',
-        '#1DD0CE',
-        'cadetblue'
-    ]
     if (historyDevId.value && legendDictList.value && legendDictList.value.selectedList) {
         // 选择指标的时候切换legend内容和data数据
         legendDictList.value?.selectedList?.map((item: any) => {
@@ -430,72 +377,46 @@ const init = (flag: boolean) => {
                         let chartsList = JSON.parse(JSON.stringify(res.data))
                         echartsData.value = {}
                         //icon图标替换legend图例
+
                         // y轴单位数组
                         let unitList: any = []
-                        let allUnitArray: any = []
-                        chartsList.map((item: any) => {
-                            allUnitArray.push({ name: item.anotherName, unit: item.unit })
-                        })
-                        //去除重复的unit单位数据
-                        unitList = allUnitArray.reduce((result: any, obj: any) => {
-                            if (!result.some((item: any) => JSON.stringify(item) === JSON.stringify(obj))) {
-                                result.push(obj)
-                            }
-                            return result
-                        }, [])
 
-                        let [min, max] = [0, 0]
+                        let groupedData = chartsList.reduce((acc, item) => {
-                        list.map((item: any, index: any) => {
+                            let key = item.anotherName;
-                            item.map((vv: any, indexs: any) => {
+                            if (!acc[key]) {
-                                ;[min, max] = yMethod(
+                                acc[key] = [];
-                                    chartsList
-                                        .map((kk: any, kks: any) => {
-                                            if (kk.statisticalName == vv.name) {
-                                                return kk.statisticalData
-                                            } else {
-                                                return ''
                             }
+                            acc[key].push(item);
+                            return acc;
+                        }, {})
+                        let result = Object.values(groupedData);
+                        if (chartsList.length > 0) {
+                            unitList = result.map((item: any) => {
+                                return item[0].unit
                             })
-                                        .filter((kk: any) => kk !== '')
+                        }
-                                )
+
-                                item.min = min
-                                item.max = max
-                            })
-                        })
                         echartsData.value = {
-                            options: {
-                                title: [
-                                    {
-                                        left: '10%',
-                                        top: 0
-                                        // text: chartTitle.value
-                                    }
-                                ],
-                                toolbox: {
-                                    feature: {
-                                        // saveAsImage: {
-                                        //     title: '保存'
-                                        // }
-                                        // dataView: { readOnly: false },
-                                        // }
-                                    }
-                                },
                             legend: {
-                                    //legend使用iconfont图标
+
-                                    data: [],
                                 itemWidth: 20,
                                 itemHeight: 10,
                                 itemGap: 15,
                                 type: 'scroll', // 开启滚动分页
                                 // orient: 'vertical', // 垂直排列
-                                    right: '15%', // 位置调整
                                 top: 5,
                                 bottom: 30,
                                 width: 400,
                                 height: 50
                             },
                             tooltip: {
-                                    trigger: 'axis',
+                                axisPointer: {
+                                    type: 'cross',
+                                    label: {
+                                        color: '#fff',
+                                        fontSize: 16
+                                    }
+                                },
                                 textStyle: {
                                     color: '#fff',
                                     fontStyle: 'normal',
@@ -503,40 +424,9 @@ const init = (flag: boolean) => {
                                     fontSize: 14
                                 },
                                 backgroundColor: 'rgba(0,0,0,0.35)',
-                                    borderWidth: 0,
+                                borderWidth: 0
-                                    axisPointer: {
-                                        type: 'cross',
-                                        crossStyle: {
-                                            color: '#999'
-                                        }
-                                    },
-
-                                    formatter: function (params: any) {
-                                        let list = params.filter((item, index, self) => {
-                                            return index === self.findIndex(t => t.seriesName === item.seriesName)
-                                        })
-                                        var res =
-                                            '<span style="margin-right:18px;"></span>' +
-                                            list[0].value[0] +
-                                            list[0].name +
-                                            '<br/>'
-                                        for (var i = 0, l = list.length; i < l; i++) {
-                                            list[i].unit =
-                                                echartsData.value.options.yAxis[
-                                                    echartsData.value.options.series[list[i].seriesIndex].yAxisIndex
-                                                ]?.name
-                                            res +=
-                                                list[i].seriesName +
-                                                '   ' +
-                                                `<div style="width:16px;height:16px;float:left;background:${list[i].color};border-radius:50%;margin:0 15px"></div>` +
-                                                `<div style='float:right;padding-left:20px;'>${
-                                                    list[i].value[1] == null ? '' : list[i].value[1].toFixed(2)
-                                                } </div><br/>`
-                                            // ${list[i].unit}
-                                        }
-                                        return res
-                                    }
                             },
+                            color: ['#FFCC00', '#009900', '#CC0000', ...color],
                             xAxis: {
                                 type: 'time',
                                 axisLabel: {
@@ -547,157 +437,81 @@ const init = (flag: boolean) => {
                                     }
                                 }
                             },
-                                yAxis: [
+                            yAxis: [{
-                                    {
-                                        type: 'value',
-                                        name: unitList[0].unit,
-                                        axisLabel: {
-                                            color: '#000',
-                                            fontSize: 14
-                                        },
-                                        axisTick: {
-                                            show: true
-                                        },
 
-                                        max: list[0].max,
+                            }],
-                                        min: list[0].min,
-                                        axisLine: {
-                                            show: true,
-                                            lineStyle: {
-                                                // color: colorList[0]
-                                            }
-                                        },
-                                        nameTextStyle: {
-                                            color: '#000',
-                                            fontSize: '14'
-                                        },
-                                        splitLine: {
-                                            show: false,
-                                            lineStyle: {
-                                                color: ['#43485E'],
-                                                width: 1,
-                                                type: 'solid'
-                                            }
-                                        },
-                                        splitNumber: 5,
-                                        minInterval: 1,
-                                        yAxisIndex: 0
-                                    }
-                                ],
-                                series: []
-                            }
-                        }
 
-                        echartsData.value.options.legend.data = []
+                            options: {
-                        //处理多y轴
+                                series: [
-                        // if (unitList.length != 0 && unitList.length > 1) {
+
-                        // console.log(max, min)
+                                ]
-                        echartsData.value.options.yAxis[0].yAxisIndex = 0
+                            }
-                        unitList.map((item: any, index: any) => {
+                        }
-                            if (index != unitList.length - 1) {
+                        if (chartsList.length > 0) {
-                                echartsData.value.options.yAxis.push({
+                            echartsData.value.yAxis=[]
-                                    type: 'value',
+                        unitList.forEach((item: any, index: any) => {
+                            let right = {
                                 position: 'right',
-                                    offset: index * 80, // y轴位置的偏移量
+                                offset: (index - 1) * 80,
-                                    name: unitList[index + 1].unit,
-                                    axisLabel: {
-                                        color: '#000',
-                                        fontSize: 14
-                                    },
-                                    axisTick: {
-                                        show: true
-                                    },
-                                    axisLine: {
-                                        show: true,
-                                        lineStyle: {
-                                            // color: colorList[index + 1]
                             }
-                                    },
+                            echartsData.value.yAxis.push({
-                                    nameTextStyle: {
+                                name: item,
-                                        color: '#000',
+                                yAxisIndex: index,
-                                        fontSize: '14'
-                                    },
-                                    max: list[index + 1].max,
-                                    min: list[index + 1].min,
                                 splitLine: {
                                     show: false,
-                                        lineStyle: {
+
-                                            color: ['#43485E'],
-                                            width: 1,
-                                            type: 'solid'
-                                        }
                                 },
-                                    yAxisIndex: index + 1
+                                ...(index > 0 ? right : null)
                             })
+                        })
+
+                        result.forEach((item: any, index: any) => {
+                            let yMethodList: any = []
+
+                            let ABCList = Object.values(item.reduce((acc, item) => {
+                                let key = item.phase;
+                                if (!acc[key]) {
+                                    acc[key] = [];
                                 }
-                        })
+                                acc[key].push(item);
-                        // }
+                                return acc;
-                        list.map((item: any, index: any) => {
+                            }, {}));
-                            console.log(item, '++++++++++++596')
+                            ABCList.forEach((kk: any,) => {
-                            item.map((vv: any, indexs: any) => {
+                                let seriesList: any = []
-                                //处理legend
+                                kk.forEach((cc: any) => {
-                                if (chartsList.length != 0) {
+                                    if (cc.statisticalData) {
-                                    echartsData.value.options.legend.data.push({
+                                        yMethodList.push(cc.statisticalData?.toFixed(2) - 0)
-                                        name: vv.phase + '相' + vv.showName
+
-                                    })
                                     }
-                                if (
+
-                                    unitList.findIndex((item: any) => {
+                                    seriesList.push([cc.time, cc.statisticalData?.toFixed(2)])
-                                        return item.unit == vv.unit && item.name == vv.showName
-                                    }) != -1
-                                ) {
-                                    vv.yAxisIndex = unitList.findIndex((item: any) => {
-                                        return item.unit == vv.unit && item.name == vv.showName
                                 })
-                                } else {
+
-                                    vv.yAxisIndex = 0
+
-                                }
-                                console.log(vv, '<================>', vv.unit)
                                 echartsData.value.options.series.push({
-                                    name: vv.phase + '相' + vv.showName,
+                                    name: kk[0].phase + '相' + item[0].anotherName,
                                     type: 'line',
                                     smooth: true,
                                     symbol: 'none',
-                                    emphasis: {
+                                    data: seriesList,
-                                        focus: 'series'
+                                    yAxisIndex: index
-                                    },
-                                    itemStyle: {},
-                                    //数据
-                                    data: filterArray(
-                                        chartsList
-                                            .map((kk: any, kks: any) => {
-                                                if (kk.statisticalName == vv.name) {
-                                                    // xAxis[kks]
-                                                    return [kk.time, kk.statisticalData]
-                                                } else {
-                                                    return ''
-                                                }
-                                            })
-                                            .filter((kk: any) => kk !== '')
-                                    ),
-                                    //数据对应的y轴
-                                    yAxisIndex: vv.yAxisIndex
-                                })
-                            })
-                        })
-                        console.log(list, '6444和那个的哈哈哈哈呀哈哈哈哈哈哈哈哈哈哈哈')
 
-                        //设置数据项颜色
-                        echartsData.value.options.series.map((item: any, index: any) => {
-                            item.itemStyle = {
-                                normal: {
-                                    color: colorList[index],
-                                    lineStyle: {
-                                        color: colorList[index]
-                                    }
-                                }
-                            }
-                            // item.data = filterArray(item.data)
                                 })
-                        // echartsData.value.options.series = echartsData.value.options.series.sort((a: any, b: any) => {
+
-                        //     return a.yAxisIndex - b.yAxisIndex
+
-                        // })
+                            })
-                        console.log(echartsData.value.options.series, '...............709')
+                            let [min, max] = yMethod(yMethodList)
+                            echartsData.value.yAxis[index].min = min
+                            echartsData.value.yAxis[index].max = max
+
+
+
+                        })
+                    }
+                        // console.log("🚀 ~ .1111 ~  echartsData.value :", echartsData.value)
+
+
+
                         loading.value = false
                     }
                 })
@@ -862,6 +676,41 @@ const formatCountOptions = (list: any) => {
         })
     }
 }
+const flag = ref(false)
+const selectChange = (e: boolean) => {
+    flag.value = e
+    if (activeColName.value == '0') {
+        if (flag.value) {
+            EcharHeight.value = mainHeight(565)
+        } else {
+            EcharHeight.value = mainHeight(510)
+        }
+    } else {
+        if (flag.value) {
+            EcharHeight.value = mainHeight(365)
+        } else {
+            EcharHeight.value = mainHeight(310)
+        }
+    }
+
+}
+const handleChange = () => {
+    if (activeColName.value == '0') {
+        if (flag.value) {
+            EcharHeight.value = mainHeight(565)
+        } else {
+            EcharHeight.value = mainHeight(510)
+        }
+
+    } else {
+        if (flag.value) {
+            EcharHeight.value = mainHeight(365)
+        } else {
+            EcharHeight.value = mainHeight(310)
+        }
+    }
+
+}
 const tableHeaderRef = ref<any>()
 const searchFormIndex = ref<any>()
 watch(
@@ -899,11 +748,13 @@ onMounted(() => {
 .device-manage {
     display: flex;
     height: calc(100vh - 100px);
+
     // overflow-y: auto;
     &-right {
         // overflow: auto;
         flex: 1;
         padding: 10px 10px 10px 0;
+
         .el-descriptions__header {
             height: 36px;
             margin-bottom: 7px;
@@ -932,6 +783,7 @@ onMounted(() => {
 
 .history_title {
     width: 100%;
+
     p {
         height: 32px;
         line-height: 32px;
@@ -943,28 +795,30 @@ onMounted(() => {
 
 ::v-deep .monitor_info {
     width: 100%;
+
     .el-tabs__content {
         padding: 0 !important;
         min-height: 130px !important;
     }
 }
+
 .history_collapse {
     height: calc(100vh - 300px);
     width: 100%;
+
     .history_trend {
         width: 100%;
         height: calc(100vh - 340px);
         display: flex;
         flex-direction: column;
+
         .history_header {
             width: 100%;
-            height: auto;
+
-            overflow: hidden;
         }
+
         .history_chart {
-            width: 100%;
+
-            flex: 1 !important;
-            margin-top: 10px;
             margin: 10px 0;
         }
     }

src/views/govern/setting/statisticalType/add.vue

@@ -53,6 +53,12 @@ const open = (text: string, data?: anyObj) => {
     title.value = text
     for (let key in form) {
         form[key] = data ? data[key] : ''
+
+        if (key == 'sort') {
+
+            form[key] = data?.sort == '' ? data[key] : 100
+            console.log("🚀 ~ open ~ form[key]:", form[key])
+        }
     }
     dialogVisible.value = true
 }

src/views/govern/setting/statisticalType/index.vue

@@ -31,6 +31,7 @@ const tableStore = new TableStore({
     showPage: false,
     url: '/system-boot/dictTree/query',
     method: 'POST',
+    paramsPOST:true,
     column: [
         { title: '序号', type: 'seq', width: 60 },
         { title: '统计类型', field: 'name' },
@@ -82,16 +83,16 @@ const tableStore = new TableStore({
         }
     ],
     loadCallback: () => {
-        // 过滤数组中type等于1的数据，children下钻
+        // // 过滤数组中type等于1的数据，children下钻
-        const filterData = (arr: any[]) => {
+        // const filterData = (arr: any[]) => {
-            return arr.filter((item: any) => {
+        //     return arr.filter((item: any) => {
-                if (item.children.length) {
+        //         if (item.children.length) {
-                    item.children = filterData(item.children)
+        //             item.children = filterData(item.children)
-                }
+        //         }
-                return item.type != 1
+        //         return item.type != 1
-            })
+        //     })
-        }
+        // }
-        tableStore.table.data = filterData(tableStore.table.data)
+        // tableStore.table.data = filterData(tableStore.table.data)
     }
 })
 provide('tableStore', tableStore)