@epxing/designer 0.0.0-stage → 5.3.0-beta.2

package/dist/src/visual/config-page/Dashboard.js

@@ -0,0 +1,2160 @@
+import '../../../style.css';
+import { __vitePreload as __epxPackagePreload } from "../../../_virtual/preload-helper.js";
+import __cjsReq0 from "../../assets/images/dashboard/theme_white.png.js";
+import __cjsReq1 from "../../assets/images/dashboard/theme_black.png.js";
+import __cjsReq2 from "../../assets/images/dashboard/theme_technology.png.js";
+import DashboardThemeSetting from "./dashboard-theme-setting/Index.js";
+import { selectableChartTypes } from "@epxing/utils/src/chart-registry";
+import DashboardMobile from "./DashboardMobile.js";
+import DashboardPreview from "@epxing/dashboard/src/Dashboard.vue";
+import { DEFAULT_DASHBOARD_THEME, removeDashboardItem, createDashboardConfig, getDashboardDesignTarget } from "@epxing/dashboard/src/design-target";
+import { indexDashboardItems } from "@epxing/dashboard/src/mobile-design";
+import { mapGetters, mapState } from "vuex";
+import { stripDashboardConfig, mergeGridConfigs, rescaleItemsToColNum, normalizeDashboardConfig, CONFIG_VERSION } from "@epxing/dashboard/src/grid/model";
+import { resolveComponent, resolveDirective, openBlock, createElementBlock, normalizeClass, createElementVNode, toDisplayString, createBlock, withCtx, createTextVNode, createCommentVNode, Fragment, renderList, createVNode, withModifiers, withDirectives, vShow, resolveDynamicComponent, normalizeStyle } from "vue";
+/* empty css              */
+import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.js";
+function ensureGridItemKey(items) {
+  if (!Array.isArray(items)) return items;
+  items.forEach((item) => {
+    if (item && typeof item === "object") {
+      if (item.contentType && item.i == null && item.id != null) item.i = item.id;
+      if (Array.isArray(item.items)) ensureGridItemKey(item.items);
+    }
+  });
+  return items;
+}
+const _sfc_main = {
+  name: "epx-visual-config-dashboard",
+  $componentType: "component",
+  components: {
+    DashboardThemeSetting,
+    DashboardMobile,
+    DashboardPreview
+  },
+  navConfigs: {
+    flag: false
+  },
+  provide() {
+    const { id } = this.$query;
+    return {
+      pageMetaId: this.currentMetaId,
+      pageId: id,
+      pageConfigs: this.page_config,
+      getAllComponentList: () => this.componentList,
+      getItemConfigs: () => this.allComponentConfigs,
+      // 当前 items 树（含容器子项）：属性面板「布局」分组按 id 找真实 item 读初值
+      getComponentItems: () => this.selectComponentList,
+      getDefaultContainerItems: () => this.defaultContainerItems,
+      setContainerDefaultItems: this.setContainerDefaultItems,
+      changeItemConfigs: this.changeItemConfigs,
+      getPageMetaId: () => {
+        return this.currentMetaId;
+      }
+    };
+  },
+  props: {
+    newWindow: Boolean
+  },
+  data() {
+    return {
+      // 页面配置版本：加载时经 normalizeDashboardConfig 升到 v3（补 grid / 容器 grid），保存时写回；这是 '3.0' 唯一的写入点
+      version: CONFIG_VERSION,
+      configReady: false,
+      chooseDesignTarget: false,
+      choosingDesignTarget: false,
+      mobileDirty: false,
+      mobileSaving: false,
+      mobileRevision: 0,
+      mobileAddParent: null,
+      mobilePreviewVisible: false,
+      previewSuspended: false,
+      previewPopupTimer: null,
+      previewViewportWidth: window.innerWidth,
+      previewViewportHeight: window.innerHeight,
+      styleType: "presets",
+      componentList: [],
+      selectComponentList: [],
+      selectComponent: null,
+      showPanel: "componentLibrary",
+      pageGlobalConfigs: {},
+      allComponentConfigs: {},
+      pageMetaId: null,
+      upCompId: null,
+      relationList: [],
+      pageParams: [],
+      scopeConfigs: {},
+      addReportDialog: false,
+      addComponentDialog: false,
+      copyComponentDialog: false,
+      pageSettingDrawer: false,
+      activeTheme: DEFAULT_DASHBOARD_THEME,
+      themeStyles: null,
+      themeMobilePreview: false,
+      // 主题面板处于"移动端"编辑态：设计器加 .is-mobile-preview 预览移动端覆盖
+      themeList: [
+        { key: "light", name: "经典白", preview: __cjsReq0 },
+        { key: "dark", name: "经典黑", preview: __cjsReq1 },
+        { key: "technology", name: "科幻大屏", preview: __cjsReq2 }
+      ],
+      reportList: [],
+      selectedReportList: [],
+      currentReportPage: 1,
+      reportTotal: 0,
+      dashboardList: [],
+      selectedDashboardCompList: [],
+      currentDashboardPage: 1,
+      dashboardTotal: 0,
+      foldDashboardMap: {},
+      reportIconMap: {
+        1: "epx-icon-tongjibiao",
+        pie: "epx-icon-bingzhuangtu",
+        line: "epx-icon-zhexiantu",
+        column: "epx-icon-zhuzhuangtu",
+        funnel: "epx-icon-loudoutu"
+      },
+      selectedReportDataList: [],
+      selectedDashboardCompDataList: [],
+      reportScopeParams: [],
+      dashboardScopeParams: [],
+      reportLoading: true,
+      dashboardLoading: true,
+      addReportForm: {},
+      reportTypeList: [
+        ...selectableChartTypes.map(({ type, text, icon }) => ({ icon, text, type: type === "table" ? "1" : "2", chartType: type === "table" ? "" : type })),
+        { icon: "epx-icon-a-numbercard", text: "数字统计", type: "numStatistic" },
+        { icon: "epx-icon-dianzibiaodan", text: "电子表单", type: "form" },
+        { icon: "epx-icon-biaoti", text: "标题", type: "dashboardTitle" },
+        { icon: "epx-icon-container", text: "容器", type: "dashboardDiv" }
+      ],
+      reportMap: {},
+      saveThemeDialog: false,
+      themeFormData: {},
+      editTheme: null
+    };
+  },
+  computed: {
+    isMobileDashboard() {
+      return getDashboardDesignTarget(this.pageGlobalConfigs) === "mobile";
+    },
+    mobileCanvasWidth() {
+      return Number(this.pageGlobalConfigs.mobileCanvasWidth) || 375;
+    },
+    mobilePreviewPhoneHeight() {
+      return Math.round(this.mobileCanvasWidth * 812 / 375) + 12;
+    },
+    mobilePreviewScale() {
+      return Math.max(0.1, Math.min(1, (this.previewViewportWidth - 80) / (this.mobileCanvasWidth + 12), (this.previewViewportHeight - 160) / this.mobilePreviewPhoneHeight));
+    },
+    mobileDesignSource() {
+      return { componentList: this.selectComponentList, itemConfigs: this.allComponentConfigs, globalConfigs: this.pageGlobalConfigs, theme: this.activeTheme, themeStyles: this.themeStyles };
+    },
+    ...mapState({
+      showMenu: (state) => state.config.showMenu,
+      showAppNav: (state) => state.config.showAppNav
+    }),
+    ...mapGetters([
+      "getMeta",
+      "getPageById"
+    ]),
+    $meta() {
+      if (this.$metaId) {
+        const meta = this.getMeta(this.$metaId);
+        return meta;
+      } else {
+        return null;
+      }
+    },
+    $metaKey() {
+      if (this.$meta) {
+        return this.$meta.getKey() || "ID";
+      } else {
+        return "ID";
+      }
+    },
+    currentPage() {
+      const page = this.getPageById(this.$query.id);
+      return page || {};
+    },
+    currentMetaId() {
+      return this.$query.entityId || this.pageMetaId;
+    },
+    currentMeta() {
+      return this.metas[this.currentMetaId] || null;
+    },
+    page_config() {
+      const { config = "{}" } = this.$query;
+      if (typeof config === "string") {
+        try {
+          return eval("(" + config + ")");
+        } catch (error) {
+          return {};
+        }
+      }
+      return config;
+    },
+    pageComponentConfigs() {
+      const configs = { ...this.pageGlobalConfigs };
+      if (configs.title) {
+        configs.componentName = configs.title;
+      }
+      return configs;
+    },
+    title() {
+      const { title } = this.pageGlobalConfigs;
+      return title || this.currentPage.title || this.$query.title;
+    },
+    isDashboardSelectAll() {
+      return (dashboard) => {
+        return dashboard.children.every((item) => this.selectedDashboardCompList.includes(dashboard.ID + "-" + item.id));
+      };
+    },
+    isDashboardSelect() {
+      return (dashboard) => {
+        return !dashboard.children.every((item) => this.selectedDashboardCompList.includes(dashboard.ID + "-" + item.id)) && dashboard.children.some((item) => this.selectedDashboardCompList.includes(dashboard.ID + "-" + item.id));
+      };
+    },
+    compTitle() {
+      return (comp) => {
+        if (comp.contentType === "report-chart") {
+          const report = this.reportMap[comp.configs.id] || {};
+          return report.NAME || comp.title;
+        }
+        return comp.title;
+      };
+    },
+    compIcon() {
+      return (comp) => {
+        if (comp.contentType === "report-chart") {
+          const report = this.reportMap[comp.configs.id] || {};
+          return this.reportIconMap[report.CHART_TYPE || report.TYPE] || "epx-icon-component";
+        }
+        return "epx-icon-component";
+      };
+    },
+    showConfigPanel: {
+      get() {
+        return !!this.selectComponent;
+      },
+      set() {
+        this.selectComponent = null;
+      }
+    },
+    themeFields() {
+      return this.$route.params.system === "epxing-frame" ? ["CODE", "NAME", "THUMBNAIL", "SCOPE"] : ["CODE", "NAME", "THUMBNAIL"];
+    }
+  },
+  methods: {
+    async selectDesignTarget(target) {
+      var _a, _b;
+      if (this.choosingDesignTarget || this.selectComponentList.length) return;
+      this.choosingDesignTarget = true;
+      if (this.timer) {
+        clearTimeout(this.timer);
+        this.timer = null;
+      }
+      const previous = this.pageGlobalConfigs;
+      try {
+        const firstChoice = !["pc", "mobile"].includes((_b = (_a = this.currentPage) == null ? void 0 : _a.config) == null ? void 0 : _b.designTarget);
+        const grid = firstChoice ? { ...previous.grid, colNum: 24 } : previous.grid;
+        const configs = createDashboardConfig({ ...previous, grid, items: [] }, target);
+        delete configs.items;
+        if (target === "pc" && previous.designTarget === "mobile") {
+          configs.grid = { ...normalizeDashboardConfig({}).grid, colNum: 24 };
+          configs.autoHeight = configs.grid.rowHeight === "auto";
+        }
+        this.pageGlobalConfigs = mergeGridConfigs(configs).configs;
+        await this.$nextTick();
+        if (await this.saveConfigs() !== true) {
+          this.pageGlobalConfigs = previous;
+          return;
+        }
+        this.$store.commit("DELETE_PAGE", { pageId: this.$query.id });
+        this.mobileDirty = false;
+        this.chooseDesignTarget = false;
+      } catch (e) {
+        this.pageGlobalConfigs = previous;
+        this.$message.error(e.message || "保存设计端失败，请重试");
+      } finally {
+        await this.$nextTick();
+        this.choosingDesignTarget = false;
+      }
+    },
+    addMobileInto(item) {
+      this.mobileAddParent = item.id;
+      this.addComponentDialog = true;
+    },
+    selectMobileItem(item, tab) {
+      if (!item) return;
+      const info = this.componentList.find((component) => component.CODE === item.contentType) || { CODE: item.contentType };
+      const configs = { ...item, ...item.configs, ...this.allComponentConfigs[item.id] };
+      this.clickComponent(item.id, info, configs, void 0, tab);
+    },
+    editMobileData(item) {
+      this.selectMobileItem(item);
+      const configs = { ...item.configs, ...this.allComponentConfigs[item.id] };
+      const callback = () => {
+        const owner = this.selectComponentList.find((root) => indexDashboardItems([root]).has(String(item.id))) || item;
+        this.$refs.dashboardDesign.reloadComponent[owner.id] = true;
+        this.$nextTick(() => {
+          this.$refs.dashboardDesign.reloadComponent[owner.id] = false;
+        });
+      };
+      if (item.contentType === "report-chart") {
+        this.goPage({ openMode: "2", component: "report-design", params: { defaultFullscreen: true, withHeader: false, id: configs.id, callback } });
+        return;
+      }
+      if (item.contentType === "report-html") {
+        if (!configs.id) return;
+        return this.$http.get({ entityId: "FM_FORM", id: configs.id }).then((result) => this.goPage({ component: result.data.TYPE === "excelReport" ? "excel-design" : "form-design", metaId: "FM_FORM", params: { id: configs.id, callback } })).catch((e) => this.$message.error(e.message || "打开报表设计失败"));
+      }
+      if (item.contentType !== "chart") return;
+      this.$createPage({
+        metaId: "FM_REPORT_BASE",
+        openType: "2",
+        defaultFullscreen: true,
+        withHeader: false,
+        component: "chart-design",
+        chartConfigs: configs,
+        setChartConfig: (configs2) => {
+          this.changeItemConfigs(item.id, this.$_.cloneDeep(configs2), null, "cover");
+          callback();
+        }
+      });
+    },
+    async deleteMobileItem(item) {
+      try {
+        await this.$confirm("删除该组件及其内部组件？", "删除组件", { type: "warning" });
+      } catch (e) {
+        return;
+      }
+      removeDashboardItem(this.selectComponentList, item.id, this.allComponentConfigs);
+      this.selectComponent = null;
+      this.$refs.dashboardDesign.selectComponent = null;
+    },
+    async saveMobileDashboard() {
+      if (this.mobileSaving) return false;
+      this.mobileSaving = true;
+      const revision = this.mobileRevision;
+      try {
+        const saved = await this.saveConfigs();
+        if (saved) {
+          if (revision === this.mobileRevision) this.mobileDirty = false;
+          this.$store.commit("DELETE_PAGE", { pageId: this.$query.id });
+          this.$message.success("移动端看板已保存");
+        }
+        return saved;
+      } catch (e) {
+        this.$message.error(e.message || "保存移动端看板失败");
+        return false;
+      } finally {
+        this.mobileSaving = false;
+      }
+    },
+    warnUnsavedMobile(event) {
+      if (this.isMobileDashboard && this.mobileDirty) {
+        event.preventDefault();
+        event.returnValue = "";
+      }
+    },
+    async confirmLeaveMobile() {
+      if (!this.isMobileDashboard || !this.mobileDirty) return true;
+      try {
+        await this.$confirm("移动端看板有未保存的修改，是否离开？", "未保存修改", { confirmButtonText: "离开", cancelButtonText: "继续设计", type: "warning", customClass: "dashboard-leave-confirm", closeOnClickModal: false });
+        return true;
+      } catch (e) {
+        return false;
+      }
+    },
+    $refesh() {
+      if (this.$refs.dashboardDesign) this.$refs.dashboardDesign.$refesh();
+    },
+    getPageInfo() {
+      return this.getPageId().then((page) => {
+        const { metaId } = page;
+        if (metaId) this.pageMetaId = metaId;
+        this.getMetaId().then(() => {
+          this.getDefaultConfig();
+          this.getThemeList().then(() => {
+            this.getConfigThemeStyles();
+          });
+          this.loadConfig = true;
+        });
+        return page;
+      });
+    },
+    getPageId() {
+      if (!this.$query.id || !this.$_.isEmpty(this.currentPage)) {
+        return Promise.resolve(this.currentPage);
+      }
+      return this.$store.dispatch({
+        type: "ADD_PAGE",
+        pageId: this.$query.id
+      });
+    },
+    getMetaId() {
+      if (!this.currentMetaId || this.currentMeta) {
+        return Promise.resolve(this.currentMeta);
+      } else {
+        return this.$store.dispatch({
+          type: "ADD_META",
+          metaId: this.currentMetaId
+        });
+      }
+    },
+    getComponetName(component) {
+      if (component && component.PATH) {
+        let project = "frame";
+        let pathName = "";
+        const pagePath = component.PATH;
+        const rootMatch = pagePath.match(/^@\/\w+\//);
+        if (rootMatch) {
+          project = rootMatch[0].replace(/[@|/]/g, "");
+          pathName = pagePath.split(rootMatch)[1].replace(".vue", "");
+        }
+        const componentPath = pathName.replace("views/", "").replace("components/", "").replace("packages/", "").replace(/\//g, "-").replace(/(\w)([A-Z])/g, "$1-$2").toLowerCase();
+        const componentName = (project === "frame" ? "" : project + "-") + componentPath;
+        return componentName;
+      }
+      return null;
+    },
+    getVisualComponent(component) {
+      if (component && component.VISUAL_CONFIG_PATH) {
+        let pathName = "";
+        const pagePath = component.VISUAL_CONFIG_PATH;
+        const rootMatch = pagePath.match(/^@\/(frame\/|product\/|project\/)?/);
+        if (rootMatch) {
+          pathName = pagePath.split(rootMatch[0])[1].replace(".vue", "");
+        }
+        const componentPath = pathName.replace("views/", "").replace("components/", "").replace("packages/", "").replace(/\//g, "-").replace(/(\w)([A-Z])/g, "$1-$2").toLowerCase();
+        const componentName = componentPath;
+        return componentName;
+      }
+      return null;
+    },
+    getComponentList() {
+      this.$http.list({
+        entityId: "FM_PAGE",
+        "scope.TYPE": "01",
+        order_field: "ORDER_NUM",
+        order_mode: "asc"
+      }).then((data) => {
+        const componentList = data.entitys;
+        componentList.forEach((item) => {
+          item.componentName = item.CODE;
+          if (item.COMPONENT_TYPE === "page") {
+            const componentName = this.getComponetName(item);
+            item.componentName = componentName;
+          }
+          const visualComponentName = this.getVisualComponent(item);
+          item.visualComponentName = visualComponentName;
+        });
+        this.componentList = [...componentList];
+      });
+    },
+    getDefaultConfig() {
+      const { dashboardType, compId, componentInfo = {}, itemConfigs: queryItemConfigs = {} } = this.$query;
+      const { config: pageConfigs = {} } = this.currentPage || {};
+      this.chooseDesignTarget = dashboardType !== "component" && !(pageConfigs.items || []).length && !["pc", "mobile"].includes(pageConfigs.designTarget);
+      if (dashboardType === "component") {
+        this.upCompId = compId;
+        const { config: config2 = {} } = componentInfo;
+        const { items = [], ...globalConfigs } = normalizeDashboardConfig({ ...config2, ...queryItemConfigs[compId] || {} });
+        this.selectComponentList = ensureGridItemKey(items);
+        this.pageGlobalConfigs = mergeGridConfigs(globalConfigs).configs;
+        this.allComponentConfigs = this.$_.cloneDeep(queryItemConfigs);
+      } else {
+        const { itemConfigs = {}, items = [], ...globalConfigs } = normalizeDashboardConfig(pageConfigs);
+        this.selectComponentList = ensureGridItemKey(items);
+        this.pageGlobalConfigs = mergeGridConfigs(globalConfigs).configs;
+        this.allComponentConfigs = itemConfigs;
+        if (pageConfigs.version !== this.version) {
+          this.upgradePageConfig();
+        }
+      }
+      if (!this.pageGlobalConfigs.theme) this.pageGlobalConfigs.theme = DEFAULT_DASHBOARD_THEME;
+      this.getScopeConfigs();
+      this.getEntityRelation();
+      this.$nextTick(() => {
+        this.configReady = true;
+      });
+    },
+    upgradePageConfig() {
+      const ids = [];
+      const upgradeWidget = (arr, parentId) => {
+        arr.forEach((item) => {
+          const oldId = item.id;
+          if (parentId) {
+            while (ids.includes(item.id)) {
+              const code = item.contentType.replace(/-/g, "_");
+              item.id = code + "_" + this.$util.genId();
+            }
+            ids.push(item.id);
+            item.i = item.id;
+            const oldWidgetConifg = this.allComponentConfigs[parentId + "-" + oldId];
+            if (oldWidgetConifg) {
+              delete this.allComponentConfigs[parentId + "-" + oldId];
+              this.allComponentConfigs = { ...this.allComponentConfigs, [item.id]: { ...oldWidgetConifg } };
+            }
+          }
+          if (item.items) {
+            upgradeWidget(item.items, parentId ? parentId + "-" + oldId : oldId);
+          }
+        });
+      };
+      upgradeWidget(this.selectComponentList);
+      this.pageGlobalConfigs.version = this.version;
+    },
+    getReportList() {
+      this.reportLoading = true;
+      this.$http.list({
+        entityId: "FM_REPORT_BASE",
+        "scope.SYSTEM": this.SYSTEM,
+        scopeParams: JSON.stringify(this.reportScopeParams),
+        page: this.currentReportPage,
+        limit: 20
+      }).then((data) => {
+        this.reportList = data.entitys;
+        this.reportTotal = data.total;
+        this.reportList.forEach((item) => this.reportMap[item.ID] = item);
+        setTimeout(() => {
+          this.reportLoading = false;
+        }, 300);
+      }).catch((err) => {
+        this.reportLoading = false;
+        this.$message.error(err.message);
+      });
+    },
+    getThemeList() {
+      return this.$http.list({
+        entityId: "FM_CHART_THEME",
+        order_field: "SCOPE,ORDER_NUM",
+        order_mode: "desc,asc",
+        scopeParams: [
+          { field: "SCOPE", values: "frame", link: "or" },
+          { field: "CLIENT", values: this.CLIENT }
+        ]
+      }).then((data) => {
+        this.themeList = data.entitys;
+        return this.themeList;
+      });
+    },
+    savePreset() {
+      this.saveThemeDialog = true;
+      const themeItem = this.themeList.find((item) => item.CODE === this.activeTheme);
+      this.themeFormData = {
+        STYLE: themeItem == null ? void 0 : themeItem.STYLE
+      };
+    },
+    saveTheme() {
+      const formData = {
+        SCOPE: "client"
+      };
+      for (const key in this.themeFormData) {
+        if (!key.includes("#")) {
+          formData[key] = this.themeFormData[key];
+        }
+      }
+      if (!this.isEditTheme || !this.themeFormData.ID) formData.CONTENT = JSON.stringify(this.themeStyles);
+      const params = {
+        entityId: "FM_CHART_THEME",
+        bean: {
+          ...formData,
+          CLIENT: this.CLIENT,
+          SYSTEM: this.SYSTEM
+        }
+      };
+      if (this.themeFormData.ID) {
+        params.action = "update";
+      }
+      return this.$http.save(params).then(() => {
+        this.$message.success(this.$t("save successfully"));
+        this.isEditTheme = false;
+        this.saveThemeDialog = false;
+        this.getThemeList();
+      }).catch((err) => {
+        this.$message.error(err.message || this.$t("fail to save"));
+      });
+    },
+    themeHandleCommand(theme, command) {
+      if (command === "edit") {
+        this.saveThemeDialog = true;
+        this.isEditTheme = true;
+        this.themeFormData = { ...theme };
+      } else if (command === "remove") {
+        this.$confirm("是否删除该预设?", "提示", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        }).then(() => {
+          this.$http.removeMulti({
+            entityId: "FM_CHART_THEME",
+            ids: theme.ID
+          }).then(() => {
+            this.$message.success(this.$t("delete successfully"));
+            this.getThemeList();
+          }).catch((err) => {
+            this.$message.error(err.message || this.$t("fail to delete"));
+          });
+        });
+      } else if (command === "config") {
+        this.editTheme = theme;
+        this.isEditTheme = false;
+      }
+    },
+    currentReportChange(v) {
+      this.currentReportPage = v;
+      this.getReportList();
+    },
+    searchReport(v) {
+      this.reportScopeParams = v;
+      this.currentReportPage = 1;
+      this.getReportList();
+    },
+    getDashboardList() {
+      this.dashboardLoading = true;
+      this.$http.list({
+        entityId: "FM_PAGE_CONFIG",
+        "scope.SYSTEM": this.SYSTEM,
+        "scope.PAGE|CODE": "dashboard",
+        scopeParams: JSON.stringify(this.dashboardScopeParams),
+        page: this.currentDashbaordPage,
+        limit: 10
+      }).then((data) => {
+        this.dashboardTotal = data.total;
+        setTimeout(() => {
+          this.dashboardLoading = false;
+        }, 300);
+        data.entitys.forEach((item) => {
+          const pageConfig = item.CONTENT ? JSON.parse(item.CONTENT) : {};
+          const { items = [], itemConfigs = {} } = pageConfig;
+          const children = [];
+          items.forEach((comp) => {
+            children.push({
+              ...comp,
+              configs: itemConfigs[comp.id] || {}
+            });
+            if (comp.items) {
+              comp.items.forEach((tab) => {
+                tab.items.forEach((child) => {
+                  children.push({
+                    ...child,
+                    configs: itemConfigs[comp.id + "-" + child.id] || {}
+                  });
+                });
+              });
+            }
+          });
+          item.children = children;
+        });
+        this.dashboardList = data.entitys.map((item) => {
+          item.children = item.children.filter((child) => child.contentType === "chart");
+          return item;
+        });
+      }).catch((err) => {
+        this.dashboardLoading = false;
+        this.$message.error(err.message);
+      });
+    },
+    currentDashbaordChange(v) {
+      this.currentDashboardPage = v;
+      this.getDashboardList();
+    },
+    searchDashboard(v) {
+      this.dashboardScopeParams = v;
+      this.currentDashboardPage = 1;
+      this.getDashboardList();
+    },
+    selectReport(item) {
+      const index = this.selectedReportList.findIndex((report) => report === item.ID);
+      if (index !== -1) {
+        this.selectedReportList.splice(index, 1);
+        this.selectedReportDataList.splice(index, 1);
+      } else {
+        this.selectedReportList.push(item.ID);
+        this.selectedReportDataList.push(item);
+      }
+    },
+    selectDashboardComp(dashbaord, item) {
+      const id = dashbaord.ID + "-" + item.id;
+      const index = this.selectedDashboardCompList.findIndex((comp) => comp === id);
+      if (index !== -1) {
+        this.selectedDashboardCompList.splice(index, 1);
+        this.selectedDashboardCompDataList.splice(index, 1);
+      } else {
+        this.selectedDashboardCompList.push(id);
+        this.selectedDashboardCompDataList.push(item);
+      }
+    },
+    changeDashboardSelect(dashboard, v) {
+      dashboard.children.forEach((item) => {
+        const id = dashboard.ID + "-" + item.id;
+        const index = this.selectedDashboardCompList.indexOf(id);
+        if (index !== -1) {
+          if (!v) this.selectedDashboardCompList.splice(index, 1);
+        } else {
+          if (v) this.selectedDashboardCompList.push(id);
+        }
+      });
+    },
+    switchDashboardFoldFn(dashboard) {
+      this.foldDashboardMap[dashboard.ID] = !this.foldDashboardMap[dashboard.ID];
+    },
+    quoteComp() {
+      for (let i = 0; i < this.selectedDashboardCompDataList.length; i++) {
+        const comp = this.selectedDashboardCompDataList[i];
+        if (comp) {
+          this.addComponentToDashboard({
+            w: comp.w,
+            h: comp.h,
+            TITLE: comp.title,
+            CODE: comp.contentType
+          }, { ...comp.configs });
+        }
+      }
+      this.copyComponentDialog = false;
+      this.selectedDashboardCompDataList = [];
+      this.selectedReportDataList = [];
+      this.selectedReportList = [];
+      this.selectedDashboardCompList = [];
+    },
+    copyReport(id) {
+      return this.$http.save({
+        entityId: "FM_REPORT_BASE",
+        action: "copy",
+        oldRecordId: id
+      });
+    },
+    async copyComp() {
+      for (let i = 0; i < this.selectedReportDataList.length; i++) {
+        const report = this.selectedReportDataList[i];
+        if (report) {
+          const data = await this.copyReport(report.ID);
+          this.addReportToDashboard({ id: data.id });
+        }
+      }
+      for (let i = 0; i < this.selectedDashboardCompDataList.length; i++) {
+        const comp = this.selectedDashboardCompDataList[i];
+        if (comp) {
+          if (comp.contentType === "report-chart") {
+            const data = await this.copyReport(comp.configs.id);
+            this.addComponentToDashboard({
+              w: comp.w,
+              h: comp.h,
+              TITLE: comp.title,
+              CODE: comp.contentType
+            }, { ...comp.configs, id: data.id });
+          } else {
+            this.addComponentToDashboard({
+              w: comp.w,
+              h: comp.h,
+              TITLE: comp.title,
+              CODE: comp.contentType
+            });
+          }
+        }
+      }
+      this.copyComponentDialog = false;
+      this.selectedDashboardCompDataList = [];
+      this.selectedReportDataList = [];
+      this.selectedReportList = [];
+      this.selectedDashboardCompList = [];
+    },
+    setReportType(reportType) {
+      this.addReportForm.TYPE = reportType.type;
+      if (reportType.type === "1") {
+        this.addReportForm.CHART_TYPE = null;
+      } else {
+        this.addReportForm.CHART_TYPE = reportType.chartType;
+      }
+    },
+    openAddReportDialog() {
+      this.addReportDialog = true;
+      this.addReportForm.OBJECT = this.currentMetaId;
+    },
+    saveReport() {
+      if (this.addReportForm.TYPE === "numStatistic") {
+        const newComp = this.addComponentToDashboard({ TITLE: "数字统计", CODE: "num-statistic" });
+        if (this.addReportForm.OBJECT) {
+          this.changeItemConfigs(newComp.id, { metaId: this.addReportForm.OBJECT.id });
+        }
+        this.addReportForm = {};
+        this.addReportDialog = false;
+      } else if (this.addReportForm.TYPE === "dashboardTitle") {
+        this.addComponentToDashboard({ TITLE: "标题", CODE: "dashboard-title", w: 48, h: 3 });
+        this.addReportForm = {};
+        this.addReportDialog = false;
+      } else if (this.addReportForm.TYPE === "dashboardDiv") {
+        this.addComponentToDashboard({ TITLE: "容器", CODE: "dashboard-div", w: 10, h: 10 });
+        this.addReportForm = {};
+        this.addReportDialog = false;
+      } else if (this.addReportForm.TYPE === "form") {
+        if (!this.addReportForm.FORM_TYPE) {
+          this.$message.error("请选择报表类型");
+          return;
+        }
+        this.$http.save({
+          entityId: "FM_FORM",
+          "bean.CLIENT": this.CLIENT,
+          "bean.SYSTEM": this.SYSTEM,
+          "bean.TYPE": this.addReportForm.FORM_TYPE
+        }).then((data) => {
+          this.addComponentToDashboard({ TITLE: "报表", CODE: "report-html" }, { id: data });
+          this.addReportForm = {};
+          this.addReportDialog = false;
+        }).catch((err) => this.$message.error(err.message));
+      } else {
+        const metaId = this.addReportForm.OBJECT ? this.addReportForm.OBJECT.id || this.addReportForm.OBJECT : "";
+        const metaViewId = this.addReportForm.OBJECT_VIEW ? this.addReportForm.OBJECT_VIEW.id || this.addReportForm.OBJECT_VIEW : "";
+        this.addChartToDashboard({ type: this.addReportForm.TYPE === "1" ? "table" : this.addReportForm.CHART_TYPE, metaId, metaViewId });
+        this.addReportForm = {};
+        this.addReportDialog = false;
+      }
+    },
+    async back() {
+      if (!await this.confirmLeaveMobile()) return;
+      this.mobileDirty = false;
+      if (this.newWindow) {
+        window.close();
+      } else if (this.upCompId) {
+        this.backPage();
+      } else {
+        this.$store.commit("DELETE_PAGE", { pageId: this.$query.id });
+        this.backPage({ reload: true });
+      }
+    },
+    getEntityRelation() {
+      this.$http.$get({
+        entityId: "FM_ENTITY_RELATION",
+        action: "getEntityRelationTree",
+        mainEntity: this.currentMetaId
+      }).then((data) => {
+        data.forEach((relation) => {
+          relation.label = relation.title;
+          relation.value = relation.flag;
+          relation.children = relation.childrens;
+          if (relation.childrens) {
+            relation.childrens.forEach((childRelation) => {
+              childRelation.value = relation.flag + "#" + childRelation.flag;
+              childRelation.label = childRelation.title;
+            });
+          }
+        });
+        this.relationList = data;
+      });
+    },
+    /**
+     * 获取查询配置
+     */
+    getScopeConfigs() {
+      this.$http.list({
+        action: "getAllSearchConfig",
+        entityId: "FM_SEARCH_CONFIG"
+      }).then((data) => {
+        this.scopeConfigs = data;
+      });
+    },
+    setComponentId(str) {
+      return str + "_" + this.$util.genId();
+    },
+    changeItemConfigs(key, configs = {}, type, mode) {
+      if (key === "page") {
+        if (configs.componentName !== void 0) {
+          configs.title = configs.componentName;
+          delete configs.componentName;
+        }
+        const { configs: next, colNum } = mergeGridConfigs(this.pageGlobalConfigs, configs);
+        if (colNum) {
+          this.confirmRescale(colNum).then((rescale) => {
+            if (rescale) {
+              rescaleItemsToColNum(this.selectComponentList, colNum.from, colNum.to);
+              this.selectComponentList = [...this.selectComponentList];
+            }
+            this.pageGlobalConfigs = next;
+          });
+          return;
+        }
+        this.pageGlobalConfigs = next;
+      } else {
+        const compId = key;
+        const itemConfig = this.allComponentConfigs[compId] || {};
+        const { flex, layout, direction, justify, align, style, componentName: title, visualComponentName, span, xsspan, items, ...otherConfigs } = configs;
+        let componentAttris = {
+          flex,
+          layout,
+          direction,
+          justify,
+          align,
+          style,
+          title,
+          span,
+          xsspan,
+          items
+        };
+        if (type !== "component") {
+          if (mode === "cover") {
+            this.allComponentConfigs[compId] = { ...otherConfigs };
+          } else {
+            this.allComponentConfigs[compId] = { ...itemConfig, ...otherConfigs };
+          }
+        } else {
+          componentAttris = { ...componentAttris, ...configs };
+        }
+        const selectComponentList = [...this.selectComponentList];
+        const id = key;
+        const changeItem = (componentList) => {
+          for (const component of componentList) {
+            if (component.id === id) {
+              for (const attri in componentAttris) {
+                if (componentAttris[attri] !== void 0) {
+                  component[attri] = componentAttris[attri];
+                  if (component[attri] === null) delete component[attri];
+                }
+              }
+              if (this.selectComponent && compId === this.selectComponent.id) {
+                this.selectComponent = { ...this.selectComponent, ...this.isMobileDashboard ? { config: { ...component, ...component.configs, ...this.allComponentConfigs[compId] } } : { component } };
+              }
+            } else if (component.items && component.items.length > 0) {
+              changeItem(component.items);
+            }
+            if (!component.items) component.items = [];
+          }
+        };
+        changeItem(selectComponentList);
+        this.selectComponentList = [...selectComponentList];
+      }
+    },
+    // 改列数：询问是否按比例换算现有组件的位置与宽度（取消 = 只改参数、坐标不动）。resolve 布尔值，永不 reject
+    confirmRescale({ from, to }) {
+      return this.$confirm(`列数将从 ${from} 改为 ${to}，按比例换算现有组件位置与宽度？（不换算则组件保持原网格坐标）`, "修改列数", {
+        confirmButtonText: "换算",
+        cancelButtonText: "不换算",
+        customClass: "dashboard-grid-rescale-confirm",
+        type: "warning",
+        closeOnClickModal: false
+      }).then(() => true).catch(() => false);
+    },
+    addComponent(component, upId = "root") {
+      const newComp = {
+        id: component.id,
+        title: component.TITLE,
+        contentType: component.componentName || component.CODE
+      };
+      if (upId === "root") {
+        this.selectComponentList.push(newComp);
+      } else {
+        const selectComponentList = [...this.selectComponentList];
+        const ids = upId.split("-");
+        const componentList = ids.reduce((componentList2, id) => {
+          const componentItem = componentList2.find((item) => item.id === id) || {};
+          if (!componentItem.items) componentItem.items = [];
+          return componentItem.items;
+        }, selectComponentList);
+        componentList.push(newComp);
+        this.selectComponentList = selectComponentList;
+        this.$forceUpdate();
+      }
+    },
+    addComponentToDashboard(component, configs) {
+      this.addComponentDialog = false;
+      const dashboard = this.$refs.dashboardDesign;
+      let max = 0;
+      const parent = this.isMobileDashboard && this.mobileAddParent ? indexDashboardItems(this.selectComponentList).get(String(this.mobileAddParent)) : null;
+      const destination = parent ? parent.items || (parent.items = []) : this.selectComponentList;
+      for (const item of this.isMobileDashboard ? destination : dashboard.layout) {
+        if (!max) {
+          max = item.y + item.h;
+        } else if (item.y + item.h > max) {
+          max = item.y + item.h;
+        }
+      }
+      const id = this.setComponentId(component.CODE);
+      const newComp = {
+        x: 0,
+        y: max,
+        // puts it at the bottom
+        w: this.isMobileDashboard ? ["num-statistic", "card-num"].includes(component.CODE) ? this.pageGlobalConfigs.grid.colNum / 2 : this.pageGlobalConfigs.grid.colNum : component.w || 10,
+        h: component.h || (this.isMobileDashboard && ["chart", "report-chart", "dashboard-tabs", "dashboard-div"].includes(component.CODE) ? 16 : 10),
+        i: id,
+        id,
+        title: component.TITLE,
+        contentType: component.CODE
+      };
+      if (this.isMobileDashboard) {
+        if (component.CODE === "dashboard-tabs") newComp.items = [{ id: "tabpane_" + this.$util.genId(), name: "标签项1", items: [] }];
+        destination.push(newComp);
+        if (configs) this.changeItemConfigs(id, configs);
+        this.mobileAddParent = null;
+        this.$nextTick(() => dashboard.openConfig(newComp));
+        return newComp;
+      }
+      dashboard.layout.push(newComp);
+      this.selectComponentList.push(newComp);
+      if (configs) this.changeItemConfigs(id, configs);
+      return newComp;
+    },
+    addChartToDashboard(data, configs = {}) {
+      if (data) {
+        this.addComponentToDashboard({ CODE: "chart", TITLE: "未命名统计报表", ...configs }, { ...data });
+      }
+    },
+    addReportToDashboard(data, configs = {}) {
+      if (data) {
+        this.addComponentToDashboard({ CODE: "report-chart", TITLE: "报表", ...configs }, { id: data.id });
+      }
+    },
+    addTabsToDashboard() {
+      this.addComponentToDashboard({ CODE: "dashboard-tabs", TITLE: "标签页" });
+    },
+    deleteSelectComponent(id, e) {
+      e && e.stopPropagation();
+      const selectComponentList = [...this.selectComponentList];
+      const ids = id.split("-");
+      ids.reduce((componentList, id2, index) => {
+        if (index === ids.length - 1) {
+          const componentIndex = componentList.findIndex((item) => item.id === id2) || {};
+          componentList.splice(componentIndex, 1);
+        } else {
+          const componentItem = componentList.find((item) => item.id === id2) || {};
+          return componentItem.items;
+        }
+      }, selectComponentList);
+      this.selectComponentList = selectComponentList;
+      this.$forceUpdate();
+    },
+    changeConfigs(id, newConfigs) {
+      const configs = this.componentConfigs[id] || {};
+      this.componentConfigs[id] = { ...configs, ...newConfigs };
+    },
+    deleteConfigs(id) {
+      delete this.allComponentConfigs[id];
+    },
+    pageSetting() {
+      const { visualConfigPath } = this.currentPage;
+      const name = this.getVisualComponent({ VISUAL_CONFIG_PATH: visualConfigPath });
+      this.selectComponent = { type: "page", id: "page", ...this.currentPage, visualComponentName: name, config: this.pageGlobalConfigs };
+    },
+    // tab：抽屉打开时定位的 tab（chart 项操作条的「布局」按钮传 'style'，R29）；openSeq 每次打开递增，面板据此区分「打开」与配置改动引起的对象替换
+    clickComponent(componentId, componentInfo, component, upId, tab) {
+      this.openSeq = (this.openSeq || 0) + 1;
+      this.selectComponent = { id: componentId, ...componentInfo, config: component, upId, openTab: tab, openSeq: this.openSeq };
+    },
+    scrollToConfig(componentId) {
+    },
+    setComponentConfig(componentList, itemConfigs = {}, upId) {
+      componentList.forEach((component) => {
+        const componentId = upId ? upId + "-" + component.id : component.id;
+        const configComponentOuter = this.$refs[`config-${component.id}`];
+        if (configComponentOuter) {
+          const configComponent = configComponentOuter.$refs.component;
+          if (configComponent) {
+            const configs = configComponent.getConfigs() || {};
+            const { span, flex, componentName } = configs;
+            if (span) component.span = span;
+            delete component.configs;
+            if (componentName) {
+              component.title = componentName;
+              delete configs.componentName;
+            }
+            if (flex) {
+              component.flex = flex;
+              delete configs.flex;
+            }
+            const defaulConfigs = itemConfigs[componentId] || {};
+            itemConfigs[componentId] = { ...defaulConfigs, ...configs };
+          }
+        }
+        const { items = [] } = component;
+        if (items.length > 0) {
+          this.setComponentConfig(items, itemConfigs, componentId);
+        }
+      });
+    },
+    setContainerDefaultItems(id, items) {
+      if (id === "page") {
+        const { config: pageConfigs = {} } = this.currentPage || {};
+        if (!pageConfigs.items) this.selectComponentList = items;
+      } else {
+        const selectComponentList = [...this.selectComponentList];
+        const ids = id.split("-");
+        ids.reduce((componentList, id2, index) => {
+          const componentItem = componentList.find((item) => item.id === id2) || {};
+          if (!componentItem.items) {
+            if (index === ids.length - 1) componentItem.items = items;
+            else componentItem.items = [];
+          }
+          return componentItem.items;
+        }, selectComponentList);
+        this.selectComponentList = selectComponentList;
+      }
+    },
+    cancelThemePancel() {
+      if (this.editTheme) {
+        this.editTheme = null;
+      } else {
+        this.showPanel = "";
+        this.activeTheme = this.pageGlobalConfigs.theme;
+      }
+      this.getConfigThemeStyles();
+    },
+    selectTheme(theme) {
+      this.activeTheme = theme.CODE;
+      this.changethemeStyles(JSON.parse(theme.CONTENT));
+    },
+    getConfigThemeStyles() {
+      const { theme, themeStyles } = this.pageGlobalConfigs;
+      let selectedTheme = theme || DEFAULT_DASHBOARD_THEME;
+      let themeItem = this.themeList.find((item) => item.CODE === selectedTheme);
+      if (!themeItem && selectedTheme === DEFAULT_DASHBOARD_THEME) {
+        themeItem = this.themeList.find((item) => item.NAME === "经典白" && item.CODE);
+        if (themeItem) selectedTheme = themeItem.CODE;
+      }
+      if (this.pageGlobalConfigs.theme !== selectedTheme) this.pageGlobalConfigs.theme = selectedTheme;
+      this.activeTheme = selectedTheme;
+      if (themeStyles) {
+        this.styleType = "custom";
+        this.themeStyles = themeStyles;
+      } else {
+        this.styleType = "presets";
+        this.themeStyles = (themeItem == null ? void 0 : themeItem.CONTENT) ? typeof themeItem.CONTENT === "string" ? JSON.parse(themeItem.CONTENT) : themeItem.CONTENT : null;
+      }
+    },
+    changethemeStyles(v) {
+      this.themeStyles = v;
+    },
+    setTheme() {
+      if (this.editTheme) {
+        this.themeFormData = { ...this.editTheme };
+        this.saveTheme().then(() => {
+          this.editTheme = null;
+        });
+      } else {
+        this.showPanel = "";
+        if (this.styleType === "custom") {
+          this.changeItemConfigs("page", { themeStyles: this.themeStyles });
+        } else {
+          this.changeItemConfigs("page", { theme: this.activeTheme, themeStyles: null });
+        }
+      }
+    },
+    delaySaveConfigs() {
+      if (this.chooseDesignTarget || this.choosingDesignTarget) return;
+      if (this.isMobileDashboard) {
+        if (this.configReady) {
+          this.mobileDirty = true;
+          this.mobileRevision++;
+        }
+        return;
+      }
+      if (this.timer) {
+        clearTimeout(this.timer);
+      }
+      this.timer = setTimeout(() => {
+        this.saveConfigs();
+        clearTimeout(this.timer);
+        this.timer = null;
+      }, 1e3);
+    },
+    saveConfigs(event, next, errorFn) {
+      const selectComponentList = [...this.selectComponentList];
+      const rawItemConfigs = { ...this.allComponentConfigs };
+      this.setComponentConfig(selectComponentList, rawItemConfigs, "");
+      const { itemConfigs, ...config2 } = stripDashboardConfig({ ...this.pageGlobalConfigs, version: this.version, items: selectComponentList, itemConfigs: rawItemConfigs });
+      for (const key in itemConfigs) {
+        const itemConfig = itemConfigs[key];
+        for (const itemKey in itemConfig) {
+          if (itemConfig[itemKey] === null || itemConfig[itemKey] === void 0) {
+            delete itemConfig[itemKey];
+          }
+        }
+        if (this.$_.isEmpty(itemConfig)) {
+          delete itemConfigs[key];
+        }
+      }
+      this.selectComponentList = [...selectComponentList];
+      if (this.upCompId) {
+        const { setCompConfigs } = this.$query;
+        setCompConfigs(config2, itemConfigs);
+      } else {
+        config2.itemConfigs = itemConfigs;
+        return __epxPackagePreload(() => import(
+          /* webpackChunkName: "standalone" */
+          "@babel/standalone"
+        ), true ? [] : void 0, import.meta.url).then((babel) => {
+          const es5 = babel.transform(config2.JS || "", { presets: ["env"] });
+          config2.compileJS = es5.code;
+          for (const key in config2) {
+            if (config2[key] === null) {
+              delete config2[key];
+            }
+          }
+          return this.savePageConfigs(config2, next, errorFn);
+        });
+      }
+    },
+    saveGlobalConfigs() {
+      this.pageSettingDrawer = false;
+    },
+    savePageConfigs(config2) {
+      let formParams = {};
+      const globalConfig = this.$refs.globalConfig;
+      if (globalConfig) {
+        const formComp = this.getComponentById("form", globalConfig);
+        if (formComp) {
+          formParams = formComp.getFormData();
+          if (!formParams) return;
+        }
+      }
+      const saveEntityId = this.$query.saveEntityId;
+      const saveField = this.$query.saveField || "CONTENT";
+      return this.$http.update({
+        entityId: saveEntityId || this.$metaId,
+        ...formParams,
+        [`bean.${this.$metaKey}`]: this.$query.id,
+        [`bean.${saveField}`]: JSON.stringify(config2, null, "	")
+      }).then((data) => {
+        if (this.newWindow) {
+          if (window.opener) window.opener.postMessage({ pageId: this.$query.id, type: "configPage" }, "/");
+        }
+        return true;
+      }).catch((err) => {
+        this.$message.error(err.message || this.$t("fail to save"));
+        return false;
+      });
+    },
+    switchMobile() {
+      const { mItems } = this.pageGlobalConfigs;
+      this.openSuspendedPopup({
+        component: "visual-config-dashboard-mobile",
+        params: {
+          withHeader: false,
+          componentList: this.selectComponentList,
+          mobileComponentList: mItems,
+          theme: this.activeTheme,
+          themeStyles: this.themeStyles,
+          itemConfigs: this.allComponentConfigs,
+          // 页面全局配置：移动端设计器据其 grid 推网格参数（行高沿用页面、间距换成移动端 [8,8]），与运行态移动端一致
+          globalConfigs: this.pageGlobalConfigs,
+          changeMItems: (v) => {
+            this.pageGlobalConfigs.mItems = v;
+            this.mobileComponentList = v;
+          }
+        }
+      });
+    },
+    updatePreviewViewport() {
+      this.previewViewportWidth = window.innerWidth;
+      this.previewViewportHeight = window.innerHeight;
+    },
+    openSuspendedPopup(page) {
+      this.previewSuspended = true;
+      this.$nextTick(() => {
+        const previousPopups = new Set(window.openedPopup || []);
+        this.goPage(page);
+        const popup = (window.openedPopup || []).find((item) => !previousPopups.has(item) && !item.closed);
+        if (!popup) {
+          this.previewSuspended = false;
+          return;
+        }
+        if (this.previewPopupTimer) clearInterval(this.previewPopupTimer);
+        this.previewPopupTimer = setInterval(() => {
+          if (!popup.disposed) return;
+          clearInterval(this.previewPopupTimer);
+          this.previewPopupTimer = null;
+          this.previewSuspended = false;
+        }, 200);
+      });
+    },
+    preview() {
+      if (this.isMobileDashboard) {
+        this.updatePreviewViewport();
+        this.mobilePreviewVisible = true;
+        return;
+      }
+      this.$store.commit("DELETE_PAGE", { pageId: this.$query.id });
+      setTimeout(() => {
+        this.openSuspendedPopup({
+          pageId: this.$query.id
+        });
+      }, 100);
+    }
+  },
+  watch: {
+    pageGlobalConfigs: {
+      handler(v) {
+        if (!this.$_.isEqual(this.oldPageGlobalConfigs, v)) {
+          this.delaySaveConfigs();
+        }
+        this.oldPageGlobalConfigs = this.$_.cloneDeep(v);
+      },
+      deep: true
+    },
+    selectComponentList: {
+      handler(v) {
+        if (!this.$_.isEqual(this.oldSelectComponentList, v)) {
+          this.delaySaveConfigs();
+        }
+        this.oldSelectComponentList = this.$_.cloneDeep(v);
+      },
+      deep: true
+    },
+    allComponentConfigs: {
+      handler(v) {
+        if (!this.$_.isEqual(this.oldAllComponentConfigs, v)) {
+          this.delaySaveConfigs();
+        }
+        this.oldAllComponentConfigs = this.$_.cloneDeep(v);
+      },
+      deep: true
+    }
+  },
+  created() {
+    window.addEventListener("resize", this.updatePreviewViewport);
+    window.addEventListener("beforeunload", this.warnUnsavedMobile);
+    this.removeMobileRouteGuard = this.$router.beforeEach(() => this.confirmLeaveMobile());
+    if (this.showMenu) {
+      this.changeMenuFlag = true;
+      this.$store.commit("SWITCH_MENU_SHOW", false);
+    }
+    if (this.showAppNav) {
+      this.changeAppNavFlag = true;
+      this.$store.commit("SWITCH_APP_NAV_SHOW", false);
+    }
+    this.getPageInfo();
+    if (this.$query.dashboardType === "component") {
+      this.getDefaultConfig();
+    }
+    this.getComponentList();
+    this.getReportList();
+    this.getDashboardList();
+  },
+  beforeUnmount() {
+    window.removeEventListener("resize", this.updatePreviewViewport);
+    if (this.previewPopupTimer) clearInterval(this.previewPopupTimer);
+    if (this.timer) clearTimeout(this.timer);
+    window.removeEventListener("beforeunload", this.warnUnsavedMobile);
+    if (this.removeMobileRouteGuard) this.removeMobileRouteGuard();
+    if (this.changeMenuFlag) {
+      this.$store.commit("SWITCH_MENU_SHOW", true);
+    }
+    if (this.changeAppNavFlag) {
+      this.$store.commit("SWITCH_APP_NAV_SHOW", true);
+    }
+  }
+};
+const _hoisted_1 = { class: "page-header" };
+const _hoisted_2 = { class: "page-title" };
+const _hoisted_3 = { class: "page-header__title" };
+const _hoisted_4 = { class: "page-header__operate" };
+const _hoisted_5 = {
+  key: 2,
+  class: "mobile-save-status"
+};
+const _hoisted_6 = {
+  key: 0,
+  class: "design-target-picker"
+};
+const _hoisted_7 = { class: "design-target-picker__options" };
+const _hoisted_8 = {
+  key: 1,
+  class: "page-content"
+};
+const _hoisted_9 = { class: "page-tabs" };
+const _hoisted_10 = { class: "function-panel" };
+const _hoisted_11 = {
+  key: 0,
+  class: "dashboard-theme"
+};
+const _hoisted_12 = { class: "dashboard-theme__title" };
+const _hoisted_13 = { class: "dashboard-theme__content" };
+const _hoisted_14 = {
+  key: 0,
+  class: "dashboard-theme__list"
+};
+const _hoisted_15 = ["onClick"];
+const _hoisted_16 = { class: "dashboard-theme__preview" };
+const _hoisted_17 = ["src"];
+const _hoisted_18 = { class: "dashboard-theme__name" };
+const _hoisted_19 = { class: "dashboard-theme__name-text" };
+const _hoisted_20 = {
+  key: 0,
+  class: "dashboard-theme__name-icon el-icon-user"
+};
+const _hoisted_21 = { class: "dashboard-theme__footer" };
+const _hoisted_22 = {
+  key: 0,
+  class: "page-preview"
+};
+const _hoisted_23 = {
+  key: 0,
+  class: "config-panel"
+};
+const _hoisted_24 = {
+  key: 0,
+  class: "add-report-body"
+};
+const _hoisted_25 = { class: "add-report-item" };
+const _hoisted_26 = { class: "report-type__list" };
+const _hoisted_27 = ["onClick"];
+const _hoisted_28 = { class: "add-report-item" };
+const _hoisted_29 = { class: "add-report-item" };
+const _hoisted_30 = { class: "add-report-item" };
+const _hoisted_31 = { class: "add-report-footer" };
+const _hoisted_32 = { class: "dashboard-search" };
+const _hoisted_33 = { class: "dashboard-list" };
+const _hoisted_34 = { class: "dashboard-header" };
+const _hoisted_35 = ["onClick"];
+const _hoisted_36 = { class: "dashboard-body" };
+const _hoisted_37 = { class: "dashboard-comp__list" };
+const _hoisted_38 = ["onClick"];
+const _hoisted_39 = {
+  key: 0,
+  class: "no-data"
+};
+const _hoisted_40 = { class: "dialog-footer" };
+const _hoisted_41 = { class: "page-setting" };
+const _hoisted_42 = { class: "page-setting__header" };
+const _hoisted_43 = { class: "page-setting__content" };
+const _hoisted_44 = { class: "page-setting__footer" };
+const _hoisted_45 = { class: "mobile-preview-phone__screen" };
+const _hoisted_46 = ["title"];
+const _hoisted_47 = { class: "mobile-dashboard-preview" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_el_tag = resolveComponent("el-tag");
+  const _component_el_button = resolveComponent("el-button");
+  const _component_el_option = resolveComponent("el-option");
+  const _component_el_select = resolveComponent("el-select");
+  const _component_el_radio_button = resolveComponent("el-radio-button");
+  const _component_el_radio_group = resolveComponent("el-radio-group");
+  const _component_el_dropdown_item = resolveComponent("el-dropdown-item");
+  const _component_el_dropdown_menu = resolveComponent("el-dropdown-menu");
+  const _component_el_dropdown = resolveComponent("el-dropdown");
+  const _component_dashboard_theme_setting = resolveComponent("dashboard-theme-setting");
+  const _component_epx_visual_config_panel = resolveComponent("epx-visual-config-panel");
+  const _component_dashboard_mobile = resolveComponent("dashboard-mobile");
+  const _component_epx_visual_config_dashboard_design = resolveComponent("epx-visual-config-dashboard-design");
+  const _component_el_drawer = resolveComponent("el-drawer");
+  const _component_epx_object = resolveComponent("epx-object");
+  const _component_el_radio = resolveComponent("el-radio");
+  const _component_el_dialog = resolveComponent("el-dialog");
+  const _component_epx_visual_component_library_dialog = resolveComponent("epx-visual-component-library-dialog");
+  const _component_epx_search_fields = resolveComponent("epx-search-fields");
+  const _component_el_checkbox = resolveComponent("el-checkbox");
+  const _component_el_pagination = resolveComponent("el-pagination");
+  const _component_el_tab_pane = resolveComponent("el-tab-pane");
+  const _component_el_tabs = resolveComponent("el-tabs");
+  const _component_epx_add_form_item = resolveComponent("epx-add-form-item");
+  const _component_dashboard_preview = resolveComponent("dashboard-preview");
+  const _directive_loading = resolveDirective("loading");
+  return openBlock(), createElementBlock("div", {
+    class: normalizeClass(["config-container config-container--dashboard-designer", { "config-container--new-window": $props.newWindow, "config-container--mobile-dashboard": $options.isMobileDashboard }])
+  }, [
+    createElementVNode("div", _hoisted_1, [
+      createElementVNode("i", {
+        class: "page-header__back el-icon-arrow-left",
+        onClick: _cache[0] || (_cache[0] = (...args) => $options.back && $options.back(...args))
+      }),
+      createElementVNode("p", _hoisted_2, [
+        createElementVNode("span", _hoisted_3, toDisplayString($options.title), 1),
+        !$data.chooseDesignTarget ? (openBlock(), createBlock(_component_el_tag, {
+          key: 0,
+          size: "small"
+        }, {
+          default: withCtx(() => [
+            createTextVNode(toDisplayString($options.isMobileDashboard ? "移动端看板" : "PC 看板"), 1)
+          ]),
+          _: 1
+        })) : createCommentVNode("", true)
+      ]),
+      createElementVNode("div", _hoisted_4, [
+        $data.configReady && !$data.selectComponentList.length ? (openBlock(), createBlock(_component_el_button, {
+          key: 0,
+          size: "small",
+          disabled: $data.choosingDesignTarget,
+          onClick: _cache[1] || (_cache[1] = ($event) => $data.chooseDesignTarget = true)
+        }, {
+          default: withCtx(() => [..._cache[36] || (_cache[36] = [
+            createTextVNode("选择设计端", -1)
+          ])]),
+          _: 1
+        }, 8, ["disabled"])) : createCommentVNode("", true),
+        !$data.chooseDesignTarget ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+          createElementVNode("p", {
+            class: "header-operate__item",
+            onClick: _cache[2] || (_cache[2] = ($event) => $data.showPanel = "style")
+          }, [..._cache[37] || (_cache[37] = [
+            createElementVNode("i", { class: "epx-icon-yangshi" }, null, -1),
+            createTextVNode("样式", -1)
+          ])]),
+          !$options.isMobileDashboard ? (openBlock(), createElementBlock("p", {
+            key: 0,
+            class: "header-operate__item",
+            onClick: _cache[3] || (_cache[3] = (...args) => $options.switchMobile && $options.switchMobile(...args))
+          }, [..._cache[38] || (_cache[38] = [
+            createElementVNode("i", { class: "el-icon-mobile" }, null, -1),
+            createTextVNode("移动端设计", -1)
+          ])])) : createCommentVNode("", true),
+          $options.isMobileDashboard ? (openBlock(), createBlock(_component_el_select, {
+            key: 1,
+            "model-value": $options.mobileCanvasWidth,
+            size: "small",
+            class: "mobile-width-select",
+            onChange: _cache[4] || (_cache[4] = (v) => $options.changeItemConfigs("page", { mobileCanvasWidth: v }))
+          }, {
+            default: withCtx(() => [
+              (openBlock(), createElementBlock(Fragment, null, renderList([320, 375, 390, 414], (width) => {
+                return createVNode(_component_el_option, {
+                  key: width,
+                  label: width + "px",
+                  value: width
+                }, null, 8, ["label", "value"]);
+              }), 64))
+            ]),
+            _: 1
+          }, 8, ["model-value"])) : createCommentVNode("", true),
+          $options.isMobileDashboard ? (openBlock(), createElementBlock("span", _hoisted_5, toDisplayString($data.mobileDirty ? "未保存" : "已保存"), 1)) : createCommentVNode("", true),
+          $options.isMobileDashboard ? (openBlock(), createBlock(_component_el_button, {
+            key: 3,
+            size: "small",
+            type: "primary",
+            loading: $data.mobileSaving,
+            onClick: $options.saveMobileDashboard
+          }, {
+            default: withCtx(() => [..._cache[39] || (_cache[39] = [
+              createTextVNode("保存", -1)
+            ])]),
+            _: 1
+          }, 8, ["loading", "onClick"])) : createCommentVNode("", true),
+          createElementVNode("p", {
+            class: "header-operate__item",
+            onClick: _cache[5] || (_cache[5] = (...args) => $options.preview && $options.preview(...args))
+          }, [
+            _cache[40] || (_cache[40] = createElementVNode("i", { class: "el-icon-view" }, null, -1)),
+            createTextVNode(toDisplayString(_ctx.$t("preview")), 1)
+          ]),
+          createElementVNode("p", {
+            class: "header-operate__item",
+            onClick: _cache[6] || (_cache[6] = ($event) => $data.pageSettingDrawer = true)
+          }, [..._cache[41] || (_cache[41] = [
+            createElementVNode("i", { class: "el-icon-setting" }, null, -1),
+            createTextVNode("全局设置", -1)
+          ])])
+        ], 64)) : createCommentVNode("", true)
+      ])
+    ]),
+    $data.chooseDesignTarget ? (openBlock(), createElementBlock("div", _hoisted_6, [
+      _cache[44] || (_cache[44] = createElementVNode("h2", null, "选择看板设计端", -1)),
+      _cache[45] || (_cache[45] = createElementVNode("p", null, "先选择主要展示端，再开始添加报表和组件。", -1)),
+      createElementVNode("div", _hoisted_7, [
+        createVNode(_component_el_button, {
+          loading: $data.choosingDesignTarget,
+          onClick: _cache[7] || (_cache[7] = ($event) => $options.selectDesignTarget("pc"))
+        }, {
+          default: withCtx(() => [..._cache[42] || (_cache[42] = [
+            createTextVNode("PC 端 · 桌面画布", -1)
+          ])]),
+          _: 1
+        }, 8, ["loading"]),
+        createVNode(_component_el_button, {
+          type: "primary",
+          loading: $data.choosingDesignTarget,
+          onClick: _cache[8] || (_cache[8] = ($event) => $options.selectDesignTarget("mobile"))
+        }, {
+          default: withCtx(() => [..._cache[43] || (_cache[43] = [
+            createTextVNode("移动端 · 手机画布", -1)
+          ])]),
+          _: 1
+        }, 8, ["loading"])
+      ])
+    ])) : (openBlock(), createElementBlock("div", _hoisted_8, [
+      createElementVNode("ul", _hoisted_9, [
+        createElementVNode("li", {
+          class: normalizeClass({ "page-tabs__item": true }),
+          onClick: _cache[9] || (_cache[9] = (...args) => $options.openAddReportDialog && $options.openAddReportDialog(...args))
+        }, [..._cache[46] || (_cache[46] = [
+          createElementVNode("i", { class: "epx-icon-color-tianjiabaobiao" }, null, -1),
+          createElementVNode("span", null, "报表", -1)
+        ])]),
+        createElementVNode("li", {
+          class: normalizeClass({ "page-tabs__item": true }),
+          onClick: _cache[10] || (_cache[10] = ($event) => $data.addComponentDialog = true)
+        }, [..._cache[47] || (_cache[47] = [
+          createElementVNode("i", { class: "epx-icon-color-tianjiazujian" }, null, -1),
+          createElementVNode("span", null, "组件", -1)
+        ])]),
+        createElementVNode("li", {
+          class: normalizeClass({ "page-tabs__item": true }),
+          onClick: _cache[11] || (_cache[11] = (...args) => $options.addTabsToDashboard && $options.addTabsToDashboard(...args))
+        }, [..._cache[48] || (_cache[48] = [
+          createElementVNode("i", { class: "epx-icon-color-tab" }, null, -1),
+          createElementVNode("span", null, "标签页", -1)
+        ])]),
+        createElementVNode("li", {
+          class: normalizeClass({ "page-tabs__item": true }),
+          onClick: _cache[12] || (_cache[12] = ($event) => $data.copyComponentDialog = true)
+        }, [..._cache[49] || (_cache[49] = [
+          createElementVNode("i", { class: "epx-icon-color-yinyong" }, null, -1),
+          createElementVNode("span", null, "引用", -1)
+        ])])
+      ]),
+      createElementVNode("div", _hoisted_10, [
+        $data.showPanel === "style" ? (openBlock(), createElementBlock("div", _hoisted_11, [
+          createElementVNode("div", _hoisted_12, [
+            _cache[52] || (_cache[52] = createElementVNode("span", null, "样式设置", -1)),
+            createVNode(_component_el_radio_group, {
+              modelValue: $data.styleType,
+              "onUpdate:modelValue": _cache[13] || (_cache[13] = ($event) => $data.styleType = $event),
+              size: "small"
+            }, {
+              default: withCtx(() => [
+                createVNode(_component_el_radio_button, {
+                  label: "presets",
+                  value: "presets"
+                }, {
+                  default: withCtx(() => [..._cache[50] || (_cache[50] = [
+                    createTextVNode("预设", -1)
+                  ])]),
+                  _: 1
+                }),
+                createVNode(_component_el_radio_button, {
+                  label: "custom",
+                  value: "custom"
+                }, {
+                  default: withCtx(() => [..._cache[51] || (_cache[51] = [
+                    createTextVNode("自定义", -1)
+                  ])]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            }, 8, ["modelValue"])
+          ]),
+          createElementVNode("div", _hoisted_13, [
+            $data.styleType === "presets" && !$data.editTheme ? (openBlock(), createElementBlock("ul", _hoisted_14, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList($data.themeList, (theme) => {
+                return openBlock(), createElementBlock("li", {
+                  class: normalizeClass(["dashboard-theme__item", { active: $data.activeTheme === theme.CODE }]),
+                  key: theme.CODE,
+                  onClick: ($event) => $options.selectTheme(theme)
+                }, [
+                  createElementVNode("div", _hoisted_16, [
+                    createElementVNode("img", {
+                      src: _ctx.$util.getFileUrl(theme.THUMBNAIL),
+                      alt: ""
+                    }, null, 8, _hoisted_17)
+                  ]),
+                  createElementVNode("p", _hoisted_18, [
+                    createElementVNode("span", _hoisted_19, [
+                      createTextVNode(toDisplayString(theme.NAME), 1),
+                      theme.SCOPE !== "frame" ? (openBlock(), createElementBlock("i", _hoisted_20)) : createCommentVNode("", true)
+                    ]),
+                    theme.SCOPE !== "frame" || _ctx.$route.params.system === "epxing-frame" ? (openBlock(), createBlock(_component_el_dropdown, {
+                      key: 0,
+                      class: "fr",
+                      onClick: _cache[14] || (_cache[14] = withModifiers(() => {
+                      }, ["stop"])),
+                      onCommand: (command) => $options.themeHandleCommand(theme, command)
+                    }, {
+                      dropdown: withCtx(() => [
+                        createVNode(_component_el_dropdown_menu, null, {
+                          default: withCtx(() => [
+                            createVNode(_component_el_dropdown_item, { command: "edit" }, {
+                              default: withCtx(() => [..._cache[53] || (_cache[53] = [
+                                createTextVNode("编辑", -1)
+                              ])]),
+                              _: 1
+                            }),
+                            createVNode(_component_el_dropdown_item, { command: "config" }, {
+                              default: withCtx(() => [..._cache[54] || (_cache[54] = [
+                                createTextVNode("预设样式配置", -1)
+                              ])]),
+                              _: 1
+                            }),
+                            createVNode(_component_el_dropdown_item, { command: "remove" }, {
+                              default: withCtx(() => [..._cache[55] || (_cache[55] = [
+                                createTextVNode("删除", -1)
+                              ])]),
+                              _: 1
+                            })
+                          ]),
+                          _: 1
+                        })
+                      ]),
+                      default: withCtx(() => [
+                        _cache[56] || (_cache[56] = createElementVNode("i", { class: "el-icon-more" }, null, -1))
+                      ]),
+                      _: 1
+                    }, 8, ["onCommand"])) : createCommentVNode("", true)
+                  ]),
+                  _cache[57] || (_cache[57] = createElementVNode("div", { class: "dashboard-theme__selected" }, [
+                    createElementVNode("span"),
+                    createElementVNode("i", { class: "el-icon-check" })
+                  ], -1))
+                ], 10, _hoisted_15);
+              }), 128))
+            ])) : (openBlock(), createBlock(_component_dashboard_theme_setting, {
+              key: 1,
+              editTheme: $data.editTheme,
+              value: $data.themeStyles,
+              onChange: $options.changethemeStyles,
+              onSave: $options.savePreset,
+              onMobileEdit: _cache[15] || (_cache[15] = (v) => $data.themeMobilePreview = v)
+            }, null, 8, ["editTheme", "value", "onChange", "onSave"]))
+          ]),
+          createElementVNode("div", _hoisted_21, [
+            createVNode(_component_el_button, {
+              size: "default",
+              onClick: $options.cancelThemePancel
+            }, {
+              default: withCtx(() => [..._cache[58] || (_cache[58] = [
+                createTextVNode("取消", -1)
+              ])]),
+              _: 1
+            }, 8, ["onClick"]),
+            createVNode(_component_el_button, {
+              size: "default",
+              type: "primary",
+              onClick: $options.setTheme
+            }, {
+              default: withCtx(() => [..._cache[59] || (_cache[59] = [
+                createTextVNode("确定", -1)
+              ])]),
+              _: 1
+            }, 8, ["onClick"])
+          ])
+        ])) : createCommentVNode("", true)
+      ]),
+      !$data.previewSuspended && !$data.mobilePreviewVisible ? (openBlock(), createElementBlock("div", _hoisted_22, [
+        $options.isMobileDashboard ? (openBlock(), createBlock(_component_dashboard_mobile, {
+          key: 0,
+          ref: "dashboardDesign",
+          standalone: "",
+          source: $options.mobileDesignSource,
+          "canvas-width": $options.mobileCanvasWidth,
+          "page-id": _ctx.$query.id,
+          "page-meta-id": $options.currentMetaId,
+          "all-component-list": $data.componentList,
+          onSelectItem: $options.selectMobileItem,
+          onEditData: $options.editMobileData,
+          onDeleteItem: $options.deleteMobileItem,
+          onAddInto: $options.addMobileInto,
+          onAddReport: $options.openAddReportDialog,
+          onAddComponent: _cache[16] || (_cache[16] = ($event) => $data.addComponentDialog = true)
+        }, {
+          "component-config": withCtx(() => [
+            $data.selectComponent ? (openBlock(), createBlock(_component_epx_visual_config_panel, {
+              key: 0,
+              component: $data.selectComponent,
+              metaId: $options.currentMetaId,
+              globalConfigs: $data.pageGlobalConfigs,
+              itemConfigs: $data.allComponentConfigs,
+              relationList: $data.relationList,
+              pageParams: $data.pageParams,
+              scopeConfigs: $data.scopeConfigs,
+              "grid-layout": true
+            }, null, 8, ["component", "metaId", "globalConfigs", "itemConfigs", "relationList", "pageParams", "scopeConfigs"])) : createCommentVNode("", true)
+          ]),
+          _: 1
+        }, 8, ["source", "canvas-width", "page-id", "page-meta-id", "all-component-list", "onSelectItem", "onEditData", "onDeleteItem", "onAddInto", "onAddReport"])) : (openBlock(), createBlock(_component_epx_visual_config_dashboard_design, {
+          key: 1,
+          ref: "dashboardDesign",
+          "up-comp-id": $data.upCompId,
+          "component-list": this.selectComponentList,
+          "all-component-list": this.componentList,
+          globalConfigs: $data.pageGlobalConfigs,
+          pageId: _ctx.$query.id,
+          pageMetaId: $options.currentMetaId,
+          itemConfigs: $data.allComponentConfigs,
+          theme: $data.activeTheme,
+          themeStyles: $data.themeStyles,
+          "mobile-preview": $data.themeMobilePreview,
+          onOpenConfig: $options.clickComponent,
+          onChangeItems: _cache[17] || (_cache[17] = (componentList) => $data.selectComponentList = [...componentList]),
+          onAddComponent: _cache[18] || (_cache[18] = ($event) => $data.addComponentDialog = true),
+          onDeleteConfigs: $options.deleteConfigs,
+          onAddReport: $options.openAddReportDialog,
+          onAddReportToDashboard: $options.addReportToDashboard,
+          onAddChartToDashboard: $options.addChartToDashboard,
+          onAddComponentToDashboard: $options.addComponentToDashboard
+        }, null, 8, ["up-comp-id", "component-list", "all-component-list", "globalConfigs", "pageId", "pageMetaId", "itemConfigs", "theme", "themeStyles", "mobile-preview", "onOpenConfig", "onDeleteConfigs", "onAddReport", "onAddReportToDashboard", "onAddChartToDashboard", "onAddComponentToDashboard"]))
+      ])) : createCommentVNode("", true),
+      !$options.isMobileDashboard ? (openBlock(), createBlock(_component_el_drawer, {
+        key: 1,
+        title: "组件配置",
+        "append-to-body": "",
+        direction: "rtl",
+        modelValue: $options.showConfigPanel,
+        "onUpdate:modelValue": _cache[19] || (_cache[19] = ($event) => $options.showConfigPanel = $event)
+      }, {
+        default: withCtx(() => [
+          $options.showConfigPanel ? (openBlock(), createElementBlock("div", _hoisted_23, [
+            createVNode(_component_epx_visual_config_panel, {
+              component: $data.selectComponent,
+              metaId: $options.currentMetaId,
+              globalConfigs: $data.pageGlobalConfigs,
+              itemConfigs: $data.allComponentConfigs,
+              relationList: $data.relationList,
+              pageParams: $data.pageParams,
+              scopeConfigs: $data.scopeConfigs,
+              "grid-layout": true
+            }, null, 8, ["component", "metaId", "globalConfigs", "itemConfigs", "relationList", "pageParams", "scopeConfigs"])
+          ])) : createCommentVNode("", true)
+        ]),
+        _: 1
+      }, 8, ["modelValue"])) : createCommentVNode("", true),
+      createVNode(_component_el_dialog, {
+        title: "添加报表",
+        "append-to-body": "",
+        modelValue: $data.addReportDialog,
+        "onUpdate:modelValue": _cache[24] || (_cache[24] = ($event) => $data.addReportDialog = $event),
+        width: "640px"
+      }, {
+        default: withCtx(() => [
+          $data.addReportDialog ? (openBlock(), createElementBlock("div", _hoisted_24, [
+            createElementVNode("div", _hoisted_25, [
+              _cache[60] || (_cache[60] = createElementVNode("label", null, "报表类型：", -1)),
+              createElementVNode("ul", _hoisted_26, [
+                (openBlock(true), createElementBlock(Fragment, null, renderList($data.reportTypeList, (reportType) => {
+                  return openBlock(), createElementBlock("li", {
+                    class: normalizeClass({ "report-type__item": true, active: $data.addReportForm.TYPE === reportType.type && ($data.addReportForm.CHART_TYPE === reportType.chartType || $data.addReportForm.TYPE === "1" || $data.addReportForm.TYPE === "numStatistic") }),
+                    key: reportType.chartType || reportType.type,
+                    onClick: ($event) => $options.setReportType(reportType)
+                  }, [
+                    createElementVNode("i", {
+                      class: normalizeClass(reportType.icon)
+                    }, null, 2),
+                    createElementVNode("span", null, toDisplayString(reportType.text), 1)
+                  ], 10, _hoisted_27);
+                }), 128))
+              ])
+            ]),
+            withDirectives(createElementVNode("div", _hoisted_28, [
+              _cache[61] || (_cache[61] = createElementVNode("label", null, "统计对象：", -1)),
+              createVNode(_component_epx_object, {
+                modelValue: $data.addReportForm.OBJECT,
+                "onUpdate:modelValue": _cache[20] || (_cache[20] = ($event) => $data.addReportForm.OBJECT = $event),
+                fieldConfigs: { attriName: "OBJECT", dataType: "object", attriLabel: "统计对象", codeKey: "FM_ENTITY", state: "EDIT" }
+              }, null, 8, ["modelValue"])
+            ], 512), [
+              [vShow, $data.addReportForm.TYPE !== "dashboardTitle" && $data.addReportForm.TYPE !== "form"]
+            ]),
+            withDirectives(createElementVNode("div", _hoisted_29, [
+              _cache[62] || (_cache[62] = createElementVNode("label", null, "统计对象视图：", -1)),
+              createVNode(_component_epx_object, {
+                modelValue: $data.addReportForm.OBJECT_VIEW,
+                "onUpdate:modelValue": _cache[21] || (_cache[21] = ($event) => $data.addReportForm.OBJECT_VIEW = $event),
+                fieldConfigs: { attriName: "OBJECT_VIEW", dataType: "object", attriLabel: "统计对象", codeKey: "FM_ENTITY_VIEW", scopeParams: [{ field: "ENTITY", values: $data.addReportForm.OBJECT }], state: "EDIT" }
+              }, null, 8, ["modelValue", "fieldConfigs"])
+            ], 512), [
+              [vShow, $data.addReportForm.TYPE !== "numStatistic" && $data.addReportForm.TYPE !== "dashboardTitle" && $data.addReportForm.TYPE !== "form"]
+            ]),
+            withDirectives(createElementVNode("div", _hoisted_30, [
+              _cache[65] || (_cache[65] = createElementVNode("label", null, "表单类型：", -1)),
+              createVNode(_component_el_radio_group, {
+                modelValue: $data.addReportForm.FORM_TYPE,
+                "onUpdate:modelValue": _cache[22] || (_cache[22] = ($event) => $data.addReportForm.FORM_TYPE = $event)
+              }, {
+                default: withCtx(() => [
+                  createVNode(_component_el_radio, {
+                    label: "formReport",
+                    value: "formReport"
+                  }, {
+                    default: withCtx(() => [..._cache[63] || (_cache[63] = [
+                      createTextVNode("Word", -1)
+                    ])]),
+                    _: 1
+                  }),
+                  createVNode(_component_el_radio, {
+                    label: "excelReport",
+                    value: "excelReport"
+                  }, {
+                    default: withCtx(() => [..._cache[64] || (_cache[64] = [
+                      createTextVNode("Excel", -1)
+                    ])]),
+                    _: 1
+                  })
+                ]),
+                _: 1
+              }, 8, ["modelValue"])
+            ], 512), [
+              [vShow, $data.addReportForm.TYPE === "form"]
+            ])
+          ])) : createCommentVNode("", true),
+          createElementVNode("div", _hoisted_31, [
+            createVNode(_component_el_button, {
+              type: "primary",
+              onClick: $options.saveReport
+            }, {
+              default: withCtx(() => [..._cache[66] || (_cache[66] = [
+                createTextVNode("保存", -1)
+              ])]),
+              _: 1
+            }, 8, ["onClick"]),
+            createVNode(_component_el_button, {
+              onClick: _cache[23] || (_cache[23] = ($event) => $data.addReportDialog = false)
+            }, {
+              default: withCtx(() => [..._cache[67] || (_cache[67] = [
+                createTextVNode("返回", -1)
+              ])]),
+              _: 1
+            })
+          ])
+        ]),
+        _: 1
+      }, 8, ["modelValue"]),
+      createVNode(_component_el_dialog, {
+        title: "添加组件",
+        "append-to-body": "",
+        modelValue: $data.addComponentDialog,
+        "onUpdate:modelValue": _cache[25] || (_cache[25] = ($event) => $data.addComponentDialog = $event),
+        width: "960px"
+      }, {
+        default: withCtx(() => [
+          createVNode(_component_epx_visual_component_library_dialog, {
+            "initial-terminal": $options.isMobileDashboard ? "move" : "pc",
+            onClick: $options.addComponentToDashboard
+          }, null, 8, ["initial-terminal", "onClick"])
+        ]),
+        _: 1
+      }, 8, ["modelValue"]),
+      createVNode(_component_el_dialog, {
+        class: "dialog--noheader dialog--nopadding",
+        "append-to-body": "",
+        center: "",
+        modelValue: $data.copyComponentDialog,
+        "onUpdate:modelValue": _cache[28] || (_cache[28] = ($event) => $data.copyComponentDialog = $event),
+        width: "960px"
+      }, {
+        default: withCtx(() => [
+          createVNode(_component_el_tabs, { type: "card" }, {
+            default: withCtx(() => [
+              createVNode(_component_el_tab_pane, { label: "从数据看板选择" }, {
+                default: withCtx(() => [
+                  createElementVNode("div", _hoisted_32, [
+                    createVNode(_component_epx_search_fields, {
+                      metaId: "FM_PAGE_CONFIG",
+                      showKeyword: false,
+                      fields: ["TITLE", "META_ID"],
+                      showFilter: false,
+                      onSearch: $options.searchDashboard
+                    }, null, 8, ["onSearch"])
+                  ]),
+                  withDirectives((openBlock(), createElementBlock("ul", _hoisted_33, [
+                    (openBlock(true), createElementBlock(Fragment, null, renderList($data.dashboardList, (dashboard) => {
+                      return openBlock(), createElementBlock("li", {
+                        class: normalizeClass(["dashboard-item", { fold: $data.foldDashboardMap[dashboard.ID] }]),
+                        key: dashboard.ID
+                      }, [
+                        createElementVNode("div", _hoisted_34, [
+                          createVNode(_component_el_checkbox, {
+                            value: $options.isDashboardSelectAll(dashboard),
+                            indeterminate: $options.isDashboardSelect(dashboard),
+                            onChange: (v) => $options.changeDashboardSelect(dashboard, v)
+                          }, {
+                            default: withCtx(() => [
+                              createTextVNode(toDisplayString(dashboard.TITLE), 1)
+                            ]),
+                            _: 2
+                          }, 1032, ["value", "indeterminate", "onChange"]),
+                          createElementVNode("i", {
+                            class: "el-icon-arrow-up",
+                            onClick: ($event) => $options.switchDashboardFoldFn(dashboard)
+                          }, null, 8, _hoisted_35)
+                        ]),
+                        createElementVNode("div", _hoisted_36, [
+                          createElementVNode("ul", _hoisted_37, [
+                            (openBlock(true), createElementBlock(Fragment, null, renderList(dashboard.children, (comp) => {
+                              return openBlock(), createElementBlock("li", {
+                                class: normalizeClass(["dashboard-comp__item", { "selected": $data.selectedDashboardCompList.includes(dashboard.ID + "-" + comp.id) }]),
+                                key: comp.id,
+                                onClick: ($event) => $options.selectDashboardComp(dashboard, comp)
+                              }, [
+                                createElementVNode("i", {
+                                  class: normalizeClass($options.compIcon(comp))
+                                }, null, 2),
+                                createElementVNode("span", null, toDisplayString($options.compTitle(comp)), 1),
+                                _cache[68] || (_cache[68] = createElementVNode("div", { class: "dashboard-comp__item__select" }, [
+                                  createElementVNode("span"),
+                                  createElementVNode("i", { class: "el-icon-check" })
+                                ], -1))
+                              ], 10, _hoisted_38);
+                            }), 128))
+                          ])
+                        ])
+                      ], 2);
+                    }), 128)),
+                    !$data.dashboardLoading && $data.dashboardTotal === 0 ? (openBlock(), createElementBlock("div", _hoisted_39, [..._cache[69] || (_cache[69] = [
+                      createElementVNode("i", { class: "epx-icon-kong" }, null, -1),
+                      createElementVNode("p", null, "暂无数据", -1)
+                    ])])) : createCommentVNode("", true)
+                  ])), [
+                    [_directive_loading, $data.dashboardLoading]
+                  ]),
+                  createVNode(_component_el_pagination, {
+                    class: "pagination",
+                    "current-page": $data.currentDashboardPage,
+                    "onUpdate:currentPage": _cache[26] || (_cache[26] = ($event) => $data.currentDashboardPage = $event),
+                    "page-size": 10,
+                    layout: "prev, pager, next, jumper",
+                    total: $data.dashboardTotal
+                  }, null, 8, ["current-page", "total"])
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          }),
+          createElementVNode("div", _hoisted_40, [
+            createVNode(_component_el_button, {
+              type: "primary",
+              onClick: $options.quoteComp
+            }, {
+              default: withCtx(() => [..._cache[70] || (_cache[70] = [
+                createTextVNode("引用", -1)
+              ])]),
+              _: 1
+            }, 8, ["onClick"]),
+            createVNode(_component_el_button, {
+              onClick: _cache[27] || (_cache[27] = ($event) => $data.copyComponentDialog = false)
+            }, {
+              default: withCtx(() => [..._cache[71] || (_cache[71] = [
+                createTextVNode("返回", -1)
+              ])]),
+              _: 1
+            })
+          ])
+        ]),
+        _: 1
+      }, 8, ["modelValue"]),
+      createVNode(_component_el_dialog, {
+        title: "保存为预设主题",
+        "append-to-body": "",
+        modelValue: $data.saveThemeDialog,
+        "onUpdate:modelValue": _cache[31] || (_cache[31] = ($event) => $data.saveThemeDialog = $event),
+        width: "760px"
+      }, {
+        footer: withCtx(() => [
+          createElementVNode("div", null, [
+            createVNode(_component_el_button, {
+              onClick: _cache[30] || (_cache[30] = ($event) => $data.saveThemeDialog = false)
+            }, {
+              default: withCtx(() => [..._cache[72] || (_cache[72] = [
+                createTextVNode("取消", -1)
+              ])]),
+              _: 1
+            }),
+            createVNode(_component_el_button, {
+              onClick: $options.saveTheme,
+              type: "primary"
+            }, {
+              default: withCtx(() => [..._cache[73] || (_cache[73] = [
+                createTextVNode("保存", -1)
+              ])]),
+              _: 1
+            }, 8, ["onClick"])
+          ])
+        ]),
+        default: withCtx(() => [
+          $data.saveThemeDialog ? (openBlock(), createBlock(_component_epx_add_form_item, {
+            key: 0,
+            metaId: "FM_CHART_THEME",
+            "comp-configs": { componentType: "EDIT", column: 1, fields: $options.themeFields },
+            formData: $data.themeFormData,
+            onChange: _cache[29] || (_cache[29] = (v) => $data.themeFormData = v)
+          }, null, 8, ["comp-configs", "formData"])) : createCommentVNode("", true)
+        ]),
+        _: 1
+      }, 8, ["modelValue"])
+    ])),
+    createVNode(_component_el_drawer, {
+      withHeader: false,
+      modelValue: $data.pageSettingDrawer,
+      "onUpdate:modelValue": _cache[34] || (_cache[34] = ($event) => $data.pageSettingDrawer = $event),
+      "append-to-body": "",
+      direction: "rtl",
+      size: 360
+    }, {
+      default: withCtx(() => [
+        createElementVNode("div", _hoisted_41, [
+          createElementVNode("div", _hoisted_42, [
+            _cache[74] || (_cache[74] = createElementVNode("span", { class: "title" }, "全局设置", -1)),
+            createElementVNode("i", {
+              class: "el-icon-close",
+              onClick: _cache[32] || (_cache[32] = ($event) => $data.pageSettingDrawer = false)
+            })
+          ]),
+          createElementVNode("div", _hoisted_43, [
+            (openBlock(), createBlock(resolveDynamicComponent("epx-visual-config-dashboard-setting"), {
+              metaId: $options.currentMetaId,
+              ref: "global",
+              id: "page",
+              "comp-config": $options.pageComponentConfigs,
+              globalConfigs: $data.pageGlobalConfigs,
+              pageRelationList: $data.relationList
+            }, null, 8, ["metaId", "comp-config", "globalConfigs", "pageRelationList"]))
+          ]),
+          createElementVNode("div", _hoisted_44, [
+            createVNode(_component_el_button, {
+              size: "default",
+              onClick: _cache[33] || (_cache[33] = ($event) => $data.pageSettingDrawer = false)
+            }, {
+              default: withCtx(() => [..._cache[75] || (_cache[75] = [
+                createTextVNode("返回", -1)
+              ])]),
+              _: 1
+            })
+          ])
+        ])
+      ]),
+      _: 1
+    }, 8, ["modelValue"]),
+    $options.isMobileDashboard ? (openBlock(), createBlock(_component_el_dialog, {
+      key: 2,
+      modelValue: $data.mobilePreviewVisible,
+      "onUpdate:modelValue": _cache[35] || (_cache[35] = ($event) => $data.mobilePreviewVisible = $event),
+      title: "移动端预览 · " + $options.mobileCanvasWidth + "px",
+      class: "mobile-dashboard-preview-dialog",
+      "append-to-body": "",
+      "align-center": "",
+      "destroy-on-close": "",
+      width: ($options.mobileCanvasWidth + 12) * $options.mobilePreviewScale + 48 + "px"
+    }, {
+      default: withCtx(() => [
+        createElementVNode("div", {
+          class: "mobile-preview-viewport",
+          style: normalizeStyle({ width: ($options.mobileCanvasWidth + 12) * $options.mobilePreviewScale + "px", height: $options.mobilePreviewPhoneHeight * $options.mobilePreviewScale + "px" })
+        }, [
+          createElementVNode("div", {
+            class: "mobile-preview-phone",
+            style: normalizeStyle({ width: $options.mobileCanvasWidth + 12 + "px", height: $options.mobilePreviewPhoneHeight + "px", transform: "scale(" + $options.mobilePreviewScale + ")" })
+          }, [
+            createElementVNode("div", _hoisted_45, [
+              createElementVNode("div", {
+                class: "mobile-preview-phone__title",
+                title: $options.title
+              }, toDisplayString($options.title || "数据看板"), 9, _hoisted_46),
+              createElementVNode("div", _hoisted_47, [
+                $data.mobilePreviewVisible ? (openBlock(), createBlock(_component_dashboard_preview, {
+                  key: 0,
+                  "comp-id": "mobile-dashboard-preview",
+                  "comp-configs": { ...$data.pageGlobalConfigs, themeStyles: $data.themeStyles, items: $data.selectComponentList, itemConfigs: $data.allComponentConfigs }
+                }, null, 8, ["comp-configs"])) : createCommentVNode("", true)
+              ]),
+              _cache[76] || (_cache[76] = createElementVNode("div", {
+                class: "mobile-preview-phone__home",
+                "aria-hidden": "true"
+              }, [
+                createElementVNode("span")
+              ], -1))
+            ])
+          ], 4)
+        ], 4)
+      ]),
+      _: 1
+    }, 8, ["modelValue", "title", "width"])) : createCommentVNode("", true)
+  ], 2);
+}
+const Dashboard = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-7316d966"]]);
+export {
+  Dashboard as default
+};