ming-demo3/lib/components/echart/panel/eChartPanelSetChart.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 _formatDate = require("@mdf/cube/lib/helpers/formatDate");

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

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

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

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

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

var Option = _baseui.Select.Option;
var ConvenientQuery = null;

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

  function eChartPanelSetChart(props) {
    var _this;

    (0, _classCallCheck2["default"])(this, eChartPanelSetChart);
    _this = (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf2["default"])(eChartPanelSetChart).call(this, props));
    eChartCommon.LogChartInfo("eChartPanelSetChart constructor ", "", 900);
    ConvenientQuery = require('../../filter')["default"];
    _this.bVisible = !!props.bVisible;
    _this.state = {
      panelType: props.panelType || 1
    };

    if (_this.bVisible) {
      _this.colEle = props.colEle;

      _this.initState(true, props.colEle.panelChartConfig, props.panelType);

      _this.initModelForFilter();
    }

    return _this;
  }

  (0, _createClass2["default"])(eChartPanelSetChart, [{
    key: "initState",
    value: function initState(bFirst, panelChartConfig, panelType) {
      panelChartConfig = panelChartConfig || {};
      this.state = {
        panelType: panelType || 1,
        reportArray: _.isEmpty(this.state.reportArray) ? [] : this.state.reportArray,
        billnum: panelChartConfig.billnum,
        billName: panelChartConfig.billName,
        groupSchemaArray: [],
        groupSchemaId: panelChartConfig.groupSchemaId,
        groupSchemaName: panelChartConfig.groupSchemaName,
        filterId: panelChartConfig.filterId,
        solutionId: panelChartConfig.solutionId,
        condition: panelChartConfig.condition,
        refreshInterval: panelChartConfig.hasOwnProperty("refreshInterval") ? panelChartConfig.refreshInterval : panelType == 3 ? 0 : 3600,
        subChartColNum: panelChartConfig.subChartColNum || 1
      };
    }
  }, {
    key: "componentWillReceiveProps",
    value: function componentWillReceiveProps(nextProps) {
      eChartCommon.LogChartInfo("eChartPanelSetChart componentWillReceiveProps", "", 900);

      if (this.state.panelType == 3) {
        var preVisible = this.bVisible;
        this.bVisible = !!nextProps.bVisible;

        if (preVisible == true && this.bVisible == false) {
          this.forceUpdate();
        } else if (this.bVisible && (_.isEmpty(this.props.colEle) || _.isEqual(nextProps.colEle.panelChartConfig, this.props.colEle.panelChartConfig) == false)) {
          this.colEle = nextProps.colEle;
          this.initState(false, nextProps.colEle.panelChartConfig, nextProps.panelType);
          this.initModelForFilter();

          if (this.state.billnum) {
            this.getGroupSchema(this.state.billnum);
          } else {
            this.forceUpdate();
          }
        }
      }
    }
  }, {
    key: "render",
    value: function render() {
      eChartCommon.LogChartInfo("eChartPanelSetChart render ", "", 900);
      var self = this;

      if (!self.bVisible) {
        return _react["default"].createElement("div", {
          className: "eChartPanelDesign_SetChart3_NoData"
        });
      }

      var content = self.getCardContent();

      if (this.state.panelType == 3) {
        return _react["default"].createElement("div", {
          className: "eChartPanelDesign_SetChart3",
          key: "setChartKey_" + self.colEle.colKey
        }, content, _react["default"].createElement("div", {
          className: "eChartPanelSplit_bottom3 clearfix"
        }, _react["default"].createElement(_baseui.Button, {
          type: "primary",
          onClick: function onClick() {
            return self.doFunc(true);
          }
        }, "\u786E\u5B9A"), _react["default"].createElement(_baseui.Button, {
          type: "default",
          onClick: function onClick() {
            return self.doFunc(false);
          }
        }, "\u53D6\u6D88")));
      } else {
        return _react["default"].createElement(_baseui.Modal, {
          className: "eChartPanelDesign_SetChart",
          title: "\u6DFB\u52A0\u56FE\u8868",
          onOk: function onOk(e) {
            return self.doFunc(true);
          },
          onCancel: function onCancel(e) {
            return self.doFunc(false);
          },
          visible: true
        }, content);
      }
    }
  }, {
    key: "getGroupSchemaContent",
    value: function getGroupSchemaContent() {
      var self = this;
      var arrArr = this.state.groupSchemaArray;
      var arr = [];
      arrArr.forEach(function (ele) {
        var displayStyle = ele.displayStyle;
        if (displayStyle == 2 || displayStyle == 3) arr.push(_react["default"].createElement(Option, {
          value: ele.id
        }, ele.name));
      });
      return _react["default"].createElement(_baseui.Select, {
        value: self.state.groupSchemaId,
        onSelect: function onSelect(groupSchemaId) {
          return self.setGroupSchemaInfo(groupSchemaId);
        },
        disabled: self.state.billnum ? false : true
      }, arr);
    }
  }, {
    key: "getReportListContent",
    value: function getReportListContent() {
      var arrArr = this.state.reportArray;
      arrArr.sort(function (a, b) {
        return a.name.length - b.name.length;
      });
      var arr = [];
      var billNumArr = [];
      arrArr.forEach(function (ele) {
        if (billNumArr.indexOf(ele.billnum) < 0) {
          billNumArr.push(ele.billnum);
          arr.push(_react["default"].createElement(Option, {
            value: ele.billnum
          }, ele.name));
        }
      });
      return arr;
    }
  }, {
    key: "setReportInfo",
    value: function setReportInfo(billnum) {
      var ele = _.find(this.state.reportArray, function (o) {
        return o.billnum == billnum;
      });

      if (ele) {
        var state = {};
        state.billnum = billnum;
        state.billName = ele.name;
        state.groupSchemaId = "";
        state.filterId = ele.filterId;
        state.solutionId = ele.solutionId;
        state.condition = undefined;
        this.setState(state);
        this.getGroupSchema(billnum);
      }
    }
  }, {
    key: "setGroupSchemaInfo",
    value: function setGroupSchemaInfo(groupSchemaId) {
      var ele = _.find(this.state.groupSchemaArray, function (o) {
        return o.id == groupSchemaId;
      });

      if (ele) {
        var state = {};
        state.groupSchemaId = groupSchemaId;
        state.groupSchemaName = ele.name;
        state.subChartColNum = ele.chartConfig && JSON.parse(ele.chartConfig) && JSON.parse(ele.chartConfig).subChartColNum || 1;
        this.setState(state);
      }
    }
  }, {
    key: "getCardContent",
    value: function getCardContent() {
      var _this2 = this;

      var self = this;
      var options1 = this.getReportListContent();
      var options2 = this.getGroupSchemaContent();
      var panelType = this.state.panelType;
      var filter = undefined;

      if (self.state.filterId) {
        filter = _react["default"].createElement("div", {
          key: self.state.filterId,
          className: "eChartPanelDesign" + self.state.panelType == 3 ? "_3" : "",
          style: {
            display: ''
          }
        }, _react["default"].createElement(ConvenientQuery, {
          panelType: panelType,
          model: self.model,
          cols: self.state.panelType == 3 ? 1 : 2
        }));
      }

      var content = _react["default"].createElement("div", {
        className: "tb"
      }, _react["default"].createElement(_row["default"], {
        className: "width-less"
      }, _react["default"].createElement(_col["default"], {
        className: "eChartPanelSetChart_1"
      }, "\u62A5\u8868"), _react["default"].createElement(_col["default"], null, _react["default"].createElement(_baseui.Select, {
        value: self.state.billnum,
        onSelect: function onSelect(billnum) {
          return self.setReportInfo(billnum);
        }
      }, options1))), _react["default"].createElement(_row["default"], {
        className: "width-less"
      }, _react["default"].createElement(_col["default"], {
        className: "eChartPanelSetChart_2"
      }, "\u5206\u7EC4\u65B9\u6848"), _react["default"].createElement(_col["default"], null, options2)), _react["default"].createElement(_row["default"], {
        className: "width-less-pl"
      }, _react["default"].createElement(_col["default"], {
        className: "eChartPanelSetChart_3"
      }, "\u56FE\u8868\u5217\u6570"), _react["default"].createElement(_col["default"], null, _react["default"].createElement(_baseui.Input, {
        value: self.state.subChartColNum,
        onChange: function onChange(e) {
          return _this2.setState({
            "subChartColNum": e.target.value
          });
        }
      }))), self.state.panelType != 3 ? _react["default"].createElement(_row["default"], {
        className: "width-less-pl"
      }, _react["default"].createElement(_col["default"], {
        className: "eChartPanelSetChart_3"
      }, "\u5237\u65B0\u9891\u7387"), _react["default"].createElement(_col["default"], null, _react["default"].createElement(_baseui.Input, {
        defaultValue: self.state.refreshInterval,
        onChange: function onChange(e) {
          return _this2.setState({
            "refreshInterval": e.target.value
          });
        }
      })), _react["default"].createElement(_col["default"], {
        className: "tips"
      }, "\u79D2", _react["default"].createElement("span", null, "(\u63D0\u793A:\u5237\u65B0\u592A\u9891\u7E41\u4F1A\u9020\u6210\u670D\u52A1\u5668\u538B\u529B\u8FC7\u5927)"))) : null, _react["default"].createElement(_row["default"], {
        className: "gltj"
      }, _react["default"].createElement(_col["default"], {
        className: "eChartPanelSetChart_4"
      }, "\u8FC7\u6EE4\u6761\u4EF6"), _react["default"].createElement(_col["default"], null, filter)));

      return content;
    }
  }, {
    key: "getReportList",
    value: function getReportList() {
      var _this3 = this;

      var param = {};

      var callback = function callback(json) {
        if (json.code === 200) {
          if (json.data) {
            _this3.setState({
              reportArray: json.data
            });
          }
        }
      };

      eChartProxy.doProxy(eChartProxy.url.getReportList, 'GET', param, callback);
    }
  }, {
    key: "getGroupSchema",
    value: function getGroupSchema(billnum) {
      var _this4 = this;

      var self = this;

      if (billnum) {
        var param = {
          billnum: billnum
        };

        var callback = function callback(json) {
          var bHasData = false;

          if (json.code === 200) {
            if (json.data) {
              bHasData = true;
              var groupSchemaArray = json.data || [];
              groupSchemaArray = _.filter(groupSchemaArray, function (o) {
                return o.displayStyle == 2 || o.displayStyle == 3;
              });

              if (_this4.state.panelType == 3) {
                groupSchemaArray = _.filter(groupSchemaArray, function (o) {
                  return o.isMobile == true;
                });
              }

              if (groupSchemaArray.length == 0) {
                eChartCommon.LogChartInfo("符合条件的分组方案(displayStyle == 2 or 3,移动看板则需要isMobile == true)中没有找到任何分组方案。", "", 999);
              }

              if (_this4.state.groupSchemaId) {
                var arr = _.filter(groupSchemaArray, function (o) {
                  return o.id == self.state.groupSchemaId;
                });

                if (!arr || arr.length == 0) {
                  eChartCommon.LogChartInfo("符合条件的分组方案(displayStyle == 2 or 3,移动看板则需要isMobile == true)中没有找到当前的分组方案(groupSchemaId=" + _this4.state.groupSchemaId + ")。", "", 999);
                }
              }

              _this4.setState({
                groupSchemaArray: groupSchemaArray
              });
            }
          }

          if (bHasData == false) {
            eChartCommon.LogChartInfo("获取报表的所有分组方案列表服务返回异常。", "", 999);
          }
        };

        eChartProxy.doProxy(eChartProxy.url.getGroupSchema, 'GET', param, callback);
      } else {
        this.setState({
          groupSchemaArray: []
        });
      }
    }
  }, {
    key: "initModelForFilter",
    value: function initModelForFilter() {
      var self = this;
      this.model = new cb.models.SimpleModel({});

      this.model.getParams = function () {
        var tmp = {
          filterId: self.state.filterId,
          condition: self.state.condition,
          isInDesign: true,
          isInPanel: true,
          solutionId: self.state.solutionId,
          bHasNullDate: true,
          panelType: self.state.panelType
        };
        return tmp;
      };

      this.model.on('filterClick', function (args) {
        self.state.condition = args.condition;
      });
      this.model.setName("监控视图图表设置");
    }
  }, {
    key: "doFunc",
    value: function doFunc(bOK) {
      this.model.execute('eChartPanel_GetCondition');

      if (bOK) {
        var info = {};
        info.chartKey = eChartCommon.getNewChartKey();
        info.billnum = this.state.billnum || "";
        info.billName = this.state.billName || "";
        info.groupSchemaId = this.state.groupSchemaId || "";
        info.groupSchemaName = this.state.groupSchemaName || "";
        info.filterId = this.state.filterId || "";
        info.solutionId = this.state.solutionId || "";
        info.condition = this.state.condition;
        info.refreshInterval = this.state.refreshInterval;
        info.subChartColNum = this.state.subChartColNum;
        info.innerFName = "看板配置信息-模块配置-图表分组方案";

        if (info.refreshInterval == "") {
          info.refreshInterval = 0;
        }

        if (info.billnum == "") {
          cb.utils.alert('请设置报表', 'error');
        } else if (info.groupSchemaId == "") {
          cb.utils.alert('请设置方案', 'error');
        } else if (info.filterId == "") {
          cb.utils.alert('请设置filterId', 'error');
        } else if (info.solutionId == "") {
          cb.utils.alert('请设置solutionId', 'error');
        } else if (_.isEmpty(info.condition)) {
          cb.utils.alert('请设置condition', 'error');
        } else if (_.isNull(info.subChartColNum) || info.subChartColNum.toString().trim() == "") {
          cb.utils.alert("图表列数请输入1-3的整数。");
        } else if (isNaN(info.subChartColNum) == true || Number(info.subChartColNum) < 1 || Number(info.subChartColNum) > 3) {
          cb.utils.alert("图表列数请输入1-3的整数。");
        } else {
          this.props.doFunc(bOK, info);
        }
      } else {
        this.props.doFunc(bOK);
      }
    }
  }, {
    key: "shouldComponentUpdate",
    value: function shouldComponentUpdate(nextProps, nextState) {
      var bFlag;

      if (this.state.panelType == 3) {
        if (_.isEqual(nextState, this.state) == false) {
          bFlag = true;
        } else {
          bFlag = false;
        }
      } else {
        bFlag = true;
      }

      eChartCommon.LogChartInfo("eChartPanelSetChart shouldComponentUpdate return ", bFlag, 900);
      return bFlag;
    }
  }, {
    key: "componentDidMount",
    value: function componentDidMount() {
      this.getReportList();
      if (this.state.billnum) this.getGroupSchema(this.state.billnum);
    }
  }]);
  return eChartPanelSetChart;
}(_react["default"].Component);

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