[Pref 0000] 关联分析页面代码优化

src/views/analysis/warningAnalysis/connectAnalysis/hooks/form.ts

@@ -0,0 +1,40 @@
+import { ref } from 'vue';
+import { useRoute } from 'vue-router';
+import { getGoafSelectOption } from '/@/views/monitor/sealedMonitor/monitor.api';
+
+export function useInitForm() {
+  // const mineStore = useMineDepartmentStore();
+  const route = useRoute();
+  const loading = ref(false);
+  const innerValue = ref<string>((route.query.mineCode as string) || '');
+  // 给历史数据默认填充的矿码
+
+  if (innerValue.value) {
+    // mineStore.setDepartById(code as string);
+    initGoafOptions(innerValue);
+  }
+
+  // 采空区选择器
+  const goafId = ref('');
+  const goafOptions = ref<any[]>([]);
+
+  function initGoafOptions(mineCode) {
+    loading.value = true;
+    return getGoafSelectOption({ mineCode })
+      .then(({ options, defaultValue }) => {
+        goafOptions.value = options;
+        goafId.value = defaultValue;
+      })
+      .finally(() => {
+        loading.value = false;
+      });
+  }
+
+  return {
+    goafOptions,
+    goafId,
+    innerValue,
+    loading,
+    initGoafOptions,
+  };
+}

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

@@ -23,7 +23,7 @@
           <div class="filter-section param-section">
             <span class="filter-label">密闭名称：</span>
             <Select ref="select" v-model:value="goafId" style="width: 300px" placeholder="请选择老空区">
-              <SelectOption v-for="(item, index) in goafOption" :key="index" :value="item.value">{{ item.label }} </SelectOption>
+              <SelectOption v-for="(item, index) in goafOptions" :key="index" :value="item.value">{{ item.label }} </SelectOption>
             </Select>
           </div>
         </Col>
@@ -42,7 +42,7 @@
         </Col>
         <Col :span="2">
           <div class="filter-section">
-            <Button type="primary" @click="generateChart">
+            <Button type="primary" @click="generateChart" :loading="loading">
               <template #icon>
                 <SvgIcon style="margin-right: 10px" name="shencen" />
               </template>
@@ -82,20 +82,20 @@
   import echartLengend from './components/echart-lengend.vue';
   import echartContent from './components/echart-content.vue';
   import echartDivder from './components/echart-divder.vue';
-  import { getGoafHistory, getGoafList } from './connectAnalysis.api';
+  import { getGoafHistory } from './connectAnalysis.api';
   import { useRouter } from 'vue-router';
   import { useMineDepartmentStore } from '/@/store/modules/mine';
   import { SvgIcon } from '/@/components/Icon';
+  import { useInitForm } from './hooks/form';
+
+  const { goafOptions, goafId, innerValue, loading, initGoafOptions } = useInitForm();
 
   // 组件注册
   const RangePicker: any = DatePicker.RangePicker;
   const { currentRoute } = useRouter();
   // 筛选相关响应式数据
   const dateRange = ref([dayjs().add(-30, 'day'), dayjs()]); // 默认时间范围（近1天）
-  const goafId = ref(''); //采空区id
-  const goafOption = ref<any[]>([]); //采空区列表
   const mineStore = useMineDepartmentStore();
-  const innerValue = ref('');
   const checkList = ref<any[]>(['coVal', 'ch4Val', 'c2h4Val', 'c2h2Val', 'co2Val', 'o2Val', 'sourcePressure', 'temperature']); //当前选中要进行显示的选项
   const echartData = reactive({
     xData: [] as any,
@@ -104,9 +104,8 @@
 
   //煤矿选项切换
   function changeCascader(val) {
-    console.log(val, '111---');
     innerValue.value = val;
-    getGoafListData();
+    initGoafOptions(val);
   }
   //时间选择选项切换
   function changeTime(val) {
@@ -142,18 +141,18 @@
   }
 
   //获取采空区列表
-  async function getGoafListData() {
-    let res = await getGoafList({ mineCode: innerValue.value });
-    console.log(res, '90');
-    goafOption.value =
-      res.map((el) => {
-        return {
-          label: el.devicePos,
-          value: el.id,
-        };
-      }) || [];
-    goafId.value = goafOption.value.length ? (goafId.value ? goafId.value : goafOption.value[0]['value']) : '';
-  }
+  // async function getGoafListData() {
+  //   let res = await getGoafList({ mineCode: innerValue.value });
+  //   console.log(res, '90');
+  //   goafOption.value =
+  //     res.map((el) => {
+  //       return {
+  //         label: el.devicePos,
+  //         value: el.id,
+  //       };
+  //     }) || [];
+  //   goafId.value = goafOption.value.length ? (goafId.value ? goafId.value : goafOption.value[0]['value']) : '';
+  // }
 
   onMounted(async () => {
     const mineCode = currentRoute.value['query']['mineCode']; //传递过来的矿ID