From bc8add6295e86da8e673cd3a8225ffe50f9f3653 Mon Sep 17 00:00:00 2001
From: yangyin <1850366751@qq.com>
Date: 星期四, 10 十月 2024 10:50:12 +0800
Subject: [PATCH] 新增指标管理详情页页面
---
src/views/project/yw/systemManage/metricMgr/MetricDetail.vue | 74 ++++++++++++++++++++++++++++---------
1 files changed, 56 insertions(+), 18 deletions(-)
diff --git a/src/views/project/yw/systemManage/metricMgr/MetricDetail.vue b/src/views/project/yw/systemManage/metricMgr/MetricDetail.vue
index 2309e56..967ea66 100644
--- a/src/views/project/yw/systemManage/metricMgr/MetricDetail.vue
+++ b/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(() => {
--
Gitblit v1.9.3