feat: 新增调度分析

yangyin

2024-05-16 cc03769aaf628a2830e132fe22a4b224e138bf7d

feat: 新增调度分析

 customer_list/ch/static/config/route.js

@@ -8,6 +8,15 @@
        component: '/project/ch/efficiencyAnalysis/curveAnalysis/RunPointAnalysis.vue',
        redirect: null,
    },
    //调度分析
    {
        name: 'SchedulingAnalysis',
        isKeepAlive: true,
        isAffix: false,
        path: '/efficiencyAnalysis/schedulingAnalysis',
        component: '/project/ch/efficiencyAnalysis/scheduling/SchedulingAnalysis.vue',
        redirect: null,
    },
    { name: 'UserManage', isKeepAlive: true, isAffix: false, path: '/auth/userManage', component: '/auth/userManage/UserManage.vue' },
    { name: 'AccessLog', isKeepAlive: true, isAffix: false, path: '/auth/accessLog', component: '/auth/accessLog/AccessLog.vue' },
    {

 src/views/project/ch/efficiencyAnalysis/scheduling/SchedulingAnalysis.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,250 @@
<template>
    <el-row :gutter="8" class="h100">
        <el-col :span="4" :xs="24" class="h100">
            <el-card shadow="hover" class="h100 left-tree-card" v-loading="treeLoading">
                <LeftTreeByMgr :treedata="listTreeData" title-name="泵站列表" :current-node-key="currentListID" @click="handleClickNode">
                </LeftTreeByMgr>
            </el-card>
        </el-col>
        <el-col :span="20" :xs="24" class="flex-column h100">
            <el-card shadow="hover" :body-style="{ paddingBottom: '0' }">
                <el-form :inline="true" :model="queryParams">
                    <el-form-item label="进口水位" prop="WaterLevel">
                        <el-input v-model="queryParams.WaterLevel" style="width: 226.4px" placeholder="名称" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="目标流量(m³/h)" prop="TargetFlow">
                        <el-input v-model="queryParams.TargetFlow" style="width: 226.4px" placeholder="编码" clearable />
                    </el-form-item>
                    <el-form-item label="目标压力(MPa)" prop="TargetPressure">
                        <el-input v-model="queryParams.TargetPressure" style="width: 226.4px" placeholder="编码" clearable />
                    </el-form-item>
                    <el-form-item>
                        <el-button icon="ele-Refresh" @click="resetQuery" type="primary">调度 </el-button>
                    </el-form-item>
                </el-form>
                <div style="width: 100%; height: 100px; padding: 10px" class="aside_main" :class="{ aside_main_show: !asideStatus }">
                    <el-form :inline="true" :model="pumpPanel">
                        <div class="flex flex-center">
                            <el-form-item label="总流量">
                                <el-input v-model="pumpPanel.TotalFlow" style="width: 126.4px" readonly></el-input>
                            </el-form-item>
                            <el-form-item label="总压力">
                                <el-input v-model="pumpPanel.TotalPressure" style="width: 126.4px" readonly />
                            </el-form-item>
                            <el-form-item label="总功率">
                                <el-input v-model="pumpPanel.TotalPower" style="width: 126.4px" readonly />
                            </el-form-item>
                            <el-form-item label="总效率">
                                <el-input v-model="pumpPanel.TotalEfficiency" style="width: 126.4px" readonly />
                            </el-form-item>
                        </div>
                        <div class="flex flex-center">
                            <el-form-item label="总千吨能耗">
                                <el-input v-model="pumpPanel.WP" style="width: 126.4px" readonly />
                            </el-form-item>
                            <el-form-item label="总单位能耗">
                                <el-input v-model="pumpPanel.UWP" style="width: 126.4px" readonly />
                            </el-form-item>
                            <el-form-item label="开泵台数">
                                <el-input v-model="pumpPanel.UWP" style="width: 126.4px" readonly />
                            </el-form-item>
                        </div>
                    </el-form>
                </div>
                <!-- æ”¶ç¼©å›¾æ ‡ -->
                <div :class="aside_open_close ? 'aside_open' : 'aside_close'" @click="asideChange">
                    <el-icon>
                        <ArrowUp v-if="aside_open_close" />
                        <ArrowDown v-else />
                    </el-icon>
                </div>
            </el-card>

            <el-card class="flex-auto scroll-table-card" shadow="hover" style="margin-top: 8px">
                <el-table
                    v-loading="tableLoading"
                    ref="draggableTableRef"
                    border
                    row-key="ID"
                    :row-class-name="isDragStatus ? 'cursor-move' : 'cursor-pointer'"
                    :cell-style="{ textAlign: 'center' }"
                    :header-cell-style="{ textAlign: 'center' }"
                    :data="displayTableData"
                    highlight-current-row
                    style="width: 100%"
                >
                    <el-table-column prop="Name" label="机泵" fixed="left" show-overflow-tooltip />
                    <el-table-column prop="Flow" label="流量(m³/h)" show-overflow-tooltip width="140" />
                    <el-table-column prop="Head" width="140" label="扬程(m)" show-overflow-tooltip />
                    <el-table-column prop="Power" width="140" label="功率(kW/h)" show-overflow-tooltip />
                    <el-table-column prop="Efficiency" width="140" label="效率(%)" show-overflow-tooltip />
                    <el-table-column prop="Frequency" label="频率(hz)" show-overflow-tooltip width="140" />
                    <el-table-column prop="Speed" width="140" label="转速(rpm)" show-overflow-tooltip />
                    <el-table-column prop="Status" width="140" label="状态" show-overflow-tooltip> </el-table-column>
                    <el-table-column label="操作" width="150" fixed="right" show-overflow-tooltip>
                        <template #default="scope">
                            <!-- <el-button icon="ele-Edit" size="small" text type="primary" @click="openOperateDialog(scope.row)"> ç¼–辑 </el-button>
                            <el-button icon="ele-Delete" size="small" text type="danger" @click="deleteCurrentRow(scope.row)"> åˆ é™¤ </el-button> -->
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>
        </el-col>
    </el-row>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus';
import { computed, onMounted, ref } from 'vue';
// import {
//     GetAllChObjectByID,
//     GetCatalogObjectListTreeData,
//     GetIsExistChObjectCode,
//     UpdateChObjectSorter,
// } from '/@/api/project\ch\efficiencyAnalysis/scheduling';
import LeftTreeByMgr from '/@/components/tree/leftTreeByMgr.vue';
//#region ====================== å·¦ä¾§æ ‘数据，tree init ======================
const treeLoading = ref(false);
const listTreeData = ref([]);
const currentTreeNode = ref(null);
const currentListID = computed(() => currentTreeNode.value?.StationID);
const handleClickNode = (data) => {
    currentTreeNode.value = data;
    getTableData();
};
const getListTreeData = async () => {
    return;
    treeLoading.value = true;
    const res = await GetCatalogObjectListTreeData().finally(() => {
        treeLoading.value = false;
    });
    if (res?.Code === 0) {
        const resData = (res.Data || []) as [];
        listTreeData.value = resData;
        const firstListTreeNode = listTreeData.value[0];
        if (firstListTreeNode) {
            handleClickNode(firstListTreeNode);
        } else {
            tableData.value = [];
            currentTreeNode.value = null;
        }
    }
};
//#endregion

//#region ====================== è¡¨æ ¼æ•°æ®ï¼Œtable init ======================
const aside_open_close = ref(false);
const asideStatus = ref(false);
const tableLoading = ref(false);
const tableData = ref([]);
const isDragStatus = ref(false);
const getTableData = async () => {
    return;
    tableLoading.value = true;
    const res = await GetAllChObjectByID({ CatalogObjectID: currentListID.value }).finally(() => {
        tableLoading.value = false;
    });
    if (res?.Code === 0) {
        const resData = (res.Data || []) as [];
        tableData.value = resData;
    } else {
        ElMessage.error('获取失败' + (res?.Message ? `，${JSON.stringify(res.Message)}` : ''));
    }
};
// ä¾§è¾¹æ æ”¶ç¼©ä¸Žå±•å¼€
const asideChange = () => {
    asideStatus.value = !asideStatus.value;
    if (asideStatus.value) {
        aside_open_close.value = true;
    } else {
        aside_open_close.value = false;
    }
};
//#endregion

//#region ====================== è¡¨æ ¼æŸ¥è¯¢ã€æŽ’序，search form init ======================
const queryParams = ref({
    StationID: 1,
    WaterLevel: 11,
    TargetFlow: 20000,
    TargetPressure: 0.43,
});
//泵站信息面板
const pumpPanel = ref({
    TotalFlow: 124,
    TotalPressure: 12345,
    TotalPower: 123,
    TotalEfficiency: 79,
    WP: 123,
    UWP: 123,
});
// const { resetQuery, handleQueryTable, displayTableData } = useQueryTable(tableData, queryParams, getTableData);

//#endregion

onMounted(() => {
    getListTreeData();
});
</script>
<style scoped lang="scss">
/* ä¾§è¾¹æ æ ·å¼ */
.aside_main {
    height: 140px !important;
    transition: width 0.3s;
    box-sizing: border-box;
    // box-shadow: inset 0px 0px 1px #3d3d3d;
}

/* ä¾§è¾¹æ æŒ‰é’®æ ·å¼ */
.aside_open {
    position: absolute;
    left: 50%;
    top: 185px;
    width: 60px;
    height: 16px;
    line-height: 60px;
    color: #fff;
    background-color: #2a333a;
    border-radius: 0 6px 6px 0;
    font-size: 20px;
    z-index: 1000;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;

    &:hover {
        background-color: #ff8e2b;
        color: #fff;
    }
}
.aside_main_show {
    height: 17px !important;

    .el-form {
        display: none;
    }
}
.aside_close {
    position: absolute;
    left: 50%;
    top: 75px;
    width: 60px;
    height: 16px;
    line-height: 60px;
    color: #fff;
    background-color: #2a333a;
    border-radius: 0 6px 6px 0;
    font-size: 20px;
    z-index: 1000;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;

    &:hover {
        background-color: #ff8e2b;
        color: #fff;
    }
}
</style>