Signed-off-by: chy <chy@163.com>

doc/docs/guide/community/JiangHH/AJ_Report大屏设计时多组件对齐和拖拽移动实现.md

@@ -0,0 +1,69 @@
+## 多组件对齐和拖拽移动功能
+
+注意前端版本、vue版本 <br>
+
+- 1、多组件选中实现 <br>
+- 2、对齐实现 <br>
+- 3、拖拽实现 <br>
+
+### 1、多组件选中
+
+- 1、Ctrl键 <br>
+- 2、鼠标框选 <br>
+- 3、组合 <br>
+
+#### 方式1  Ctrl键实现多选
+
+- 1、第一次单击组件，会默认把选中的组件加入到已选中的组件集合中 <br>
+- 2、按住Ctrl键选中的组件，会加入到已选中的组件集合中 <br>
+- 3、按住Ctrl键选中的组件，如果已选中的组件中包含该组件，则该组件取消选中 <br>
+- 4、点击大屏其他位置（非组件），会把选中的组件清空 <br>
+
+![01](./picture/img_01.png)
+
+#### 方式2  鼠标框选实现多选
+
+- 1、鼠标 （按下，移动，释放）生成矩形框，跟矩形框相交的组件会被选中 <br>
+- 2、组合方式多选的情况下，框选之前已选中的组件不会加入（除非框选也有） <br>
+- 3、框选的组件，也支持按住Ctrl键取消选中 <br>
+- 4、点击大屏其他位置（非组件），会把选中的组件清空 <br>
+
+![02](./picture/img_02.png) <br>
+
+![03](./picture/img_03.png) <br>
+
+![04](./picture/img_04.png) <br>
+
+### 2、多组件对齐
+
+单选右键菜单 <br>
+
+![05](./picture/img_05.png) <br>
+
+多选右键菜单 <br>
+
+![06](./picture/img_06.png) <br>
+
+#### 左对齐/右对齐/居中对齐
+
+选择左对齐 （以最上边的组件为标准对齐）---不合适自己可以修改代码 <br>
+
+![07](./picture/img_07.png) <br>
+
+#### 上对齐/下对齐/居中对齐
+
+选择上对齐（以最左边的组件为标准对齐）----不合适自己可以修改代码 <br>
+
+![08](./picture/img_08.png) <br>
+
+![09](./picture/img_09.png) <br>
+
+### 3、多组件移动拖拽
+
+#### 多选状态
+
+![10](./picture/img_10.png) <br>
+
+#### 拖拽后
+
+![11](./picture/img_11.png) <br>

doc/docs/guide/community/JiangHH/按钮组件控制多条件组件联动图表实现.md

@@ -0,0 +1,116 @@
+
+## 1.需求：
+    多个下拉框联动一个图表，图表只查询最后一次选择的下拉框内容
+    https://gitee.com/anji-plus/report/issues/IC2TFP
+
+## 2.分析：
+    
+    由于目前设计的组件组件联动，都是在条件组件完成选择或者输入之后就直接触发联动了，
+    针对多个条件组件共同作用同一个图表的情况下，用户可能想要在最后一个组件完成输入的情况下才会触发联动
+
+    所以，设计一个按钮组件，在条件组件都输入完成的情况下，有按钮组件触发联动。
+    
+    图表组件所需要的参数均有按钮组件提供，而按钮组件的参数由条件组件（表单组件）传递，形成一个提交表单。
+
+    按钮组件的数据集跟图表的数据集选择保持一致，即参数保持一直.
+
+    ** 原先联动逻辑无需改变 **
+    1.按钮组件 联动  图表组件;
+    2.条件组件 联动  按钮组件;
+
+## 3.设计示例：
+#### 1.测试数据库表  test_user_expenses
+
+```sql
+create table test_user_expenses
+(
+    id       bigint auto_increment comment '主键'
+        primary key,
+    user     varchar(32) not null comment '用户',
+    year     int         null comment '年份',
+    rq       date        null comment '日期',
+    category varchar(50) null comment '分类',
+    expenses decimal     null comment '支出'
+)
+    comment '测试表' collate = utf8mb4_unicode_ci;
+```
+#### 2.测试数据
+```sql
+INSERT INTO test_user_expenses (id, category, expenses, year, user, rq)VALUES (1, '住房物业', 23460, 2023, 'jhh', '2023-04-01');
+INSERT INTO test_user_expenses (id, category, expenses, year, user, rq)VALUES (2, '日用百货', 6496, 2023, 'jhh', '2023-04-15');
+INSERT INTO test_user_expenses (id, category, expenses, year, user, rq)VALUES (3, '交通出行', 5592, 2023, 'jhh', '2023-05-01');
+INSERT INTO test_user_expenses (id, category, expenses, year, user, rq)VALUES (4, '餐饮美食', 3218, 2023, 'jhh', '2023-06-01');
+INSERT INTO test_user_expenses (id, category, expenses, year, user, rq)VALUES (5, '充值缴费', 1953, 2023, 'jhh', '2023-08-08');
+INSERT INTO test_user_expenses (id, category, expenses, year, user, rq)VALUES (7, '其他', 1888, 2023, 'jhh', '2023-10-01');
+INSERT INTO test_user_expenses (id, category, expenses, year, user, rq)VALUES (8, '住房物业', 23550, 2022, 'jhh', '2022-04-01');
+INSERT INTO test_user_expenses (id, category, expenses, year, user, rq)VALUES (9, '日用百货', 2846, 2022, 'jhh', '2022-04-15');
+INSERT INTO test_user_expenses (id, category, expenses, year, user, rq)VALUES (10, '交通出行', 2108, 2022, 'jhh', '2022-05-01');
+INSERT INTO test_user_expenses (id, category, expenses, year, user, rq)VALUES (11, '餐饮美食', 2634, 2022, 'jhh', '2022-06-01');
+INSERT INTO test_user_expenses (id, category, expenses, year, user, rq)VALUES (12, '充值缴费', 5280, 2022, 'jhh', '2022-08-08');
+INSERT INTO test_user_expenses (id, category, expenses, year, user, rq)VALUES (13, '其他', 11553, 2022, 'jhh', '2022-10-01');
+INSERT INTO test_user_expenses (id, category, expenses, year, user, rq)VALUES (14, '住房物业', 40000, 2024, 'jhh', '2024-04-01');
+INSERT INTO test_user_expenses (id, category, expenses, year, user, rq)VALUES (15, '日用百货', 5000, 2024, 'jhh', '2024-04-15');
+INSERT INTO test_user_expenses (id, category, expenses, year, user, rq)VALUES (16, '交通出行', 3000, 2024, 'jhh', '2024-05-01');
+INSERT INTO test_user_expenses (id, category, expenses, year, user, rq)VALUES (17, '餐饮美食', 3000, 2024, 'jhh', '2024-06-01');
+INSERT INTO test_user_expenses (id, category, expenses, year, user, rq)VALUES (18, '充值缴费', 5000, 2024, 'jhh', '2024-08-08');
+INSERT INTO test_user_expenses (id, category, expenses, year, user, rq)VALUES (19, '其他', 10000, 2024, 'jhh', '2024-10-01');
+```
+
+#### 3.测试用的存储过程
+```sql
+create
+    definer = root@localhost procedure get_data(IN p_year varchar(255), IN p_category varchar(255))
+BEGIN
+    SET @sql = 'SELECT id, user, year,rq, category,expenses FROM test_user_expenses WHERE 1 = 1';
+
+    IF p_year IS NOT NULL AND p_year != '' AND p_year != '全部' THEN
+        SET @sql = CONCAT(@sql, ' AND year = "', p_year, '"');
+    END IF;
+
+    IF p_category IS NOT NULL AND p_category != '' AND p_category != '全部' THEN
+        SET @sql = CONCAT(@sql, ' AND category = "', p_category, '"');
+    END IF;
+
+    PREPARE stmt FROM @sql;
+    EXECUTE stmt;
+    DEALLOCATE PREPARE stmt;
+END;
+```
+
+#### 4.数据集
+数据集设计
+![](./picture/img_12.png)
+
+### 5.大屏设计
+
+![](./picture/img_13.png)
+
+按钮组件
+
+![](./picture/img_14.png)
+
+按钮配置
+![](./picture/img_15.png)
+
+按钮联动图标
+![](./picture/img_16.png)
+按钮联动图标参数信息
+![](./picture/img_17.png)
+
+条件组件联动按钮
+![](./picture/img_18.png)
+![](./picture/img_20.png)
+条件组件联动按钮参数信息
+![](./picture/img_19.png)
+![](./picture/img_21.png)
+
+### 6.测试
+![](./picture/img_22.png)
+
+### 7. 注意事项
+    
+    (1) http方式的数据集参数拼接的方式，不允许传递的参数为空，后端请求url解析后可能会带{}会报错，所以要求所有的条件输入都必须有值，不清楚最新不能把支不支持。
+    (2) 建议增加默认联动开关，看需求自行二次修改。
+    (3) 这里做了表单校验，如果存在未输入的，点击按钮会提示，提示语信息，有开发能力的自行增加配置信息。
+
+