新增指标管理详情页页面

yangyin

2024-10-10 bc8add6295e86da8e673cd3a8225ffe50f9f3653

新增指标管理详情页页面

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

@@ -106,7 +106,7 @@
                                                </el-form-item>
                                            </el-form>
                                        </div>
                                        <div class="w100 h-[400px]">
                                        <div class="w100 h-[550px]">
                                            <div ref="chartExplorationRef" class="w100 h100"></div>
                                        </div>
                                    </div>
@@ -177,7 +177,7 @@

<script setup lang="ts">
import * as echarts from 'echarts';
import { onMounted, reactive, ref } from 'vue';
import { onMounted, reactive, ref, nextTick } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { formatTime } from '/@/utils/istation/common.js';
import { eDimensionFilter_Ops, eDrilling_Ops } from '/@/views/types/metrics/index';
@@ -189,7 +189,7 @@
        name: '',
        id: '',
    } as any,
    activeMetricName: 'indicatorExploration',
    activeMetricName: 'basicInformation',
    measurementList: [],
    metricBasicInfo: {
        visitNumData: [
@@ -287,18 +287,37 @@
    //是否显示返回
    router.back();
};
const handleClick = (val) => {
    state.activeMetricName = val;
    if (state.chartStatus) return;
    if (val == 'indicatorExploration') {
        state.chartStatus = true;
        initChartExploration();
    }
};

//#endregion
//#region ====================== 查询 ======================
const handleExplore = () => {
    console.log(state.exploreForm);
};
//#endregion

//#region ====================== 图表resize ======================
const getChartInstance = (chartRef: HTMLDivElement) => {
    let chartInstance = echarts.getInstanceByDom(chartRef);
    if (chartInstance) return chartInstance;
    const { width, height } = chartRef.getBoundingClientRect();
    chartInstance = echarts.init(chartRef, undefined, {
        width,
        height,
    });
    window.addEventListener('resize', () => {
        const { width, height } = chartRef.getBoundingClientRect();
        chartInstance = echarts.init(chartRef, undefined, {
            width,
            height,
        });
        chartInstance.resize({ width, height });
    });
    return chartInstance;
};
const resizeChart = () => {
    const { width, height } = chartExplorationRef.value.getBoundingClientRect();
    const chartInstance = getChartInstance(chartExplorationRef.value);
    chartInstance && chartInstance.resize({ width, height });
};
//#endregion
//#region ====================== init 图表 ======================
@@ -332,20 +351,21 @@
        xData.push(item.sys_imp_date);
        yData.push(item.stay_hours);
    });
    const chartExploration = echarts.init(chartExplorationRef.value);
    chartExploration.setOption({
    const chartExploration = {
        tooltip: {
            trigger: 'axis',
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            top: 70,
            left: 10,
            right: 40,
            bottom: 0,
            containLabel: true,
        },
        xAxis: {
            name: '时间',
            name: '日期',
            type: 'category',

            axisTick: {
                alignWithLabel: true,
            },
@@ -360,6 +380,8 @@
        yAxis: [
            {
                type: 'value',
                name: '停留时长',
                nameGap: 30,
            },
        ],
        series: [
@@ -370,7 +392,23 @@
                data: yData,
            },
        ],
    });
    };
    const chartInstance = getChartInstance(chartExplorationRef.value);
    chartInstance.setOption(chartExploration);
    chartInstance.resize();
};
const handleClick = (val) => {
    if (val == 'indicatorExploration') {
        nextTick(() => {
            if (state.chartStatus) {
                resizeChart();
                return;
            }
            initChartExploration();
            state.chartStatus = true;
        });
    }
    state.activeMetricName = val;
};
//#endregion
onMounted(() => {