指标探索默认选择前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的天数
@@ -89,16 +91,16 @@
        if (l) {
            a1 < 2
                ? (b =
                        n / Math.pow(10, a1) - parseInt(n / Math.pow(10, a1)) > 0.5
                            ? Math.round(n / Math.pow(10, a1)) * Math.pow(10, a1)
                            : (parseInt(n / Math.pow(10, a1)) + 0.5) * Math.pow(10, a1))
                    n / Math.pow(10, a1) - parseInt(n / Math.pow(10, a1)) > 0.5
                        ? Math.round(n / Math.pow(10, a1)) * Math.pow(10, a1)
                        : (parseInt(n / Math.pow(10, a1)) + 0.5) * Math.pow(10, a1))
                : (b = Math.ceil(n / Math.pow(10, 1)) * Math.pow(10, 1));
        } else {
            a1 < 2
                ? (b =
                        n / Math.pow(10, a1) - parseInt(n / Math.pow(10, a1)) > 0.5
                            ? (parseInt(n / Math.pow(10, a1)) + 0.5) * Math.pow(10, a1)
                            : Math.floor(n / Math.pow(10, a1)) * Math.pow(10, a1))
                    n / Math.pow(10, a1) - parseInt(n / Math.pow(10, a1)) > 0.5
                        ? (parseInt(n / Math.pow(10, a1)) + 0.5) * Math.pow(10, a1)
                        : Math.floor(n / Math.pow(10, a1)) * Math.pow(10, a1))
                : (b = Math.floor(n / Math.pow(10, 1)) * Math.pow(10, 1));
        }
        return l ? (-20 <= a1 ? +b.toFixed(a1 < 0 ? -a1 + 1 : 0) : b) : b;
@@ -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,12 +734,13 @@
    return width;
}


export function decodeFormData(formDataString) {
    const params = new URLSearchParams(formDataString);
    const decodedData = {};
    for (const [key, value] of params) {
      decodedData[key] = decodeURIComponent(value);
        decodedData[key] = decodeURIComponent(value);
    }
    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">