WholeProcessPlatform/frontend/src/modules/shengtaidabiaoMod/index.vue

<!-- SidePanelItem.vue -->
<template> 
  <div>
    <SidePanelItem title="生态流量达标情况" :click-action="{ show: true }">
      <!-- 使用插槽自定义点击提示的内容 -->
      <template #click-action-content> 
        <div v-if="titleData.cnt" style="max-width: 300px; line-height: 1.6">
          <p>
            1、统计电站范围：接入过生态流量数据的电站
            <span
              style="color: #5989ad; cursor: pointer"
              @click.stop="handleStationClick()"
            >
              ({{ titleData.cnt }})
            </span>
          </p>
          <p>2、当来水不足时，生态流量不小于入库流量判定为达标</p>
          <p>3、“≥95%座数”表示统计电站范围内时段达标率大于等于95%的电站数量</p>
        </div>
      </template>

      <div class="body_topOne">
        <a-radio-group v-model:value="mode" @change="dataChage">
          <a-radio-button value="hour">逐时</a-radio-button>
          <a-radio-button value="day">日</a-radio-button>
        </a-radio-group>
        <div class="title_text">≥95%座数/总座数</div>
      </div>
      <a-spin :spinning="spinning">
        <div>
          <div v-for="el in datalist" @click="handleBarClick(el)">
            <div :key="el.key">
              <div class="boy_one">
                <div style="flex: 1; white-space: nowrap; margin-right: 5px">
                  {{ el.name }}
                </div>
                <img style="flex: 1" src="@/assets/components/fgx.svg" alt="" />
              </div>
              <div class="body_zhu">
                <div class="body_biao">
                  <div v-for="value in allArr">
                    <div :key="value" class="nei_body">
                      <div
                        v-if="
                          value <
                          (el?.key == null
                            ? 1
                            : el.qecTCnt == 0
                            ? 0
                            : el.qecCnt / el.qecTCnt) *
                            20
                        "
                        class="little_body"
                        :style="{ backgroundColor: el.color }"
                      ></div>
                    </div>
                  </div>
                </div>
                <div class="body_text">{{ el.qecCnt }}/{{ el.qecTCnt }}</div>
              </div>
            </div>
          </div>
        </div>
      </a-spin>
    </SidePanelItem>

    <!-- 自定义弹框 -->
    <a-modal
      v-model:open="modalVisible"
      :title="'生态流量达标情况'"
      width="1536px"
      :footer="null"
    >
      <STLLXFFS
        v-if="modalVisible"
        :options="list"
        :typeKey="selectedItem.key"
        :time="mode"
        :basicId="baseid"
        :dateArr="dateArr"
      />
    </a-modal>

    <!-- 环保自动监测工作开展情况弹框 -->
    <a-modal
      v-model:open="huanbaoModalVisible"
      :title="'环保自动监测工作开展情况'"
      width="1536px"
      :footer="null"
    >
      <ModalYkzhbzdjcgz
        v-if="huanbaoModalVisible"
        :baseId="baseid"
        :titleData="titleData"
      />
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, watch, inject, computed } from 'vue';
import SidePanelItem from '@/components/SidePanelItem/index.vue';
import {
  qgcetQgcStaticData,
  evnmAutoMonitorGetKendoListCust
} from '@/api/stll';
import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
import { useMapViewStore } from '@/modules/map/stores/map-view.store';
import STLLXFFS from './TwoLayer/ShengTaiLiuLiangDaBQKTwoLayer.vue';
import ModalYkzhbzdjcgz from './TwoLayer/ModalYkzhbzdjcgz.vue';
import HuanbaoZDJCGZKZ from '@/modules/huanbaozdjcgzkzQK/index.vue';
import { useDraggable } from '@/utils/drag';
// 定义组件名（便于调试和递归）
defineOptions({
  name: 'shengtaidabiaoMod'
});
const JidiSelectEventStore = useJidiSelectEventStore();
const mapViewStore = useMapViewStore();
const baseid = ref('');
const dateArr = ref<any[]>([]);
const obj = {
  show: true,
  value:
    '1、统计电站范围：接入过生态流量数据的电站,2、当来水不足时，生态流量不小于入库流量判定为达标,3、“≥95%座数”表示统计电站范围内时段达标率大于等于95%的电站数量'
};

const mode = ref('hour');
const dataArr: any = ref([
  {
    name: '生态环境部门要求',
    qecCnt: '0', // 座数
    qecTCnt: '0', //总座数
    type: 1,
    key: 'qecInterval'
  },
  {
    name: '水利部门要求',
    qecCnt: '0', // 座数
    qecTCnt: '0', //总座数
    type: 2,
    key: 'mwrInterval'
  }
]);
const list: any = ref([
  { name: '生态环境部门要求', type: 1, color: '#77C300', key: 'qecInterval' },
  { name: '水利部门要求', type: 2, color: '#56C3E3', key: 'mwrInterval' },
  { name: '多年平均流量 10%', type: 3, color: '#F76B01', key: 'avqInterval' },
  { name: '无生态流量要求', type: 4, color: '#B4B4B4', key: null }
]);
const datalist: any = ref([]);
const allArr: any = ref(Array.from({ length: 20 }, (_, i) => i));
const spinning = ref(false);
const modalVisible = ref(false);
const selectedItem = ref<any>(null);
const huanbaoModalVisible = ref(false);

// 启用弹窗拖拽（限制在可视区域内）
useDraggable(modalVisible, { boundary: true, resetOnOpen: true });
// 启用弹窗拖拽（限制在可视区域内）
useDraggable(huanbaoModalVisible, { boundary: true, resetOnOpen: true });
// 处理电站数量点击事件
const handleStationClick = () => {
  huanbaoModalVisible.value = true;
};

// 处理进度条点击事件
const handleBarClick = (item: any) => {
  selectedItem.value = item;
  modalVisible.value = true;
};

// 根据 type 将 list 中的数据合并到 dataArr 中
const setStyle = () => {
  if (dataArr.value.length == 0) {
    return false;
  }
  dataArr.value.forEach((item: any) => {
    // 在 list 中找到 type 匹配的数据
    const matched = list.value.find(
      (listItem: any) => listItem.type === item.type
    );
    if (matched) {
      // 合并数据，dataArr 的属性优先
      datalist.value.push({
        ...matched,
        ...item
      });
    }
  });
  console.log(datalist.value);
};
const dataChage = () => {
  getData();
};
const getdate = (offsetYears = 0) => {
  const formatDate = (date: Date) => {
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    return `${year}-${month}-${day}`;
  };

  let startDate: string;
  let endDate: string;

  if (dateArr.value && dateArr.value.length === 2) {
    const start = new Date(dateArr.value[0]);
    const end = new Date(dateArr.value[1]);
    if (offsetYears !== 0) {
      start.setFullYear(start.getFullYear() + offsetYears);
      end.setFullYear(end.getFullYear() + offsetYears);
    }
    startDate = `${formatDate(start)} 00:00:00`;
    endDate = `${formatDate(end)} 23:59:59`;
  } else {
    const now = new Date();
    const oneMonthAgo = new Date(now);
    oneMonthAgo.setMonth(oneMonthAgo.getMonth() - 1);
    if (offsetYears !== 0) {
      now.setFullYear(now.getFullYear() + offsetYears);
      oneMonthAgo.setFullYear(oneMonthAgo.getFullYear() + offsetYears);
    }
    startDate = `${formatDate(oneMonthAgo)} 00:00:00`;
    endDate = `${formatDate(now)} 23:59:59`;
  }

  return { startDate, endDate };
};

const getData = async () => {
  const { startDate, endDate } = getdate(0);

  let params = {
    filter: {
      logic: 'and',
      filters: [
        baseid.value != 'all'
          ? {
              field: 'baseId',
              operator: 'eq',
              dataType: 'string',
              value: baseid.value
            }
          : null,
        {
          field: 'dtin',
          operator: 'eq',
          dataType: 'string',
          value: '1'
        },
        {
          field: 'type',
          operator: 'eq',
          dataType: 'string',
          value: mode.value
        },
        {
          field: 'tm',
          operator: 'gte',
          dataType: 'date',
          value: startDate
        },
        {
          field: 'tm',
          operator: 'lte',
          dataType: 'date',
          value: endDate
        }
      ].filter(Boolean)
    }
  };

  spinning.value = true;
  try {
    let res = await qgcetQgcStaticData(params);
    // 根据API响应结构规范处理数据
    if (res.data && res.data.list) {
      const apiList = res.data.list;
      //
      // 只使用前两条数据（type: 1 和 type: 2）
      if (apiList && apiList.length > 0) {
        dataArr.value = apiList.slice(0, 2).map((item: any) => ({
          //   name: item.typeName || item.desc,
          qecCnt: item.qecCnt,
          qecTCnt: item.qecTCnt,
          type: item.type
        }));

        // 清空旧数据并重新合并样式
        datalist.value = [];
        setStyle();
      } else {
        // 无数据场景处理
        dataArr.value = [];
        datalist.value = [];
      }
    }
  } catch (error) {
    console.error('获取生态流量达标数据失败:', error);
  } finally {
    spinning.value = false;
  }
};
// 监听电站变化（优先使用父组件 provide 的电站上下文，兜底 jidiStore）
const injectedStation = inject<any>('dianZhanStation', null);
const stationSource = computed(() => injectedStation?.value || JidiSelectEventStore.selectedItem);

watch(
  () => stationSource.value,
  newVal => {
    if (newVal && newVal.wbsCode) {
      baseid.value = newVal.wbsCode;
      getData();
    }
  },
  { deep: true, immediate: true }
);

watch(
  () => mapViewStore.searchTimeRange,
  (newVal) => {
    
    dateArr.value = newVal;
    getData();
  },
  { deep: true }
);

//统计电站范围：接入过生态流量数据的电站
const titleData: any = ref({ cnt: 0 });
const getcont = async () => {
  let params = {
    filter: {
      logic: 'and',
      filters: [
        {
          field: 'showIds',
          operator: 'in',
          value: ['7']
        }
      ]
    }
  };
  let res = await evnmAutoMonitorGetKendoListCust(params);
  //   [
  //     {
  //         "cnt": 452,
  //         "orderInx": 7,
  //         "orderInxName": "生态流量",
  //         "sttpFullPath": "ENG",
  //         "sttpCode": "ENG",
  //         "sttpName": "生态流量"
  //     }
  // ]
  let list = res?.data?.data[0];
  if (list) {
    titleData.value = list;
  }
  //
};
// 页面加载时执行的逻辑
onMounted(() => {
  setStyle();
  getcont();
});
</script>

<style lang="scss" scoped>
.body_topOne {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;

  .title_text {
    font-size: 16px;
  }
}

.boy_one {
  display: flex;
  align-items: center;
  margin: 5px 0px;
}

.body_zhu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: all 0.3s ease;

  .body_biao {
    width: 100%;
    height: 52px;
    border: 1px solid #ccdae7;
    border-radius: 2px;
    display: flex;
    padding: 5px 1px;
    overflow: hidden;

    .nei_body {
      width: 12px;
      height: 100%;
      border: 1px solid #ccdae7;
      padding: 2px;
      margin-left: 4px;

      .little_body {
        width: 100%;
        height: 100%;
      }
    }
  }

  .body_text {
    display: flex;
    flex-direction: column;
    width: 90px;
    height: 100%;
    justify-content: space-around;
    margin-left: 6px;
    align-items: center;
    font-size: 18px;
    font-weight: 500;
  }
}

.ant-radio-group {
  // border: 3px solid #2f6b98 !important;
  // border-radius: 10px !important;

  .ant-radio-button-wrapper-checked {
    border: 1px solid #2f6b98 !important;
    background-color: #2f6b98 !important;
    color: #fff !important;
  }

  .ant-radio-button-wrapper {
    border: 2px solid #2f6b98 !important;
  }

  .ant-radio-button-wrapper-checked :before {
    background-color: #2f6b98 !important;
  }
}
</style>