diff --git a/src/components/Graph.vue b/src/components/Graph.vue index 7d1ba978..85638baa 100644 --- a/src/components/Graph.vue +++ b/src/components/Graph.vue @@ -44,6 +44,13 @@ const props = defineProps({ type: Object as PropType<{ [key: string]: any }>, default: () => ({}), }, + filters: { + type: Object as PropType<{ + value: number | string; + dataIndex: number; + sourceId: string; + }>, + }, }); const available = computed( () => @@ -61,9 +68,25 @@ onMounted(async () => { if (!instance) { return; } - instance.on("click", (params: any) => { + instance.on("click", (params: unknown) => { emits("select", params); }); + document.addEventListener( + "click", + () => { + if (instance.isDisposed()) { + return; + } + instance.dispatchAction({ + type: "hideTip", + }); + instance.dispatchAction({ + type: "updateAxisPointer", + currTrigger: "leave", + }); + }, + true + ); }, 1000); }); @@ -79,6 +102,22 @@ watch( setOptions(newVal); } ); +watch( + () => props.filters, + () => { + const instance = getInstance(); + if (!instance) { + return; + } + if (props.filters) { + instance.dispatchAction({ + type: "showTip", + dataIndex: props.filters.dataIndex, + seriesIndex: 0, + }); + } + } +); onBeforeUnmount(() => { removeResizeListener(unref(chartRef), resize); diff --git a/src/hooks/useDashboardsSession.ts b/src/hooks/useDashboardsSession.ts index bd3e1a54..e7c332b8 100644 --- a/src/hooks/useDashboardsSession.ts +++ b/src/hooks/useDashboardsSession.ts @@ -14,12 +14,13 @@ * See the License for the specific language governing permissions and * limitations under the License. */ - +import { useDashboardStore } from "@/store/modules/dashboard"; export default function getDashboard(param: { name: string; layer: string; entity: string; }) { + const dashboardStore = useDashboardStore(); const list = JSON.parse(sessionStorage.getItem("dashboards") || "[]"); const dashboard = list.find( (d: { name: string; layer: string; entity: string }) => @@ -27,6 +28,20 @@ export default function getDashboard(param: { d.entity === param.entity && d.layer === param.layer ); - - return dashboard; + const all = dashboardStore.layout; + const widgets = []; + for (const item of all) { + if (item.type === "Tab") { + if (item.children && item.children.length) { + for (const child of item.children) { + if (child.children && child.children.length) { + widgets.push(...child.children); + } + } + } + } else { + widgets.push(item); + } + } + return { dashboard, widgets }; } diff --git a/src/hooks/useProcessor.ts b/src/hooks/useProcessor.ts index 018434df..11d53e70 100644 --- a/src/hooks/useProcessor.ts +++ b/src/hooks/useProcessor.ts @@ -142,6 +142,10 @@ export function useSourceProcessor( ElMessage.error(resp.errors); return {}; } + if (!resp.data) { + ElMessage.error("The query is wrong"); + return {}; + } const source: { [key: string]: unknown } = {}; const keys = Object.keys(resp.data); diff --git a/src/locales/lang/en.ts b/src/locales/lang/en.ts index 8c62373e..874a2ee7 100644 --- a/src/locales/lang/en.ts +++ b/src/locales/lang/en.ts @@ -142,6 +142,11 @@ const msg = { interval: "Refresh Interval", pause: "Pause", begin: "Start", + associateOptions: "Association Options", + widget: "Widget", + nameTip: + "The name only supports Chinese and English, horizontal lines and underscores", + duplicateName: "Duplicate name", seconds: "Seconds", hourTip: "Select Hour", minuteTip: "Select Minute", diff --git a/src/locales/lang/es.ts b/src/locales/lang/es.ts index 794980e0..c0118720 100644 --- a/src/locales/lang/es.ts +++ b/src/locales/lang/es.ts @@ -142,6 +142,11 @@ const msg = { interval: "Intervalo de actualización", pause: "Pausa", begin: "Inicio", + associateOptions: "Opciones de asociación", + widget: "Dispositivo pequeño", + duplicateName: "Nombre duplicado", + nameTip: + "Este nombre sólo admite chino e inglés, líneas cruzadas y subrayado", seconds: "Segundos", hourTip: "Seleccione Hora", minuteTip: "Seleccione Minuto", diff --git a/src/locales/lang/zh.ts b/src/locales/lang/zh.ts index 10d8837a..4c2d96a3 100644 --- a/src/locales/lang/zh.ts +++ b/src/locales/lang/zh.ts @@ -140,6 +140,10 @@ const msg = { interval: "刷新间隔时间", pause: "暂停", begin: "开始", + associateOptions: "关联选项", + widget: "部件", + nameTip: "该名称仅支持中文和英文、横线和下划线", + duplicateName: "重复的名称", seconds: "秒", hourTip: "选择小时", minuteTip: "选择分钟", diff --git a/src/store/modules/dashboard.ts b/src/store/modules/dashboard.ts index d324b4c8..9809221f 100644 --- a/src/store/modules/dashboard.ts +++ b/src/store/modules/dashboard.ts @@ -80,6 +80,7 @@ export const dashboardStore = defineStore({ const newItem: LayoutConfig = { ...NewControl, i: index, + id: index, type, metricTypes: [""], metrics: [""], @@ -152,9 +153,11 @@ export const dashboardStore = defineStore({ if (!children.length) { index = "0"; } + const id = `${activedGridItem}-${tabIndex}-${index}`; const newItem: LayoutConfig = { ...NewControl, i: index, + id, type, metricTypes: [""], metrics: [""], @@ -275,6 +278,28 @@ export const dashboardStore = defineStore({ }; this.selectedGrid = this.layout[index]; }, + setWidget(param: LayoutConfig) { + for (let i = 0; i < this.layout.length; i++) { + if (this.layout[i].type === "Tab") { + if (this.layout[i].children && this.layout[i].children.length) { + for (const child of this.layout[i].children) { + if (child.children && child.children.length) { + for (let c = 0; c < child.children.length; c++) { + if (child.children[c].id === param.id) { + child.children.splice(c, 1, param); + return; + } + } + } + } + } + } else { + if (this.layout[i].id === param.id) { + this.layout.splice(i, 1, param); + } + } + } + }, async fetchMetricType(item: string) { const res: AxiosResponse = await graphql .query("queryTypeOfMetrics") diff --git a/src/types/dashboard.d.ts b/src/types/dashboard.d.ts index 0601c7ad..4bb9aa33 100644 --- a/src/types/dashboard.d.ts +++ b/src/types/dashboard.d.ts @@ -36,6 +36,9 @@ export interface LayoutConfig { children?: { name: string; children: LayoutConfig[] }[]; activedTabIndex?: number; metricConfig?: MetricConfigOpt[]; + id?: string; + associate?: { widgetId: string }[]; + filters?: { dataIndex: number; sourceId: string }; } export type MetricConfigOpt = { @@ -48,6 +51,7 @@ export type MetricConfigOpt = { }; export interface WidgetConfig { + name?: string; title?: string; tips?: string; } @@ -137,3 +141,15 @@ export interface TopologyConfig { depth?: number; showDepth?: boolean; } +export type EventParams = { + componentType: string; + seriesType: string; + seriesIndex: number; + seriesName: string; + name: string; + dataIndex: number; + data: Record; + dataType: string; + value: number | number[]; + color: string; +}; diff --git a/src/views/dashboard/Edit.vue b/src/views/dashboard/Edit.vue index ad4b8c95..dd006092 100644 --- a/src/views/dashboard/Edit.vue +++ b/src/views/dashboard/Edit.vue @@ -41,6 +41,7 @@ import Tool from "./panel/Tool.vue"; import { useDashboardStore } from "@/store/modules/dashboard"; import { useAppStoreWithOut } from "@/store/modules/app"; import Configuration from "./configuration"; +import { LayoutConfig } from "@/types/dashboard"; export default defineComponent({ name: "Dashboard", @@ -66,7 +67,8 @@ export default defineComponent({ sessionStorage.getItem(layoutKey.value) || "{}" ); const layout: any = c.configuration || {}; - dashboardStore.setLayout(layout.children || []); + + dashboardStore.setLayout(setWidgetsID(layout.children || [])); appStore.setPageTitle(layout.name); if (p.entity) { dashboardStore.setCurrentDashboard({ @@ -78,6 +80,24 @@ export default defineComponent({ }); } } + function setWidgetsID(widgets: LayoutConfig[]) { + for (const item of widgets) { + item.id = item.i; + if (item.type === "Tab") { + if (item.children && item.children.length) { + for (const [index, child] of item.children.entries()) { + if (child.children && child.children.length) { + child.children.map((d: { i: string; index: string } | any) => { + d.id = `${item.i}-${index}-${d.i}`; + return d; + }); + } + } + } + } + } + return widgets; + } function handleClick(e: any) { e.stopPropagation(); if (e.target.className === "ds-main") { diff --git a/src/views/dashboard/List.vue b/src/views/dashboard/List.vue index 7d2bf3c6..f8cb43ef 100644 --- a/src/views/dashboard/List.vue +++ b/src/views/dashboard/List.vue @@ -232,12 +232,16 @@ function exportTemplates() { }, 2000); } function optimizeTemplate( - children: (LayoutConfig & { moved?: boolean; standard?: unknown })[] + children: (LayoutConfig & { + moved?: boolean; + standard?: unknown; + })[] ) { for (const child of children || []) { delete child.moved; delete child.activedTabIndex; delete child.standard; + delete child.id; if (isEmptyObject(child.graph)) { delete child.graph; } @@ -402,6 +406,7 @@ async function updateName(d: DashboardItem, value: string) { name: value, }; delete c.id; + delete c.filters; const setting = { id: d.id, configuration: JSON.stringify(c), diff --git a/src/views/dashboard/configuration/Widget.vue b/src/views/dashboard/configuration/Widget.vue index 3cc992ec..cf29d8e9 100644 --- a/src/views/dashboard/configuration/Widget.vue +++ b/src/views/dashboard/configuration/Widget.vue @@ -58,6 +58,13 @@ limitations under the License. --> + + +
@@ -77,17 +84,13 @@ import { useDashboardStore } from "@/store/modules/dashboard"; import { useAppStoreWithOut } from "@/store/modules/app"; import { Option } from "@/types/app"; import graphs from "../graphs"; -import configs from "./widget/graph-styles"; -import WidgetOptions from "./widget/WidgetOptions.vue"; -import MetricOptions from "./widget/metric/Index.vue"; +import CustomOptions from "./widget/index"; export default defineComponent({ name: "WidgetEdit", components: { ...graphs, - ...configs, - WidgetOptions, - MetricOptions, + ...CustomOptions, }, setup() { const configHeight = document.documentElement.clientHeight - 520; @@ -111,6 +114,12 @@ export default defineComponent({ const graph = computed(() => dashboardStore.selectedGrid.graph || {}); const title = computed(() => encodeURIComponent(widget.value.title || "")); const tips = computed(() => encodeURIComponent(widget.value.tips || "")); + const hasAssociate = computed(() => + ["Bar", "Line", "Area"].includes( + dashboardStore.selectedGrid.graph && + dashboardStore.selectedGrid.graph.type + ) + ); function getSource(source: unknown) { states.source = source; @@ -145,6 +154,7 @@ export default defineComponent({ graph, title, tips, + hasAssociate, }; }, }); diff --git a/src/views/dashboard/configuration/widget/AssociateOptions.vue b/src/views/dashboard/configuration/widget/AssociateOptions.vue new file mode 100644 index 00000000..bf846110 --- /dev/null +++ b/src/views/dashboard/configuration/widget/AssociateOptions.vue @@ -0,0 +1,125 @@ + + + + diff --git a/src/views/dashboard/configuration/widget/WidgetOptions.vue b/src/views/dashboard/configuration/widget/WidgetOptions.vue index 5a77ff5e..5f848214 100644 --- a/src/views/dashboard/configuration/widget/WidgetOptions.vue +++ b/src/views/dashboard/configuration/widget/WidgetOptions.vue @@ -13,6 +13,16 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. -->