SaaS-lib/hx-ai-intelligent/src/view/monitor/energyMonitor/tree/index.vue

<!-- eslint-disable vue/v-on-event-hyphenation -->
<template>
  <div class="parent-container">
    <div class="ns-tree-title">
      <ns-icon name="common" size="11" style="margin-right: 3px" />
      <span>数据点位</span>
    </div>

    <a-select
      v-model:value="selectedValue"
      placeholder="请选择能耗类型"
      style="margin-bottom: 10px; width: 100%"
      :options="options1"
      @change="changeEnergyType" />
    <a-radio-group
      ref="select"
      v-model:value="mode"
      @change="changeMode"
      style="margin-bottom: 10px; width: 100%">
      <a-radio-button
        value="0"
        style="width: 47.5%; margin-right: 2.5%; text-align: center; border-radius: 4px"
        :disabled="shebei">
        设备
      </a-radio-button>
      <a-radio-button
        value="1"
        style="width: 47.5%; margin-left: 2.5%; text-align: center; border-radius: 4px"
        >节点</a-radio-button
      >
    </a-radio-group>
    <a-input
      v-model:value="deviceName"
      placeholder="请输入设备名称"
      v-if="mode == '0'"
      @change="changeMode" />
    <a-input v-model:value="pointName" placeholder="请输入节点名称" v-else @change="changeMode" />
    <a-spin :spinning="treeLoading">
      <a-tree
        v-model:expandedKeys="expandedKeys"
        v-model:selectedKeys="selectedKeys"
        v-model:checkedKeys="checkedKeys"
        :show-line="{ showLeafIcon: false }"
        checkable
        :height="600"
        style="width: 100%; overflow-y: auto; margin-bottom: 10px; margin-top: 10px"
        :tree-data="treeData2">
        <!-- <template #title="{ title }">
          <span v-if="title.indexOf(mode == '0' ? deviceName : pointName) > -1">
            {{ title.substr(0, title.indexOf(mode == '0' ? deviceName : pointName)) }}
            <span style="color: #f50">{{ mode == '0' ? deviceName : pointName }}</span>
            {{
              title.substr(
                title.indexOf(mode == '0' ? deviceName : pointName) +
                  (mode == '0' ? deviceName : pointName).length,
              )
            }}
          </span>
          <span v-else>{{ title }}</span>
        </template> -->
      </a-tree>
    </a-spin>

    <!-- <div class="fixed-bottom"> -->
    <div>
      <!-- <a-divider /> -->

      <a-select
        v-model:value="frequencyValue"
        placeholder="请选择日期类型"
        :style="{
          top: '100px',
          left: `${divWidth + 55}px`,
          zIndex: 9,
          position: 'absolute',
          width: `${divWidth}px`,
        }"
        :options="options2"
        @change="changeFrequency" />
      <a-range-picker
        :style="{
          top: '100px',
          left: `${divWidth * 2 + 65}px`,
          zIndex: 9,
          position: 'absolute',
          width: `${divWidth}px`,
        }"
        @change="onChangeDate"
        v-model:value="dateValue"
        :picker="dateTypeValue"
        v-if="activeKey == '1'" />

      <a-date-picker
        :style="{
          top: '100px',
          left: `${divWidth * 2 + 65}px`,
          zIndex: 9,
          position: 'absolute',
          width: `${divWidth}px`,
        }"
        @change="onChangeDate"
        v-model:value="timeValue"
        :picker="dateTypeValue"
        v-if="activeKey == '2'" />
      <a-button
        type="primary"
        :style="{
          top: '100px',
          left: `${divWidth * 3 + 75}px`,
          zIndex: 9,
          position: 'absolute',
        }"
        @click="getSelect(null)"
        v-if="divWidth != 0">
        查询
      </a-button>
    </div>

    <!-- </div> -->
  </div>
</template>

<script lang="ts">
  import type { TreeSelectProps, SelectProps } from 'ant-design-vue';
  import { defineComponent, ref, onMounted, inject, onUnmounted } from 'vue';
  import dayjs, { Dayjs } from 'dayjs';
  import { http } from '/nerv-lib/util';
  import { device, group } from '/@/api/deviceManage';
  import { energyMonitor } from '/@/api/monitor';
  import { dict, getEnum } from '/@/api';

  export default defineComponent({
    // eslint-disable-next-line vue/multi-word-component-names
    name: 'Tree',
    setup() {
      const select = ref<HTMLElement | null>(null);
      const divWidth = ref(0); // 用于存储 div 的宽度

      // 获取 div 的宽度
      // const getDivWidth = () => {
      //   if (select.value) {
      //     divWidth.value = select.value.$el.offsetWidth;
      //   }
      // };
      // 使用 ResizeObserver 监听宽度变化
      const getDivWidth = new ResizeObserver(() => {
        if (select.value?.$el) {
          divWidth.value = select.value.$el.offsetWidth;
          console.log('宽度变化:', divWidth.value);
        }
      });
      const value = ref<string>();
      const deviceName = ref<string>();
      const pointName = ref<string>();
      const treeLoading = ref(false);
      const shebei = ref(false);

      // 树打开节点
      const expandedKeys = ref<string[]>([]);
      // 树勾选节点
      const selectedKeys = ref<string[]>([]);
      // 树点击节点
      const checkedKeys = ref<string[]>([]);

      // 能耗类型list
      const options1 = ref<SelectProps['options']>([]);
      // 日期类型list
      const options2 = ref<SelectProps['options']>([]);
      const mode = ref<String>('0');
      // 能耗类型
      const selectedValue = ref<string | number | null | undefined>();
      // 日期类型
      const dateTypeValue = ref();

      const frequencyValue = ref(0);

      const activeKey = ref('1');

      // 时间
      const dateValue = ref<[Dayjs, Dayjs] | undefined>([dayjs(), dayjs()]);

      const timeValue = ref<Dayjs | undefined>(dayjs());

      // 页面初始化参数
      const getOptionsList = async () => {
        try {
          const options = await dict({ params: { dicKey: 'ENERGY_TYPE' } });
          options.data.data.forEach((item: any) => {
            (item.value = item.dicKey), (item.label = item.cnValue);
          });
          options1.value = options.data.data; // 根据返回数据的结构来更新 options1.value
          if (options1.value) {
            selectedValue.value = options1.value[0].value;
          }
        } catch (error) {
          console.error('Failed to fetch options:', error);
        }
        let frequency = await getEnum({ params: { enumType: 'EnergyTimeEnum' } });
        options2.value = frequency.data;
        if (options2.value && options2.value.length > 0) {
          dateTypeValue.value = 'date';
          frequencyValue.value = options2.value[0].value;
        }
        // options2.value = [
        //   {
        //     value: 'date',
        //     label: '日',
        //   },
        //   {
        //     value: 'month',
        //     label: '月',
        //   },
        //   {
        //     value: 'year',
        //     label: '年',
        //   },
        // ];
      };
      interface PageData {
        // 图表 表格数据
        graphTableList: any[];
        // 图表 表格表头
        graphTableColumns: any[];
        // 图表 图表数据
        graphGraphList: any[];
        // 分析 表格数据
        analysisTableList: any[];
        // 分析 图表数据
        analysisGraphList: any[];
      }
      const pageData = inject<PageData>('pageData');
      if (!pageData) {
        throw new Error('pageData is not provided');
      }

      // 选择能耗类型
      const changeEnergyType = () => {
        if (selectedValue.value == 'CARBON_EMISSIONS') {
          shebei.value = true;
          mode.value = '1';
        } else {
          shebei.value = false;
        }
        changeMode();
      };
      const startDate = ref<String>();
      const endDate = ref<String>();

      const startDateAnalyse = ref<String>();
      const endDateAnalyse = ref<String>();

      const onChangeDate = (val: any, dateStrings: any) => {
        if (dateStrings && dateStrings.length === 2) {
          dateValue.value = val;
          startDate.value = dateStrings[0];
          endDate.value = dateStrings[1];
        } else if (dateStrings) {
          timeValue.value = val;
          startDateAnalyse.value = dateStrings;
          endDateAnalyse.value = dateStrings;
        }
      };
      const changeFrequency = (value) => {
        if (frequencyValue.value == 0) {
          dateTypeValue.value = 'date';
        } else if (frequencyValue.value == 1) {
          dateTypeValue.value = 'month';
        } else if (frequencyValue.value == 2) {
          dateTypeValue.value = 'year';
        }
      };

      const getSelect = (key: any) => {
        let keyV = null;
        if (key) {
          keyV = key;
        }
        if (activeKey.value == '1') {
          getSelectGraph(keyV);
        } else {
          getSelectAnalyse(keyV);
        }
      };

      const getSelectGraph = (key: any) => {
        if (key) {
          activeKey.value = key;
          // if (
          //   pageData.graphTableList.length > 0 &&
          //   pageData.graphTableColumns.length > 0 &&
          //   pageData.graphGraphList.length > 0
          // ) {
          //   return;
          // }
        }

        let startTime = '';
        let endTime = '';
        if (startDate.value && endDate.value) {
          if (dateTypeValue.value == 'month') {
            startTime = startDate.value + '-01';
            const [year, month] = endDate.value.split('-').map(Number);

            // 创建下一个月的第一天
            const date = new Date(year, month, 1);

            // 减去一天得到当月的最后一天
            // date.setDate(date.getDate() - 1);
            endTime = date.toISOString().split('T')[0];
            // endTime = endDate.value + '-01';
          } else if (dateTypeValue.value == 'year') {
            startTime = startDate.value + '-01-01';
            endTime = endDate.value + '-12-31';
          } else {
            startTime = startDate.value + '';
            endTime = endDate.value + '';
          }
        } else {
          // 获取当天的时间
          const today = new Date();
          const year = today.getFullYear();
          const month = String(today.getMonth() + 1).padStart(2, '0'); // getMonth() 返回的月份是0-11
          const day = String(today.getDate()).padStart(2, '0');

          startTime = year + '-' + month + '-' + day;
          endTime = year + '-' + month + '-' + day;
        }

        // 图表数据
        http
          .post(energyMonitor.getDeviceOrNodeEnergyGraph, {
            deviceName: deviceName.value,
            energyType: selectedValue.value,
            orgId: orgId.value,

            dateType: frequencyValue.value,
            deviceInfoCodes: mode.value == '0' ? checkedKeys.value : [], // 设备需要传 device_info_code
            energyQueryType: mode.value, // 0 设备  1 节点

            nodeIds: mode.value == '1' ? checkedKeys.value : [],
            startDate: startTime,
            endDate: endTime,
          })
          .then((res) => {
            if (res.data && res.data.tableList && res.data.tableHeaderList && res.data.graghData) {
              let selectedValueName = '';
              options1.value?.forEach((item) => {
                if (item.value == selectedValue.value) {
                  selectedValueName = item.label;
                }
              });
              res.data.tableList.forEach((item) => {
                item.selectedValueName = selectedValueName;
              });
              pageData.graphTableList = res.data.tableList;
              pageData.graphTableColumns = res.data.tableHeaderList;
              pageData.graphGraphList = res.data.graghData;
            } else {
              pageData.graphTableList = [];
              pageData.graphTableColumns = [];
              pageData.graphGraphList = [];
            }
          });
      };
      const getSelectAnalyse = (key: any) => {
        if (key) {
          activeKey.value = key;
          // if (pageData.analysisGraphList.length > 0 && pageData.analysisTableList.length > 0) {
          //   return;
          // }
        }
        let startTime = '';
        let endTime = '';
        if (startDateAnalyse.value != endDateAnalyse.value) {
          endDate.value = startDateAnalyse.value;
        }
        if (startDateAnalyse.value && endDateAnalyse.value) {
          if (dateTypeValue.value == 'month') {
            startTime = startDateAnalyse.value + '-01';
            const [year, month] = endDateAnalyse.value.split('-').map(Number);

            // 创建下一个月的第一天
            const date = new Date(year, month, 1);

            // 减去一天得到当月的最后一天
            // date.setDate(date.getDate() - 1);
            endTime = date.toISOString().split('T')[0];
            // endTime = endDate.value + '-01';
          } else if (dateTypeValue.value == 'year') {
            startTime = startDateAnalyse.value + '-01-01';
            endTime = endDateAnalyse.value + '-12-31';
          } else {
            startTime = startDateAnalyse.value + '';
            endTime = endDateAnalyse.value + '';
          }
        } else {
          // 获取当天的时间
          const today = new Date();
          const year = today.getFullYear();
          const month = String(today.getMonth() + 1).padStart(2, '0'); // getMonth() 返回的月份是0-11
          const day = String(today.getDate()).padStart(2, '0');

          startTime = year + '-' + month + '-' + day;
          endTime = year + '-' + month + '-' + day;
        }
        timeValue.value = dayjs(startTime);

        // 分析数据
        http
          .post(energyMonitor.getDeviceOrNodeEnergyAnalyse, {
            deviceName: deviceName.value,
            energyType: selectedValue.value,
            orgId: orgId.value,

            dateType: dateTypeValue.value == 'year' ? 0 : 1, //0 年 1月
            deviceInfoCodes: mode.value == '0' ? checkedKeys.value : [], // 设备需要传 device_info_code
            energyQueryType: mode.value, // 0 设备  1 节点

            nodeIds: mode.value == '1' ? checkedKeys.value : [],
            startDate: startTime,
            endDate: endTime,
          })
          .then((res) => {
            if (res.data && res.data.dataList) {
              pageData.analysisTableList = res.data.dataList;
              pageData.analysisGraphList = res.data.dataList;
            } else {
              pageData.analysisTableList = [];
              pageData.analysisGraphList = [];
            }
          });
      };

      const orgId = ref('');
      const result = JSON.parse(sessionStorage.getItem('ORGID')!);
      orgId.value = result;
      const treeData2 = ref<TreeSelectProps['treeData']>([]);
      // 切换树结构
      const changeMode = () => {
        checkedKeys.value = [];
        treeLoading.value = true;
        if (mode.value == '0') {
          http
            .post(group.queryDeviceToEnergy, {
              deviceNum: deviceName.value,
              energyType: selectedValue.value,
              orgId: orgId.value,
              // pageNum: 1,
              // pageSize: 9999,
            })
            .then((res) => {
              let val = '999999999';

              let label = '所有设备';

              let records = res.data;
              records.forEach((item: any) => {
                (item.title = item.deviceNum), (item.key = item.deviceCode);
              });
              let a: TreeSelectProps['treeData'] = [{ title: label, key: val, children: records }];
              treeData2.value = a;
              expandedKeys.value = [val];
              checkedKeys.value.push(records[0].deviceCode, records[1].deviceCode);
              getSelect(null);
            })
            .finally(() => {
              treeLoading.value = false;
            });
        } else {
          http
            .post(group.queryDeviceGroupTree, {
              pointName: pointName.value,
              energyType: selectedValue.value,
              orgId: orgId.value,
            })
            .then((res) => {
              treeData2.value = [];
              treeData2.value = formatTreeData(res.data);

              expandedKeys.value = getAllKeys(treeData2.value);
              if (treeData2.value?.length >= 2) {
                checkedKeys.value.push(treeData2.value[0].key, treeData2.value[1].key);
                getSelect(null);
              }
            })
            .finally(() => {
              treeLoading.value = false;
            });
        }
      };
      const getAllKeys = (data: any) => {
        let keys: any[] = [];
        data.forEach((item: any) => {
          if (item.children) {
            keys.push(item.key);
            keys = keys.concat(getAllKeys(item.children));
          }
        });
        return keys;
      };
      const formatTreeData = (data: any) => {
        return data.map((item: any) => ({
          title: item.pointName,
          key: item.id,
          children: item.children ? formatTreeData(item.children) : [],
        }));
      };

      type RangeValue = [Dayjs, Dayjs];
      const dates = ref<RangeValue>();
      const hackValue = ref<RangeValue>();

      const disabledDate = (current: Dayjs) => {
        if (!dates.value || (dates.value as any).length === 0) {
          return false;
        }
        const tooLate = dates.value[0] && current.diff(dates.value[0], 'days') > 2;
        const tooEarly = dates.value[1] && dates.value[1].diff(current, 'days') > 2;
        return tooEarly || tooLate;
      };

      const onOpenChange = (open: boolean) => {
        if (open) {
          dates.value = [] as any;
          hackValue.value = [] as any;
        } else {
          hackValue.value = undefined;
        }
      };

      const onCalendarChange = (val: RangeValue) => {
        dates.value = val;
      };
      onMounted(() => {
        if (select.value?.$el) {
          divWidth.value = select.value.$el.offsetWidth;
          getDivWidth.observe(select.value.$el);
        }

        getOptionsList();
        changeMode();
        // debugger;
        // await checkedKeys.value.push(
        //   treeData2.value[0].children[0].deviceCode,
        //   treeData2.value[0].children[1].deviceCode,
        // );
        // debugger;
        // getSelect(null);
      });
      // 在组件卸载时停止监听
      onUnmounted(() => {
        if (select.value?.$el) {
          getDivWidth.unobserve(select.value.$el);
        }
        getDivWidth.disconnect();
      });

      return {
        value,
        deviceName,
        pointName,
        treeData2,
        expandedKeys,
        selectedKeys,
        checkedKeys,
        options1,
        options2,
        mode,
        selectedValue,
        dateTypeValue,
        frequencyValue,
        dateValue,
        timeValue,
        getOptionsList,
        getSelect,
        getSelectAnalyse,
        getSelectGraph,
        changeMode,
        disabledDate,
        onCalendarChange,
        onOpenChange,
        hackValue,
        treeLoading,
        changeEnergyType,
        shebei,
        onChangeDate,
        changeFrequency,
        activeKey,
        select,
        divWidth,
      };
    },
  });
</script>

<style lang="less" scoped>
  .ns-tree-title {
    user-select: text;
    margin-bottom: 5px;
    padding-bottom: 10px;
    padding-top: 10px;
    border-bottom: 1px solid #e9e9e9;
    > span {
      padding-left: 10px;
      line-height: 20px;
    }
  }
  .parent-container {
    // position: relative;
    border-radius: 10px;
    background: #ffffff;
    padding-left: 10px;
    padding-right: 10px;
    height: 100%;
  }

  // .fixed-bottom {
  //   position: absolute;
  //   bottom: 0;
  //   width: 100%;
  //   margin-bottom: 10px;
  // }
  /* 选中状态的背景色和文字颜色 */
  ::v-deep .ant-radio-button-wrapper-checked {
    border: none !important; /* 移除选中时的边框 */
    box-shadow: none !important; /* 移除选中时的阴影 */
    background-color: #ecf3ff !important; /* 使用 !important 强制覆盖背景颜色 */
    color: #4388fb !important; /* 使用 !important 强制覆盖文字颜色 */
  }
  /* 未选中时的颜色 */
  ::v-deep .ant-radio-button-wrapper {
    border: none !important; /* 移除所有边框 */
    box-shadow: none !important; /* 去掉阴影（如果有的话） */
    background-color: #f9f9f9;
    // color: #333333;
  }

  .ant-radio-button-wrapper:not(:first-child)::before {
    width: 0;
  }
</style>