表格和图表展示 ；同步 colFilter

wujingjing

2024-10-21 9e9d666bbe57503bb0902bda0d23bf34ae75e832

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

@@ -1,7 +1,7 @@
<template>
   <div class="flex flex-col h100">
      <el-row class="w100 h100">
         <el-col :span="17">
         <el-col :span="17" class="h-full">
            <div class="h100 relative">
               <div class="ml-6 h100">
                  <el-tabs v-model="state.activeMetricName" @tab-change="handleClick" class="h100">
@@ -42,87 +42,28 @@
                           <el-divider />
                        </div>
                     </el-tab-pane>
                     <el-tab-pane label="指标探索" name="indicatorExploration">
                        <div class="h100">
                           <div class="set_explore">
                              <div class="set_explore_pad">
                                 <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="~"
                                             value-format="YYYY-MM-DD HH:mm:ss"
                                             :default-time="defaultTime"
                                             @change="getDateTime"
                                             :disabled-date="disablesDate"
                                          />
                                       </div>
                                    </el-form-item>
                                    <el-form-item label="维度下钻:">
                                       <el-select v-model="state.exploreForm.dimensionDrilling" autocomplete="off" style="width: 226.4px" clearable>
                                          <el-option
                                             v-for="item in Object.keys(eDrilling_Ops)"
                                             :key="item"
                                             :value="parseInt(item)"
                                             :label="eDrilling_Ops[item]"
                                          >
                                          </el-option>
                                       </el-select>
                                    </el-form-item>
                                    <el-form-item label="维度筛选:">
                                       <el-select
                                          v-model="state.exploreForm.dimensionFiltering.user"
                                          autocomplete="off"
                                          style="width: 186.4px"
                                          clearable
                                          @change="handleDimensionFilteringChange"
                                       >
                                          <el-option
                                             v-for="item in Object.keys(eDrilling_Ops)"
                                             :key="item"
                                             :value="parseInt(item)"
                                             :label="eDrilling_Ops[item]"
                                          >
                                          </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.exploreForm.dimensionFiltering.someone"
                                          autocomplete="off"
                                          style="width: 126.4px; margin-right: 5px"
                                          clearable
                                       >
                                          <el-option
                                             v-for="(item, index) in state.resultList"
                                             :key="index"
                                             :value="item.id"
                                             :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 h-[550px]">
                                 <div ref="chartExplorationRef" class="w100 h100"></div>
                              </div>
                     <el-tab-pane label="指标探索" name="indicatorExploration" class="h-full">
                        <div class="h-full flex-column">
                           <el-form :model="dialogFormValue"  class="flex-0" ref="dialogFormRef" :rules="dialogFormRules">
                              <el-form-item label="日期区间：" prop="rangValue">
                                 <TimeRange v-model="dialogFormValue.rangValue" />
                              </el-form-item>
                              <el-form-item label="分组维度：" prop="rangValue">
                                 <el-select v-model="dialogFormValue.groupDimList" multiple>
                                    <el-option v-for="item in dimList" :key="item.id" :label="item.title" :value="item.id" />
                                 </el-select>
                              </el-form-item>

                           </el-form>
                           <div class="flex-auto ">
                              <!-- <RecordSet v-bind="recordSetProps" class="h-full "/> -->
                              <RecordSetTable v-bind="recordSetTableProps" class="h-full"/>

										

                           </div>


                        </div>
                     </el-tab-pane>
                  </el-tabs>
@@ -212,7 +153,7 @@
                              <div class="subTitle___zya5g">下钻维度</div>
                              <div class="ml-0 mt-[20px]">
                                 <div class="flex flex-wrap gap-[5px] items-center">
                                    <div v-for="item in state.metricBasicInfo.applicationInformation" :key="item.id">
                                    <div v-for="item in dimList" :key="item.id">
                                       <el-tag :style="{ backgroundColor: 'e6f4ff', color: '#0958d9', borderColor: '#91caff' }">{{
                                          item.title
                                       }}</el-tag>
@@ -237,19 +178,27 @@
import * as metricApi from '/@/api/metrics';
import { formatTime, getDefaultPeriod } from '/@/utils/istation/common.js';
import { eDimensionFilter_Ops, eDrilling_Ops, eMetrics_Ops } from '/@/views/types/metrics';
import TimeRange from '/@/components/chat/chatComponents/summaryCom/components/recordSet/components/TimeRange.vue';

import List from '/@/components/chat/chatComponents/summaryCom/components/recordSet/components/List.vue';
import { FormRules } from 'element-plus/es/components/form/src/types';
import RecordSet from '/@/components/chat/chatComponents/summaryCom/components/recordSet/RecordSet.vue';
import { recordSetProps,recordSetTableProps } from './testData';

import RecordSetTable from '/@/components/chat/chatComponents/summaryCom/components/recordSetTable/RecordSetTable.vue';
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();
// 定义变量内容

const state = reactive({
   metricInfo: {
      name: '',
      id: '',
   } as any,
   activeMetricName: 'basicInformation',
   activeMetricName: 'indicatorExploration',
   metricBasicInfo: {
      descriptionQuotaItems: {},
      applicationInformation: [],
   } as any,
   exploreForm: {
      dateRangeExplore: '' as any,
@@ -289,13 +238,15 @@

//#endregion
//#region ====================== 基础信息 ======================

const dimList = ref([]);
const tableData = ref([]);
const getTableData = async (id) => {
   const res = await metricApi.getMetricNameListByPost();
   const data = res?.values ?? [];
   const filterData = data.filter((item) => item.id == id);
   state.metricBasicInfo.descriptionQuotaItems = filterData[0]; //左侧描述内容
   state.metricBasicInfo.applicationInformation = filterData[0].dimensions ?? [];
   dimList.value = filterData[0].dimensions ?? [];
};
//#endregion
//#region ====================== 指标探索查询 ======================
@@ -435,6 +386,18 @@
   state.activeMetricName = val;
};
//#endregion

//#region ====================== 指标探索 ======================
const dialogFormRules = ref<FormRules>({
   title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
   prompt: [{ required: true, message: '请输入提示词', trigger: 'blur' }],
});
const dialogFormValue = ref({
   rangValue: ['2024-10-21 00:00:00', '2024-10-23 23:59:59'],
   groupDimList: [],
});
//#endregion

onMounted(() => {
   const { id } = route.query;
   getTableData(id);