feat:折叠按钮样式修改

src/views/perfManage/goldTarget/index.vue

@@ -43,7 +43,7 @@ import saveAs from 'file-saver';
 import { generateColorRGBA } from '@/utils/generate-utils';
 import { OptionsType, WS } from '@/plugins/ws-websocket';
 import { useRoute } from 'vue-router';
-import { LineOutlined, InfoCircleOutlined, EyeOutlined, EyeInvisibleOutlined } from '@ant-design/icons-vue';
+import { LineOutlined, InfoCircleOutlined, EyeOutlined, EyeInvisibleOutlined, UpOutlined } from '@ant-design/icons-vue';
 import useLayoutStore from '@/store/modules/layout';
 import { SelectValue } from 'ant-design-vue/es/select';
 import type { DefaultOptionType } from 'ant-design-vue/es/select';
@@ -1770,6 +1770,17 @@ onBeforeUnmount(() => {
       <!-- 插槽-卡片左侧侧 -->
       <template #title>
         <a-space :size="8" align="center">
+          <a-button
+            v-show="!tableState.showTable"
+            type="default"
+            @click="toggleChartVisibility"
+            class="chart-toggle-btn"
+            :title="isChartVisible ? 'hide' : 'show'"
+          >
+            <DownOutlined v-if="isChartVisible"  />
+            <RightOutlined v-else />
+            <span style="margin-left: 4px;">{{ isChartVisible ? 'Expand Graph' : 'Collapse Graph' }}</span>
+          </a-button>
           <a-button
             type="primary"
             :loading="tableState.loading"
@@ -1868,17 +1879,6 @@ onBeforeUnmount(() => {
               size="small"
             />
           </a-form-item>
-          <a-button
-            v-show="!tableState.showTable"
-            type="primary"
-            @click="toggleChartVisibility"
-            class="chart-toggle-btn"
-            :title="isChartVisible ? 'hide' : 'show'"
-          >
-            <EyeOutlined v-if="isChartVisible" />
-            <EyeInvisibleOutlined v-else />
-            <span style="margin-left: 4px;">{{ isChartVisible ? 'Foldable the chart' : 'Expand the chart' }}</span>
-          </a-button>
         </a-form>
       </template>
 

src/views/perfManage/kpiCReport/index.vue

@@ -43,7 +43,7 @@ import { writeSheet } from '@/utils/execl-utils';
 import saveAs from 'file-saver';
 import { generateColorRGBA } from '@/utils/generate-utils';
 import { OptionsType, WS } from '@/plugins/ws-websocket';
-import { LineOutlined, InfoCircleOutlined, EyeOutlined, EyeInvisibleOutlined } from '@ant-design/icons-vue';
+import { LineOutlined, InfoCircleOutlined, EyeOutlined, EyeInvisibleOutlined, UpOutlined } from '@ant-design/icons-vue';
 import { useRoute } from 'vue-router';
 import dayjs, { Dayjs } from 'dayjs';
 import useLayoutStore from '@/store/modules/layout';
@@ -1194,6 +1194,17 @@ onBeforeUnmount(() => {
       <!-- 插槽-卡片左侧侧 -->
       <template #title>
         <a-space :size="8" align="center">
+          <a-button
+            v-show="!tableState.showTable"
+            type="default"
+            @click="toggleChartVisibility"
+            class="chart-toggle-btn"
+            :title="isChartVisible ? 'hide' : 'show'"
+          >
+            <DownOutlined v-if="isChartVisible"  />
+            <RightOutlined v-else />
+            <span style="margin-left: 4px;">{{ isChartVisible ? 'Expand Graph' : 'Collapse Graph' }}</span>
+          </a-button>
           <a-button
             type="primary"
             :loading="tableState.loading"
@@ -1292,17 +1303,6 @@ onBeforeUnmount(() => {
               size="small"
             />
           </a-form-item>
-          <a-button
-            v-show="!tableState.showTable"
-            type="primary"
-            @click="toggleChartVisibility"
-            class="chart-toggle-btn"
-            :title="isChartVisible ? 'hide' : 'show'"
-          >
-            <EyeOutlined v-if="isChartVisible" />
-            <EyeInvisibleOutlined v-else />
-            <span style="margin-left: 4px;">{{ isChartVisible ? 'Foldable the chart' : 'Expand the chart' }}</span>
-          </a-button>
         </a-form>
       </template>
 

src/views/perfManage/kpiOverView/index.vue

@@ -23,7 +23,7 @@ import dayjs from 'dayjs';
 import { OptionsType, WS } from '@/plugins/ws-websocket';
 import { generateColorRGBA } from '@/utils/generate-utils';
 import { parseSizeFromKbs } from '@/utils/parse-utils';
-import { LineOutlined, InfoCircleOutlined, EyeOutlined, EyeInvisibleOutlined } from '@ant-design/icons-vue';
+import { LineOutlined, InfoCircleOutlined, EyeOutlined, EyeInvisibleOutlined,UpOutlined } from '@ant-design/icons-vue';
 import { TableColumnType } from 'ant-design-vue';
 import useNeInfoStore from '@/store/modules/neinfo';
 const { t, currentLocale } = useI18n();
@@ -1417,18 +1417,28 @@ const tableRowConfig = computed(() => {
       >
         <a-switch v-model:checked="isRealtime" @change="toggleRealtime" />
       </a-form-item>
+<!--      <a-button-->
+<!--        type="primary"-->
+<!--        @click="toggleChartVisibility"-->
+<!--        class="chart-toggle-btn"-->
+<!--        :title="isChartVisible ? 'hide' : 'show'"-->
+<!--      >-->
+<!--        <DownOutlined v-if="isChartVisible"  />-->
+<!--        <UpOutlined v-else />-->
+<!--        <span style="margin-left: 4px;">{{ isChartVisible ? 'Foldable the chart' : 'Expand the chart' }}</span>-->
+<!--      </a-button>-->
+    </div>
+    <div class="chart-wrapper">
       <a-button
-        type="primary"
+        type="link"
         @click="toggleChartVisibility"
         class="chart-toggle-btn"
         :title="isChartVisible ? 'hide' : 'show'"
       >
-        <EyeOutlined v-if="isChartVisible"  />
+        <DownOutlined v-if="isChartVisible"  />
-        <EyeInvisibleOutlined v-else />
+        <RightOutlined v-else />
-        <span style="margin-left: 4px;">{{ isChartVisible ? 'Foldable the chart' : 'Expand the chart' }}</span>
+        <span style="margin-left: 4px;">{{ isChartVisible ? 'Expand Graph' : 'Collapse Graph' }}</span>
       </a-button>
-    </div>
-    <div class="chart-wrapper">
       <div
         id="chartContainer"
         class="chart-container"