UNPKG

kre-form

Version:

本项目由 Angular8+ 编写的表单设计器和表单应用，所有的配置都是 JSON 结构体组成,PC 端是基于 ANT 组件库封装

993 lines (988 loc) • 54.6 kB

JavaScript

import { CommonModule } from '@angular/common'; import { FormsModule } from '@angular/forms'; import { moveItemInArray, copyArrayItem, DragDropModule } from '@angular/cdk/drag-drop'; import { NzDropDownModule } from 'ng-zorro-antd/dropdown'; import { NzTabsModule } from 'ng-zorro-antd/tabs'; import { NzRadioModule } from 'ng-zorro-antd/radio'; import { NzSelectModule } from 'ng-zorro-antd/select'; import { NzCheckboxModule } from 'ng-zorro-antd/checkbox'; import { NzButtonModule } from 'ng-zorro-antd/button'; import { NzEmptyModule } from 'ng-zorro-antd/empty'; import { NzInputModule } from 'ng-zorro-antd/input'; import { NzGridModule } from 'ng-zorro-antd/grid'; import { NzInputNumberModule } from 'ng-zorro-antd/input-number'; import { NzModalService, NzModalModule } from 'ng-zorro-antd/modal'; import { NzMessageService, NzMessageModule } from 'ng-zorro-antd/message'; import { find, cloneDeep } from 'lodash'; import { Component, Input, Output, EventEmitter, Injectable, ViewChild, HostListener, NgModule } from '@angular/core'; import { init } from 'echarts'; /** * @fileoverview added by tsickle * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ class BoardComponent { /** * @param {?} message * @param {?} modalService */ constructor(message, modalService) { this.message = message; this.modalService = modalService; this.changeDataSource = new EventEmitter(); this.changeEchartsParams = new EventEmitter(); this.isLight = false; } /** * @return {?} */ ngOnInit() { } /** * @param {?} changes * @return {?} */ ngOnChanges(changes) { for (const propName in changes) { /** @type {?} */ const 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 {?} */ editChartOptions(e) { this.chartOptions = e; if (this.echartsList.length > 0) { ((/** @type {?} */ (this.chartOptions["series"]))).splice(1, ((/** @type {?} */ (this.chartOptions["series"]))).length - 1); for (let i = 0; i < this.echartsList[0].length - 2; i++) { if (this.chartOptions["series"]) { this.chartOptions["series"].push(this.chartOptions["series"][0]); } } } } /** * @param {?} e * @return {?} */ getEchartShape(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 {?} */ getEchartOptions(e) { this.editChartOptions(e); this.chartOptions = Object.assign({}, this.chartOptions); } /** * @param {?} event * @return {?} */ drop(event) { if (event.previousContainer === event.container) { moveItemInArray(event.container.data, event.previousIndex, event.currentIndex); } else { /** @type {?} */ let 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; } copyArrayItem(event.previousContainer.data, event.container.data, event.previousIndex, event.currentIndex); this.changeEchartsParams.emit(this.term); } } /** * @return {?} */ dragStarted() { this.isLight = true; } /** * @return {?} */ dragEnded() { this.isLight = false; } /** * @param {?} item * @param {?} status * @return {?} */ hover(item, status) { item.closeBtn = status; } /** * @param {?} e * @return {?} */ changeData(e) { this.changeDataSource.emit(e); } /** * @param {?} list * @param {?} i * @return {?} */ closeLabel(list, i) { list.splice(i, 1); } /** * @return {?} */ saveFinalObj() { 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 {?} */ echartClickHandler(e) { console.log("我在echart上点了啥", e); } } BoardComponent.decorators = [ { type: 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 \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 = () => [ { type: NzMessageService }, { type: NzModalService } ]; BoardComponent.propDecorators = { colorList: [{ type: Input }], echartsList: [{ type: Input }], dataSourceItem: [{ type: Input }], term: [{ type: Input }], chartCondition: [{ type: Input }], chartOptions: [{ type: Input }], changeDataSource: [{ type: Output }], changeEchartsParams: [{ type: Output }] }; /** * @fileoverview added by tsickle * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ class ChartsService { constructor() { this._options = null; } /** * @return {?} */ get options() { return this._options; } /** * @param {?} value * @return {?} */ set options(value) { this._options = value; } /** * @return {?} */ radarOptions() { 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 {?} */ areaOptions() { this._options = { legend: {}, xAxis: { type: "category", }, yAxis: { type: "value", }, series: [ { type: "line", }, ], }; return this._options; } /** * @return {?} */ lineOptions() { this._options = { legend: {}, xAxis: { type: "category", }, yAxis: { type: "value", }, series: [ { type: "line", }, ], }; return this._options; } /** * @return {?} */ barOptions() { this._options = { legend: {}, xAxis: { type: "category", }, yAxis: { type: "value", }, series: [ { type: "bar", }, ], }; return this._options; } /** * @return {?} */ barYOptions() { this._options = { legend: {}, xAxis: { type: "value", }, yAxis: { type: "category", }, series: [ { type: "bar", }, ], }; return this._options; } /** * @return {?} */ doughnutOptions() { this._options = { legend: {}, series: [ { radius: ["40%", "70%"], type: "pie", }, ], }; return this._options; } /** * @return {?} */ pieOptions() { this._options = { legend: {}, series: [ { radius: "50%", type: "pie", }, ], }; return this._options; } } ChartsService.decorators = [ { type: Injectable } ]; /** @nocollapse */ ChartsService.ctorParameters = () => []; /** * @fileoverview added by tsickle * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ class ChartConditionService { constructor() { } /** * @return {?} */ chartCondition() { 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: Injectable } ]; /** @nocollapse */ ChartConditionService.ctorParameters = () => []; /** * @fileoverview added by tsickle * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ class ModalColorComponent { constructor() { this.colorType = "row"; this.targetColorType = "1"; this.echartsColorList = []; } /** * @return {?} */ ngOnInit() { this.changeColor(); } /** * @param {?} e * @return {?} */ selectColor(e) { this.currentList = e; } /** * @param {?} color * @return {?} */ choiceColor(color) { this.currentColor = color; find(this.echartsColorList, { title: this.currentList.title }).color = color; } /** * @return {?} */ changeColor() { console.log("11111"); this.echartsColorList = []; this.echartsList.forEach((/** * @param {?} element * @param {?} i * @return {?} */ (element, i) => { this.echartsColorList.push({ title: element[0], value: element[1], color: this.colorList[Number(this.currentColorType) - 1][0], }); })); } } ModalColorComponent.decorators = [ { type: 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 \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 \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 \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 = () => []; ModalColorComponent.propDecorators = { echartsList: [{ type: Input }], colorList: [{ type: Input }], currentColorType: [{ type: Input }] }; /** * @fileoverview added by tsickle * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ // import { stringify } from "querystring"; class EchartOptionsDomComponent { /** * @param {?} chartConditionService * @param {?} chartsService * @param {?} modalService * @param {?} message */ constructor(chartConditionService, chartsService, modalService, message) { this.chartConditionService = chartConditionService; this.chartsService = chartsService; this.modalService = modalService; this.message = message; this.echartOptionsChange = new EventEmitter(); // echart只是内部参数稍做变化 // echart只是内部参数稍做变化 this.echartShapeChange = new EventEmitter(); // echart改变形状 // echart改变形状 this.chartConditionChange = new 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 {?} */ ngOnInit() { this.formatterPercent = (/** * @param {?} value * @return {?} */ (value) => `${value} %`); this.parserPercent = (/** * @param {?} value * @return {?} */ (value) => value.replace(" %", "")); } /** * @param {?} changes * @return {?} */ ngOnChanges(changes) { for (const propName in changes) { /** @type {?} */ const chng = changes[propName]; if (propName === "chartCondition" && chng.currentValue) { /** @type {?} */ const 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 {?} */ choiceChart(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 {?} */ choiceSubChart(type) { if (this.currentChartType == type) return; this.changeOptions(type); } /** * @param {?} type * @return {?} */ changeOptions(type) { if (this.currentChartType) { this.modalService.confirm({ nzTitle: "更改图形", nzContent: "更改图形将清空当前图形配置，是否确认修改？", nzOnOk: (/** * @return {?} */ () => { this.choiceType(type); }), nzOnCancel: (/** * @return {?} */ () => { }), }); } else { this.choiceType(type); } } /** * @param {?} type * @return {?} */ choiceType(type) { /** @type {?} */ const 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 {?} */ getChartOption(type) { /** @type {?} */ let 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 {?} */ lineSmoothChange(change) { /** @type {?} */ let options = this.chartsService.options; options.series.forEach((/** * @param {?} item * @return {?} */ (item) => { if (item.type === "line") { item["smooth"] = Number(this.chartCondition.input.lineSmooth); } })); if (change) { this.echartOptionsChange.emit(options); } } /** * @param {?=} change * @return {?} */ xAxisrRotateChange(change) { /** @type {?} */ let 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 {?} */ intervalChange(change) { /** @type {?} */ let 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 {?} */ titleChange(change) { /** @type {?} */ let 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 {?} */ yAxisMaxBlur(change) { /** @type {?} */ let options = this.chartsService.options; if (options.yAxis) { options.yAxis.max = this.chartCondition.input.yAxisMax; if (change) { this.echartOptionsChange.emit(options); } } } /** * @param {?=} change * @return {?} */ yAxisMinBlur(change) { /** @type {?} */ let options = this.chartsService.options; if (options.yAxis) { options.yAxis.min = this.chartCondition.input.yAxisMin; if (change) { this.echartOptionsChange.emit(options); } } } /** * @param {?=} change * @return {?} */ isLegendShow(change) { /** @type {?} */ let options = this.chartsService.options; options["legend"] = { show: this.chartCondition.input.isLegend ? true : false, [this.chartCondition.input.legend]: "0", }; if (change) { this.echartOptionsChange.emit(options); } } /** * @param {?=} change * @return {?} */ legendChange(change) { /** @type {?} */ let options = this.chartsService.options; options["legend"] = { [this.chartCondition.input.legend]: "0", show: this.chartCondition.input.isLegend, }; if (change) { this.echartOptionsChange.emit(options); } } /** * @param {?=} change * @return {?} */ radiusChange(change) { /** @type {?} */ let options = this.chartsService.options; if (!options.series[0].radius || Object.prototype.toString.call(options.series[0].radius) !== "[object Array]") return; /** @type {?} */ let inside = this.chartCondition.input.inside + "%"; /** @type {?} */ let outside = this.chartCondition.input.outside + "%"; options.series[0].radius.splice(0, 1, inside); options.series[0].radius.splice(1, 1, outside); if (change) { this.echartOptionsChange.emit(options); } } /** * @return {?} */ changeColor() { /** @type {?} */ const modal = this.modalService.create({ nzContent: ModalColorComponent, nzComponentParams: { echartsList: this.echartsList, colorList: this.colorList, currentColorType: this.chartCondition.input.currentColorType, }, nzOnOk: (/** * @param {?} componentInstance * @return {?} */ (componentInstance) => { this.chartCondition.input.currentColorType = componentInstance.currentColorType; // if ( // !( // this.currentChartType == "doughnut" || // this.currentChartType == "pie" // ) // ) { // Object.assign(this.chartsService.options, { // color: this.totalColor(), // visualMap: { // show: false, // categories: _.map(componentInstance.echartsColorList, "value"), // inRange: { // color: _.map(componentInstance.echartsColorList, "color"), // }, // }, // }); // } else { // this.chartsService.options.color = this.totalColor(); // } this.chartsService.options.color = this.totalColor(); this.echartOptionsChange.emit(this.chartsService.options); }), }); } /** * @return {?} */ totalColor() { return this.colorList[Number(this.chartCondition.input.currentColorType) - 1]; } /** * @return {?} */ changeCurrentColor() { this.chartsService.options.color = this.totalColor(); this.echartOptionsChange.emit(this.chartsService.options); } } EchartOptionsDomComponent.decorators = [ { type: Component, args: [{ selector: "echart-options-dom", template: "<h2>\u56FE\u6807\u7C7B\u578B</h2>\n<div class=\"chart-wrap\">\n <ng-container *ngFor=\"let item of chartsType\">\n <div (click)=\"choiceChart(item.type)\" class=\"chart-type\">\n {{ item.title }}\n </div>\n </ng-container>\n</div>\n<ng-container *ngIf=\"currentChildChartsType\">\n <div>{{ currentChildChartsType.title }}\u7C7B\u578B</div>\n <div class=\"chart-wrap\">\n <ng-container *ngFor=\"let item of currentChildChartsType.children\">\n <div (click)=\"choiceSubChart(item.type)\" class=\"chart-type\">\n {{ item.title }}\n </div>\n </ng-container>\n </div>\n</ng-container>\n<ng-container *ngIf=\"chartCondition\">\n <nz-radio-group\n [(ngModel)]=\"chartCondition.input.nzTabPosition\"\n name=\"nzTabPosition\"\n >\n <label nz-radio-button [nzValue]=\"'setting'\">\u529F\u80FD\u914D\u7F6E</label>\n <label nz-radio-button [nzValue]=\"'style'\">\u7EC4\u4EF6\u6837\u5F0F</label>\n </nz-radio-group>\n\n <div *ngIf=\"chartCondition.input.nzTabPosition === 'setting'\">\n <div *ngIf=\"chartCondition?.condition\">\n \n <ng-container *ngIf=\"chartCondition?.condition.lineStyle\">\n <h4>\u7EBF\u6761\u6837\u5F0F</h4>\n <div>\n <nz-radio-group\n name=\"lineSmooth\"\n [(ngModel)]=\"chartCondition.input.lineSmooth\"\n (ngModelChange)=\"lineSmoothChange('event')\"\n >\n <label nz-radio nzValue=\"0\">\u666E\u901A</label>\n <label nz-radio nzValue=\"1\">\u66F2\u7EBF</label>\n </nz-radio-group>\n </div>\n \n <hr />\n </ng-container>\n <ng-container *ngIf=\"chartCondition?.condition.x\">\n <h4>\u5750\u6807x\u8F74</h4>\n \u6807\u7B7E\u6587\u5B57\u663E\u793A\u65B9\u5411\n <nz-select\n [ngModelOptions]=\"{ standalone: true }\"\n [(ngModel)]=\"chartCondition.input.xAxisrRotate\"\n (ngModelChange)=\"xAxisrRotateChange($event)\"\n nzAllowClear\n nzPlaceHolder=\"Choose\"\n >\n <nz-option nzValue=\"0\" nzLabel=\"\u6A2A\u5411\"></nz-option>\n <nz-option nzValue=\"90\" nzLabel=\"\u7AD6\u5411\"></nz-option>\n <nz-option nzValue=\"30\" nzLabel=\"\u5DE6\u503E\u659C\"></nz-option>\n <nz-option nzValue=\"-30\" nzLabel=\"\u53F3\u503E\u659C\"></nz-option>\n </nz-select>\n\n <div>\n <label\n nz-checkbox\n name=\"axisLabelInterval\"\n [(ngModel)]=\"chartCondition.input.axisLabelInterval\"\n (ngModelChange)=\"intervalChange('event')\"\n >\u5F3A\u5236\u663E\u793A\u6240\u6709\u6807\u7B7E</label\n >\n </div>\n\n <hr />\n </ng-container>\n <h4>\u6807\u9898</h4>\n \n <ng-container>\n <input\n nz-input\n placeholder=\"\u6807\u9898\"\n name=\"title\"\n [(ngModel)]=\"chartCondition.input.title\"\n [ngModelOptions]=\"{ updateOn: 'blur' }\"\n (ngModelChange)=\"titleChange($event)\"\n />\n\n <div>\n <span class=\"label\">\u6807\u9898\u5750\u6807X\uFF1A</span>\n <nz-input-number\n [(ngModel)]=\"chartCondition.input.titleX\"\n [nzMin]=\"0\"\n [nzMax]=\"100\"\n [nzStep]=\"1\"\n [nzFormatter]=\"formatterPercent\"\n [nzParser]=\"parserPercent\"\n [ngModelOptions]=\"{ updateOn: 'blur' }\"\n (ngModelChange)=\"titleChange($event)\"\n ></nz-input-number>\n </div>\n <div>\n <span class=\"label\">\u6807\u9898\u5750\u6807Y\uFF1A</span>\n <nz-input-number\n [(ngModel)]=\"chartCondition.input.titleY\"\n [nzMin]=\"0\"\n [nzMax]=\"100\"\n [nzStep]=\"1\"\n [nzFormatter]=\"formatterPercent\"\n [nzParser]=\"parserPercent\"\n [ngModelOptions]=\"{ updateOn: 'blur' }\"\n (ngModelChange)=\"titleChange($event)\"\n ></nz-input-number>\n </div>\n <div>\n <span class=\"label\">\u6807\u9898\u5927\u5C0F\uFF1A</span>\n <nz-input-number\n [(ngModel)]=\"chartCondition.input.titleSize\"\n [nzMin]=\"0\"\n [nzMax]=\"100\"\n [nzStep]=\"1\"\n [ngModelOptions]=\"{ updateOn: 'blur' }\"\n (ngModelChange)=\"titleChange($event)\"\n ></nz-input-number>\n </div>\n </ng-container>\n\n <hr />\n <ng-container *ngIf=\"chartCondition?.condition.y\">\n <h4>\u5750\u6807y\u8F74</h4>\n\n <input\n nz-input\n placeholder=\"\u6700\u5927\u503C\"\n name=\"yAxisMax\"\n [(ngModel)]=\"chartCondition.input.yAxisMax\"\n [ngModelOptions]=\"{ updateOn: 'blur' }\"\n (ngModelChange)=\"yAxisMaxBlur($event)\"\n />\n <input\n nz-input\n placeholder=\"\u6700\u5C0F\u503C\"\n name=\"yAxisMin\"\n [(ngModel)]=\"chartCondition.input.yAxisMin\"\n [ngModelOptions]=\"{ updateOn: 'blur' }\"\n (ngModelChange)=\"yAxisMinBlur($event)\"\n />\n <hr />\n </ng-container>\n\n <ng-container *ngIf=\"chartCondition?.condition.dataLabe\">\n <h4>\u6570\u636E\u6807\u7B7E</h4>\n <label\n nz-checkbox\n name=\"dataLabeChecked\"\n [(ngModel)]=\"chartCondition.input.dataLabeChecked\"\n >\u663E\u793A\u6570\u636E\u6807\u7B7E</label\n >\n <hr />\n </ng-container>\n <ng-container *ngIf=\"chartCondition.condition.radius\">\n <h4>\u534A\u5F84\u8BBE\u7F6E</h4>\n <div>\n <span class=\"label\">\u5185\u5F84\uFF1A</span>\n <nz-input-number\n [(ngModel)]=\"chartCondition.input.inside\"\n [nzMin]=\"0\"\n [nzMax]=\"100\"\n [nzStep]=\"1\"\n [nzFormatter]=\"formatterPercent\"\n [nzParser]=\"parserPercent\"\n [ngModelOptions]=\"{ updateOn: 'blur' }\"\n (ngModelChange)=\"radiusChange($event)\"\n ></nz-input-number>\n </div>\n <div>\n <span class=\"label\">\u5916\u5F84\uFF1A</span>\n <nz-input-number\n [(ngModel)]=\"chartCondition.input.outside\"\n [nzMin]=\"0\"\n [nzMax]=\"100\"\n [nzStep]=\"1\"\n [nzFormatter]=\"formatterPercent\"\n [nzParser]=\"parserPercent\"\n [ngModelOptions]=\"{ updateOn: 'blur' }\"\n (ngModelChange)=\"radiusChange($event)\"\n ></nz-input-number>\n </div>\n <hr />\n </ng-container>\n <ng-container *ngIf=\"chartCondition?.condition.legend\">\n <h4>\u56FE\u4F8B</h4>\n <label\n nz-checkbox\n name=\"isLegend\"\n [(ngModel)]=\"chartCondition.input.isLegend\"\n (ngModelChange)=\"isLegendShow('event')\"\n >\u56FE\u4F8B\u663E\u793A</label\n >\n <div>\n \u56FE\u4F8B\u663E\u793A\u5728\u56FE\u8868\n <nz-select\n name=\"legend\"\n [(ngModel)]=\"chartCondition.input.legend\"\n (ngModelChange)=\"legendChange($event)\"\n nzAllowClear\n nzPlaceHolder=\"Choose\"\n >\n <nz-option nzValue=\"bottom\" nzLabel=\"\u5E95\u90E8\"></nz-option>\n <nz-option nzValue=\"top\" nzLabel=\"\u5934\u90E8\"></nz-option>\n </nz-select>\n </div>\n <hr />\n </ng-container>\n\n <h4>\u6570\u636E\u9884\u8B66</h4>\n <div>\u6DFB\u52A0\u9884\u8B66</div>\n </div>\n </div>\n <div *ngIf=\"chartCondition.input.nzTabPosition === 'style'\">\n <h4>\u6574\u4F53\u6837\u5F0F</h4>\n <div>\u80CC\u666F</div>\n <div>\u6807\u9898\u6837\u5F0F</div>\n\n <hr />\n <h4>\u56FE\u8868\u914D\u8272</h4>\n\n <div class=\"select-color\" (click)=\"changeColor()\">\n \u914D\u8272\u65B9\u6848 {{ chartCondition.input.currentColorType\n }}<i class=\"icon-KT-Close\"></i>\n </div>\n\n <nz-select\n [(ngModel)]=\"chartCondition.input.currentColorType\"\n (ngModelChange)=\"changeCurrentColor()\"\n >\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 [ngStyle]=\"{ 'background-color': element, color: element }\">\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 </div>\n</ng-container>\n", styles: [":host{padding:10px 20px;border-left:1px solid #e9e9e9}:host .chart-wrap{display:flex;flex-wrap:wrap}:host .chart-wrap .chart-type{width:44px;height:44px;line-height:44px;text-align:center;cursor:pointer;border:2px solid #0db3a6;vertical-align:middle;margin:0 10px 10px 0}:host .select-color{border:1px solid #d9d9d9;border-radius:4px;he