Pev2架构图
2024-09-26 18:20:11 0 举报
vue+ts 数据库执行计划可视化
作者其他创作
大纲/内容
copy.vue
Traverse ctes in plan.value
Generate detailed information of specific node components
Parse plan- source to generate JSON object
stats.vue
Generate tree diagram parameters
Time Parameters
Home.vue
接收plan-source)
Search for historical records
Using D3.js and SVG
Store data
node.ts
Service layer
Home Page
Visual Execution Plan
Extend d3.js
PlanStats.vue
plan
grid.vue
raw
grid
Control page
status
Build a tree structure
Sortable Table
PlanView.vue
Processing plan.value
Generate color section
help-service
d3-flextree
Read plan.value
Generate Row [] [] type plans
persistence layer
color-service.ts
Plan.vue
IndexedDBBrowser built-in database
Monitor the mouse after onCount
plan.value
query
Display Layer
Page construction SVG tree diagram
Auxiliary query
idb.ts
App.vue
Create a plan IPlan and store it as plan.value
plan-service.ts
Enter execution conditions
0 条评论
回复 删除
下一页
