ming-demo3
Version:
mdf metaui web
1,347 lines (1,215 loc) • 84.7 kB
JavaScript
"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 _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 = _interopRequireWildcard(require("react"));
var _baseui = require("@mdf/baseui");
var _row8 = _interopRequireDefault(require("../../basic/row"));
var _col = _interopRequireDefault(require("../../basic/col"));
var eChartCommon = _interopRequireWildcard(require("../eChartCommon"));
var eChartProxy = _interopRequireWildcard(require("../eChartProxy"));
var _formatDate = require("@mdf/cube/lib/helpers/formatDate");
var _eChartPanelSplit = _interopRequireDefault(require("./eChartPanelSplit"));
var _eChartPanelSetImageText = _interopRequireDefault(require("./eChartPanelSetImageText"));
var _eChartPanelSetChart = _interopRequireDefault(require("./eChartPanelSetChart"));
var _eChartPanelSetSum = _interopRequireDefault(require("./eChartPanelSetSum"));
var _eChartPanelSetNotice = _interopRequireDefault(require("./eChartPanelSetNotice"));
var _eChartPanelSetDateTime = _interopRequireDefault(require("./eChartPanelSetDateTime"));
var _eChartPanelDisplay = _interopRequireDefault(require("./eChartPanelDisplay2"));
var _eChartPanelDisplay3_Design = _interopRequireDefault(require("./eChartPanelDisplay3_Design"));
var eChartDemoData = _interopRequireWildcard(require("../eChartDemoData"));
var portalactions = _interopRequireWildcard(require("../../../redux/portal"));
var _redux = require("redux");
var _reactRedux = require("react-redux");
var _fileUpload = _interopRequireDefault(require("../../file-upload"));
var _SvgIcon = _interopRequireDefault(require("@mdf/metaui-web/lib/components/common/SvgIcon"));
var eChartPanelDesign = function (_React$Component) {
(0, _inherits2["default"])(eChartPanelDesign, _React$Component);
function eChartPanelDesign(props) {
var _this;
(0, _classCallCheck2["default"])(this, eChartPanelDesign);
_this = (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf2["default"])(eChartPanelDesign).call(this, props));
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "setEditPanel", function (e, template) {
var self = (0, _assertThisInitialized2["default"])(_this);
e.preventDefault();
e.stopPropagation();
cb.utils.confirm('重新选择模板将覆盖当前的模板信息，是否继续?', function () {
var template2 = _.cloneDeep(template);
template2.id = self.state.editPanel ? self.state.editPanel.id : -1;
if (self.state.panelType == 3) {
if (self.state.editPanel.name != self.state.editPanel.nameTmp) {
template2.name = self.state.editPanel.name;
}
} else {
template2.name = self.state.editPanel.name;
}
var curState = {
editPanel: template2
};
curState.selectedColKey = "";
curState.curOperateType = "";
self.stateCache = [];
self.setState(curState);
});
});
eChartCommon.LogChartInfo("eChartPanelDesign constructor ", "", 900);
var params = props.data.params;
_this.parentViewModel = props.data.parentViewModel;
_this.stateCache = [];
var panelType = params.type ? params.type : 1;
var leftPanelIndex = 1;
if (panelType == 2 || panelType == 3) leftPanelIndex = 3;
_this.state = {
panelType: panelType,
editType: params.editType,
curOperateType: "",
leftPanelIndex: leftPanelIndex,
selectedColKey: "",
templateList: [],
editPanel: {},
backStyleArr: eChartCommon.getBackStyleArr(),
focusedKey: "",
hideSettingPanel: -1
};
_this.skinConfig = "";
return _this;
}
(0, _createClass2["default"])(eChartPanelDesign, [{
key: "pushState",
value: function pushState() {
var tmp = _.cloneDeep(this.state);
this.stateCache.push(tmp);
}
}, {
key: "popState",
value: function popState() {
var self = this;
if (self.stateCache.length > 0) {
cb.utils.confirm('当前操作将撤销上次所做的拆分操作，是否继续?', function () {
var state = self.stateCache.pop();
state.curOperateType = "";
self.setState(state);
});
} else {
cb.utils.alert("已经回退到最初拆分前的状态。");
}
}
}, {
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("eChartPanelDesign shouldComponentUpdate return ", bFlag, 900);
return bFlag;
}
}, {
key: "componentWillReceiveProps",
value: function componentWillReceiveProps(nextProps) {
eChartCommon.LogChartInfo("eChartPanelDesign componentWillReceiveProps", "", 900);
if (!nextProps.callback || nextProps.callback === this.props.callback) return;
cb.utils.confirm("\u786E\u5B9A\u8981".concat(nextProps.caption, "\u4E48"), function () {
nextProps.callback();
});
}
}, {
key: "setCurrentSkin",
value: function setCurrentSkin() {
var skinKey = this.state.editPanel.skinKey_BackStyle || this.state.editPanel.skinKey_BackColor;
if (skinKey) {
this.skinConfig = eChartCommon.getSkinArr(skinKey);
} else {
this.skinConfig = "";
}
}
}, {
key: "render",
value: function render() {
var self = this;
this.setCurrentSkin();
var curOperateModal;
var settingPanel;
var previewContent = null;
eChartCommon.LogChartInfo("eChartPanelDesign render", "", 900);
if (self.state.panelType == 1 || self.state.panelType == 2) {
if (self.state.curOperateType == "setImageText") {
curOperateModal = self.getDesignColType_Title();
} else if (self.state.curOperateType == "setChart") {
curOperateModal = self.getDesignColType_Chart(undefined, true);
} else if (self.state.curOperateType == "setSum") {
curOperateModal = self.getDesignColType_Sum(undefined, true);
} else if (self.state.curOperateType == "setComponent_DateTime") {
curOperateModal = self.getDesignColType_DateTime();
} else if (self.state.curOperateType == "setComponent_Notice") {
curOperateModal = self.getDesignColType_Notice(undefined, true);
}
} else {
settingPanel = self.getSettingPanel();
}
var leftPanel = self.getLeftPanel();
var rightPanel;
if (_.isEmpty(self.state.editPanel)) {
var style = self.getStyle_Edit("all", "", {});
rightPanel = _react["default"].createElement("div", {
style: style
}, "\u7F16\u8F91\u754C\u9762");
} else {
if (self.state.panelType == 1 || self.state.panelType == 2) rightPanel = self.getEditPanel();else if (self.state.panelType == 3) rightPanel = self.getEditPanel_Mobile();
}
if (self.state.curOperateType == "preView") {
previewContent = self.getPreView();
}
var curDisplay = self.state.curOperateType == "preView" ? "none" : "";
var tmp = _react["default"].createElement("div", {
className: "ele_Panel_Outer ele_Panel_Outer_Type" + self.state.panelType,
style: {
height: "100%",
width: "100%"
}
}, _react["default"].createElement("div", {
className: "ele_Panel",
style: {
height: "100%",
width: "100%",
display: curDisplay
}
}, _react["default"].createElement("div", {
className: "eChartPanelDesign_LeftPanel" + (self.state.panelType == 33333 ? "3" : ""),
style: {
height: "100%",
"float": "left"
}
}, leftPanel), _react["default"].createElement("div", {
className: "eChartPanelDesign_EditPanel" + (self.state.panelType == 3 ? "3" : ""),
style: {
height: "100%",
"float": "left"
}
}, rightPanel), settingPanel), _react["default"].createElement("div", {
style: {
width: "100%",
height: "100%",
backgroundColor: eChartCommon.panelDefaultValue.panel2AllBackgroundColor,
display: !!previewContent ? "" : "none"
}
}, previewContent), curOperateModal);
return tmp;
}
}, {
key: "getPanelSaveItems",
value: function getPanelSaveItems(rows) {
var self = this;
var itemArr = [];
rows.forEach(function (rowEle) {
rowEle.cols.forEach(function (colEle) {
var item = {};
if (colEle.widgetType == "rows") {
var subItemArr = self.getPanelSaveItems(colEle.widgetValue);
itemArr = _.concat(itemArr, subItemArr);
} else if (colEle.widgetType == "chart") {
item.billnum = colEle.panelChartConfig.billnum;
item.groupSchemaId = colEle.panelChartConfig.groupSchemaId;
item.itemKey = colEle.panelChartConfig.chartKey;
item.condition = JSON.stringify(colEle.panelChartConfig.condition);
colEle.panelChartConfig.condition = undefined;
itemArr.push(item);
} else if (colEle.widgetType == "sum") {
item.billnum = colEle.sumConfig.billnum;
item.groupSchemaId = colEle.sumConfig.groupSchemaId;
item.itemKey = colEle.sumConfig.chartKey;
item.condition = JSON.stringify(colEle.sumConfig.condition);
colEle.sumConfig.condition = undefined;
itemArr.push(item);
}
});
});
return itemArr;
}
}, {
key: "savePanel",
value: function savePanel(bOK, bSaveOther) {
var self = this;
if (bOK) {
var editPanel = _.cloneDeep(self.state.editPanel);
if (!editPanel.name) {
cb.utils.alert("名称不可为空。");
return;
}
editPanel.name = eChartCommon.checkTempName(editPanel.name);
eChartCommon.LogChartInfo("大屏方案 Save editPanel ", JSON.stringify(editPanel), 900);
var panelLayOutConfig = editPanel.panelLayOutConfig;
var params = {};
if (bSaveOther) {
self.state.editType = "add";
}
params.type = self.state.panelType;
if (self.state.editType == "edit") {
params.id = editPanel.id;
}
params.name = editPanel.name;
var items = self.getPanelSaveItems(panelLayOutConfig.rows);
if (items.length > 0) params.items = items;else params.items = [{}];
params.pageLayout = JSON.stringify(editPanel);
eChartCommon.LogChartInfo("大屏方案 Save params ", JSON.stringify(params), 7);
var callback = function callback(json) {
if (json.code === 200) {
cb.utils.alert(self.state.panelType == 1 ? "大屏看板已保存。" : "桌面看板已保存。");
if (self.state.editType == "add") {
var _editPanel = _.cloneDeep(self.state.editPanel);
_editPanel.id = json.data;
self.setState({
editPanel: _editPanel,
editType: "edit"
});
}
} else {
eChartCommon.LogChartInfo("大屏方案保存失败。err ", json.message, 999);
}
};
eChartProxy.doProxy(eChartProxy.url.saveReportView, 'POST', params, callback);
} else {
self.cancelOpereate();
}
}
}, {
key: "getLeftPanel",
value: function getLeftPanel() {
var _this2 = this;
var self = this;
var leftPanelIndex = self.state.leftPanelIndex;
var editPanel = self.state.editPanel || {};
var content = [];
content.push(_react["default"].createElement(_row8["default"], {
className: "tab"
}, self.state.panelType == 1 ? _react["default"].createElement(_baseui.Button, {
type: leftPanelIndex == 1 ? "primary" : "default",
onClick: function onClick() {
return self.setState({
leftPanelIndex: 1
});
}
}, "\u6837\u5F0F") : _react["default"].createElement(_baseui.Button, {
type: leftPanelIndex == 3 ? "primary" : "default",
onClick: function onClick() {
return self.setState({
leftPanelIndex: 3
});
}
}, "\u6837\u5F0F"), _react["default"].createElement(_baseui.Button, {
type: leftPanelIndex == 2 ? "primary" : "default",
onClick: function onClick() {
return self.setState({
leftPanelIndex: 2
});
}
}, "\u90E8\u4EF6")));
if (leftPanelIndex == 1) {
content.push(_react["default"].createElement(_row8["default"], {
className: "title"
}, "\u5E03\u5C40"));
var templateContent = self.getTemplates();
if (templateContent) content.push(templateContent);
content.push(_react["default"].createElement(_row8["default"], {
className: "title"
}, "\u663E\u793A\u6BD4\u4F8B"));
content.push(_react["default"].createElement(_row8["default"], {
className: "proportion"
}, _react["default"].createElement(_baseui.Button, {
type: editPanel.panelWidthScale == 16 && editPanel.panelHeightScale == 9 ? "primary" : "default",
onClick: function onClick() {
return self.setPanelConfigValueArr([{
name: "panelWidthScale",
value: 16
}, {
name: "panelHeightScale",
value: 9
}]);
}
}, "16:9", _react["default"].createElement("i", null, " (\u63A8\u8350)")), _react["default"].createElement(_baseui.Button, {
type: editPanel.panelWidthScale == 4 && editPanel.panelHeightScale == 3 ? "primary" : "default",
onClick: function onClick() {
return self.setPanelConfigValueArr([{
name: "panelWidthScale",
value: 4
}, {
name: "panelHeightScale",
value: 3
}]);
}
}, "4:3")));
content.push(_react["default"].createElement(_row8["default"], {
className: "wide-high"
}, _react["default"].createElement(_col["default"], {
className: "little-title"
}, "\u5BBD\u5EA6/\u9AD8\u5EA6"), _react["default"].createElement(_col["default"], {
className: "nums"
}, _react["default"].createElement(_baseui.Input, {
value: editPanel.panelWidthScale,
onChange: function onChange(e) {
return self.setPanelConfigValue("panelWidthScale", e.target.value);
}
})), _react["default"].createElement(_col["default"], {
className: "bi"
}, ":"), _react["default"].createElement(_col["default"], {
className: "nums"
}, _react["default"].createElement(_baseui.Input, {
value: editPanel.panelHeightScale,
onChange: function onChange(e) {
return self.setPanelConfigValue("panelHeightScale", e.target.value);
}
}))));
content.push(_react["default"].createElement(_row8["default"], {
className: "title"
}, "\u80CC\u666F\u8272"));
var colorArr = eChartCommon.getBackColorArr();
var tmpContent = [];
colorArr.forEach(function (ele, index) {
return tmpContent.push(_react["default"].createElement(_baseui.Button, {
className: "backgroundcolor" + index + " " + (editPanel.backgroundColor == ele.color ? "backgroundcolorselected" : ""),
style: {
backgroundColor: ele.color
},
onClick: function onClick() {
return self.setBackGroundColor(ele);
},
onMouseEnter: function onMouseEnter() {
return _this2.onMouseEnter(ele.color);
},
onMouseLeave: function onMouseLeave() {
return _this2.onMouseLeave();
}
}, editPanel.backgroundColor == ele.color || self.state.focusedKey == ele.color ? _react["default"].createElement(_baseui.Icon, {
type: "xuanzhong1-copy"
}) : ""));
});
tmpContent.push(_react["default"].createElement("div", {
onClick: function onClick() {
return self.setBackGroundColor("");
}
}, _react["default"].createElement(_SvgIcon["default"], {
type: "qingchubeijingse"
})));
content.push(_react["default"].createElement(_row8["default"], {
className: "background-color"
}, tmpContent));
content.push(_react["default"].createElement(_row8["default"], {
className: "bg-style"
}, _react["default"].createElement("span", null, "\u80CC\u666F\u98CE\u683C"), _react["default"].createElement("span", null, _react["default"].createElement(_baseui.Button, {
onClick: function onClick() {
return self.setBackStyle();
}
}, "\u6E05\u9664"))));
tmpContent = [];
self.state.backStyleArr.forEach(function (ele) {
var isSelected = editPanel.backStyleKey && editPanel.backStyleKey == ele.backStyleKey;
var isFocused = self.state.focusedKey == ele.backStyleKey ? true : false;
var className = "eChartPanelDesign_" + ele.backStyleKey;
className = className + " " + (isSelected ? "eChartPanelDesign_BackStyle_Selected" : "eChartPanelDesign_BackStyle_UnSelected");
tmpContent.push(_react["default"].createElement(_col["default"], {
onClick: function onClick() {
return self.setBackStyle(ele);
},
onMouseEnter: function onMouseEnter() {
return _this2.onMouseEnter(ele.backStyleKey);
},
onMouseLeave: function onMouseLeave() {
return _this2.onMouseLeave();
}
}, _react["default"].createElement("div", {
className: className
}, _react["default"].createElement("img", {
src: ele.icon
}), isSelected || isFocused ? _react["default"].createElement(_SvgIcon["default"], {
type: "xuanzhong1-copy"
}) : ""), _react["default"].createElement("div", null, ele.name)));
});
content.push(_react["default"].createElement(_row8["default"], {
colCount: 12,
className: "bg-style-list"
}, tmpContent));
} else if (leftPanelIndex == 2) {
if (self.state.panelType == 1) {
content.push(_react["default"].createElement("div", {
onClick: function onClick() {
return self.setColType("setImageText");
},
className: "chart-img clearfix"
}, _react["default"].createElement(_SvgIcon["default"], {
type: "tuwen"
}), _react["default"].createElement("div", null, "\u56FE\u6587"), _react["default"].createElement("div", {
className: "icon-jia"
}, _react["default"].createElement(_baseui.Icon, {
type: "jia"
}))));
}
content.push(_react["default"].createElement("div", {
onClick: function onClick() {
return self.setColType("setChart");
},
className: "chart-img clearfix"
}, _react["default"].createElement(_SvgIcon["default"], {
type: "tubiao"
}), _react["default"].createElement("div", null, "\u56FE\u8868"), _react["default"].createElement("div", {
className: "icon-jia"
}, _react["default"].createElement(_baseui.Icon, {
type: "jia"
}))));
content.push(_react["default"].createElement("div", {
onClick: function onClick() {
return self.setColType("setSum");
},
className: "chart-img clearfix"
}, _react["default"].createElement(_SvgIcon["default"], {
type: "huizong"
}), _react["default"].createElement("div", null, "\u6C47\u603B"), _react["default"].createElement("div", {
className: "icon-jia"
}, _react["default"].createElement(_baseui.Icon, {
type: "jia"
}))));
if (self.state.panelType == 2) {
content.push(_react["default"].createElement("div", {
onClick: function onClick() {
return self.setComponent(eChartCommon.components.commonFunc);
},
className: "chart-img clearfix"
}, _react["default"].createElement(_SvgIcon["default"], {
type: "changyonggongnengcopy"
}), _react["default"].createElement("div", null, "\u5E38\u7528\u529F\u80FD"), _react["default"].createElement("div", {
className: "icon-jia"
}, _react["default"].createElement(_baseui.Icon, {
type: "jia"
}))));
}
if (self.state.panelType == 2) {
content.push(_react["default"].createElement("div", {
onClick: function onClick() {
return self.setComponent(eChartCommon.components.notice);
},
className: "chart-img clearfix"
}, _react["default"].createElement(_SvgIcon["default"], {
type: "gonggaozujiancopy"
}), _react["default"].createElement("div", null, "\u516C\u544A"), _react["default"].createElement("div", {
className: "icon-jia"
}, _react["default"].createElement(_baseui.Icon, {
type: "jia"
}))));
}
if (self.state.panelType == 1) {
content.push(_react["default"].createElement("div", {
onClick: function onClick() {
return self.setComponent(eChartCommon.components.weather);
},
className: "chart-img clearfix"
}, _react["default"].createElement(_SvgIcon["default"], {
type: "riqishijian"
}), _react["default"].createElement("div", null, "\u5929\u6C14"), _react["default"].createElement("div", {
className: "icon-jia"
}, _react["default"].createElement(_baseui.Icon, {
type: "jia"
}))));
content.push(_react["default"].createElement("div", {
onClick: function onClick() {
return self.setComponent(eChartCommon.components.datetime);
},
className: "chart-img clearfix"
}, _react["default"].createElement(_SvgIcon["default"], {
type: "riqishijian"
}), _react["default"].createElement("div", null, "\u65E5\u671F\u65F6\u95F4"), _react["default"].createElement("div", {
className: "icon-jia"
}, _react["default"].createElement(_baseui.Icon, {
type: "jia"
}))));
}
} else if (leftPanelIndex == 3) {
if (self.state.panelType == 2) {
content.push(_react["default"].createElement(_row8["default"], {
className: "title"
}, "\u5E03\u5C40"));
var _templateContent = self.getTemplates();
if (_templateContent) {
content.push(_templateContent);
}
}
content.push(_react["default"].createElement(_row8["default"], {
className: "title"
}, "\u57FA\u7840\u884C\u64CD\u4F5C"));
content.push(_react["default"].createElement(_row8["default"], null, _react["default"].createElement("div", {
className: "eChartPanelDesign_RowOperate",
onClick: function onClick() {
return self.handleTemplate2Row(1);
}
}, _react["default"].createElement(_SvgIcon["default"], {
type: "dingbucharuhang"
}), _react["default"].createElement("div", null, "\u9876\u90E8\u63D2\u5165\u884C")), _react["default"].createElement("div", {
className: "eChartPanelDesign_RowOperate",
onClick: function onClick() {
return self.handleTemplate2Row(3);
}
}, _react["default"].createElement(_SvgIcon["default"], {
type: "dibucharuhang"
}), _react["default"].createElement("div", null, "\u5E95\u90E8\u63D2\u5165\u884C")), _react["default"].createElement("div", {
className: "eChartPanelDesign_RowOperate",
onClick: function onClick() {
return self.handleTemplate2Row(2);
}
}, _react["default"].createElement(_SvgIcon["default"], {
type: "ciqiancharuhang"
}), _react["default"].createElement("div", null, "\u6B64\u524D\u63D2\u5165\u884C")), _react["default"].createElement("div", {
className: "eChartPanelDesign_RowOperate",
onClick: function onClick() {
return self.handleTemplate2Row(4);
}
}, _react["default"].createElement(_SvgIcon["default"], {
type: "shangyidangqianhang"
}), _react["default"].createElement("div", null, "\u4E0A\u79FB\u5F53\u524D\u884C")), _react["default"].createElement("div", {
className: "eChartPanelDesign_RowOperate",
onClick: function onClick() {
return self.handleTemplate2Row(5);
}
}, _react["default"].createElement(_SvgIcon["default"], {
type: "xiayidangqianhang"
}), _react["default"].createElement("div", null, "\u4E0B\u79FB\u5F53\u524D\u884C")), _react["default"].createElement("div", {
className: "eChartPanelDesign_RowOperate",
onClick: function onClick() {
return self.handleTemplate2Row(0);
}
}, _react["default"].createElement(_SvgIcon["default"], {
type: "shanchudangqianhang"
}), _react["default"].createElement("div", null, "\u5220\u9664\u5F53\u524D\u884C"))));
}
return content;
}
}, {
key: "handleTemplate2Row",
value: function handleTemplate2Row(type) {
var self = this;
var editPanel = _.cloneDeep(self.state.editPanel);
var rows = editPanel.panelLayOutConfig.rows;
var selectedColKey;
var selectedBaseRows;
var selectedBaseIndex = 0;
selectedColKey = self.state.selectedColKey;
if (type == 0 || type == 2 || type == 4 || type == 5 || type == 6) {
if (!selectedColKey) {
cb.utils.alert('请选择行', 'error');
return;
}
}
if (selectedColKey) {
rows.forEach(function (rowEle) {
var cols = rowEle.cols;
cols.forEach(function (colEle) {
if ((colEle.bBaseCol == true || colEle.bBaseRows == true) && colEle.widgetType == "rows") {
var innerRows = colEle.widgetValue;
innerRows.forEach(function (innerRowEle, innerIndex) {
var colsInfo = self.getColParentInfo([innerRowEle], selectedColKey);
if (_.isEmpty(colsInfo) == false) {
selectedBaseIndex = innerIndex;
selectedBaseRows = innerRows;
}
});
}
});
});
}
if (type == 0 && selectedBaseRows.length <= 1) {
cb.utils.alert('至少保留一行。', 'error');
return;
}
if ((type == 1 || type == 3) && !selectedBaseRows) {
rows.forEach(function (rowEle) {
var cols = rowEle.cols;
cols.forEach(function (colEle) {
if ((colEle.bBaseCol == true || colEle.bBaseRows == true) && colEle.widgetType == "rows") {
var innerRows = colEle.widgetValue;
selectedBaseIndex = 0;
selectedBaseRows = innerRows;
}
});
});
}
if (!selectedBaseRows) {
cb.utils.alert('没有查找到处理行需要的信息。', 'error');
return;
}
eChartCommon.LogChartInfo("当前选择的行的Index ", selectedBaseIndex, 900);
self.pushState();
if (type == 0) {
selectedBaseRows.splice(selectedBaseIndex, 1);
} else if (type == 1) {
var row = eChartCommon.getPanelLayOutTemplateRow2();
selectedBaseRows.splice(0, 0, row);
} else if (type == 2) {
var _row = eChartCommon.getPanelLayOutTemplateRow2();
selectedBaseRows.splice(selectedBaseIndex, 0, _row);
} else if (type == 6) {
var _row2 = eChartCommon.getPanelLayOutTemplateRow2();
if (selectedBaseIndex == selectedBaseRows.length - 1) selectedBaseRows.push(_row2);else selectedBaseRows.splice(selectedBaseIndex + 1, 0, _row2);
} else if (type == 3) {
var _row3 = eChartCommon.getPanelLayOutTemplateRow2();
selectedBaseRows.push(_row3);
} else if (type == 4) {
if (selectedBaseIndex > 0) {
var tmp = selectedBaseRows.splice(selectedBaseIndex, 1);
selectedBaseRows.splice(selectedBaseIndex - 1, 0, tmp[0]);
}
} else if (type == 5) {
if (selectedBaseIndex < selectedBaseRows.length - 1) {
var _tmp = selectedBaseRows.splice(selectedBaseIndex + 1, 1);
selectedBaseRows.splice(selectedBaseIndex, 0, _tmp[0]);
}
}
eChartCommon.reCalcTemplate2Height2AndRowsHeight(editPanel);
self.setState({
editPanel: editPanel
});
}
}, {
key: "onMouseEnter",
value: function onMouseEnter(focusedKey) {
this.setState({
focusedKey: focusedKey
});
}
}, {
key: "onMouseLeave",
value: function onMouseLeave() {
this.setState({
focusedKey: ""
});
}
}, {
key: "setComponent",
value: function setComponent(component) {
var self = this;
var colEle = self.getSelectedCol();
if (_.isEmpty(colEle)) {
cb.utils.alert("请选择区域。");
} else if (colEle.widgetType == "none") {
colEle.widgetType = component.widgetType;
colEle.componentConfig = component.componentConfig;
if (component.componentConfig.subType == "datetime") this.setState({
curOperateType: "setComponent_DateTime"
});else if (component.componentConfig.subType == "notice") this.setState({
curOperateType: "setComponent_Notice"
});else this.setState({});
} else {
cb.utils.alert("当前区域已经有控件，请先清除。");
}
}
}, {
key: "setColType",
value: function setColType(operateType) {
var self = this;
var colEle = self.getSelectedCol();
if (_.isEmpty(colEle)) {
cb.utils.alert("请选择区域。");
} else if (colEle.widgetType == "none") {
if (!!this.state.selectedColKey) this.setState({
curOperateType: operateType,
hideSettingPanel: 0
});
} else if (self.state.panelType == 3 && self.state.hideSettingPanel != 0) {
this.setState({
hideSettingPanel: 0
});
} else {
cb.utils.alert("当前区域已经有控件，请先清除。");
}
}
}, {
key: "setBackGroundColor",
value: function setBackGroundColor(ele) {
var editPanel = this.state.editPanel;
if (this.state.editPanel.backgroundColor == ele.color) {
editPanel.backColorKey = "";
editPanel.backgroundColor = "";
editPanel.skinKey_BackColor = "";
} else {
editPanel.backColorKey = ele.backColorKey;
editPanel.backgroundColor = ele.color;
editPanel.skinKey_BackColor = ele.skinKey;
}
this.setState();
}
}, {
key: "getSettingPanel",
value: function getSettingPanel() {
var obj1;
var obj2;
var self = this;
var curCol = self.getSelectedCol();
var curOperateType = self.state.curOperateType;
if (self.state.hideSettingPanel == 0) {
if (curOperateType == "setChart" || curCol.widgetType == "chart") {
obj1 = self.getDesignColType_Chart(curCol, true);
obj2 = self.getDesignColType_Sum(undefined, false);
} else if (curOperateType == "setSum" || curCol.widgetType == "sum") {
obj1 = self.getDesignColType_Chart(undefined, false);
obj2 = self.getDesignColType_Sum(curCol, true);
}
}
var bHide = _.isEmpty(obj1) && _.isEmpty(obj2);
return _react["default"].createElement("div", {
className: "eChartPanelDesign_SettingPanel3 eChartPanelDesign_SettingPanel_" + (bHide ? "Hide" : "Show"),
style: {
height: "100%",
"float": "left"
}
}, _react["default"].createElement("div", {
className: "eChartPanelDesign_SettingPanel_Outer eChartPanelDesign_SettingPanel_" + (bHide ? "Hide2" : "Show2"),
style: {
display: self.state.hideSettingPanel == -1 ? "none" : ""
}
}, _react["default"].createElement("div", {
className: "eChartPanelDesign_SettingPanelTitle"
}, "\u4FE1\u606F\u8BBE\u7F6E"), _react["default"].createElement("div", {
className: "icon-guanbi1",
onClick: function onClick() {
return self.hideSettingPanel();
}
}, _react["default"].createElement(_baseui.Icon, {
type: "guanbi1"
})), obj1, obj2));
}
}, {
key: "selectCol",
value: function selectCol(selectedColKey, widgetType) {
if (this.state.selectedColKey != selectedColKey) {
var hideSettingPanel = this.state.hideSettingPanel;
if (hideSettingPanel == -1 && widgetType != "none") {
hideSettingPanel = 0;
}
this.setState({
selectedColKey: selectedColKey,
curOperateType: "",
hideSettingPanel: hideSettingPanel
});
}
}
}, {
key: "getEditPanel_Mobile",
value: function getEditPanel_Mobile() {
var self = this;
var panelConfig = _.cloneDeep(self.state.editPanel);
var content = _react["default"].createElement(_eChartPanelDisplay3_Design["default"], {
isInDesign: true,
panelId: undefined,
panelConfig: panelConfig,
selectCol: function selectCol(selectedColKey, widgetType) {
return self.selectCol(selectedColKey, widgetType);
},
doSplit: function doSplit(bOK, info, selectedColKey) {
return self.doSplit(bOK, info, selectedColKey);
},
clearColTypeInner: function clearColTypeInner(colEle) {
return self.clearColTypeInner(colEle);
}
});
return _react["default"].createElement("div", {
style: {
height: "100%",
width: "100%"
}
}, _react["default"].createElement("div", {
className: "template3-name",
style: {
width: "100%",
height: "auto"
}
}, _react["default"].createElement("span", null, "\u540D\u79F0:"), _react["default"].createElement("span", null, _react["default"].createElement(_baseui.Input, {
value: self.state.editPanel.name,
placeholder: "\u8BF7\u8F93\u5165",
onChange: function onChange(e) {
return self.setPanelConfigValue("name", e.target.value);
}
}))), _react["default"].createElement("div", {
className: "template3-content_outer "
}, _react["default"].createElement("div", {
className: "template3-content panelLayer3-all"
}, content)), _react["default"].createElement("div", {
className: "btn-toolbar-bottom btn-group-bottom bottom-toolbar eChartPanelDesign_EditPanel_bottom"
}, _react["default"].createElement(_baseui.Button, {
className: "ant-btn ant-btn-primary",
onClick: function onClick() {
return self.savePanel(true);
}
}, "\u786E\u5B9A"), _react["default"].createElement(_baseui.Button, {
className: "ant-btn",
onClick: function onClick() {
return self.cancelSplit();
}
}, "\u64A4\u9500\u62C6\u5206"), _react["default"].createElement(_baseui.Button, {
className: "ant-btn",
onClick: function onClick() {
return self.savePanel(false);
}
}, "\u53D6\u6D88")));
}
}, {
key: "getEditPanel",
value: function getEditPanel() {
var self = this;
var editPanel = self.state.editPanel;
var content;
var style = self.getStyle_Edit("all", "", editPanel);
var innerStyle = self.getInnerStyle_Edit("all", "", editPanel);
content = self.getDisplay_Edit(editPanel.panelLayOutConfig.rows);
return _react["default"].createElement("div", {
style: {
height: "100%",
width: "100%"
}
}, _react["default"].createElement("div", {
className: "template-name"
}, _react["default"].createElement("span", {
style: {
"float": "left"
}
}, "\u540D\u79F0:"), _react["default"].createElement("span", {
style: {
"float": "left"
}
}, _react["default"].createElement(_baseui.Input, {
value: editPanel.name,
placeholder: "\u8BF7\u8F93\u5165",
onChange: function onChange(e) {
return self.setPanelConfigValue("name", e.target.value);
}
}))), _react["default"].createElement("div", {
className: "template-content panelLayer-all"
}, _react["default"].createElement("div", {
className: "panelLayer-all-outer",
style: style
}, _react["default"].createElement("div", {
className: "panelLayer-all-inner",
style: innerStyle
}, content))), _react["default"].createElement("div", {
className: "btn-toolbar-bottom btn-group-bottom bottom-toolbar eChartPanelDesign_EditPanel_bottom"
}, _react["default"].createElement(_baseui.Button, {
className: "ant-btn ant-btn-primary",
onClick: function onClick() {
return self.savePanel(true);
}
}, "\u786E\u5B9A"), _react["default"].createElement(_baseui.Button, {
className: "ant-btn ant-btn-primary",
onClick: function onClick() {
return self.preView(true);
}
}, "\u9884\u89C8"), _react["default"].createElement(_baseui.Button, {
className: "ant-btn",
onClick: function onClick() {
return self.cancelSplit();
}
}, "\u64A4\u9500\u62C6\u5206"), _react["default"].createElement(_baseui.Button, {
className: "ant-btn",
onClick: function onClick() {
return self.savePanel(false);
}
}, "\u53D6\u6D88")));
}
}, {
key: "setBackStyle",
value: function setBackStyle(ele) {
var editPanel = this.state.editPanel;
if (ele) {
editPanel.backStyleKey = ele.backStyleKey;
editPanel.skinKey_BackStyle = ele.skinKey;
editPanel.backgroundImage = ele.backgroundImage;
} else {
editPanel.backStyleKey = "";
editPanel.skinKey_BackStyle = "";
editPanel.backgroundImage = "";
}
this.setState({
editPanel: editPanel
});
}
}, {
key: "setPanelConfigValue",
value: function setPanelConfigValue(name, value) {
var editPanel = _.cloneDeep(this.state.editPanel);
editPanel[name] = value;
this.setState({
editPanel: editPanel
});
}
}, {
key: "setPanelConfigValueArr",
value: function setPanelConfigValueArr(arr) {
var editPanel = _.cloneDeep(this.state.editPanel);
arr.forEach(function (ele) {
editPanel[ele.name] = ele.value;
});
this.setState({
editPanel: editPanel
});
}
}, {
key: "getRemainWidth",
value: function getRemainWidth() {
var scale = {};
var editPanel = this.state.editPanel;
if (process.env.__CLIENT__ === true) {
var clientWidth = document.body.clientWidth;
var clientHeight = document.body.clientHeight;
scale.width = Number(clientWidth) - (1366 - 920);
scale.height = Number(clientHeight) - (637 - 450);
if (Number(scale.width) < 920) scale.width = 920;
if (Number(scale.height) < 450) scale.height = 450;
eChartCommon.LogChartInfo("", "clientWidth = " + clientWidth + " clientHeight = " + clientHeight + " scale = " + JSON.stringify(scale), 12);
if (editPanel.type == "2" && editPanel.height2) {
scale.height = scale.height * editPanel.height2;
}
}
return scale;
}
}, {
key: "calcPanelWidth",
value: function calcPanelWidth(style, maxWidth, maxHeight, postFix) {
var editPanel = this.state.editPanel;
var panelWidthScale = editPanel.panelWidthScale;
var panelHeightScale = editPanel.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;
}
}, {
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';
} else if (eleType == "all") {
var scale = this.getRemainWidth();
this.calcPanelWidth(style, scale.width, scale.height, "px");
}
style.border = "0px";
if (eChartDemoData.demoConfig.isShowAllMargin == true || eleType == "all" || 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 = "";
var borderWidth = "";
var borderColor = "";
if (ele.borderWidth == "0px") {
borderType = "solid";
borderWidth = eChartCommon.panelDefaultValue.borderWidth;
borderColor = "transparent";
} else {
borderType = "dashed";
borderWidth = ele.borderWidth ? ele.borderWidth : eChartCommon.panelDefaultValue.borderWidth;
borderColor = eChartCommon.panelDefaultValue.borderColor;
}
if (eleType == "col" && innerType == "control" && (this.getSelectedColKey() == ele.colKey || this.state.focusedKey == ele.colKey)) {
borderType = "solid";
borderWidth = eChartCommon.panelDefaultValue.borderWidth;
borderColor = "#cccccc";
borderColor = "#969BA4";
}
style.border = borderWidth + " " + borderType + " " + borderColor;
} else {
style.border = "0px";
}
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: "getDesignToolBar",
value: function getDesignToolBar(colEle) {
var tools = [];
var self = this;
var widgetType = colEle.widgetType;
var bNeedDel = false;
if (widgetType == "none") {
tools.push(_react["default"].createElement(_eChartPanelSplit["default"], {
colEle: colEle,
doFunc: function doFunc(bOK, info) {
return self.doSplit(bOK, info);
},
showContent: function showContent(bOK, colKey) {
return self.showSplitCard(bOK, colKey);
},
selectedColKey: self.state.selectedColKey,
curOperateType: self.state.curOperateType,
skinConfig: self.skinConfig,
panelType: self.state.panelType
}));
} else {
if (colEle.widgetType != "component" || colEle.componentConfig.subType == "datetime" || colEle.componentConfig.subType == "notice") {
tools.push(_react["default"].createElement("div", {
title: "\u7F16\u8F91",
style: {
cursor: "pointer",
color: self.skinConfig ? self.skinConfig.designSkin.textColor : undefined,
zIndex: "999"
},
className: "qingchu-btn edit-btn",
onClick: function onClick() {
return self.modifyCol(colEle);
}
}, _react["default"].createElement("div", {
className: "qingchu-btn-bg"
}, _react["default"].createElement(_SvgIcon["default"], {
type: "edit"
}))));
}
bNeedDel = true;
}
if (!!colEle.backgroundImage) {
tools.push(_react["default"].createElement("div", {
title: "\u6E05\u9664\u80CC\u666F\u56FE",
style: {
cursor: "pointer",
color: self.skinConfig ? self.skinConfig.designSkin.textColor : undefined,
zIndex: "999"
},
className: "qingchu-btn",
onClick: function onClick() {
return self.doUpload(colEle, "");
}
}, "\u6E05\u9664\u80CC\u666F\u56FE"));
} else if (self.state.panelType == 1) {
tools.push(_react["default"].createElement(_fileUpload["default"], {
doUpload: function doUpload(fileList) {
return self.doUpload(colEle, fileList);
},
showUploadList: false,
multiple: false,
bShowName: true,
showName: "",
showNameColor: self.skinConfig ? self.skinConfig.designSkin.textColor : undefined,
showSVG: "export",
fileType: "pic",
hideDesc: true,
showTitle: "\u4E0A\u4F20\u80CC\u666F\u56FE"
}));
}
if (bNeedDel) tools.push(_react["default"].createElement("div", {
title: "\u6E05\u9664",
style: {
cursor: "pointer",
color: self.skinConfig ? self.skinConfig.designSkin.textColor : undefined,
zIndex: "999"
},
className: "qingchu-btn del-btn",
onClick: function onClick() {
return self.clearColType(colEle);
}
}, _react["default"].createElement("div", {
className: "qingchu-btn-bg"
}, " ", _react["default"].createElement(_SvgIcon["default"], {
type: "delete"
}))));
tools.push(_react["default"].createElement("div", {
style: {
display: "none"
}
}, " ", colEle.colKey, " "));
var isSelected = this.getSelectedColKey() == colEle.colKey ? true : false;
var isFocused = this.state.focusedKey == colEle.colKey ? true : false;
return _react["default"].createElement("div", {
className: colEle.backgroundImage ? "panelLayer-col-hasbackgroundimage" : "panelLayer-col-nobackgroundimage",
style: {
display: isFocused ? "" : "none"
}
}, tools.reverse());
}
}, {
key: "modifyCol",
value: function modifyCol(colEle) {
var selectedColKey = colEle.colKey;
var curOperateType = "";
switch (colEle.widgetType) {
case "imagetext":
curOperateType = "setImageText";
break;
case "chart":
curOperateType = "setChart";
break;
case "sum":
curOperateType = "setSum";
break;
case "component":
if (colEle.componentConfig.subType == "datetime") curOperateType = "setComponent_DateTime";
if (colEle.componentConfig.subType == "notice") curOperateType = "setComponent_Notice";
break;
default:
}
this.setState({
selectedColKey: selectedColKey,
curOperateType: curOperateType
});
}
}, {
key: "getDisplay_Edit",
value: function getDisplay_Edit(rows) {
var _this3 = this;
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 onClickFunc;
var toolbar = self.getDesignToolBar(colEle);
if (colEle.widgetType == "none" || colEle.widgetType == "component" || colEle.widgetType == "sum" || colEle.widgetType == "chart" || colEle.widgetType == "imagetext") {
onClickFunc = function onClickFunc() {
return self.setState({
selecte