指标探索默认选择前7天

yangyin

2024-10-10 72b184063d43ac2153955d5b9bcb73db6e1264ba

指标探索默认选择前7天

 src/utils/istation/common.js

@@ -1,3 +1,5 @@

import moment from 'moment';
/**
 * 获取距离date的dayCount天数( 年月日)
 * @param {*} dayCount 距离date的天数
@@ -584,3 +586,26 @@
export const $ = (name) => document.querySelector(name);

export const getContainerSize = (dom) => ({ width: dom.getBoundingClientRect().width, height: dom.getBoundingClientRect().height });
export const getDefaultPeriod = (selectedPeriod) => {
    // 根据选择的周期返回相应的日期范围
    let startDate, endDate;
    switch (selectedPeriod) {
        case '7Days':
            startDate = moment().subtract(7, 'days');
            endDate = moment();
            break;
        case 'ThisMonth':
            startDate = moment().startOf('month');
            endDate = moment();
            break;
        case 'ThisYear':
            startDate = moment().startOf('year');
            endDate = moment();
            break;
        default:
            // 处理未匹配到的情况
            startDate = moment().subtract(7, 'days');
            endDate = moment();
    }
    return { startDate, endDate };
};

 src/utils/util.ts

@@ -1,11 +1,11 @@
import { ElMessage, ElMessageBox } from 'element-plus';
import JSONbig from 'json-bigint';

import { storeToRefs } from 'pinia';
import { unref, type Ref } from 'vue';
import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
import { useThemeConfig } from '/@/stores/themeConfig';
import request from '/@/utils/request';

/**
 * @description 当碰到 JSON 中存在过长的数字时，使用 JSONbigString 解析，数字会转为字符串处理
 * 用法：JSONbigString.parse(jsonStr)）
@@ -709,7 +709,6 @@
    return num.toFixed(precision).replace(/\.?0+$/, '');
};


type GetTextWidthOption = {
    size?: string;
    family?: string;
@@ -735,7 +734,6 @@
    return width;
}


export function decodeFormData(formDataString) {
    const params = new URLSearchParams(formDataString);
    const decodedData = {};
@@ -744,3 +742,5 @@
    }
    return decodedData;
  }



 src/views/project/yw/systemManage/metricMgr/MetricDetail.vue

@@ -42,14 +42,15 @@
                                <div class="h100">
                                    <div class="set_explore">
                                        <div class="set_explore_pad">
                                            <el-form ref="exploreFormRef" :model="state.exploreForm" label-width="100px">
                                            <el-form ref="exploreFormRef" :model="state.exploreForm" label-width="80px" label-position="left">
                                                <el-form-item label="日期区间:">
                                                    <div style="width: 300px">
                                                        <el-date-picker
                                                            v-model="state.exploreForm.dateRangeExplore"
                                                            type="daterange"
                                                            range-separator="~"
                                                            :shortcuts="shortcuts"
                                                            value-format="YYYY-MM-DD HH:mm:ss"
                                                            :default-time="defaultTime"
                                                        />
                                                    </div>
                                                </el-form-item>
@@ -114,8 +115,8 @@
                            </el-tab-pane>
                        </el-tabs>
                    </div>
                    <div class="list_btn">
                        <el-button style="width: 40px" link @click="handleExitFlow">
                    <div class="list_btn" @click="handleExitFlow">
                        <el-button style="width: 40px" link>
                            <el-icon style="font-size: 16px !important; color: #1677ff">
                                <ArrowLeft />
                            </el-icon>
@@ -177,10 +178,11 @@

<script setup lang="ts">
import * as echarts from 'echarts';
import { onMounted, reactive, ref, nextTick } from 'vue';
import { nextTick, onMounted, reactive, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { formatTime } from '/@/utils/istation/common.js';
import { formatTime, getDefaultPeriod } from '/@/utils/istation/common.js';
import { eDimensionFilter_Ops, eDrilling_Ops } from '/@/views/types/metrics/index';
const defaultTime = ref<[Date, Date]>([new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)]);
const router = useRouter();
const route = useRoute();
// 定义变量内容
@@ -228,7 +230,7 @@
        ],
    },
    exploreForm: {
        dateRangeExplore: [] as any,
        dateRangeExplore: '' as any,
        dimensionDrilling: 0,
        dimensionFiltering: {
            user: '',
@@ -252,35 +254,6 @@
    ],
    chartStatus: false,
});
const shortcuts = [
    {
        text: '最近一周',
        value: () => {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            return [start, end];
        },
    },
    {
        text: '最近一月',
        value: () => {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            return [start, end];
        },
    },
    {
        text: '最近三月',
        value: () => {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            return [start, end];
        },
    },
];

//返回到知识库列表
const handleExitFlow = () => {
@@ -415,6 +388,9 @@
    const { id, name } = route.query;
    state.metricInfo.name = name;
    state.metricInfo.id = id;
    const { startDate, endDate } = getDefaultPeriod('7Days');
    const dateRange = [startDate.format('YYYY-MM-DD HH:mm:ss'), endDate.format('YYYY-MM-DD HH:mm:ss')];
    state.exploreForm.dateRangeExplore = dateRange;
});
</script>
<style scoped lang="scss">