@epxing/dashboard 0.0.0-stage → 5.3.0-beta.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/API.md +79 -0
- package/README.md +40 -2
- package/dist/_virtual/_plugin-vue_export-helper.js +10 -0
- package/dist/_virtual/preload-helper.js +88 -0
- package/dist/assets/technology_bg-oWIS2awO.jpg +0 -0
- package/dist/src/Dashboard.js +332 -0
- package/dist/src/DashboardGrid.js +182 -0
- package/dist/src/DesignGrid.js +711 -0
- package/dist/src/DesignItem.js +63 -0
- package/dist/src/Div.js +408 -0
- package/dist/src/Header.js +385 -0
- package/dist/src/Preview.js +27 -0
- package/dist/src/Tabs.js +468 -0
- package/dist/src/Title.js +101 -0
- package/dist/src/Widget.js +266 -0
- package/dist/src/chart-request-scope.js +32 -0
- package/dist/src/design-target.js +57 -0
- package/dist/src/grid/compact.js +68 -0
- package/dist/src/grid/compat/GridItem.js +35 -0
- package/dist/src/grid/compat/GridLayout.js +76 -0
- package/dist/src/grid/designState.js +21 -0
- package/dist/src/grid/engines.js +25 -0
- package/dist/src/grid/geometry.js +44 -0
- package/dist/src/grid/gridstackParams.js +69 -0
- package/dist/src/grid/mixins.js +108 -0
- package/dist/src/grid/model.js +223 -0
- package/dist/src/grid/useViewportGate.js +55 -0
- package/dist/src/index.js +26 -0
- package/dist/src/layout-util.js +108 -0
- package/dist/src/mobile-design.js +50 -0
- package/dist/src/theme-style.js +133 -0
- package/dist/style.css +1009 -0
- package/package.json +85 -3
- package/src/Dashboard.vue +459 -0
- package/src/DashboardGrid.vue +189 -0
- package/src/DesignGrid.vue +851 -0
- package/src/DesignItem.vue +124 -0
- package/src/Div.vue +419 -0
- package/src/Header.vue +501 -0
- package/src/Preview.vue +30 -0
- package/src/Tabs.vue +484 -0
- package/src/Title.vue +107 -0
- package/src/Widget.vue +354 -0
- package/src/chart-request-scope.js +22 -0
- package/src/design-target.js +55 -0
- package/src/grid/compact.js +81 -0
- package/src/grid/compat/GridItem.vue +30 -0
- package/src/grid/compat/GridLayout.vue +76 -0
- package/src/grid/designState.js +17 -0
- package/src/grid/engines.js +22 -0
- package/src/grid/geometry.js +55 -0
- package/src/grid/gridstackParams.js +72 -0
- package/src/grid/mixins.js +114 -0
- package/src/grid/model.js +259 -0
- package/src/grid/useViewportGate.js +57 -0
- package/src/index.js +28 -0
- package/src/layout-util.js +157 -0
- package/src/mobile-design.js +50 -0
- package/src/theme-style.js +185 -0
- package/types/div.d.ts +1 -0
- package/types/index.d.ts +7 -0
- package/types/tabs.d.ts +1 -0
- package/types/title.d.ts +1 -0
- package/types/widget.d.ts +1 -0
package/dist/src/Tabs.js
ADDED
|
@@ -0,0 +1,468 @@
|
|
|
1
|
+
import { __vitePreload as __epxPackagePreload } from "../_virtual/preload-helper.js";
|
|
2
|
+
import { defineAsyncComponent, resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, createCommentVNode, Fragment, renderList, withModifiers, withDirectives, vModelText, toDisplayString, normalizeStyle, createBlock, withCtx, resolveDynamicComponent, createVNode, createTextVNode } from "vue";
|
|
3
|
+
import { normalizeGridItem } from "./layout-util.js";
|
|
4
|
+
import DashboardGrid from "./DashboardGrid.js";
|
|
5
|
+
import { containerGridMixin } from "./grid/mixins.js";
|
|
6
|
+
/* empty css */
|
|
7
|
+
import _export_sfc from "../_virtual/_plugin-vue_export-helper.js";
|
|
8
|
+
const _sfc_main = {
|
|
9
|
+
name: "epx-dashboard-tabs",
|
|
10
|
+
// 运行态网格参数 / 门控策略 / 嵌套容器网格透传(compGrid prop、gridParams / loadWay / childGrid)来自 containerGridMixin
|
|
11
|
+
mixins: [containerGridMixin],
|
|
12
|
+
components: {
|
|
13
|
+
[DashboardGrid.name]: DashboardGrid,
|
|
14
|
+
// 设计态画布(gridstack 封装)与项 chrome 按需加载,运行态不拉 gridstack
|
|
15
|
+
"epx-dashboard-design-grid": defineAsyncComponent(() => __epxPackagePreload(() => import("./DesignGrid.js"), true ? [] : void 0, import.meta.url)),
|
|
16
|
+
"epx-dashboard-design-item": defineAsyncComponent(() => __epxPackagePreload(() => import("./DesignItem.js"), true ? [] : void 0, import.meta.url))
|
|
17
|
+
},
|
|
18
|
+
inject: {
|
|
19
|
+
// 父网格 api(页面级画布或上级容器的 DesignGrid 提供):激活页签的子网格挂到它下面;独立挂载时为空,子网格退化为独立网格
|
|
20
|
+
epxDashboardDesignGrid: { default: null },
|
|
21
|
+
// 设计态共享选中态(页面级画布提供):容器内与页面级只有一个选中项
|
|
22
|
+
epxDashboardDesign: { default: null }
|
|
23
|
+
},
|
|
24
|
+
props: {
|
|
25
|
+
items: {
|
|
26
|
+
type: Array,
|
|
27
|
+
default() {
|
|
28
|
+
return [];
|
|
29
|
+
}
|
|
30
|
+
},
|
|
31
|
+
itemConfigs: {
|
|
32
|
+
type: Object,
|
|
33
|
+
default() {
|
|
34
|
+
return {};
|
|
35
|
+
}
|
|
36
|
+
},
|
|
37
|
+
theme: String,
|
|
38
|
+
// 本容器项的 id:设计态选中项的 owner 标记(与 Div 对齐)
|
|
39
|
+
compId: String,
|
|
40
|
+
mode: String,
|
|
41
|
+
allComponentList: Array,
|
|
42
|
+
chartCache: Boolean,
|
|
43
|
+
dashboardId: String
|
|
44
|
+
},
|
|
45
|
+
data() {
|
|
46
|
+
return {
|
|
47
|
+
activeTab: "",
|
|
48
|
+
reloadComponent: {},
|
|
49
|
+
isDragElement: false,
|
|
50
|
+
editTabId: "",
|
|
51
|
+
editTabName: "",
|
|
52
|
+
// 设计态页签内容区可视高度,传给激活页签的子网格做 min-height
|
|
53
|
+
designMinHeight: 0
|
|
54
|
+
};
|
|
55
|
+
},
|
|
56
|
+
computed: {
|
|
57
|
+
tab() {
|
|
58
|
+
return this.items.find((item) => item.id === this.activeTab);
|
|
59
|
+
},
|
|
60
|
+
tabIndex() {
|
|
61
|
+
return this.items.findIndex((item) => item.id === this.activeTab);
|
|
62
|
+
},
|
|
63
|
+
getCompConfigs() {
|
|
64
|
+
return (component) => {
|
|
65
|
+
const { configs = {}, id, title, contentType, ...otherConfigs } = component;
|
|
66
|
+
const compId = this.getDashboardLegacy() && this.dashboardId ? this.dashboardId + "-" + id : id;
|
|
67
|
+
const itemConfig = this.itemConfigs[compId] || {};
|
|
68
|
+
const _configs = { ...otherConfigs, ...configs, ...itemConfig };
|
|
69
|
+
if (title) {
|
|
70
|
+
_configs.componentName = title;
|
|
71
|
+
}
|
|
72
|
+
return _configs;
|
|
73
|
+
};
|
|
74
|
+
},
|
|
75
|
+
design() {
|
|
76
|
+
return this.epxDashboardDesign;
|
|
77
|
+
},
|
|
78
|
+
activeComponent() {
|
|
79
|
+
return this.design ? this.design.state.activeItem : null;
|
|
80
|
+
}
|
|
81
|
+
},
|
|
82
|
+
watch: {
|
|
83
|
+
items: {
|
|
84
|
+
handler(tabs = []) {
|
|
85
|
+
for (const tab of tabs) {
|
|
86
|
+
for (const item of tab.items || []) {
|
|
87
|
+
normalizeGridItem(item);
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
},
|
|
91
|
+
deep: true,
|
|
92
|
+
immediate: true
|
|
93
|
+
}
|
|
94
|
+
},
|
|
95
|
+
methods: {
|
|
96
|
+
addTab() {
|
|
97
|
+
const newTabName = this.items.length + "";
|
|
98
|
+
const tabs = this.items;
|
|
99
|
+
tabs.push({
|
|
100
|
+
name: "标签页" + (this.items.length + 1),
|
|
101
|
+
id: newTabName,
|
|
102
|
+
items: []
|
|
103
|
+
});
|
|
104
|
+
this.$emit("changeItems", tabs);
|
|
105
|
+
},
|
|
106
|
+
removeTab(targetName) {
|
|
107
|
+
const tabs = this.items;
|
|
108
|
+
if (tabs.length <= 1) {
|
|
109
|
+
this.$message.error("最少有一个标签");
|
|
110
|
+
return;
|
|
111
|
+
}
|
|
112
|
+
let activeName = this.activeTab;
|
|
113
|
+
let activeIndex = -1;
|
|
114
|
+
if (activeName === targetName) {
|
|
115
|
+
tabs.forEach((tab, index) => {
|
|
116
|
+
if (tab.id === targetName) {
|
|
117
|
+
activeIndex = index;
|
|
118
|
+
const nextTab = tabs[index + 1] || tabs[index - 1];
|
|
119
|
+
if (nextTab) {
|
|
120
|
+
activeName = nextTab.id;
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
});
|
|
124
|
+
}
|
|
125
|
+
this.activeTab = activeName;
|
|
126
|
+
tabs.splice(activeIndex, 1);
|
|
127
|
+
this.$emit("changeItems", tabs);
|
|
128
|
+
},
|
|
129
|
+
editTab(tab) {
|
|
130
|
+
if (this.mode !== "design") return;
|
|
131
|
+
this.editTabId = tab.id;
|
|
132
|
+
this.editTabName = tab.name;
|
|
133
|
+
this.$nextTick(() => {
|
|
134
|
+
this.$refs.editTabInput[0].focus();
|
|
135
|
+
});
|
|
136
|
+
},
|
|
137
|
+
updateTabName() {
|
|
138
|
+
if (this.editTabId && this.editTabName) {
|
|
139
|
+
const index = this.items.findIndex((item) => item.id === this.editTabId);
|
|
140
|
+
this.items.splice(index, 1, { ...this.items[index], name: this.editTabName });
|
|
141
|
+
this.$emit("changeItems", this.items);
|
|
142
|
+
this.editTabId = null;
|
|
143
|
+
this.editTabName = "";
|
|
144
|
+
}
|
|
145
|
+
},
|
|
146
|
+
addGridItem(v) {
|
|
147
|
+
const tab = this.tabs.find((item) => item.name === this.activeTab);
|
|
148
|
+
if (tab) {
|
|
149
|
+
tab.items.push(v);
|
|
150
|
+
}
|
|
151
|
+
},
|
|
152
|
+
// 库改了子项坐标(拖拽 / 缩放 / 推挤 / 首次对账):画布已就地写回,只需通知上层保存
|
|
153
|
+
onDesignChange() {
|
|
154
|
+
this.$emit("changeItems", this.items);
|
|
155
|
+
},
|
|
156
|
+
// 跨网格搬出(页签内项被拖到页面或别的容器):源侧必须同步移出,否则子网格下一次同步会把壳重新加回来
|
|
157
|
+
onTransferOut(tab, item) {
|
|
158
|
+
const index = (tab.items || []).findIndex((i) => i.id === item.id);
|
|
159
|
+
if (index !== -1) tab.items.splice(index, 1);
|
|
160
|
+
this.$emit("changeItems", this.items);
|
|
161
|
+
},
|
|
162
|
+
// 跨网格搬入当前页签:画布已按本网格换算过 w/h
|
|
163
|
+
onTransferIn(tab, item) {
|
|
164
|
+
if (!tab.items) tab.items = [];
|
|
165
|
+
tab.items.push(item);
|
|
166
|
+
this.$emit("changeItems", this.items);
|
|
167
|
+
},
|
|
168
|
+
// 页签里嵌套容器的子项变化:替换该容器项对象后上报(与页面级画布 changeSubItems 同手法)
|
|
169
|
+
changeSubItems(tab, item, v) {
|
|
170
|
+
const index = (tab.items || []).findIndex((i) => i.id === item.id);
|
|
171
|
+
if (index === -1) return;
|
|
172
|
+
tab.items.splice(index, 1, { ...tab.items[index], items: v });
|
|
173
|
+
this.$emit("changeItems", this.items);
|
|
174
|
+
},
|
|
175
|
+
openConfigPanel(component) {
|
|
176
|
+
if (this.design) this.design.select(component, this.compId);
|
|
177
|
+
},
|
|
178
|
+
// 设计态页签内容区可视高度(所有页签共用同一个内容区)
|
|
179
|
+
measureDesignHeight() {
|
|
180
|
+
if (this.$refs.tabsContent) this.designMinHeight = this.$refs.tabsContent.clientHeight;
|
|
181
|
+
},
|
|
182
|
+
designReport(component) {
|
|
183
|
+
const configs = this.getCompConfigs(component, component.id);
|
|
184
|
+
this.goPage({
|
|
185
|
+
component: "report-design",
|
|
186
|
+
params: {
|
|
187
|
+
id: configs.id,
|
|
188
|
+
callback: () => {
|
|
189
|
+
this.reloadComponent[component.id] = true;
|
|
190
|
+
this.$nextTick(() => {
|
|
191
|
+
this.reloadComponent[component.id] = false;
|
|
192
|
+
});
|
|
193
|
+
}
|
|
194
|
+
}
|
|
195
|
+
});
|
|
196
|
+
},
|
|
197
|
+
editComponent(activeComponent) {
|
|
198
|
+
const componentInfo = this.allComponentList.find((item) => item.CODE === activeComponent.contentType) || { CODE: activeComponent.contentType };
|
|
199
|
+
const configs = this.getCompConfigs(activeComponent, activeComponent.id);
|
|
200
|
+
this.$emit("open-config", activeComponent.id, componentInfo, configs);
|
|
201
|
+
},
|
|
202
|
+
deleteComponent(component, command) {
|
|
203
|
+
const activeComponent = component || this.activeComponent;
|
|
204
|
+
const index = this.tab.items.findIndex((item) => item.id === activeComponent.id);
|
|
205
|
+
if (activeComponent.contentType === "report-chat" && command === "all") {
|
|
206
|
+
const configs = this.getCompConfigs(activeComponent, activeComponent.id);
|
|
207
|
+
this.$http.removeMulti({
|
|
208
|
+
entityId: "FM_REPORT_BASE",
|
|
209
|
+
ids: configs.id
|
|
210
|
+
});
|
|
211
|
+
}
|
|
212
|
+
if (index !== -1) {
|
|
213
|
+
this.tab.items.splice(index, 1);
|
|
214
|
+
this.$emit("changeItems", this.items);
|
|
215
|
+
if (this.design && this.design.isActive(activeComponent)) this.design.clear();
|
|
216
|
+
}
|
|
217
|
+
}
|
|
218
|
+
},
|
|
219
|
+
mounted() {
|
|
220
|
+
if (!this.items || this.items.length === 0) {
|
|
221
|
+
const items = [{
|
|
222
|
+
id: "tab_" + (/* @__PURE__ */ new Date()).getTime(),
|
|
223
|
+
name: "标签页1",
|
|
224
|
+
items: []
|
|
225
|
+
}];
|
|
226
|
+
this.$emit("changeItems", items);
|
|
227
|
+
this.activeTab = items[0].id;
|
|
228
|
+
} else {
|
|
229
|
+
this.activeTab = this.items[0].id;
|
|
230
|
+
}
|
|
231
|
+
if (this.mode !== "design") return;
|
|
232
|
+
this.measureDesignHeight();
|
|
233
|
+
if (typeof ResizeObserver !== "undefined" && this.$refs.tabsContent) {
|
|
234
|
+
this.designResizeObserver = new ResizeObserver(() => this.measureDesignHeight());
|
|
235
|
+
this.designResizeObserver.observe(this.$refs.tabsContent);
|
|
236
|
+
}
|
|
237
|
+
},
|
|
238
|
+
beforeUnmount() {
|
|
239
|
+
if (this.designResizeObserver) this.designResizeObserver.disconnect();
|
|
240
|
+
}
|
|
241
|
+
};
|
|
242
|
+
const _hoisted_1 = { class: "tabs el-tabs el-tabs--card el-tabs--top" };
|
|
243
|
+
const _hoisted_2 = { class: "el-tabs__header is-top" };
|
|
244
|
+
const _hoisted_3 = {
|
|
245
|
+
key: 0,
|
|
246
|
+
tabindex: "0",
|
|
247
|
+
class: "el-tabs__new-tab"
|
|
248
|
+
};
|
|
249
|
+
const _hoisted_4 = { class: "el-tabs__nav-wrap is-top" };
|
|
250
|
+
const _hoisted_5 = { class: "el-tabs__nav-scroll" };
|
|
251
|
+
const _hoisted_6 = {
|
|
252
|
+
role: "tablist",
|
|
253
|
+
class: "el-tabs__nav is-top"
|
|
254
|
+
};
|
|
255
|
+
const _hoisted_7 = ["onDblclick", "onClick"];
|
|
256
|
+
const _hoisted_8 = ["onClick"];
|
|
257
|
+
const _hoisted_9 = {
|
|
258
|
+
class: "el-tabs__content",
|
|
259
|
+
ref: "tabsContent"
|
|
260
|
+
};
|
|
261
|
+
const _hoisted_10 = { class: "drag-component" };
|
|
262
|
+
const _hoisted_11 = {
|
|
263
|
+
key: 0,
|
|
264
|
+
class: "drag-component"
|
|
265
|
+
};
|
|
266
|
+
const _hoisted_12 = { key: 1 };
|
|
267
|
+
const _hoisted_13 = ["onClick"];
|
|
268
|
+
const _hoisted_14 = ["onClick"];
|
|
269
|
+
const _hoisted_15 = ["onClick"];
|
|
270
|
+
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
271
|
+
const _component_epx_dashboard_grid = resolveComponent("epx-dashboard-grid");
|
|
272
|
+
const _component_epx_component = resolveComponent("epx-component");
|
|
273
|
+
const _component_el_dropdown_item = resolveComponent("el-dropdown-item");
|
|
274
|
+
const _component_el_dropdown_menu = resolveComponent("el-dropdown-menu");
|
|
275
|
+
const _component_el_dropdown = resolveComponent("el-dropdown");
|
|
276
|
+
const _component_epx_dashboard_design_item = resolveComponent("epx-dashboard-design-item");
|
|
277
|
+
const _component_epx_dashboard_design_grid = resolveComponent("epx-dashboard-design-grid");
|
|
278
|
+
return openBlock(), createElementBlock("div", {
|
|
279
|
+
ref: "container",
|
|
280
|
+
class: normalizeClass(["container", "container--" + $props.theme, { "drag-element": $data.isDragElement }, { "is-design": $props.mode === "design" }]),
|
|
281
|
+
onClick: _cache[3] || (_cache[3] = (...args) => $options.updateTabName && $options.updateTabName(...args))
|
|
282
|
+
}, [
|
|
283
|
+
createElementVNode("div", _hoisted_1, [
|
|
284
|
+
createElementVNode("div", _hoisted_2, [
|
|
285
|
+
$props.mode === "design" ? (openBlock(), createElementBlock("span", _hoisted_3, [
|
|
286
|
+
createElementVNode("i", {
|
|
287
|
+
class: "el-icon-plus",
|
|
288
|
+
onClick: _cache[0] || (_cache[0] = (...args) => $options.addTab && $options.addTab(...args))
|
|
289
|
+
})
|
|
290
|
+
])) : createCommentVNode("", true),
|
|
291
|
+
createElementVNode("div", _hoisted_4, [
|
|
292
|
+
createElementVNode("div", _hoisted_5, [
|
|
293
|
+
createElementVNode("div", _hoisted_6, [
|
|
294
|
+
(openBlock(true), createElementBlock(Fragment, null, renderList($props.items, (tab) => {
|
|
295
|
+
return openBlock(), createElementBlock("div", {
|
|
296
|
+
class: normalizeClass(["el-tabs__item", "is-top", { "is-closable": $props.mode === "design" }, { "is-active": $data.activeTab === tab.id }]),
|
|
297
|
+
key: tab.id,
|
|
298
|
+
onDblclick: ($event) => $options.editTab(tab),
|
|
299
|
+
onClick: withModifiers(($event) => $data.activeTab = tab.id, ["stop"])
|
|
300
|
+
}, [
|
|
301
|
+
$data.editTabId === tab.id ? withDirectives((openBlock(), createElementBlock("input", {
|
|
302
|
+
key: 0,
|
|
303
|
+
class: "edit-tab__input",
|
|
304
|
+
ref_for: true,
|
|
305
|
+
ref: "editTabInput",
|
|
306
|
+
type: "text",
|
|
307
|
+
placeholder: "",
|
|
308
|
+
"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => $data.editTabName = $event),
|
|
309
|
+
maxlength: "10"
|
|
310
|
+
}, null, 512)), [
|
|
311
|
+
[vModelText, $data.editTabName]
|
|
312
|
+
]) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
|
|
313
|
+
createElementVNode("span", null, toDisplayString(tab.name), 1),
|
|
314
|
+
$props.mode === "design" ? (openBlock(), createElementBlock("span", {
|
|
315
|
+
key: 0,
|
|
316
|
+
class: "el-icon-close",
|
|
317
|
+
onClick: withModifiers(($event) => $options.removeTab(tab.id), ["stop"])
|
|
318
|
+
}, null, 8, _hoisted_8)) : createCommentVNode("", true)
|
|
319
|
+
], 64))
|
|
320
|
+
], 42, _hoisted_7);
|
|
321
|
+
}), 128))
|
|
322
|
+
])
|
|
323
|
+
])
|
|
324
|
+
])
|
|
325
|
+
]),
|
|
326
|
+
createElementVNode("div", _hoisted_9, [
|
|
327
|
+
(openBlock(true), createElementBlock(Fragment, null, renderList($props.items, (tab) => {
|
|
328
|
+
return openBlock(), createElementBlock("div", {
|
|
329
|
+
class: "el-tab-pane",
|
|
330
|
+
key: tab.id,
|
|
331
|
+
style: normalizeStyle({ display: $data.activeTab === tab.id ? "block" : "none" })
|
|
332
|
+
}, [
|
|
333
|
+
$props.mode !== "design" ? (openBlock(), createBlock(_component_epx_dashboard_grid, {
|
|
334
|
+
key: 0,
|
|
335
|
+
class: "epx-dashboard-tabs__grid",
|
|
336
|
+
items: _ctx.mobileItems(tab.items || []),
|
|
337
|
+
grid: _ctx.gridParams,
|
|
338
|
+
"load-way": _ctx.loadWay,
|
|
339
|
+
"body-height": _ctx.bodyHeight,
|
|
340
|
+
"scroll-root-selector": ".epx-dashboard__container, .dashboard-container"
|
|
341
|
+
}, {
|
|
342
|
+
item: withCtx(({ item }) => [
|
|
343
|
+
createElementVNode("div", _hoisted_10, [
|
|
344
|
+
(openBlock(), createBlock(resolveDynamicComponent("epx-" + item.contentType), {
|
|
345
|
+
ref_for: true,
|
|
346
|
+
ref: `component_${item.i}`,
|
|
347
|
+
class: "epx-dashboard__component",
|
|
348
|
+
"is-dashboard": "",
|
|
349
|
+
key: item.id,
|
|
350
|
+
"comp-id": item.id,
|
|
351
|
+
"comp-title": item.title,
|
|
352
|
+
"comp-style": item.style,
|
|
353
|
+
"comp-configs": $options.getCompConfigs(item, item.id),
|
|
354
|
+
"comp-grid": _ctx.childGrid(item),
|
|
355
|
+
"chart-cache": $props.chartCache,
|
|
356
|
+
"mobile-appearance": _ctx.mobileStacked ? item.mobileAppearance : void 0,
|
|
357
|
+
items: item.items,
|
|
358
|
+
"item-configs": $props.itemConfigs,
|
|
359
|
+
theme: $props.theme
|
|
360
|
+
}, null, 8, ["comp-id", "comp-title", "comp-style", "comp-configs", "comp-grid", "chart-cache", "mobile-appearance", "items", "item-configs", "theme"]))
|
|
361
|
+
])
|
|
362
|
+
]),
|
|
363
|
+
_: 1
|
|
364
|
+
}, 8, ["items", "grid", "load-way", "body-height"])) : $data.activeTab === tab.id ? (openBlock(), createBlock(_component_epx_dashboard_design_grid, {
|
|
365
|
+
key: 1,
|
|
366
|
+
class: "epx-dashboard-tabs__design-grid",
|
|
367
|
+
"sub-grid-of": $options.epxDashboardDesignGrid,
|
|
368
|
+
items: tab.items || [],
|
|
369
|
+
grid: _ctx.gridParams,
|
|
370
|
+
"body-height": _ctx.bodyHeight,
|
|
371
|
+
"min-height": $data.designMinHeight,
|
|
372
|
+
onChange: $options.onDesignChange,
|
|
373
|
+
onTransferOut: (item) => $options.onTransferOut(tab, item),
|
|
374
|
+
onTransferIn: (item) => $options.onTransferIn(tab, item)
|
|
375
|
+
}, {
|
|
376
|
+
item: withCtx(({ item }) => [
|
|
377
|
+
createVNode(_component_epx_dashboard_design_item, {
|
|
378
|
+
item,
|
|
379
|
+
active: !!$options.design && $options.design.isActive(item),
|
|
380
|
+
floatable: _ctx.gridParams.mode !== "float",
|
|
381
|
+
onSelect: $options.openConfigPanel
|
|
382
|
+
}, {
|
|
383
|
+
operates: withCtx(() => [
|
|
384
|
+
item.contentType === "report-chart" ? (openBlock(), createElementBlock("i", {
|
|
385
|
+
key: 0,
|
|
386
|
+
class: "component-operate__item el-icon-edit-outline",
|
|
387
|
+
onClick: ($event) => $options.designReport(item)
|
|
388
|
+
}, null, 8, _hoisted_13)) : createCommentVNode("", true),
|
|
389
|
+
createElementVNode("i", {
|
|
390
|
+
class: "component-operate__item el-icon-setting",
|
|
391
|
+
onClick: ($event) => $options.editComponent(item)
|
|
392
|
+
}, null, 8, _hoisted_14),
|
|
393
|
+
item.contentType === "report-chart" ? (openBlock(), createBlock(_component_el_dropdown, {
|
|
394
|
+
key: 1,
|
|
395
|
+
class: "componnet-dropdown",
|
|
396
|
+
onCommand: (v) => $options.deleteComponent(item, v)
|
|
397
|
+
}, {
|
|
398
|
+
dropdown: withCtx(() => [
|
|
399
|
+
createVNode(_component_el_dropdown_menu, null, {
|
|
400
|
+
default: withCtx(() => [
|
|
401
|
+
createVNode(_component_el_dropdown_item, { command: "only" }, {
|
|
402
|
+
default: withCtx(() => [..._cache[4] || (_cache[4] = [
|
|
403
|
+
createTextVNode("仅从仪表盘中删除", -1)
|
|
404
|
+
])]),
|
|
405
|
+
_: 1
|
|
406
|
+
}),
|
|
407
|
+
createVNode(_component_el_dropdown_item, { command: "all" }, {
|
|
408
|
+
default: withCtx(() => [..._cache[5] || (_cache[5] = [
|
|
409
|
+
createTextVNode("从仪表盘和报表库中删除", -1)
|
|
410
|
+
])]),
|
|
411
|
+
_: 1
|
|
412
|
+
})
|
|
413
|
+
]),
|
|
414
|
+
_: 1
|
|
415
|
+
})
|
|
416
|
+
]),
|
|
417
|
+
default: withCtx(() => [
|
|
418
|
+
_cache[6] || (_cache[6] = createElementVNode("i", { class: "component-operate__item el-icon-delete" }, null, -1))
|
|
419
|
+
]),
|
|
420
|
+
_: 1
|
|
421
|
+
}, 8, ["onCommand"])) : (openBlock(), createElementBlock("i", {
|
|
422
|
+
key: 2,
|
|
423
|
+
class: "component-operate__item el-icon-delete",
|
|
424
|
+
onClick: ($event) => $options.deleteComponent(item)
|
|
425
|
+
}, null, 8, _hoisted_15))
|
|
426
|
+
]),
|
|
427
|
+
default: withCtx(() => [
|
|
428
|
+
item.contentType && !$data.reloadComponent[item.id] ? (openBlock(), createElementBlock("div", _hoisted_11, [
|
|
429
|
+
(openBlock(), createBlock(_component_epx_component, {
|
|
430
|
+
name: item.contentType,
|
|
431
|
+
ref_for: true,
|
|
432
|
+
ref: `component_${item.i}`,
|
|
433
|
+
class: "epx-dashboard__component",
|
|
434
|
+
"is-dashboard": "",
|
|
435
|
+
key: item.id,
|
|
436
|
+
"comp-id": item.id,
|
|
437
|
+
"comp-title": item.title,
|
|
438
|
+
"comp-style": item.style,
|
|
439
|
+
"comp-configs": $options.getCompConfigs(item, item.id),
|
|
440
|
+
"comp-grid": _ctx.childGrid(item),
|
|
441
|
+
"comp-item": item,
|
|
442
|
+
items: item.items,
|
|
443
|
+
"item-configs": $props.itemConfigs,
|
|
444
|
+
"dashboard-id": $props.dashboardId,
|
|
445
|
+
"all-component-list": $props.allComponentList,
|
|
446
|
+
theme: $props.theme,
|
|
447
|
+
mode: "design",
|
|
448
|
+
"mobile-appearance": _ctx.mobileStacked ? item.mobileAppearance : void 0,
|
|
449
|
+
onChangeItems: (v) => $options.changeSubItems(tab, item, v),
|
|
450
|
+
onOpenConfig: _cache[2] || (_cache[2] = (...args) => _ctx.$emit("open-config", ...args))
|
|
451
|
+
}, null, 8, ["name", "comp-id", "comp-title", "comp-style", "comp-configs", "comp-grid", "comp-item", "items", "item-configs", "dashboard-id", "all-component-list", "theme", "mobile-appearance", "onChangeItems"]))
|
|
452
|
+
])) : (openBlock(), createElementBlock("span", _hoisted_12, toDisplayString(item.i), 1))
|
|
453
|
+
]),
|
|
454
|
+
_: 2
|
|
455
|
+
}, 1032, ["item", "active", "floatable", "onSelect"])
|
|
456
|
+
]),
|
|
457
|
+
_: 2
|
|
458
|
+
}, 1032, ["sub-grid-of", "items", "grid", "body-height", "min-height", "onChange", "onTransferOut", "onTransferIn"])) : createCommentVNode("", true)
|
|
459
|
+
], 4);
|
|
460
|
+
}), 128))
|
|
461
|
+
], 512)
|
|
462
|
+
])
|
|
463
|
+
], 2);
|
|
464
|
+
}
|
|
465
|
+
const DashboardTabs = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-503fe9af"]]);
|
|
466
|
+
export {
|
|
467
|
+
DashboardTabs as default
|
|
468
|
+
};
|
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
import component from "@epxing/core/src/mixins/component";
|
|
2
|
+
import { openBlock, createElementBlock, normalizeStyle, normalizeClass, createCommentVNode, createTextVNode, toDisplayString } from "vue";
|
|
3
|
+
/* empty css */
|
|
4
|
+
import _export_sfc from "../_virtual/_plugin-vue_export-helper.js";
|
|
5
|
+
const _sfc_main = {
|
|
6
|
+
name: "epx-dashboard-title",
|
|
7
|
+
mixins: [component],
|
|
8
|
+
// ↓↓↓ 配置点默认值(页面配置可覆盖)
|
|
9
|
+
subTitle: "",
|
|
10
|
+
// 副标题文案,配置后展示在标题下方
|
|
11
|
+
subTitleFontStyle: {},
|
|
12
|
+
// 副标题字体样式(PC 端)
|
|
13
|
+
subTitleFontStyleMobile: {},
|
|
14
|
+
// 副标题字体样式(移动端,在 PC 样式基础上覆盖,只需配置差异项)
|
|
15
|
+
titleFontStyle: {},
|
|
16
|
+
// 主标题字体样式(PC 端)
|
|
17
|
+
titleFontStyleMobile: {},
|
|
18
|
+
// 主标题字体样式(移动端,在 PC 样式基础上覆盖,只需配置差异项)
|
|
19
|
+
horizontal: "center",
|
|
20
|
+
// 水平对齐:flex-start 居左 / center 居中 / flex-end 居右
|
|
21
|
+
vertical: "center",
|
|
22
|
+
// 垂直对齐:flex-start 顶部 / center 居中 / flex-end 底部
|
|
23
|
+
props: {
|
|
24
|
+
theme: String
|
|
25
|
+
},
|
|
26
|
+
computed: {
|
|
27
|
+
subTitle() {
|
|
28
|
+
const { subTitle = "" } = this.$configs;
|
|
29
|
+
return subTitle;
|
|
30
|
+
},
|
|
31
|
+
titleStyle() {
|
|
32
|
+
const { titleFontStyle = {}, titleFontStyleMobile = {} } = this.$configs;
|
|
33
|
+
const style = { ...titleFontStyle };
|
|
34
|
+
if (this.$isMobile) Object.assign(style, titleFontStyleMobile);
|
|
35
|
+
return style;
|
|
36
|
+
},
|
|
37
|
+
subTitleStyle() {
|
|
38
|
+
const { subTitleFontStyle = {}, subTitleFontStyleMobile = {} } = this.$configs;
|
|
39
|
+
const style = { ...subTitleFontStyle };
|
|
40
|
+
if (this.$isMobile) Object.assign(style, subTitleFontStyleMobile);
|
|
41
|
+
return style;
|
|
42
|
+
},
|
|
43
|
+
layoutStyle() {
|
|
44
|
+
const { horizontal = "center", vertical = "center" } = this.$configs;
|
|
45
|
+
const { textAlign } = this.$component.style || {};
|
|
46
|
+
const align = { left: "flex-start", center: "center", right: "flex-end" }[textAlign] || horizontal;
|
|
47
|
+
return {
|
|
48
|
+
alignItems: align,
|
|
49
|
+
justifyContent: vertical,
|
|
50
|
+
textAlign: { "flex-start": "left", center: "center", "flex-end": "right" }[align]
|
|
51
|
+
};
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
};
|
|
55
|
+
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
56
|
+
return openBlock(), createElementBlock("div", {
|
|
57
|
+
class: normalizeClass(["epx-dashboard-title", "epx-dashboard-title--" + $props.theme]),
|
|
58
|
+
style: normalizeStyle([$options.layoutStyle, _ctx.$component.style])
|
|
59
|
+
}, [
|
|
60
|
+
_ctx.$configs.level === "h3" ? (openBlock(), createElementBlock("h3", {
|
|
61
|
+
key: 0,
|
|
62
|
+
style: normalizeStyle($options.titleStyle)
|
|
63
|
+
}, [
|
|
64
|
+
_ctx.$configs.icon ? (openBlock(), createElementBlock("i", {
|
|
65
|
+
key: 0,
|
|
66
|
+
class: normalizeClass(_ctx.$configs.icon),
|
|
67
|
+
style: normalizeStyle({ color: _ctx.$configs.iconColor })
|
|
68
|
+
}, null, 6)) : createCommentVNode("", true),
|
|
69
|
+
createTextVNode(toDisplayString(_ctx.$component.title), 1)
|
|
70
|
+
], 4)) : _ctx.$configs.level === "h2" ? (openBlock(), createElementBlock("h2", {
|
|
71
|
+
key: 1,
|
|
72
|
+
style: normalizeStyle($options.titleStyle)
|
|
73
|
+
}, [
|
|
74
|
+
_ctx.$configs.icon ? (openBlock(), createElementBlock("i", {
|
|
75
|
+
key: 0,
|
|
76
|
+
class: normalizeClass(_ctx.$configs.icon),
|
|
77
|
+
style: normalizeStyle({ color: _ctx.$configs.iconColor })
|
|
78
|
+
}, null, 6)) : createCommentVNode("", true),
|
|
79
|
+
createTextVNode(toDisplayString(_ctx.$component.title), 1)
|
|
80
|
+
], 4)) : (openBlock(), createElementBlock("h1", {
|
|
81
|
+
key: 2,
|
|
82
|
+
style: normalizeStyle($options.titleStyle)
|
|
83
|
+
}, [
|
|
84
|
+
_ctx.$configs.icon ? (openBlock(), createElementBlock("i", {
|
|
85
|
+
key: 0,
|
|
86
|
+
class: normalizeClass(_ctx.$configs.icon),
|
|
87
|
+
style: normalizeStyle({ color: _ctx.$configs.iconColor })
|
|
88
|
+
}, null, 6)) : createCommentVNode("", true),
|
|
89
|
+
createTextVNode(toDisplayString(_ctx.$component.title), 1)
|
|
90
|
+
], 4)),
|
|
91
|
+
$options.subTitle ? (openBlock(), createElementBlock("p", {
|
|
92
|
+
key: 3,
|
|
93
|
+
class: "epx-dashboard-title__sub-title",
|
|
94
|
+
style: normalizeStyle($options.subTitleStyle)
|
|
95
|
+
}, toDisplayString($options.subTitle), 5)) : createCommentVNode("", true)
|
|
96
|
+
], 6);
|
|
97
|
+
}
|
|
98
|
+
const DashboardTitle = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
|
|
99
|
+
export {
|
|
100
|
+
DashboardTitle as default
|
|
101
|
+
};
|