ming-demo3/lib/components/meta/ListAreaMap.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"] = exports.ListAreaMap = void 0;

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

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

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

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

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

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

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

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

var commonFunc = _interopRequireWildcard(require("./HotAreaMapCommon"));

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

var _SvgIcon = _interopRequireDefault(require("@mdf/metaui-web/lib/components/common/SvgIcon"));

var ListAreaMap = function (_React$Component) {
  (0, _inherits2["default"])(ListAreaMap, _React$Component);
  (0, _createClass2["default"])(ListAreaMap, [{
    key: "getDemoCStyle",
    value: function getDemoCStyle() {
      return {
        rowCount: 8,
        refreshInterval: 5000,
        extendClassName: "扩展类名_",
        "codeField": "code",
        "stateField": "stop",
        "captionFields": [{
          "field": "code",
          "prefix": "",
          "suffix": ""
        }, {
          "field": "name",
          "prefix": "",
          "suffix": ""
        }]
      };
    }
  }]);

  function ListAreaMap(props) {
    var _this;

    (0, _classCallCheck2["default"])(this, ListAreaMap);
    _this = (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf2["default"])(ListAreaMap).call(this, props));
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "setDataSource", function (data) {
      _this.setState({
        areaData: data,
        refreshTime: new Date()
      });
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "setColumns", function (columndata) {});
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "setTitle", function (titleList) {});
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "setListenerState", function (params) {
      _this.setState({
        areaData: params.rows,
        refreshTime: new Date()
      });
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "setColumnByTtile", function (columns) {});
    var cStyle = _.isEmpty(props.cStyle) ? _this.getDemoCStyle() : props.cStyle;
    cStyle = commonFunc.JSONParse(cStyle);
    console.log("ListAreaMap cStyle = " + JSON.stringify(cStyle));
    var tmpState = {};
    var fieldMapping = {};
    fieldMapping.codeField = cStyle.codeField || "";
    fieldMapping.stateField = cStyle.stateField || "";
    fieldMapping.captionFields = cStyle.captionFields || "";

    if (!fieldMapping.codeField || !fieldMapping.stateField || !fieldMapping.captionFields) {
      console.log("在栏目中未能找到全部的列表区配置字段 codeField stateField captionFields");
    }

    tmpState.fieldMapping = fieldMapping;
    tmpState.rowCount = cStyle.rowCount || 8;
    tmpState.extendClassName = cStyle.hasOwnProperty("extendClassName") ? cStyle.extendClassName : "";
    tmpState.refreshInterval = cStyle.hasOwnProperty("refreshInterval") ? cStyle.refreshInterval : -1;
    tmpState.bNeedRefresh = false;

    if (tmpState.refreshInterval > 1000) {
      tmpState.bNeedRefresh = true;
    } else {
      console.log("未设置刷新时间或者设置的刷新时间太短。");
    }

    tmpState.refreshTime = new Date();
    tmpState.selectedAreaArr = props.selectedAreaArr || [];
    tmpState.bMultiSel = cStyle.hasOwnProperty("bMultiSel") ? cStyle.bMultiSel : false;
    tmpState.areaData = [];
    tmpState.width = props.width || 500;
    tmpState.height = props.height || 400;
    _this.state = tmpState;
    _this.defaultAreaBorder = "solid 2px white";
    _this.areaBackPicUrl_0 = "http://resourceyxy.yonyouup.com/34d44c87-35a8-4469-ae1a-da17a7ad2ae1.png";
    _this.areaBackPicUrl_1 = "http://resourceyxy.yonyouup.com/31db3764-33bf-4fac-b156-00982cf96b5e.png";
    return _this;
  }

  (0, _createClass2["default"])(ListAreaMap, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      var self = this;
      var model = this.props.model;
      var meta = this.props.meta;
      if (model.modelType.toLowerCase() == 'gridmodel') this.gridModel = model;else this.gridModel = model.get(meta.childrenField || meta.cCode);
      this.gridModel && this.gridModel.addListener(this);
      this.gridModel && this.gridModel.on('setSelectedAreaArr', function (arr) {
        self.setState({
          selectedAreaArr: arr
        });
      });
      this.setTimeInterval();
    }
  }, {
    key: "shouldComponentUpdate",
    value: function shouldComponentUpdate(nextProps, nextState) {
      var bFlag = false;

      if (nextProps.hasOwnProperty("selectedAreaArr") && _.isEqual(nextProps.selectedAreaArr, this.state.selectedAreaArr) == false) {
        this.state.selectedAreaArr = nextProps.selectedAreaArr;
        bFlag = true;
      }

      if (nextProps.hasOwnProperty("model") && !this.gridModel) {
        this.setGridModel(model);
        bFlag = true;
      }

      if (nextProps.hasOwnProperty("width") && nextProps.width && _.isEqual(nextProps.width, this.state.width) == false) {
        this.state.width = nextProps.width;
        bFlag = true;
      }

      if (nextProps.hasOwnProperty("height") && nextProps.height && _.isEqual(nextProps.height, this.state.height) == false) {
        this.state.height = nextProps.height;
        bFlag = true;
      }

      return true;
    }
  }, {
    key: "setTimeInterval",
    value: function setTimeInterval() {
      var _this2 = this;

      if (this.timer) {
        clearTimeout(this.timer);
      }

      if (this.state.bNeedRefresh == true) {
        this.timer = setInterval(function () {
          return _this2.refreshData();
        }, this.state.refreshInterval);
      }
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate() {
      if (this.gridModel) this.gridModel.addListener(this);
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      var self = this;

      if (this.gridModel) {
        this.gridModel.removeListener(this);
      }

      this.timer && clearTimeout(this.timer);
    }
  }, {
    key: "getAreaCaption",
    value: function getAreaCaption(width, height, data, captionFields) {
      var _this3 = this;

      var captionArr = [];
      data && captionFields && captionFields.forEach(function (ele, index) {
        var caption = commonFunc.getDataSourceFieldValue(_.get(data, ele.field), 1);

        if (caption != "") {
          caption = (ele.prefix || "") + caption + (ele.suffix || "");
        }

        captionArr.push(_react["default"].createElement("div", {
          style: {
            "textAlign": 'center',
            "whiteSpace": "nowrap",
            "overflow": "hidden",
            "textOverflow": "ellipsis"
          },
          className: _this3.getClassName("AreaCaption_" + ele.field) + " " + _this3.getClassName("AreaCaptionIndex_" + index)
        }, caption));
      });
      return _react["default"].createElement("div", {
        className: this.getClassName("AreaCaptionList")
      }, captionArr);
    }
  }, {
    key: "handleAreaClick",
    value: function handleAreaClick(ele, index, disabled) {
      if (disabled) {
        return;
      } else {
        var selectedAreaArr = this.state.selectedAreaArr;

        if (this.state.selectedAreaArr.indexOf(index) >= 0) {
          _.remove(selectedAreaArr, function (o) {
            return index == o;
          });

          this.gridModel.unselect([index]);
        } else {
          if (this.state.bMultiSel) {
            selectedAreaArr.push(index);
          } else {
            selectedAreaArr = [index];
          }

          this.gridModel.select(selectedAreaArr);
        }

        this.setState({
          selectedAreaArr: selectedAreaArr
        });
      }
    }
  }, {
    key: "getClassName",
    value: function getClassName(str) {
      var className = "ListAreaMapDisplay_" + str;

      if (!!this.state.extendClassName) {
        className = className + " " + this.state.extendClassName + "ListAreaMap_" + str;
      }

      return className;
    }
  }, {
    key: "getArea",
    value: function getArea(ele, index) {
      var _this4 = this;

      var self = this;
      var style = {};
      var caption = "";
      style.width = Math.floor(this.state.width / this.state.rowCount);
      style.height = Math.floor(this.state.width / this.state.rowCount);
      style.border = self.defaultAreaBorder;
      style.margin = 0;
      style.padding = 2;
      style["float"] = "left";
      var tmpMapping = self.state.fieldMapping;

      if (ele.areaBackPicUrl) {
        style.backgroundImage = 'url(' + ele.areaBackPicUrl + ')';
        style.backgroundSize = '100% 100%';
      }

      var stateFieldValue = commonFunc.getDataSourceFieldValue(_.get(ele, tmpMapping.stateField), 2);
      var className = this.getClassName("Area");
      className = className + " " + this.getClassName("AreaState_" + stateFieldValue);
      var bSelected = this.state.selectedAreaArr.indexOf(index) >= 0;
      if (bSelected) className = className + " " + this.getClassName("Area_Selected");
      var areaHtml = undefined;
      var params = this.getAreaBusRender(ele, index);

      if (params.areaHtml) {
        areaHtml = _react["default"].createElement("div", {
          className: this.getClassName("AreaBusRender"),
          dangerouslySetInnerHTML: {
            __html: params.areaHtml
          }
        });
      }

      var disabled = params.state && params.state.disabled || false;

      if (disabled) {
        className = className + " " + this.getClassName("AreaState_Disabled");
      }

      var checkBoxHtml;

      if (self.state.bMultiSel == true) {
        checkBoxHtml = _react["default"].createElement(_baseui.Checkbox, {
          className: this.getClassName("CheckBox"),
          checked: bSelected,
          disabled: disabled
        });
      }

      return _react["default"].createElement("div", {
        style: style,
        onClick: function onClick() {
          return _this4.handleAreaClick(ele, index, disabled);
        },
        className: className,
        title: ele && ele.name
      }, self.getAreaCaption(style.width, style.height, ele, tmpMapping.captionFields), areaHtml, checkBoxHtml);
    }
  }, {
    key: "getAreaBusRender",
    value: function getAreaBusRender(area, rowIndex) {
      var params = {
        area: area,
        rowIndex: rowIndex,
        selectedAreaArr: this.state.selectedAreaArr,
        areaHtml: undefined,
        state: {
          disabled: false
        }
      };
      this.gridModel.execute("getAreaHtml", params);
      return params;
    }
  }, {
    key: "getAreaArr",
    value: function getAreaArr() {
      var obj = [];
      var self = this;
      self.state.areaData.forEach(function (ele, index) {
        var tmp = self.getArea(ele, index);
        obj.push(tmp);
      });
      return obj;
    }
  }, {
    key: "getRefreshTime",
    value: function getRefreshTime() {
      return this.state.refreshTime.toLocaleString();
    }
  }, {
    key: "render",
    value: function render() {
      var self = this;
      var styleMain = {};
      styleMain.width = self.state.width;
      styleMain.height = self.state.height;
      var tmp = this.getAreaArr();

      if (!tmp || tmp.length == 0) {
        tmp = _react["default"].createElement("div", {
          className: "ListArea_NoData"
        }, _react["default"].createElement("div", {
          className: "table-nodata"
        }, _react["default"].createElement(_SvgIcon["default"], {
          type: "nodata"
        }), "\u6682\u65F6\u6CA1\u6709\u6570\u636E\u54E6~"));
      }

      return _react["default"].createElement("div", {
        style: styleMain,
        className: this.getClassName("ListArea")
      }, this.state.bNeedRefresh ? _react["default"].createElement("div", {
        className: this.getClassName("ListArea_Time")
      }, this.getRefreshTime()) : "", tmp);
    }
  }, {
    key: "refreshData",
    value: function refreshData() {
      var parentModel = this.gridModel.getCache("parent");
      parentModel && parentModel.execute('refresh');
    }
  }]);
  return ListAreaMap;
}(_react["default"].Component);

exports.ListAreaMap = ListAreaMap;
;
var _default = ListAreaMap;
exports["default"] = _default;
//# sourceMappingURL=ListAreaMap.js.map