admin-sjzx/src/views/LN/newEnergy/newEnergyAnalysis/index.vue

<template>
    <div class="default-main" :style="height">
        <splitpanes style="height: 100%" class="default-theme" id="navigation-splitpanes">
            <pane :size="size">
                <PointTree
                    :default-expand-all="false"
                    @node-click="handleNodeClick"
                    @init="handleNodeClick"
                ></PointTree>
            </pane>
            <pane :style="height" style="background: #fff">
                <TableHeader ref="TableHeaderRef" datePicker>
                    <template v-slot:select>
                        <!-- <el-form-item label="有功功率区间">
                            <el-select
                                v-model="power"
                                multiple
                                collapse-tags
                                collapse-tags-tooltip
                                filterable
                                placeholder="请选择有功功率区间"
                            >
                                <el-option
                                    v-for="item in powerList"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="各指标越限">
                            <el-select
                                v-model="index"
                                multiple
                                collapse-tags
                                collapse-tags-tooltip
                                filterable
                                placeholder="请选择各指标越限"
                            >
                                <el-option
                                    v-for="item in indexList"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item> -->
                    </template>
                    <template #operation>
                        <el-button icon="el-icon-Download" type="primary">生成报表</el-button>
                    </template>
                </TableHeader>

                <div class="container pd10">
                    <div>
                        <el-card class="cardBox">
                            <div class="mb5" style="display: flex; justify-content: space-between">
                                <h3>功率区间</h3>
                                <div>
                                    <span>稳态越限图例:　</span>
                                    <span style="color: red">越限　</span>
                                    <span style="color: green">合格</span>
                                </div>
                            </div>
                            <el-card class="card-top">
                                <div
                                    v-for="(item, index) in powerList1"
                                    class="pd10"
                                    style="cursor: pointer"
                                    :class="flag == item.label ? 'hoverBox' : ''"
                                    @click="analyseList(item.label, index)"
                                >
                                    <div style="font-size: 24px; font-weight: 700">
                                        <span :style="{ color: item.crossTheLine > 0 ? 'red' : 'green' }">
                                            {{ item.quantity }}
                                        </span>
                                        <span style="font-size: 14px; font-weight: 500">个</span>
                                    </div>
                                    <div>
                                        {{ item.label }}
                                    </div>
                                </div>
                            </el-card>

                            <el-card class="card-top mt15">
                                <div
                                    v-for="(item, index) in powerList2"
                                    class="pd10"
                                    style="cursor: pointer"
                                    :class="flag == item.label ? 'hoverBox' : ''"
                                    @click="analyseList(item.label, index + 5)"
                                >
                                    <div style="font-size: 24px; font-weight: 700">
                                        <span :style="{ color: item.crossTheLine == '1' ? 'red' : 'green' }">
                                            {{ item.quantity }}
                                        </span>
                                        <span style="font-size: 14px; font-weight: 500">个</span>
                                    </div>
                                    <div>
                                        {{ item.label }}
                                    </div>
                                </div>
                            </el-card>
                        </el-card>
                    </div>
                    <el-card class="echart">
                        <my-echart :options="options" style="height: 238px" />
                    </el-card>
                </div>
                <div class="container mt10 ml10">
                    <el-card class="box">
                        <h3>功率区间稳态越限详情</h3>
                        <div :style="`height:calc(${heightB.height} - 25px)`" style="overflow-y: auto">
                            <vxe-table v-bind="defaultAttribute" ref="vxeRef" height="auto" :data="tableData">
                                <vxe-column field="num" title="时间" min-width="100px">
                                    <template #default="{ row }">
                                        <el-link
                                            type="primary"
                                            :underline="false"
                                            class="percentage"
                                            @click="timeClick(row)"
                                        >
                                            {{ row.time }}
                                        </el-link>
                                    </template>
                                </vxe-column>
                                <vxe-column field="voltageOffset" title="电压偏差(%)">
                                    <template #default="{ row }">
                                        <el-link
                                            :type="row.voltageOffset == '1' ? 'danger' : 'success'"
                                            class="percentage"
                                            @click="timeClick(row)"
                                        >
                                            {{ row.voltageOffset == '1' ? '越限' : '合格' }}
                                        </el-link>
                                    </template>
                                </vxe-column>
                                <vxe-column field="vtimes" title="谐波电压(%)">
                                    <template #default="{ row }">
                                        <el-link
                                            :type="row.vtimes == '1' ? 'danger' : 'success'"
                                            class="percentage"
                                            @click="timeClick(row)"
                                        >
                                            {{ row.vtimes == '1' ? '越限' : '合格' }}
                                        </el-link>
                                    </template>
                                </vxe-column>
                                <vxe-column field="itimes" title="谐波电流(%)">
                                    <template #default="{ row }">
                                        <el-link
                                            :type="row.itimes == '1' ? 'danger' : 'success'"
                                            class="percentage"
                                            @click="timeClick(row)"
                                        >
                                            {{ row.itimes == '1' ? '越限' : '合格' }}
                                        </el-link>
                                    </template>
                                </vxe-column>
                                <vxe-column field="ubalance" title="三相电压不平衡度(%)">
                                    <template #default="{ row }">
                                        <el-link
                                            :type="row.ubalance == '1' ? 'danger' : 'success'"
                                            class="percentage"
                                            @click="timeClick(row)"
                                        >
                                            {{ row.ubalance == '1' ? '越限' : '合格' }}
                                        </el-link>
                                    </template>
                                </vxe-column>
                                <vxe-column field="voltageFluctuation" title="电压波动(%)">
                                    <template #default="{ row }">
                                        <el-link
                                            :type="row.voltageFluctuation == '1' ? 'danger' : 'success'"
                                            class="percentage"
                                            @click="timeClick(row)"
                                        >
                                            {{ row.voltageFluctuation == '1' ? '越限' : '合格' }}
                                        </el-link>
                                    </template>
                                </vxe-column>
                                <vxe-column field="flicker" title="闪变(%)">
                                    <template #default="{ row }">
                                        <el-link
                                            :type="row.flicker == '1' ? 'danger' : 'success'"
                                            class="percentage"
                                            @click="timeClick(row)"
                                        >
                                            {{ row.flicker == '1' ? '越限' : '合格' }}
                                        </el-link>
                                    </template>
                                </vxe-column>
                                <vxe-column field="interHarmonic" title="间谐波电压含有率(%)">
                                    <template #default="{ row }">
                                        <el-link
                                            :type="row.interHarmonic == '1' ? 'danger' : 'success'"
                                            class="percentage"
                                            @click="timeClick(row)"
                                        >
                                            {{ row.interHarmonic == '1' ? '越限' : '合格' }}
                                        </el-link>
                                    </template>
                                </vxe-column>
                                <vxe-column field="sequenceCurrentUnbalance" title="电流不平衡度">
                                    <template #default="{ row }">
                                        <el-link
                                            :type="row.sequenceCurrentUnbalance == '1' ? 'danger' : 'success'"
                                            class="percentage"
                                            @click="timeClick(row)"
                                        >
                                            {{ row.sequenceCurrentUnbalance == '1' ? '越限' : '合格' }}
                                        </el-link>
                                    </template>
                                </vxe-column>

                                <vxe-column field="num3" title="操作">
                                    <template #default="{ row }">
                                        <el-button type="primary" link @click="addTo(row)">添加</el-button>
                                    </template>
                                </vxe-column>
                            </vxe-table>
                        </div>
                    </el-card>

                    <el-card class="box mr10">
                        <div :style="heightB" style="overflow-y: auto">
                            <div style="display: flex; justify-content: space-between">
                                <span style="font-size: 16px; font-weight: 700">报告参数</span>
                                <el-button icon="el-icon-Download" size="small" type="primary">生成报表</el-button>
                            </div>
                            <div>
                                <el-tree style="max-width: 600px" :data="dataSource" node-key="id" default-expand-all>
                                    <template #default="{ node, data }">
                                        <span class="custom-tree-node">
                                            <span style="color: var(--el-color-primary)">{{ data.time }}</span>
                                            <Close
                                                v-if="data.level != 0"
                                                style="margin-left: 5px; height: 14px"
                                                @click="remove(node, data)"
                                            />
                                        </span>
                                    </template>
                                </el-tree>
                            </div>
                        </div>
                    </el-card>
                </div>
            </pane>
        </splitpanes>
        <!-- 时间弹框 -->
        <timePopUpBox
            v-if="timePopUpBox"
            ref="timePopUpBoxRef"
            :timePopUpBox="timePopUpBox"
            @close="timePopUpBox = null"
        />
        <!-- 越限详情 -->
        <detail ref="detailRef" />
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref, provide } from 'vue'
import 'splitpanes/dist/splitpanes.css'
import { Splitpanes, Pane } from 'splitpanes'
import TableStore from '@/utils/tableStore'
import PointTree from '@/components/tree/pqs/pointTree.vue'
import TableHeader from '@/components/table/header/index.vue'
import { useDictData } from '@/stores/dictData'
import { mainHeight } from '@/utils/layout'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import MyEchart from '@/components/echarts/MyEchart.vue'
import TimePopUpBox from './components/timePopUpBox.vue'
import { getDataByLineId, getTargetLimitById, getTargetByTime } from '@/api/harmonic-boot/newEnergyAnalysis'
import detail from './components/detail.vue'
import { Close } from '@element-plus/icons-vue'
defineOptions({
    name: 'newEnergy/newEnergyAnalysis'
})
const timePopUpBox = ref<anyObj | null>(null)
const flag = ref('0%~10%')
const radio2 = ref('1')
const height = mainHeight(20)
const heightB = mainHeight(395)
const size = ref(0)
const TableHeaderRef = ref()
const detailRef = ref()
const dotList: any = ref({})

const timePopUpBoxRef = ref()
const index = ref(0)

const powerList1: any = ref([
    {
        label: '0%~10%',
        quantity: '0',
        percentage: '10%',
        crossTheLine: '越限',
        value: '0%~10%'
    },
    {
        label: '10%~20%',
        quantity: '0',
        percentage: '10%',
        crossTheLine: '合格',
        value: '10%~10%'
    },
    {
        label: '20%~30%',
        quantity: '0',
        percentage: '10%',
        crossTheLine: '合格',
        value: '10%~30%'
    },
    {
        label: '30%~40%',
        quantity: '0',
        percentage: '10%',
        crossTheLine: '合格',
        value: '30%~40%'
    },
    {
        label: '40%~50%',
        quantity: '0',
        percentage: '10%',
        crossTheLine: '合格',
        value: '40%~50%'
    }
])
const powerList2: any = ref([
    {
        label: '50%~60%',
        quantity: '0',
        percentage: '10%',
        crossTheLine: '合格',
        value: '50%~60%'
    },
    {
        label: '60%~70%',
        quantity: '0',
        percentage: '10%',
        crossTheLine: '合格',
        value: '60%~70%'
    },
    {
        label: '70%~80%',
        quantity: '0',
        percentage: '10%',
        crossTheLine: '合格',
        value: '70%~80%'
    },
    {
        label: '80%~90%',
        quantity: '0',
        percentage: '10%',
        crossTheLine: '越限',
        value: '80%~90%'
    },
    {
        label: '90%~100%',
        quantity: '20',
        percentage: '10%',
        crossTheLine: '越限',
        value: '90%~100%'
    }
])

const tableData: any = ref([])
const dataSource: any = ref([
    {
        id: 1,
        level: 0,
        time: '0%~10%',
        children: []
    },
    {
        id: 2,
        level: 0,
        time: '10%~20%',
        children: []
    },
    {
        id: 3,
        level: 0,
        time: '20%~30%',
        children: []
    },
    {
        id: 4,
        level: 0,
        time: '30%~40%',
        children: []
    },
    {
        id: 5,
        level: 0,
        time: '40%~50%',
        children: []
    },
    {
        id: 6,
        level: 0,
        time: '50%~60%',
        children: []
    },
    {
        id: 7,
        level: 0,
        time: '60%~70%',
        children: []
    },
    {
        id: 8,
        level: 0,
        time: '70%~80%',
        children: []
    },
    {
        id: 9,
        level: 0,
        time: '80%~90%',
        children: []
    },
    {
        id: 10,
        level: 0,
        time: '90%~100%',
        children: []
    }
])
// 添加树
const addTo = (row: any) => {
    // console.log("🚀 ~ addTo ~ uniqueObjectsByJSON([...dataSource.value[index.value].children, row]):", uniqueObjectsByJSON([...dataSource.value[index.value].children, row])[0].time)
    let list = JSON.parse(JSON.stringify(dataSource.value[index.value].children))
    dataSource.value[index.value].children = uniqueObjectsByJSON([...list, row])
}
// 树去重
const uniqueObjectsByJSON = (arr: any) => {
    const seen = new Set()
    return arr.filter((item: any) => {
        const str = JSON.stringify(item)
        if (!seen.has(str)) {
            seen.add(str)
            return true
        }
        return false
    })
}

// 树删除
const remove = (node: any, data: any) => {
    const parent = node.parent
    const children = parent.data.children || parent.data
    const index = children.findIndex(d => d.id === data.id)
    children.splice(index, 1)
    dataSource.value = [...dataSource.value]
}

const options = ref({})
const tableStore = new TableStore({
    url: '',
    method: 'POST',
    column: [],
    beforeSearchFun: () => {},
    loadCallback: () => {}
})
// 卡片点击变色

// 点击时间
const timeClick = (row: any) => {
    let data = {
        ...row,
        field: index.value,
        lineId: dotList.value.id
    }
    timePopUpBox.value = data
}
// 点击越限
const detailClick = (row: any) => {
    detailRef.value.open()
}
// 获取有功功率趋势分析数据
const analyse = (e: any) => {
    getDataByLineId({
        lineId: e.id,
        searchBeginTime: TableHeaderRef.value.datePickerRef.timeValue[0],
        searchEndTime: TableHeaderRef.value.datePickerRef.timeValue[1]
    }).then(res => {
        let mun =
            res.data.minsNum1 +
            res.data.minsNum2 +
            res.data.minsNum3 +
            res.data.minsNum4 +
            res.data.minsNum5 +
            res.data.minsNum6 +
            res.data.minsNum7 +
            res.data.minsNum8 +
            res.data.minsNum9
        powerList1.value = [
            {
                label: '0%~10%',
                quantity: res.data.minsNum0,
                percentage: ((res.data.minsNum0 / mun) * 100).toFixed(2) + '%',
                crossTheLine: res.data.isOrNot0,
                value: '0%~10%'
            },
            {
                label: '10%~20%',
                quantity: res.data.minsNum1,
                percentage: ((res.data.minsNum1 / mun) * 100).toFixed(2) + '%',
                crossTheLine: res.data.isOrNot1,
                value: '10%~10%'
            },
            {
                label: '20%~30%',
                quantity: res.data.minsNum2,
                percentage: ((res.data.minsNum2 / mun) * 100).toFixed(2) + '%',
                crossTheLine: res.data.isOrNot2,
                value: '10%~30%'
            },
            {
                label: '30%~40%',
                quantity: res.data.minsNum3,
                percentage: ((res.data.minsNum3 / mun) * 100).toFixed(2) + '%',
                crossTheLine: res.data.isOrNot3,
                value: '30%~40%'
            },
            {
                label: '40%~50%',
                quantity: res.data.minsNum4,
                percentage: ((res.data.minsNum4 / mun) * 100).toFixed(2) + '%',
                crossTheLine: res.data.isOrNot4,
                value: '40%~50%'
            }
        ]
        powerList2.value = [
            {
                label: '50%~60%',
                quantity: res.data.minsNum5,
                percentage: ((res.data.minsNum5 / mun) * 100).toFixed(2) + '%',
                crossTheLine: res.data.isOrNot5,
                value: '50%~60%'
            },
            {
                label: '60%~70%',
                quantity: res.data.minsNum6,
                percentage: ((res.data.minsNum6 / mun) * 100).toFixed(2) + '%',
                crossTheLine: res.data.isOrNot6,
                value: '60%~70%'
            },
            {
                label: '70%~80%',
                quantity: res.data.minsNum7,
                percentage: ((res.data.minsNum7 / mun) * 100).toFixed(2) + '%',
                crossTheLine: res.data.isOrNot7,
                value: '70%~80%'
            },
            {
                label: '80%~90%',
                quantity: res.data.minsNum8,
                percentage: ((res.data.minsNum8 / mun) * 100).toFixed(2) + '%',
                crossTheLine: res.data.isOrNot8,
                value: '80%~90%'
            },
            {
                label: '90%~100%',
                quantity: res.data.minsNum9,
                percentage: ((res.data.minsNum9 / mun) * 100).toFixed(2) + '%',
                crossTheLine: res.data.isOrNot9,
                value: '90%~100%'
            }
        ]
        options.value = {
            title: {
                text: '有功率区间占比',
                left: '10px'
            },
            legend: {
                show: false
            },
            tooltip: {},
            xAxis: {
                show: false
            },
            yAxis: {
                show: false
            },
            dataZoom: { show: false },

            options: {
                series: [
                    {
                        type: 'pie',
                        center: ['50%', '60%'],
                        selectedOffset: 30,
                        label: {
                            show: true,
                            color: '#96A2B5',
                            lineHeight: 8,
                            minMargin: 10,
                            formatter: function (e) {
                                return '{name|' + e.name + '}{percent|' + e.data.percentage + '}'
                            },
                            rich: {
                                name: {
                                    fontSize: 12
                                },

                                percent: {
                                    fontSize: 14,
                                    color: '#000',
                                    padding: [0, 0, 0, 5]
                                }
                            }
                        },
                        data: [
                            ...powerList1.value.map(item => {
                                return { value: item.quantity, name: item.label, percentage: item.percentage }
                            }),
                            ...powerList2.value.map(item => {
                                return { value: item.quantity, name: item.label, percentage: item.percentage }
                            })
                        ]
                    }
                ]
            }
        }
    })
}
// 功率列表
const analyseList = (e: string, i: number) => {
    flag.value = e
    index.value = i
    getTargetLimitById({
        lineId: dotList.value.id,
        searchBeginTime: TableHeaderRef.value.datePickerRef.timeValue[0],
        searchEndTime: TableHeaderRef.value.datePickerRef.timeValue[1],
        statisticalId: i
    }).then(res => {
        tableData.value = res.data
    })
}

provide('tableStore', tableStore)

onMounted(() => {
    const dom = document.getElementById('navigation-splitpanes')
    if (dom) {
        size.value = Math.round((180 / dom.offsetHeight) * 100)
    }
})
let control = ref(true)
const handleNodeClick = (data: any, node: any) => {
    console.log('🚀 ~ handleNodeClick ~ data:', data)
    if (data.level == 6) {
        dotList.value = data
        analyse(data)
        if (control.value) {
            analyseList('0%~10%', 0)
            control.value = false
        }
    }
}
</script>
<style lang="scss">
.splitpanes.default-theme .splitpanes__pane {
    background: #eaeef1;
}
.cardBox {
    .el-card__body {
        padding: 5px 10px 10px;
    }
}
.box {
    .el-card__body {
        padding: 10px;
    }
}
.container {
    display: grid;
    grid-template-columns: 5fr 2.5fr;
    gap: 20px;
    .card-top {
        background-color: var(--el-color-primary-light-9);
        // color: #fff;
        .el-card__body {
            display: grid; /* 使用 Grid 布局 */
            grid-template-columns: repeat(5, 1fr); /* 每行5列，每列占1份空间 */
            text-align: center;
            gap: 20px;
            padding: 10px;
            .img {
                vertical-align: middle;
                height: 16px;
            }
        }
    }
    .echart {
        .el-card__body {
            padding: 5px;
        }
    }
}
.el-card {
    border-radius: 10px;
}

.hoverBox {
    background-color: var(--el-color-primary-light-5);
    border-radius: 10px;
}
.percentage {
    text-decoration: underline;
    text-underline-offset: 0.1em;
}
</style>