ming-demo1/lib/components/echart/panel/eChartPanelDisplay.js

mdf metaui web

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _react = _interopRequireWildcard(require("react"));

var _baseui = require("@mdf/baseui");

var _row = _interopRequireDefault(require("../../basic/row"));

var _col = _interopRequireDefault(require("../../basic/col"));

var eChartCommon = _interopRequireWildcard(require("../eChartCommon"));

var _eChartDisplay = _interopRequireDefault(require("../echart/eChartDisplay"));

var _formatDate = require("@mdf/cube/lib/helpers/formatDate");

var eChartDemoData = _interopRequireWildcard(require("../eChartDemoData"));

var _eChartWeather = _interopRequireDefault(require("./component/eChartWeather"));

var _eChartSum = _interopRequireDefault(require("./component/eChartSum"));

var _eChartSumCountUp = _interopRequireDefault(require("./component/eChartSumCountUp"));

var _eChartDateTime = _interopRequireDefault(require("./component/eChartDateTime"));

var eChartPanelDisplay = function (_React$Component) {
  (0, _inherits2["default"])(eChartPanelDisplay, _React$Component);

  function eChartPanelDisplay(props) {
    var _this;

    (0, _classCallCheck2["default"])(this, eChartPanelDisplay);
    _this = (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf2["default"])(eChartPanelDisplay).call(this, props));
    var panelConfig = props.panelConfig;
    _this.serieNum = Math.random();
    _this.state = {
      panelConfig: panelConfig,
      isInDesign: props.isInDesign ? props.isInDesign : false,
      bMounted: false,
      maxedColKey: ""
    };
    _this.panelName = panelConfig.name;
    eChartCommon.LogChartInfo("大屏方案 展现 constructor panelConfig  ", JSON.stringify(panelConfig), 900);
    _this.scaleStyle = {};

    _this.calcPanelWidth(_this.scaleStyle, 16 * 70, 9 * 70, "px");

    _this.skinConfig = "";
    _this.skinStyle = {};
    _this.ImgScaleArr = [];

    _this.setCurrentSkin();

    return _this;
  }

  (0, _createClass2["default"])(eChartPanelDisplay, [{
    key: "setCurrentSkin",
    value: function setCurrentSkin() {
      var skinKey = this.state.panelConfig.skinKey_BackStyle || this.state.panelConfig.skinKey_BackColor;

      if (skinKey) {
        this.skinConfig = eChartCommon.getSkinArr(skinKey);
        this.skinStyle.color = this.skinConfig.displaySkin.textColor;
      } else {
        this.skinConfig = "";
      }
    }
  }, {
    key: "render",
    value: function render() {
      var self = this;
      eChartCommon.LogChartInfo("大屏方案 展现 this.serieNum =" + this.serieNum + " Render ImgScaleArr ", JSON.stringify(self.ImgScaleArr), 14);

      if (self.state.panelConfig) {
        var content;
        var maxedContent;
        var style = self.getStyle_Edit("all", "", self.state.panelConfig);
        var innerStyle = self.getInnerStyle_Edit("all", "", self.state.panelConfig);

        var maxedInnerStyle = _.cloneDeep(innerStyle);

        if (self.state.maxedColKey != "") {
          maxedContent = self.getMaxedColContent(self.state.maxedColKey);
          maxedInnerStyle.display = "";
          innerStyle.display = "none";
        } else {
          innerStyle.display = "";
          maxedInnerStyle.display = "none";
        }

        content = self.getRows(self.state.panelConfig.panelLayOutConfig.rows);
        return _react["default"].createElement("div", {
          className: "eChartPanel panelLayer-all-outer " + (self.skinConfig ? self.skinConfig.skinClassNameFlag + "-all" : "") + (style.padding == "0px" ? " panelLayer-all-outer-nopadding " : " panelLayer-all-outer-haspadding"),
          style: style
        }, _react["default"].createElement("div", {
          className: "panelLayer-all-inner",
          style: maxedInnerStyle
        }, maxedContent), _react["default"].createElement("div", {
          className: "panelLayer-all-inner",
          style: innerStyle
        }, content));
      } else {
        return _react["default"].createElement("div", {
          className: "eChart-nodata",
          style: self.skinStyle
        }, "\u6682\u65F6\u6CA1\u6709\u6570\u636E\u54E6~(\u76D1\u63A7\u89C6\u56FE)");
      }
    }
  }, {
    key: "getImageText",
    value: function getImageText(config, colEle) {
      var self = this;
      var style = {};

      if (config.subType == "title") {
        if (config.hasOwnProperty("fontSize")) style.fontSize = config.fontSize;
        if (config.hasOwnProperty("height")) style.height = config.height;
        if (config.hasOwnProperty("width")) style.width = config.width;
        if (config.hasOwnProperty("color")) style.color = config.color;
        if (this.skinStyle.color) style.color = this.skinStyle.color;
        if (config.hasOwnProperty("textAlign")) style.textAlign = config.textAlign;
        if (config.hasOwnProperty("fontFamily")) style.fontFamily = config.fontFamily;
        if (config.hasOwnProperty("alignItems")) style.alignItems = config.alignItems;
        if (config.hasOwnProperty("display")) style.display = config.display;
        return _react["default"].createElement("div", {
          style: style
        }, _react["default"].createElement("div", {
          style: {
            textAlign: 'center',
            width: '100%'
          }
        }, config.title));
      } else {
        var imgScale = _.find(this.ImgScaleArr, function (o) {
          return o.imgId == colEle.colKey + "_img";
        });

        if (config.logoImg && !imgScale) {
          var tmp = {};
          tmp.divId = colEle.colKey + "_div";
          tmp.imgId = colEle.colKey + "_img";
          tmp.divWidth = 0;
          tmp.divHeight = 0;
          tmp.imgWidth = 0;
          tmp.imgHeight = 0;
          tmp.displayBy = "";
          tmp.bLoadImg = false;
          this.ImgScaleArr.push(tmp);
        }

        var imgStyle = {
          display: "block"
        };

        if (imgScale && imgScale.displayBy == "width") {
          style = {
            width: "100%",
            height: "100%"
          };
          imgStyle.width = "100%";

          if (config.logoPosition.vertical == "top") {
            imgStyle.padding = "0px  0px " + Math.ceil(imgScale.padding) + "px  0px ";
          } else if (config.logoPosition.vertical == "middle") {
            imgStyle.padding = " " + Math.ceil(imgScale.padding / 2) + "px  0px " + Math.ceil(imgScale.padding / 2) + "px  0px ";
          } else if (config.logoPosition.vertical == "bottom") {
            imgStyle.padding = Math.ceil(imgScale.padding) + "px 0px  0px 0px ";
          }
        } else if (imgScale && imgScale.displayBy == "height") {
          style = {
            width: "100%",
            height: "100%"
          };
          imgStyle.height = "100%";

          if (config.logoPosition.horizontal == "left") {
            imgStyle.padding = " 0px " + Math.ceil(imgScale.padding) + "px 0px 0px ";
          } else if (config.logoPosition.horizontal == "center") {
            imgStyle.padding = " 0px " + Math.ceil(imgScale.padding / 2) + "px 0px " + Math.ceil(imgScale.padding / 2) + "px ";
          } else if (config.logoPosition.horizontal == "right") {
            imgStyle.padding = " 0px 0px 0px " + Math.ceil(imgScale.padding) + "px";
          }
        } else if (imgScale && imgScale.displayBy == "no") {
          style = {
            position: "absolute",
            top: "50%",
            left: "50%",
            transform: "translate(-50%,-50%)"
          };
          var transform1 = "";
          var transform2 = "";

          if (config.logoPosition.horizontal == "left") {
            style.left = "0%";
            transform1 = "0%";
          } else if (config.logoPosition.horizontal == "center") {
            style.left = "50%";
            transform1 = "-50%";
          } else if (config.logoPosition.horizontal == "right") {
            style.left = "100%";
            transform1 = "-100%";
          }

          if (config.logoPosition.vertical == "top") {
            style.top = "0%";
            transform2 = "0%";
          } else if (config.logoPosition.vertical == "middle") {
            style.top = "50%";
            transform2 = "-50%";
          } else if (config.logoPosition.vertical == "bottom") {
            style.top = "100%";
            transform2 = "-100%";
          }

          style.transform = "translate(" + transform1 + "," + transform2 + ")";
        } else {
          imgStyle.width = "100%";
          imgStyle.height = "100%";
        }

        return _react["default"].createElement("div", {
          style: style,
          className: config.logoImg ? "eChartPanelDisplay_HasImg" : "eChartPanelDisplay_NoImg"
        }, _react["default"].createElement("img", {
          id: colEle.colKey + "_img",
          style: imgStyle,
          src: self.state.bMounted ? config.logoImg : "",
          onLoad: function onLoad() {
            return self.onLoadImg(colEle);
          }
        }));
      }
    }
  }, {
    key: "onLoadImg",
    value: function onLoadImg(colEle) {
      var self = this;
      eChartCommon.LogChartInfo("大屏方案 展现 this.serieNum =" + this.serieNum + " Load01 ImgScaleArr ", JSON.stringify(self.ImgScaleArr), 14);

      var ele = _.find(self.ImgScaleArr, function (o) {
        return o.imgId == colEle.colKey + "_img";
      });

      if (ele) {
        ele.bLoadImg = true;
        var imgEle = document.getElementById(ele.imgId);
        var divEle = document.getElementById(ele.divId);

        if (imgEle) {
          ele.imgWidth = imgEle.naturalWidth;
          ele.imgHeight = imgEle.naturalHeight;
          ele.divWidth = divEle.clientWidth;
          ele.divHeight = divEle.clientHeight;

          if (ele.imgWidth && ele.imgHeight && ele.divWidth && ele.divHeight) {
            if (ele.imgWidth > ele.divWidth || ele.imgHeight > ele.divHeight) {
              if (Number(ele.imgWidth) * Number(ele.divHeight) > Number(ele.imgHeight) * Number(ele.divWidth)) {
                ele.displayBy = "width";
                ele.padding = ele.divHeight - ele.imgHeight * ele.divWidth / ele.imgWidth;
              } else {
                ele.displayBy = "height";
                ele.padding = ele.divWidth - ele.imgWidth * ele.divHeight / ele.imgHeight;
              }
            } else {
              ele.displayBy = "no";
            }
          }
        }
      }

      eChartCommon.LogChartInfo("大屏方案 展现 this.serieNum =" + this.serieNum + " Load02 ImgScaleArr ", JSON.stringify(self.ImgScaleArr), 14);
      self.forceUpdate();
    }
  }, {
    key: "componentDidMount",
    value: function componentDidMount() {
      var self = this;
      var style = {};
      this.ImgScaleArr.forEach(function (ele) {
        var divEle = document.getElementById(ele.divId);

        if (divEle) {
          ele.divWidth = divEle.clientWidth;
          ele.divHeight = divEle.clientHeight;
        }
      });
      this.setState({
        bMounted: true
      });
      eChartCommon.LogChartInfo("大屏方案 展现 this.serieNum =" + this.serieNum + " DMount  ImgScaleArr ", JSON.stringify(self.ImgScaleArr), 14);
    }
  }, {
    key: "getStyle_Edit",
    value: function getStyle_Edit(eleType, innerType, ele) {
      var style = {};

      if (eleType == "row") {
        style.width = '100%';
        style.height = ele.height;
      } else if (eleType == "col") {
        style.height = '100%';
        style.width = ele.width;
        style["float"] = 'left';
        style.overflow = "hidden";
      } else if (eleType == "all") {
        if (this.state.isInDesign && 1 == 2) {
          style.width = this.scaleStyle.width;
          style.height = this.scaleStyle.height;
        } else {
          style.width = '100%';
          style.height = '100%';
        }
      }

      style.border = "0px";
      style.padding = "0px";
      style.margin = "0px";

      if (eChartDemoData.demoConfig.isShowAllMargin == true || eleType == "col" && innerType == "control" || ele.bOuterMargin) {
        if (ele.hasOwnProperty("margin")) style.padding = ele.margin;
      }

      return style;
    }
  }, {
    key: "getInnerStyle_Edit",
    value: function getInnerStyle_Edit(eleType, innerType, ele) {
      var style = {};
      style.width = '100%';
      style.height = '100%';
      style.padding = 0;
      style.margin = 0;

      if (eChartDemoData.demoConfig.isShowAllMargin == true || eleType == "all" || eleType == "col" && innerType == "control" || ele.bOuterBorder) {
        var borderType = "solid";
        var borderWidth = ele.borderWidth ? ele.borderWidth : eChartCommon.panelDefaultValue.borderWidth;
        var borderColor = eChartCommon.panelDefaultValue.borderColor;
        style.border = borderWidth + " " + borderType + " " + borderColor;
      } else {
        style.border = "0px";
      }

      if (eleType == "all" && ele.hasOwnProperty("margin")) {
        style.padding = ele.margin;
      }

      if (eleType == "col" && innerType == "control" && ele.widgetType != "imagetext" && ele.widgetType != "component") {
        style.padding = eChartCommon.panelDefaultValue.finalControlPadding;
      }

      if (ele.hasOwnProperty("backgroundColor")) style.backgroundColor = ele.backgroundColor;

      if (ele.hasOwnProperty("backgroundImage") && _.isEmpty(ele.backgroundImage) == false) {
        style.backgroundImage = 'url(' + ele.backgroundImage + ')';
      }

      if (!!style.backgroundImage) {
        style.backgroundSize = '100% 100%';
        style.backgroundRepeat = 'no-repeat';
        style.backgroundPosition = 'center';
      }

      return style;
    }
  }, {
    key: "calcPanelWidth",
    value: function calcPanelWidth(style, maxWidth, maxHeight, postFix) {
      var self = this;
      var panelConfig = self.state.panelConfig;
      var panelWidthScale = panelConfig.panelWidthScale;
      var panelHeightScale = panelConfig.panelHeightScale;

      if (panelWidthScale && panelHeightScale) {
        if (panelWidthScale / panelHeightScale > maxWidth / maxHeight) {
          style.width = maxWidth;
          style.height = Math.floor(maxWidth * panelHeightScale / panelWidthScale);
        } else {
          style.height = maxHeight;
          style.width = Math.floor(maxHeight * panelWidthScale / panelHeightScale);
        }
      } else {
        style.width = maxWidth;
        style.height = maxHeight;
      }

      style.width = style.width + postFix;
      style.height = style.height + postFix;
      style.width = document.body.clientWidth;
      style.height = document.body.clientHeight;
    }
  }, {
    key: "addFinalSkinClassName",
    value: function addFinalSkinClassName() {
      if (this.skinConfig) return " " + this.skinConfig.skinClassNameFlag + "-final";else return "";
    }
  }, {
    key: "addBackStyleAndColorClassName",
    value: function addBackStyleAndColorClassName() {
      var ele;
      var str = " panelLayer-NoStyleAndColor";

      if (this.state.panelConfig.backStyleKey) {
        ele = eChartCommon.getBackStyleArr(this.state.panelConfig.backStyleKey);
        if (ele && ele.className != "") str = " panelLayer-" + ele.className;
      } else if (this.state.panelConfig.backColorKey) {
        ele = eChartCommon.getBackColorArr(this.state.panelConfig.backColorKey);
        if (ele && ele.className != "") str = " panelLayer-" + ele.className;
      }

      return str;
    }
  }, {
    key: "addBorderClassName",
    value: function addBorderClassName(bNoBorder) {
      if (bNoBorder) return " panelLayer-noborder";else return " panelLayer-hasborder";
    }
  }, {
    key: "getRows",
    value: function getRows(rows) {
      var self = this;
      var rowArr = [];
      rows.forEach(function (rowEle) {
        var colArr = [];
        var rowStyle = self.getStyle_Edit("row", "", rowEle);
        var rowInnerStyle = self.getInnerStyle_Edit("row", "", rowEle);
        rowEle.cols.forEach(function (colEle) {
          var colStyle;
          var colInnerStyle;
          var curCol;
          var content;
          var colNoBorder;
          var isTitleArea = colEle.isTitleArea ? colEle.isTitleArea : false;

          if (colEle.widgetType == "chart") {
            colStyle = self.getStyle_Edit("col", "control", colEle);
            colInnerStyle = self.getInnerStyle_Edit("col", "control", colEle);
            colNoBorder = colInnerStyle.border.indexOf("0px") == 0 || colInnerStyle.border.indexOf(" 0px") >= 0;
            content = self.getChartRender(colEle);
            curCol = _react["default"].createElement("div", {
              className: "panelLayer-col-inner panelLayer-col-final " + self.addFinalSkinClassName() + self.addBorderClassName(colNoBorder) + self.addBackStyleAndColorClassName(),
              style: colInnerStyle
            }, content);
          } else if (colEle.widgetType == "rows") {
            colStyle = self.getStyle_Edit("col", "rows", colEle);
            colInnerStyle = self.getInnerStyle_Edit("col", "rows", colEle);
            colNoBorder = colInnerStyle.border.indexOf("0px") == 0 || colInnerStyle.border.indexOf(" 0px") >= 0;
            content = self.getRows(colEle.widgetValue);
            curCol = _react["default"].createElement("div", {
              className: "panelLayer-col-inner" + self.addBorderClassName(colNoBorder),
              style: colInnerStyle
            }, content);
          } else if (colEle.widgetType == "imagetext") {
            colStyle = self.getStyle_Edit("col", "control", colEle);
            colInnerStyle = self.getInnerStyle_Edit("col", "control", colEle);
            colNoBorder = colInnerStyle.border.indexOf("0px") == 0 || colInnerStyle.border.indexOf(" 0px") >= 0;

            if (colEle.panelImageTextConfig.subType == "logo") {
              colInnerStyle.position = "relative";
            }

            content = self.getImageText(colEle.panelImageTextConfig, colEle);
            curCol = _react["default"].createElement("div", {
              className: "panelLayer-col-inner panelLayer-col-final " + self.addFinalSkinClassName() + self.addBorderClassName(colNoBorder) + self.addBackStyleAndColorClassName(),
              style: colInnerStyle,
              id: colEle.colKey + "_div"
            }, content);
          } else if (colEle.widgetType == "sum") {
            colStyle = self.getStyle_Edit("col", "control", colEle);
            colInnerStyle = self.getInnerStyle_Edit("col", "control", colEle);
            colNoBorder = colInnerStyle.border.indexOf("0px") == 0 || colInnerStyle.border.indexOf(" 0px") >= 0;

            if (colEle.sumConfig.subType == "count") {
              content = _react["default"].createElement(_eChartSumCountUp["default"], {
                showIt: true,
                sumConfig: colEle.sumConfig,
                skinConfig: self.skinConfig
              });
            } else {
              content = _react["default"].createElement(_eChartSum["default"], {
                showIt: true,
                sumConfig: colEle.sumConfig,
                skinConfig: self.skinConfig
              });
            }

            curCol = _react["default"].createElement("div", {
              className: "panelLayer-col-inner panelLayer-col-final " + self.addFinalSkinClassName() + self.addBorderClassName(colNoBorder) + self.addBackStyleAndColorClassName(),
              style: colInnerStyle
            }, content);
          } else if (colEle.widgetType == "component") {
            colStyle = self.getStyle_Edit("col", "control", colEle);
            colInnerStyle = self.getInnerStyle_Edit("col", "control", colEle);
            colNoBorder = colInnerStyle.border.indexOf("0px") == 0 || colInnerStyle.border.indexOf(" 0px") >= 0;
            if (colEle.componentConfig.subType == "weather") content = _react["default"].createElement(_eChartWeather["default"], {
              componentConfig: colEle.componentConfig,
              skinConfig: self.skinConfig
            });else if (colEle.componentConfig.subType == "datetime") content = _react["default"].createElement(_eChartDateTime["default"], {
              componentConfig: colEle.componentConfig,
              skinConfig: self.skinConfig
            });
            curCol = _react["default"].createElement("div", {
              className: "panelLayer-col-inner panelLayer-col-final " + self.addFinalSkinClassName() + self.addBorderClassName(colNoBorder) + self.addBackStyleAndColorClassName(),
              style: colInnerStyle
            }, content);
          } else if (colEle.widgetType == "none") {
            colStyle = self.getStyle_Edit("col", "control", colEle);
            colInnerStyle = self.getInnerStyle_Edit("col", "control", colEle);
            colNoBorder = colInnerStyle.border.indexOf("0px") == 0 || colInnerStyle.border.indexOf(" 0px") >= 0;
            content = _react["default"].createElement("div", {
              style: self.skinStyle,
              className: "panelLayer-nocontrol"
            }, self.state.isInDesign ? " 无控件" : "");
            curCol = _react["default"].createElement("div", {
              className: "panelLayer-col-inner panelLayer-col-final " + self.addFinalSkinClassName() + self.addBorderClassName(colNoBorder) + self.addBackStyleAndColorClassName(),
              style: colInnerStyle
            });
          } else {
            colStyle = self.getStyle_Edit("col", "control", colEle);
            colInnerStyle = self.getInnerStyle_Edit("col", "control", colEle);
            colNoBorder = colInnerStyle.border.indexOf("0px") == 0 || colInnerStyle.border.indexOf(" 0px") >= 0;
            content = _react["default"].createElement("div", {
              style: self.skinStyle
            }, "\u672A\u77E5\u63A7\u4EF6");
            curCol = _react["default"].createElement("div", {
              className: "panelLayer-col-inner panelLayer-col-final " + self.addFinalSkinClassName() + self.addBorderClassName(colNoBorder) + self.addBackStyleAndColorClassName(),
              style: colInnerStyle
            }, content);
          }

          if (colStyle.padding == "0px" || colStyle.padding == "") {
            colArr.push(_react["default"].createElement(_col["default"], {
              className: "panelLayer-col-outer panelLayer-col-outer-nopadding",
              style: colStyle,
              onDoubleClick: function onDoubleClick(e) {
                return self.onDoubleClick(e, colEle);
              }
            }, curCol));
          } else {
            colArr.push(_react["default"].createElement(_col["default"], {
              className: "panelLayer-col-outer panelLayer-col-outer-haspadding",
              style: colStyle,
              onDoubleClick: function onDoubleClick(e) {
                return self.onDoubleClick(e, colEle);
              }
            }, curCol, _react["default"].createElement("div", {
              style: {
                display: isTitleArea ? "none" : ""
              },
              className: "panelLayer-col-outer-corner-1"
            }), _react["default"].createElement("div", {
              style: {
                display: isTitleArea ? "none" : ""
              },
              className: "panelLayer-col-outer-corner-2"
            }), _react["default"].createElement("div", {
              style: {
                display: isTitleArea ? "none" : ""
              },
              className: "panelLayer-col-outer-corner-3"
            }), _react["default"].createElement("div", {
              style: {
                display: isTitleArea ? "none" : ""
              },
              className: "panelLayer-col-outer-corner-4"
            })));
          }
        });
        var rowNoBorder = rowInnerStyle.border.indexOf("0px") == 0 || rowInnerStyle.border.indexOf(" 0px") >= 0;
        var isTitleArea_Row = rowEle.isTitleArea ? rowEle.isTitleArea : false;

        if (rowStyle.padding == "0px" || rowStyle.padding == "") {
          rowArr.push(_react["default"].createElement(_row["default"], {
            className: "panelLayer-row-outer panelLayer-row-outer-nopadding",
            style: rowStyle
          }, _react["default"].createElement("div", {
            className: "panelLayer-row-inner " + self.addBorderClassName(rowNoBorder),
            style: rowInnerStyle
          }, colArr)));
        } else {
          rowArr.push(_react["default"].createElement(_row["default"], {
            className: "panelLayer-row-outer panelLayer-row-outer-haspadding",
            style: rowStyle
          }, _react["default"].createElement("div", {
            className: "panelLayer-row-inner " + self.addBorderClassName(rowNoBorder),
            style: rowInnerStyle
          }, colArr), _react["default"].createElement("div", {
            style: {
              display: isTitleArea_Row ? "none" : ""
            },
            className: "panelLayer-row-outer-corner-1"
          }), _react["default"].createElement("div", {
            style: {
              display: isTitleArea_Row ? "none" : ""
            },
            className: "panelLayer-row-outer-corner-2"
          }), _react["default"].createElement("div", {
            style: {
              display: isTitleArea_Row ? "none" : ""
            },
            className: "panelLayer-row-outer-corner-3"
          }), _react["default"].createElement("div", {
            style: {
              display: isTitleArea_Row ? "none" : ""
            },
            className: "panelLayer-row-outer-corner-4"
          })));
        }
      });
      return rowArr;
    }
  }, {
    key: "getMaxedColContent",
    value: function getMaxedColContent(colKey) {
      var self = this;
      var colEle = this.getSelectedCol(colKey);
      eChartCommon.LogChartInfo("eChartPanelDisplay 双击事件 " + " colEle.colKey =  " + colEle.colKey + "  colEle.widgetType =  " + colEle.widgetType + " colEle =", JSON.stringify(colEle), 1);
      var isTitleArea = colEle.isTitleArea ? colEle.isTitleArea : false;
      var colStyle = self.getStyle_Edit("col", "control", colEle);
      var colInnerStyle = self.getInnerStyle_Edit("col", "control", colEle);
      var colNoBorder = colInnerStyle.border.indexOf("0px") == 0 || colInnerStyle.border.indexOf(" 0px") >= 0;
      var content = self.getChartRender(colEle);

      var curCol = _react["default"].createElement("div", {
        onDoubleClick: function onDoubleClick(e) {
          return self.onDoubleClick(e, "");
        },
        className: "panelLayer-col-inner panelLayer-col-final " + self.addFinalSkinClassName() + self.addBorderClassName(colNoBorder) + self.addBackStyleAndColorClassName(),
        style: colInnerStyle
      }, content);

      return curCol;
    }
  }, {
    key: "onDoubleClick",
    value: function onDoubleClick(e, colEle) {
      if (colEle && colEle.widgetType == "chart") {
        this.setState({
          maxedColKey: colEle.colKey
        });

        if (this.props.doFunc) {
          this.props.doFunc("pauseCarouse", colEle.colKey);
        }
      } else if (colEle == "") {
        this.setState({
          maxedColKey: ""
        });
        this.props.doFunc("pauseCarouse", "");
      }
    }
  }, {
    key: "getSelectedCol",
    value: function getSelectedCol(colKey) {
      var self = this;
      var rows = self.state.panelConfig.panelLayOutConfig.rows;
      var colsInfo = self.getColParentInfo(rows, colKey);
      var cols = colsInfo.cols;
      var colIndex = colsInfo.colIndex;
      if (cols && colIndex != undefined) return cols[colIndex];else return {};
    }
  }, {
    key: "getColParentInfo",
    value: function getColParentInfo(rows, colKey) {
      var self = this;
      var obj = {};
      rows.forEach(function (rowEle, rowIndex) {
        var curRow = [];
        rowEle.cols.forEach(function (colEle, colIndex) {
          if (colEle.colKey === colKey) {
            obj.rows = rows;
            obj.rowIndex = rowIndex;
            obj.cols = rowEle.cols;
            obj.colIndex = colIndex;
          } else if (colEle.widgetType == "rows") {
            var obj2 = self.getColParentInfo(colEle.widgetValue, colKey);
            obj = _.isEmpty(obj2) ? obj : obj2;
          }
        });
      });
      return obj;
    }
  }, {
    key: "getChartRender",
    value: function getChartRender(colEle) {
      var self = this;

      var tmp = _react["default"].createElement("div", {
        className: "eChartPanel-Chart",
        style: {
          height: '100%',
          width: '100%'
        }
      }, _react["default"].createElement(_eChartDisplay["default"], {
        chartDisplayType: "panel",
        panelType: eChartCommon.panelType.panelType1,
        isInDesign: self.state.isInDesign,
        panelChartConfig: colEle.panelChartConfig,
        handleChartClick: function handleChartClick(btnKey, btnValue) {
          return self.handleChartClick(btnKey, btnValue);
        },
        showIt: true,
        skinConfig: self.skinConfig
      }));

      return tmp;
    }
  }, {
    key: "getChartEleByKey",
    value: function getChartEleByKey(rows, chartKey) {
      var self = this;
      var obj = undefined;
      rows.forEach(function (rowEle) {
        var curRow = [];
        rowEle.forEach(function (colEle) {
          if (colEle.widgetType == "chart" && colEle.panelChartConfig.chartKey === chartKey) {
            obj = colEle;
          } else if (colEle.widgetType == "rows") {
            if (obj === undefined) {
              obj = self.getChartEleByKey(colEle.widgetValue, chartKey);
            }
          }
        });
      });
      return obj;
    }
  }, {
    key: "handleChartClick",
    value: function handleChartClick(btnKey, btnValue) {
      var self = this;

      if (btnKey == "SwitchSize") {
        this.state.panelConfig.curChartKey = this.state.panelConfig.curChartKey == btnValue ? "" : btnValue;
        this.setState();
      } else if (btnKey == "ShowFilter") {
        var colEle = self.getChartEleByKey(self.state.panelConfig.panelLayOutConfig.rows, btnValue);
        if (colEle) colEle.panelChartConfig.bShowFilter = !colEle.panelChartConfig.bShowFilter;
      }
    }
  }]);
  return eChartPanelDisplay;
}(_react["default"].Component);

exports["default"] = eChartPanelDisplay;
//# sourceMappingURL=eChartPanelDisplay.js.map