| | |
| | | </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" label-width="120px"> |
| | | <el-form :inline="true" :model="queryParams" label-width="120px" :rules="queryParamsRules"> |
| | | <el-form-item label="è¿å£æ°´ä½" prop="WaterLevel"> |
| | | <el-input v-model="queryParams.WaterLevel" style="width: 180px" placeholder="åç§°" clearable></el-input> |
| | | <el-input v-model="queryParams.WaterLevel" style="width: 180px" clearable></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="ç®æ æµé(m³/h)" prop="TargetFlow"> |
| | | <el-input v-model="queryParams.TargetFlow" style="width: 180px" placeholder="ç¼ç " clearable /> |
| | | <el-input v-model="queryParams.TargetFlow" style="width: 180px" clearable /> |
| | | </el-form-item> |
| | | <el-form-item label="ç®æ åå(MPa)" prop="TargetPressure"> |
| | | <el-input v-model="queryParams.TargetPressure" style="width: 180px" placeholder="ç¼ç " clearable /> |
| | | <el-input v-model="queryParams.TargetPressure" style="width: 180px" clearable /> |
| | | </el-form-item> |
| | | <el-form-item> |
| | | <el-button icon="ele-Refresh" @click="resetQuery" type="primary">è°åº¦ </el-button> |
| | | </el-form-item> |
| | | </el-form> |
| | | |
| | | <!-- æ¶ç¼©å¾æ --> |
| | | <!-- <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="mt8" shadow="hover"> |
| | | <div style="width: 100%; height: 100px" class="aside_main" :class="{ aside_main_show: !asideStatus }"> |
| | | <div style="width: 100%; height: 100px" class="aside_main"> |
| | | <el-form :inline="true" :model="pumpPanel" label-width="120px"> |
| | | <div class="flex"> |
| | | <el-form-item label="æ»æµé"> |
| | |
| | | :row-class-name="isDragStatus ? 'cursor-move' : 'cursor-pointer'" |
| | | :cell-style="{ textAlign: 'center' }" |
| | | :header-cell-style="{ textAlign: 'center' }" |
| | | :data="displayTableData" |
| | | :data="tableData" |
| | | 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="Name" label="æºæ³µ" fixed="left" show-overflow-tooltip width="200" /> |
| | | <el-table-column prop="Flow" label="æµé(m³/h)" show-overflow-tooltip width="200" /> |
| | | <el-table-column prop="Head" width="200" 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="Efficiency" 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> --> |
| | | <el-table-column prop="Status" width="140" label="ç¶æ" show-overflow-tooltip> |
| | | <template #default="{ row }"> |
| | | {{ row.Status == 0 ? 'å
³' : row.Status == 1 ? 'å¼' : '/' }} |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | |
| | | |
| | | <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 { computed, onMounted, reactive, ref } from 'vue'; |
| | | import { CalculateScheduling, GetStationList } from '/@/api/dispatch/dispatch'; |
| | | 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 currentListID = computed(() => currentTreeNode.value?.ID); |
| | | const handleClickNode = (data) => { |
| | | currentTreeNode.value = data; |
| | | getTableData(); |
| | | }; |
| | | const getListTreeData = async () => { |
| | | return; |
| | | treeLoading.value = true; |
| | | const res = await GetCatalogObjectListTreeData().finally(() => { |
| | | const res = await GetStationList().finally(() => { |
| | | treeLoading.value = false; |
| | | }); |
| | | if (res?.Code === 0) { |
| | |
| | | //#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(() => { |
| | | const res = await CalculateScheduling({ |
| | | StationID: parseInt(currentListID.value), |
| | | ...queryParams.value, |
| | | }).finally(() => { |
| | | tableLoading.value = false; |
| | | }); |
| | | if (res?.Code === 0) { |
| | | const resData = (res.Data || []) as []; |
| | | tableData.value = resData; |
| | | tableData.value = resData?.Pumps; |
| | | let obj = resData?.Station; |
| | | pumpPanel.value.TotalEfficiency = obj?.TotalEfficiency || ''; |
| | | pumpPanel.value.TotalFlow = obj?.TotalFlow || ''; |
| | | pumpPanel.value.TotalPower = obj?.TotalPower || ''; |
| | | pumpPanel.value.TotalPressure = obj?.TotalPressure || ''; |
| | | pumpPanel.value.WP = obj?.WP || ''; |
| | | pumpPanel.value.UWP = obj?.UWP || ''; |
| | | } 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; |
| | | } |
| | | //è°åº¦æ¥è¯¢ |
| | | const resetQuery = () => { |
| | | getTableData(); |
| | | }; |
| | | const queryParamsRules = reactive({ |
| | | WaterLevel: [{ required: true, message: 'å¿
填项', trigger: 'blur' }], |
| | | TargetFlow: [ |
| | | { |
| | | required: true, |
| | | message: 'å¿
填项', |
| | | trigger: 'blur', |
| | | }, |
| | | ], |
| | | TargetPressure: [ |
| | | { |
| | | required: true, |
| | | message: 'å¿
填项', |
| | | trigger: 'blur', |
| | | }, |
| | | ], |
| | | }); |
| | | //#endregion |
| | | |
| | | //#region ====================== è¡¨æ ¼æ¥è¯¢ãæåºï¼search form init ====================== |
| | | const queryParams = ref({ |
| | | StationID: 1, |
| | | WaterLevel: 11, |
| | | TargetFlow: 20000, |
| | | TargetPressure: 0.43, |
| | | WaterLevel: 19.2, |
| | | TargetFlow: 23394, |
| | | TargetPressure: 0.3355, |
| | | }); |
| | | //æ³µç«ä¿¡æ¯é¢æ¿ |
| | | const pumpPanel = ref({ |
| | | TotalFlow: 124, |
| | | TotalPressure: 12345, |
| | | TotalPower: 123, |
| | | TotalEfficiency: 79, |
| | | WP: 123, |
| | | UWP: 123, |
| | | TotalFlow: '', |
| | | TotalPressure: '', |
| | | TotalPower: '', |
| | | TotalEfficiency: '', |
| | | WP: '', |
| | | UWP: '', |
| | | }); |
| | | // const { resetQuery, handleQueryTable, displayTableData } = useQueryTable(tableData, queryParams, getTableData); |
| | | |
| | | //#endregion |
| | | |
| | | onMounted(() => { |
| | |
| | | <style scoped lang="scss"> |
| | | /* ä¾§è¾¹æ æ ·å¼ */ |
| | | .aside_main { |
| | | height: 80px !important; |
| | | height: 75px !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> |