From 79e45536f581b4c5cd734af1dd87221d506b544b Mon Sep 17 00:00:00 2001
From: wujingjing <gersonwu@qq.com>
Date: 星期三, 09 十月 2024 16:31:04 +0800
Subject: [PATCH] Merge branch 'test' of http://47.103.154.90:83/r/WI/Web.Admin.V1.0 into test
---
src/views/types/metrics/index.ts | 11 +++
src/views/project/yw/systemManage/metricMgr/MetricDetail.vue | 136 ++++++++++++++++++++++++++++++++++++++++----
2 files changed, 133 insertions(+), 14 deletions(-)
diff --git a/src/views/project/yw/systemManage/metricMgr/MetricDetail.vue b/src/views/project/yw/systemManage/metricMgr/MetricDetail.vue
index b89926f..ee4dd2b 100644
--- a/src/views/project/yw/systemManage/metricMgr/MetricDetail.vue
+++ b/src/views/project/yw/systemManage/metricMgr/MetricDetail.vue
@@ -4,7 +4,7 @@
<el-col :span="17">
<div class="h100 relative">
<div class="ml-6 h100">
- <el-tabs v-model="state.activeMetricName" @tab-click="handleClick" class="h100">
+ <el-tabs v-model="state.activeMetricName" @tab-change="handleClick" class="h100">
<el-tab-pane label="鍩虹淇℃伅" name="basicInformation">
<div class="h100">
<el-descriptions title="鎸囨爣淇℃伅" :column="2">
@@ -44,13 +44,14 @@
<div class="set_explore_pad">
<el-form ref="exploreFormRef" :model="state.exploreForm" label-width="100px">
<el-form-item label="鏃ユ湡鍖洪棿:">
- <el-date-picker
- v-model="state.exploreForm.dateRangeExplore"
- type="daterange"
- unlink-panels
- range-separator="~"
- :shortcuts="shortcuts"
- />
+ <div style="width: 300px">
+ <el-date-picker
+ v-model="state.exploreForm.dateRangeExplore"
+ type="daterange"
+ range-separator="~"
+ :shortcuts="shortcuts"
+ />
+ </div>
</el-form-item>
<el-form-item label="缁村害涓嬮捇:">
<el-select v-model="state.exploreForm.dimensionDrilling" autocomplete="off" style="width: 226.4px" clearable>
@@ -65,7 +66,7 @@
</el-form-item>
<el-form-item label="缁村害绛涢��:">
<el-select
- v-model="state.exploreForm.dimensionFiltering"
+ v-model="state.exploreForm.dimensionFiltering.user"
autocomplete="off"
style="width: 186.4px"
clearable
@@ -78,8 +79,35 @@
>
</el-option>
</el-select>
+ <el-select
+ v-model="state.exploreForm.dimensionFiltering.unit"
+ autocomplete="off"
+ style="width: 126.4px; margin: 0 5px"
+ clearable
+ >
+ <el-option
+ v-for="item in Object.keys(eDimensionFilter_Ops)"
+ :key="item"
+ :value="parseInt(item)"
+ :label="eDimensionFilter_Ops[item]"
+ >
+ </el-option>
+ </el-select>
+ <el-select v-model="state.resultList" autocomplete="off" style="width: 126.4px; margin-right: 5px" clearable>
+ <el-option
+ v-for="(item, index) in state.resultList"
+ :key="index"
+ :value="item.department"
+ :label="item.department"
+ >
+ </el-option>
+ </el-select>
+ <el-button type="primary" @click="handleExplore" icon="ele-Search">鏌ヨ</el-button>
</el-form-item>
</el-form>
+ </div>
+ <div class="w100 h100">
+ <div ref="chartExplorationRef" class=""></div>
</div>
</div>
</div>
@@ -92,7 +120,7 @@
<ArrowLeft />
</el-icon>
</el-button>
- <span class="text-[14px] text-[#1677ff] font-[400]">杩斿洖鍒楄〃椤�</span>
+ <span class="text-[14px] text-[#1677ff] font-[400] mr-2">杩斿洖鍒楄〃椤�</span>
</div>
</div>
</el-col>
@@ -130,7 +158,7 @@
<el-divider />
<div class="section___vePzi">
<div class="item___title">
- <i class="ywifont ywicon-jiankong w-[18px] h-[18px] !text-[18px]"></i>
+ <i class="ywifont ywicon-jiankong w-[18px] h-[18px] !text-[20px]"></i>
<span>搴旂敤淇℃伅 </span>
</div>
<div class="item___txXyB" v-for="(item, index) in state.metricBasicInfo.applicationInformation" :key="index">
@@ -148,9 +176,10 @@
</template>
<script setup lang="ts">
-import { onMounted, reactive } from 'vue';
+import * as echarts from 'echarts';
+import { onMounted, reactive, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
-import { eDrilling_Ops } from '/@/views/types/metrics';
+import { eDimensionFilter_Ops, eDrilling_Ops } from '/@/views/types/metrics/index';
const router = useRouter();
const route = useRoute();
// 瀹氫箟鍙橀噺鍐呭
@@ -200,8 +229,26 @@
exploreForm: {
dateRangeExplore: [] as any,
dimensionDrilling: 0,
- dimensionFiltering: [],
+ dimensionFiltering: {
+ user: '',
+ unit: '',
+ someone: '',
+ },
},
+ resultList: [
+ {
+ department: 'HR',
+ },
+ {
+ department: 'marketing',
+ },
+ {
+ department: 'sales',
+ },
+ {
+ department: 'strategy',
+ },
+ ],
});
const shortcuts = [
{
@@ -232,6 +279,7 @@
},
},
];
+
//杩斿洖鍒扮煡璇嗗簱鍒楄〃
const handleExitFlow = () => {
//鏄惁鏄剧ず杩斿洖
@@ -241,6 +289,66 @@
state.activeMetricName = val;
};
//#endregion
+//#region ====================== 鏌ヨ ======================
+const handleExplore = () => {
+ console.log(state.exploreForm);
+};
+//#endregion
+//#region ====================== init 鍥捐〃 ======================
+const chartExplorationRef = ref(null);
+
+const initChartExploration = () => {
+ const chartExploration = echarts.init(chartExplorationRef.value);
+ chartExploration.setOption({
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'cross',
+ crossStyle: {
+ color: '#999',
+ },
+ },
+ },
+ legend: {
+ data: ['PV', 'UV'],
+ },
+ grid: {
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ containLabel: true,
+ },
+ xAxis: [
+ {
+ type: 'category',
+ boundaryGap: false,
+ data: ['鍛ㄤ竴', '鍛ㄤ簩', '鍛ㄤ笁', '鍛ㄥ洓', '鍛ㄤ簲', '鍛ㄥ叚', '鍛ㄦ棩'],
+ },
+ ],
+ yAxis: [
+ {
+ type: 'value',
+ },
+ ],
+ series: [
+ {
+ name: 'PV',
+ type: 'line',
+ stack: '鎬婚噺',
+ areaStyle: {},
+ data: [120, 132, 101, 134, 90, 230, 210],
+ },
+ {
+ name: 'UV',
+ type: 'line',
+ stack: '鎬婚噺',
+ areaStyle: {},
+ data: [220, 182, 191, 234, 290, 330, 310],
+ },
+ ],
+ });
+};
+//#endregion
onMounted(() => {
const { id, name } = route.query;
state.metricInfo.name = name;
diff --git a/src/views/types/metrics/index.ts b/src/views/types/metrics/index.ts
index 347f0d7..b1a0df2 100644
--- a/src/views/types/metrics/index.ts
+++ b/src/views/types/metrics/index.ts
@@ -21,3 +21,14 @@
[eDrillingOps.Department]: '閮ㄩ棬',
[eDrillingOps.User]: '鐢ㄦ埛',
} as const;
+/// 缁村害绛涢��
+export enum eDimensionFilterOps {
+ All = 0,
+ IN = 1,
+ LIKE = 2,
+}
+export const eDimensionFilter_Ops = {
+ [eDimensionFilterOps.All]: '=',
+ [eDimensionFilterOps.IN]: 'IN',
+ [eDimensionFilterOps.LIKE]: 'LIKE',
+} as const;
--
Gitblit v1.9.3