windLifecontrolPro/src/views/generatingCapacity/dataAnalysis/windAnalysis/index.vue

<template>
    <div class="dataAnalysisWindAna" :class="!theme ? 'themeDark' : 'themeLight'">
        <div class="dataAnalysisWindAnaMain">
            <p>损失电量分析</p>
            <div class="main">
                <div class="treeDataMain">
                    <tree-cop ref="treeCopRef" :data="treeData" @checkChange="funTreeCheckChange" :show-checkbox="true"
                        :height="treeHeight" @currentChange="funCurrentChange" @refresh="funGetTree"></tree-cop>
                </div>
                <div class="excelDataMain">
                    <excel-cop :checkIds="excelCheckIds" :showCheckbox="excelCheckboxShow" :data="excelList"
                        :height="excelHeight" @excelChange="funExcelChange" @checkChange="funExcelCheckChange">
                    </excel-cop>
                </div>
                <div class="tableDataMain">
                    <div class="px-[10px] shadow rounded-[6px] shadow-blue-500 ">
                        <el-tabs v-model="activeTab">
                            <el-tab-pane label="表格数据" name="1">
                            </el-tab-pane>
                            <el-tab-pane label="图表展示" name="2">
                            </el-tab-pane>
                            <table-cop class="" v-show="activeTab === '1'" :data="tableData" :showSummary="true"
                                :summaryMethod="funSummary" :column="tableColumn" :loading="tableLoading"
                                :height="tableHeight" :tableId="tableShowId" :tableName="tableName"></table-cop>
                            <div v-show="activeTab === '2'"
                                :style="{ height: typeof tableHeight === 'string' ? tableHeight : tableHeight + 'px' }"
                                class="p-[10px]">
                                <bar-line-chart-cop v-show="lineData.length" :height="tableHeight" :bardata="barData"
                                    :lineData="lineData" :color="barColor" lineName="理论发电量"></bar-line-chart-cop>
                                <el-empty v-show="!lineData.length" description="请选择条件"></el-empty>
                            </div>
                        </el-tabs>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup name="prepare">
    import tableCop from '@/components/generatingCapacityComponent/table.vue'
    import excelCop from '@/components/generatingCapacityComponent/excel.vue'
    import treeCop from '@/components/generatingCapacityComponent/tree.vue'
    import barLineChartCop from './components/barLineChart.vue'
    import {
        ElMessage
    } from 'element-plus';
    import {
        onMounted,
        ref,
        onActivated,
        watch
    } from 'vue'
    import {
        useStore
    } from 'vuex';
    import httpRequest from '@/utils/request.js'
    /**配置参数 */
    const treeHeight = ref(window.innerHeight - 160 + 'px') //tree高度
    const excelHeight = ref(window.innerHeight - 160 + 'px') //excel高度
    const tableHeight = ref(window.innerHeight - 214 + 'px')
    /**table 开始 */
    const tableShowId = ref('')
    const tableName = ref('损失电量分析')
    const tableColumn = ref([])
    const tableLoading = ref(false)
    const tableData = ref([])
    const funSummary = ({
        columns,
        data
    }) => {
        const sums = []
        columns.forEach((column, index) => {
            if (index === 0) {
                sums[index] = '合计'
                return
            }
            const values = data.map((item) => Number(item[column.property]))
            if (!values.every((value) => Number.isNaN(value))) {
                sums[index] = values.reduce((prev, curr) => {
                    const value = Number(curr)
                    if (!Number.isNaN(value)) {
                        return Number((prev + curr).toFixed(2))
                    } else {
                        return Number(prev.toFixed(2))
                    }
                }, 0)
            } else {
                sums[index] = '--'
            }
            if (['speed', 'fnlly'].includes(column.property)) {
                if (!Number.isNaN(sums[index])) {
                    sums[index] = Number((sums[index] / data.length).toFixed(2))
                }
            }
        })

        return sums
    }
    const funSubmit = async () => {
        if (!excelCheckIds.value.length) {
            ElMessage.error('请勾选要展现的项')
            return false
        }
        tableLoading.value = true
        tableData.value = []
        tableShowId.value = ''
        barData.value = {
            area: [],
            legend: [],
            data: [],
        }
        lineData.value = []
        const res = await httpRequest.get('/fjjxb/five/loss/cal', {
            params: {
                ids: excelCheckIds.value.join()
            }
        })
        if (res.code !== 200 || !res.data.title) {
            tableLoading.value = false;
            return false
        }
        ElMessage.success(res.msg)
        tableColumn.value = res.data.title.map(o => {
            return {
                prop: o.key,
                label: o.des,
                width: o.des === '时间' ? 100 : 80,

            }
        })
        tableData.value = res.data.data

        const name = [],
            data = [],
            llfdl = [],
            legend = [
                "实际电量",
                "计划检修损失",
                "非计划检修损失",
                "限电损失",
                "受累损失",
                "性能损失",
            ],
            data2 = []; //项目列表
        // if (params.station) {
        // 	let arr = [];
        // 	let hj = res.data.data.pop();
        // 	res.data.data.forEach((ele, index) => {
        // 		arr[ele.id.split('_')[1] - 1] = ele
        // 	})
        // 	arr.push(hj);
        // 	res.data.data = arr;
        // }

        res.data.data.forEach((item, index) => {
            name.push(item.name);
            data.push([
                item.sjfdl,
                item.jhjx,
                item.fjhjx,
                item.xd,
                item.sl,
                item.xn,
            ]);
            llfdl.push(item.llfdl);
            data2.push({
                index: index + 1,
                name: item.name,
                llfdl: item.llfdl,
                sjfdl: item.sjfdl,
                speed: item.speed,
                fjhjx: item.fjhjx,
                jhjx: item.jhjx,
                sl: item.sl,
                xd: item.xd,
                xn: item.xn,
                fnlly: item.fnlly,
                is_light: false,
            });
        });
        if (data.length > 0) {
            let arr1 = [];
            const length = data[0].length;
            for (var i = 0; i < length; i++) {
                let arr2 = [];
                data.forEach((ele) => {
                    arr2.push(ele[i]);
                });
                arr1.push(arr2);
            }
            lineData.value = llfdl;
            barData.value = {
                area: name,
                legend: legend,
                data: arr1,
            };
        }


        tableLoading.value = false
        tableShowId.value = '1'
        activeTab.value = '2'
    }
    /**barlineChart 开始 */
    const barData = ref({
        area: [],
        legend: [],
        data: [],
    })
    const lineData = ref([])
    const barColor = [
        "#4b55ae",
        "#e17e23",
        "#ba3237",
        "#c531c7",
        "rgb(63,177,227)",
        "#05bb4c",
    ]

    /**tabs */
    const activeTab = ref('1')
    /**excel 开始 */
    const excelCheckboxShow = ref(false)
    const excelType = ref('')
    const treeCopRef = ref() //treeCop ref
    const excelCheckIds = ref([])
    const excelList = ref([])
    const funExcelChange = async (obj) => { //点击excel项时
        return false
    }
    const funExcelCheckChange = ({
        checkArr,
        data
    }) => { //bug 
        excelCheckIds.value = checkArr
        funSubmit()
    }

    /**prepare tree 开始 */
    const treeData = ref([])
    const actTreeNode = ref(null) //当前激活的treeNode
    const funRepeatMap = (arr) => {
        return arr.map(o => {
            if (o.children) {
                const findIndex = o.children.findIndex(p => !!p.type)
                if (findIndex !== -1) {
                    o.childs = o.children
                    o.children = []
                    if (!actTreeNode.value) { //判断当且仅有process获取tree时 赋值
                        actTreeNode.value = o
                    }
                }
            }
            return {
                ...o,
                children: o.children ? funRepeatMap(o.children) : []
            }
        })
    }
    const funGetTree = async () => {
        actTreeNode.value = null
        const res = await httpRequest.get("/power/prepare/tree")
        treeData.value = funRepeatMap(res.data)
        excelList.value = []
        if (actTreeNode.value) {
            funCurrentChange({
                current: actTreeNode.value,
                currentNode: null
            })
            if (treeCopRef.value) {
                treeCopRef.value.$refs.tree.setCheckedKeys([actTreeNode.value.id])
                excelCheckIds.value = actTreeNode.value.childs.map(o => o.id)
                funSubmit()
            }
        }
    }
    const funCurrentChange = ({
        current,
        currentNode
    }) => {
        excelCheckboxShow.value = true
        if (current.childs) {
            excelList.value = current.childs.map(o => {
                return {
                    id: o.id,
                    interval: o.interval,
                    path: o.path,
                    prepareid: o.prepareid,
                    station: o.station,
                    time: o.time,
                    type: o.type,
                    windturbine: o.windturbine,
                    name: o.path.substring(o.path.indexOf(o.station + '_') + (o.station + '_').length)
                }
            })
        } else {
            excelList.value = []
        }
    }
    const funTreeCheckChange = ({
        current,
        checkedNodes,
        checkedKeys,
        halfCheckedNodes,
        halfCheckedKeys
    }) => { //tree change  -> excel change
        funCurrentChange({
            current,
            currentNode: ''
        })
        const checkIds = []
        if (checkedNodes.length) {
            for (const node of checkedNodes) {
                if (node.childs && node.childs.length) {
                    for (const child of node.childs) {
                        checkIds.push(child.id)
                    }
                }
            }
        }
        excelCheckIds.value = checkIds
        funSubmit()
    }
    /**created */
    const theme = ref(null)
    const echartsTheme = ref('')
    const store = useStore()
    watch(() => store.state.theme, (newVal, oldVal) => {
        theme.value = newVal
        echartsTheme.value = !newVal ? 'dark' : ''
        funGetTree()
    }, {
        deep: true
    })
    /**mounted */
    onMounted(() => {
        funGetTree()
        theme.value = store.state.theme
        echartsTheme.value = !theme.value ? 'dark' : ''
        tableHeight.value = window.innerHeight - 214 + 'px'
        excelHeight.value = window.innerHeight - 160 + 'px'
        treeHeight.value = window.innerHeight - 160 + 'px'
        window.addEventListener('resize', () => {
            tableHeight.value = window.innerHeight - 214 + 'px'
            excelHeight.value = window.innerHeight - 160 + 'px'
            treeHeight.value = window.innerHeight - 160 + 'px'
        })
    })
    /**activated */
    onActivated(() => {
        // funGetTree()
    })
</script>
<style lang="less" scoped>
    .dataAnalysisWindAna {
        padding: 20px;

        p {
            font-size: 16px;
            margin-left: 20px;
            margin-bottom: 10px;
        }

        .main {
            display: flex;
            justify-content: space-between;
            // width: calc(100% - 40px);
            width: 100%;

            .treeDataMain,
            .excelDataMain,
            .tableDataMain {
                padding: 10px;
                border-radius: 10px;
            }

            .treeDataMain {
                width: calc(20% - 20px);

            }

            .excelDataMain {
                width: calc(13% - 20px);
            }

            .tableDataMain {
                width: calc(66% - 20px);
                position: relative;

                .butten_com {
                    position: absolute;
                    right: 20px;
                    z-index: 111111;
                }
            }

        }
    }

    .themeDark {

        p {
            color: #fff;
        }

        .treeDataMain,
        .excelDataMain,
        .tableDataMain {
            background: #161f1e;
        }

    }

    .themeLight {
        padding: 0;

        p {
            color: #000;
        }

        .treeDataMain,
        .excelDataMain,
        .tableDataMain {
            background: #edeffb;
        }

        .dataAnalysisWindAnaMain {
            padding: 20px 0;
            border-radius: 10px;
            background: #fff;
        }

    }
</style>