chart.js 34 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758
  1. import { message } from 'antd'
  2. import * as service from '../services/index'
  3. import URLS from '../constants/url'
  4. import CHART_TYPE from './chartType.json'
  5. export default {
  6. namespace: 'chart',
  7. state: {
  8. originData: {
  9. list: [],
  10. filterLabel: '',
  11. groupList: [],
  12. currentGroup: [{
  13. code: 'all',
  14. label: '全部分组'
  15. }],
  16. groupDirty: false
  17. },
  18. },
  19. reducers: {
  20. add(state, action) {
  21. const { data } = action;
  22. let list = state.list;
  23. list.push(data);
  24. return Object.assign({}, state, {list});
  25. },
  26. list(state, action) {
  27. let list = action.list;
  28. return Object.assign({}, state, {list: list});
  29. },
  30. setFilterLabel(state, action) {
  31. const { label } = action;
  32. return Object.assign({}, state, {filterLabel: label});
  33. },
  34. groupList(state, action) {
  35. let data = action.data;
  36. return Object.assign({}, state, {groupList: data});
  37. },
  38. /**
  39. * 设置数据源过滤用分组
  40. */
  41. setCurrentGroup(state, action) {
  42. const { group1, group2 } = action;
  43. let g = [group1];
  44. group2 && g.push(group2);
  45. return Object.assign({}, state, {currentGroup: g});
  46. },
  47. addGroup(state, action) {
  48. const { group } = action;
  49. let list = state.groupList;
  50. list.push(group);
  51. return Object.assign({}, state, {groupList: list});
  52. },
  53. modifyGroup(state, action) {
  54. const { group } = action;
  55. let list = state.groupList;
  56. let dirty = false;
  57. for(let i = 0; i < list.length; i++) {
  58. let l = list[i];
  59. if(l.code === group.code) {
  60. for(let k in l) {
  61. if(group[k] !== undefined && l[k] !== group[k]) {
  62. l[k] = group[k];
  63. dirty = true;
  64. }
  65. }
  66. break;
  67. }
  68. }
  69. return Object.assign({}, state, {groupDirty: dirty, groupList: list});
  70. },
  71. modifyGroups(state, action) {
  72. const { groups } = action;
  73. let list = state.groupList;
  74. const modifyGroupCodes = groups.map(g => g.code);
  75. list = list.filter(l => modifyGroupCodes.indexOf(l.code) === -1);
  76. list = list.concat(groups);
  77. return Object.assign({}, state, {groupList: list});
  78. },
  79. deleteGroup(state, action) {
  80. const { group } = action;
  81. let list = state.groupList;
  82. for(let i = 0; i < list.length; i++) {
  83. let l = list[i];
  84. if(l.code === group.code) {
  85. list.splice(i, 1);
  86. break;
  87. }
  88. }
  89. return Object.assign({}, state, {groupList: list});
  90. },
  91. setGroupDirty(state, action) {
  92. let dirty = action.dirty;
  93. return Object.assign({}, state, {groupDirty: dirty});
  94. },
  95. /**
  96. * 设置图表所属分组
  97. */
  98. setChartGroup(state, action) {
  99. const { chartCode, groupCode } = action;
  100. let list = state.list;
  101. for(let i = 0; i < list.length; i++) {
  102. let l = list[i];
  103. if(l.code === chartCode) {
  104. l.groupCode = groupCode;
  105. break;
  106. }
  107. }
  108. return Object.assign({}, state, {list: list});
  109. },
  110. reset(state, action) {
  111. let newState = Object.assign({}, state, state.originData);
  112. return Object.assign({}, newState);
  113. },
  114. },
  115. effects: {
  116. *fetchList(action, { select, call, put }) {
  117. const { pageNum, pageSize } = action;
  118. const body = {
  119. pageNum: pageNum || 1,
  120. pageSize: pageSize || 999
  121. }
  122. try{
  123. const chart = yield select(state => state.present.chart);
  124. if(!action.mandatory && chart.list.length > 0) {
  125. return;
  126. }
  127. const res = yield call(service.fetch, {
  128. url: URLS.CHART_LIST,
  129. method: 'GET',
  130. body
  131. });
  132. if(!res.err && res.data.code > 0) {
  133. let list = res.data.data.list.map(d => {
  134. let chartOption = d.chartOption ? JSON.parse(d.chartOption) : {};
  135. return {
  136. code: d.chartId+'',
  137. name: d.chartName,
  138. dataSourceCode: d.dataId + '',
  139. dataSourceName: d.dataName,
  140. dataConnectCode: d.dataConnectionId,
  141. dataConnectName: d.dataConnectionName,
  142. access: d.authority === '1', // 权限
  143. database: d.dbStatus === '0', // 数据源是否还存在
  144. type: CHART_TYPE[d.chartType],
  145. creatorCode: d.createId + '',
  146. creatorName: d.createBy,
  147. createTime: d.createDate,
  148. description: d.describes || '',
  149. groupCode: d.chartsGroup + '',
  150. chartOption: chartOption,
  151. demo: d.demo
  152. }
  153. })
  154. yield put({ type: 'list', list: list });
  155. }else {
  156. message.error('请求图表列表失败: ' + (res.err || res.data.msg));
  157. }
  158. }catch(e) {
  159. message.error('请求图表列表失败: ' + e);
  160. }
  161. },
  162. *remoteDetail(action, { select, call, put }) {
  163. const code = action.code;
  164. if(!code){
  165. return
  166. }
  167. try {
  168. const res = yield call(service.fetch, {
  169. url: URLS.CHART_DETAIL,
  170. method: 'GET',
  171. body: {
  172. id: code
  173. }
  174. });
  175. if(!res.err && res.data.code > 0) {
  176. let resData = res.data.data;
  177. let chartConfig = JSON.parse(resData.chartConfig || '{ "xAxis": { "column": {}, "granularity": {} }, "yAxis": { "column": {}, "gauge": {} } }');
  178. let styleConfig = JSON.parse(resData.style || '{}');
  179. let otherConfig = JSON.parse(resData.otherConfig || '{}');
  180. let viewType = CHART_TYPE[resData.chartType];
  181. let filters = JSON.parse(resData.filters || '[]');
  182. let chartOption = JSON.parse(resData.chartOption || '{}');
  183. let data = {
  184. code: resData.chartId + '',
  185. creatorCode: resData.createId+'',
  186. creatorName: resData.createBy,
  187. dataSourceCode: resData.dataId + '',
  188. dataSourceName: resData.dataName,
  189. dataConnectCode: resData.dataConnectionId,
  190. dataConnectName: resData.dataConnectionName,
  191. header: {
  192. label: resData.chartName
  193. },
  194. baseConfig: {
  195. dataSource: {
  196. code: resData.dataId + '',
  197. name: resData.dataName,
  198. },
  199. viewType: viewType
  200. },
  201. styleConfig: styleConfig,
  202. otherConfig: otherConfig,
  203. description: resData.describes,
  204. group: resData.chartsGroup+'',
  205. filters: filters,
  206. chartOption: chartOption,
  207. demo: resData.demo
  208. }
  209. if(viewType === 'bar') {
  210. data.barConfig = chartConfig;
  211. }else if(viewType === 'pie') {
  212. data.pieConfig = chartConfig;
  213. }else if(viewType === 'line') {
  214. data.lineConfig = chartConfig;
  215. }else if(viewType === 'scatter') {
  216. data.scatterConfig = chartConfig;
  217. }else if(viewType === 'aggregateTable') {
  218. data.aggregateTableConfig = chartConfig;
  219. }else if(viewType === 'dataView') {
  220. data.dataViewConfig = chartConfig;
  221. }
  222. let fields = [];
  223. for(let key in data) {
  224. fields.push({
  225. name: key,
  226. value: data[key]
  227. })
  228. }
  229. yield put({ type: 'chartDesigner/defaultChangeFields', fields: fields });
  230. yield put({ type: 'chartDesigner/changeDataSource', dataSource: data.baseConfig.dataSource });
  231. }else {
  232. message.error('解析图表错误: ' + (res.err || res.data.msg));
  233. }
  234. }catch(e) {
  235. message.error('解析图表错误: ' + e);
  236. }
  237. },
  238. *remoteAdd(action, { select, call, put }) {
  239. try{
  240. const chartDesigner = yield select(state => state.present.chartDesigner);
  241. const { header, baseConfig, pieConfig, lineConfig, aggregateTableConfig, dataViewConfig,
  242. barConfig, scatterConfig, otherConfig, description, group, filters, chartOption } = chartDesigner;
  243. let body = {
  244. chartName: header.label,
  245. dataId: baseConfig.dataSource.code,
  246. describes: description,
  247. style: '{}',
  248. otherConfig: JSON.stringify(otherConfig),
  249. chartsGroup: group ? group : '-1',
  250. filters: JSON.stringify(filters),
  251. chartOption: JSON.stringify(chartOption),
  252. }; // 基本属性
  253. if(baseConfig.viewType === 'bar') {
  254. body.chartType = 'Histogram';
  255. body.chartConfig = JSON.stringify(barConfig);
  256. }else if(baseConfig.viewType === 'pie') {
  257. body.chartType = 'Pie';
  258. body.chartConfig = JSON.stringify(pieConfig);
  259. }else if(baseConfig.viewType === 'line') {
  260. body.chartType = 'Line';
  261. body.chartConfig = JSON.stringify(lineConfig);
  262. }else if(baseConfig.viewType === 'scatter') {
  263. body.chartType = 'scatter';
  264. body.chartConfig = JSON.stringify(scatterConfig);
  265. }else if(baseConfig.viewType === 'aggregateTable') {
  266. body.chartType = 'population';
  267. body.chartConfig = JSON.stringify(aggregateTableConfig);
  268. }else if(baseConfig.viewType === 'dataView') {
  269. body.chartType = 'individual';
  270. body.chartConfig = JSON.stringify(dataViewConfig);
  271. }else {
  272. body.chartType = '';
  273. body.chartConfig = JSON.stringify({});
  274. }
  275. const res = yield call(service.fetch, {
  276. url: URLS.CHART_ADD,
  277. body: body
  278. })
  279. console.log('新增图表', body, res);
  280. if(!res.err && res.data.code > 0) {
  281. message.success('新增成功');
  282. yield put({ type: 'fetchList', mandatory: true });
  283. }else {
  284. message.error('新增失败: ' + (res.err || res.data.msg));
  285. }
  286. }catch(e) {
  287. console.error(e);
  288. message.error('新增失败: ' + e);
  289. }
  290. },
  291. *remoteModify(action, { select, call, put }) {
  292. try{
  293. const chartDesigner = yield select(state => state.present.chartDesigner);
  294. const { filters, code, header, baseConfig, pieConfig, lineConfig, aggregateTableConfig, dataViewConfig,
  295. barConfig, scatterConfig, otherConfig, description, group, chartOption, fetchConfig, styleConfig } = chartDesigner;
  296. let body = {
  297. chartId: code,
  298. filters: JSON.stringify(filters),
  299. chartName: header.label,
  300. dataId: baseConfig.dataSource.code,
  301. describes: description || '',
  302. style: JSON.stringify(styleConfig),
  303. otherConfig: JSON.stringify(otherConfig),
  304. chartsGroup: group+'' ? group : '-1',
  305. chartOption: JSON.stringify(chartOption),
  306. fetchConfig: JSON.stringify(fetchConfig),
  307. }; // 基本属性
  308. if(baseConfig.viewType === 'bar') {
  309. body.chartType = 'Histogram';
  310. body.chartConfig = JSON.stringify(barConfig);
  311. }else if(baseConfig.viewType === 'pie') {
  312. body.chartType = 'Pie';
  313. body.chartConfig = JSON.stringify(pieConfig);
  314. }else if(baseConfig.viewType === 'line') {
  315. body.chartType = 'Line';
  316. body.chartConfig = JSON.stringify(lineConfig);
  317. }else if(baseConfig.viewType === 'scatter') {
  318. body.chartType = 'scatter';
  319. body.chartConfig = JSON.stringify(scatterConfig);
  320. }else if(baseConfig.viewType === 'aggregateTable') {
  321. body.chartType = 'population';
  322. body.chartConfig = JSON.stringify(aggregateTableConfig);
  323. }else if(baseConfig.viewType === 'dataView') {
  324. body.chartType = 'individual';
  325. body.chartConfig = JSON.stringify(dataViewConfig);
  326. }
  327. console.log('body', body)
  328. const res = yield call(service.fetch, {
  329. url: URLS.CHART_UPDATE,
  330. body: body
  331. })
  332. console.log('修改图表', body, res);
  333. if(!res.err && res.data.code > 0) {
  334. message.success('修改成功');
  335. yield put({ type: 'fetchList', mandatory: true });
  336. }else {
  337. message.error('修改失败: ' + (res.err || res.data.msg));
  338. }
  339. }catch(e) {
  340. console.error(e);
  341. message.error('修改失败: ' + e);
  342. }
  343. },
  344. *remoteDelete(action, { select, call, put, takeEvery, takeLatest }) {
  345. const chart = yield select(state => state.present.chart);
  346. const code = action.code;
  347. let list = chart.list;
  348. try {
  349. const res = yield call(service.fetch, {
  350. url: URLS.CHART_DELETE,
  351. body: code
  352. });
  353. console.log('删除图表', code, res);
  354. if(!res.err && res.data.code > 0) {
  355. for(let i = 0; i < list.length; i++) {
  356. if(list[i].code === code) {
  357. list.splice(i, 1);
  358. break;
  359. }
  360. }
  361. yield put({ type: 'list', list: list });
  362. message.success('删除成功');
  363. }else {
  364. message.error('删除失败: ' + (res.err || res.data.msg));
  365. }
  366. }catch(e) {
  367. console.log(e);
  368. message.error('删除失败: ' + e);
  369. }
  370. },
  371. *remoteGroupList(action, { select, call, put }) {
  372. try {
  373. const chart = yield select(state => state.present.chart);
  374. if(!action.mandatory && chart.groupList.length > 0) {
  375. return;
  376. }
  377. const res = yield call(service.fetch, {
  378. url: URLS.GROUP_CHART_LIST,
  379. });
  380. console.log('请求图表分组列表', res);
  381. if(!res.err && res.data.code > 0) {
  382. const resData = res.data.data;
  383. let data = resData.map(d => {
  384. return {
  385. code: d.id+'',
  386. pcode: d.fatherId+'',
  387. index: +d.groupIndex,
  388. label: d.groupName+'',
  389. }
  390. });
  391. yield put({ type: 'groupList', data });
  392. }else {
  393. message.error('读取图表分组列表错误: ' + (res.err || res.data.msg));
  394. }
  395. }catch(e) {
  396. console.log(e);
  397. message.error('读取图表分组列表错误: ' + e);
  398. }
  399. },
  400. /**
  401. * 新增分组/子分组,需要传入父节点code
  402. */
  403. *remoteAddGroup(action, { select, call, put }) {
  404. try {
  405. const chart = yield select((state) => state.present.chart);
  406. const group = chart.groupList;
  407. const pgroups = group.filter(g => g.pcode === '-1');
  408. const cgroups = group.filter(g => g.pcode !== '-1');
  409. const { pgroup } = action;
  410. let body = {};
  411. if(pgroup) {
  412. body = {
  413. fatherId: pgroup.code,
  414. groupName: '新子分组',
  415. groupIndex: cgroups.filter(c => c.pcode === pgroup.code).length,
  416. }
  417. }else {
  418. body = {
  419. fatherId: '-1',
  420. groupName: '新分组',
  421. groupIndex: pgroups.length,
  422. }
  423. }
  424. console.log('新增图表分组', body);
  425. const res = yield call(service.fetch, {
  426. url: URLS.GROUP_CHART_ADD,
  427. body: body
  428. });
  429. console.log('新增图表分组', body, res);
  430. if(!res.err && res.data.code > 0) {
  431. let group = {
  432. code: res.data.data + '',
  433. pcode: body.fatherId + '',
  434. index: body.groupIndex,
  435. label: body.groupName+'',
  436. }
  437. yield put({ type: 'addGroup', group });
  438. }else {
  439. message.error('添加分组失败: ' + (res.err || res.data.msg));
  440. }
  441. }catch(e) {
  442. console.log(e);
  443. message.error('添加分组失败: ' + e);
  444. }
  445. },
  446. /**
  447. * 修改单个分组信息(因为不涉及顺序号的修改,所以一般只用于label的修改)
  448. */
  449. *remoteModifyGroup(action, { select, call, put }) {
  450. try {
  451. const chart = yield select((state) => state.present.chart);
  452. const groupDirty = chart.groupDirty;
  453. const group = action.group;
  454. if(!groupDirty) { // 如果属性无改动则取消修改请求
  455. return;
  456. }
  457. let body = {
  458. id: group.code,
  459. fatherId: group.pcode,
  460. groupName: group.label,
  461. groupIndex: group.index,
  462. }
  463. const res = yield call(service.fetch, {
  464. url: URLS.GROUP_CHART_UPDATE,
  465. body: body
  466. });
  467. console.log('修改图表分组', body, res);
  468. if(!res.err && res.data.code > 0) {
  469. yield put({ type: 'setGroupDirty', dirty: false });
  470. }else {
  471. message.error('修改分组失败: ' + (res.err || res.data.msg));
  472. }
  473. }catch(e) {
  474. console.log(e);
  475. message.error('修改分组失败: ' + e);
  476. }
  477. },
  478. /**
  479. * 批量修改多个分组信息(在移动位置时用)
  480. */
  481. *remoteModifyGroups(action, { select, call, put }) {
  482. try {
  483. const groups = action.groups;
  484. let body = groups.map(g => {
  485. return {
  486. id: g.code,
  487. groupName: g.label,
  488. groupIndex: g.index,
  489. fatherId: g.pcode,
  490. }
  491. });
  492. const res = yield call(service.fetch, {
  493. url: URLS.GROUP_CHART_LIST_UPDATE,
  494. body: body
  495. });
  496. console.log('批量修改图表分组', body, res);
  497. if(!res.err && res.data.code > 0) {
  498. yield put({ type: 'modifyGroups', groups: groups });
  499. }else {
  500. message.error('修改分组失败: ' + (res.err || res.data.msg));
  501. }
  502. }catch(e) {
  503. console.log(e);
  504. message.error('修改分组失败: ' + e);
  505. }
  506. },
  507. *remoteDeleteGroup(action, { select, call, put }) {
  508. try {
  509. const chart = yield select((state) => state.present.chart);
  510. const groupList = chart.groupList;
  511. const { group } = action;
  512. let bgroups = groupList.filter(l => l.pcode === group.pcode);
  513. bgroups.splice(group.index, 1);
  514. bgroups = bgroups.map((b, i) => {
  515. return { ...b, index: i }
  516. });
  517. yield put({ type: 'remoteModifyGroups', groups: bgroups });
  518. const res = yield call(service.fetch, {
  519. url: URLS.GROUP_CHART_DELETE,
  520. body: group.code
  521. });
  522. if(!res.err && res.data.code > 0) {
  523. yield put({ type: 'deleteGroup', group});
  524. }else {
  525. message.error('删除分组失败: ' + (res.err || res.data.msg));
  526. }
  527. }catch(e) {
  528. message.error('删除分组失败: ' + e);
  529. }
  530. },
  531. *remoteMoveGroup(action, { select, call, put }) {
  532. try {
  533. const { dragCode, dropCode, dropPosition } = action;
  534. const chart = yield select((state) => state.present.chart);
  535. let group = chart.groupList;
  536. const dragGroup = group.filter(g => g.code === dragCode)[0];
  537. const dropGroup = group.filter(g => g.code === dropCode)[0];
  538. let modifyGroups = [];
  539. if((dragGroup.pcode === '-1' || dropGroup.pcode === '-1') && (dragGroup.pcode !== dropGroup.pcode)) { // 跨级
  540. console.log('跨级');
  541. if(dropGroup.pcode !== '-1') { // 从父级到子级
  542. console.log('error');
  543. return; // 不允许
  544. }else { // 从子级到父级
  545. if(dragGroup.pcode === dropGroup.code) { // 不跨组
  546. if(dropPosition === -1) { // 目标前
  547. console.log('before');
  548. let dragGroups = group.filter(g => g.pcode === dragGroup.pcode).sort((a, b) => a.index - b.index);
  549. let dropGroups = group.filter(g => g.pcode === dropGroup.pcode).sort((a, b) => a.index - b.index);
  550. dragGroups.splice(dragGroup.index, 1);
  551. dragGroups = dragGroups.map((g, i) => {
  552. return { ...g, index: i }
  553. });
  554. dropGroups.splice(dropGroup.index, 0, dragGroup);
  555. dropGroups = dropGroups.map((g, i) => {
  556. return { ...g, index: i, pcode: dropGroup.pcode }
  557. });
  558. modifyGroups = modifyGroups.concat(dragGroups, dropGroups);
  559. }else if(dropPosition === 0) { // 目标内
  560. console.log('nothing');
  561. return; // 无变化
  562. }else if(dropPosition === 1) { // 目标后
  563. console.log('after');
  564. let dragGroups = group.filter(g => g.pcode === dragGroup.pcode).sort((a, b) => a.index - b.index);
  565. let dropGroups = group.filter(g => g.pcode === dropGroup.pcode).sort((a, b) => a.index - b.index);
  566. dragGroups.splice(dragGroup.index, 1);
  567. dragGroups = dragGroups.map((g, i) => {
  568. return { ...g, index: i }
  569. });
  570. dropGroups.splice(dropGroup.index + 1, 0, dragGroup);
  571. dropGroups = dropGroups.map((g, i) => {
  572. return { ...g, index: i, pcode: dropGroup.pcode }
  573. });
  574. modifyGroups = modifyGroups.concat(dragGroups, dropGroups);
  575. }
  576. }else { // 跨组
  577. let dragGroups = group.filter(g => g.pcode === dragGroup.pcode).sort((a, b) => a.index - b.index);
  578. let dropGroups = group.filter(g => g.pcode === dropGroup.pcode).sort((a, b) => a.index - b.index);
  579. let dropChildrenGroups = group.filter(g => g.pcode === dropGroup.code).sort((a, b) => a.index - b.index);
  580. dragGroups.splice(dragGroup.index, 1);
  581. dragGroups = dragGroups.map((g, i) => {
  582. return { ...g, index: i }
  583. });
  584. if(dropPosition === -1) { // 目标前
  585. console.log('before');
  586. dropGroups.splice(dropGroup.index, 0, dragGroup);
  587. dropGroups = dropGroups.map((g, i) => {
  588. return { ...g, index: i, pcode: dropGroup.pcode }
  589. });
  590. modifyGroups = modifyGroups.concat(dragGroups, dropGroups);
  591. }else if(dropPosition === 0) { // 目标内
  592. console.log('in');
  593. dropChildrenGroups.push({
  594. ...dragGroup,
  595. index: dropChildrenGroups.length,
  596. pcode: dropGroup.code
  597. });
  598. modifyGroups = modifyGroups.concat(dragGroups, dropChildrenGroups);
  599. }else if(dropPosition === 1) { // 目标后
  600. console.log('after');
  601. dropGroups.splice(dropGroup.index + 1, 0, dragGroup);
  602. dropGroups = dropGroups.map((g, i) => {
  603. return { ...g, index: i, pcode: dropGroup.pcode }
  604. });
  605. modifyGroups = modifyGroups.concat(dragGroups, dropGroups);
  606. }
  607. }
  608. }
  609. }else { // 不跨级
  610. console.log('不跨级');
  611. if(dragGroup.pcode === dropGroup.pcode) { // 不跨组
  612. console.log('不跨组');
  613. let dGroups = group.filter(g => g.pcode === dragGroup.pcode).sort((a, b) => a.index - b.index);
  614. dGroups.splice(dragGroup.index, 1, {code: 'temp', index: dragGroup.index});
  615. if(dropPosition === -1) { // 目标前
  616. console.log('before');
  617. dGroups.splice(dropGroup.index, 0, dragGroup);
  618. dGroups = dGroups.filter(g => g.code !== 'temp').map((g, i) => {
  619. return { ...g, index: i }
  620. });
  621. modifyGroups = modifyGroups.concat(dGroups);
  622. }else if(dropPosition === 0) { // 目标内
  623. console.log('in');
  624. return;
  625. }else if(dropPosition === 1) { // 目标后
  626. console.log('after');
  627. dGroups.splice(dropGroup.index + 1, 0, dragGroup);
  628. dGroups = dGroups.filter(g => g.code !== 'temp').map((g, i) => {
  629. return { ...g, index: i }
  630. });
  631. modifyGroups = modifyGroups.concat(dGroups);
  632. }
  633. }else { // 跨组
  634. console.log('跨组');
  635. let dragGroups = group.filter(g => g.pcode === dragGroup.pcode).sort((a, b) => a.index - b.index);
  636. let dropGroups = group.filter(g => g.pcode === dropGroup.pcode).sort((a, b) => a.index - b.index);
  637. dragGroups.splice(dragGroup.index, 1);
  638. dragGroups = dragGroups.map((g, i) => {
  639. return { ...g, index: i }
  640. });
  641. for(let i = 0; i < dropGroups.length; i++) {
  642. if(dropGroups[i].code === dropGroup.code) {
  643. if(dropPosition === -1) { // 目标前
  644. console.log('before');
  645. dropGroups.splice(i, 0, dragGroup);
  646. dropGroups = dropGroups.map((g, i) => {
  647. return { ...g, index: i, pcode: dropGroup.pcode }
  648. });
  649. modifyGroups = modifyGroups.concat(dragGroups, dropGroups);
  650. }else if(dropPosition === 0) { // 目标内
  651. console.log('in');
  652. return; // 不允许
  653. }else if(dropPosition === 1) { // 目标后
  654. console.log('after');
  655. dropGroups.splice(i + 1, 0, dragGroup);
  656. dropGroups = dropGroups.map((g, i) => {
  657. return { ...g, index: i, pcode: dropGroup.pcode }
  658. });
  659. modifyGroups = modifyGroups.concat(dragGroups, dropGroups);
  660. }
  661. break;
  662. }
  663. }
  664. }
  665. }
  666. console.log(dragGroup, dropGroup, modifyGroups);
  667. yield put({ type: 'remoteModifyGroups', groups: modifyGroups });
  668. }catch(e) {
  669. console.log(e);
  670. message.error('位置调整失败: ' + e);
  671. }
  672. },
  673. /**
  674. * 设置图表所属分组
  675. */
  676. *remoteSetChartGroup(action, { select, call, put }) {
  677. const { chart, group } = action;
  678. const chartCode = chart.code;
  679. const groupCode = group.code;
  680. try {
  681. let body = {
  682. id: chartCode,
  683. groupId: groupCode
  684. }
  685. let res = yield call(service.fetch, {
  686. url: URLS.GROUP_CHART_SET_GROUP,
  687. body: body
  688. });
  689. console.log('设置图表所属分组', body, res);
  690. if(!res.err && res.data.code > 0) {
  691. yield put({ type: 'setChartGroup', chartCode, groupCode });
  692. }else {
  693. message.error('设置分组失败: ' + (res.err || res.data.msg));
  694. }
  695. } catch(e) {
  696. console.log(e);
  697. message.error('设置分组失败: ' + e);
  698. }
  699. },
  700. *transfer(action, { put, call, select }) {
  701. const { userCode, chartCode } = action;
  702. const body = {
  703. userId: userCode,
  704. id: chartCode
  705. };
  706. try {
  707. const res = yield call(service.fetch, {
  708. url: URLS.CHART_TRANSFER,
  709. body
  710. });
  711. console.log('图表移交', body, res);
  712. if(!res.err && res.data.code > 0) {
  713. const chart = yield select(state => state.present.chart);
  714. const list = chart.list;
  715. for(let i = 0; i < list.length; i++) {
  716. if(list[i].code === chartCode) {
  717. list.splice(i, 1);
  718. break;
  719. }
  720. }
  721. yield put({ type: 'list', list });
  722. message.success('移交成功');
  723. }else {
  724. console.log(body, (res.err || res.data.msg));
  725. message.error('移交失败: ' + (res.err || res.data.msg));
  726. }
  727. }catch(e) {
  728. console.log(body, e);
  729. message.error('移交失败: ' + e);
  730. }
  731. },
  732. },
  733. subscriptions: {
  734. setup({ dispatch, history }) {
  735. dispatch({ type: 'reset' });
  736. }
  737. }
  738. }