kre-form
Version:
本项目由 Angular8+ 编写的表单设计器和表单应用，所有的配置都是 JSON 结构体组成,PC 端是基于 ANT 组件库封装
1,059 lines (1,051 loc) • 71.2 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/forms'), require('@angular/cdk/drag-drop'), require('ng-zorro-antd/dropdown'), require('ng-zorro-antd/tabs'), require('ng-zorro-antd/radio'), require('ng-zorro-antd/select'), require('ng-zorro-antd/checkbox'), require('ng-zorro-antd/button'), require('ng-zorro-antd/empty'), require('ng-zorro-antd/input'), require('ng-zorro-antd/grid'), require('ng-zorro-antd/input-number'), require('ng-zorro-antd/modal'), require('ng-zorro-antd/message'), require('lodash'), require('@angular/core'), require('echarts')) :
typeof define === 'function' && define.amd ? define('@kre-form/abc/src/lib/board', ['exports', '@angular/common', '@angular/forms', '@angular/cdk/drag-drop', 'ng-zorro-antd/dropdown', 'ng-zorro-antd/tabs', 'ng-zorro-antd/radio', 'ng-zorro-antd/select', 'ng-zorro-antd/checkbox', 'ng-zorro-antd/button', 'ng-zorro-antd/empty', 'ng-zorro-antd/input', 'ng-zorro-antd/grid', 'ng-zorro-antd/input-number', 'ng-zorro-antd/modal', 'ng-zorro-antd/message', 'lodash', '@angular/core', 'echarts'], factory) :
(factory((global['kre-form'] = global['kre-form'] || {}, global['kre-form'].abc = global['kre-form'].abc || {}, global['kre-form'].abc.src = global['kre-form'].abc.src || {}, global['kre-form'].abc.src.lib = global['kre-form'].abc.src.lib || {}, global['kre-form'].abc.src.lib.board = {}),global.ng.common,global.ng.forms,global.ng.cdk['drag-drop'],global.dropdown,global.tabs,global.radio,global.select,global.checkbox,global.button,global.empty,global.input,global.grid,global.inputNumber,global.modal,global.message,global._,global.ng.core,global.echarts));
}(this, (function (exports,common,forms,dragDrop,dropdown,tabs,radio,select,checkbox,button,empty,input,grid,inputNumber,modal,message,_,core,echarts) { 'use strict';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var BoardComponent = /** @class */ (function () {
function BoardComponent(message$$1, modalService) {
this.message = message$$1;
this.modalService = modalService;
this.changeDataSource = new core.EventEmitter();
this.changeEchartsParams = new core.EventEmitter();
this.isLight = false;
}
/**
* @return {?}
*/
BoardComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () { };
/**
* @param {?} changes
* @return {?}
*/
BoardComponent.prototype.ngOnChanges = /**
* @param {?} changes
* @return {?}
*/
function (changes) {
for (var propName in changes) {
/** @type {?} */
var chng = changes[propName];
if (propName === "term") {
if (!chng.currentValue || JSON.stringify(chng.currentValue) === "{}") {
this.term = {
row: [],
target: [],
condition: [],
};
}
}
if (propName === "chartOptions") {
if (chng.currentValue) {
// @ts-ignore
this.echartsList = this.chartOptions.dataset["source"];
}
else {
this.chartOptions = {};
}
}
}
};
/**
* @param {?} e
* @return {?}
*/
BoardComponent.prototype.editChartOptions = /**
* @param {?} e
* @return {?}
*/
function (e) {
this.chartOptions = e;
if (this.echartsList.length > 0) {
(( /** @type {?} */(this.chartOptions["series"]))).splice(1, (( /** @type {?} */(this.chartOptions["series"]))).length - 1);
for (var i = 0; i < this.echartsList[0].length - 2; i++) {
if (this.chartOptions["series"]) {
this.chartOptions["series"].push(this.chartOptions["series"][0]);
}
}
}
};
/**
* @param {?} e
* @return {?}
*/
BoardComponent.prototype.getEchartShape = /**
* @param {?} e
* @return {?}
*/
function (e) {
this.editChartOptions(e.chartOption);
if (this.echartsList.length > 0) {
Object.assign(this.chartOptions, {
dataset: {
source: this.echartsList,
},
});
}
this.chartOptions = Object.assign({}, this.chartOptions);
};
/**
* @param {?} e
* @return {?}
*/
BoardComponent.prototype.getEchartOptions = /**
* @param {?} e
* @return {?}
*/
function (e) {
this.editChartOptions(e);
this.chartOptions = Object.assign({}, this.chartOptions);
};
/**
* @param {?} event
* @return {?}
*/
BoardComponent.prototype.drop = /**
* @param {?} event
* @return {?}
*/
function (event) {
if (event.previousContainer === event.container) {
dragDrop.moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
}
else {
/** @type {?} */
var idx = event.container.data.indexOf(event.previousContainer.data[event.previousIndex]);
if (idx != -1) {
this.message.create("error", "标签不能重复");
return; //if item exist
}
if (event.container.id == "row" && this.term.row.length > 1) {
this.message.create("error", "维度不能超过2个");
return;
}
dragDrop.copyArrayItem(event.previousContainer.data, event.container.data, event.previousIndex, event.currentIndex);
this.changeEchartsParams.emit(this.term);
}
};
/**
* @return {?}
*/
BoardComponent.prototype.dragStarted = /**
* @return {?}
*/
function () {
this.isLight = true;
};
/**
* @return {?}
*/
BoardComponent.prototype.dragEnded = /**
* @return {?}
*/
function () {
this.isLight = false;
};
/**
* @param {?} item
* @param {?} status
* @return {?}
*/
BoardComponent.prototype.hover = /**
* @param {?} item
* @param {?} status
* @return {?}
*/
function (item, status) {
item.closeBtn = status;
};
/**
* @param {?} e
* @return {?}
*/
BoardComponent.prototype.changeData = /**
* @param {?} e
* @return {?}
*/
function (e) {
this.changeDataSource.emit(e);
};
/**
* @param {?} list
* @param {?} i
* @return {?}
*/
BoardComponent.prototype.closeLabel = /**
* @param {?} list
* @param {?} i
* @return {?}
*/
function (list, i) {
list.splice(i, 1);
};
/**
* @return {?}
*/
BoardComponent.prototype.saveFinalObj = /**
* @return {?}
*/
function () {
this.finalObj = {
dataSourceTitle: this.dataSourceItem.title,
echartsList: this.echartsList,
chartOptions: this.chartOptions,
chartCondition: this.chartCondition,
term: this.term,
};
console.log(JSON.stringify(this.finalObj));
};
/**
* @param {?} e
* @return {?}
*/
BoardComponent.prototype.echartClickHandler = /**
* @param {?} e
* @return {?}
*/
function (e) {
console.log("我在echart上点了啥", e);
};
BoardComponent.decorators = [
{ type: core.Component, args: [{
selector: "demo-board",
template: "<div class=\"header\">\n <button nz-button nzType=\"link\" (click)=\"saveFinalObj()\" class=\"btn-text\">\n \u4FDD\u5B58\u6570\u636E\n </button>\n</div>\n<div class=\"wrap\" cdkDropListGroup>\n <div class=\"sider\">\n <div class=\"sider-title\">\n \u6570\u636E\u6E90\n <button\n nz-button\n nzType=\"link\"\n class=\"btn-text\"\n (click)=\"changeData($event)\"\n >\n \u66F4\u6539\u6570\u636E\u6E90\n </button>\n </div>\n <hr />\n <div *ngIf=\"dataSourceItem\">\n <div class=\"sider-title\">\n <h4>\u5B57\u6BB5</h4>\n <button\n nz-button\n nzType=\"link\"\n class=\"btn-text\"\n style=\"font-size: 1rem\"\n >\n <i class=\"icon-time\"></i>\n </button>\n </div>\n <p>\n <i\n style=\"font-size: 1rem; color: deepskyblue; margin-right: 1rem\"\n class=\"icon-DuoJiLuQu\"\n ></i>\n {{ dataSourceItem.title }}\n </p>\n <div\n cdkDropList\n [cdkDropListData]=\"dataSourceItem.columns\"\n (cdkDropListDropped)=\"drop($event)\"\n >\n <div\n class=\"data-list\"\n *ngFor=\"let item of dataSourceItem.columns\"\n cdkDrag\n (cdkDragStarted)=\"dragStarted()\"\n (cdkDragEnded)=\"dragEnded()\"\n >\n <i class=\"icon-Edit03\"></i>{{ item.title }}\n </div>\n </div>\n </div>\n </div>\n <div class=\"main\">\n <div\n id=\"row\"\n class=\"main-list\"\n [ngClass]=\"isLight ? 'main-list-hover' : ''\"\n cdkDropList\n cdkDropListOrientation=\"horizontal\"\n [cdkDropListData]=\"term.row\"\n (cdkDropListDropped)=\"drop($event)\"\n >\n <div class=\"title\">\u7EF4\u5EA6</div>\n <!--\u7EF4\u5EA6\uFF08\u884C\uFF09 -->\n <div\n *ngFor=\"let item of term.row; let i = index\"\n cdkDrag\n class=\"drag-list\"\n (mouseenter)=\"hover(item, 'on')\"\n (mouseleave)=\"hover(item, 'off')\"\n >\n <div nz-dropdown nzTrigger=\"click\" [nzDropdownMenu]=\"menu\">\n <i class=\"icon-KT-Down\"></i>\n <span>{{ item.title }}</span>\n </div>\n <i\n [ngClass]=\"item.closeBtn == 'on' ? 'on' : 'off'\"\n (click)=\"closeLabel(term.row, i)\"\n class=\"icon-KT-Close\"\n ></i>\n </div>\n </div>\n\n <div\n id=\"target\"\n class=\"main-list\"\n [ngClass]=\"isLight ? 'main-list-hover' : ''\"\n cdkDropList\n cdkDropListOrientation=\"horizontal\"\n [cdkDropListData]=\"term.target\"\n (cdkDropListDropped)=\"drop($event)\"\n >\n <div class=\"title\">\u6307\u6807</div>\n <div\n *ngFor=\"let item of term.target; let i = index\"\n cdkDrag\n class=\"drag-list target-list\"\n (mouseenter)=\"hover(item, 'on')\"\n (mouseleave)=\"hover(item, 'off')\"\n >\n <div nz-dropdown nzTrigger=\"click\" [nzDropdownMenu]=\"menu\">\n <i class=\"icon-FenGeXian\"></i>\n <span>{{ item.title }}</span>\n </div>\n <i\n [ngClass]=\"item.closeBtn == 'on' ? 'on' : 'off'\"\n (click)=\"closeLabel(term.target, i)\"\n class=\"icon-KT-Close\"\n ></i>\n </div>\n </div>\n\n <div\n id=\"condition\"\n class=\"main-list\"\n [ngClass]=\"isLight ? 'main-list-hover' : ''\"\n cdkDropList\n cdkDropListOrientation=\"horizontal\"\n [cdkDropListData]=\"term.condition\"\n (cdkDropListDropped)=\"drop($event)\"\n >\n <div class=\"title\">\u8FC7\u6EE4\u6761\u4EF6</div>\n <div\n *ngFor=\"let item of term.condition; let i = index\"\n cdkDrag\n class=\"drag-list condition-list\"\n (mouseenter)=\"hover(item, 'on')\"\n (mouseleave)=\"hover(item, 'off')\"\n >\n <div nz-dropdown nzTrigger=\"click\" [nzDropdownMenu]=\"menu\">\n <i class=\"icon-FenGeXian\"></i>\n <span>{{ item.title }}</span>\n </div>\n <i\n [ngClass]=\"item.closeBtn == 'on' ? 'on' : 'off'\"\n (click)=\"closeLabel(term.condition, i)\"\n class=\"icon-KT-Close\"\n ></i>\n </div>\n </div>\n <div class=\"echarts-wrap\">\n <nz-empty\n [nzNotFoundContent]=\"contentTpl\"\n *ngIf=\"\n term.row.length <= 0 || term.target.length <= 0 || !chartCondition\n \"\n >\n <ng-template #contentTpl>\n <p *ngIf=\"term.row.length <= 0 || term.target.length <= 0\">\n \u8BF7\u9009\u62E9\u7EF4\u5EA6\u548C\u6307\u6807\n </p>\n <p *ngIf=\"!chartCondition\">\u8BF7\u9009\u62E9\u53F3\u4FA7\u56FE\u6807\u7C7B\u578B</p>\n </ng-template>\n </nz-empty>\n <div *ngIf=\"chartOptions\" style=\"height: 600px\">\n <echart-dom\n [option]=\"chartOptions\"\n (echartClick)=\"echartClickHandler($event)\"\n ></echart-dom>\n </div>\n </div>\n </div>\n <div class=\"right\">\n <echart-options-dom\n [colorList]=\"colorList\"\n [echartsList]=\"echartsList\"\n [(chartCondition)]=\"chartCondition\"\n (echartOptionsChange)=\"getEchartOptions($event)\"\n (echartShapeChange)=\"getEchartShape($event)\"\n ></echart-options-dom>\n </div>\n</div>\n\n<nz-dropdown-menu #menu=\"nzDropdownMenu\">\n <ul nz-menu nzSelectable>\n <li nz-menu-item>1st menu item</li>\n <li nz-menu-item>2nd menu item</li>\n <li nz-menu-item>3rd menu item</li>\n </ul>\n</nz-dropdown-menu>\n",
styles: [":host .header{height:60px;display:flex;justify-content:flex-end;align-items:flex-end}:host .wrap{background:#f4f6f9;display:flex;height:calc(100% - 60px)}:host .wrap .sider{padding:10px 0 0 15px;width:250px;border-right:1px solid #e9e9e9}:host .wrap .sider .btn-text{color:#0db3a6}:host .wrap .sider .data-list{cursor:pointer;font-size:12px;padding:10px 0;display:flex;flex-direction:row;align-items:center;box-sizing:border-box}:host .wrap .sider ul li{list-style:none;cursor:pointer;height:26px;line-height:26px}:host .wrap .sider .sider-title{display:flex;justify-content:space-between;align-items:baseline}:host .wrap .main{padding:10px 15px;flex-grow:1}:host .wrap .main ul li{list-style:none}:host .wrap .main .main-list{line-height:34px;background:#fff;position:relative;margin-bottom:10px;border:1px dashed #d9d9d9;border-radius:3px;display:flex;flex-direction:row;align-items:center}:host .wrap .main .main-list .title{display:inline-block;width:80px}:host .wrap .main .main-list .drag-list{cursor:pointer;border-radius:100px;color:#fff;background:#0db3a6;height:24px;line-height:24px;padding:0 10px 0 6px;margin:0 3px}:host .wrap .main .main-list .drag-list span{padding:0 4px}:host .wrap .main .main-list .drag-list .on{opacity:1}:host .wrap .main .main-list .drag-list .off{opacity:0}:host .wrap .main .main-list .target-list{background:#00bfff}:host .wrap .main .main-list .condition-list{background:#7fffd4}:host .wrap .main .echarts-wrap p{text-align:center}:host .wrap .main .main-list-hover{background-color:rgba(212,242,231,.4);border:1px dashed #0ff}:host .wrap .right{width:300px;padding-right:15px}.cdk-drag-preview{display:inline-block;box-sizing:border-box;background-color:#fff;width:80px;overflow:hidden;border-radius:4px;box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12)}:host ::ng-deep hr{border:none;border-bottom:1px solid #eee}:host ::ng-deep .ant-select{width:100%}:host ::ng-deep .ant-dropdown-trigger{display:inline-block}"]
}] }
];
/** @nocollapse */
BoardComponent.ctorParameters = function () {
return [
{ type: message.NzMessageService },
{ type: modal.NzModalService }
];
};
BoardComponent.propDecorators = {
colorList: [{ type: core.Input }],
echartsList: [{ type: core.Input }],
dataSourceItem: [{ type: core.Input }],
term: [{ type: core.Input }],
chartCondition: [{ type: core.Input }],
chartOptions: [{ type: core.Input }],
changeDataSource: [{ type: core.Output }],
changeEchartsParams: [{ type: core.Output }]
};
return BoardComponent;
}());
/*! *****************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
function __read(o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m)
return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done)
ar.push(r.value);
}
catch (error) {
e = { error: error };
}
finally {
try {
if (r && !r.done && (m = i["return"]))
m.call(i);
}
finally {
if (e)
throw e.error;
}
}
return ar;
}
function __spread() {
for (var ar = [], i = 0; i < arguments.length; i++)
ar = ar.concat(__read(arguments[i]));
return ar;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var ChartsService = /** @class */ (function () {
function ChartsService() {
this._options = null;
}
Object.defineProperty(ChartsService.prototype, "options", {
get: /**
* @return {?}
*/ function () {
return this._options;
},
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
this._options = value;
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
ChartsService.prototype.radarOptions = /**
* @return {?}
*/
function () {
this._options = {
tooltip: {},
legend: {},
radar: {
indicator: [
{ name: "Hannah Krause", max: 100 },
{ name: "Zhao Qian", max: 100 },
{ name: "Jasmin Krause", max: 150 },
{ name: "Li Lei", max: 150 },
{ name: "Karle Neumann", max: 150 },
{ name: "Adrian Groß", max: 150 },
],
},
series: [
{
type: "radar",
},
],
};
return this._options;
};
/**
* @return {?}
*/
ChartsService.prototype.areaOptions = /**
* @return {?}
*/
function () {
this._options = {
legend: {},
xAxis: {
type: "category",
},
yAxis: {
type: "value",
},
series: [
{
type: "line",
},
],
};
return this._options;
};
/**
* @return {?}
*/
ChartsService.prototype.lineOptions = /**
* @return {?}
*/
function () {
this._options = {
legend: {},
xAxis: {
type: "category",
},
yAxis: {
type: "value",
},
series: [
{
type: "line",
},
],
};
return this._options;
};
/**
* @return {?}
*/
ChartsService.prototype.barOptions = /**
* @return {?}
*/
function () {
this._options = {
legend: {},
xAxis: {
type: "category",
},
yAxis: {
type: "value",
},
series: [
{
type: "bar",
},
],
};
return this._options;
};
/**
* @return {?}
*/
ChartsService.prototype.barYOptions = /**
* @return {?}
*/
function () {
this._options = {
legend: {},
xAxis: {
type: "value",
},
yAxis: {
type: "category",
},
series: [
{
type: "bar",
},
],
};
return this._options;
};
/**
* @return {?}
*/
ChartsService.prototype.doughnutOptions = /**
* @return {?}
*/
function () {
this._options = {
legend: {},
series: [
{
radius: ["40%", "70%"],
type: "pie",
},
],
};
return this._options;
};
/**
* @return {?}
*/
ChartsService.prototype.pieOptions = /**
* @return {?}
*/
function () {
this._options = {
legend: {},
series: [
{
radius: "50%",
type: "pie",
},
],
};
return this._options;
};
ChartsService.decorators = [
{ type: core.Injectable }
];
/** @nocollapse */
ChartsService.ctorParameters = function () { return []; };
return ChartsService;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var ChartConditionService = /** @class */ (function () {
function ChartConditionService() {
}
/**
* @return {?}
*/
ChartConditionService.prototype.chartCondition = /**
* @return {?}
*/
function () {
return [
{
type: "bar",
charttype: "bar",
condition: {
lineStyle: false,
x: true,
y: true,
yTitle: true,
dataShow: false,
dataLabe: false,
legend: true,
radius: false,
},
},
{
type: "barY",
charttype: "bar",
condition: {
lineStyle: false,
x: true,
y: false,
yTitle: true,
dataShow: false,
dataLabe: false,
legend: true,
radius: false,
},
},
{
type: "line",
charttype: "line",
condition: {
lineStyle: true,
x: true,
y: true,
yTitle: true,
dataShow: false,
dataLabe: false,
legend: true,
radius: false,
},
},
{
type: "area",
charttype: "line",
condition: {
lineStyle: true,
x: true,
y: true,
yTitle: true,
dataShow: false,
dataLabe: false,
legend: true,
radius: false,
},
},
{
type: "pie",
charttype: "pie",
condition: {
lineStyle: false,
x: false,
y: false,
yTitle: false,
dataShow: false,
dataLabe: false,
legend: true,
radius: false,
},
},
{
type: "doughnut",
charttype: "pie",
condition: {
lineStyle: false,
x: false,
y: false,
yTitle: false,
dataShow: false,
dataLabe: false,
legend: true,
radius: true,
},
},
{
type: "radar",
condition: {
lineStyle: false,
x: false,
y: true,
yTitle: false,
dataShow: false,
dataLabe: false,
legend: true,
radius: false,
},
},
];
};
ChartConditionService.decorators = [
{ type: core.Injectable }
];
/** @nocollapse */
ChartConditionService.ctorParameters = function () { return []; };
return ChartConditionService;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var ModalColorComponent = /** @class */ (function () {
function ModalColorComponent() {
this.colorType = "row";
this.targetColorType = "1";
this.echartsColorList = [];
}
/**
* @return {?}
*/
ModalColorComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
this.changeColor();
};
/**
* @param {?} e
* @return {?}
*/
ModalColorComponent.prototype.selectColor = /**
* @param {?} e
* @return {?}
*/
function (e) {
this.currentList = e;
};
/**
* @param {?} color
* @return {?}
*/
ModalColorComponent.prototype.choiceColor = /**
* @param {?} color
* @return {?}
*/
function (color) {
this.currentColor = color;
_.find(this.echartsColorList, { title: this.currentList.title }).color =
color;
};
/**
* @return {?}
*/
ModalColorComponent.prototype.changeColor = /**
* @return {?}
*/
function () {
var _this = this;
console.log("11111");
this.echartsColorList = [];
this.echartsList.forEach(( /**
* @param {?} element
* @param {?} i
* @return {?}
*/function (element, i) {
_this.echartsColorList.push({
title: element[0],
value: element[1],
color: _this.colorList[Number(_this.currentColorType) - 1][0],
});
}));
};
ModalColorComponent.decorators = [
{ type: core.Component, args: [{
selector: "demo-modal-color",
template: "<div nz-row>\n <div nz-col nzSpan=\"4\">\u914D\u8272\u5BF9\u8C61</div>\n <div nz-col nzSpan=\"20\">\n <nz-radio-group [(ngModel)]=\"colorType\">\n <label nz-radio-button [nzValue]=\"'row'\">\u6309\u7EF4\u5EA6</label>\n <label nz-radio-button [nzValue]=\"'target'\">\u6309\u6307\u6807</label>\n </nz-radio-group>\n </div>\n</div>\n<div *ngIf=\"colorType == 'row'\">\n <!-- \u5982\u679C\u662F\u997C\u56FE\u5C31\u6CA1\u6709\u4E0B\u9762\u7684\uFF0C\u7B80\u9053\u4E91\u91CC\u9762\u5199\u7684\u4E5F\u4E0D\u662F\u592A\u8BE6\u7EC6 -->\n <div nz-row>\n <div nz-col nzSpan=\"4\">\u914D\u8272\u65B9\u5F0F</div>\n <div nz-col nzSpan=\"20\">\n <nz-select [(ngModel)]=\"currentColorType\" (ngModelChange)=\"changeColor()\">\n <nz-option\n *ngFor=\"let item of colorList; let i = index\"\n nzCustomContent\n nzLabel=\"\u914D\u8272\u65B9\u6848{{ i + 1 }}\"\n nzValue=\"{{ i + 1 }}\"\n >\n <div>\n <ng-container *ngFor=\"let element of item; let ii = index\">\n <ng-container *ngIf=\"ii < 9\">\n <span\n [ngStyle]=\"{ 'background-color': element, color: element }\"\n >\n -\n </span>\n </ng-container>\n </ng-container>\n \u914D\u8272\u65B9\u6848{{ i + 1 }}\n </div>\n </nz-option>\n </nz-select>\n <!-- {{ colorList | json }} -->\n </div>\n </div>\n <div nz-row nzGutter=\"16\">\n <div nz-col nzSpan=\"6\">\n <p>\u652F\u6301\u8BBE\u7F6E\u989C\u8272\u7684\u503C</p>\n <ul>\n <ng-container *ngFor=\"let element of echartsColorList; let i = index\">\n <li\n [ngClass]=\"element == currentList ? 'on' : ''\"\n (click)=\"selectColor(element)\"\n >\n <div class=\"row-list\">\n <span\n [ngStyle]=\"{\n 'background-color': element.color\n }\"\n class=\"color\"\n ></span>\n <span class=\"text\">{{ element.title }}</span>\n </div>\n </li>\n </ng-container>\n </ul>\n </div>\n <div nz-col nzSpan=\"18\">\n <p>\u9884\u8BBE\u989C\u8272</p>\n <div\n *ngFor=\"let item of colorList[currentColorType - 1]\"\n class=\"color-list\"\n >\n <span\n [ngStyle]=\"{ 'background-color': item }\"\n (click)=\"choiceColor(item)\"\n ></span>\n </div>\n <p>\u6700\u8FD1\u4F7F\u7528</p>\n <div\n *ngFor=\"let item of colorList[currentColorType - 1]; let i = index\"\n class=\"color-list\"\n >\n <ng-container *ngIf=\"i < 2\">\n <span [ngStyle]=\"{ 'background-color': item }\"></span>\n </ng-container>\n </div>\n <p>\u81EA\u5B9A\u4E49\u989C\u8272</p>\n <div\n *ngFor=\"let item of colorList[currentColorType - 1]; let i = index\"\n class=\"color-list\"\n >\n <ng-container *ngIf=\"i == 1\">\n <span [ngStyle]=\"{ 'background-color': item }\"></span>\n </ng-container>\n </div>\n </div>\n </div>\n</div>\n\n<div *ngIf=\"colorType == 'target'\" nz-row>\n <div nz-col nzSpan=\"4\">\u914D\u8272\u65B9\u5F0F</div>\n <div nz-col nzSpan=\"20\">\n <nz-radio-group [(ngModel)]=\"targetColorType\">\n <label nz-radio-button [nzValue]=\"'1'\">\u533A\u95F4\u8272</label>\n <label nz-radio-button [nzValue]=\"'2'\">\u6E10\u53D8\u8272</label>\n </nz-radio-group>\n <!-- {{ target | json }} -->\n </div>\n</div>\n",
styles: [":host p{margin:0}:host .color-list{display:inline-block}:host .color-list span{width:32px;height:32px;border-radius:32px;display:inline-block;margin:0 .5rem 1rem 0}:host ul{margin:0;padding:0}:host ul li{list-style:none;line-height:32px;cursor:pointer}:host ul li .row-list{display:flex;align-items:center;white-space:nowrap}:host ul li .row-list .color{width:1rem;height:1rem;border-radius:1rem;display:inline-block;background-color:#ccc;margin-right:.2rem}:host ul li .row-list .text{display:inline-block;width:calc(100% - 1.2rem);overflow:hidden;text-overflow:ellipsis}:host ul li:hover{background-color:#e6f7ff}:host ul li:active{background-color:#00a0e9}:host ul .on{background-color:#00a0e9}:host .ant-row{margin-bottom:1rem}:host ::ng-deep .ant-col-6{border-right:1px solid #eee}:host ::ng-deep .ant-select{width:100%}:host ::ng-deep .option-color{display:inline-block;width:3px;height:32px}:host ::ng-deep .della{background-color:red}:host ::ng-deep .della span{display:inline-block;width:3px;height:32px}"]
}] }
];
/** @nocollapse */
ModalColorComponent.ctorParameters = function () { return []; };
ModalColorComponent.propDecorators = {
echartsList: [{ type: core.Input }],
colorList: [{ type: core.Input }],
currentColorType: [{ type: core.Input }]
};
return ModalColorComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
// import { stringify } from "querystring";
var EchartOptionsDomComponent = /** @class */ (function () {
function EchartOptionsDomComponent(chartConditionService, chartsService, modalService, message$$1) {
this.chartConditionService = chartConditionService;
this.chartsService = chartsService;
this.modalService = modalService;
this.message = message$$1;
this.echartOptionsChange = new core.EventEmitter(); // echart只是内部参数稍做变化
// echart只是内部参数稍做变化
this.echartShapeChange = new core.EventEmitter(); // echart改变形状
// echart改变形状
this.chartConditionChange = new core.EventEmitter();
this.chartsType = [
{ title: "指标", type: "data", icon: "" },
{ title: "透视", type: "data", icon: "" },
{ title: "柱状", type: "bar", icon: "" },
{ title: "条形", type: "barY", icon: "" },
{ title: "折线", type: "line", icon: "" },
{ title: "雷达", type: "radar", icon: "" },
{ title: "饼状", type: "pie", icon: "" },
{ title: "地图", type: "map", icon: "" },
];
this.childChartsType = [
{
type: "line",
title: "折线",
children: [
{ title: "折线", type: "line", icon: "" },
{ title: "面积", type: "area", icon: "" },
],
},
{
type: "pie",
title: "饼状",
children: [
{ title: "饼状", type: "pie", icon: "" },
{ title: "环形", type: "doughnut", icon: "" },
],
},
];
this.input = {
nzTabPosition: "setting",
lineSmooth: "0",
xAxisrRotate: "0",
axisLabelInterval: false,
title: "",
yAxisMax: null,
yAxisMin: null,
dataLabeChecked: true,
isLegend: true,
legend: "top",
currentColorType: "1",
inside: 40,
outside: 50,
titleX: 0,
titleY: 0,
};
this.selectedValue = "lucy";
}
/**
* @return {?}
*/
EchartOptionsDomComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
this.formatterPercent = ( /**
* @param {?} value
* @return {?}
*/function (value) { return value + " %"; });
this.parserPercent = ( /**
* @param {?} value
* @return {?}
*/function (value) { return value.replace(" %", ""); });
};
/**
* @param {?} changes
* @return {?}
*/
EchartOptionsDomComponent.prototype.ngOnChanges = /**
* @param {?} changes
* @return {?}
*/
function (changes) {
for (var propName in changes) {
/** @type {?} */
var chng = changes[propName];
if (propName === "chartCondition" && chng.currentValue) {
/** @type {?} */
var option = this.getChartOption(chng.currentValue.type);
this.lineSmoothChange();
this.xAxisrRotateChange();
this.intervalChange();
this.isLegendShow();
this.legendChange();
this.titleChange();
this.yAxisMaxBlur();
this.yAxisMinBlur();
this.radiusChange();
this.echartShapeChange.emit({
chartOption: option,
});
this.currentChildChartsType = _.find(this.childChartsType, {
type: chng.currentValue.charttype,
});
this.currentChartType = chng.currentValue.type;
}
}
};
/**
* @param {?} type
* @return {?}
*/
EchartOptionsDomComponent.prototype.choiceChart = /**
* @param {?} type
* @return {?}
*/
function (type) {
if (this.currentChartType == type)
return;
if (this.echartsList.length <= 0) {
this.message.create("error", "请先选择数据");
return;
}
if (type === "data")
return;
this.currentChildChartsType = _.find(this.childChartsType, { type: type });
if (!this.currentChildChartsType) {
this.changeOptions(type);
}
};
/**
* @param {?} type
* @return {?}
*/
EchartOptionsDomComponent.prototype.choiceSubChart = /**
* @param {?} type
* @return {?}
*/
function (type) {
if (this.currentChartType == type)
return;
this.changeOptions(type);
};
/**
* @param {?} type
* @return {?}
*/
EchartOptionsDomComponent.prototype.changeOptions = /**
* @param {?} type
* @return {?}
*/
function (type) {
var _this = this;
if (this.currentChartType) {
this.modalService.confirm({
nzTitle: "更改图形",
nzContent: "更改图形将清空当前图形配置，是否确认修改？",
nzOnOk: ( /**
* @return {?}
*/function () {
_this.choiceType(type);
}),
nzOnCancel: ( /**
* @return {?}
*/function () { }),
});
}
else {
this.choiceType(type);
}
};
/**
* @param {?} type
* @return {?}
*/
EchartOptionsDomComponent.prototype.choiceType = /**
* @param {?} type
* @return {?}
*/
function (type) {
/** @type {?} */
var condition = this.chartConditionService.chartCondition();
this.chartCondition = _.find(condition, {
type: type,
});
this.chartCondition.input = _.cloneDeep(this.input);
this.chartConditionChange.emit(this.chartCondition);
this.currentChartType = type;
};
/**
* @param {?} type
* @return {?}
*/
EchartOptionsDomComponent.prototype.getChartOption = /**
* @param {?} type
* @return {?}
*/
function (type) {
/** @type {?} */
var options;
if (type === "pie") {
options = this.chartsService.pieOptions();
}
else if (type === "doughnut") {
options = this.chartsService.doughnutOptions();
}
else if (type === "radar") {
options = this.chartsService.radarOptions();
}
else if (type === "bar") {
options = this.chartsService.barOptions();
}
else if (type === "barY") {
options = this.chartsService.barYOptions();
}
else if (type === "area") {
options = this.chartsService.areaOptions();
}
else if (type === "line") {
options = this.chartsService.lineOptions();
}
else {
options = {
series: [
{
type: type,
},
],
};
}
this.chartsService.options.color = this.totalColor();
return options;
};
/**
* @param {?=} change
* @return {?}
*/
EchartOptionsDomComponent.prototype.lineSmoothChange = /**
* @param {?=} change
* @return {?}
*/
function (change) {
var _this = this;
/** @type {?} */
var options = this.chartsService.options;
options.series.forEach(( /**
* @param {?} item
* @return {?}
*/function (item) {
if (item.type === "line") {
item["smooth"] = Number(_this.chartCondition.input.lineSmooth);
}
}));
if (change) {
this.echartOptionsChange.emit(options);
}
};
/**
* @param {?=} change
* @return {?}
*/
EchartOptionsDomComponent.prototype.xAxisrRotateChange = /**
* @param {?=} change
* @return {?}
*/
function (change) {
/** @type {?} */
var options = this.chartsService.options;
if (options && options.xAxis) {
if (options.xAxis.axisLabel) ;
else {
options.xAxis.axisLabel = {};
}
Object.assign(options.xAxis.axisLabel, {
rotate: this.chartCondition.input.xAxisrRotate,
});
if (change) {
this.echartOptionsChange.emit(options);
}
}
};
/**
* @param {?=} change
* @return {?}
*/
EchartOptionsDomComponent.prototype.intervalChange = /**
* @param {?=} change
* @return {?}
*/
function (change) {
/** @type {?} */
var options = this.chartsService.options;
if (options.xAxis) {
options.xAxis.axisLabel = options.xAxis.axisLabel
? options.xAxis.axisLabel
: {};
Object.assign(options.xAxis.axisLabel, {
interval: this.chartCondition.input.axisLabelInterval ? 0 : "auto",
});
if (change) {
this.echartOptionsChange.emit(options);
}
}
};
/**
* @param {?=} change
* @return {?}
*/
EchartOptionsDomComponent.prototype.titleChange = /**
* @param {?=} change
* @return {?}
*/
function (change) {
/** @type {?} */
var options = this.chartsService.options;
options.title = {
text: this.chartCondition.input.title,
left: this.chartCondition.input.titleX + "%",
top: this.chartCondition.input.titleY + "%",
textStyle: {
fontSize: this.chartCondition.input.titleSize,
},
};
if (typeof change !== "undefined") {
this.echartOptionsChange.emit(options);
}
};
/**
* @param {?=} change
* @return {?}
*/
EchartOptionsDomComponent.prototype.yAxisMaxBlur = /**
* @param {?=} change
* @return {?}
*/
function (change) {
/** @type {?} */
var options = this.chartsService.options;
if (options.yAxis) {
options.yAxis.max = this.chartCondition.input.yAxisMax;
if (change) {
this.echartOptionsChange.emit(options);
}
}
};
/**
* @param {?=} change
* @return {?}
*/
EchartOptionsDomComponent.prototype.yAxisMinBlur = /**
* @param {?=} change
* @return {?}
*/
function (change) {
/** @type {?} */
var options = this.chartsService.options;
if (options.yAxis) {
options.yAxis.min = this.chartCondition.input.yAxisMin;
if (change) {
this.echartOptionsChange.emit(options);
}
}
};
/**
* @param {?=} change
* @return {?}
*/
EchartOptionsDomComponent.prototype.isLegendShow = /**
* @param {?=} change
* @return {?}
*/
function (change) {
var _a;
/** @type {?} */
var options = this.chartsService.options;
options["legend"] = (