ming-demo3/lib/components/meta/HotAreaMapDisplay.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.HotAreaMapDisplay = 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 _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));

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

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

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

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

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

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

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

  function HotAreaMapDisplay(props) {
    var _this;

    (0, _classCallCheck2["default"])(this, HotAreaMapDisplay);
    _this = (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf2["default"])(HotAreaMapDisplay).call(this, props));
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "setDataSource", function (data) {
      data = data || [];
      var mapConfig = (0, commonFunc.getNullMapConfig)();

      if (data.length > 0) {
        var field = _this.state.fieldMapping.mapConfigField;

        if (field) {
          {
            mapConfig = commonFunc.JSONParse(_.cloneDeep(data[0][field]));
            commonFunc.LogChartInfo("  热区显示图  通过返回的数据集获取 mapConfig 。 mapConfig  " + data[0][field], 901);
          }
        }
      }

      _this.setDataInfoToCoordinates(mapConfig, data);

      _this.setState({
        areaDataList: data,
        mapConfig: mapConfig
      });
    });
    (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) {});
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "setColumnByTtile", function (columns) {});
    var tmpState = {};
    var cStyle;

    if (commonFunc.isDebug) {
      cStyle = commonFunc.getDebugCStyle(false);
      tmpState.mapConfig = commonFunc.getDebugMapConfig();
    } else {
      cStyle = props.cStyle;
      tmpState.mapConfig = commonFunc.JSONParse(props.mapConfig) || {};
    }

    cStyle = commonFunc.JSONParse(cStyle);
    commonFunc.LogChartInfo(" 热区显示图 初始化 cStyle = " + JSON.stringify(cStyle) + "  props.mapConfig = " + JSON.stringify(props.mapConfig), 901);
    var fieldMapping = {};
    fieldMapping.codeField = cStyle.codeField || "";
    fieldMapping.stateField = cStyle.stateField || "";
    fieldMapping.captionFields = cStyle.captionFields || [];
    fieldMapping.mapConfigField = cStyle.mapConfigField || "";

    if (!fieldMapping.codeField || !fieldMapping.stateField || !fieldMapping.captionFields || fieldMapping.captionFields.length == 0 || !fieldMapping.mapConfigField) {
      commonFunc.LogChartInfo(" 热区显示图 在CStyle中未能找到全部的热区配置字段 codeField stateField captionFields mapConfigField ", 999);
    }

    tmpState.fieldMapping = fieldMapping;
    tmpState.extendClassName = cStyle.hasOwnProperty("extendClassName") ? cStyle.extendClassName : "";
    tmpState.triggerEvents = cStyle.triggerEvents;
    tmpState.refreshInterval = cStyle.hasOwnProperty("refreshInterval") ? cStyle.refreshInterval : -1;

    if (tmpState.refreshInterval <= 0) {
      commonFunc.LogChartInfo(" 热区显示图 不进行刷新。", 901);
    } else {
      if (tmpState.refreshInterval < 5000) {
        tmpState.refreshInterval = 5000;
        commonFunc.LogChartInfo(" 热区显示图  设置的刷新时间太短,更改为5秒。", 999);
      }

      _this.setTimeInterval(tmpState.refreshInterval);
    }

    tmpState.selectedCoor = {};
    tmpState.popoverCoor = {};
    tmpState.areaDataList = [];
    _this.state = tmpState;
    if (_this.props.model.modelType.toLowerCase() == 'gridmodel') _this.gridModel = _this.props.model;else _this.gridModel = _this.props.model.getGridModel();
    _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";
    _this.zoomInfo = {
      configWidth: 100,
      configHeight: 100,
      divWidth: 100,
      divHeight: 100,
      zoomRate: 1
    };
    return _this;
  }

  (0, _createClass2["default"])(HotAreaMapDisplay, [{
    key: "setListenerState",
    value: function setListenerState(params) {
      debugger;
    }
  }, {
    key: "componentDidMount",
    value: function componentDidMount() {
      if (this.gridModel) this.gridModel.addListener(this);

      if (commonFunc.isDebug) {
        this.controls = this.props.meta.containers[0].controls;
        this.buttonsModel = this.props.model.getParent();
      } else {}
    }
  }, {
    key: "setTimeInterval",
    value: function setTimeInterval(num) {
      var _this2 = this;

      num = num || this.state.refreshInterval;
      if (this.timer) clearTimeout(this.timer);
      this.timer = setInterval(function () {
        return _this2.refreshData();
      }, num);
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate() {
      if (this.gridModel) this.gridModel.addListener(this);
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      if (this.gridModel) this.gridModel.removeListener(this);
      this.timer && clearTimeout(this.timer);
    }
  }, {
    key: "getAreaCaption",
    value: function getAreaCaption(width, height, coordinate, captionFields) {
      var _this3 = this;

      var captionArr = [];
      var dataSourceEle = coordinate.dataSourceEle;
      dataSourceEle && captionFields && captionFields.forEach(function (ele, index) {
        var caption = commonFunc.getDataSourceFieldValue(_.get(dataSourceEle, 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(e, coordinate) {
      e.stopPropagation();
      var bSelected = coordinate.id == this.state.selectedCoor.id ? false : true;
      this.setState({
        selectedCoor: bSelected ? coordinate : {}
      });
      this.gridModel.select([coordinate.dataSourceIndex]);
      this.handleEvent(coordinate, commonFunc.sourceEvents.click);
    }
  }, {
    key: "handleAreaDoubleClick",
    value: function handleAreaDoubleClick(coordinate) {
      this.handleEvent(coordinate, commonFunc.sourceEvents.doubleClick);
    }
  }, {
    key: "handleEvent",
    value: function handleEvent(coordinate, sourceEvent) {
      var triggerEvents = this.state.triggerEvents;
      var destEvent = triggerEvents && triggerEvents[sourceEvent];

      if (destEvent == commonFunc.destEvents.url) {
        this.openUrl(coordinate.url);
      } else if (destEvent == commonFunc.destEvents.drop) {
        this.setState({
          popoverCoor: coordinate
        });
      }
    }
  }, {
    key: "buttonClick",
    value: function buttonClick(e, coordinate, ele) {
      e.stopPropagation();
      this.state.popoverCoor = {};
      var btnModel = this.buttonsModel && this.buttonsModel.get(ele.cItemName);
      btnModel && btnModel.fireEvent('click', {
        index: coordinate.dataSourceIndex
      });
      this.setTimeInterval();
      this.refreshData();
    }
  }, {
    key: "getPopoverContent",
    value: function getPopoverContent(coordinate) {
      var _this4 = this;

      var arr = [];
      this.controls && this.controls.forEach(function (ele, index) {
        arr.push(_react["default"].createElement(_baseui.Button, {
          onClick: function onClick(e) {
            return _this4.buttonClick(e, coordinate, ele);
          },
          className: _this4.getClassName("Popover-Btn")
        }, ele.cShowCaption || cCaption));
      });
      return _react["default"].createElement("div", {
        className: this.getClassName("Popover-Btns")
      }, arr);
    }
  }, {
    key: "wrapperPopover",
    value: function wrapperPopover(coordinate, content) {
      var _this5 = this;

      var popoverContent = this.getPopoverContent(coordinate);

      var obj = _react["default"].createElement(_baseui.Popover, {
        content: popoverContent,
        visible: true,
        className: this.getClassName("Popover"),
        getPopupContainer: function getPopupContainer() {
          return document.getElementById(_this5.getDivID(coordinate));
        }
      }, _react["default"].createElement("div", {
        className: this.getClassName("Popover-Div")
      }, content));

      return obj;
    }
  }, {
    key: "openUrl",
    value: function openUrl(url) {
      this.winObj = window.open(url);
    }
  }, {
    key: "setDataInfoToCoordinates",
    value: function setDataInfoToCoordinates(mapConfig, data) {
      var field = this.state.fieldMapping.codeField;
      var coordinates = mapConfig.coordinates;

      if (field) {
        coordinates.forEach(function (coordinate) {
          coordinate.dataSourceIndex = -1;
          coordinate.dataSourceEle = {};

          var dataSourceIndex = _.findIndex(data, function (ele) {
            return ele[field] == coordinate.code;
          });

          if (dataSourceIndex >= 0) {
            coordinate.dataSourceIndex = dataSourceIndex;
            coordinate.dataSourceEle = data[dataSourceIndex];
          }
        });
      }
    }
  }, {
    key: "getClassName",
    value: function getClassName(str) {
      var className = "HotAreaMapDisplay_" + str;

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

      return className;
    }
  }, {
    key: "calcZoomInfo",
    value: function calcZoomInfo() {
      var tmpMapConfig = this.state.mapConfig;
      var configWidth = tmpMapConfig.width || 0;
      var configHeight = tmpMapConfig.height || 0;
      var divWidth = this.props.width || configWidth;
      var divHeight = this.props.height || configHeight;
      var rate = 1;

      if (configWidth && configHeight && divWidth && divHeight) {
        if (divWidth < configWidth || divHeight < configHeight) {
          var rate1 = divWidth / configWidth;
          var rate2 = divHeight / configHeight;
          rate = rate1 > rate2 ? rate2 : rate1;
          rate = rate.toFixed(6);
          rate = Math.floor(rate * 1000000) / 1000000;
        }
      }

      this.zoomInfo = {
        configWidth: configWidth,
        configHeight: configHeight,
        divWidth: divWidth,
        divHeight: divHeight,
        zoomRate: rate
      };
    }
  }, {
    key: "getRect",
    value: function getRect(coordinate) {
      var _this6 = this;

      var self = this;
      var style = {};
      style.position = "absolute";
      style.left = this.calcZoomedCalue(coordinate.x);
      style.top = this.calcZoomedCalue(coordinate.y);
      style.width = this.calcZoomedCalue(coordinate.width);
      style.height = this.calcZoomedCalue(coordinate.height);
      var styleContent = {};
      styleContent.width = style.width - 2;
      styleContent.height = style.height - 2;
      var tmpMapping = self.state.fieldMapping;
      var dataSourceEle = coordinate.dataSourceEle;
      var className = this.getClassName("Area");

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

        var stateFieldValue = _.get(dataSourceEle, tmpMapping.stateField);

        stateFieldValue = commonFunc.getDataSourceFieldValue(stateFieldValue, 2);
        className = className + " " + this.getClassName("AreaState_" + stateFieldValue);
      }

      if (coordinate.id == this.state.selectedCoor.id) {
        className = className + " " + this.getClassName("Area_Selected");
      }

      var content = _react["default"].createElement("div", {
        onClick: function onClick(e) {
          return _this6.handleAreaClick(e, coordinate);
        },
        onDoubleClick: function onDoubleClick() {
          return _this6.handleAreaDoubleClick(coordinate);
        },
        className: this.getClassName("Area_Content"),
        style: styleContent
      }, self.getAreaCaption(style.width, style.height, coordinate, tmpMapping.captionFields));

      if (coordinate.id == this.state.popoverCoor.id) {
        content = this.wrapperPopover(coordinate, content);
      }

      return _react["default"].createElement("div", {
        id: this.getDivID(coordinate),
        style: style,
        className: className
      }, content);
    }
  }, {
    key: "getDivID",
    value: function getDivID(coordinate) {
      return "ID_" + coordinate.id;
    }
  }, {
    key: "getAreaArr",
    value: function getAreaArr(coordinates) {
      var obj = [];
      var self = this;
      coordinates.forEach(function (coordinate) {
        var tmp;

        if (coordinate.hasOwnProperty("areaType") == false || coordinate.areaType == "rect") {
          tmp = self.getRect(coordinate);
        }

        if (tmp) obj.push(tmp);
      });
      return obj;
    }
  }, {
    key: "MapClick",
    value: function MapClick() {
      this.setState({
        popoverCoor: {}
      });
    }
  }, {
    key: "calcZoomedCalue",
    value: function calcZoomedCalue(value) {
      var tmpValue = value * this.zoomInfo.zoomRate;
      return tmpValue;
    }
  }, {
    key: "render",
    value: function render() {
      var self = this;
      var tmpMapConfig = this.state.mapConfig;
      this.calcZoomInfo();

      if (_.isEmpty(tmpMapConfig) == false && _.isEmpty(tmpMapConfig.imgUrl) == false) {
        var styleOuter = {};
        styleOuter.width = this.zoomInfo.divWidth;
        styleOuter.height = this.zoomInfo.divHeight;

        if (commonFunc.isDebug) {
          styleOuter.border = "solid 1px red";
        }

        var styleMap = {};
        styleMap.backgroundImage = 'url(' + tmpMapConfig.imgUrl + ')';
        styleMap.width = this.calcZoomedCalue(tmpMapConfig.width);
        styleMap.height = this.calcZoomedCalue(tmpMapConfig.height);
        styleMap.backgroundSize = '100% 100%';
        styleMap.position = "relative";
        var tmp = this.getAreaArr(tmpMapConfig.coordinates);
        return _react["default"].createElement("div", {
          style: styleOuter,
          className: this.getClassName("MapOuter"),
          onClick: function onClick() {
            return self.MapClick();
          }
        }, _react["default"].createElement("div", {
          style: styleMap,
          className: this.getClassName("Map")
        }, tmp));
      } else {
        commonFunc.LogChartInfo(" 热区显示图渲染 热区配置文件或者楼层图片为空。", 999);
        return _react["default"].createElement("div", {
          className: this.getClassName("MapOuter")
        }, _react["default"].createElement("div", {
          className: this.getClassName("MapNoData")
        }, _react["default"].createElement("div", {
          className: "table-nodata"
        }, _react["default"].createElement(_SvgIcon["default"], {
          type: "nodata"
        }), "\u6682\u65F6\u6CA1\u6709\u6570\u636E\u54E6~")));
      }
    }
  }, {
    key: "refreshData",
    value: function refreshData() {
      var parentModel = this.gridModel.getCache("parent");
      parentModel && parentModel.execute('refresh');
    }
  }]);
  return HotAreaMapDisplay;
}(_react["default"].Component);

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