echart双轴处理

src/api/cs-device-boot/capacity.ts

@@ -0,0 +1,15 @@
+import createAxios from '@/utils/request'
+
+// 更新组和指标关系
+export function getDevCapacity(devId: string) {
+    let form = new FormData()
+    form.append('id', devId)
+    return createAxios({
+        url: '/cs-device-boot/capacity/getDevCapacity',
+        method: 'post',
+        headers: {
+            'Content-Type': 'application/x-www-form-urlencoded'
+        },
+        data: form
+    })
+}

src/api/cs-harmonic-boot/stable.ts

@@ -0,0 +1,20 @@
+import createAxios from '@/utils/request'
+
+// 更新组和指标关系
+export function queryCommonStatisticalByTime(data: any) {
+    return createAxios({
+        url: '/cs-harmonic-boot/stable/queryCommonStatisticalByTime',
+        method: 'post',
+        data: Object.assign(
+            {
+                devId: '',
+                endTime: '',
+                frequency: '',
+                startTime: '',
+                statisticalId: '',
+                valueType: '',
+            },
+            data
+        ),
+    })
+}

src/components/echarts/MyEchart.vue

@@ -6,6 +6,7 @@
 import { onBeforeUnmount, onMounted, ref, defineExpose, watch } from 'vue'
 import echarts from './echarts'
 import 'echarts/lib/component/dataZoom'
+
 const chartRef = ref<HTMLDivElement>()
 
 const props = defineProps(['options'])
@@ -71,27 +72,43 @@ const initChart = () => {
             bottom: '40px',
             containLabel: true
         },
-        xAxis: [
+        xAxis: handlerXAxis(),
+        yAxis: handlerYAxis(),
+        dataZoom: [
             {
-                type: 'category',
+                type: 'inside',
-                axisTick: { show: false },
+                height: 13,
-                axisLine: {
+                start: 0,
-                    lineStyle: {
+                bottom: '20px',
-                        color: '#000'
+                end: 100,
-                    }
+                ...(props.options.dataZoom || null)
             },
-                axisLabel: {
+            {
-                    textStyle: {
+                start: 0,
-                        fontFamily: 'dinproRegular',
+                height: 13,
-                        color: '#000',
+                bottom: '20px',
-                        fontSize: '12'
+                end: 100,
-                    }
+                ...(props.options.dataZoom || null)
-                },
-                ...(props.options.xAxis || null)
             }
         ],
-        yAxis: [
+        color: [
-            {
+            ...(props.options.color || ''),
+            '#07CCCA ',
+            '#00BFF5',
+            '#FFBF00',
+            '#77DA63',
+            '#D5FF6B',
+            '#Ff6600',
+            '#FF9100',
+            '#5B6E96',
+            '#66FFCC',
+            '#B3B3B3'
+        ],
+        ...props.options.options
+    })
+}
+const handlerYAxis = () => {
+    let temp = {
         type: 'value',
 
         nameTextStyle: {
@@ -115,42 +132,54 @@ const initChart = () => {
                 type: 'dashed',
                 opacity: 0.5
             }
-                },
-                ...(props.options.yAxis || null)
         }
-        ],
-        dataZoom: [
-            {
-                type: 'inside',
-                height: 13,
-                start: 0,
-                bottom: '20px',
-                end: 100,
-                ...(props.options.dataZoom || null)
-            },
-            {
-                start: 0,
-                height: 13,
-                bottom: '20px',
-                end: 100,
-                ...(props.options.dataZoom|| null)
     }
-        ],
+    // props.options.xAxis 是数组还是对象
-        color: [
+    if (Array.isArray(props.options.yAxis)) {
-            ...(props.options.color || ''),
+        return props.options.yAxis.map((item: any) => {
-            '#07CCCA ',
+            return {
-            '#00BFF5',
+                ...item,
-            '#FFBF00',
+                ...temp
-            '#77DA63',
+            }
-            '#D5FF6B',
-            '#Ff6600',
-            '#FF9100',
-            '#5B6E96',
-            '#66FFCC',
-            '#B3B3B3'
-        ],
-        ...props.options.options
         })
+    } else {
+        return {
+            ...props.options.yAxis,
+            ...temp
+        }
+    }
+}
+const handlerXAxis = () => {
+    let temp = {
+        type: 'category',
+        axisTick: { show: false },
+        axisLine: {
+            lineStyle: {
+                color: '#000'
+            }
+        },
+        axisLabel: {
+            textStyle: {
+                fontFamily: 'dinproRegular',
+                color: '#000',
+                fontSize: '12'
+            }
+        }
+    }
+    // props.options.xAxis 是数组还是对象
+    if (Array.isArray(props.options.xAxis)) {
+        return props.options.xAxis.map((item: any) => {
+            return {
+                ...item,
+                ...temp
+            }
+        })
+    } else {
+        return {
+            ...props.options.xAxis,
+            ...temp
+        }
+    }
 }
 onMounted(() => {
     initChart()

src/layouts/admin/index.vue

@@ -98,7 +98,7 @@ const init = async () => {
                         icon: 'el-icon-List',
                         menu_type: 'tab',
                         url: '',
-                        component: '/src/views/govern/device/control/index.vue',
+                        component: '/src/views/govern/analyze/APF/index.vue',
                         keepalive: 'auth/role',
                         extend: 'none',
                         children: []

src/views/govern/analyze/APF/index.vue

@@ -0,0 +1,305 @@
+<template>
+    <div class='default-main analyze-apf' :style='{ height: pageHeight.height }' v-loading='loading'>
+        <DeviceTree @node-click='nodeClick' @init='nodeClick'></DeviceTree>
+        <div class='analyze-apf-right'>
+            <el-form :inline='true'>
+                <el-form-item label='统计指标:'>
+                    <el-select v-model='formInline.statisticalId' filterable placeholder='请选择'>
+                        <el-option
+                            v-for='item in zblist'
+                            :key='item.value'
+                            :label='item.label'
+                            :value='item.value'
+                        ></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label='值类型:'>
+                    <el-select v-model='formInline.valueType' filterable placeholder='请选择'>
+                        <el-option
+                            v-for='item in typelist'
+                            :key='item.value'
+                            :label='item.label'
+                            :value='item.value'
+                        ></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label='时间:'>
+                    <DatePicker ref='datePickerRef'></DatePicker>
+                </el-form-item>
+                <el-form-item>
+                    <el-button type='primary' @click='search' icon='el-icon-search'>查询</el-button>
+                </el-form-item>
+            </el-form>
+            <el-empty description='暂无数据' v-if='!echartsData' style='flex: 1'></el-empty>
+            <template v-else>
+                <MyEchart :options='echartsData' style='flex: 1' />
+                <span style='position: absolute; right: 10px; top: 10px'>
+                    <i style='color: #ff9912' type='warning' class='el-icon-warning'></i>
+                    总输出电流阈值和总输出电流比较
+                </span>
+            </template>
+        </div>
+    </div>
+</template>
+
+<script setup lang='ts'>
+import { ref, reactive } from 'vue'
+import { mainHeight } from '@/utils/layout'
+import DeviceTree from '@/components/tree/govern/deviceTree.vue'
+import { queryByCode, queryCsDictTree } from '@/api/system-boot/dictTree'
+import { getDevCapacity } from '@/api/cs-device-boot/capacity'
+import { queryCommonStatisticalByTime } from '@/api/cs-harmonic-boot/stable'
+import DatePicker from '@/components/form/datePicker/index.vue'
+import MyEchart from '@/components/echarts/MyEchart.vue'
+
+defineOptions({
+    name: 'govern/analyze/APF'
+})
+const pageHeight = mainHeight(20)
+const loading = ref(false)
+const echartsData = ref<any>(null)
+const datePickerRef = ref()
+const formInline = reactive({
+    statisticalId: '',
+    valueType: '',
+    startTime: '',
+    endTime: '',
+    devId: ''
+})
+const devCapacity = ref(0)
+const typelist = [
+    {
+        label: '平均值',
+        value: 'avg'
+    },
+    {
+        label: '最大值',
+        value: 'max'
+    },
+    {
+        label: '最小值',
+        value: 'min'
+    },
+    {
+        label: 'CP95值',
+        value: 'cp95'
+    }
+]
+const zblist = ref<any[]>([])
+
+const init = () => {
+    return new Promise((resolve, reject) => {
+        queryByCode('Harmonic_Type').then(res => {
+            queryCsDictTree(res.data.id).then(res => {
+                zblist.value = res.data.map((item: any) => {
+                    return {
+                        value: item.id,
+                        label: item.name,
+                        ...item
+                    }
+                })
+                formInline.statisticalId = zblist.value[0]?.value
+                formInline.valueType = typelist[0].value
+                resolve(null)
+            })
+        })
+    })
+}
+const nodeClick = async (e: anyObj) => {
+    if (e.level == 2) {
+        formInline.devId = e.id
+        loading.value = true
+        if (zblist.value.length === 0) {
+            await init()
+        }
+        let getDevCapacityRes = await getDevCapacity(formInline.devId)
+        devCapacity.value = getDevCapacityRes.data
+        search()
+    }
+}
+const search = () => {
+    loading.value = true
+    formInline.startTime = datePickerRef.value.timeValue[0]
+    formInline.endTime = datePickerRef.value.timeValue[1]
+    queryCommonStatisticalByTime(formInline).then(({ data }: { data: any[] }) => {
+        if (data.length) {
+            echartsData.value = {}
+            let legend: any[] = []
+            let xAxis: any[] = []
+            data.forEach(item => {
+                if (!xAxis.includes(item.time)) {
+                    xAxis.push(item.time)
+                }
+                if (!legend.includes(item.anotherName)) {
+                    legend.push(item.anotherName)
+                }
+            })
+            let series = [
+                // 总输出电流
+                {
+                    name: data.find(item => item.statisticalName === 'Apf_RmsI_TolOut').anotherName,
+                    symbol: 'none',
+                    smooth: true,
+                    type: 'line',
+                    //stack: 'Total',
+                    data: data
+                        .map(item => {
+                            if (item.statisticalName === 'Apf_RmsI_TolOut') {
+                                return item.statisticalData
+                            } else {
+                                return ''
+                            }
+                        })
+                        .filter(item => item !== ''),
+                    markLine: {
+                        symbol: 'none',
+                        data: [
+                            {
+                                yAxis: devCapacity.value,
+                                label: {
+                                    position: 'middle', // 表现内容展示的位置
+                                    formatter: '总输出电流阈值', // 标线展示的内容
+                                    color: '#daa569' // 展示内容颜色
+                                }
+                            }
+                        ]
+                    },
+                    yAxisIndex: 1
+                },
+                //负载电流畸变率
+                {
+                    name: data.find(item => item.statisticalName === 'Apf_ThdA_Load').anotherName,
+                    symbol: 'none',
+                    smooth: true,
+                    type: 'line',
+                    data: data
+                        .map(item => {
+                            if (item.statisticalName === 'Apf_ThdA_Load') {
+                                return item.statisticalData
+                            } else {
+                                return ''
+                            }
+                        })
+                        .filter(item => item !== '')
+                },
+                // 电网电流畸变率
+                {
+                    name: data.find(item => item.statisticalName === 'Apf_ThdA_Sys').anotherName,
+                    symbol: 'none',
+                    smooth: true,
+                    type: 'line',
+                    data: data
+                        .map(item => {
+                            if (item.statisticalName === 'Apf_ThdA_Sys') {
+                                return item.statisticalData
+                            } else {
+                                return ''
+                            }
+                        })
+                        .filter(item => item !== '')
+                }
+            ]
+            echartsData.value = {
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                        type: 'cross',
+                        crossStyle: {
+                            color: '#999'
+                        }
+                    }
+                },
+                legend: {
+                    data: legend
+                },
+                grid: {
+                    left: '20px',
+                    right: '40px',
+                    bottom: '50px',
+                    containLabel: true
+                },
+                toolbox: {
+                    feature: {
+                        saveAsImage: {}
+                    }
+                },
+                xAxis: {
+                    name: '时间',
+                    type: 'category',
+                    boundaryGap: false,
+                    data: xAxis,
+                    axisLabel: {
+                        formatter: function(value: string) {
+                            return value.split(' ').join('\n')
+                        }
+                    },
+                    axisLine: {
+                        show: true,
+                        // symbol: ["none", "arrow"],
+                        lineStyle: {
+                            color: '#333'
+                        }
+                    }
+                },
+                yAxis: [
+                    {
+                        name: '畸变率:(%)',
+                        type: 'value',
+                        max: 10,
+                        min: 0,
+                        axisLine: {
+                            show: true,
+                            //symbol: ["none", "arrow"],
+                            lineStyle: {
+                                color: '#333'
+                            }
+                        }
+                    },
+                    {
+                        name: '电流:(A)',
+                        type: 'value',
+                        min: 0,
+                        // 寻找data最大值
+                        max:
+                            series[0].data.reduce((a, b) => Math.max(a, b)) > devCapacity.value
+                                ? series[0].data.reduce((a, b) => Math.max(a, b))
+                                : devCapacity.value + devCapacity.value * 0.5,
+                        interval:
+                            (series[0].data.reduce((a, b) => Math.max(a, b)) > devCapacity.value
+                                ? series[0].data.reduce((a, b) => Math.max(a, b))
+                                : devCapacity.value) / 10,
+                        axisLine: {
+                            show: true,
+                            //symbol: ["none", "arrow"],
+                            lineStyle: {
+                                color: '#333'
+                            }
+                        }
+                    }
+                ],
+                options: {
+                    series: series
+                }
+            }
+        } else {
+            echartsData.value = null
+        }
+        loading.value = false
+    })
+}
+</script>
+
+<style lang='scss'>
+.analyze-apf {
+    display: flex;
+
+    &-right {
+        height: 100%;
+        overflow: hidden;
+        flex: 1;
+        padding: 10px 10px 10px 0;
+        display: flex;
+        flex-direction: column;
+    }
+}
+</style>

src/views/govern/device/control/popup.vue

@@ -102,18 +102,7 @@ const init = () => {
                     axisLine: {
                         show: true
                     },
-                    minInterval: 1,
+                    minInterval: 0.1,
-                    interval: parseInt(
-                        (
-                            (arr
-                                .map(item => item.statisticalData)
-                                .sort((a, b) => {
-                                    return b - a
-                                })[0] *
-                                1.5) /
-                            5
-                        ).toFixed(0)
-                    ),
                     min: 0,
                     max: parseInt(
                         (

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

@@ -63,7 +63,7 @@
 defineOptions({
     name: 'govern/device/manage'
 })
-import MangePopup from './managePopup.vue'
+import MangePopup from './popup.vue'
 import DeviceTree from '@/components/tree/govern/deviceTree.vue'
 import { mainHeight } from '@/utils/layout'
 import { queryByCode, queryByid, queryCsDictTree } from '@/api/system-boot/dictTree'