admin-sjzx/src/views/pqs/harmonicMonitoring/detailed/division/components/compute.vue

<!-- 贡献度计算 -->
<template>
    <div class="default-main" :style="height">
        <div class="title">
            贡献度计算
            <div style="font-size: 14px;font-weight: 500;">
                {{ dotList.alias || '' }}
                <back-component />
            </div>
        </div>
        <splitpanes :style='heightB' class='default-theme' id='navigation-splitpanes'>
            <pane :size='size'>
                <PointTree :showSelect="false" :default-expand-all='false' @node-click='handleNodeClick'
                    @init='handleNodeClick'>
                </PointTree>
            </pane>
            <pane style='background: #fff' :style='heightB' :size="100 - size">
                <el-form :model="form" inline label-width="auto">
                    <el-form-item label="谐波类型:">
                        <el-radio-group v-model="form.type">
                            <el-radio-button label="谐波电压" value="1" />
                            <el-radio-button label="谐波电流" value="0" />
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="谐波次数:">
                        <el-select v-model="form.index" filterable multiple :multiple-limit="5" collapse-tags
                            collapse-tags-tooltip clearable placeholder="请选择次数">
                            <el-option v-for="item in harmonic" :key="item.value" :label="item.label"
                                :value="item.value"> </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="负荷数据:">
                        <el-select v-model="form.loadData" clearable filterable placeholder="请选择负荷数据">
                            <el-option v-for="item in loadDataOptions" :key="item.id" :label="item.name"
                                :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-Plus"
                            @click="push('/admin/division/aListOfLoadData')">新增</el-button>
                        <el-button type="primary" icon="el-icon-Select" @click="submit">确定</el-button>
                    </el-form-item>
                </el-form>
                <el-tabs v-model="activeName" type="card" class="demo-tabs" v-if="showTabs">
                    <el-tab-pane v-for="(item, index) in tabList" :key="item" :label="item.label" :name="index">
                        <div class="pd10">
                            <div>
                                <span style="color: var(--el-text-color-regular);">时间范围:</span>
                                <el-date-picker v-model="item.time" class="mr10 ml10" type="daterange"
                                    start-placeholder="起始时间" end-placeholder="结束时间" format="YYYY-MM-DD"
                                    date-format="YYYY-MM-DD" time-format="YYYY-MM-DD" />
                                <el-button type="primary" icon="el-icon-CaretRight" @click="execute(item,index)">执行</el-button>
                            </div>
                            <div v-if="item.showExecute">
                                <el-form :inline="true" v-model="item.form" class="mt10">
                                    <el-form-item label="限值:">
                                        <el-input v-model="item.form.limit" placeholder="请输入限值" />
                                    </el-form-item>
                                    <el-form-item label="时间点一:"> <el-input v-model="item.form.time1"
                                            placeholder="请输入时间点一" /></el-form-item>
                                    <el-form-item label="时间点二:"> <el-input v-model="item.form.time2"
                                            placeholder="请输入时间点二" /></el-form-item>
                                    <el-form-item>
                                        <el-button type="primary" icon="el-icon-Document">
                                            生成动态谐波责任数据
                                        </el-button>
                                        <el-button type="primary" icon="el-icon-Document">
                                            生成谐波责任指标
                                        </el-button>
                                    </el-form-item>
                                </el-form>
                            </div>

                        </div>


                    </el-tab-pane>

                </el-tabs>
            </pane>
        </splitpanes>



    </div>

</template>
<script setup lang='ts'>
import { ref, reactive, onMounted, onUnmounted } from 'vue'
import { mainHeight } from '@/utils/layout'
import 'splitpanes/dist/splitpanes.css'
import { Splitpanes, Pane } from 'splitpanes'
import PointTree from '@/components/tree/pqs/pointTree.vue'
import BackComponent from '@/components/icon/back/index.vue'
import {  harmonicOptions, } from '@/utils/dictionary'
import { userDataList } from '@/api/advance-boot/division'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { formatDate } from '@/utils/formatTime'
import {getHistoryHarmData} from '@/api/advance-boot/division';

const { push } = useRouter()
const dotList: any = ref({})
const height = mainHeight(20)
const heightB = mainHeight(70)
const harmonic = harmonicOptions.slice(1)
const size = ref(0)
const showTabs = ref(false)
const loadDataOptions: any = ref([])
const form: any = reactive({
    type: '0',
    index: [],
    loadData: ''
})
const tabList: any = ref([])
const activeName = ref(0)
const handleNodeClick = (data: any, node: any) => {
    if (data.level == 6) {
        dotList.value = data
    }
}
// 确定
const submit = () => {
    if (form.loadData == '') {
        return ElMessage.warning('请选择负荷数据')
    }
    
    if (form.index.length == 0) {
        showTabs.value = false
    } else {
      let timeList = loadDataOptions.value.filter((item: any) => item.id == form.loadData)[0]
        showTabs.value = true
        let list = JSON.parse(JSON.stringify(form.index)).sort((a, b) => a - b)
        tabList.value = []
        list.forEach((item: any) => {
            tabList.value.push({
                label: item + '次谐波',
                key: item,
                time: [timeList.startTime, timeList.endTime],
                showExecute: false,
                form: {
                    limit: '',
                    time1: '',
                    time2: ''
                }
            })
        })
        // tabList.value =
        activeName.value = 0
    }

}
// 执行
const execute = (item: any, index: number) => {
    getHistoryHarmData({
        searchBeginTime:item.time[0],
        searchEndTime:item.time[1],
        type:form.type,
        time:item.key,
        // userDataId:form.loadData,
        lineId:dotList.value.id
    }).then((res: any) => {
    
    })
    tabList.value[index].showExecute = true
}

onMounted(() => {
    const dom = document.getElementById('navigation-splitpanes')
    if (dom) {
        size.value = Math.round((180 / dom.offsetHeight) * 100)
    }
    userDataList({
        pageNum: 1,
        pageSize: 10000,
        searchValue: ""
    }).then((res: any) => {
        loadDataOptions.value = res.data.records
    })
})
</script>
<style lang="scss" scoped>
.title {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    font-size: 16px;
    font-weight: 550;
}

:deep(.upload-demo) {
    display: flex;

    .el-upload-list__item-info {
        width: 300px;
    }
}
</style>