关联分析-查询条件修改

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

@@ -1,18 +1,9 @@
 <template>
-  <Cascader
-    :value="innerValue"
-    :options="options"
-    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="options" 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,107 +12,111 @@
 </template>
 
 <script lang="ts">
-  import { last } from 'lodash';
-  import { defineComponent, ref, watch } from 'vue';
-  // import { useMessage } from '/@/hooks/web/useMessage';
-  import { propTypes } from '/@/utils/propTypes';
-  import { useMineDepartmentStore } from '/@/store/modules/mine';
-  import { Cascader } from 'ant-design-vue';
+import { last } from 'lodash';
+import { defineComponent, ref, watch } from 'vue';
+// import { useMessage } from '/@/hooks/web/useMessage';
+import { propTypes } from '/@/utils/propTypes';
+import { useMineDepartmentStore } from '/@/store/modules/mine';
+import { Cascader } from 'ant-design-vue';
 
-  /**
-   * 矿区级联选择器，该组件会根据配置从store中获取初始数据
-   *
-   * 组件数据流梳理：初始化数据及选项 -> 更新数据 -> 同步STORE -> 计算组件内依赖
-   *
-   * 本组件在初始化后不再监听STORE中的数据变化，因为这样可能导致用户通过Tabs切换时出现数据混乱
-   */
-  export default defineComponent({
-    name: 'MineCascader',
-    components: { Cascader },
-    props: {
-      value: propTypes.string.def(''),
-      placeholder: propTypes.string.def('全部'),
-      /** 根节点ID，如果传入，组件将过滤该节点下的节点 */
-      rootId: propTypes.string,
-      /** 是否从已存储的信息中初始化组件值 */
-      initFromStore: propTypes.bool.def(true),
-      /** 是否从将值同步至STORE */
-      syncToStore: propTypes.bool.def(true),
-      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 innerValue = ref<string[]>([]);
-      const options = ref(mineStore.getDepartTree);
+/**
+ * 矿区级联选择器，该组件会根据配置从store中获取初始数据
+ *
+ * 组件数据流梳理：初始化数据及选项 -> 更新数据 -> 同步STORE -> 计算组件内依赖
+ *
+ * 本组件在初始化后不再监听STORE中的数据变化，因为这样可能导致用户通过Tabs切换时出现数据混乱
+ */
+export default defineComponent({
+  name: 'MineCascader',
+  components: { Cascader },
+  props: {
+    value: propTypes.string.def(''),
+    placeholder: propTypes.string.def('全部'),
+    /** 根节点ID，如果传入，组件将过滤该节点下的节点 */
+    rootId: propTypes.string,
+    /** 是否从已存储的信息中初始化组件值 */
+    initFromStore: propTypes.bool.def(true),
+    /** 是否从将值同步至STORE */
+    syncToStore: propTypes.bool.def(true),
+    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 innerValue = ref<string[]>([]);
+    const options = ref(mineStore.getDepartTree);
 
-      // 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) {
-        options.value = mineStore.filterDepartTree((e) => e.parentId === props.rootId);
-      }
+    if (props.rootId) {
+      options.value = mineStore.filterDepartTree((e) => e.parentId === props.rootId);
+    }
 
-      // 如果从STORE里初始化数据需要触发一次watcher以初始化组件状态
-      if (props.initFromStore) {
-        handleWatch(mineStore.getDepartId);
-        // 为了让使用该组件的各个页面能够第一时间使用到该组件传递的值，手动触发一次emit
-        handleChange([mineStore.getDepartId]);
-      } else {
-        handleWatch(props.value);
-        // 为了让使用该组件的各个页面能够第一时间使用到该组件传递的值，手动触发一次emit
-        handleChange([props.value]);
-      }
+    // 如果从STORE里初始化数据需要触发一次watcher以初始化组件状态
+    if (props.initFromStore) {
+      handleWatch(mineStore.getDepartId);
+      // 为了让使用该组件的各个页面能够第一时间使用到该组件传递的值，手动触发一次emit
+      handleChange([mineStore.getDepartId]);
+    } else {
+      handleWatch(props.value);
+      // 为了让使用该组件的各个页面能够第一时间使用到该组件传递的值，手动触发一次emit
+      handleChange([props.value]);
+    }
 
-      /**
-       * change事件
-       * @param e
-       */
-      function handleChange(value: any[] = []) {
-        if (!mineStore.findDepartById(last(value), options.value)) {
-          console.warn('[Change] The value provided is not included in MineOptions');
-          const val = mineStore.calcMineCodeByDepart(options.value);
-          emit('update:value', val);
-          emit('change', val);
-        } else {
-          emit('update:value', last(value));
-          emit('change', last(value));
-        }
+    /**
+     * change事件
+     * @param e
+     */
+    function handleChange(value: any[] = []) {
+      console.log(value, 'value===')
+      if (!value.length) {
+        emit('update:value', null);
+        emit('change', null);
+      } else if (!mineStore.findDepartById(last(value), options.value)) {
+        console.warn('[Change] The value provided is not included in MineOptions');
+        const val = mineStore.calcMineCodeByDepart(options.value);
+        emit('update:value', val);
+        emit('change', val);
+      } else {
+        emit('update:value', last(value));
+        emit('change', last(value));
       }
+    }
 
-      function handleWatch(id: string = '') {
-        // rootId提供了选项过滤功能，任何传入的值都应该检查
-        if (!mineStore.findDepartById(id, options.value)) {
-          console.warn('[Watch] The id provided is not included in MineOptions');
-          innerValue.value = [];
-        } else {
-          const path = mineStore.calcDepartPathById(id, options.value, (e) => e.id);
-          innerValue.value = path;
-        }
-
-        if (props.syncToStore) {
-          mineStore.setDepartById(id);
-        }
-
+    function handleWatch(id: string = '') {
+      // rootId提供了选项过滤功能，任何传入的值都应该检查
+      if (!mineStore.findDepartById(id, options.value)) {
+        console.warn('[Watch] The id provided is not included in MineOptions');
+        innerValue.value = [];
+      } else {
         const path = mineStore.calcDepartPathById(id, options.value, (e) => e.id);
         innerValue.value = path;
       }
 
-      watch(() => props.value, handleWatch);
+      if (props.syncToStore) {
+        mineStore.setDepartById(id);
+      }
+
+      const path = mineStore.calcDepartPathById(id, options.value, (e) => e.id);
+      innerValue.value = path;
+    }
+
+    watch(() => props.value, handleWatch);
 
-      return {
-        innerValue,
-        options,
-        handleChange,
-      };
-    },
-  });
+    return {
+      innerValue,
+      options,
+      handleChange,
+    };
+  },
+});
 </script>

src/views/analysis/warningAnalysis/connectAnalysis/connectAnalysis.api.ts

@@ -1,16 +1,13 @@
 import { defHttp } from '/@/utils/http/axios';
 
 enum Api {
-  getGoafHistory='/province/device/getGoafHistory',
-  getGoafList='/province/device/getGoafList'
+  getGoafHistory = '/province/device/getGoafHistory',
+  getGoafList = '/province/device/getGoafList'
 }
 
 //查询采空区数据列表
 export const getGoafList = (params) =>
-  defHttp.post({
-    url: Api.getGoafList,
-    params,
-  });
+  defHttp.post({url: Api.getGoafList,params}, { joinParamsToUrl: true });
 //查询采空区历史数据列表
 export const getGoafHistory = (params) =>
   defHttp.get({

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

@@ -8,7 +8,7 @@
             <span class="filter-label">煤矿名称：</span>
             <div class="param-selector">
               <MineCascader v-model:value="innerValue" style="width: 330px" :sync-to-store="false"
-                :init-from-store="false" @change="changeCascader"></MineCascader>
+                :init-from-store="false" :change-on-select="false" @change="changeCascader"></MineCascader>
             </div>
           </div>
         </Col>
@@ -17,21 +17,16 @@
           <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 goafOption" :key="index" :value="item.value">{{ item.label }}
+              </SelectOption>
             </Select>
           </div>
         </Col>
         <Col :span="7">
           <div class="filter-section param-section">
             <span class="filter-label">时间选择：</span>
-            <RangePicker
-              v-model:value="dateRange"
-              format="YYYY-MM-DD HH:mm:ss"
-              :placeholder="['开始时间', '结束时间']"
-              style="width: 300px"
-              :show-time="{ format: 'HH:mm:ss' }"
-              @change="changeTime"
-            />
+            <RangePicker v-model:value="dateRange" format="YYYY-MM-DD HH:mm:ss" :placeholder="['开始时间', '结束时间']"
+              style="width: 300px" :show-time="{ format: 'HH:mm:ss' }" @change="changeTime" />
           </div>
         </Col>
         <Col :span="2">
@@ -57,7 +52,7 @@
       <div class="echart-content">
         <echartContent :echartData="echartData"></echartContent>
       </div>
-       <div class="check-line">
+      <div class="check-line">
         <echartDivder></echartDivder>
       </div>
       <div class="check-title">
@@ -81,45 +76,46 @@ import { useRouter } from 'vue-router';
 import { useMineDepartmentStore } from '/@/store/modules/mine';
 import { SvgIcon } from '/@/components/Icon';
 
-  // 组件注册
-  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,
-    yData: [] as any,
-  });
-
-  //煤矿选项切换
-  function changeCascader(val) {
-    innerValue.value = val;
-    getGoafListData();
-  }
-  //时间选择选项切换
-  function changeTime(val) {
-    dateRange.value[0] = val[0];
-    dateRange.value[1] = val[1];
-  }
-  //图表选项标签切换
-  function checkBoxChange(val) {
-    checkList.value = val.checkedList;
-    generateChart();
-  }
+// 组件注册
+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,
+  yData: [] as any,
+});
+
+//煤矿选项切换
+function changeCascader(val) {
+  console.log(val, '111---')
+  innerValue.value = val;
+  getGoafListData();
+}
+//时间选择选项切换
+function changeTime(val) {
+  dateRange.value[0] = val[0];
+  dateRange.value[1] = val[1];
+}
+//图表选项标签切换
+function checkBoxChange(val) {
+  checkList.value = val.checkedList;
+  generateChart();
+}
 
-  // 生成折线图核心逻辑
-  async function generateChart() {
-    echartData.yData.length = 0;
-    let startTime = dateRange.value[0].format('YYYY-MM-DD HH:mm:ss');
-    let endTime = dateRange.value[1].format('YYYY-MM-DD HH:mm:ss');
-    let res = await getGoafHistory({ pageNo: 1, pageSize: 1000, startTime: startTime, endTime: endTime, goafId: goafId.value });
+// 生成折线图核心逻辑
+async function generateChart() {
+  echartData.yData.length = 0;
+  let startTime = dateRange.value[0].format('YYYY-MM-DD HH:mm:ss');
+  let endTime = dateRange.value[1].format('YYYY-MM-DD HH:mm:ss');
+  let res = await getGoafHistory({ pageNo: 1, pageSize: 1000, startTime: startTime, endTime: endTime, goafId: goafId.value });
+  if (res) {
     let data = res.records || [];
-
     if (data.length) {
       echartData.xData = data.map((e) => e.createTime);
       if (checkList.value.length) {
@@ -133,30 +129,33 @@ import { SvgIcon } from '/@/components/Icon';
     }
   }
 
-  //获取采空区列表
-  async function getGoafListData() {
-    let res = await getGoafList({ mineCode: innerValue.value });
-    if (res.length) {
-      goafOption.value = res.map((el) => {
-        return {
-          label: el.devicePos,
-          value: el.id,
-        };
-      });
-      goafId.value = goafId.value ? goafId.value : goafOption.value[0]['value'];
-    }
-  }
 
-  onMounted(async () => {
-    const mineCode = currentRoute.value['query']['mineCode']; //传递过来的矿ID
-    if (mineCode) {
-      innerValue.value = mineCode as any;
-    } else {
-      innerValue.value = mineStore.getMineCode.split(',')[0];
-      await getGoafListData();
-      await generateChart();
-    }
-  });
+}
+
+//获取采空区列表
+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
+  if (mineCode) {
+    innerValue.value = mineCode as any;
+  } else {
+    innerValue.value = mineStore.getMineCode.split(',')[0];
+    console.log(innerValue.value, 'innerValue.value')
+    await generateChart();
+  }
+});
 </script>
 
 <style lang="less" scoped>
@@ -180,7 +179,7 @@ import { SvgIcon } from '/@/components/Icon';
     background-color: #f8f9fc;
     align-items: center;
     // box-shadow: 0px 0px 8px 1px rgba(202, 211, 225, 1);
-    
+
   }
 
   .filter-section {