Merge branch 'fix/front/10-28/2024' into 'main_dev'

feat: 接口调用,新增自定义日期筛选

See merge request yunteng/thingskit-front!1519

@@ -48,3 +48,9 @@ export const getApplicationRecordClassify = (type?: string) => {
     url: `${ApplicationRecordManageApi.OPEN_API_RECORD}/getClassify${joinUrlParams}`,
     url: `${ApplicationRecordManageApi.OPEN_API_RECORD}/getClassify${joinUrlParams}`,
   });
   });
 };
 };
+
+export const getCustomApplicationRecordClassify = (params: Recordable) => {
+  return defHttp.get<ClassifyItemType[]>({
+    url: `${ApplicationRecordManageApi.OPEN_API_RECORD}/getCustomClassify?type=${params.type}&endTime=${params.endTs}&startTime=${params.startTs}`,
+  });
+};

@@ -174,5 +174,6 @@ export interface GetMeetTheConditionsDeviceParams {
   transportType?: TransportTypeEnum;
   transportType?: TransportTypeEnum;
   isEdgeDistribution?: boolean;
   isEdgeDistribution?: boolean;
   edgeId?: string;
   edgeId?: string;
-  isExcludeEdge?: boolean;
+  // isExcludeEdge?: boolean;
+  isExcludeCloud?: boolean;
 }
 }

@@ -3,8 +3,11 @@
   import { useECharts } from '/@/hooks/web/useECharts';
   import { useECharts } from '/@/hooks/web/useECharts';
   import { useAppStore } from '/@/store/modules/app';
   import { useAppStore } from '/@/store/modules/app';
   import { useI18n } from '/@/hooks/web/useI18n';
   import { useI18n } from '/@/hooks/web/useI18n';
-  import { Empty } from 'ant-design-vue';
+  import { Empty, DatePicker } from 'ant-design-vue';
   import { EChartsOption, SeriesOption } from 'echarts';
   import { EChartsOption, SeriesOption } from 'echarts';
+  import { dateUtil } from '/@/utils/dateUtil';
+  import { RangePickerValue } from 'ant-design-vue/lib/date-picker/interface';
+  import moment from 'moment';
 
 
   const { t } = useI18n();
   const { t } = useI18n();
 
 
@@ -26,8 +29,16 @@
   const timeRange = ref('week');
   const timeRange = ref('week');
 
 
   const timeRangeList = ref([
   const timeRangeList = ref([
-    { label: `1${t('home.index.timeUnit.hour')}`, value: 'hour', interval: 1000 * 60 * 5 },
-    { label: `1${t('home.index.timeUnit.day')}`, value: 'day', interval: 1000 * 60 * 60 * 1 },
+    {
+      label: `1${t('home.index.timeUnit.hour')}`,
+      value: 'hour',
+      interval: 1000 * 60 * 5,
+    },
+    {
+      label: `1${t('home.index.timeUnit.day')}`,
+      value: 'day',
+      interval: 1000 * 60 * 60 * 1,
+    },
     {
     {
       label: `7${t('home.index.timeUnit.day')}`,
       label: `7${t('home.index.timeUnit.day')}`,
       value: 'week',
       value: 'week',
@@ -52,6 +63,8 @@
 
 
   const resizeStatus = ref(false);
   const resizeStatus = ref(false);
 
 
+  const customDate = ref([]);
+
   const { setOptions, resize } = useECharts(chartRef as Ref<HTMLDivElement>);
   const { setOptions, resize } = useECharts(chartRef as Ref<HTMLDivElement>);
 
 
   const getOptions = (): EChartsOption => {
   const getOptions = (): EChartsOption => {
@@ -110,15 +123,44 @@
   });
   });
 
 
   const handleTimeRangeChange = (e: any) => {
   const handleTimeRangeChange = (e: any) => {
-    const startTs = Date.now() - e.target.value;
-    const endTs = Date.now();
-    emits('emitTimeRange', e.target.value, startTs, endTs);
+    emits('emitTimeRange', e.target.value, false, {});
     watchClientWidth();
     watchClientWidth();
   };
   };
+
+  const handleCalendarChange = (val: RangePickerValue) => {
+    customDate.value = val as unknown as any;
+  };
+
+  const handleDateOk = (range: RangePickerValue) => {
+    if (!range.length) return;
+    const [startTs, endTs] = range;
+    const startTsTimeStamp = moment(startTs).valueOf();
+    const endTsTimeStamp = moment(endTs).valueOf();
+    const lessThanOneDay = moment(endTsTimeStamp).diff(moment(startTsTimeStamp), 'day');
+    emits('emitTimeRange', lessThanOneDay >= 1 ? 'month' : 'day', true, {
+      startTs: startTsTimeStamp,
+      endTs: endTsTimeStamp,
+      type: lessThanOneDay >= 1 ? 'month' : 'day',
+    });
+  };
 </script>
 </script>
 <template>
 <template>
   <a-card :title="t('application.record.text.timeLineTitle')" class="w-full h-120">
   <a-card :title="t('application.record.text.timeLineTitle')" class="w-full h-120">
     <template #extra>
     <template #extra>
+      <DatePicker.RangePicker
+        style="width: 4.675rem"
+        @calendarChange="handleCalendarChange"
+        size="small"
+        @ok="handleDateOk"
+        v-model:value="customDate"
+        :showTime="{
+          defaultValue: [dateUtil('00:00:00', 'HH:mm:ss'), dateUtil('23:59:59', 'HH:mm:ss')],
+        }"
+      >
+        <a-radio-button :value="t('home.index.timeUnit.custom')">
+          {{ t('home.index.timeUnit.custom') }}
+        </a-radio-button>
+      </DatePicker.RangePicker>
       <a-radio-group @change="handleTimeRangeChange" v-model:value="timeRange" button-style="solid">
       <a-radio-group @change="handleTimeRangeChange" v-model:value="timeRange" button-style="solid">
         <template v-for="(timeItem, index) in timeRangeList" :key="timeItem.value">
         <template v-for="(timeItem, index) in timeRangeList" :key="timeItem.value">
           <div style="display: none">{{ index }}</div>
           <div style="display: none">{{ index }}</div>

@@ -7,7 +7,11 @@
   import TimeLineChart from './components/TimeLineChart.vue';
   import TimeLineChart from './components/TimeLineChart.vue';
   import { useI18n } from '/@/hooks/web/useI18n';
   import { useI18n } from '/@/hooks/web/useI18n';
   import { onMounted, reactive } from 'vue';
   import { onMounted, reactive } from 'vue';
-  import { getApplicationRecordClassify, getApplicationRecordTop } from '/@/api/application/record';
+  import {
+    getApplicationRecordClassify,
+    getApplicationRecordTop,
+    getCustomApplicationRecordClassify,
+  } from '/@/api/application/record';
   import { ApplicationRecordTopItemType, TopItemType } from '/@/api/application/model/record';
   import { ApplicationRecordTopItemType, TopItemType } from '/@/api/application/model/record';
   import { Empty } from 'ant-design-vue';
   import { Empty } from 'ant-design-vue';
   import total1 from '/@/assets/images/total1.png';
   import total1 from '/@/assets/images/total1.png';
@@ -91,13 +95,27 @@
   const getClassify = async (type: DateInterval) => {
   const getClassify = async (type: DateInterval) => {
     timeType.value = type;
     timeType.value = type;
     const res = await getApplicationRecordClassify(type);
     const res = await getApplicationRecordClassify(type);
+    const transformData = transformClassifyItem(res, type);
+    chartData.timeLineChartOptions = transformChartsOptionsByClassifyRecord(transformData, type);
+  };
 
 
+  // 自定义调用历史
+  const getCustomClassify = async (type: DateInterval, dateValue: Recordable) => {
+    const res = await getCustomApplicationRecordClassify(dateValue);
     const transformData = transformClassifyItem(res, type);
     const transformData = transformClassifyItem(res, type);
     chartData.timeLineChartOptions = transformChartsOptionsByClassifyRecord(transformData, type);
     chartData.timeLineChartOptions = transformChartsOptionsByClassifyRecord(transformData, type);
   };
   };
 
 
-  const handleReceiveTimeRange = (value: DateInterval) => {
-    getClassify(value);
+  const handleReceiveTimeRange = (
+    value: DateInterval,
+    isCustom: boolean,
+    dateValue: Recordable
+  ) => {
+    if (!isCustom) {
+      getClassify(value);
+    } else {
+      getCustomClassify(value, dateValue);
+    }
   };
   };
 
 
   onMounted(() => {
   onMounted(() => {

@@ -113,7 +113,8 @@
                   organizationId,
                   organizationId,
                   isEdgeDistribution: true,
                   isEdgeDistribution: true,
                   edgeId: props.edgeId,
                   edgeId: props.edgeId,
-                  isExcludeEdge: true,
+                  // isExcludeEdge: true,
+                  isExcludeCloud: true,
                 });
                 });
                 return result.map((item) => ({
                 return result.map((item) => ({
                   ...item,
                   ...item,