ui

2025-04-23 11:21:08 +08:00
parent fc643727f3
commit 7a1aae1e2f
135 changed files with 221483 additions and 1 deletions
@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>ECharts</title>
+    <!-- 引入刚刚下载的 ECharts 文件 -->
+    <script src="/ui/assets/echarts.js"></script>
+  </head>
+  <body>
+    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
+    <div id="main" style="width: 1100px;height:800px;"></div>
+    <script type="text/javascript">
+      // 基于准备好的dom，初始化echarts实例
+   
+      let myChart = window.echarts.init($node.children[0]);
+      function convertToTree(data) {
+          const map = {};
+          const roots = [];
+
+          // 首先创建所有节点的映射
+          data.forEach(item => {
+            map[item.id] = {
+              name: item.name,
+              value:item.id,
+              children: []
+            };
+          });
+
+          // 构建树形结构
+          data.forEach(item => {
+            const node = map[item.id];
+            if (!item.parent_id || item.parent_id === ''|| item.parent_id === '-1') {
+              roots.push(node);
+            } else {
+              const parent = map[item.parent_id];
+              if (parent) {
+                parent.children.push(node);
+              }
+            }
+          });
+
+          return roots;
+        }
+
+        // 获取数据并展示图表
+        async function fetchAndShowChart() {
+          myChart.showLoading();
+          try {
+            const response = await fetch('http://127.0.0.1:5002/api/tree/', {
+              method: 'GET',
+             
+            });
+            //console.log(response)
+            const result = await response.json();
+            if (result.code === 0) {
+              const treeData = convertToTree(result.data);
+                console.log(treeData)
+              const option = {
+                tooltip: {
+                  trigger: 'item',
+                  triggerOn: 'mousemove'
+                },
+                series: treeData.map((root, index) => ({
+                  type: 'tree',
+                  name: `tree${index + 1}`,
+                  data: [root],
+                  top: '5%',
+                  orient: 'vertical',
+                  left: `${index * 30 + 5}%`,
+                  bottom: '2%',
+                  right: `${(treeData.length - index - 1) * 30 + 5}%`,
+                  symbolSize: 7,
+                  label: {
+                    position: 'left',
+                    verticalAlign: 'middle',
+                    align: 'right'
+                  },
+                  leaves: {
+                    label: {
+                      position: 'right',
+                      verticalAlign: 'middle',
+                      align: 'left'
+                    }
+                  },
+                  emphasis: {
+                    focus: 'descendant'
+                  },
+                  expandAndCollapse: true,
+                  animationDuration: 550,
+                  animationDurationUpdate: 750
+                }))
+              };
+
+              myChart.hideLoading();
+              myChart.setOption(option);
+            }
+          } catch (error) {
+            console.error('获取数据失败:', error);
+            myChart.hideLoading();
+          }
+        }
+
+        // 执行获取数据和展示图表
+        fetchAndShowChart();
+    </script>
+  </body>
+</html>