| | |
| | | <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" |
| | | :showTitle="false" |
| | | :defaultProps="state.defaultProps" |
| | | :currentNodeKey="currentListID" |
| | | @click="handleClickNode" |
| | | defaultExpandAll |
| | | :folderIcon="(_, data) => data.LogicType !== LOGIC_SITE_CODE" |
| | | > |
| | | <LeftTreeByMgr :treedata="listTreeData" title-name="泵站列表" :current-node-key="currentListID" @click="handleClickNode"> |
| | | </LeftTreeByMgr> |
| | | </el-card> |
| | | </el-col> |
| | |
| | | </template> |
| | | |
| | | <script setup lang="ts"> |
| | | import { ElMessage } from 'element-plus'; |
| | | import { computed, nextTick, onMounted, reactive, ref } from 'vue'; |
| | | import { getDefaultLogicPolicyStd } from '/@/api/phm/logicPolicyStd'; |
| | | import { GetLogicTreeListByPolicyIDStd } from '/@/api/phm/logicTreeStd'; |
| | | import { GetStationList } from '/@/api/dispatch/dispatch'; |
| | | import LeftTreeByMgr from '/@/components/tree/leftTreeByMgr.vue'; |
| | | import { LOGIC_SITE_CODE } from '/@/constants'; |
| | | import { getSite } from '/@/projectCom/components/manage/utils'; |
| | | import RunPointAnalysisCom from '/@/projectCom/curve/runPoint/RunPointAnalysisCom.vue'; |
| | | // 定义变量内容 |
| | | const state = reactive({ |
| | | echartTitle: '', |
| | | defaultProps: { |
| | | id: 'LogicID', |
| | | label: 'Name', |
| | | children: 'Children', |
| | | }, |
| | | }); |
| | | const runPointAnalysisRef = ref(); |
| | | //#region ====================== 左侧树数据,tree init ====================== |
| | | |
| | | const treeLoading = ref(false); |
| | | const listTreeData = ref([]); |
| | | const currentTreeNode = ref(null); |
| | | const defaultSelectID = window.moduleConfig.comprehensive.logicSite.defaultSelectID; //默认选中长兴...泵站的ID |
| | | const currentListID = computed(() => currentTreeNode.value?.LogicID); |
| | | const currentListID = computed(() => currentTreeNode.value?.ID); |
| | | const handleClickNode = (data) => { |
| | | currentTreeNode.value = data; |
| | | if (data.LogicType !== LOGIC_SITE_CODE) { |
| | | return ElMessage.warning('支线不可选!'); |
| | | } |
| | | window.moduleConfig.comprehensive.logicSite.defaultSelectID = data.LogicID; |
| | | state.echartTitle = data.Name; |
| | | nextTick(() => { |
| | | runPointAnalysisRef.value.getChartList(); |
| | | }); |
| | | }; |
| | | const getListTreeData = async () => { |
| | | treeLoading.value = true; |
| | | getDefaultLogicPolicyStd().then(async (data) => { |
| | | if (typeof data !== 'undefined') { |
| | | const res = await GetLogicTreeListByPolicyIDStd({ |
| | | PolicyID: data.ID, |
| | | }).finally(() => { |
| | | treeLoading.value = false; |
| | | }); |
| | | |
| | | if (res?.Code === 0) { |
| | | const resData = (res.Data || []) as []; |
| | | listTreeData.value = resData; |
| | | const firstSelectTreeNode = getSite( |
| | | resData, |
| | | { key: 'LogicType', value: LOGIC_SITE_CODE }, |
| | | { |
| | | key: 'LogicID', |
| | | value: defaultSelectID, |
| | | } |
| | | ); |
| | | if (firstSelectTreeNode) { |
| | | handleClickNode(firstSelectTreeNode); |
| | | state.echartTitle = firstSelectTreeNode.Name; |
| | | } else { |
| | | listTreeData.value = []; |
| | | } |
| | | } else { |
| | | ElMessage.error('获取泵站列表失败' + (res?.Message ? `,${JSON.stringify(res.Message)}` : '')); |
| | | } |
| | | } else { |
| | | listTreeData.value = []; |
| | | } |
| | | const res = await GetStationList().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 { |
| | | currentTreeNode.value = null; |
| | | } |
| | | } |
| | | }; |
| | | |
| | | //#endregion |
| | | onMounted(() => { |
| | | getListTreeData(); |
| | | }); |
| | | </script> |
| | | import { GetStationList } from '/@/api/dispatch/dispatch'; |