goaf-monitoring-system/src/views/analysis/warningAnalysis/connectAnalysis/index.vue

<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="connectAnalysis">
    <div class="filter-area">
      <Row style="width: 100%">
        <Col :span="6">
          <div class="filter-section param-section">
            <span class="filter-label">煤矿名称：</span>
            <div class="param-selector">
              <MineCascader
                v-model:value="innerValue"
                style="width: 300px"
                :sync-to-store="false"
                :init-from-store="false"
                @change="changeCascader"
              ></MineCascader>
            </div>
          </div>
        </Col>
        <Col :span="6">
          <!-- 时间选择 -->
          <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>
            </Select>
          </div>
        </Col>
        <Col :span="6">
          <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"
            />
          </div>
        </Col>
        <Col :span="6">
          <div class="filter-section">
            <Button type="primary" @click="generateChart">生成</Button>
          </div>
        </Col>
      </Row>
    </div>
    <!-- 动态图表区域-->
    <div class="echart-box">
      <div class="check-title">
        <CheckboxNav @checkBoxChange="checkBoxChange"></CheckboxNav>
      </div>
      <div class="echart-content">
        <echartContent :echartData="echartData"></echartContent>
      </div>
      <div class="check-title">
        <echartLengend></echartLengend>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted, reactive } from 'vue';
  import dayjs from 'dayjs';
  import { Select, SelectOption, Row, Col, DatePicker, Button } from 'ant-design-vue';
  import MineCascader from '@/components/Form/src/jeecg/components/MineCascader/MineCascader.vue';
  import CheckboxNav from './components/checkbox-nav.vue';
  import echartLengend from './components/echart-lengend.vue';
  import echartContent from './components/echart-content.vue';
  import { getGoafHistory, getGoafList } from './connectAnalysis.api';
  import { useRouter } from 'vue-router';
  import { useMineDepartmentStore } from '/@/store/modules/mine';

  // 组件注册
  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();
  }

  // 生成折线图核心逻辑
  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 });
    let data = res.records || [];

    if (data.length) {
      echartData.xData = data.map((e) => e.createTime);
      if (checkList.value.length) {
        checkList.value.forEach((el) => {
          echartData.yData.push({
            label: el,
            value: data,
          });
        });
      }
    }
  }

  //获取采空区列表
  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();
    }
  });
</script>

<style lang="less" scoped>
  .connectAnalysis {
    width: calc(100% - 10px);
    height: calc(100% - 20px);
    margin: 10px 0px 10px 10px;
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid #c8d0dd;
    border-radius: 5px;

    .filter-area {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      margin-bottom: 15px;
      padding: 20px;
      border: 1px solid #f0f0f0;
      border-radius: 10px;
      background: @card-bg-color;
      align-items: center;
    }

    .filter-section {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .filter-label {
      color: #666;
      min-width: 80px;
      flex-shrink: 0;
      font-weight: 500;
    }

    .param-section {
      flex: 1;
      // min-width: 300px;
    }

    .param-selector {
      display: flex;
      align-items: center;
      gap: 8px;
      position: relative;
    }

    .echart-box {
      width: 100%;
      height: calc(100% - 95px);
    }

    .check-title {
      height: 40px;
      line-height: 40px;
      background-color: #d0e1fa;
      border-radius: 3px;
      padding: 0px 20px;
      box-sizing: border-box;
    }

    .echart-content {
      width: 100%;
      height: calc(100% - 80px);
    }
  }
</style>