fix: KPI指标表格头提示信息

src/views/perfManage/goldTarget/index.vue

@@ -23,7 +23,7 @@ import {
   nextTick,
   onBeforeUnmount,
   h,
-  watch
+  watch,
 } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
 import { message, Modal, TableColumnType } from 'ant-design-vue/es';
@@ -410,12 +410,13 @@ function fnGetList() {
           });
 
           // 计算总值
-          const total = Number(values.reduce((sum, val) => sum + val, 0).toFixed(2));
+          const total = Number(
+            values.reduce((sum, val) => sum + val, 0).toFixed(2)
+          );
 
           // 计算平均值
-          const avg = values.length > 0
+          const avg =
-            ? Number((total / values.length).toFixed(2))
+            values.length > 0 ? Number((total / values.length).toFixed(2)) : 0;
-            : 0;
 
           kpiStats.value.push({
             kpiId: columns.key,
@@ -423,7 +424,7 @@ function fnGetList() {
             max: values.length > 0 ? Math.max(...values) : 0,
             min: values.length > 0 ? Math.min(...values) : 0,
             avg: avg,
-            total: total
+            total: total,
           });
         }
       }
@@ -584,29 +585,31 @@ function fnRanderChartData() {
         type: 'category',
         boundaryGap: false,
         axisLabel: {
-          color: document.documentElement.getAttribute('data-theme') === 'dark'
+          color:
-            ? '#CACADA'
+            document.documentElement.getAttribute('data-theme') === 'dark'
-            : '#333'
+              ? '#CACADA'
+              : '#333',
         },
         splitLine: {
           show: true,
           lineStyle: {
-            color: getSplitLineColor()
+            color: getSplitLineColor(),
-          }
+          },
         },
         data: chartDataXAxisData,
       },
       yAxis: {
         axisLabel: {
-          color: document.documentElement.getAttribute('data-theme') === 'dark'
+          color:
-            ? '#CACADA'
+            document.documentElement.getAttribute('data-theme') === 'dark'
-            : '#333'
+              ? '#CACADA'
+              : '#333',
         },
         splitLine: {
           show: true,
           lineStyle: {
-            color: getSplitLineColor()
+            color: getSplitLineColor(),
-          }
+          },
         },
       },
       series: chartDataYSeriesData,
@@ -754,59 +757,49 @@ function getSplitLineColor() {
 // 监听主题变化
 watch(
   () => layoutStore.proConfig.theme, // 监听的值
-  (newValue) => {
+  newValue => {
     if (kpiChart.value) {
       const splitLineColor = getSplitLineColor();
       // 绘制图数据
-      kpiChart.value.setOption(
+      kpiChart.value.setOption({
-        {
+        tooltip: {
-          tooltip: {
+          trigger: 'axis',
-            trigger: 'axis',
+          position: function (pt: any) {
-            position: function (pt: any) {
+            return [pt[0], '10%'];
-              return [pt[0], '10%'];
+          },
-            },
+          confine: true, // 限制 tooltip 显示范围
-            confine: true, // 限制 tooltip 显示范围
+          backgroundColor:
-            backgroundColor: newValue === 'dark'
+            newValue === 'dark'
               ? 'rgba(48, 48, 48, 0.8)'
               : 'rgba(255, 255, 255, 0.9)',
-            borderColor: newValue === 'dark'
+          borderColor: newValue === 'dark' ? '#555' : '#ddd',
-              ? '#555'
+          textStyle: {
-              : '#ddd',
+            color: newValue === 'dark' ? '#CACADA' : '#333',
-            textStyle: {
+          },
-              color: newValue === 'dark'
+        },
-                ? '#CACADA'
+        xAxis: {
-                : '#333'
+          axisLabel: {
+            color: newValue === 'dark' ? '#CACADA' : '#333',
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: splitLineColor,
             },
           },
-          xAxis: {
+        },
-            axisLabel: {
+        yAxis: {
-              color: newValue === 'dark'
+          axisLabel: {
-                ? '#CACADA'
+            color: newValue === 'dark' ? '#CACADA' : '#333',
-                : '#333'
-            },
-            splitLine: {
-              show: true,
-              lineStyle: {
-                color: splitLineColor
-              }
-            }
           },
-          yAxis: {
+          splitLine: {
-            axisLabel: {
+            show: true,
-              color: newValue === 'dark'
+            lineStyle: {
-                ? '#CACADA'
+              color: splitLineColor,
-                : '#333'
             },
-            splitLine: {
+          },
-              show: true,
+        },
-              lineStyle: {
+      });
-                color: splitLineColor
-              }
-            }
-          }
-        }
-      );
-
     }
   }
 );
@@ -878,39 +871,67 @@ 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"
+              <a-cascader
-                :placeholder="t('common.selectPlease')" />
+                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-form-item
-              <a-range-picker v-model:value="queryRangePicker" bordered :allow-clear="false"
+              :label="t('views.perfManage.goldTarget.timeFrame')"
-                :show-time="{ format: 'HH:mm:ss' }" format="YYYY-MM-DD HH:mm:ss" value-format="x"
+              name="timeFrame"
-                style="width: 100%"></a-range-picker>
+            >
+              <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"
+                style="width: 100%"
+              ></a-range-picker>
             </a-form-item>
           </a-col>
           <a-col :lg="4" :md="12" :xs="24">
-            <a-form-item :label="t('views.perfManage.goldTarget.interval')" name="interval">
+            <a-form-item
-              <a-select v-model:value="queryParams.interval" :placeholder="t('common.selectPlease')" :options="[
+              :label="t('views.perfManage.goldTarget.interval')"
-                { label: '5S', value: 5 },
+              name="interval"
-                { label: '1M', value: 60 },
+            >
-                { label: '5M', value: 300 },
+              <a-select
-                { label: '15M', value: 900 },
+                v-model:value="queryParams.interval"
-                { label: '30M', value: 1800 },
+                :placeholder="t('common.selectPlease')"
-                { label: '60M', value: 3600 },
+                :options="[
-              ]" />
+                  { label: '5S', value: 5 },
+                  { label: '1M', value: 60 },
+                  { label: '5M', value: 300 },
+                  { label: '15M', value: 900 },
+                  { label: '30M', value: 1800 },
+                  { label: '60M', value: 3600 },
+                ]"
+              />
             </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>
@@ -927,7 +948,11 @@ 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>
@@ -937,8 +962,12 @@ onBeforeUnmount(() => {
                 : t('views.perfManage.goldTarget.kpiTableTitle')
             }}
           </a-button>
-          <a-button type="dashed" :loading="tableState.loading" @click.prevent="fnRecordExport()"
+          <a-button
-            v-show="tableState.showTable">
+            type="dashed"
+            :loading="tableState.loading"
+            @click.prevent="fnRecordExport()"
+            v-show="tableState.showTable"
+          >
             <template #icon>
               <ExportOutlined />
             </template>
@@ -958,8 +987,12 @@ onBeforeUnmount(() => {
               </template>
             </a-button>
           </a-tooltip>
-          <TableColumnsDnd v-if="tableColumns.length > 0" :cache-id="`kpiTarget_${state.neType[0]}`"
+          <TableColumnsDnd
-            :columns="tableColumns" v-model:columns-dnd="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">
@@ -969,7 +1002,10 @@ 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>
@@ -998,19 +1034,37 @@ onBeforeUnmount(() => {
               size="small"
             />
           </a-form-item> -->
-          <a-form-item :label="t('views.perfManage.goldTarget.realTimeData')" name="chartRealTime">
+          <a-form-item
-            <a-switch :disabled="tableState.loading" v-model:checked="state.chartRealTime"
+            :label="t('views.perfManage.goldTarget.realTimeData')"
-              :checked-children="t('common.switch.open')" :un-checked-children="t('common.switch.shut')"
+            name="chartRealTime"
-              @change="fnRealTimeSwitch" size="small" />
+          >
+            <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"
+      <a-table
-        :loading="tableState.loading" :data-source="tableState.data" :size="tableState.size"
+        v-show="tableState.showTable"
-        :pagination="tablePagination" :scroll="{ x: tableColumnsDnd.length * 200, y: 'calc(100vh - 480px)' }"
+        class="table"
-        @resizeColumn="(w: number, col: any) => (col.width = w)" :show-expand-column="false" @change="fnTableChange">
+        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"
+      >
         <template #bodyCell="{ column, record }">
           <template v-if="column.key === 'timeGroup'">
             {{ parseDateToStr(+record.timeGroup) }}
@@ -1020,15 +1074,40 @@ onBeforeUnmount(() => {
 
       <!-- 图表 -->
       <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"
+          <a-table
-            :custom-row="record => ({
+            :columns="statsColumns"
-              onClick: () => handleRowClick(record),
+            :data-source="kpiStats"
-              class: selectedRow.includes(record.kpiId) ? 'selected-row' : ''
+            :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>
+                  {{ t('views.perfManage.kpiOverView.totalValue') }}
+                  <a-tooltip placement="bottom">
+                    <template #title>
+                      <span>Sum within Time Range</span>
+                    </template>
+                    <InfoCircleOutlined />
+                  </a-tooltip>
+                </span>
+              </template>
+            </template>
+          </a-table>
         </div>
       </div>
     </a-card>