diff --git a/src/components/Graph.vue b/src/components/Graph.vue index 344217e5..9ce9cf20 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( () => @@ -55,6 +62,7 @@ const available = computed( onMounted(async () => { await setOptions(props.option); chartRef.value && addResizeListener(unref(chartRef), resize); + console.log(props.filters); setTimeout(() => { const instance = getInstance(); @@ -79,6 +87,27 @@ watch( setOptions(newVal); } ); +watch( + () => props.filters, + () => { + console.log(props.filters); + const instance = getInstance(); + if (!instance) { + return; + } + if (props.filters) { + instance.dispatchAction({ + type: "showTip", + dataIndex: props.filters.dataIndex, + seriesIndex: 0, + }); + } else { + instance.dispatchAction({ + type: "hideTip", + }); + } + } +); onBeforeUnmount(() => { removeResizeListener(unref(chartRef), resize); diff --git a/src/types/dashboard.d.ts b/src/types/dashboard.d.ts index 7f180afd..3b5e2923 100644 --- a/src/types/dashboard.d.ts +++ b/src/types/dashboard.d.ts @@ -38,6 +38,7 @@ export interface LayoutConfig { metricConfig?: MetricConfigOpt[]; id?: string; associate?: { widgetId: string }[]; + filters?: { value: number | string; dataIndex: number; sourceId: string }; } export type MetricConfigOpt = { diff --git a/src/views/dashboard/controls/Widget.vue b/src/views/dashboard/controls/Widget.vue index d4b2c27e..308cba3e 100644 --- a/src/views/dashboard/controls/Widget.vue +++ b/src/views/dashboard/controls/Widget.vue @@ -61,8 +61,9 @@ limitations under the License. --> metrics: data.metrics || [''], metricTypes: data.metricTypes || [''], i: data.i, + id: data.id, metricConfig: data.metricConfig, - associate: data.associate || [], + filters: data.filters || {}, }" :needQuery="needQuery" @click="clickHandle" @@ -162,6 +163,7 @@ export default defineComponent({ } } function clickHandle(params: EventParams | any) { + console.log(params); const { widgets } = getDashboard(dashboardStore.currentDashboard); const associate = (props.data.associate && props.data.associate) || []; @@ -170,11 +172,12 @@ export default defineComponent({ (d: { id: string }) => d.id === item.widgetId ); if (widget) { - widget.filters = widget.filters || {}; widget.filters = { - ...widget.filters, - [props.data.id || ""]: { value: params.value[0] }, + value: params.value[0], + dataIndex: params.dataIndex, + sourceId: props.data.id || "", }; + dashboardStore.setWidget(widget); } } diff --git a/src/views/dashboard/graphs/Line.vue b/src/views/dashboard/graphs/Line.vue index 344fba44..34091219 100644 --- a/src/views/dashboard/graphs/Line.vue +++ b/src/views/dashboard/graphs/Line.vue @@ -13,7 +13,7 @@ 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. -->