徐烜 / bsth-ebus-h5_editor · Commits

Commit 2076bb86979a66bff3ed1af42334fc52323887f0

Authored by 徐烜
1 parent 6b8d3df6

电子站牌项目 

1、修复一个鲁班h5的bug，修改comoponents/core/models/work.js中contructor的conver_image_url的设定逻辑，如果有值设定，没值设定''
   这个bug的问题是，如果已经上传了封面，但是作品列表读出work列表后设定conver_iamge_url都是''，导致下次预览的时候冲掉后台的conver_image_url，因为预览的时候保存work，但是不上传封面
2、修改bsth-line-chart.css，添加border-sizing:border-box的css设置，具体说明看css注释
3、添加bsth-line-chart-scrollList.css，添加border-sizeing:border-box，以及float:left布局，具体说明看css注释
Inline Side-by-side
Showing 5 changed files with 542 additions and 6 deletions
front-end/h5/src/components/core/models/work.js
  View file @2076bb8
@@ -21,7 +21,7 @@ class Work { @@ -21,7 +21,7 @@ class Work {
21 // this.id = this.id 21 // this.id = this.id
22 // TODO 用id 并不是一个好办法，有心人会得知整个系统中共有多少作品等额外信息，尽量防止信息泄漏 22 // TODO 用id 并不是一个好办法，有心人会得知整个系统中共有多少作品等额外信息，尽量防止信息泄漏
23 // this.key = this.key 23 // this.key = this.key
24 - this.cover_image_url = '' 24 + this.cover_image_url = work.cover_image_url || ''
25 // TODO 后期可以添加一个类似项目组的概念，每个项目组下可以有多个作品 25 // TODO 后期可以添加一个类似项目组的概念，每个项目组下可以有多个作品
26 // this.project_id = 1 26 // this.project_id = 1
27 27
front-end/h5/src/components/core/plugins/bsth/bsth-line-chart-list_testData.js
  View file @2076bb8
@@ -4,7 +4,8 @@ @@ -4,7 +4,8 @@
4 */ 4 */
5 export default { 5 export default {
6 lineRouteList: [ 6 lineRouteList: [
7 - { // 测试线路1 7 + // 测试线路1
  8 + {
8 lineName: '测试线路1', 9 lineName: '测试线路1',
9 lineCode: '线路编码1', 10 lineCode: '线路编码1',
10 directions: 0, 11 directions: 0,
@@ -194,6 +195,507 @@ export default { @@ -194,6 +195,507 @@ export default {
194 stationCode: 'ACODE', 195 stationCode: 'ACODE',
195 stationName: 'A起点站', 196 stationName: 'A起点站',
196 stationMark: 'E' 197 stationMark: 'E'
  198 + },
  199 +
  200 + // 测试线路4
  201 + {
  202 + lineName: '测试线路4',
  203 + lineCode: '线路编码4',
  204 + directions: 0,
  205 + stationRouteCode: 10,
  206 + stationCode: 'ACODE',
  207 + stationName: 'A起点站',
  208 + stationMark: 'B'
  209 + }, {
  210 + lineName: '测试线路4',
  211 + lineCode: '线路编码4',
  212 + directions: 0,
  213 + stationRouteCode: 20,
  214 + stationCode: 'BCODE',
  215 + stationName: 'B中途站',
  216 + stationMark: 'Z'
  217 + }, {
  218 + lineName: '测试线路4',
  219 + lineCode: '线路编码4',
  220 + directions: 0,
  221 + stationRouteCode: 30,
  222 + stationCode: 'CCODE',
  223 + stationName: 'C中途站',
  224 + stationMark: 'Z'
  225 + }, {
  226 + lineName: '测试线路4',
  227 + lineCode: '线路编码4',
  228 + directions: 0,
  229 + stationRouteCode: 40,
  230 + stationCode: 'DCODE',
  231 + stationName: 'D中途站',
  232 + stationMark: 'Z'
  233 + }, {
  234 + lineName: '测试线路4',
  235 + lineCode: '线路编码4',
  236 + directions: 0,
  237 + stationRouteCode: 50,
  238 + stationCode: 'ECODE',
  239 + stationName: 'E中途站',
  240 + stationMark: 'Z'
  241 + }, {
  242 + lineName: '测试线路4',
  243 + lineCode: '线路编码4',
  244 + directions: 0,
  245 + stationRouteCode: 100,
  246 + stationCode: 'FCODE',
  247 + stationName: 'F终点站',
  248 + stationMark: 'E'
  249 + }, {
  250 + lineName: '测试线路4',
  251 + lineCode: '线路编码4',
  252 + directions: 1,
  253 + stationRouteCode: 10,
  254 + stationCode: 'FCODE',
  255 + stationName: 'F终点站',
  256 + stationMark: 'B'
  257 + }, {
  258 + lineName: '测试线路4',
  259 + lineCode: '线路编码4',
  260 + directions: 1,
  261 + stationRouteCode: 20,
  262 + stationCode: 'E1CODE',
  263 + stationName: 'E1中途站',
  264 + stationMark: 'Z'
  265 + }, {
  266 + lineName: '测试线路4',
  267 + lineCode: '线路编码4',
  268 + directions: 1,
  269 + stationRouteCode: 30,
  270 + stationCode: 'DCODE',
  271 + stationName: 'D中途站',
  272 + stationMark: 'Z'
  273 + }, {
  274 + lineName: '测试线路4',
  275 + lineCode: '线路编码4',
  276 + directions: 1,
  277 + stationRouteCode: 40,
  278 + stationCode: 'C1CODE',
  279 + stationName: 'C1中途站',
  280 + stationMark: 'Z'
  281 + }, {
  282 + lineName: '测试线路4',
  283 + lineCode: '线路编码4',
  284 + directions: 1,
  285 + stationRouteCode: 100,
  286 + stationCode: 'ACODE',
  287 + stationName: 'A起点站',
  288 + stationMark: 'E'
  289 + },
  290 + // 测试线路5
  291 + {
  292 + lineName: '测试线路5',
  293 + lineCode: '线路编码5',
  294 + directions: 0,
  295 + stationRouteCode: 10,
  296 + stationCode: 'ACODE',
  297 + stationName: 'A起点站',
  298 + stationMark: 'B'
  299 + }, {
  300 + lineName: '测试线路5',
  301 + lineCode: '线路编码5',
  302 + directions: 0,
  303 + stationRouteCode: 20,
  304 + stationCode: 'BCODE',
  305 + stationName: 'B中途站',
  306 + stationMark: 'Z'
  307 + }, {
  308 + lineName: '测试线路5',
  309 + lineCode: '线路编码5',
  310 + directions: 0,
  311 + stationRouteCode: 30,
  312 + stationCode: 'CCODE',
  313 + stationName: 'C中途站',
  314 + stationMark: 'Z'
  315 + }, {
  316 + lineName: '测试线路5',
  317 + lineCode: '线路编码5',
  318 + directions: 0,
  319 + stationRouteCode: 40,
  320 + stationCode: 'DCODE',
  321 + stationName: 'D中途站',
  322 + stationMark: 'Z'
  323 + }, {
  324 + lineName: '测试线路5',
  325 + lineCode: '线路编码5',
  326 + directions: 0,
  327 + stationRouteCode: 50,
  328 + stationCode: 'ECODE',
  329 + stationName: 'E中途站',
  330 + stationMark: 'Z'
  331 + }, {
  332 + lineName: '测试线路5',
  333 + lineCode: '线路编码5',
  334 + directions: 0,
  335 + stationRouteCode: 100,
  336 + stationCode: 'FCODE',
  337 + stationName: 'F终点站',
  338 + stationMark: 'E'
  339 + }, {
  340 + lineName: '测试线路5',
  341 + lineCode: '线路编码5',
  342 + directions: 1,
  343 + stationRouteCode: 10,
  344 + stationCode: 'FCODE',
  345 + stationName: 'F终点站',
  346 + stationMark: 'B'
  347 + }, {
  348 + lineName: '测试线路5',
  349 + lineCode: '线路编码5',
  350 + directions: 1,
  351 + stationRouteCode: 20,
  352 + stationCode: 'E1CODE',
  353 + stationName: 'E1中途站',
  354 + stationMark: 'Z'
  355 + }, {
  356 + lineName: '测试线路5',
  357 + lineCode: '线路编码5',
  358 + directions: 1,
  359 + stationRouteCode: 30,
  360 + stationCode: 'DCODE',
  361 + stationName: 'D中途站',
  362 + stationMark: 'Z'
  363 + }, {
  364 + lineName: '测试线路5',
  365 + lineCode: '线路编码5',
  366 + directions: 1,
  367 + stationRouteCode: 40,
  368 + stationCode: 'C1CODE',
  369 + stationName: 'C1中途站',
  370 + stationMark: 'Z'
  371 + }, {
  372 + lineName: '测试线路5',
  373 + lineCode: '线路编码5',
  374 + directions: 1,
  375 + stationRouteCode: 100,
  376 + stationCode: 'ACODE',
  377 + stationName: 'A起点站',
  378 + stationMark: 'E'
  379 + },
  380 + // 测试线路6
  381 + {
  382 + lineName: '测试线路6',
  383 + lineCode: '线路编码6',
  384 + directions: 0,
  385 + stationRouteCode: 10,
  386 + stationCode: 'ACODE',
  387 + stationName: 'A起点站',
  388 + stationMark: 'B'
  389 + }, {
  390 + lineName: '测试线路6',
  391 + lineCode: '线路编码6',
  392 + directions: 0,
  393 + stationRouteCode: 20,
  394 + stationCode: 'BCODE',
  395 + stationName: 'B中途站',
  396 + stationMark: 'Z'
  397 + }, {
  398 + lineName: '测试线路6',
  399 + lineCode: '线路编码6',
  400 + directions: 0,
  401 + stationRouteCode: 30,
  402 + stationCode: 'CCODE',
  403 + stationName: 'C中途站',
  404 + stationMark: 'Z'
  405 + }, {
  406 + lineName: '测试线路6',
  407 + lineCode: '线路编码6',
  408 + directions: 0,
  409 + stationRouteCode: 40,
  410 + stationCode: 'DCODE',
  411 + stationName: 'D中途站',
  412 + stationMark: 'Z'
  413 + }, {
  414 + lineName: '测试线路6',
  415 + lineCode: '线路编码6',
  416 + directions: 0,
  417 + stationRouteCode: 50,
  418 + stationCode: 'ECODE',
  419 + stationName: 'E中途站',
  420 + stationMark: 'Z'
  421 + }, {
  422 + lineName: '测试线路6',
  423 + lineCode: '线路编码6',
  424 + directions: 0,
  425 + stationRouteCode: 100,
  426 + stationCode: 'FCODE',
  427 + stationName: 'F终点站',
  428 + stationMark: 'E'
  429 + }, {
  430 + lineName: '测试线路6',
  431 + lineCode: '线路编码6',
  432 + directions: 1,
  433 + stationRouteCode: 10,
  434 + stationCode: 'FCODE',
  435 + stationName: 'F终点站',
  436 + stationMark: 'B'
  437 + }, {
  438 + lineName: '测试线路6',
  439 + lineCode: '线路编码6',
  440 + directions: 1,
  441 + stationRouteCode: 20,
  442 + stationCode: 'E1CODE',
  443 + stationName: 'E1中途站',
  444 + stationMark: 'Z'
  445 + }, {
  446 + lineName: '测试线路6',
  447 + lineCode: '线路编码6',
  448 + directions: 1,
  449 + stationRouteCode: 30,
  450 + stationCode: 'DCODE',
  451 + stationName: 'D中途站',
  452 + stationMark: 'Z'
  453 + }, {
  454 + lineName: '测试线路6',
  455 + lineCode: '线路编码6',
  456 + directions: 1,
  457 + stationRouteCode: 40,
  458 + stationCode: 'C1CODE',
  459 + stationName: 'C1中途站',
  460 + stationMark: 'Z'
  461 + }, {
  462 + lineName: '测试线路6',
  463 + lineCode: '线路编码6',
  464 + directions: 1,
  465 + stationRouteCode: 100,
  466 + stationCode: 'ACODE',
  467 + stationName: 'A起点站',
  468 + stationMark: 'E'
  469 + },
  470 + // 测试线路7
  471 + {
  472 + lineName: '测试线路7',
  473 + lineCode: '线路编码7',
  474 + directions: 0,
  475 + stationRouteCode: 10,
  476 + stationCode: 'ACODE',
  477 + stationName: 'A起点站',
  478 + stationMark: 'B'
  479 + }, {
  480 + lineName: '测试线路7',
  481 + lineCode: '线路编码7',
  482 + directions: 0,
  483 + stationRouteCode: 20,
  484 + stationCode: 'BCODE',
  485 + stationName: 'B中途站',
  486 + stationMark: 'Z'
  487 + }, {
  488 + lineName: '测试线路7',
  489 + lineCode: '线路编码7',
  490 + directions: 0,
  491 + stationRouteCode: 30,
  492 + stationCode: 'CCODE',
  493 + stationName: 'C中途站',
  494 + stationMark: 'Z'
  495 + }, {
  496 + lineName: '测试线路7',
  497 + lineCode: '线路编码7',
  498 + directions: 0,
  499 + stationRouteCode: 40,
  500 + stationCode: 'DCODE',
  501 + stationName: 'D中途站',
  502 + stationMark: 'Z'
  503 + }, {
  504 + lineName: '测试线路7',
  505 + lineCode: '线路编码7',
  506 + directions: 0,
  507 + stationRouteCode: 50,
  508 + stationCode: 'ECODE',
  509 + stationName: 'E中途站',
  510 + stationMark: 'Z'
  511 + }, {
  512 + lineName: '测试线路7',
  513 + lineCode: '线路编码7',
  514 + directions: 0,
  515 + stationRouteCode: 100,
  516 + stationCode: 'FCODE',
  517 + stationName: 'F终点站',
  518 + stationMark: 'E'
  519 + }, {
  520 + lineName: '测试线路7',
  521 + lineCode: '线路编码7',
  522 + directions: 1,
  523 + stationRouteCode: 10,
  524 + stationCode: 'FCODE',
  525 + stationName: 'F终点站',
  526 + stationMark: 'B'
  527 + }, {
  528 + lineName: '测试线路7',
  529 + lineCode: '线路编码7',
  530 + directions: 1,
  531 + stationRouteCode: 20,
  532 + stationCode: 'E1CODE',
  533 + stationName: 'E1中途站',
  534 + stationMark: 'Z'
  535 + }, {
  536 + lineName: '测试线路7',
  537 + lineCode: '线路编码7',
  538 + directions: 1,
  539 + stationRouteCode: 30,
  540 + stationCode: 'DCODE',
  541 + stationName: 'D中途站',
  542 + stationMark: 'Z'
  543 + }, {
  544 + lineName: '测试线路7',
  545 + lineCode: '线路编码7',
  546 + directions: 1,
  547 + stationRouteCode: 40,
  548 + stationCode: 'C1CODE',
  549 + stationName: 'C1中途站',
  550 + stationMark: 'Z'
  551 + }, {
  552 + lineName: '测试线路7',
  553 + lineCode: '线路编码7',
  554 + directions: 1,
  555 + stationRouteCode: 100,
  556 + stationCode: 'ACODE',
  557 + stationName: 'A起点站',
  558 + stationMark: 'E'
  559 + },
  560 + // 测试线路8
  561 + {
  562 + lineName: '测试线路8',
  563 + lineCode: '线路编码8',
  564 + directions: 0,
  565 + stationRouteCode: 10,
  566 + stationCode: 'ACODE',
  567 + stationName: 'A起点站',
  568 + stationMark: 'B'
  569 + }, {
  570 + lineName: '测试线路8',
  571 + lineCode: '线路编码8',
  572 + directions: 0,
  573 + stationRouteCode: 20,
  574 + stationCode: 'BCODE',
  575 + stationName: 'B中途站',
  576 + stationMark: 'Z'
  577 + }, {
  578 + lineName: '测试线路8',
  579 + lineCode: '线路编码8',
  580 + directions: 0,
  581 + stationRouteCode: 30,
  582 + stationCode: 'CCODE',
  583 + stationName: 'C中途站',
  584 + stationMark: 'Z'
  585 + }, {
  586 + lineName: '测试线路8',
  587 + lineCode: '线路编码8',
  588 + directions: 0,
  589 + stationRouteCode: 40,
  590 + stationCode: 'DCODE',
  591 + stationName: 'D中途站',
  592 + stationMark: 'Z'
  593 + }, {
  594 + lineName: '测试线路8',
  595 + lineCode: '线路编码8',
  596 + directions: 0,
  597 + stationRouteCode: 50,
  598 + stationCode: 'ECODE',
  599 + stationName: 'E中途站',
  600 + stationMark: 'Z'
  601 + }, {
  602 + lineName: '测试线路8',
  603 + lineCode: '线路编码8',
  604 + directions: 0,
  605 + stationRouteCode: 100,
  606 + stationCode: 'FCODE',
  607 + stationName: 'F终点站',
  608 + stationMark: 'E'
  609 + }, {
  610 + lineName: '测试线路8',
  611 + lineCode: '线路编码8',
  612 + directions: 1,
  613 + stationRouteCode: 10,
  614 + stationCode: 'FCODE',
  615 + stationName: 'F终点站',
  616 + stationMark: 'B'
  617 + }, {
  618 + lineName: '测试线路8',
  619 + lineCode: '线路编码8',
  620 + directions: 1,
  621 + stationRouteCode: 20,
  622 + stationCode: 'E1CODE',
  623 + stationName: 'E1中途站',
  624 + stationMark: 'Z'
  625 + }, {
  626 + lineName: '测试线路8',
  627 + lineCode: '线路编码8',
  628 + directions: 1,
  629 + stationRouteCode: 30,
  630 + stationCode: 'DCODE',
  631 + stationName: 'D中途站',
  632 + stationMark: 'Z'
  633 + }, {
  634 + lineName: '测试线路8',
  635 + lineCode: '线路编码8',
  636 + directions: 1,
  637 + stationRouteCode: 40,
  638 + stationCode: 'C1CODE',
  639 + stationName: 'C1中途站',
  640 + stationMark: 'Z'
  641 + }, {
  642 + lineName: '测试线路8',
  643 + lineCode: '线路编码8',
  644 + directions: 1,
  645 + stationRouteCode: 100,
  646 + stationCode: 'ACODE',
  647 + stationName: 'A起点站',
  648 + stationMark: 'E'
  649 + },
  650 + // 测试线路9
  651 + {
  652 + lineName: '测试线路9',
  653 + lineCode: '线路编码9',
  654 + directions: 0,
  655 + stationRouteCode: 10,
  656 + stationCode: 'ACODE',
  657 + stationName: 'A起点站',
  658 + stationMark: 'B'
  659 + }, {
  660 + lineName: '测试线路9',
  661 + lineCode: '线路编码9',
  662 + directions: 0,
  663 + stationRouteCode: 20,
  664 + stationCode: 'BCODE',
  665 + stationName: 'B中途站',
  666 + stationMark: 'Z'
  667 + }, {
  668 + lineName: '测试线路9',
  669 + lineCode: '线路编码9',
  670 + directions: 0,
  671 + stationRouteCode: 100,
  672 + stationCode: 'FCODE',
  673 + stationName: 'F终点站',
  674 + stationMark: 'E'
  675 + }, {
  676 + lineName: '测试线路9',
  677 + lineCode: '线路编码9',
  678 + directions: 1,
  679 + stationRouteCode: 10,
  680 + stationCode: 'FCODE',
  681 + stationName: 'F终点站',
  682 + stationMark: 'B'
  683 + }, {
  684 + lineName: '测试线路9',
  685 + lineCode: '线路编码9',
  686 + directions: 1,
  687 + stationRouteCode: 40,
  688 + stationCode: 'C1CODE',
  689 + stationName: 'C1中途站',
  690 + stationMark: 'Z'
  691 + }, {
  692 + lineName: '测试线路9',
  693 + lineCode: '线路编码9',
  694 + directions: 1,
  695 + stationRouteCode: 100,
  696 + stationCode: 'ACODE',
  697 + stationName: 'A起点站',
  698 + stationMark: 'E'
197 }], 699 }],
198 lineGpsList: [ 700 lineGpsList: [
199 { 701 {
front-end/h5/src/components/core/plugins/bsth/bsth-line-chart-scrollList.css 0 → 100644
  View file @2076bb8
  1 +/*
  2 + 内部使用的是border-box
  3 + 注意：
  4 + 1、这个设置很重要，因为内部计算width是减去两侧border的
  5 + 2、在编辑器模式下，外层的.ant-layout会给内层所有元素设置border-box，此时你不设置无所谓
  6 + 3、但是在打包预览模式下，是没有外层.ant-layout定义的，此时如果组件内部不定义，则会使用content-box，会和内部计算宽度产生偏差
  7 +*/
  8 +.line-chart-scrollList-outer-div, .line-chart-scrollList-outer-div * {
  9 + box-sizing: border-box;
  10 +}
  11 +
  12 +/**
  13 + 这里使用float布局，当多个线路模拟图排列的时候
  14 + 1、如果最外层div使用position: relative或不指定position，
  15 + 最外层的div位置会有偏差，滚动列表是会造成距离偏差
  16 + 2、如果使用position:absolute，需要指定top，可以算出的，但是麻烦
  17 + 3、直接使用float:left，不会有问题，因为宽度是死的，高度是活的，排列时没有偏差
  18 + */
  19 +.line-chart-scrollList-outer-div .line-chart-outer-div {
  20 + float: left;
  21 +}
front-end/h5/src/components/core/plugins/bsth/bsth-line-chart-scrollList.js
  View file @2076bb8
@@ -5,6 +5,8 @@ import PropTypes from '@luban-h5/plugin-common-props' @@ -5,6 +5,8 @@ import PropTypes from '@luban-h5/plugin-common-props'
5 5
6 import ScrollPage from 'core/plugins/bsth/bsth-line-chart-scrollList-page' 6 import ScrollPage from 'core/plugins/bsth/bsth-line-chart-scrollList-page'
7 7
  8 +import './bsth-line-chart-scrollList.css'
  9 +
8 export default { 10 export default {
9 extra: { 11 extra: {
10 defaultStyle: { // 默认属性 12 defaultStyle: { // 默认属性
@@ -101,20 +103,20 @@ export default { @@ -101,20 +103,20 @@ export default {
101 'margin-bottom': this.margin_bottom + 'px', 103 'margin-bottom': this.margin_bottom + 'px',
102 'background': this.background_color, 104 'background': this.background_color,
103 'position': 'relative', 105 'position': 'relative',
104 - 'overflow': 'hidden' 106 + 'overflow': 'hidden' // 隐藏超出的模拟图
105 } 107 }
106 108
107 - // TODO： 109 + // 包含所有的线路模拟图，滚动时设置top值，总高度等于所有图高度和
108 const wrapperDivStyle = { 110 const wrapperDivStyle = {
109 'top': this.scrollTop + 'px', 111 'top': this.scrollTop + 'px',
110 'position': 'absolute', 112 'position': 'absolute',
111 'width': this.list_width + 'px', 113 'width': this.list_width + 'px',
112 - 'height': this.list_height * 4 + 'px' 114 + 'height': this.line_chart_outer_div_height * this.internalDataSet.length + 'px'
113 } 115 }
114 116
115 /* 最外层div对应编辑器的通用样式 */ 117 /* 最外层div对应编辑器的通用样式 */
116 return ( 118 return (
117 - <div> 119 + <div class="line-chart-scrollList-outer-div">
118 { 120 {
119 this.renderScrollDataComponent() 121 this.renderScrollDataComponent()
120 } 122 }
front-end/h5/src/components/core/plugins/bsth/bsth-line-chart.css
  View file @2076bb8
@@ -163,3 +163,14 @@ svg.line-chart g.merge-item text { @@ -163,3 +163,14 @@ svg.line-chart g.merge-item text {
163 font-weight: bold; 163 font-weight: bold;
164 font-family: "Open Sans", sans-serif; 164 font-family: "Open Sans", sans-serif;
165 } 165 }
  166 +
  167 +/*
  168 + 内部使用的是border-box
  169 + 注意：
  170 + 1、这个设置很重要，因为内部计算width是减去两侧border的
  171 + 2、在编辑器模式下，外层的.ant-layout会给内层所有元素设置border-box，此时你不设置无所谓
  172 + 3、但是在打包预览模式下，是没有外层.ant-layout定义的，此时如果组件内部不定义，则会使用content-box，会和内部计算宽度产生偏差
  173 +*/
  174 +.line-chart-outer-div, .line-chart-outer-div * {
  175 + box-sizing: border-box;
  176 +}