关联分析-设置默认值显示

src/components/Form/src/jeecg/components/MineCascader/MineCascader.vue

@@ -1,18 +1,9 @@
 <template>
-  <Cascader
-    :value="innerValue"
-    :options="getDepartTree"
-    placeholder="全部"
-    :field-names="{
-      label: 'departName',
-      value: 'id',
-      children: 'childDepart',
-    }"
-    :show-search="showSearch"
-    :allow-clear="allowClear"
-    :change-on-select="changeOnSelect"
-    @change="handleChange"
-  >
+  <Cascader :value="innerValue" :options="getDepartTree" placeholder="全部" :field-names="{
+    label: 'departName',
+    value: 'id',
+    children: 'childDepart',
+  }" :show-search="showSearch" :allow-clear="allowClear" :change-on-select="changeOnSelect" @change="handleChange">
     <template #displayRender="{ labels }">
       {{ labels[labels.length - 1] }}
     </template>
@@ -21,80 +12,117 @@
 </template>
 
 <script lang="ts">
-  import { last } from 'lodash';
-  import { defineComponent, onUnmounted, h, ref } from 'vue';
-  // import { useMessage } from '/@/hooks/web/useMessage';
-  import { propTypes } from '/@/utils/propTypes';
-  import { useMineDepartmentStore } from '/@/store/modules/mine';
-  import { storeToRefs } from 'pinia';
-  import { Cascader } from 'ant-design-vue';
+import { last } from 'lodash';
+import { defineComponent, onUnmounted, h, ref, computed, watchEffect } from 'vue';
+// import { useMessage } from '/@/hooks/web/useMessage';
+import { propTypes } from '/@/utils/propTypes';
+import { useMineDepartmentStore } from '/@/store/modules/mine';
+import { storeToRefs } from 'pinia';
+import { Cascader } from 'ant-design-vue';
 
-  export default defineComponent({
-    name: 'MineCascader',
-    components: { Cascader },
-    props: {
-      value: propTypes.string.def(''),
-      placeholder: propTypes.string.def('全部'),
-      /** 根节点ID，如果传入，组件将过滤该节点下的节点 */
-      rootId: propTypes.string,
-      showSearch: propTypes.bool.def(true),
-      allowClear: propTypes.bool.def(true),
-      changeOnSelect: propTypes.bool.def(true),
-      // clearOnDestroy: propTypes.bool.def(false),
-    },
-    emits: ['change', 'update:value'],
-    setup(props, { emit }) {
-      // const { createMessage } = useMessage();
-      const mineStore = useMineDepartmentStore();
-      const { getDepartTree, getMineCode } = storeToRefs(mineStore);
+export default defineComponent({
+  name: 'MineCascader',
+  components: { Cascader },
+  props: {
+    value: propTypes.string.def(''),
+    placeholder: propTypes.string.def('全部'),
+    /** 根节点ID，如果传入，组件将过滤该节点下的节点 */
+    rootId: propTypes.string,
+    showSearch: propTypes.bool.def(true),
+    allowClear: propTypes.bool.def(true),
+    changeOnSelect: propTypes.bool.def(true),
+    // clearOnDestroy: propTypes.bool.def(false),
+    mineCode: propTypes.string,//URL传入的矿井ID
+    showDefaultValue: propTypes.bool.def(false) //是否需要显示默认值
+  },
+  emits: ['change', 'update:value'],
+  setup(props, { emit }) {
+    // const { createMessage } = useMessage();
+    const mineStore = useMineDepartmentStore();
+    const { getDepartTree, getMineCode, } = storeToRefs(mineStore);
 
-      // if (props.clearOnDestroy) {
-      //   const raw = getDepartId.value;
-      //   onUnmounted(() => {
-      //     mineStore.setDepartById(raw);
-      //   });
-      // }
+    // if (props.clearOnDestroy) {
+    //   const raw = getDepartId.value;
+    //   onUnmounted(() => {
+    //     mineStore.setDepartById(raw);
+    //   });
+    // }
 
-      if (props.rootId) {
-        mineStore.clearDepart();
-        mineStore.filterDepartTree((e) => e.parentId === props.rootId);
+    if (props.rootId) {
+      mineStore.clearDepart();
+      mineStore.filterDepartTree((e) => e.parentId === props.rootId);
 
-        onUnmounted(() => {
-          mineStore.restoreDepartTree();
-        });
+      onUnmounted(() => {
+        mineStore.restoreDepartTree();
+      });
+    }
+
+    // const shownText = computed(() => getDepart.value.departName || '-');
+    const innerValue = ref<string[]>([]);
+    // const innerValue = computed(() => getDepartPath.value.map((e) => e.id));
+    const options = getDepartTree;
+
+    //默认显示内容
+    function findNodeWithPath(tree, id, path = []) {
+      for (const node of tree) {
+        const currentPath: any = [...path, node];
+        if (node.id == id) {
+          return currentPath; // 返回包含目标节点及其祖先的数组
+        }
+        if (node.childDepart && node.childDepart.length > 0) {
+          const result = findNodeWithPath(node.childDepart, id, currentPath)
+          if (result) {
+            return result.map(el => el.id);
+          }
+        }
+      }
+      return null;
+    }
+    console.log(findNodeWithPath(getDepartTree.value, props.mineCode),'findNodeWithPath(getDepartTree.value, props.mineCode)')
+    const defaultValue = computed(() => {
+      if (props.mineCode) {
+        return findNodeWithPath(getDepartTree.value, props.mineCode)
+      } else {
+        const levelData = getDepartTree.value.filter(v => v.childDepart.length)
+        const firstLevel = levelData[0]['id']
+        const secondLevel = levelData[0]['childDepart'][0]['id']
+        const thirdLevel = levelData[0]['childDepart'][0]['childDepart'][0]['id']
+        return [firstLevel, secondLevel, thirdLevel]
       }
+    });
 
-      // const shownText = computed(() => getDepart.value.departName || '-');
-      const innerValue = ref<string[]>([]);
-      // const innerValue = computed(() => getDepartPath.value.map((e) => e.id));
-      const options = getDepartTree;
 
-      /**
-       * change事件
-       * @param e
-       */
-      function handleChange(value: any[]) {
-        innerValue.value = value;
-        mineStore.setDepartById(last(value));
+    /**
+     * change事件
+     * @param e
+     */
+    function handleChange(value: any[]) {
+      innerValue.value = value;
+      mineStore.setDepartById(last(value));
+      const val = getMineCode.value;
+      emit('update:value', val);
+      emit('change', val);
+    }
+
 
-        const val = getMineCode.value;
-        emit('update:value', val);
-        emit('change', val);
-      }
 
+    if (props.showDefaultValue) {
+      handleChange(defaultValue.value);
+    }  else {
       handleChange([]);
+    }
 
-      onUnmounted(() => {
-        mineStore.clearDepart();
-      });
+    onUnmounted(() => {
+      mineStore.clearDepart();
+    });
 
-      return {
-        innerValue,
-        options,
-        getDepartTree,
-        handleChange,
-        h,
-      };
-    },
-  });
+    return {
+      innerValue,
+      options,
+      getDepartTree,
+      handleChange,
+      h,
+    };
+  },
+});
 </script>

src/views/analysis/warningAnalysis/connectAnalysis/index.vue

@@ -6,7 +6,7 @@
           <div class="filter-section param-section">
             <span class="filter-label">煤矿名称：</span>
             <div class="param-selector">
-              <MineCascader style="width: 300px" @change="changeCascader"></MineCascader>
+              <MineCascader :showDefaultValue="true" :mineCode="mineCode" @change="changeCascader" style="width: 300px"></MineCascader>
             </div>
           </div>
         </Col>
@@ -78,8 +78,6 @@ import { Select, SelectOption, Row, Col, DatePicker, Button, message, Input } fr
 import CustomChart from '/@/components/Configurable/detail/CustomChart.vue';
 import MineCascader from '@/components/Form/src/jeecg/components/MineCascader/MineCascader.vue';
 import { getGoafHistory, getGoafList } from './connectAnalysis.api';
-// import { storeToRefs } from 'pinia';
-// import { useMineDepartmentStore } from '/@/store/modules/mine';
 import { useRouter } from 'vue-router';
 
 // 组件注册
@@ -98,9 +96,7 @@ const isChartGenerated = ref(false); // 是否已点击生成
 const goafId = ref('')//采空区id
 const goafOption = ref<any[]>([])//采空区列表
 const filteredData = ref<any[]>([])//曲线数据
-// const mineStore = useMineStore();
-// const { getDepartPath, getDepartTree, getDepartId, getMineCode } = storeToRefs(mineStore);
-// const innerValue = computed(() => getDepartPath.value.map((e) => e.fax));
+
 const innerValue = ref('')
 
 // // Tree Key 与参数名映射（关键：关联树形节点和实际参数）
@@ -134,7 +130,6 @@ const innerValue = ref('')
 
 function changeCascader(val) {
   innerValue.value = val
-  console.log(innerValue.value, 'innerValue')
 }
 function changeTime(val) {
   dateRange.value[0] = val[0]
@@ -144,31 +139,29 @@ function changeTime(val) {
 
 // 参数颜色映射
 const paramColorMap = computed(() => ({
-  CO: '#f5222d', // 红色
-  CH4: '#1890ff', // 蓝色
-  C2H4: '#faad14', // 橙色
-  C2H2: '#52c41a', // 绿色
-  CO2: '#722ed1', // 紫色
-  O2: '#13c2c2', // 青色
-  innerPressure: '#ff4d4f', // 浅红
-  outerPressure: '#40a9ff', // 浅蓝
-  pressureDiff: '#fa8c16', // 浅橙
-  temperature: '#9254de', // 浅紫
+  coVal: '#f5222d', // 红色
+  ch4Val: '#1890ff', // 蓝色
+  c2h4Val: '#faad14', // 橙色
+  c2h2Val: '#52c41a', // 绿色
+  co2Val: '#722ed1', // 紫色
+  o2Val: '#13c2c2', // 青色
+  sourcePressure: '#ff4d4f', // 浅红
+  temperature: '#40a9ff', // 浅蓝
 }));
 
 // 参数标签映射（图表系列名称）
-const paramLabelMap = computed(() => ({
-  CO: 'CO浓度(ppm)',
-  CH4: 'CH4浓度(%)',
-  C2H4: 'C2H4浓度(ppm)',
-  C2H2: 'C2H2浓度(ppm)',
-  CO2: 'CO2浓度(%)',
-  O2: 'O2浓度(%)',
-  innerPressure: '内压力(kPa)',
-  outerPressure: '外压力(kPa)',
-  pressureDiff: '压差(kPa)',
-  temperature: '温度(℃)',
-}));
+const paramLabelMap = computed(() => (
+  {
+    coVal: 'CO浓度(ppm)',
+    ch4Val: 'CH4浓度(%)',
+    c2h4Val: 'C2H4浓度(ppm)',
+    c2h2Val: 'C2H2浓度(ppm)',
+    co2Val: 'CO2浓度(%)',
+    o2Val: 'O2浓度(%)',
+    sourcePressure: '压差(kPa)',
+    temperature: '温度(℃)',
+  }
+));
 // 生成折线图核心逻辑
 async function generateChart() {
   // showTree.value = false