<!-- 谐波频谱 -->
<template>
    <div class="harmonic">
        <div class="harmonic_select">
            <!-- {{ searchForm.index }} -->
            <el-form :model="searchForm" class="history_select" id="history_select">
                <el-form-item label="稳态指标">
                    <el-select
                        multiple
                        :multiple-limit="3"
                        collapse-tags
                        collapse-tags-tooltip
                        v-model="searchForm.index"
                        placeholder="请选择统计指标"
                    >
                        <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>
            <el-button type="primary" @click="init">查询</el-button>
        </div>
        <div class="harmonic_body">
            <div class="harmonic_body_charts" v-if="searchForm.index[0]">
                <MyEchart ref="barCharts1" :options="echartsData1"></MyEchart>
            </div>
            <div class="harmonic_body_charts" v-if="searchForm.index[1]">
                <MyEchart ref="barCharts2" :options="echartsData2"></MyEchart>
            </div>
            <div class="harmonic_body_charts" v-if="searchForm.index[2]">
                <MyEchart ref="barCharts3" :options="echartsData3"></MyEchart>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, watch } from 'vue'
import { queryByCode, queryByid, queryCsDictTree } from '@/api/system-boot/dictTree'
import { queryStatistical } from '@/api/system-boot/csstatisticalset'
import MyEchart from '@/components/echarts/MyEchart.vue'
import { getDeviceHarmonicSpectrumData, getRealTimeTableList } from '@/api/cs-device-boot/EquipmentDelivery.ts'
const searchForm = ref({})
searchForm.value = {
    index: []
}
//统计指标
const indexOptions: any = ref([])
const legendDictList: any = ref([])
queryByCode('portable-harmonic').then(res => {
    queryCsDictTree(res.data.id).then(item => {
        indexOptions.value = item.data
        searchForm.value.index[0] = indexOptions.value[0].id
    })
    queryStatistical(res.data.id).then(vv => {
        legendDictList.value = vv.data
    })
})
const tableList: any = ref([])
for (let i = 0; i < 10000; i++) {
    tableList.value.push({
        name: i + 1,
        // value: Math.floor(Math.random() * 101)
        value: i + 2
    })
}
const echartsData1: any = ref([]),
    echartsData2: any = ref([]),
    echartsData3: any = ref([]),
    barCharts1 = ref(),
    barCharts2 = ref(),
    barCharts3 = ref()
//查询谐波频谱折线图
const chartsTitle1 = ref('')
const chartsTitle2 = ref('')
const chartsTitle3 = ref('')
//谐波频谱参数
const params = ref({})
const getHarmonicSpectrumParams = (val: any) => {
    params.value = val
    params.value.list = []
    console.log(params.value, '+++++++++++++')
    //查询稳态指标
    getRealTimeTableList().then(res => {
        console.log('稳态指标', res)
    })
    //查询谐波频谱
    getDeviceHarmonicSpectrumData(params.value).then(res => {
        console.log('谐波频谱')
    })
}
const init = () => {
    const xDataList: any = [],
        yDataList1: any = [],
        yDataList2: any = [],
        yDataList3: any = []
    tableList.value.map((item: any) => {
        xDataList.push(item.name)
        yDataList1.push(item.value)
        yDataList2.push(item.value + 1000)
        yDataList3.push(item.value + 2000)
    })

    indexOptions.value.map((item: any) => {
        if (item.id == searchForm.value.index[0]) {
            chartsTitle1.value = item.name
        }
        if (item.id == searchForm.value.index[1]) {
            chartsTitle2.value = item.name
        }
        if (item.id == searchForm.value.index[2]) {
            chartsTitle3.value = item.name
        }
    })
    console.log(chartsTitle1.value, chartsTitle2.value, chartsTitle3.value, '666677777')
    if (searchForm.value.index[0]) {
        echartsData1.value = {
            options: {
                // backgroundColor: '#0f375f',
                title: [
                    {
                        left: '10%',
                        top: 0,
                        text: chartsTitle1.value
                    }
                ],
                grid: {
                    top: '8%',
                    bottom: '15%', //也可设置left和right设置距离来控制图表的大小
                    left: '3%',
                    right: '5%'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            show: false
                        }
                    }
                },
                legend: {
                    data: ['A相', 'B相', 'C相'],
                    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: '时间(ms)',
                    data: xDataList,
                    axisLine: {
                        show: true, //隐藏X轴轴线
                        lineStyle: {
                            color: '#000'
                        }
                    },
                    axisTick: {
                        show: true //隐藏X轴刻度
                    },
                    axisPointer: {
                        type: 'shadow'
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#000' //X轴文字颜色
                        }
                    },
                    boundaryGap: false
                },
                yAxis: [
                    {
                        type: 'value',
                        name: 'kv',
                        splitLine: {
                            show: false
                        },
                        axisTick: {
                            show: true
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#000'
                            }
                        }
                    }
                ],
                series: [
                    {
                        name: 'A相',
                        type: 'line',
                        barMaxWidth: 24, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
                        itemStyle: {
                            // normal: {
                            barBorderRadius: [3, 3, 0, 0],
                            color: '#00CC99'
                            // }e
                        },
                        data: yDataList1,
                        smooth: true, // 这里设置平滑曲线
                        symbol: 'none' // 设置为 'none' 去掉折点小圆
                    },
                    {
                        name: 'B相',
                        type: 'line',
                        barMaxWidth: 24,
                        itemStyle: {
                            // normal: {
                            barBorderRadius: [3, 3, 0, 0],

                            color: '#FF9900'
                            // }
                        },
                        data: yDataList2,
                        smooth: true, // 这里设置平滑曲线
                        symbol: 'none' // 设置为 'none' 去掉折点小圆
                    },
                    {
                        name: 'C相',
                        type: 'line',
                        barMaxWidth: 24,
                        itemStyle: {
                            // normal: {
                            barBorderRadius: [3, 3, 0, 0]
                            // color: '#FF9900'
                            // }
                        },
                        data: yDataList3,
                        smooth: true, // 这里设置平滑曲线
                        symbol: 'none' // 设置为 'none' 去掉折点小圆
                    }
                ]
            }
        }
        barCharts1.value && barCharts1.value.initChart()
    }
    if (searchForm.value.index[1]) {
        echartsData2.value = {
            options: {
                // backgroundColor: '#0f375f',
                title: [
                    {
                        left: '10%',
                        top: 0,
                        text: chartsTitle2.value
                    }
                ],
                grid: {
                    top: '8%',
                    bottom: '15%', //也可设置left和right设置距离来控制图表的大小
                    left: '3%',
                    right: '5%'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            show: false
                        }
                    }
                },
                legend: {
                    data: ['A相', 'B相', 'C相'],
                    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: '时间(ms)',
                    data: xDataList,
                    axisLine: {
                        show: true, //隐藏X轴轴线
                        lineStyle: {
                            color: '#000'
                        }
                    },
                    axisTick: {
                        show: true //隐藏X轴刻度
                    },
                    axisPointer: {
                        type: 'shadow'
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#000' //X轴文字颜色
                        }
                    },
                    boundaryGap: false
                },
                yAxis: [
                    {
                        type: 'value',
                        name: 'kv',
                        splitLine: {
                            show: false
                        },
                        axisTick: {
                            show: true
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#000'
                            }
                        }
                    }
                ],
                series: [
                    {
                        name: 'A相',
                        type: 'line',
                        barMaxWidth: 24, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
                        itemStyle: {
                            // normal: {
                            barBorderRadius: [3, 3, 0, 0],
                            color: '#00CC99'
                            // }e
                        },
                        data: yDataList1,
                        smooth: true, // 这里设置平滑曲线
                        symbol: 'none' // 设置为 'none' 去掉折点小圆
                    },
                    {
                        name: 'B相',
                        type: 'line',
                        barMaxWidth: 24,
                        itemStyle: {
                            // normal: {
                            barBorderRadius: [3, 3, 0, 0],

                            color: '#FF9900'
                            // }
                        },
                        data: yDataList2,
                        smooth: true, // 这里设置平滑曲线
                        symbol: 'none' // 设置为 'none' 去掉折点小圆
                    },
                    {
                        name: 'C相',
                        type: 'line',
                        barMaxWidth: 24,
                        itemStyle: {
                            // normal: {
                            barBorderRadius: [3, 3, 0, 0]
                            // color: '#FF9900'
                            // }
                        },
                        data: yDataList3,
                        smooth: true, // 这里设置平滑曲线
                        symbol: 'none' // 设置为 'none' 去掉折点小圆
                    }
                ]
            }
        }
        barCharts2.value && barCharts2.value.initChart()
    }
    if (searchForm.value.index[2]) {
        echartsData3.value = {
            options: {
                // backgroundColor: '#0f375f',
                title: [
                    {
                        left: '10%',
                        top: 0,
                        text: chartsTitle3.value
                    }
                ],
                grid: {
                    top: '8%',
                    bottom: '15%', //也可设置left和right设置距离来控制图表的大小
                    left: '3%',
                    right: '5%'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            show: false
                        }
                    }
                },
                legend: {
                    data: ['A相', 'B相', 'C相'],
                    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: '时间(ms)',
                    data: xDataList,
                    axisLine: {
                        show: true, //隐藏X轴轴线
                        lineStyle: {
                            color: '#000'
                        }
                    },
                    axisTick: {
                        show: true //隐藏X轴刻度
                    },
                    axisPointer: {
                        type: 'shadow'
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#000' //X轴文字颜色
                        }
                    },
                    boundaryGap: false
                },
                yAxis: [
                    {
                        type: 'value',
                        name: 'kv',
                        splitLine: {
                            show: false
                        },
                        axisTick: {
                            show: true
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#000'
                            }
                        }
                    }
                ],
                series: [
                    {
                        name: 'A相',
                        type: 'line',
                        barMaxWidth: 24, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
                        itemStyle: {
                            // normal: {
                            barBorderRadius: [3, 3, 0, 0],
                            color: '#00CC99'
                            // }e
                        },
                        data: yDataList1,
                        smooth: true, // 这里设置平滑曲线
                        symbol: 'none' // 设置为 'none' 去掉折点小圆
                    },
                    {
                        name: 'B相',
                        type: 'line',
                        barMaxWidth: 24,
                        itemStyle: {
                            // normal: {
                            barBorderRadius: [3, 3, 0, 0],

                            color: '#FF9900'
                            // }
                        },
                        data: yDataList2,
                        smooth: true, // 这里设置平滑曲线
                        symbol: 'none' // 设置为 'none' 去掉折点小圆
                    },
                    {
                        name: 'C相',
                        type: 'line',
                        barMaxWidth: 24,
                        itemStyle: {
                            // normal: {
                            barBorderRadius: [3, 3, 0, 0]
                            // color: '#FF9900'
                            // }
                        },
                        data: yDataList3,
                        smooth: true, // 这里设置平滑曲线
                        symbol: 'none' // 设置为 'none' 去掉折点小圆
                    }
                ]
            }
        }
        barCharts3.value && barCharts3.value.initChart()
    }
}
watch(
    () => searchForm.value.index,
    (val: any, oldval: any) => {
        if (val && val.length != 0) {
            init()
        }
    },
    {
        deep: true,
        immediate: true
    }
)
onMounted(() => {
    console.log()
    // init()
})
defineExpose({ getHarmonicSpectrumParams })
</script>
<style lang="scss" scoped>
.harmonic {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    .harmonic_select {
        width: 50%;
        height: 30px;
        display: flex;
        position: absolute;
        top: -30px;
        left: 0;
        justify-content: flex-start;
        .el-button {
            margin-left: 10px;
        }
    }
    .harmonic_body {
        flex: 1;
        overflow-y: auto;
        padding-bottom: 200px;
        .harmonic_body_charts {
            height: 200px;
            margin: 15px 0;
            border: 1px solid #eee;
        }
    }
}
</style>
