<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-start">
|
<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-start">
|
<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>
|
