优化KPI展示

2025-02-13 19:32:04 +08:00
parent 8bfa73a67a
commit 4b032d74be
4 changed files with 75 additions and 100 deletions
--- a/src/views/perfManage/kpiCReport/index.vue
+++ b/src/views/perfManage/kpiCReport/index.vue
@@ -242,6 +242,13 @@ const statsColumns: TableColumnType<any>[] = [
    key: 'title',
    width: '65%',
  },
+  {
+    title: t('views.perfManage.kpiOverView.totalValue'),
+    dataIndex: 'total',
+    key: 'total',
+    width: '12%',
+    sortDirections: ['ascend', 'descend'],
+  },
  {
    title: t('views.perfManage.kpiOverView.avgValue'),
    dataIndex: 'avg',
@@ -356,6 +363,7 @@ function fnGetListTitle() {
            dataIndex: kpiValue,
            align: 'left',
            key: kpiValue,
+            unit: item[`unit`],
            resizable: true,
            width: 100,
            minWidth: 150,
@@ -448,16 +456,17 @@ function fnGetList() {
          const total = Number(
            values.reduce((sum, val) => sum + val, 0).toFixed(2)
          );
-
          // 计算平均值
          const avg =
            values.length > 0 ? Number((total / values.length).toFixed(2)) : 0;
          kpiStats.value.push({
            kpiId: columns.key,
            title: columns.title,
+            unit: columns.unit,
            max: values.length > 0 ? Math.max(...values) : 0,
            min: values.length > 0 ? Math.min(...values) : 0,
            avg,
+            total: total,
          });
        }
      }
@@ -606,7 +615,7 @@ function fnRanderChartData() {

  for (const item of orgData) {
    const keys = Object.keys(item);
-    //console.log(keys,item);//
+    //console.log(keys,item);
    for (const y of chartDataYSeriesData) {
      for (const key of keys) {
        if (y.key === key) {
@@ -744,25 +753,42 @@ function wsMessage(res: Record<string, any>) {
 // 添加一个变量来跟踪当前选中的行
 const selectedRow = ref<string[]>([]);

+const selectedUnit = ref<string | null>(null);
 // 添加处理行点击的方法
 function handleRowClick(record: any) {
  const index = selectedRow.value.indexOf(record.kpiId);
-
+  console.log(record)
  // 如果已经选中，取消选中
  if (index > -1) {
    selectedRow.value.splice(index, 1);
    chartLegendSelected[record.title] = false;
+    // 如果取消选中的是最后一个，重置 selectedUnit
+    if (selectedRow.value.length === 0) {
+      selectedUnit.value = null;
+    }
+
  } else {
+
+    // 检查单位是否一致
+    if (selectedUnit.value && selectedUnit.value !== record.unit) {
+      message.error(`${t('views.perfManage.customTarget.unitSelect')} ${selectedUnit.value}`);
+      return;
+    }
+
    // 添加新的选中项
    selectedRow.value.push(record.kpiId);

+    // 设置选中的单位
+    if (!selectedUnit.value) {
+      selectedUnit.value = record.unit;
+    }
+
    // 如果只有一个选中项，重置为 false
    if (selectedRow.value.length === 1) {
      Object.keys(chartLegendSelected).forEach(key => {
        chartLegendSelected[key] = false;
      });
    }
-
    chartLegendSelected[record.title] = true;
  }

@@ -914,50 +940,28 @@ onBeforeUnmount(() => {

 <template>
  <PageContainer>
-    <a-card
-      v-show="tableState.seached"
-      :bordered="false"
-      :body-style="{ marginBottom: '24px', paddingBottom: 0 }"
-    >
+    <a-card v-show="tableState.seached" :bordered="false" :body-style="{ marginBottom: '24px', paddingBottom: 0 }">
      <!-- 表格搜索栏 -->
      <a-form :model="queryParams" name="queryParamsFrom" layout="horizontal">
        <a-row :gutter="16">
          <a-col :lg="6" :md="12" :xs="24">
            <a-form-item name="neType" :label="t('views.ne.common.neType')">
-              <a-cascader
-                v-model:value="state.neType"
-                :options="neCascaderOptions"
-                :allow-clear="false"
-                :placeholder="t('common.selectPlease')"
-              />
+              <a-cascader v-model:value="state.neType" :options="neCascaderOptions" :allow-clear="false"
+                :placeholder="t('common.selectPlease')" />
            </a-form-item>
          </a-col>
          <a-col :lg="10" :md="12" :xs="24">
-            <a-form-item
-              :label="t('views.perfManage.goldTarget.timeFrame')"
-              name="timeFrame"
-            >
-              <a-range-picker
-                v-model:value="queryRangePicker"
-                bordered
-                :allow-clear="false"
-                :show-time="{ format: 'HH:mm:ss' }"
-                format="YYYY-MM-DD HH:mm:ss"
-                value-format="x"
-                :presets="ranges"
-                style="width: 100%"
-              ></a-range-picker>
+            <a-form-item :label="t('views.perfManage.goldTarget.timeFrame')" name="timeFrame">
+              <a-range-picker v-model:value="queryRangePicker" bordered :allow-clear="false"
+                :show-time="{ format: 'HH:mm:ss' }" format="YYYY-MM-DD HH:mm:ss" value-format="x" :presets="ranges"
+                style="width: 100%"></a-range-picker>
            </a-form-item>
          </a-col>

          <a-col :lg="2" :md="12" :xs="24">
            <a-form-item>
              <a-space :size="8">
-                <a-button
-                  type="primary"
-                  :loading="tableState.loading"
-                  @click.prevent="fnGetListTitle()"
-                >
+                <a-button type="primary" :loading="tableState.loading" @click.prevent="fnGetListTitle()">
                  <template #icon>
                    <SearchOutlined />
                  </template>
@@ -974,11 +978,7 @@ onBeforeUnmount(() => {
      <!-- 插槽-卡片左侧侧 -->
      <template #title>
        <a-space :size="8" align="center">
-          <a-button
-            type="primary"
-            :loading="tableState.loading"
-            @click.prevent="fnChangShowType()"
-          >
+          <a-button type="primary" :loading="tableState.loading" @click.prevent="fnChangShowType()">
            <template #icon>
              <AreaChartOutlined />
            </template>
@@ -988,12 +988,8 @@ onBeforeUnmount(() => {
                : t('views.perfManage.goldTarget.kpiTableTitle')
            }}
          </a-button>
-          <a-button
-            type="dashed"
-            :loading="tableState.loading"
-            @click.prevent="fnRecordExport()"
-            v-show="tableState.showTable"
-          >
+          <a-button type="dashed" :loading="tableState.loading" @click.prevent="fnRecordExport()"
+            v-show="tableState.showTable">
            <template #icon>
              <ExportOutlined />
            </template>
@@ -1013,12 +1009,8 @@ onBeforeUnmount(() => {
              </template>
            </a-button>
          </a-tooltip>
-          <TableColumnsDnd
-            v-if="tableColumns.length > 0"
-            :cache-id="`kpiTarget_${state.neType[0]}`"
-            :columns="tableColumns"
-            v-model:columns-dnd="tableColumnsDnd"
-          ></TableColumnsDnd>
+          <TableColumnsDnd v-if="tableColumns.length > 0" :cache-id="`kpiTarget_${state.neType[0]}`"
+            :columns="tableColumns" v-model:columns-dnd="tableColumnsDnd"></TableColumnsDnd>
          <a-tooltip>
            <template #title>{{ t('common.sizeText') }}</template>
            <a-dropdown trigger="click" placement="bottomRight">
@@ -1028,10 +1020,7 @@ onBeforeUnmount(() => {
                </template>
              </a-button>
              <template #overlay>
-                <a-menu
-                  :selected-keys="[tableState.size as string]"
-                  @click="fnTableSize"
-                >
+                <a-menu :selected-keys="[tableState.size as string]" @click="fnTableSize">
                  <a-menu-item key="default">
                    {{ t('common.size.default') }}
                  </a-menu-item>
@@ -1060,61 +1049,32 @@ onBeforeUnmount(() => {
              size="small"
            />
          </a-form-item> -->
-          <a-form-item
-            :label="t('views.perfManage.goldTarget.realTimeData')"
-            name="chartRealTime"
-          >
-            <a-switch
-              :disabled="tableState.loading"
-              v-model:checked="state.chartRealTime"
-              :checked-children="t('common.switch.open')"
-              :un-checked-children="t('common.switch.shut')"
-              @change="fnRealTimeSwitch"
-              size="small"
-            />
+          <a-form-item :label="t('views.perfManage.goldTarget.realTimeData')" name="chartRealTime">
+            <a-switch :disabled="tableState.loading" v-model:checked="state.chartRealTime"
+              :checked-children="t('common.switch.open')" :un-checked-children="t('common.switch.shut')"
+              @change="fnRealTimeSwitch" size="small" />
          </a-form-item>
        </a-form>
      </template>

      <!-- 表格列表 -->
-      <a-table
-        v-show="tableState.showTable"
-        class="table"
-        row-key="id"
-        :columns="tableColumnsDnd"
-        :loading="tableState.loading"
-        :data-source="tableState.data"
-        :size="tableState.size"
-        :pagination="tablePagination"
-        :scroll="{ x: tableColumnsDnd.length * 200, y: 'calc(100vh - 480px)' }"
-        @resizeColumn="(w: number, col: any) => (col.width = w)"
-        :show-expand-column="false"
-        @change="fnTableChange"
-      >
+      <a-table v-show="tableState.showTable" class="table" row-key="id" :columns="tableColumnsDnd"
+        :loading="tableState.loading" :data-source="tableState.data" :size="tableState.size"
+        :pagination="tablePagination" :scroll="{ x: tableColumnsDnd.length * 200, y: 'calc(100vh - 480px)' }"
+        @resizeColumn="(w: number, col: any) => (col.width = w)" :show-expand-column="false" @change="fnTableChange">
      </a-table>

      <!-- 图表 -->
      <div style="padding: 24px" v-show="!tableState.showTable">
-        <div
-          ref="kpiChartDom"
-          class="chart-container"
-          style="height: 450px; width: 100%"
-        ></div>
+        <div ref="kpiChartDom" class="chart-container" style="height: 450px; width: 100%"></div>

        <div class="table-container">
-          <a-table
-            :columns="statsColumns"
-            :data-source="kpiStats"
-            :pagination="false"
-            :scroll="{ y: 250 }"
-            size="small"
-            :custom-row="
-              record => ({
-                onClick: () => handleRowClick(record),
-                class: selectedRow.includes(record.kpiId) ? 'selected-row' : '',
-              })
-            "
-          >
+          <a-table :columns="statsColumns" :data-source="kpiStats" :pagination="false" :scroll="{ y: 250 }" size="small"
+            :custom-row="record => ({
+              onClick: () => handleRowClick(record),
+              class: selectedRow.includes(record.kpiId) ? 'selected-row' : '',
+            })
+              ">
            <template #headerCell="{ column }">
              <template v-if="column.key === 'total'">
                <span>
@@ -1169,6 +1129,14 @@ onBeforeUnmount(() => {
                </span>
              </template>
            </template>
+            <template #bodyCell="{ column, record }">
+              <template v-if="column.key === 'avg'">
+                <span v-if="record.unit !== '%'">-</span>
+              </template>
+              <template v-if="column.key === 'total'">
+                <span v-if="record.unit == '%'">-</span>
+              </template>
+            </template>
          </a-table>
        </div>
      </div>
--- a/src/views/system/dict/data.vue
+++ b/src/views/system/dict/data.vue
@@ -131,6 +131,9 @@ type TabeStateType = {
  selectedRowKeys: (string | number)[];
 };

+//是否显示type框
+const drawerVisible = ref(true);
+
 /**表格状态 */
 let tableState: TabeStateType = reactive({
  loading: false,
@@ -502,9 +505,11 @@ onMounted(() => {
        message.error(t('views.system.dictData.typeDataErr'), 3);
      }
    });
+    drawerVisible.value = true;
  } else {
    // 获取列表数据
    fnGetList();
+    drawerVisible.value = false;
  }
 });
 </script>
@@ -881,7 +886,7 @@ onMounted(() => {
                default-value="sys_oper_type"
                :placeholder="t('common.selectPlease')"
                :options="dict.sysDictType"
-                :disabled="true"
+                :disabled="drawerVisible"
              >
              </a-select>
            </a-form-item>