项目初始化

2026-03-24 15:01:54 +08:00
parent dd3c29e5e5
commit fecfab97cc
13 changed files with 2616 additions and 2381 deletions
--- a/web-api/src/main/java/com/jeesite/modules/apps/Module/ChartConfig.java
+++ b/web-api/src/main/java/com/jeesite/modules/apps/Module/ChartConfig.java
@@ -0,0 +1,18 @@
+package com.jeesite.modules.apps.Module;
+
+import lombok.Data;
+
+import java.io.Serializable;
+
+@Data
+public class ChartConfig implements Serializable {
+
+    private Integer sort;
+    private String chartId;
+    private String oldChartId;
+    private String chartName;
+
+    private String chartCode;
+    private Integer oldSort;
+    private String color;
+}
--- a/web-api/src/main/java/com/jeesite/modules/apps/Module/ErpFlowParams.java
+++ b/web-api/src/main/java/com/jeesite/modules/apps/Module/ErpFlowParams.java
@@ -0,0 +1,15 @@
+package com.jeesite.modules.apps.Module;
+
+import lombok.Data;
+
+import java.io.Serializable;
+
+@Data
+public class ErpFlowParams implements Serializable {
+    private Integer pageNum;
+    private Integer pageSize;
+    private String accountId;
+    private String flowName;
+    private String flowType;
+    private String categoryId;
+}
--- a/web-api/src/main/java/com/jeesite/modules/apps/Module/PageResult.java
+++ b/web-api/src/main/java/com/jeesite/modules/apps/Module/PageResult.java
@@ -0,0 +1,23 @@
+package com.jeesite.modules.apps.Module;
+
+import lombok.Data;
+
+import java.io.Serializable;
+import java.util.List;
+
+@Data
+public class PageResult<T> implements Serializable {
+
+    private List<T> list; // 当前页数据
+    private Integer currentPage; // 当前页码
+    private Integer pageSize; // 每页条数
+    private Integer total; // 总记录数
+
+
+    public PageResult(List<T> list,Integer currentPage,Integer pageSize,Integer total){
+        this.list = list;
+        this.currentPage = currentPage;
+        this.pageSize = pageSize;
+        this.total = total;
+    }
+}
--- a/web-api/src/main/java/com/jeesite/modules/biz/web/MyChartInfoController.java
+++ b/web-api/src/main/java/com/jeesite/modules/biz/web/MyChartInfoController.java
@@ -2,6 +2,7 @@ package com.jeesite.modules.biz.web;

 import java.util.List;

+import com.jeesite.modules.apps.Module.ChartConfig;
 import jakarta.servlet.http.HttpServletRequest;
 import jakarta.servlet.http.HttpServletResponse;

@@ -154,4 +155,16 @@ public class MyChartInfoController extends BaseController {
    public List<MyChartInfo> listAll(MyChartInfo myChartInfo) {
        return myChartInfoService.findList(myChartInfo);
    }
+
+    /**
+     *
+     */
+    @RequestMapping(value = "setting")
+    @ResponseBody
+    public String setting(List<ChartConfig> configs) {
+        for (ChartConfig config : configs) {
+            System.out.println(config);
+        }
+        return renderResult(Global.TRUE, text("配置图表成功！"));
+    }
 }
--- a/web-api/src/main/java/com/jeesite/modules/erp/web/ErpTransactionFlowController.java
+++ b/web-api/src/main/java/com/jeesite/modules/erp/web/ErpTransactionFlowController.java
@@ -1,6 +1,10 @@
 package com.jeesite.modules.erp.web;

 import java.util.List;
+
+import com.jeesite.modules.apps.Module.ErpFlowParams;
+import com.jeesite.modules.apps.Module.PageResult;
+import com.jeesite.modules.utils.PageUtil;
 import jakarta.servlet.http.HttpServletRequest;
 import jakarta.servlet.http.HttpServletResponse;

@@ -26,6 +30,7 @@ import com.jeesite.modules.erp.service.ErpTransactionFlowService;

 /**
 * 收支流水 Controller
+ *
 * @author gaoxq
 * @version 2026-03-22
 */
@@ -98,7 +103,7 @@ public class ErpTransactionFlowController extends BaseController {
    public void exportData(ErpTransactionFlow erpTransactionFlow, HttpServletResponse response) {
        List<ErpTransactionFlow> list = erpTransactionFlowService.findList(erpTransactionFlow);
        String fileName = "流水" + DateUtils.getDate("yyyyMMddHHmmss") + ".xlsx";
-		try(ExcelExport ee = new ExcelExport("流水", ErpTransactionFlow.class)){
+        try (ExcelExport ee = new ExcelExport("流水", ErpTransactionFlow.class)) {
            ee.setDataList(list).write(response, fileName);
        }
    }
@@ -112,7 +117,7 @@ public class ErpTransactionFlowController extends BaseController {
        ErpTransactionFlow erpTransactionFlow = new ErpTransactionFlow();
        List<ErpTransactionFlow> list = ListUtils.newArrayList(erpTransactionFlow);
        String fileName = "流水模板.xlsx";
-		try(ExcelExport ee = new ExcelExport("流水", ErpTransactionFlow.class, Type.IMPORT)){
+        try (ExcelExport ee = new ExcelExport("流水", ErpTransactionFlow.class, Type.IMPORT)) {
            ee.setDataList(list).write(response, fileName);
        }
    }
@@ -126,9 +131,9 @@ public class ErpTransactionFlowController extends BaseController {
    public String importData(MultipartFile file) {
        try {
            String message = erpTransactionFlowService.importData(file);
-			return renderResult(Global.TRUE, "posfull:"+message);
+            return renderResult(Global.TRUE, "posfull:" + message);
        } catch (Exception ex) {
-			return renderResult(Global.FALSE, "posfull:"+ex.getMessage());
+            return renderResult(Global.FALSE, "posfull:" + ex.getMessage());
        }
    }

@@ -143,4 +148,21 @@ public class ErpTransactionFlowController extends BaseController {
        return renderResult(Global.TRUE, text("删除流水成功！"));
    }

+    @RequestMapping(value = "FlowList")
+    @ResponseBody
+    public PageResult<ErpTransactionFlow> getFlowList(ErpFlowParams erpFlowParams) {
+        ErpTransactionFlow erpTransactionFlow = new ErpTransactionFlow();
+        erpTransactionFlow.setFlowType(erpFlowParams.getFlowType());
+        erpTransactionFlow.setFlowName(erpFlowParams.getFlowName());
+        erpTransactionFlow.setAccountId(erpFlowParams.getAccountId());
+        erpTransactionFlow.setCategoryId(erpFlowParams.getCategoryId());
+        List<ErpTransactionFlow> list = erpTransactionFlowService.findList(erpTransactionFlow);
+        PageUtil<ErpTransactionFlow> util = new PageUtil<>(erpFlowParams.getPageNum(), erpFlowParams.getPageSize(), list);
+        return new PageResult<>(
+                util.OkData(),
+                util.getCurPage(),
+                util.getPageSize(),
+                util.getTotalCount()
+        );
+    }
 }
--- a/web-api/src/main/java/com/jeesite/modules/utils/PageUtil.java
+++ b/web-api/src/main/java/com/jeesite/modules/utils/PageUtil.java
@@ -0,0 +1,44 @@
+package com.jeesite.modules.utils;
+
+
+import lombok.Data;
+
+import java.io.Serializable;
+import java.util.ArrayList;
+import java.util.List;
+
+@Data
+public class PageUtil<T> implements Serializable {
+
+
+    private List<T> data;
+    private Integer curPage;// 当前页
+    private int totalCount;// 总条数
+    private int pageSize; // 每页显示的条数
+
+    //构造数据
+    public PageUtil(int curPage, int pageSize, List<T> data) {
+        this.data = data;
+        this.curPage = curPage;
+        this.pageSize = pageSize;
+        this.totalCount = data.size();
+    }
+
+    public int beginIndex(int pageSize, int curPage) {
+        return pageSize * (curPage - 1);
+    }
+
+    public int endIndex(int pageSize, int curPage) {
+        return (pageSize * curPage) - 1;
+    }
+
+    public List<T> OkData() {
+        List<T> list = new ArrayList<T>();
+        for (int i = beginIndex(pageSize, curPage); i <= endIndex(pageSize, curPage); i++) {
+            if (i < totalCount) {
+                list.add(data.get(i));
+            }
+        }
+        return list;
+    }
+}
--- a/web-vue/packages/biz/api/biz/myChartInfo.ts
+++ b/web-vue/packages/biz/api/biz/myChartInfo.ts
@@ -43,6 +43,9 @@ export const myChartInfoForm = (params?: MyChartInfo | any) =>
 export const myChartInfoSave = (params?: any, data?: MyChartInfo | any) =>
  defHttp.postJson<MyChartInfo>({ url: adminPath + '/biz/myChartInfo/save', params, data });

+export const myChartSetting = (params?: any, data?: MyChartInfo | any) =>
+  defHttp.postJson<MyChartInfo>({ url: adminPath + '/biz/myChartInfo/setting', params, data });
+
 export const myChartInfoImportData = (
  params: UploadFileParams,
  onUploadProgress: (progressEvent: AxiosProgressEvent) => void,
--- a/web-vue/packages/core/layouts/screen/setting/components/Erp.vue
+++ b/web-vue/packages/core/layouts/screen/setting/components/Erp.vue
@@ -7,8 +7,14 @@
            <div class="chart-top-inner">
              <h2>财务可视化大屏指标配置</h2>
              <div class="btn-group">
-                <el-button type="primary" size="default" @click="handleSave"
-                :loading="saveLoading" :disabled="saveLoading">保存</el-button>
+                <el-button
+                  type="primary"
+                  size="default"
+                  @click="handleSave"
+                  :loading="saveLoading"
+                  :disabled="saveLoading"
+                  >保存</el-button
+                >
                <el-button type="warning" size="default" @click="handleReset">重置</el-button>
                <el-button type="danger" size="default" @click="handleClearAll">清空</el-button>
              </div>
@@ -21,51 +27,39 @@
            <div class="work-col work-col-1-3">
              <div class="work-card full-height-card">
                <span v-if="metric1.length > 0" class="delete-icon" @click.stop="handleDeleteMetric(1)">×</span>
-                <div 
-                  class="grid-content" 
-                  @drop="(e) => handleDrop(e, 1)" 
-                  @dragover="(e) => e.preventDefault()"
-                >
+                <div class="grid-content" @drop="(e) => handleDrop(e, 1)" @dragover="(e) => e.preventDefault()">
                  <div v-if="metric1.length > 0" class="metric-tag">
-                    <span class="sort-num">指标{{1}}</span>
+                    <span class="sort-num">指标{{ 1 }}</span>
                    {{ metric1[0].chartName }}
-                    <small style="font-size:12px; color:#88a0c2;">ID: {{ metric1[0].chartId }}</small>
+                    <small style="font-size: 12px; color: #88a0c2">ID: {{ metric1[0].chartId }}</small>
                  </div>
-                  <div v-else class="empty-tip">拖拽指标到此处（指标{{1}}）</div>
+                  <div v-else class="empty-tip">拖拽指标到此处（指标{{ 1 }}）</div>
                </div>
              </div>
            </div>
            <div class="work-col work-col-1-3">
              <div class="work-card full-height-card">
                <span v-if="metric2.length > 0" class="delete-icon" @click.stop="handleDeleteMetric(2)">×</span>
-                <div 
-                  class="grid-content" 
-                  @drop="(e) => handleDrop(e, 2)" 
-                  @dragover="(e) => e.preventDefault()"
-                >
+                <div class="grid-content" @drop="(e) => handleDrop(e, 2)" @dragover="(e) => e.preventDefault()">
                  <div v-if="metric2.length > 0" class="metric-tag">
-                    <span class="sort-num">指标{{2}}</span>
+                    <span class="sort-num">指标{{ 2 }}</span>
                    {{ metric2[0].chartName }}
-                    <small style="font-size:12px; color:#88a0c2;">ID: {{ metric2[0].chartId }}</small>
+                    <small style="font-size: 12px; color: #88a0c2">ID: {{ metric2[0].chartId }}</small>
                  </div>
-                  <div v-else class="empty-tip">拖拽指标到此处（指标{{2}}）</div>
+                  <div v-else class="empty-tip">拖拽指标到此处（指标{{ 2 }}）</div>
                </div>
              </div>
            </div>
            <div class="work-col work-col-1-3">
              <div class="work-card full-height-card">
                <span v-if="metric3.length > 0" class="delete-icon" @click.stop="handleDeleteMetric(3)">×</span>
-                <div 
-                  class="grid-content" 
-                  @drop="(e) => handleDrop(e, 3)" 
-                  @dragover="(e) => e.preventDefault()"
-                >
+                <div class="grid-content" @drop="(e) => handleDrop(e, 3)" @dragover="(e) => e.preventDefault()">
                  <div v-if="metric3.length > 0" class="metric-tag">
-                    <span class="sort-num">指标{{3}}</span>
+                    <span class="sort-num">指标{{ 3 }}</span>
                    {{ metric3[0].chartName }}
-                    <small style="font-size:12px; color:#88a0c2;">ID: {{ metric3[0].chartId }}</small>
+                    <small style="font-size: 12px; color: #88a0c2">ID: {{ metric3[0].chartId }}</small>
                  </div>
-                  <div v-else class="empty-tip">拖拽指标到此处（指标{{3}}）</div>
+                  <div v-else class="empty-tip">拖拽指标到此处（指标{{ 3 }}）</div>
                </div>
              </div>
            </div>
@@ -76,34 +70,26 @@
                <div class="work-col work-col-1-2">
                  <div class="work-card full-height-card">
                    <span v-if="metric4.length > 0" class="delete-icon" @click.stop="handleDeleteMetric(4)">×</span>
-                    <div 
-                      class="grid-content" 
-                      @drop="(e) => handleDrop(e, 4)" 
-                      @dragover="(e) => e.preventDefault()"
-                    >
+                    <div class="grid-content" @drop="(e) => handleDrop(e, 4)" @dragover="(e) => e.preventDefault()">
                      <div v-if="metric4.length > 0" class="metric-tag">
-                        <span class="sort-num">指标{{4}}</span>
+                        <span class="sort-num">指标{{ 4 }}</span>
                        {{ metric4[0].chartName }}
-                        <small style="font-size:12px; color:#88a0c2;">ID: {{ metric4[0].chartId }}</small>
+                        <small style="font-size: 12px; color: #88a0c2">ID: {{ metric4[0].chartId }}</small>
                      </div>
-                      <div v-else class="empty-tip">拖拽指标到此处（指标{{4}}）</div>
+                      <div v-else class="empty-tip">拖拽指标到此处（指标{{ 4 }}）</div>
                    </div>
                  </div>
                </div>
                <div class="work-col work-col-1-2">
                  <div class="work-card full-height-card">
                    <span v-if="metric5.length > 0" class="delete-icon" @click.stop="handleDeleteMetric(5)">×</span>
-                    <div 
-                      class="grid-content" 
-                      @drop="(e) => handleDrop(e, 5)" 
-                      @dragover="(e) => e.preventDefault()"
-                    >
+                    <div class="grid-content" @drop="(e) => handleDrop(e, 5)" @dragover="(e) => e.preventDefault()">
                      <div v-if="metric5.length > 0" class="metric-tag">
-                        <span class="sort-num">指标{{5}}</span>
+                        <span class="sort-num">指标{{ 5 }}</span>
                        {{ metric5[0].chartName }}
-                        <small style="font-size:12px; color:#88a0c2;">ID: {{ metric5[0].chartId }}</small>
+                        <small style="font-size: 12px; color: #88a0c2">ID: {{ metric5[0].chartId }}</small>
                      </div>
-                      <div v-else class="empty-tip">拖拽指标到此处（指标{{5}}）</div>
+                      <div v-else class="empty-tip">拖拽指标到此处（指标{{ 5 }}）</div>
                    </div>
                  </div>
                </div>
@@ -112,17 +98,13 @@
            <div class="work-col work-col-1-2">
              <div class="work-card full-height-card">
                <span v-if="metric6.length > 0" class="delete-icon" @click.stop="handleDeleteMetric(6)">×</span>
-                <div 
-                  class="grid-content" 
-                  @drop="(e) => handleDrop(e, 6)" 
-                  @dragover="(e) => e.preventDefault()"
-                >
+                <div class="grid-content" @drop="(e) => handleDrop(e, 6)" @dragover="(e) => e.preventDefault()">
                  <div v-if="metric6.length > 0" class="metric-tag">
-                    <span class="sort-num">指标{{6}}</span>
+                    <span class="sort-num">指标{{ 6 }}</span>
                    {{ metric6[0].chartName }}
-                    <small style="font-size:12px; color:#88a0c2;">ID: {{ metric6[0].chartId }}</small>
+                    <small style="font-size: 12px; color: #88a0c2">ID: {{ metric6[0].chartId }}</small>
                  </div>
-                  <div v-else class="empty-tip">拖拽指标到此处（指标{{6}}）</div>
+                  <div v-else class="empty-tip">拖拽指标到此处（指标{{ 6 }}）</div>
                </div>
              </div>
            </div>
@@ -134,34 +116,26 @@
                <div class="work-col work-col-1-2">
                  <div class="work-card full-height-card">
                    <span v-if="metric7.length > 0" class="delete-icon" @click.stop="handleDeleteMetric(7)">×</span>
-                    <div 
-                      class="grid-content" 
-                      @drop="(e) => handleDrop(e, 7)" 
-                      @dragover="(e) => e.preventDefault()"
-                    >
+                    <div class="grid-content" @drop="(e) => handleDrop(e, 7)" @dragover="(e) => e.preventDefault()">
                      <div v-if="metric7.length > 0" class="metric-tag">
-                        <span class="sort-num">指标{{7}}</span>
+                        <span class="sort-num">指标{{ 7 }}</span>
                        {{ metric7[0].chartName }}
-                        <small style="font-size:12px; color:#88a0c2;">ID: {{ metric7[0].chartId }}</small>
+                        <small style="font-size: 12px; color: #88a0c2">ID: {{ metric7[0].chartId }}</small>
                      </div>
-                      <div v-else class="empty-tip">拖拽指标到此处（指标{{7}}）</div>
+                      <div v-else class="empty-tip">拖拽指标到此处（指标{{ 7 }}）</div>
                    </div>
                  </div>
                </div>
                <div class="work-col work-col-1-2">
                  <div class="work-card full-height-card">
                    <span v-if="metric8.length > 0" class="delete-icon" @click.stop="handleDeleteMetric(8)">×</span>
-                    <div 
-                      class="grid-content" 
-                      @drop="(e) => handleDrop(e, 8)" 
-                      @dragover="(e) => e.preventDefault()"
-                    >
+                    <div class="grid-content" @drop="(e) => handleDrop(e, 8)" @dragover="(e) => e.preventDefault()">
                      <div v-if="metric8.length > 0" class="metric-tag">
-                        <span class="sort-num">指标{{8}}</span>
+                        <span class="sort-num">指标{{ 8 }}</span>
                        {{ metric8[0].chartName }}
-                        <small style="font-size:12px; color:#88a0c2;">ID: {{ metric8[0].chartId }}</small>
+                        <small style="font-size: 12px; color: #88a0c2">ID: {{ metric8[0].chartId }}</small>
                      </div>
-                      <div v-else class="empty-tip">拖拽指标到此处（指标{{8}}）</div>
+                      <div v-else class="empty-tip">拖拽指标到此处（指标{{ 8 }}）</div>
                    </div>
                  </div>
                </div>
@@ -170,17 +144,13 @@
            <div class="work-col work-col-1-2">
              <div class="work-card full-height-card">
                <span v-if="metric9.length > 0" class="delete-icon" @click.stop="handleDeleteMetric(9)">×</span>
-                <div 
-                  class="grid-content" 
-                  @drop="(e) => handleDrop(e, 9)" 
-                  @dragover="(e) => e.preventDefault()"
-                >
+                <div class="grid-content" @drop="(e) => handleDrop(e, 9)" @dragover="(e) => e.preventDefault()">
                  <div v-if="metric9.length > 0" class="metric-tag">
-                    <span class="sort-num">指标{{9}}</span>
+                    <span class="sort-num">指标{{ 9 }}</span>
                    {{ metric9[0].chartName }}
-                    <small style="font-size:12px; color:#88a0c2;">ID: {{ metric9[0].chartId }}</small>
+                    <small style="font-size: 12px; color: #88a0c2">ID: {{ metric9[0].chartId }}</small>
                  </div>
-                  <div v-else class="empty-tip">拖拽指标到此处（指标{{9}}）</div>
+                  <div v-else class="empty-tip">拖拽指标到此处（指标{{ 9 }}）</div>
                </div>
              </div>
            </div>
@@ -212,35 +182,48 @@
 </template>

 <script lang="ts" setup name="ViewsBizMyScreenErpSetting">
-import { ref, computed, onMounted } from 'vue';
-import { ElMessage, ElButton, ElInput } from 'element-plus';
-import { MyChartInfo, myChartInfoListAll } from '@jeesite/biz/api/biz/myChartInfo';
+  import { ref, computed, onMounted } from 'vue';
+  import { ElMessage, ElButton, ElInput } from 'element-plus';
+  import { MyChartInfo, myChartSetting, myChartInfoListAll } from '@jeesite/biz/api/biz/myChartInfo';

-const metric1 = ref([]);
-const metric2 = ref([]);
-const metric3 = ref([]);
-const metric4 = ref([]);
-const metric5 = ref([]);
-const metric6 = ref([]);
-const metric7 = ref([]);
-const metric8 = ref([]);
-const metric9 = ref([]);
+  type MetricItem = MyChartInfo & {
+    oldSort?: number;
+    fixedOldChartId?: string | number | null;
+    oldChartId?: string | number | null;
+  };

-const gridOriginalChartId = ref({
-  1: null, 2: null, 3: null, 4: null,
-  5: null, 6: null, 7: null, 8: null, 9: null
-});
-const metricHistory = ref({});
+  const metric1 = ref<MetricItem[]>([]);
+  const metric2 = ref<MetricItem[]>([]);
+  const metric3 = ref<MetricItem[]>([]);
+  const metric4 = ref<MetricItem[]>([]);
+  const metric5 = ref<MetricItem[]>([]);
+  const metric6 = ref<MetricItem[]>([]);
+  const metric7 = ref<MetricItem[]>([]);
+  const metric8 = ref<MetricItem[]>([]);
+  const metric9 = ref<MetricItem[]>([]);

-const saveLoading = ref(false);
-const rawChartData = ref<MyChartInfo[]>();
-const searchKey = ref('');
-const dragItem = ref(null);
+  const gridOriginalChartId = ref({
+    1: null,
+    2: null,
+    3: null,
+    4: null,
+    5: null,
+    6: null,
+    7: null,
+    8: null,
+    9: null,
+  });
+  const metricHistory = ref({});

-const allMetricList = computed({
+  const saveLoading = ref(false);
+  const rawChartData = ref<MyChartInfo[]>([]);
+  const searchKey = ref('');
+  const dragItem = ref<MetricItem | null>(null);
+
+  const allMetricList = computed({
    get() {
      if (!rawChartData.value || !Array.isArray(rawChartData.value)) return [];
-    return rawChartData.value.filter(item => {
+      return rawChartData.value.filter((item) => {
        if (!item || !item.chartName) return false;
        const searchVal = searchKey.value ? searchKey.value.toLowerCase() : '';
        const nameVal = item.chartName ? item.chartName.toLowerCase() : '';
@@ -249,26 +232,21 @@ const allMetricList = computed({
    },
    set(val) {
      rawChartData.value = val;
-  }
-});
+    },
+  });

-const getAllMetricArrays = () => ([
-  metric1, metric2, metric3, metric4, 
-  metric5, metric6, metric7, metric8, metric9
-]);
+  const getAllMetricArrays = () => [metric1, metric2, metric3, metric4, metric5, metric6, metric7, metric8, metric9];

-const getMetricArrByGridNum = (gridNum) => {
+  const getMetricArrByGridNum = (gridNum: number) => {
    return getAllMetricArrays()[gridNum - 1];
-};
+  };

-const isMetricUsed = (metricId) => {
+  const isMetricUsed = (metricId: string) => {
    if (!metricId) return false;
-  return getAllMetricArrays().some(
-    metricArr => metricArr.value.some(m => m && m.chartId === metricId)
-  );
-};
+    return getAllMetricArrays().some((metricArr) => metricArr.value.some((m) => m && m.chartId === metricId));
+  };

-const findGridNumByChartId = (chartId) => {
+  const findGridNumByChartId = (chartId: string) => {
    const arr = getAllMetricArrays();
    for (let i = 0; i < arr.length; i++) {
      if (arr[i].value.length && arr[i].value[0].chartId === chartId) {
@@ -276,19 +254,19 @@ const findGridNumByChartId = (chartId) => {
      }
    }
    return null;
-};
+  };

-const handleDragStart = (e, item) => {
+  const handleDragStart = (e, item) => {
    dragItem.value = item;
    e.dataTransfer.setData('text/plain', JSON.stringify(item));
    e.target.style.opacity = '0.6';
-};
+  };

-const handleDragEnd = (e) => {
+  const handleDragEnd = (e) => {
    e.target.style.opacity = '1';
-};
+  };

-const handleDrop = (e, gridNum) => {
+  const handleDrop = (e, gridNum) => {
    e.preventDefault();
    if (!dragItem.value) return;
    const targetArr = getMetricArrByGridNum(gridNum);
@@ -300,7 +278,7 @@ const handleDrop = (e, gridNum) => {

    getAllMetricArrays().forEach((arr, index) => {
      const pos = index + 1;
-    if (pos !== gridNum && arr.value.some(item => item.chartId === currentChartId)) {
+      if (pos !== gridNum && arr.value.some((item) => item.chartId === currentChartId)) {
        arr.value = [];
      }
    });
@@ -313,36 +291,37 @@ const handleDrop = (e, gridNum) => {
      sort: gridNum,
      oldSort: oldSort,
      fixedOldChartId: oldChartId,
-    oldChartId: oldChartId
+      oldChartId: oldChartId,
    };

    targetArr.value = [newItem];
    metricHistory.value[currentChartId] = gridNum;
    dragItem.value = null;
-};
+  };

-const handleDeleteMetric = (gridNum) => {
+  const handleDeleteMetric = (gridNum: any) => {
    const targetArr = getMetricArrByGridNum(gridNum);
    if (targetArr) {
      targetArr.value = [];
    }
-};
+  };

-const handleReset = () => {
-  getAllMetricArrays().forEach(arr => arr.value = []);
+  const handleReset = () => {
+    getAllMetricArrays().forEach((arr) => (arr.value = []));
    searchKey.value = '';
    getChartList();
    ElMessage.info('已重置所有指标');
-};
+  };

-const handleClearAll = () => {
-  getAllMetricArrays().forEach(arr => arr.value = []);
+  const handleClearAll = () => {
+    getAllMetricArrays().forEach((arr) => (arr.value = []));
    ElMessage.info('已清空所有格子');
-};
+  };

-const handleSave = async () => {
+  const handleSave = async () => {
    saveLoading.value = true;
-  const saveData = getAllMetricArrays().map((arr, index) => {
+    const saveData = getAllMetricArrays()
+      .map((arr, index) => {
        const gridNum = index + 1;
        const currentItem = arr.value[0];
        return {
@@ -352,13 +331,15 @@ const handleSave = async () => {
          chartName: currentItem?.chartName || '',
          chartCode: 'erp',
          oldSort: currentItem?.oldSort || gridNum,
-      color: currentItem?.color || ''
+          color: currentItem?.color || '',
        };
-  }).filter(item => item.chartId);
+      })
+      .filter((item) => item.chartId);

    try {
-    const res = await getChartSetting(saveData);
-    ElMessage.success(res?.msg);
+		console.log(saveData);
+      // const res = await myChartSetting(saveData);
+      // ElMessage.success(res?.msg);
      return saveData;
    } catch (error) {
      console.error('保存失败：', error);
@@ -366,37 +347,39 @@ const handleSave = async () => {
      getChartList();
      saveLoading.value = false;
    }
-};
+  };

-const getRandomColor = () => {
+  const getRandomColor = () => {
    const colors = ['#3c9cff', '#5ac8fa', '#9254de', '#f7ba2a', '#ff7d00', '#23c8c8', '#ff6b6b', '#86909c', '#7b68ee'];
    return colors[Math.floor(Math.random() * colors.length)];
-};
+  };

-async function getChartList() {
+  async function getChartList() {
    try {
      const reqParams = { chartCode: 'erp' };
      const res = await myChartInfoListAll(reqParams);
      rawChartData.value = res || [];

      metricHistory.value = {};
-    Object.keys(gridOriginalChartId.value).forEach(key => {
+      Object.keys(gridOriginalChartId.value).forEach((key) => {
        gridOriginalChartId.value[key] = null;
      });

-    rawChartData.value.forEach(item => {
+      rawChartData.value.forEach((item) => {
        const sortNum = item.sort || 0;
        if (sortNum >= 1 && sortNum <= 9) {
          const targetArr = getMetricArrByGridNum(sortNum);
          if (targetArr) {
            gridOriginalChartId.value[sortNum] = item.chartId;
-          targetArr.value = [{
+            targetArr.value = [
+              {
                ...item,
                sort: sortNum,
                oldSort: 0,
                fixedOldChartId: item.chartId,
-            oldChartId: item.chartId
-          }];
+                oldChartId: item.chartId,
+              },
+            ];
            metricHistory.value[item.chartId] = sortNum;
          }
        }
@@ -405,15 +388,15 @@ async function getChartList() {
      console.error('获取数据失败:', error);
      rawChartData.value = [];
    }
-}
+  }

-onMounted(async () => {
+  onMounted(async () => {
    await getChartList();
-});
+  });
 </script>

 <style scoped>
-.work-layout-container {
+  .work-layout-container {
    width: 100%;
    height: 100%;
    display: flex;
@@ -424,26 +407,26 @@ onMounted(async () => {
    box-sizing: border-box;
    background-color: #0a1a33;
    overflow: hidden;
-}
+  }

-.main-wrapper {
+  .main-wrapper {
    display: flex;
    width: 100%;
    height: 100%;
    gap: 2px;
    box-sizing: border-box;
-}
+  }

-.left-area {
+  .left-area {
    width: calc(85% - 1px);
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 2px;
    box-sizing: border-box;
-}
+  }

-.right-area {
+  .right-area {
    width: calc(15% - 1px);
    height: 100%;
    background-color: rgba(15, 52, 96, 0.5);
@@ -454,49 +437,49 @@ onMounted(async () => {
    flex-direction: column;
    box-sizing: border-box;
    overflow: hidden;
-}
+  }

-.work-top-header {
+  .work-top-header {
    height: calc(6% - 1px);
    box-sizing: border-box;
-}
+  }

-.work-main-section {
+  .work-main-section {
    height: calc(94% - 1px);
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2px;
    box-sizing: border-box;
-}
+  }

-.layout-row {
+  .layout-row {
    width: 100%;
    display: flex;
    gap: 2px;
    box-sizing: border-box;
    height: calc(100% / 3);
-}
+  }

-.work-col-1-3 {
+  .work-col-1-3 {
    width: calc(100% / 3);
    box-sizing: border-box;
-}
+  }

-.work-col-1-2 {
+  .work-col-1-2 {
    width: calc(100% / 2);
    box-sizing: border-box;
-}
+  }

-.inner-layout.double-col-horizontal {
+  .inner-layout.double-col-horizontal {
    width: 100%;
    height: 100%;
    display: flex;
    gap: 2px;
    box-sizing: border-box;
-}
+  }

-.full-height-card {
+  .full-height-card {
    width: 100%;
    height: 100%;
    background-color: rgba(15, 52, 96, 0.3);
@@ -510,16 +493,16 @@ onMounted(async () => {
    color: #e0e6ff;
    overflow: hidden;
    position: relative;
-}
+  }

-.work-section {
+  .work-section {
    width: 100%;
    display: flex;
    gap: 2px;
    box-sizing: border-box;
-}
+  }

-.chart-top-inner {
+  .chart-top-inner {
    width: 100%;
    height: 100%;
    display: flex;
@@ -528,28 +511,28 @@ onMounted(async () => {
    padding: 0 16px;
    color: #e0e6ff;
    box-sizing: border-box;
-}
+  }

-.chart-top-inner h2 {
+  .chart-top-inner h2 {
    font-size: 16px;
    margin: 0;
    font-weight: 600;
-}
+  }

-.btn-group {
+  .btn-group {
    display: flex;
    gap: 8px;
-}
+  }

-.work-col {
+  .work-col {
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 2px;
-}
+  }

-.work-card {
+  .work-card {
    width: 100%;
    background-color: rgba(15, 52, 96, 0.3);
    border: 1px solid #1a508b;
@@ -562,15 +545,15 @@ onMounted(async () => {
    color: #e0e6ff;
    overflow: hidden;
    position: relative;
-}
+  }

-.full-card {
+  .full-card {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
-}
+  }

-.delete-icon {
+  .delete-icon {
    position: absolute;
    top: 6px;
    right: 6px;
@@ -586,14 +569,14 @@ onMounted(async () => {
    background-color: rgba(255, 107, 107, 0.1);
    z-index: 10;
    transition: all 0.2s ease;
-}
+  }

-.delete-icon:hover {
+  .delete-icon:hover {
    background-color: rgba(255, 107, 107, 0.3);
    transform: scale(1.1);
-}
+  }

-.grid-content {
+  .grid-content {
    width: 100%;
    height: 100%;
    display: flex;
@@ -602,9 +585,9 @@ onMounted(async () => {
    padding: 8px;
    box-sizing: border-box;
    cursor: drop;
-}
+  }

-.metric-tag {
+  .metric-tag {
    padding: 0;
    background: none;
    color: #e0e6ff;
@@ -614,16 +597,16 @@ onMounted(async () => {
    display: flex;
    flex-direction: column;
    align-items: center;
-}
+  }

-.sort-num {
+  .sort-num {
    font-size: 14px;
    color: #88a0c2;
    margin-bottom: 4px;
    display: block;
-}
+  }

-.empty-tip {
+  .empty-tip {
    position: absolute;
    top: 50%;
    left: 50%;
@@ -631,41 +614,41 @@ onMounted(async () => {
    color: #88a0c2;
    font-size: 14px;
    pointer-events: none;
-}
+  }

-.search-box {
+  .search-box {
    padding: 4px 0;
    margin-bottom: 8px;
    box-sizing: border-box;
-}
+  }

-.metric-list {
+  .metric-list {
    flex: 1;
    overflow-y: auto;
    padding: 4px;
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: rgba(60, 156, 255, 0.2) transparent;
-}
+  }

-.metric-list::-webkit-scrollbar {
+  .metric-list::-webkit-scrollbar {
    width: 1px;
-}
+  }

-.metric-list::-webkit-scrollbar-track {
+  .metric-list::-webkit-scrollbar-track {
    background: transparent;
-}
+  }

-.metric-list::-webkit-scrollbar-thumb {
+  .metric-list::-webkit-scrollbar-thumb {
    background: rgba(60, 156, 255, 0.2);
    border-radius: 0.5px;
-}
+  }

-.metric-list::-webkit-scrollbar-thumb:hover {
+  .metric-list::-webkit-scrollbar-thumb:hover {
    background: rgba(60, 156, 255, 0.4);
-}
+  }

-.metric-item {
+  .metric-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
@@ -677,21 +660,21 @@ onMounted(async () => {
    font-size: 14px;
    box-sizing: border-box;
    transition: all 0.2s ease;
-}
+  }

-.metric-item.active {
+  .metric-item.active {
    background-color: rgba(60, 156, 255, 0.3);
    border: 1px solid #3c9cff;
-}
+  }

-.metric-item:hover {
+  .metric-item:hover {
    background-color: rgba(60, 156, 255, 0.15);
-}
+  }

-.color-dot {
+  .color-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-left: 6px;
-}
+  }
 </style>
--- a/web-vue/packages/core/layouts/screen/setting/components/Home.vue
+++ b/web-vue/packages/core/layouts/screen/setting/components/Home.vue
@@ -7,8 +7,14 @@
            <div class="chart-top-inner">
              <h2>首页可视化大屏指标配置</h2>
              <div class="btn-group">
-                <el-button type="primary" size="default" @click="handleSave"
-                :loading="saveLoading" :disabled="saveLoading">保存</el-button>
+                <el-button
+                  type="primary"
+                  size="default"
+                  @click="handleSave"
+                  :loading="saveLoading"
+                  :disabled="saveLoading"
+                  >保存</el-button
+                >
                <el-button type="warning" size="default" @click="handleReset">重置</el-button>
                <el-button type="danger" size="default" @click="handleClearAll">清空</el-button>
              </div>
@@ -23,11 +29,11 @@
                <span v-if="metric1.length > 0" class="delete-icon" @click.stop="handleDeleteMetric(1)">×</span>
                <div class="grid-content" @drop="(e) => handleDrop(e, 1)" @dragover="(e) => e.preventDefault()">
                  <div v-if="metric1.length > 0" class="metric-tag">
-                    <span class="sort-num">指标{{1}}</span>
+                    <span class="sort-num">指标{{ 1 }}</span>
                    {{ metric1[0].chartName }}
-                    <small style="font-size:12px; color:#88a0c2;">ID: {{ metric1[0].chartId }}</small>
+                    <small style="font-size: 12px; color: #88a0c2">ID: {{ metric1[0].chartId }}</small>
                  </div>
-                  <div v-else class="empty-tip">拖拽指标到此处（指标{{1}}）</div>
+                  <div v-else class="empty-tip">拖拽指标到此处（指标{{ 1 }}）</div>
                </div>
              </div>
            </div>
@@ -36,11 +42,11 @@
                <span v-if="metric2.length > 0" class="delete-icon" @click.stop="handleDeleteMetric(2)">×</span>
                <div class="grid-content" @drop="(e) => handleDrop(e, 2)" @dragover="(e) => e.preventDefault()">
                  <div v-if="metric2.length > 0" class="metric-tag">
-                    <span class="sort-num">指标{{2}}</span>
+                    <span class="sort-num">指标{{ 2 }}</span>
                    {{ metric2[0].chartName }}
-                    <small style="font-size:12px; color:#88a0c2;">ID: {{ metric2[0].chartId }}</small>
+                    <small style="font-size: 12px; color: #88a0c2">ID: {{ metric2[0].chartId }}</small>
                  </div>
-                  <div v-else class="empty-tip">拖拽指标到此处（指标{{2}}）</div>
+                  <div v-else class="empty-tip">拖拽指标到此处（指标{{ 2 }}）</div>
                </div>
              </div>
            </div>
@@ -49,11 +55,11 @@
                <span v-if="metric3.length > 0" class="delete-icon" @click.stop="handleDeleteMetric(3)">×</span>
                <div class="grid-content" @drop="(e) => handleDrop(e, 3)" @dragover="(e) => e.preventDefault()">
                  <div v-if="metric3.length > 0" class="metric-tag">
-                    <span class="sort-num">指标{{3}}</span>
+                    <span class="sort-num">指标{{ 3 }}</span>
                    {{ metric3[0].chartName }}
-                    <small style="font-size:12px; color:#88a0c2;">ID: {{ metric3[0].chartId }}</small>
+                    <small style="font-size: 12px; color: #88a0c2">ID: {{ metric3[0].chartId }}</small>
                  </div>
-                  <div v-else class="empty-tip">拖拽指标到此处（指标{{3}}）</div>
+                  <div v-else class="empty-tip">拖拽指标到此处（指标{{ 3 }}）</div>
                </div>
              </div>
            </div>
@@ -65,11 +71,11 @@
                <span v-if="metric4.length > 0" class="delete-icon" @click.stop="handleDeleteMetric(4)">×</span>
                <div class="grid-content" @drop="(e) => handleDrop(e, 4)" @dragover="(e) => e.preventDefault()">
                  <div v-if="metric4.length > 0" class="metric-tag">
-                    <span class="sort-num">指标{{4}}</span>
+                    <span class="sort-num">指标{{ 4 }}</span>
                    {{ metric4[0].chartName }}
-                    <small style="font-size:12px; color:#88a0c2;">ID: {{ metric4[0].chartId }}</small>
+                    <small style="font-size: 12px; color: #88a0c2">ID: {{ metric4[0].chartId }}</small>
                  </div>
-                  <div v-else class="empty-tip">拖拽指标到此处（指标{{4}}）</div>
+                  <div v-else class="empty-tip">拖拽指标到此处（指标{{ 4 }}）</div>
                </div>
              </div>
            </div>
@@ -78,11 +84,11 @@
                <span v-if="metric5.length > 0" class="delete-icon" @click.stop="handleDeleteMetric(5)">×</span>
                <div class="grid-content" @drop="(e) => handleDrop(e, 5)" @dragover="(e) => e.preventDefault()">
                  <div v-if="metric5.length > 0" class="metric-tag">
-                    <span class="sort-num">指标{{5}}</span>
+                    <span class="sort-num">指标{{ 5 }}</span>
                    {{ metric5[0].chartName }}
-                    <small style="font-size:12px; color:#88a0c2;">ID: {{ metric5[0].chartId }}</small>
+                    <small style="font-size: 12px; color: #88a0c2">ID: {{ metric5[0].chartId }}</small>
                  </div>
-                  <div v-else class="empty-tip">拖拽指标到此处（指标{{5}}）</div>
+                  <div v-else class="empty-tip">拖拽指标到此处（指标{{ 5 }}）</div>
                </div>
              </div>
            </div>
@@ -94,11 +100,11 @@
                <span v-if="metric6.length > 0" class="delete-icon" @click.stop="handleDeleteMetric(6)">×</span>
                <div class="grid-content" @drop="(e) => handleDrop(e, 6)" @dragover="(e) => e.preventDefault()">
                  <div v-if="metric6.length > 0" class="metric-tag">
-                    <span class="sort-num">指标{{6}}</span>
+                    <span class="sort-num">指标{{ 6 }}</span>
                    {{ metric6[0].chartName }}
-                    <small style="font-size:12px; color:#88a0c2;">ID: {{ metric6[0].chartId }}</small>
+                    <small style="font-size: 12px; color: #88a0c2">ID: {{ metric6[0].chartId }}</small>
                  </div>
-                  <div v-else class="empty-tip">拖拽指标到此处（指标{{6}}）</div>
+                  <div v-else class="empty-tip">拖拽指标到此处（指标{{ 6 }}）</div>
                </div>
              </div>
            </div>
@@ -107,11 +113,11 @@
                <span v-if="metric7.length > 0" class="delete-icon" @click.stop="handleDeleteMetric(7)">×</span>
                <div class="grid-content" @drop="(e) => handleDrop(e, 7)" @dragover="(e) => e.preventDefault()">
                  <div v-if="metric7.length > 0" class="metric-tag">
-                    <span class="sort-num">指标{{7}}</span>
+                    <span class="sort-num">指标{{ 7 }}</span>
                    {{ metric7[0].chartName }}
-                    <small style="font-size:12px; color:#88a0c2;">ID: {{ metric7[0].chartId }}</small>
+                    <small style="font-size: 12px; color: #88a0c2">ID: {{ metric7[0].chartId }}</small>
                  </div>
-                  <div v-else class="empty-tip">拖拽指标到此处（指标{{7}}）</div>
+                  <div v-else class="empty-tip">拖拽指标到此处（指标{{ 7 }}）</div>
                </div>
              </div>
            </div>
@@ -124,7 +130,15 @@
          <el-input v-model="searchKey" placeholder="搜索指标项..." size="default"></el-input>
        </div>
        <div class="metric-list">
-          <div v-for="item in allMetricList" :key="item.chartId" class="metric-item" :class="{ active: isMetricUsed(item.chartId) }" draggable="true" @dragstart="(e) => handleDragStart(e, item)" @dragend="handleDragEnd">
+          <div
+            v-for="item in allMetricList"
+            :key="item.chartId"
+            class="metric-item"
+            :class="{ active: isMetricUsed(item.chartId) }"
+            draggable="true"
+            @dragstart="(e) => handleDragStart(e, item)"
+            @dragend="handleDragEnd"
+          >
            <span>{{ item.chartName }}</span>
            <span class="color-dot" :style="{ backgroundColor: item.color || getRandomColor() }"></span>
          </div>
@@ -135,33 +149,43 @@
 </template>

 <script lang="ts" setup name="ViewsBizMyScreenHomeSetting">
-import { ref, computed, onMounted } from 'vue';
-import { ElMessage, ElButton, ElInput } from 'element-plus';
-import { MyChartInfo, myChartInfoListAll } from '@jeesite/biz/api/biz/myChartInfo';
+  import { ref, computed, onMounted } from 'vue';
+  import { ElMessage, ElButton, ElInput } from 'element-plus';
+  import { MyChartInfo, myChartSetting, myChartInfoListAll } from '@jeesite/biz/api/biz/myChartInfo';

-const metric1 = ref([]);
-const metric2 = ref([]);
-const metric3 = ref([]);
-const metric4 = ref([]);
-const metric5 = ref([]);
-const metric6 = ref([]);
-const metric7 = ref([]);
+  type MetricItem = MyChartInfo & {
+    oldSort?: number;
+    oldChartId?: string | number | null;
+  };

-const gridOriginalChartId = ref({
-  1: null, 2: null, 3: null,
-  4: null, 5: null, 6: null, 7: null
-});
-const metricHistory = ref({});
+  const metric1 = ref<MetricItem[]>([]);
+  const metric2 = ref<MetricItem[]>([]);
+  const metric3 = ref<MetricItem[]>([]);
+  const metric4 = ref<MetricItem[]>([]);
+  const metric5 = ref<MetricItem[]>([]);
+  const metric6 = ref<MetricItem[]>([]);
+  const metric7 = ref<MetricItem[]>([]);

-const saveLoading = ref(false);
-const rawChartData = ref<MyChartInfo[]>();
-const searchKey = ref('');
-const dragItem = ref(null);
+  const gridOriginalChartId = ref({
+    1: null,
+    2: null,
+    3: null,
+    4: null,
+    5: null,
+    6: null,
+    7: null,
+  });
+  const metricHistory = ref({});

-const allMetricList = computed({
+  const saveLoading = ref(false);
+  const rawChartData = ref<MyChartInfo[]>([]);
+  const searchKey = ref('');
+  const dragItem = ref<MetricItem | null>(null);
+
+  const allMetricList = computed({
    get() {
      if (!rawChartData.value || !Array.isArray(rawChartData.value)) return [];
-    return rawChartData.value.filter(item => {
+      return rawChartData.value.filter((item) => {
        if (!item || !item.chartName) return false;
        const searchVal = searchKey.value ? searchKey.value.toLowerCase() : '';
        const nameVal = item.chartName ? item.chartName.toLowerCase() : '';
@@ -170,26 +194,21 @@ const allMetricList = computed({
    },
    set(val) {
      rawChartData.value = val;
-  }
-});
+    },
+  });

-const getAllMetricArrays = () => ([
-  metric1, metric2, metric3,
-  metric4, metric5, metric6, metric7
-]);
+  const getAllMetricArrays = () => [metric1, metric2, metric3, metric4, metric5, metric6, metric7];

-const getMetricArrByGridNum = (gridNum) => {
+  const getMetricArrByGridNum = (gridNum: number) => {
    return getAllMetricArrays()[gridNum - 1];
-};
+  };

-const isMetricUsed = (metricId) => {
+  const isMetricUsed = (metricId: any) => {
    if (!metricId) return false;
-  return getAllMetricArrays().some(
-    metricArr => metricArr.value.some(m => m && m.chartId === metricId)
-  );
-};
+    return getAllMetricArrays().some((metricArr) => metricArr.value.some((m) => m && m.chartId === metricId));
+  };

-const findGridNumByChartId = (chartId) => {
+  const findGridNumByChartId = (chartId: any) => {
    const arr = getAllMetricArrays();
    for (let i = 0; i < arr.length; i++) {
      if (arr[i].value.length && arr[i].value[0].chartId === chartId) {
@@ -197,19 +216,19 @@ const findGridNumByChartId = (chartId) => {
      }
    }
    return null;
-};
+  };

-const handleDragStart = (e, item) => {
+  const handleDragStart = (e, item) => {
    dragItem.value = item;
    e.dataTransfer.setData('text/plain', JSON.stringify(item));
    e.target.style.opacity = '0.6';
-};
+  };

-const handleDragEnd = (e) => {
+  const handleDragEnd = (e) => {
    e.target.style.opacity = '1';
-};
+  };

-const handleDrop = (e, targetGrid) => {
+  const handleDrop = (e, targetGrid) => {
    e.preventDefault();
    if (!dragItem.value) return;

@@ -222,7 +241,7 @@ const handleDrop = (e, targetGrid) => {
    getAllMetricArrays().forEach((arr, index) => {
      const gridNum = index + 1;
      if (gridNum !== targetGrid) {
-      arr.value = arr.value.filter(i => i.chartId !== dragChartId);
+        arr.value = arr.value.filter((i) => i.chartId !== dragChartId);
      }
    });

@@ -240,30 +259,31 @@ const handleDrop = (e, targetGrid) => {
      sourceArr.value = [];
    }
    dragItem.value = null;
-};
+  };

-const handleDeleteMetric = (gridNum) => {
+  const handleDeleteMetric = (gridNum) => {
    const targetArr = getMetricArrByGridNum(gridNum);
    if (targetArr) {
      targetArr.value = [];
    }
-};
+  };

-const handleReset = () => {
-  getAllMetricArrays().forEach(arr => arr.value = []);
+  const handleReset = () => {
+    getAllMetricArrays().forEach((arr) => (arr.value = []));
    searchKey.value = '';
    getChartList();
    ElMessage.info('已重置所有指标');
-};
+  };

-const handleClearAll = () => {
-  getAllMetricArrays().forEach(arr => arr.value = []);
+  const handleClearAll = () => {
+    getAllMetricArrays().forEach((arr) => (arr.value = []));
    ElMessage.info('已清空所有格子');
-};
+  };

-const handleSave = async () => {
+  const handleSave = async () => {
    saveLoading.value = true;
-  const saveData = getAllMetricArrays().map((arr, index) => {
+    const saveData = getAllMetricArrays()
+      .map((arr, index) => {
        const gridNum = index + 1;
        const currentItem = arr.value[0];
        return {
@@ -273,12 +293,13 @@ const handleSave = async () => {
          chartName: currentItem?.chartName || '',
          chartCode: 'home',
          oldSort: currentItem?.oldSort || gridNum,
-      color: currentItem?.color || ''
+          color: currentItem?.color || '',
        };
-  }).filter(item => item.chartId);
+      })
+      .filter((item) => item.chartId);

    try {
-    const res = await getChartSetting(saveData);
+      const res = await myChartSetting(saveData);
      ElMessage.success(res?.msg);
      return saveData;
    } catch (error) {
@@ -287,35 +308,37 @@ const handleSave = async () => {
      getChartList();
      saveLoading.value = false;
    }
-};
+  };

-const getRandomColor = () => {
+  const getRandomColor = () => {
    const colors = ['#3c9cff', '#5ac8fa', '#9254de', '#f7ba2a', '#ff7d00', '#23c8c8', '#ff6b6b'];
    return colors[Math.floor(Math.random() * colors.length)];
-};
+  };

-async function getChartList() {
+  async function getChartList() {
    try {
      const reqParams = { chartCode: 'home' };
      const res = await myChartInfoListAll(reqParams);
      rawChartData.value = res || [];
      metricHistory.value = {};
-    Object.keys(gridOriginalChartId.value).forEach(key => {
+      Object.keys(gridOriginalChartId.value).forEach((key) => {
        gridOriginalChartId.value[key] = null;
      });
-    rawChartData.value.forEach(item => {
+      rawChartData.value.forEach((item) => {
        const sortNum = item.sort || 0;
        if (sortNum >= 1 && sortNum <= 7) {
          const targetArr = getMetricArrByGridNum(sortNum);
          if (targetArr) {
            gridOriginalChartId.value[sortNum] = item.chartId;
-          targetArr.value = [{
+            targetArr.value = [
+              {
                ...item,
                sort: sortNum,
                oldSort: 0,
                chartId: item.chartId,
-            oldChartId: item.chartId
-          }];
+                oldChartId: item.chartId,
+              },
+            ];
            metricHistory.value[item.chartId] = sortNum;
          }
        }
@@ -324,15 +347,15 @@ async function getChartList() {
      console.error('获取数据失败:', error);
      rawChartData.value = [];
    }
-}
+  }

-onMounted(async () => {
+  onMounted(async () => {
    await getChartList();
-});
+  });
 </script>

 <style scoped>
-.work-layout-container {
+  .work-layout-container {
    width: 100%;
    height: 100%;
    display: flex;
@@ -343,26 +366,26 @@ onMounted(async () => {
    box-sizing: border-box;
    background-color: #0a1a33;
    overflow: hidden;
-}
+  }

-.main-wrapper {
+  .main-wrapper {
    display: flex;
    width: 100%;
    height: 100%;
    gap: 2px;
    box-sizing: border-box;
-}
+  }

-.left-area {
+  .left-area {
    width: calc(85% - 1px);
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 2px;
    box-sizing: border-box;
-}
+  }

-.right-area {
+  .right-area {
    width: calc(15% - 1px);
    height: 100%;
    background-color: rgba(15, 52, 96, 0.5);
@@ -373,41 +396,41 @@ onMounted(async () => {
    flex-direction: column;
    box-sizing: border-box;
    overflow: hidden;
-}
+  }

-.work-top-header {
+  .work-top-header {
    height: calc(6% - 1px);
    box-sizing: border-box;
-}
+  }

-.work-main-section {
+  .work-main-section {
    height: calc(94% - 1px);
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2px;
    box-sizing: border-box;
-}
+  }

-.layout-row {
+  .layout-row {
    width: 100%;
    display: flex;
    gap: 2px;
    box-sizing: border-box;
    height: calc(100% / 3);
-}
+  }

-.work-col-1-3 {
+  .work-col-1-3 {
    width: calc((100% - 4px) / 3);
    box-sizing: border-box;
-}
+  }

-.work-col-1-2 {
+  .work-col-1-2 {
    width: calc((100% - 2px) / 2);
    box-sizing: border-box;
-}
+  }

-.full-height-card {
+  .full-height-card {
    width: 100%;
    height: 100%;
    background-color: rgba(15, 52, 96, 0.3);
@@ -421,16 +444,16 @@ onMounted(async () => {
    color: #e0e6ff;
    overflow: hidden;
    position: relative;
-}
+  }

-.work-section {
+  .work-section {
    width: 100%;
    display: flex;
    gap: 2px;
    box-sizing: border-box;
-}
+  }

-.chart-top-inner {
+  .chart-top-inner {
    width: 100%;
    height: 100%;
    display: flex;
@@ -439,28 +462,28 @@ onMounted(async () => {
    padding: 0 16px;
    color: #e0e6ff;
    box-sizing: border-box;
-}
+  }

-.chart-top-inner h2 {
+  .chart-top-inner h2 {
    font-size: 16px;
    margin: 0;
    font-weight: 600;
-}
+  }

-.btn-group {
+  .btn-group {
    display: flex;
    gap: 8px;
-}
+  }

-.work-col {
+  .work-col {
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 2px;
-}
+  }

-.work-card {
+  .work-card {
    width: 100%;
    background-color: rgba(15, 52, 96, 0.3);
    border: 1px solid #1a508b;
@@ -473,15 +496,15 @@ onMounted(async () => {
    color: #e0e6ff;
    overflow: hidden;
    position: relative;
-}
+  }

-.full-card {
+  .full-card {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
-}
+  }

-.delete-icon {
+  .delete-icon {
    position: absolute;
    top: 6px;
    right: 6px;
@@ -497,14 +520,14 @@ onMounted(async () => {
    background-color: rgba(255, 107, 107, 0.1);
    z-index: 10;
    transition: all 0.2s ease;
-}
+  }

-.delete-icon:hover {
+  .delete-icon:hover {
    background-color: rgba(255, 107, 107, 0.3);
    transform: scale(1.1);
-}
+  }

-.grid-content {
+  .grid-content {
    width: 100%;
    height: 100%;
    display: flex;
@@ -513,9 +536,9 @@ onMounted(async () => {
    padding: 8px;
    box-sizing: border-box;
    cursor: drop;
-}
+  }

-.metric-tag {
+  .metric-tag {
    padding: 0;
    background: none;
    color: #e0e6ff;
@@ -525,16 +548,16 @@ onMounted(async () => {
    display: flex;
    flex-direction: column;
    align-items: center;
-}
+  }

-.sort-num {
+  .sort-num {
    font-size: 14px;
    color: #88a0c2;
    margin-bottom: 4px;
    display: block;
-}
+  }

-.empty-tip {
+  .empty-tip {
    position: absolute;
    top: 50%;
    left: 50%;
@@ -542,41 +565,41 @@ onMounted(async () => {
    color: #88a0c2;
    font-size: 14px;
    pointer-events: none;
-}
+  }

-.search-box {
+  .search-box {
    padding: 4px 0;
    margin-bottom: 8px;
    box-sizing: border-box;
-}
+  }

-.metric-list {
+  .metric-list {
    flex: 1;
    overflow-y: auto;
    padding: 4px;
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: rgba(60, 156, 255, 0.2) transparent;
-}
+  }

-.metric-list::-webkit-scrollbar {
+  .metric-list::-webkit-scrollbar {
    width: 1px;
-}
+  }

-.metric-list::-webkit-scrollbar-track {
+  .metric-list::-webkit-scrollbar-track {
    background: transparent;
-}
+  }

-.metric-list::-webkit-scrollbar-thumb {
+  .metric-list::-webkit-scrollbar-thumb {
    background: rgba(60, 156, 255, 0.2);
    border-radius: 0.5px;
-}
+  }

-.metric-list::-webkit-scrollbar-thumb:hover {
+  .metric-list::-webkit-scrollbar-thumb:hover {
    background: rgba(60, 156, 255, 0.4);
-}
+  }

-.metric-item {
+  .metric-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
@@ -588,21 +611,21 @@ onMounted(async () => {
    font-size: 14px;
    box-sizing: border-box;
    transition: all 0.2s ease;
-}
+  }

-.metric-item.active {
+  .metric-item.active {
    background-color: rgba(60, 156, 255, 0.3);
    border: 1px solid #3c9cff;
-}
+  }

-.metric-item:hover {
+  .metric-item:hover {
    background-color: rgba(60, 156, 255, 0.15);
-}
+  }

-.color-dot {
+  .color-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-left: 6px;
-}
+  }
 </style>
--- a/web-vue/packages/core/layouts/screen/setting/components/Sys.vue
+++ b/web-vue/packages/core/layouts/screen/setting/components/Sys.vue
@@ -7,8 +7,14 @@
            <div class="chart-top-inner">
              <h2>系统可视化大屏指标配置</h2>
              <div class="btn-group">
-                <el-button type="primary" size="default" @click="handleSave"
-                :loading="saveLoading" :disabled="saveLoading">保存</el-button>
+                <el-button
+                  type="primary"
+                  size="default"
+                  @click="handleSave"
+                  :loading="saveLoading"
+                  :disabled="saveLoading"
+                  >保存</el-button
+                >
                <el-button type="warning" size="default" @click="handleReset">重置</el-button>
                <el-button type="danger" size="default" @click="handleClearAll">清空</el-button>
              </div>
@@ -23,11 +29,11 @@
                <span v-if="metric1.length > 0" class="delete-icon" @click.stop="handleDeleteMetric(1)">×</span>
                <div class="grid-content" @drop="(e) => handleDrop(e, 1)" @dragover="(e) => e.preventDefault()">
                  <div v-if="metric1.length > 0" class="metric-tag">
-                    <span class="sort-num">指标{{1}}</span>
+                    <span class="sort-num">指标{{ 1 }}</span>
                    {{ metric1[0].chartName }}
-                    <small style="font-size:12px; color:#88a0c2;">ID: {{ metric1[0].chartId }}</small>
+                    <small style="font-size: 12px; color: #88a0c2">ID: {{ metric1[0].chartId }}</small>
                  </div>
-                  <div v-else class="empty-tip">拖拽指标到此处（指标{{1}}）</div>
+                  <div v-else class="empty-tip">拖拽指标到此处（指标{{ 1 }}）</div>
                </div>
              </div>
            </div>
@@ -36,11 +42,11 @@
                <span v-if="metric2.length > 0" class="delete-icon" @click.stop="handleDeleteMetric(2)">×</span>
                <div class="grid-content" @drop="(e) => handleDrop(e, 2)" @dragover="(e) => e.preventDefault()">
                  <div v-if="metric2.length > 0" class="metric-tag">
-                    <span class="sort-num">指标{{2}}</span>
+                    <span class="sort-num">指标{{ 2 }}</span>
                    {{ metric2[0].chartName }}
-                    <small style="font-size:12px; color:#88a0c2;">ID: {{ metric2[0].chartId }}</small>
+                    <small style="font-size: 12px; color: #88a0c2">ID: {{ metric2[0].chartId }}</small>
                  </div>
-                  <div v-else class="empty-tip">拖拽指标到此处（指标{{2}}）</div>
+                  <div v-else class="empty-tip">拖拽指标到此处（指标{{ 2 }}）</div>
                </div>
              </div>
            </div>
@@ -49,11 +55,11 @@
                <span v-if="metric3.length > 0" class="delete-icon" @click.stop="handleDeleteMetric(3)">×</span>
                <div class="grid-content" @drop="(e) => handleDrop(e, 3)" @dragover="(e) => e.preventDefault()">
                  <div v-if="metric3.length > 0" class="metric-tag">
-                    <span class="sort-num">指标{{3}}</span>
+                    <span class="sort-num">指标{{ 3 }}</span>
                    {{ metric3[0].chartName }}
-                    <small style="font-size:12px; color:#88a0c2;">ID: {{ metric3[0].chartId }}</small>
+                    <small style="font-size: 12px; color: #88a0c2">ID: {{ metric3[0].chartId }}</small>
                  </div>
-                  <div v-else class="empty-tip">拖拽指标到此处（指标{{3}}）</div>
+                  <div v-else class="empty-tip">拖拽指标到此处（指标{{ 3 }}）</div>
                </div>
              </div>
            </div>
@@ -64,11 +70,11 @@
                <span v-if="metric4.length > 0" class="delete-icon" @click.stop="handleDeleteMetric(4)">×</span>
                <div class="grid-content" @drop="(e) => handleDrop(e, 4)" @dragover="(e) => e.preventDefault()">
                  <div v-if="metric4.length > 0" class="metric-tag">
-                    <span class="sort-num">指标{{4}}</span>
+                    <span class="sort-num">指标{{ 4 }}</span>
                    {{ metric4[0].chartName }}
-                    <small style="font-size:12px; color:#88a0c2;">ID: {{ metric4[0].chartId }}</small>
+                    <small style="font-size: 12px; color: #88a0c2">ID: {{ metric4[0].chartId }}</small>
                  </div>
-                  <div v-else class="empty-tip">拖拽指标到此处（指标{{4}}）</div>
+                  <div v-else class="empty-tip">拖拽指标到此处（指标{{ 4 }}）</div>
                </div>
              </div>
            </div>
@@ -77,11 +83,11 @@
                <span v-if="metric5.length > 0" class="delete-icon" @click.stop="handleDeleteMetric(5)">×</span>
                <div class="grid-content" @drop="(e) => handleDrop(e, 5)" @dragover="(e) => e.preventDefault()">
                  <div v-if="metric5.length > 0" class="metric-tag">
-                    <span class="sort-num">指标{{5}}</span>
+                    <span class="sort-num">指标{{ 5 }}</span>
                    {{ metric5[0].chartName }}
-                    <small style="font-size:12px; color:#88a0c2;">ID: {{ metric5[0].chartId }}</small>
+                    <small style="font-size: 12px; color: #88a0c2">ID: {{ metric5[0].chartId }}</small>
                  </div>
-                  <div v-else class="empty-tip">拖拽指标到此处（指标{{5}}）</div>
+                  <div v-else class="empty-tip">拖拽指标到此处（指标{{ 5 }}）</div>
                </div>
              </div>
            </div>
@@ -90,11 +96,11 @@
                <span v-if="metric6.length > 0" class="delete-icon" @click.stop="handleDeleteMetric(6)">×</span>
                <div class="grid-content" @drop="(e) => handleDrop(e, 6)" @dragover="(e) => e.preventDefault()">
                  <div v-if="metric6.length > 0" class="metric-tag">
-                    <span class="sort-num">指标{{6}}</span>
+                    <span class="sort-num">指标{{ 6 }}</span>
                    {{ metric6[0].chartName }}
-                    <small style="font-size:12px; color:#88a0c2;">ID: {{ metric6[0].chartId }}</small>
+                    <small style="font-size: 12px; color: #88a0c2">ID: {{ metric6[0].chartId }}</small>
                  </div>
-                  <div v-else class="empty-tip">拖拽指标到此处（指标{{6}}）</div>
+                  <div v-else class="empty-tip">拖拽指标到此处（指标{{ 6 }}）</div>
                </div>
              </div>
            </div>
@@ -105,11 +111,11 @@
                <span v-if="metric7.length > 0" class="delete-icon" @click.stop="handleDeleteMetric(7)">×</span>
                <div class="grid-content" @drop="(e) => handleDrop(e, 7)" @dragover="(e) => e.preventDefault()">
                  <div v-if="metric7.length > 0" class="metric-tag">
-                    <span class="sort-num">指标{{7}}</span>
+                    <span class="sort-num">指标{{ 7 }}</span>
                    {{ metric7[0].chartName }}
-                    <small style="font-size:12px; color:#88a0c2;">ID: {{ metric7[0].chartId }}</small>
+                    <small style="font-size: 12px; color: #88a0c2">ID: {{ metric7[0].chartId }}</small>
                  </div>
-                  <div v-else class="empty-tip">拖拽指标到此处（指标{{7}}）</div>
+                  <div v-else class="empty-tip">拖拽指标到此处（指标{{ 7 }}）</div>
                </div>
              </div>
            </div>
@@ -118,11 +124,11 @@
                <span v-if="metric8.length > 0" class="delete-icon" @click.stop="handleDeleteMetric(8)">×</span>
                <div class="grid-content" @drop="(e) => handleDrop(e, 8)" @dragover="(e) => e.preventDefault()">
                  <div v-if="metric8.length > 0" class="metric-tag">
-                    <span class="sort-num">指标{{8}}</span>
+                    <span class="sort-num">指标{{ 8 }}</span>
                    {{ metric8[0].chartName }}
-                    <small style="font-size:12px; color:#88a0c2;">ID: {{ metric8[0].chartId }}</small>
+                    <small style="font-size: 12px; color: #88a0c2">ID: {{ metric8[0].chartId }}</small>
                  </div>
-                  <div v-else class="empty-tip">拖拽指标到此处（指标{{8}}）</div>
+                  <div v-else class="empty-tip">拖拽指标到此处（指标{{ 8 }}）</div>
                </div>
              </div>
            </div>
@@ -131,11 +137,11 @@
                <span v-if="metric9.length > 0" class="delete-icon" @click.stop="handleDeleteMetric(9)">×</span>
                <div class="grid-content" @drop="(e) => handleDrop(e, 9)" @dragover="(e) => e.preventDefault()">
                  <div v-if="metric9.length > 0" class="metric-tag">
-                    <span class="sort-num">指标{{9}}</span>
+                    <span class="sort-num">指标{{ 9 }}</span>
                    {{ metric9[0].chartName }}
-                    <small style="font-size:12px; color:#88a0c2;">ID: {{ metric9[0].chartId }}</small>
+                    <small style="font-size: 12px; color: #88a0c2">ID: {{ metric9[0].chartId }}</small>
                  </div>
-                  <div v-else class="empty-tip">拖拽指标到此处（指标{{9}}）</div>
+                  <div v-else class="empty-tip">拖拽指标到此处（指标{{ 9 }}）</div>
                </div>
              </div>
            </div>
@@ -147,7 +153,15 @@
          <el-input v-model="searchKey" placeholder="搜索指标项..." size="default"></el-input>
        </div>
        <div class="metric-list">
-          <div v-for="item in allMetricList" :key="item.chartId" class="metric-item" :class="{ active: isMetricUsed(item.chartId) }" draggable="true" @dragstart="(e) => handleDragStart(e, item)" @dragend="handleDragEnd">
+          <div
+            v-for="item in allMetricList"
+            :key="item.chartId"
+            class="metric-item"
+            :class="{ active: isMetricUsed(item.chartId) }"
+            draggable="true"
+            @dragstart="(e) => handleDragStart(e, item)"
+            @dragend="handleDragEnd"
+          >
            <span>{{ item.chartName }}</span>
            <span class="color-dot" :style="{ backgroundColor: item.color || getRandomColor() }"></span>
          </div>
@@ -158,35 +172,47 @@
 </template>

 <script lang="ts" setup name="ViewsBizMyScreenSysSetting">
-import { ref, computed, onMounted } from 'vue';
-import { ElMessage, ElButton, ElInput } from 'element-plus';
-import { MyChartInfo, myChartInfoListAll } from '@jeesite/biz/api/biz/myChartInfo';
+  import { ref, computed, onMounted } from 'vue';
+  import { ElMessage, ElButton, ElInput } from 'element-plus';
+  import { MyChartInfo, myChartSetting, myChartInfoListAll } from '@jeesite/biz/api/biz/myChartInfo';

-const metric1 = ref([]);
-const metric2 = ref([]);
-const metric3 = ref([]);
-const metric4 = ref([]);
-const metric5 = ref([]);
-const metric6 = ref([]);
-const metric7 = ref([]);
-const metric8 = ref([]);
-const metric9 = ref([]);
+  type MetricItem = MyChartInfo & {
+    oldSort?: number;
+    oldChartId?: string | number | null;
+  };

-const gridOriginalChartId = ref({
-  1: null, 2: null, 3: null, 4: null,
-  5: null, 6: null, 7: null, 8: null, 9: null
-});
-const metricHistory = ref({});
+  const metric1 = ref<MetricItem[]>([]);
+  const metric2 = ref<MetricItem[]>([]);
+  const metric3 = ref<MetricItem[]>([]);
+  const metric4 = ref<MetricItem[]>([]);
+  const metric5 = ref<MetricItem[]>([]);
+  const metric6 = ref<MetricItem[]>([]);
+  const metric7 = ref<MetricItem[]>([]);
+  const metric8 = ref<MetricItem[]>([]);
+  const metric9 = ref<MetricItem[]>([]);

-const saveLoading = ref(false);
-const rawChartData = ref<MyChartInfo[]>();
-const searchKey = ref('');
-const dragItem = ref(null);
+  const gridOriginalChartId = ref({
+    1: null,
+    2: null,
+    3: null,
+    4: null,
+    5: null,
+    6: null,
+    7: null,
+    8: null,
+    9: null,
+  });
+  const metricHistory = ref({});

-const allMetricList = computed({
+  const saveLoading = ref(false);
+  const rawChartData = ref<MyChartInfo[]>([]);
+  const searchKey = ref('');
+  const dragItem = ref<MetricItem | null>(null);
+
+  const allMetricList = computed({
    get() {
      if (!rawChartData.value || !Array.isArray(rawChartData.value)) return [];
-    return rawChartData.value.filter(item => {
+      return rawChartData.value.filter((item) => {
        if (!item || !item.chartName) return false;
        const searchVal = searchKey.value ? searchKey.value.toLowerCase() : '';
        const nameVal = item.chartName ? item.chartName.toLowerCase() : '';
@@ -195,26 +221,21 @@ const allMetricList = computed({
    },
    set(val) {
      rawChartData.value = val;
-  }
-});
+    },
+  });

-const getAllMetricArrays = () => ([
-  metric1, metric2, metric3, metric4, 
-  metric5, metric6, metric7, metric8, metric9
-]);
+  const getAllMetricArrays = () => [metric1, metric2, metric3, metric4, metric5, metric6, metric7, metric8, metric9];

-const getMetricArrByGridNum = (gridNum) => {
+  const getMetricArrByGridNum = (gridNum: number) => {
    return getAllMetricArrays()[gridNum - 1];
-};
+  };

-const isMetricUsed = (metricId) => {
+  const isMetricUsed = (metricId: string) => {
    if (!metricId) return false;
-  return getAllMetricArrays().some(
-    metricArr => metricArr.value.some(m => m && m.chartId === metricId)
-  );
-};
+    return getAllMetricArrays().some((metricArr) => metricArr.value.some((m) => m && m.chartId === metricId));
+  };

-const findGridNumByChartId = (chartId) => {
+  const findGridNumByChartId = (chartId: string) => {
    const arr = getAllMetricArrays();
    for (let i = 0; i < arr.length; i++) {
      if (arr[i].value.length && arr[i].value[0].chartId === chartId) {
@@ -222,19 +243,19 @@ const findGridNumByChartId = (chartId) => {
      }
    }
    return null;
-};
+  };

-const handleDragStart = (e, item) => {
+  const handleDragStart = (e, item) => {
    dragItem.value = item;
    e.dataTransfer.setData('text/plain', JSON.stringify(item));
    e.target.style.opacity = '0.6';
-};
+  };

-const handleDragEnd = (e) => {
+  const handleDragEnd = (e) => {
    e.target.style.opacity = '1';
-};
+  };

-const handleDrop = (e, targetGrid) => {
+  const handleDrop = (e, targetGrid) => {
    e.preventDefault();
    if (!dragItem.value) return;

@@ -247,7 +268,7 @@ const handleDrop = (e, targetGrid) => {
    getAllMetricArrays().forEach((arr, index) => {
      const gridNum = index + 1;
      if (gridNum !== targetGrid) {
-      arr.value = arr.value.filter(i => i.chartId !== dragChartId);
+        arr.value = arr.value.filter((i) => i.chartId !== dragChartId);
      }
    });

@@ -266,30 +287,31 @@ const handleDrop = (e, targetGrid) => {
    }

    dragItem.value = null;
-};
+  };

-const handleDeleteMetric = (gridNum) => {
+  const handleDeleteMetric = (gridNum) => {
    const targetArr = getMetricArrByGridNum(gridNum);
    if (targetArr) {
      targetArr.value = [];
    }
-};
+  };

-const handleReset = () => {
-  getAllMetricArrays().forEach(arr => arr.value = []);
+  const handleReset = () => {
+    getAllMetricArrays().forEach((arr) => (arr.value = []));
    searchKey.value = '';
    getChartList();
    ElMessage.info('已重置所有指标');
-};
+  };

-const handleClearAll = () => {
-  getAllMetricArrays().forEach(arr => arr.value = []);
+  const handleClearAll = () => {
+    getAllMetricArrays().forEach((arr) => (arr.value = []));
    ElMessage.info('已清空所有格子');
-};
+  };

-const handleSave = async () => {
+  const handleSave = async () => {
    saveLoading.value = true;
-  const saveData = getAllMetricArrays().map((arr, index) => {
+    const saveData = getAllMetricArrays()
+      .map((arr, index) => {
        const gridNum = index + 1;
        const currentItem = arr.value[0];
        return {
@@ -299,12 +321,13 @@ const handleSave = async () => {
          chartName: currentItem?.chartName || '',
          chartCode: 'sys',
          oldSort: currentItem?.oldSort || gridNum,
-      color: currentItem?.color || ''
+          color: currentItem?.color || '',
        };
-  }).filter(item => item.chartId);
+      })
+      .filter((item) => item.chartId);

    try {
-    const res = await getChartSetting(saveData);
+      const res = await myChartSetting(saveData);
      ElMessage.success(res?.msg);
      return saveData;
    } catch (error) {
@@ -313,35 +336,37 @@ const handleSave = async () => {
      getChartList();
      saveLoading.value = false;
    }
-};
+  };

-const getRandomColor = () => {
+  const getRandomColor = () => {
    const colors = ['#3c9cff', '#5ac8fa', '#9254de', '#f7ba2a', '#ff7d00', '#23c8c8', '#ff6b6b', '#86909c', '#7b68ee'];
    return colors[Math.floor(Math.random() * colors.length)];
-};
+  };

-async function getChartList() {
+  async function getChartList() {
    try {
      const reqParams = { chartCode: 'sys' };
      const res = await myChartInfoListAll(reqParams);
      rawChartData.value = res || [];
      metricHistory.value = {};
-    Object.keys(gridOriginalChartId.value).forEach(key => {
+      Object.keys(gridOriginalChartId.value).forEach((key) => {
        gridOriginalChartId.value[key] = null;
      });
-    rawChartData.value.forEach(item => {
+      rawChartData.value.forEach((item) => {
        const sortNum = item.sort || 0;
        if (sortNum >= 1 && sortNum <= 9) {
          const targetArr = getMetricArrByGridNum(sortNum);
          if (targetArr) {
            gridOriginalChartId.value[sortNum] = item.chartId;
-          targetArr.value = [{
+            targetArr.value = [
+              {
                ...item,
                sort: sortNum,
                oldSort: 0,
                chartId: item.chartId,
-            oldChartId: item.chartId
-          }];
+                oldChartId: item.chartId,
+              },
+            ];
            metricHistory.value[item.chartId] = sortNum;
          }
        }
@@ -350,16 +375,16 @@ async function getChartList() {
      console.error('获取数据失败:', error);
      rawChartData.value = [];
    }
-}
+  }

-// 初始化加载数据
-onMounted(async () => {
+  // 初始化加载数据
+  onMounted(async () => {
    await getChartList();
-});
+  });
 </script>

 <style scoped>
-.work-layout-container {
+  .work-layout-container {
    width: 100%;
    height: 100%;
    display: flex;
@@ -370,26 +395,26 @@ onMounted(async () => {
    box-sizing: border-box;
    background-color: #0a1a33;
    overflow: hidden;
-}
+  }

-.main-wrapper {
+  .main-wrapper {
    display: flex;
    width: 100%;
    height: 100%;
    gap: 2px;
    box-sizing: border-box;
-}
+  }

-.left-area {
+  .left-area {
    width: calc(85% - 1px);
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 2px;
    box-sizing: border-box;
-}
+  }

-.right-area {
+  .right-area {
    width: calc(15% - 1px);
    height: 100%;
    background-color: rgba(15, 52, 96, 0.5);
@@ -400,36 +425,36 @@ onMounted(async () => {
    flex-direction: column;
    box-sizing: border-box;
    overflow: hidden;
-}
+  }

-.work-top-header {
+  .work-top-header {
    height: calc(6% - 1px);
    box-sizing: border-box;
-}
+  }

-.work-main-section {
+  .work-main-section {
    height: calc(94% - 1px);
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2px;
    box-sizing: border-box;
-}
+  }

-.layout-row {
+  .layout-row {
    width: 100%;
    display: flex;
    gap: 2px;
    box-sizing: border-box;
    height: calc(100% / 3);
-}
+  }

-.work-col-1-3 {
+  .work-col-1-3 {
    width: calc(100% / 3);
    box-sizing: border-box;
-}
+  }

-.full-height-card {
+  .full-height-card {
    width: 100%;
    height: 100%;
    background-color: rgba(15, 52, 96, 0.3);
@@ -443,16 +468,16 @@ onMounted(async () => {
    color: #e0e6ff;
    overflow: hidden;
    position: relative;
-}
+  }

-.work-section {
+  .work-section {
    width: 100%;
    display: flex;
    gap: 2px;
    box-sizing: border-box;
-}
+  }

-.chart-top-inner {
+  .chart-top-inner {
    width: 100%;
    height: 100%;
    display: flex;
@@ -461,28 +486,28 @@ onMounted(async () => {
    padding: 0 16px;
    color: #e0e6ff;
    box-sizing: border-box;
-}
+  }

-.chart-top-inner h2 {
+  .chart-top-inner h2 {
    font-size: 16px;
    margin: 0;
    font-weight: 600;
-}
+  }

-.btn-group {
+  .btn-group {
    display: flex;
    gap: 8px;
-}
+  }

-.work-col {
+  .work-col {
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 2px;
-}
+  }

-.work-card {
+  .work-card {
    width: 100%;
    background-color: rgba(15, 52, 96, 0.3);
    border: 1px solid #1a508b;
@@ -495,15 +520,15 @@ onMounted(async () => {
    color: #e0e6ff;
    overflow: hidden;
    position: relative;
-}
+  }

-.full-card {
+  .full-card {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
-}
+  }

-.delete-icon {
+  .delete-icon {
    position: absolute;
    top: 6px;
    right: 6px;
@@ -519,14 +544,14 @@ onMounted(async () => {
    background-color: rgba(255, 107, 107, 0.1);
    z-index: 10;
    transition: all 0.2s ease;
-}
+  }

-.delete-icon:hover {
+  .delete-icon:hover {
    background-color: rgba(255, 107, 107, 0.3);
    transform: scale(1.1);
-}
+  }

-.grid-content {
+  .grid-content {
    width: 100%;
    height: 100%;
    display: flex;
@@ -535,9 +560,9 @@ onMounted(async () => {
    padding: 8px;
    box-sizing: border-box;
    cursor: drop;
-}
+  }

-.metric-tag {
+  .metric-tag {
    padding: 0;
    background: none;
    color: #e0e6ff;
@@ -547,16 +572,16 @@ onMounted(async () => {
    display: flex;
    flex-direction: column;
    align-items: center;
-}
+  }

-.sort-num {
+  .sort-num {
    font-size: 14px;
    color: #88a0c2;
    margin-bottom: 4px;
    display: block;
-}
+  }

-.empty-tip {
+  .empty-tip {
    position: absolute;
    top: 50%;
    left: 50%;
@@ -564,41 +589,41 @@ onMounted(async () => {
    color: #88a0c2;
    font-size: 14px;
    pointer-events: none;
-}
+  }

-.search-box {
+  .search-box {
    padding: 4px 0;
    margin-bottom: 8px;
    box-sizing: border-box;
-}
+  }

-.metric-list {
+  .metric-list {
    flex: 1;
    overflow-y: auto;
    padding: 4px;
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: rgba(60, 156, 255, 0.2) transparent;
-}
+  }

-.metric-list::-webkit-scrollbar {
+  .metric-list::-webkit-scrollbar {
    width: 1px;
-}
+  }

-.metric-list::-webkit-scrollbar-track {
+  .metric-list::-webkit-scrollbar-track {
    background: transparent;
-}
+  }

-.metric-list::-webkit-scrollbar-thumb {
+  .metric-list::-webkit-scrollbar-thumb {
    background: rgba(60, 156, 255, 0.2);
    border-radius: 0.5px;
-}
+  }

-.metric-list::-webkit-scrollbar-thumb:hover {
+  .metric-list::-webkit-scrollbar-thumb:hover {
    background: rgba(60, 156, 255, 0.4);
-}
+  }

-.metric-item {
+  .metric-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
@@ -610,21 +635,21 @@ onMounted(async () => {
    font-size: 14px;
    box-sizing: border-box;
    transition: all 0.2s ease;
-}
+  }

-.metric-item.active {
+  .metric-item.active {
    background-color: rgba(60, 156, 255, 0.3);
    border: 1px solid #3c9cff;
-}
+  }

-.metric-item:hover {
+  .metric-item:hover {
    background-color: rgba(60, 156, 255, 0.15);
-}
+  }

-.color-dot {
+  .color-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-left: 6px;
-}
+  }
 </style>
--- a/web-vue/packages/core/layouts/screen/setting/components/Work.vue
+++ b/web-vue/packages/core/layouts/screen/setting/components/Work.vue
@@ -7,7 +7,14 @@
            <div class="chart-top-inner">
              <h2>工作可视化大屏指标配置</h2>
              <div class="btn-group">
-                <el-button type="primary" size="default" @click="handleSave" :loading="saveLoading" :disabled="saveLoading">保存</el-button>
+                <el-button
+                  type="primary"
+                  size="default"
+                  @click="handleSave"
+                  :loading="saveLoading"
+                  :disabled="saveLoading"
+                  >保存</el-button
+                >
                <el-button type="warning" size="default" @click="handleReset">重置</el-button>
                <el-button type="danger" size="default" @click="handleClearAll">清空</el-button>
              </div>
@@ -20,33 +27,33 @@
              <span v-if="metric1.length > 0" class="delete-icon" @click.stop="handleDeleteMetric(1)">×</span>
              <div class="grid-content" @drop="(e) => handleDrop(e, 1)" @dragover="(e) => e.preventDefault()">
                <div v-if="metric1.length > 0" class="metric-tag">
-                  <span class="sort-num">指标{{1}}</span>
+                  <span class="sort-num">指标{{ 1 }}</span>
                  {{ metric1[0].chartName }}
-                  <small style="font-size:12px; color:#88a0c2;">ID: {{ metric1[0].chartId }}</small>
+                  <small style="font-size: 12px; color: #88a0c2">ID: {{ metric1[0].chartId }}</small>
                </div>
-                <div v-else class="empty-tip">拖拽指标到此处（指标{{1}}）</div>
+                <div v-else class="empty-tip">拖拽指标到此处（指标{{ 1 }}）</div>
              </div>
            </div>
            <div class="work-card work-card-1-3">
              <span v-if="metric2.length > 0" class="delete-icon" @click.stop="handleDeleteMetric(2)">×</span>
              <div class="grid-content" @drop="(e) => handleDrop(e, 2)" @dragover="(e) => e.preventDefault()">
                <div v-if="metric2.length > 0" class="metric-tag">
-                  <span class="sort-num">指标{{2}}</span>
+                  <span class="sort-num">指标{{ 2 }}</span>
                  {{ metric2[0].chartName }}
-                  <small style="font-size:12px; color:#88a0c2;">ID: {{ metric2[0].chartId }}</small>
+                  <small style="font-size: 12px; color: #88a0c2">ID: {{ metric2[0].chartId }}</small>
                </div>
-                <div v-else class="empty-tip">拖拽指标到此处（指标{{2}}）</div>
+                <div v-else class="empty-tip">拖拽指标到此处（指标{{ 2 }}）</div>
              </div>
            </div>
            <div class="work-card work-card-1-3">
              <span v-if="metric3.length > 0" class="delete-icon" @click.stop="handleDeleteMetric(3)">×</span>
              <div class="grid-content" @drop="(e) => handleDrop(e, 3)" @dragover="(e) => e.preventDefault()">
                <div v-if="metric3.length > 0" class="metric-tag">
-                  <span class="sort-num">指标{{3}}</span>
+                  <span class="sort-num">指标{{ 3 }}</span>
                  {{ metric3[0].chartName }}
-                  <small style="font-size:12px; color:#88a0c2;">ID: {{ metric3[0].chartId }}</small>
+                  <small style="font-size: 12px; color: #88a0c2">ID: {{ metric3[0].chartId }}</small>
                </div>
-                <div v-else class="empty-tip">拖拽指标到此处（指标{{3}}）</div>
+                <div v-else class="empty-tip">拖拽指标到此处（指标{{ 3 }}）</div>
              </div>
            </div>
          </div>
@@ -55,22 +62,22 @@
              <span v-if="metric4.length > 0" class="delete-icon" @click.stop="handleDeleteMetric(4)">×</span>
              <div class="grid-content" @drop="(e) => handleDrop(e, 4)" @dragover="(e) => e.preventDefault()">
                <div v-if="metric4.length > 0" class="metric-tag">
-                  <span class="sort-num">指标{{4}}</span>
+                  <span class="sort-num">指标{{ 4 }}</span>
                  {{ metric4[0].chartName }}
-                  <small style="font-size:12px; color:#88a0c2;">ID: {{ metric4[0].chartId }}</small>
+                  <small style="font-size: 12px; color: #88a0c2">ID: {{ metric4[0].chartId }}</small>
                </div>
-                <div v-else class="empty-tip">拖拽指标到此处（指标{{4}}）</div>
+                <div v-else class="empty-tip">拖拽指标到此处（指标{{ 4 }}）</div>
              </div>
            </div>
            <div class="work-card work-card-1-3">
              <span v-if="metric5.length > 0" class="delete-icon" @click.stop="handleDeleteMetric(5)">×</span>
              <div class="grid-content" @drop="(e) => handleDrop(e, 5)" @dragover="(e) => e.preventDefault()">
                <div v-if="metric5.length > 0" class="metric-tag">
-                  <span class="sort-num">指标{{5}}</span>
+                  <span class="sort-num">指标{{ 5 }}</span>
                  {{ metric5[0].chartName }}
-                  <small style="font-size:12px; color:#88a0c2;">ID: {{ metric5[0].chartId }}</small>
+                  <small style="font-size: 12px; color: #88a0c2">ID: {{ metric5[0].chartId }}</small>
                </div>
-                <div v-else class="empty-tip">拖拽指标到此处（指标{{5}}）</div>
+                <div v-else class="empty-tip">拖拽指标到此处（指标{{ 5 }}）</div>
              </div>
            </div>
          </div>
@@ -79,33 +86,33 @@
              <span v-if="metric6.length > 0" class="delete-icon" @click.stop="handleDeleteMetric(6)">×</span>
              <div class="grid-content" @drop="(e) => handleDrop(e, 6)" @dragover="(e) => e.preventDefault()">
                <div v-if="metric6.length > 0" class="metric-tag">
-                  <span class="sort-num">指标{{6}}</span>
+                  <span class="sort-num">指标{{ 6 }}</span>
                  {{ metric6[0].chartName }}
-                  <small style="font-size:12px; color:#88a0c2;">ID: {{ metric6[0].chartId }}</small>
+                  <small style="font-size: 12px; color: #88a0c2">ID: {{ metric6[0].chartId }}</small>
                </div>
-                <div v-else class="empty-tip">拖拽指标到此处（指标{{6}}）</div>
+                <div v-else class="empty-tip">拖拽指标到此处（指标{{ 6 }}）</div>
              </div>
            </div>
            <div class="work-card work-card-1-3">
              <span v-if="metric7.length > 0" class="delete-icon" @click.stop="handleDeleteMetric(7)">×</span>
              <div class="grid-content" @drop="(e) => handleDrop(e, 7)" @dragover="(e) => e.preventDefault()">
                <div v-if="metric7.length > 0" class="metric-tag">
-                  <span class="sort-num">指标{{7}}</span>
+                  <span class="sort-num">指标{{ 7 }}</span>
                  {{ metric7[0].chartName }}
-                  <small style="font-size:12px; color:#88a0c2;">ID: {{ metric7[0].chartId }}</small>
+                  <small style="font-size: 12px; color: #88a0c2">ID: {{ metric7[0].chartId }}</small>
                </div>
-                <div v-else class="empty-tip">拖拽指标到此处（指标{{7}}）</div>
+                <div v-else class="empty-tip">拖拽指标到此处（指标{{ 7 }}）</div>
              </div>
            </div>
            <div class="work-card work-card-1-3">
              <span v-if="metric8.length > 0" class="delete-icon" @click.stop="handleDeleteMetric(8)">×</span>
              <div class="grid-content" @drop="(e) => handleDrop(e, 8)" @dragover="(e) => e.preventDefault()">
                <div v-if="metric8.length > 0" class="metric-tag">
-                  <span class="sort-num">指标{{8}}</span>
+                  <span class="sort-num">指标{{ 8 }}</span>
                  {{ metric8[0].chartName }}
-                  <small style="font-size:12px; color:#88a0c2;">ID: {{ metric8[0].chartId }}</small>
+                  <small style="font-size: 12px; color: #88a0c2">ID: {{ metric8[0].chartId }}</small>
                </div>
-                <div v-else class="empty-tip">拖拽指标到此处（指标{{8}}）</div>
+                <div v-else class="empty-tip">拖拽指标到此处（指标{{ 8 }}）</div>
              </div>
            </div>
          </div>
@@ -116,7 +123,15 @@
          <el-input v-model="searchKey" placeholder="搜索指标项..." size="default"></el-input>
        </div>
        <div class="metric-list">
-          <div v-for="item in allMetricList" :key="item.chartId" class="metric-item" :class="{ active: isMetricUsed(item.chartId) }" draggable="true" @dragstart="(e) => handleDragStart(e, item)" @dragend="handleDragEnd">
+          <div
+            v-for="item in allMetricList"
+            :key="item.chartId"
+            class="metric-item"
+            :class="{ active: isMetricUsed(item.chartId) }"
+            draggable="true"
+            @dragstart="(e) => handleDragStart(e, item)"
+            @dragend="handleDragEnd"
+          >
            <span>{{ item.chartName }}</span>
            <span class="color-dot" :style="{ backgroundColor: item.color || getRandomColor() }"></span>
          </div>
@@ -127,34 +142,45 @@
 </template>

 <script lang="ts" setup name="ViewsBizMyScreenWorkSetting">
-import { ref, computed, onMounted } from 'vue';
-import { ElMessage } from 'element-plus';
-import { MyChartInfo, myChartInfoListAll } from '@jeesite/biz/api/biz/myChartInfo';
+  import { ref, computed, onMounted } from 'vue';
+  import { ElMessage } from 'element-plus';
+  import { MyChartInfo, myChartSetting, myChartInfoListAll } from '@jeesite/biz/api/biz/myChartInfo';

-const metric1 = ref([]);
-const metric2 = ref([]);
-const metric3 = ref([]);
-const metric4 = ref([]);
-const metric5 = ref([]);
-const metric6 = ref([]);
-const metric7 = ref([]);
-const metric8 = ref([]);
+  type MetricItem = MyChartInfo & {
+    oldSort?: number;
+    oldChartId?: string | number | null;
+  };

-const gridOriginalChartId = ref({
-  1: null, 2: null, 3: null, 4: null,
-  5: null, 6: null, 7: null, 8: null
-});
-const metricHistory = ref({});
+  const metric1 = ref<MetricItem[]>([]);
+  const metric2 = ref<MetricItem[]>([]);
+  const metric3 = ref<MetricItem[]>([]);
+  const metric4 = ref<MetricItem[]>([]);
+  const metric5 = ref<MetricItem[]>([]);
+  const metric6 = ref<MetricItem[]>([]);
+  const metric7 = ref<MetricItem[]>([]);
+  const metric8 = ref<MetricItem[]>([]);

-const saveLoading = ref(false);
-const rawChartData = ref<MyChartInfo[]>();
-const searchKey = ref('');
-const dragItem = ref(null);
+  const gridOriginalChartId = ref({
+    1: null,
+    2: null,
+    3: null,
+    4: null,
+    5: null,
+    6: null,
+    7: null,
+    8: null,
+  });
+  const metricHistory = ref({});

-const allMetricList = computed({
+  const saveLoading = ref(false);
+  const rawChartData = ref<MyChartInfo[]>([]);
+  const searchKey = ref('');
+  const dragItem = ref<MetricItem | null>(null);
+
+  const allMetricList = computed({
    get() {
      if (!rawChartData.value || !Array.isArray(rawChartData.value)) return [];
-    return rawChartData.value.filter(item => {
+      return rawChartData.value.filter((item) => {
        if (!item || !item.chartName) return false;
        const searchVal = searchKey.value ? searchKey.value.toLowerCase() : '';
        const nameVal = item.chartName ? item.chartName.toLowerCase() : '';
@@ -163,26 +189,21 @@ const allMetricList = computed({
    },
    set(val) {
      rawChartData.value = val;
-  }
-});
+    },
+  });

-const getAllMetricArrays = () => ([
-  metric1, metric2, metric3, metric4, 
-  metric5, metric6, metric7, metric8
-]);
+  const getAllMetricArrays = () => [metric1, metric2, metric3, metric4, metric5, metric6, metric7, metric8];

-const getMetricArrByGridNum = (gridNum) => {
+  const getMetricArrByGridNum = (gridNum: number) => {
    return getAllMetricArrays()[gridNum - 1];
-};
+  };

-const isMetricUsed = (metricId) => {
+  const isMetricUsed = (metricId: string) => {
    if (!metricId) return false;
-  return getAllMetricArrays().some(
-    metricArr => metricArr.value.some(m => m && m.chartId === metricId)
-  );
-};
+    return getAllMetricArrays().some((metricArr) => metricArr.value.some((m) => m && m.chartId === metricId));
+  };

-const findGridNumByChartId = (chartId) => {
+  const findGridNumByChartId = (chartId: string) => {
    const arr = getAllMetricArrays();
    for (let i = 0; i < arr.length; i++) {
      if (arr[i].value.length && arr[i].value[0].chartId === chartId) {
@@ -190,19 +211,19 @@ const findGridNumByChartId = (chartId) => {
      }
    }
    return null;
-};
+  };

-const handleDragStart = (e, item) => {
+  const handleDragStart = (e, item) => {
    dragItem.value = item;
    e.dataTransfer.setData('text/plain', JSON.stringify(item));
    e.target.style.opacity = '0.6';
-};
+  };

-const handleDragEnd = (e) => {
+  const handleDragEnd = (e) => {
    e.target.style.opacity = '1';
-};
+  };

-const handleDrop = (e, targetGrid) => {
+  const handleDrop = (e, targetGrid) => {
    e.preventDefault();
    if (!dragItem.value) return;
    const dragChartId = dragItem.value.chartId;
@@ -213,7 +234,7 @@ const handleDrop = (e, targetGrid) => {
    getAllMetricArrays().forEach((arr, index) => {
      const gridNum = index + 1;
      if (gridNum !== targetGrid) {
-      arr.value = arr.value.filter(i => i.chartId !== dragChartId);
+        arr.value = arr.value.filter((i) => i.chartId !== dragChartId);
      }
    });

@@ -234,30 +255,31 @@ const handleDrop = (e, targetGrid) => {
    }

    dragItem.value = null;
-};
+  };

-const handleDeleteMetric = (gridNum) => {
+  const handleDeleteMetric = (gridNum) => {
    const targetArr = getMetricArrByGridNum(gridNum);
    if (targetArr) {
      targetArr.value = [];
    }
-};
+  };

-const handleReset = () => {
-  getAllMetricArrays().forEach(arr => arr.value = []);
+  const handleReset = () => {
+    getAllMetricArrays().forEach((arr) => (arr.value = []));
    searchKey.value = '';
    getChartList();
    ElMessage.info('已重置所有指标');
-};
+  };

-const handleClearAll = () => {
-  getAllMetricArrays().forEach(arr => arr.value = []);
+  const handleClearAll = () => {
+    getAllMetricArrays().forEach((arr) => (arr.value = []));
    ElMessage.info('已清空所有格子');
-};
+  };

-const handleSave = async () => {
+  const handleSave = async () => {
    saveLoading.value = true;
-  const saveData = getAllMetricArrays().map((arr, index) => {
+    const saveData = getAllMetricArrays()
+      .map((arr, index) => {
        const gridNum = index + 1;
        const currentItem = arr.value[0];
        return {
@@ -267,50 +289,53 @@ const handleSave = async () => {
          chartName: currentItem?.chartName || '',
          chartCode: 'work',
          oldSort: currentItem?.oldSort || gridNum,
-      color: currentItem?.color || ''
+          color: currentItem?.color || '',
        };
-  }).filter(item => item.chartId);
+      })
+      .filter((item) => item.chartId);

    try {
-    const res = await getChartSetting(saveData);
+      const res = await myChartSetting(saveData);
      ElMessage.success(res?.msg);
      return saveData;
    } catch (error) {
      console.error('保存失败：', error);
    } finally {
-	getChartList()
+      getChartList();
      saveLoading.value = false;
    }
-};
+  };

-const getRandomColor = () => {
+  const getRandomColor = () => {
    const colors = ['#3c9cff', '#5ac8fa', '#9254de', '#f7ba2a', '#ff7d00', '#23c8c8', '#ff6b6b', '#86909c'];
    return colors[Math.floor(Math.random() * colors.length)];
-};
+  };

-async function getChartList() {
+  async function getChartList() {
    try {
      const reqParams = { chartCode: 'work' };
      const res = await myChartInfoListAll(reqParams);
      rawChartData.value = res || [];
      metricHistory.value = {};
-    Object.keys(gridOriginalChartId.value).forEach(key => {
+      Object.keys(gridOriginalChartId.value).forEach((key) => {
        gridOriginalChartId.value[key] = null;
      });

-    rawChartData.value.forEach(item => {
+      rawChartData.value.forEach((item) => {
        const sortNum = item.sort || 0;
        if (sortNum >= 1 && sortNum <= 8) {
          const targetArr = getMetricArrByGridNum(sortNum);
          if (targetArr) {
            gridOriginalChartId.value[sortNum] = item.chartId;
-          targetArr.value = [{
+            targetArr.value = [
+              {
                ...item,
                sort: sortNum,
                oldSort: 0,
                chartId: item.chartId,
-            oldChartId: item.chartId
-          }];
+                oldChartId: item.chartId,
+              },
+            ];
            metricHistory.value[item.chartId] = sortNum;
          }
        }
@@ -319,15 +344,15 @@ async function getChartList() {
      console.error('获取数据失败:', error);
      rawChartData.value = [];
    }
-}
+  }

-onMounted(async () => {
+  onMounted(async () => {
    await getChartList();
-});
+  });
 </script>

 <style scoped>
-.work-layout-container {
+  .work-layout-container {
    width: 100%;
    height: 100%;
    display: flex;
@@ -338,26 +363,26 @@ onMounted(async () => {
    box-sizing: border-box;
    background-color: #0a1a33;
    overflow: hidden;
-}
+  }

-.main-wrapper {
+  .main-wrapper {
    display: flex;
    width: 100%;
    height: 100%;
    gap: 2px;
    box-sizing: border-box;
-}
+  }

-.left-area {
+  .left-area {
    width: calc(85% - 1px);
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 2px;
    box-sizing: border-box;
-}
+  }

-.right-area {
+  .right-area {
    width: calc(15% - 1px);
    height: 100%;
    background-color: rgba(15, 52, 96, 0.5);
@@ -368,26 +393,26 @@ onMounted(async () => {
    flex-direction: column;
    box-sizing: border-box;
    overflow: hidden;
-}
+  }

-.work-top-header {
+  .work-top-header {
    height: calc(6% - 1px);
    box-sizing: border-box;
-}
+  }

-.work-main-section {
+  .work-main-section {
    height: calc(94% - 1px);
    box-sizing: border-box;
-}
+  }

-.work-section {
+  .work-section {
    width: 100%;
    display: flex;
    gap: 2px;
    box-sizing: border-box;
-}
+  }

-.chart-top-inner {
+  .chart-top-inner {
    width: 100%;
    height: 100%;
    display: flex;
@@ -396,33 +421,33 @@ onMounted(async () => {
    padding: 0 16px;
    color: #e0e6ff;
    box-sizing: border-box;
-}
+  }

-.chart-top-inner h2 {
+  .chart-top-inner h2 {
    font-size: 16px;
    margin: 0;
    font-weight: 600;
-}
+  }

-.btn-group {
+  .btn-group {
    display: flex;
    gap: 8px;
-}
+  }

-.work-col {
+  .work-col {
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 2px;
-}
+  }

-.work-col-1-3 {
+  .work-col-1-3 {
    width: calc(100% / 3 - 2px);
    box-sizing: border-box;
-}
+  }

-.work-card {
+  .work-card {
    width: 100%;
    background-color: rgba(15, 52, 96, 0.3);
    border: 1px solid #1a508b;
@@ -435,23 +460,23 @@ onMounted(async () => {
    color: #e0e6ff;
    overflow: hidden;
    position: relative;
-}
+  }

-.work-card-1-3 {
+  .work-card-1-3 {
    height: calc(100% / 3 - 2px);
-}
+  }

-.work-card-2-3 {
+  .work-card-2-3 {
    height: calc(200% / 3 - 2px);
-}
+  }

-.full-card {
+  .full-card {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
-}
+  }

-.delete-icon {
+  .delete-icon {
    position: absolute;
    top: 6px;
    right: 6px;
@@ -467,14 +492,14 @@ onMounted(async () => {
    background-color: rgba(255, 107, 107, 0.1);
    z-index: 10;
    transition: all 0.2s ease;
-}
+  }

-.delete-icon:hover {
+  .delete-icon:hover {
    background-color: rgba(255, 107, 107, 0.3);
    transform: scale(1.1);
-}
+  }

-.grid-content {
+  .grid-content {
    width: 100%;
    height: 100%;
    display: flex;
@@ -483,9 +508,9 @@ onMounted(async () => {
    padding: 8px;
    box-sizing: border-box;
    cursor: drop;
-}
+  }

-.metric-tag {
+  .metric-tag {
    padding: 0;
    background: none;
    color: #e0e6ff;
@@ -495,16 +520,16 @@ onMounted(async () => {
    display: flex;
    flex-direction: column;
    align-items: center;
-}
+  }

-.sort-num {
+  .sort-num {
    font-size: 14px;
    color: #88a0c2;
    margin-bottom: 4px;
    display: block;
-}
+  }

-.empty-tip {
+  .empty-tip {
    position: absolute;
    top: 50%;
    left: 50%;
@@ -512,41 +537,41 @@ onMounted(async () => {
    color: #88a0c2;
    font-size: 14px;
    pointer-events: none;
-}
+  }

-.search-box {
+  .search-box {
    padding: 4px 0;
    margin-bottom: 8px;
    box-sizing: border-box;
-}
+  }

-.metric-list {
+  .metric-list {
    flex: 1;
    overflow-y: auto;
    padding: 4px;
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: rgba(60, 156, 255, 0.2) transparent;
-}
+  }

-.metric-list::-webkit-scrollbar {
+  .metric-list::-webkit-scrollbar {
    width: 1px;
-}
+  }

-.metric-list::-webkit-scrollbar-track {
+  .metric-list::-webkit-scrollbar-track {
    background: transparent;
-}
+  }

-.metric-list::-webkit-scrollbar-thumb {
+  .metric-list::-webkit-scrollbar-thumb {
    background: rgba(60, 156, 255, 0.2);
    border-radius: 0.5px;
-}
+  }

-.metric-list::-webkit-scrollbar-thumb:hover {
+  .metric-list::-webkit-scrollbar-thumb:hover {
    background: rgba(60, 156, 255, 0.4);
-}
+  }

-.metric-item {
+  .metric-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
@@ -558,21 +583,21 @@ onMounted(async () => {
    font-size: 14px;
    box-sizing: border-box;
    transition: all 0.2s ease;
-}
+  }

-.metric-item.active {
+  .metric-item.active {
    background-color: rgba(60, 156, 255, 0.3);
    border: 1px solid #3c9cff;
-}
+  }

-.metric-item:hover {
+  .metric-item:hover {
    background-color: rgba(60, 156, 255, 0.15);
-}
+  }

-.color-dot {
+  .color-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-left: 6px;
-}
+  }
 </style>
--- a/web-vue/packages/core/layouts/screen/welcome/Erp/components/detail/indexV01.vue
+++ b/web-vue/packages/core/layouts/screen/welcome/Erp/components/detail/indexV01.vue
@@ -9,25 +9,21 @@
      <el-form :model="searchForm" class="search-form">
        <div class="form-items-wrapper">
          <el-form-item label="交易名称：" class="form-item">
-            <el-input
-              v-model="searchForm.flowName"
-              placeholder="请输入交易名称"
-              clearable
-            />
+            <el-input v-model="searchForm.flowName" placeholder="请输入交易名称" clearable />
          </el-form-item>
          <el-form-item label="交易类型：" class="form-item">
            <el-select
-		      v-model="searchForm.transactionType"
+              v-model="searchForm.flowType"
              placeholder="请选择交易类型"
              clearable
              class="custom-select"
-		      teleport="body"
              popper-class="theme-select-popper"
              :popper-append-to-body="true"
              @change="getTranTypes"
            >
              <el-option label="收入" value="2" />
              <el-option label="支出" value="1" />
+              <el-option label="转账" value="0" />
            </el-select>
          </el-form-item>
          <el-form-item label="交易分类：" class="form-item">
@@ -36,7 +32,6 @@
              placeholder="请选择交易分类"
              clearable
              class="custom-select"
-              teleport="body"
              popper-class="theme-select-popper"
              :popper-append-to-body="true"
            >
@@ -70,36 +65,40 @@
            background: 'transparent',
            color: '#a0cfff',
            border: 'none',
-            borderBottom: '1px solid rgba(64, 158, 255, 0.3)'
+            borderBottom: '1px solid rgba(64, 158, 255, 0.3)',
          }"
          :row-style="{
            background: 'transparent',
            color: '#a0cfff',
-            border: 'none'
+            border: 'none',
          }"
          :cell-style="{
            border: 'none',
-            borderBottom: '1px solid rgba(64, 158, 255, 0.2)'
+            borderBottom: '1px solid rgba(64, 158, 255, 0.2)',
          }"
        >
-          <el-table-column prop="flowId" label="交易编号" />
+          <el-table-column prop="yearDate" label="年份" width="60" />
+          <el-table-column prop="monthDate" label="月份" width="60" />
          <el-table-column prop="flowName" label="交易名称" />
+          <el-table-column prop="parentName" label="父级分类" />
          <el-table-column prop="categoryName" label="交易分类" />
-          <el-table-column prop="tranType" label="交易类型" />
-          <el-table-column prop="amount" label="交易金额">
+          <el-table-column prop="flowType" label="交易类型" width="120">
            <template #default="scope">
-              ¥{{ scope.row.amount }}
+              {{ getFlowTypeLabel(scope.row.flowType) }}
            </template>
          </el-table-column>
+          <el-table-column prop="amount" label="交易金额">
+            <template #default="scope"> ¥ {{ scope.row.amount }} </template>
+          </el-table-column>
          <el-table-column prop="remark" label="交易备注" />
-          <el-table-column prop="transactionTime" label="交易时间" />
+          <el-table-column prop="tradeTime" label="交易时间" width="180" />
        </el-table>
      </div>
      <div class="pagination-wrapper">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
-          :page-sizes="[20,50,99]"
+          :page-sizes="[20, 50, 99]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
@@ -114,81 +113,92 @@
  </div>
 </template>

-<script setup>
-import { defineProps, defineEmits, ref, onMounted, reactive } from 'vue'
-import { ElMessage } from 'element-plus'
-// import { getErpCategoryList, getErpTransactionFlowList } from '@/api/bizApi'
+<script lang="ts" setup>
+  import { defineProps, defineEmits, ref, onMounted, reactive } from 'vue';
+  import { ElMessage } from 'element-plus';
+  import { ErpCategory, erpCategoryListAll } from '@jeesite/erp/api/erp/category';
+  import { ErpTransactionFlow, erpTransactionPageFlowList } from '@jeesite/erp/api/erp/transactionFlow';

-const props = defineProps({
+  const props = defineProps({
    accountData: {
      type: Object,
-    default: () => ({})
-  }
-})
+      default: () => ({}),
+    },
+  });

-const emit = defineEmits(['close'])
-const handleClose = () => emit('close')
+  const emit = defineEmits(['close']);
+  const handleClose = () => emit('close');

-const tranTypes = ref();
-const loading = ref(false);
+  const flowTypeDict: Record<string, string> = {
+    '0': '转账',
+    '1': '支出',
+    '2': '收入',
+  };

-const searchForm = reactive({
+  const getFlowTypeLabel = (flowType?: string | number) => {
+    return flowTypeDict[String(flowType ?? '')] || '-';
+  };
+
+  const tranTypes = ref();
+  const loading = ref(false);
+
+  const searchForm = reactive({
    flowName: '',
-  transactionType: '',
+    flowType: '',
    categoryId: '',
-})
+  });

-const tableData = ref([]);
-const currentPage = ref(1);
-const pageSize = ref(20);
-const total = ref(0);
+  const tableData = ref<ErpTransactionFlow[]>();
+  const currentPage = ref(1);
+  const pageSize = ref(20);
+  const total = ref(0);

-const handleSearch = () => {
+  const handleSearch = () => {
    getList();
-}
+  };

-const handleReset = () => {
+  const handleReset = () => {
    Object.assign(searchForm, {
      flowName: '',
-    transactionType: '', 
+      flowType: '',
      categoryId: '',
-  })
+    });
    currentPage.value = 1;
    getList();
-}
+  };

-const handleSizeChange = (val) => {
+  const handleSizeChange = (val: number) => {
    pageSize.value = val;
    getList();
-}
-const handleCurrentChange = (val) => {
+  };
+  const handleCurrentChange = (val: number) => {
    currentPage.value = val;
    getList();
-}
+  };

-async function getTranTypes(){
+  async function getTranTypes() {
    try {
      const params = {
-		 categoryType: searchForm.transactionType,
-	 }
-	  const res = await getErpCategoryList(params);
+        categoryType: searchForm.flowType,
+      };
+      const res = await erpCategoryListAll(params);
      tranTypes.value = res || [];
    } catch (error) {
      console.error('获取数据失败:', error);
      tranTypes.value = [];
    }
-}
+  }

-async function getList() {
+  async function getList() {
    loading.value = true;
    try {
      const reqParmas = {
-		  ... searchForm,
+        ...searchForm,
        pageNum: currentPage.value,
        pageSize: pageSize.value,
        accountId: props.accountData.rawData?.accountId || '',
-	  }
-	  const res = await getErpTransactionFlowList(reqParmas);
+      };
+      const res = await erpTransactionPageFlowList(reqParmas);
      total.value = res.total;
      tableData.value = res.list || [];
    } catch (error) {
@@ -197,42 +207,54 @@ async function getList() {
    } finally {
      loading.value = false;
    }
-}
+  }

-onMounted(async () => {
+  onMounted(async () => {
    await getList();
    await getTranTypes();
-})
+  });
 </script>

 <style scoped>
-.detail-container {
+  .detail-container {
    width: 100%;
    height: 100%;
    padding: 12px;
    color: #e0e6ff;
    background: url('@jeesite/assets/chart/box/18.png') no-repeat center center;
    background-size: 100% 100%;
-  background-color: transparent !important;
+    background-color: rgba(18, 52, 92, 0.28) !important;
    border: none !important;
    box-sizing: border-box;
    position: relative;
    z-index: 10001;
-}
+    backdrop-filter: blur(6px);
+  }

-.detail-header {
+  .detail-container::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(180deg, rgba(48, 112, 196, 0.12), rgba(14, 42, 78, 0.24));
+    pointer-events: none;
+    z-index: 0;
+  }
+
+  .detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
-}
-.detail-header h3 {
+    position: relative;
+    z-index: 1;
+  }
+  .detail-header h3 {
    margin: 0;
-  color: #409EFF;
+    color: #409eff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    font-size: 18px;
-}
-.close-btn {
+  }
+  .close-btn {
    background: transparent;
    border: none;
    font-size: 24px;
@@ -245,35 +267,35 @@ onMounted(async () => {
    justify-content: center;
    transition: color 0.2s;
    z-index: 10002;
-}
-.close-btn:hover {
-  color: #409EFF;
-}
+  }
+  .close-btn:hover {
+    color: #409eff;
+  }

-.split-line {
+  .split-line {
    height: 1px;
-  background-color: #409EFF;
+    background-color: #409eff;
    opacity: 0.6;
    margin-bottom: 16px;
-}
+  }

-.detail-body {
+  .detail-body {
    width: 100%;
    height: calc(100% - 80px);
-  border: 1px solid #409EFF;
+    border: 1px solid #409eff;
    border-radius: 6px;
    padding: 16px;
-  background-color: rgba(10, 30, 60, 0.2);
+    background-color: rgba(36, 88, 156, 0.16);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow: visible;
    position: relative;
-  z-index: 10001;
-}
+    z-index: 1;
+  }

-.search-form {
+  .search-form {
    display: flex;
    align-items: center;
    width: 100%;
@@ -282,39 +304,39 @@ onMounted(async () => {
    flex-wrap: wrap;
    position: relative;
    z-index: 10001;
-}
-.form-items-wrapper {
+  }
+  .form-items-wrapper {
    display: flex;
    flex: 1;
    gap: 20px;
    min-width: 0;
    flex-wrap: wrap;
-}
-.form-item {
+  }
+  .form-item {
    flex: 1;
    margin-bottom: 0 !important;
    min-width: 180px;
-}
-.date-range-item {
+  }
+  .date-range-item {
    min-width: 280px !important;
-}
-.form-btn-group {
+  }
+  .form-btn-group {
    margin-left: 20px;
    margin-bottom: 0 !important;
    flex-shrink: 0;
    display: flex;
    gap: 10px;
-}
+  }

-.table-container {
+  .table-container {
    flex: 1;
    width: 100%;
    overflow: auto;
    position: relative;
    z-index: 10001;
-}
+  }

-.custom-loading {
+  .custom-loading {
    position: absolute;
    top: 0;
    left: 0;
@@ -326,37 +348,37 @@ onMounted(async () => {
    justify-content: center;
    align-items: center;
    z-index: 999;
-}
+  }

-.loading-icon {
+  .loading-icon {
    font-size: 24px;
-  color: #409EFF;
+    color: #409eff;
    animation: loading-rotate 2s linear infinite;
    margin-bottom: 8px;
-}
+  }

-.loading-text {
+  .loading-text {
    font-size: 14px;
    color: #b4c7e7;
-}
+  }

-@keyframes loading-rotate {
+  @keyframes loading-rotate {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
-}
+  }

-.data-table {
+  .data-table {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
-}
+  }

-.pagination-wrapper {
+  .pagination-wrapper {
    display: flex;
    justify-content: flex-end;
    align-items: center;
@@ -366,56 +388,56 @@ onMounted(async () => {
    flex-shrink: 0;
    position: relative;
    z-index: 10001;
-}
+  }

-:deep(.el-form-item__label) {
+  :deep(.el-form-item__label) {
    color: #e0e6ff !important;
    font-size: 14px;
-}
-:deep(.el-input__wrapper),
-:deep(.el-select__wrapper),
-:deep(.el-date-editor__wrapper) {
+  }
+  :deep(.el-input__wrapper),
+  :deep(.el-select__wrapper),
+  :deep(.el-date-editor__wrapper) {
    background-color: rgba(0, 0, 0, 0.2) !important;
-  border: 1px solid #409EFF !important;
+    border: 1px solid #409eff !important;
    box-shadow: none !important;
    width: 100% !important;
    position: relative;
    z-index: 10001;
-}
-:deep(.el-input__inner),
-:deep(.el-select__inner),
-:deep(.el-date-editor input) {
+  }
+  :deep(.el-input__inner),
+  :deep(.el-select__inner),
+  :deep(.el-date-editor input) {
    color: #e0e6ff !important;
    background-color: transparent !important;
-}
-:deep(.el-input__placeholder),
-:deep(.el-date-editor__placeholder) {
+  }
+  :deep(.el-input__placeholder),
+  :deep(.el-date-editor__placeholder) {
    color: rgba(224, 230, 255, 0.6) !important;
-}
+  }

-:deep(.custom-pagination) {
+  :deep(.custom-pagination) {
    --el-pagination-text-color: #e0e6ff;
    --el-pagination-button-color: #e0e6ff;
-  --el-pagination-button-hover-color: #409EFF;
-  --el-pagination-button-active-color: #409EFF;
-  --el-pagination-border-color: #409EFF;
+    --el-pagination-button-hover-color: #409eff;
+    --el-pagination-button-active-color: #409eff;
+    --el-pagination-border-color: #409eff;
    --el-pagination-bg-color: rgba(10, 30, 60, 0.2) !important;
    z-index: 10001;
-}
-:deep(.el-pagination button) {
+  }
+  :deep(.el-pagination button) {
    background-color: rgba(0, 0, 0, 0.2) !important;
-  border-color: #409EFF !important;
+    border-color: #409eff !important;
    color: #e0e6ff !important;
-}
-:deep(.el-pagination .el-pager li) {
+  }
+  :deep(.el-pagination .el-pager li) {
    color: #e0e6ff !important;
-}
-:deep(.el-pagination .el-pager li.active) {
-  color: #409EFF !important;
+  }
+  :deep(.el-pagination .el-pager li.active) {
+    color: #409eff !important;
    font-weight: bold;
-}
+  }

-:deep(.el-table) {
+  :deep(.el-table) {
    --el-table-text-color: #a0cfff;
    --el-table-header-text-color: #a0cfff;
    --el-table-row-hover-bg-color: rgba(64, 158, 255, 0.2);
@@ -424,127 +446,127 @@ onMounted(async () => {
    background-color: transparent !important;
    border: none !important;
    z-index: 10001;
-}
-:deep(.el-table th) {
+  }
+  :deep(.el-table th) {
    border: none !important;
    border-bottom: 1px solid rgba(64, 158, 255, 0.3) !important;
    background-color: transparent !important;
    color: #a0cfff !important;
-}
-:deep(.el-table td) {
+  }
+  :deep(.el-table td) {
    border: none !important;
    border-bottom: 1px solid rgba(64, 158, 255, 0.2) !important;
    background-color: transparent !important;
    color: #a0cfff !important;
-}
-:deep(.el-table--striped .el-table__row--striped td) {
+  }
+  :deep(.el-table--striped .el-table__row--striped td) {
    background-color: rgba(10, 30, 60, 0.3) !important;
    border-bottom-color: rgba(64, 158, 255, 0.2) !important;
-}
-:deep(.el-table__row:hover > td) {
+  }
+  :deep(.el-table__row:hover > td) {
    background-color: rgba(64, 158, 255, 0.2) !important;
    border-bottom-color: rgba(64, 158, 255, 0.3) !important;
-}
-:deep(.el-table tr:last-child td) {
+  }
+  :deep(.el-table tr:last-child td) {
    border-bottom: none !important;
-}
-:deep(.el-table-empty-text) {
+  }
+  :deep(.el-table-empty-text) {
    color: #a0cfff !important;
    background-color: transparent !important;
-}
+  }

-:deep(.el-button) {
+  :deep(.el-button) {
    --el-button-text-color: #e0e6ff !important;
-  --el-button-border-color: #409EFF !important;
+    --el-button-border-color: #409eff !important;
    --el-button-hover-text-color: #fff !important;
-  --el-button-hover-border-color: #409EFF !important;
+    --el-button-hover-border-color: #409eff !important;
    --el-button-hover-bg-color: rgba(64, 158, 255, 0.2) !important;
    height: 32px;
    padding: 0 16px;
    z-index: 10001;
-}
-:deep(.el-button--primary) {
+  }
+  :deep(.el-button--primary) {
    --el-button-text-color: #fff !important;
    --el-button-bg-color: rgba(64, 158, 255, 0.8) !important;
-  --el-button-border-color: #409EFF !important;
-  --el-button-hover-bg-color: #409EFF !important;
-}
-:deep(.reset-btn) {
+    --el-button-border-color: #409eff !important;
+    --el-button-hover-bg-color: #409eff !important;
+  }
+  :deep(.reset-btn) {
    background-color: rgba(0, 0, 0, 0.2) !important;
-  border-color: #409EFF !important;
+    border-color: #409eff !important;
    color: #e0e6ff !important;
-}
-:deep(.reset-btn:hover) {
+  }
+  :deep(.reset-btn:hover) {
    background-color: rgba(64, 158, 255, 0.2) !important;
    color: #fff !important;
-}
+  }

-:deep(.el-loading-mask) {
+  :deep(.el-loading-mask) {
    display: none !important;
-}
+  }

-.detail-body::-webkit-scrollbar,
-:deep(.el-table__body-wrapper)::-webkit-scrollbar,
-.table-container::-webkit-scrollbar {
+  .detail-body::-webkit-scrollbar,
+  :deep(.el-table__body-wrapper)::-webkit-scrollbar,
+  .table-container::-webkit-scrollbar {
    width: 6px;
    height: 6px;
-}
-.detail-body::-webkit-scrollbar-track,
-.table-container::-webkit-scrollbar-track {
+  }
+  .detail-body::-webkit-scrollbar-track,
+  .table-container::-webkit-scrollbar-track {
    background: rgba(10, 30, 60, 0.1);
    border-radius: 3px;
-}
-.detail-body::-webkit-scrollbar-thumb,
-.table-container::-webkit-scrollbar-thumb {
+  }
+  .detail-body::-webkit-scrollbar-thumb,
+  .table-container::-webkit-scrollbar-thumb {
    background: rgba(64, 158, 255, 0.5);
    border-radius: 3px;
-}
+  }
 </style>

 <style>
-.theme-select-popper {
+  .theme-select-popper {
    background-color: rgba(10, 30, 60, 0.95) !important;
-  border: 1px solid #409EFF !important;
+    border: 1px solid #409eff !important;
    color: #e0e6ff !important;
    z-index: 99999 !important;
    pointer-events: auto !important;
    position: fixed !important;
-}
-.theme-select-popper .el-select-dropdown__item {
+  }
+  .theme-select-popper .el-select-dropdown__item {
    color: #e0e6ff !important;
    background-color: transparent !important;
    padding: 6px 12px !important;
-}
-.theme-select-popper .el-select-dropdown__item:hover {
+  }
+  .theme-select-popper .el-select-dropdown__item:hover {
    background-color: rgba(64, 158, 255, 0.2) !important;
    color: #fff !important;
-}
-.theme-select-popper .el-select-dropdown__item.selected {
+  }
+  .theme-select-popper .el-select-dropdown__item.selected {
    background-color: rgba(64, 158, 255, 0.5) !important;
    color: #fff !important;
-}
+  }

-.theme-pagination-popper {
+  .theme-pagination-popper {
    background-color: rgba(10, 30, 60, 0.95) !important;
-  border: 1px solid #409EFF !important;
+    border: 1px solid #409eff !important;
    color: #e0e6ff !important;
    z-index: 99999 !important;
    pointer-events: auto !important;
    position: fixed !important;
-}
-.theme-pagination-popper .el-pagination__sizes-option {
+  }
+  .theme-pagination-popper .el-pagination__sizes-option {
    color: #e0e6ff !important;
    background-color: transparent !important;
-}
-.theme-pagination-popper .el-pagination__sizes-option:hover {
+  }
+  .theme-pagination-popper .el-pagination__sizes-option:hover {
    background-color: rgba(64, 158, 255, 0.2) !important;
    color: #fff !important;
-}
+  }

-.modal-overlay {
+  .modal-overlay {
    pointer-events: auto !important;
-}
-.modal-overlay .modal-content {
+  }
+  .modal-overlay .modal-content {
    pointer-events: auto !important;
-}
+  }
 </style>
--- a/web-vue/packages/erp/api/erp/transactionFlow.ts
+++ b/web-vue/packages/erp/api/erp/transactionFlow.ts
@@ -26,9 +26,28 @@ export interface ErpTransactionFlow extends BasicModel<ErpTransactionFlow> {
  businessId: string; // 业务标识
 }

+export interface ErpFlowParams extends BasicModel<ErpFlowParams> {
+  pageNum: number; // 当前页
+  pageSize: number; // 每页条数
+  flowName: string; // 交易名称
+  flowType: string; // 交易类型
+  accountId: string; // 交易账户
+  categoryId: string; // 交易分类
+}
+
+export interface PageResult<T> extends BasicModel<PageResult<T>> {
+  list: T[];               // 对应后端 List<T> list
+  currentPage: number;     // 当前页
+  pageSize: number;        // 每页条数
+  total: number;           // 总条数
+}
+
 export const erpTransactionFlowList = (params?: ErpTransactionFlow | any) =>
  defHttp.get<ErpTransactionFlow>({ url: adminPath + '/erp/transactionFlow/list', params });
  
+export const erpTransactionPageFlowList = (params?: ErpTransactionFlow | any) =>
+  defHttp.get<PageResult<ErpTransactionFlow>>({ url: adminPath + '/erp/transactionFlow/FlowList', params });
+
 export const erpTransactionFlowListData = (params?: ErpTransactionFlow | any) =>
  defHttp.post<Page<ErpTransactionFlow>>({ url: adminPath + '/erp/transactionFlow/listData', params });