kre-form/dist/@kre-form/abc/bundles/kre-form-abc-src-lib-board.umd.min.js

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

!function(n,t){"object"==typeof exports&&"undefined"!=typeof module?t(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")):"function"==typeof define&&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"],t):t((n["kre-form"]=n["kre-form"]||{},n["kre-form"].abc=n["kre-form"].abc||{},n["kre-form"].abc.src=n["kre-form"].abc.src||{},n["kre-form"].abc.src.lib=n["kre-form"].abc.src.lib||{},n["kre-form"].abc.src.lib.board={}),n.ng.common,n.ng.forms,n.ng.cdk["drag-drop"],n.dropdown,n.tabs,n.radio,n.select,n.checkbox,n.button,n.empty,n.input,n.grid,n.inputNumber,n.modal,n.message,n._,n.ng.core,n.echarts)}(this,function(n,t,e,i,o,r,a,s,l,c,p,d,h,u,g,m,y,v,b){"use strict";var C=(f.prototype.ngOnInit=function(){},f.prototype.ngOnChanges=function(n){for(var t in n){var e=n[t];"term"===t&&(e.currentValue&&"{}"!==JSON.stringify(e.currentValue)||(this.term={row:[],target:[],condition:[]})),"chartOptions"===t&&(e.currentValue?this.echartsList=this.chartOptions.dataset.source:this.chartOptions={})}},f.prototype.editChartOptions=function(n){if(this.chartOptions=n,0<this.echartsList.length){this.chartOptions.series.splice(1,this.chartOptions.series.length-1);for(var t=0;t<this.echartsList[0].length-2;t++)this.chartOptions.series&&this.chartOptions.series.push(this.chartOptions.series[0])}},f.prototype.getEchartShape=function(n){this.editChartOptions(n.chartOption),0<this.echartsList.length&&Object.assign(this.chartOptions,{dataset:{source:this.echartsList}}),this.chartOptions=Object.assign({},this.chartOptions)},f.prototype.getEchartOptions=function(n){this.editChartOptions(n),this.chartOptions=Object.assign({},this.chartOptions)},f.prototype.drop=function(n){n.previousContainer===n.container?i.moveItemInArray(n.container.data,n.previousIndex,n.currentIndex):-1==n.container.data.indexOf(n.previousContainer.data[n.previousIndex])?"row"==n.container.id&&1<this.term.row.length?this.message.create("error","维度不能超过2个"):(i.copyArrayItem(n.previousContainer.data,n.container.data,n.previousIndex,n.currentIndex),this.changeEchartsParams.emit(this.term)):this.message.create("error","标签不能重复")},f.prototype.dragStarted=function(){this.isLight=!0},f.prototype.dragEnded=function(){this.isLight=!1},f.prototype.hover=function(n,t){n.closeBtn=t},f.prototype.changeData=function(n){this.changeDataSource.emit(n)},f.prototype.closeLabel=function(n,t){n.splice(t,1)},f.prototype.saveFinalObj=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))},f.prototype.echartClickHandler=function(n){console.log("我在echart上点了啥",n)},f.decorators=[{type:v.Component,args:[{selector:"demo-board",template:'<div class="header">\n  <button nz-button nzType="link" (click)="saveFinalObj()" class="btn-text">\n    保存数据\n  </button>\n</div>\n<div class="wrap" cdkDropListGroup>\n  <div class="sider">\n    <div class="sider-title">\n      数据源\n      <button\n        nz-button\n        nzType="link"\n        class="btn-text"\n        (click)="changeData($event)"\n      >\n        更改数据源\n      </button>\n    </div>\n    <hr />\n    <div *ngIf="dataSourceItem">\n      <div class="sider-title">\n        <h4>字段</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">维度</div>\n      \x3c!--维度（行） --\x3e\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">指标</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">过滤条件</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            请选择维度和指标\n          </p>\n          <p *ngIf="!chartCondition">请选择右侧图标类型</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}"]}]}],f.ctorParameters=function(){return[{type:m.NzMessageService},{type:g.NzModalService}]},f.propDecorators={colorList:[{type:v.Input}],echartsList:[{type:v.Input}],dataSourceItem:[{type:v.Input}],term:[{type:v.Input}],chartCondition:[{type:v.Input}],chartOptions:[{type:v.Input}],changeDataSource:[{type:v.Output}],changeEchartsParams:[{type:v.Output}]},f);function f(n,t){this.message=n,this.modalService=t,this.changeDataSource=new v.EventEmitter,this.changeEchartsParams=new v.EventEmitter,this.isLight=!1}function z(n,t){var e="function"==typeof Symbol&&n[Symbol.iterator];if(!e)return n;var i,o,r=e.call(n),a=[];try{for(;(void 0===t||0<t--)&&!(i=r.next()).done;)a.push(i.value)}catch(s){o={error:s}}finally{try{i&&!i.done&&(e=r["return"])&&e.call(r)}finally{if(o)throw o.error}}return a}function x(){for(var n=[],t=0;t<arguments.length;t++)n=n.concat(z(arguments[t]));return n}var w=(Object.defineProperty(O.prototype,"options",{get:function(){return this._options},set:function(n){this._options=n},enumerable:!0,configurable:!0}),O.prototype.radarOptions=function(){return 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"}]},this._options},O.prototype.areaOptions=function(){return this._options={legend:{},xAxis:{type:"category"},yAxis:{type:"value"},series:[{type:"line"}]},this._options},O.prototype.lineOptions=function(){return this._options={legend:{},xAxis:{type:"category"},yAxis:{type:"value"},series:[{type:"line"}]},this._options},O.prototype.barOptions=function(){return this._options={legend:{},xAxis:{type:"category"},yAxis:{type:"value"},series:[{type:"bar"}]},this._options},O.prototype.barYOptions=function(){return this._options={legend:{},xAxis:{type:"value"},yAxis:{type:"category"},series:[{type:"bar"}]},this._options},O.prototype.doughnutOptions=function(){return this._options={legend:{},series:[{radius:["40%","70%"],type:"pie"}]},this._options},O.prototype.pieOptions=function(){return this._options={legend:{},series:[{radius:"50%",type:"pie"}]},this._options},O.decorators=[{type:v.Injectable}],O.ctorParameters=function(){return[]},O);function O(){this._options=null}var S=(L.prototype.chartCondition=function(){return[{type:"bar",charttype:"bar",condition:{lineStyle:!1,x:!0,y:!0,yTitle:!0,dataShow:!1,dataLabe:!1,legend:!0,radius:!1}},{type:"barY",charttype:"bar",condition:{lineStyle:!1,x:!0,y:!1,yTitle:!0,dataShow:!1,dataLabe:!1,legend:!0,radius:!1}},{type:"line",charttype:"line",condition:{lineStyle:!0,x:!0,y:!0,yTitle:!0,dataShow:!1,dataLabe:!1,legend:!0,radius:!1}},{type:"area",charttype:"line",condition:{lineStyle:!0,x:!0,y:!0,yTitle:!0,dataShow:!1,dataLabe:!1,legend:!0,radius:!1}},{type:"pie",charttype:"pie",condition:{lineStyle:!1,x:!1,y:!1,yTitle:!1,dataShow:!1,dataLabe:!1,legend:!0,radius:!1}},{type:"doughnut",charttype:"pie",condition:{lineStyle:!1,x:!1,y:!1,yTitle:!1,dataShow:!1,dataLabe:!1,legend:!0,radius:!0}},{type:"radar",condition:{lineStyle:!1,x:!1,y:!0,yTitle:!1,dataShow:!1,dataLabe:!1,legend:!0,radius:!1}}]},L.decorators=[{type:v.Injectable}],L.ctorParameters=function(){return[]},L);function L(){}var k=(M.prototype.ngOnInit=function(){this.changeColor()},M.prototype.selectColor=function(n){this.currentList=n},M.prototype.choiceColor=function(n){this.currentColor=n,y.find(this.echartsColorList,{title:this.currentList.title}).color=n},M.prototype.changeColor=function(){var e=this;console.log("11111"),this.echartsColorList=[],this.echartsList.forEach(function(n,t){e.echartsColorList.push({title:n[0],value:n[1],color:e.colorList[Number(e.currentColorType)-1][0]})})},M.decorators=[{type:v.Component,args:[{selector:"demo-modal-color",template:'<div nz-row>\n  <div nz-col nzSpan="4">配色对象</div>\n  <div nz-col nzSpan="20">\n    <nz-radio-group [(ngModel)]="colorType">\n      <label nz-radio-button [nzValue]="\'row\'">按维度</label>\n      <label nz-radio-button [nzValue]="\'target\'">按指标</label>\n    </nz-radio-group>\n  </div>\n</div>\n<div *ngIf="colorType == \'row\'">\n  \x3c!-- 如果是饼图就没有下面的，简道云里面写的也不是太详细 --\x3e\n  <div nz-row>\n    <div nz-col nzSpan="4">配色方式</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="配色方案{{ 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            配色方案{{ i + 1 }}\n          </div>\n        </nz-option>\n      </nz-select>\n      \x3c!-- {{ colorList | json }} --\x3e\n    </div>\n  </div>\n  <div nz-row nzGutter="16">\n    <div nz-col nzSpan="6">\n      <p>支持设置颜色的值</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>预设颜色</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>最近使用</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>自定义颜色</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">配色方式</div>\n  <div nz-col nzSpan="20">\n    <nz-radio-group [(ngModel)]="targetColorType">\n      <label nz-radio-button [nzValue]="\'1\'">区间色</label>\n      <label nz-radio-button [nzValue]="\'2\'">渐变色</label>\n    </nz-radio-group>\n    \x3c!-- {{ target | json }} --\x3e\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}"]}]}],M.ctorParameters=function(){return[]},M.propDecorators={echartsList:[{type:v.Input}],colorList:[{type:v.Input}],currentColorType:[{type:v.Input}]},M);function M(){this.colorType="row",this.targetColorType="1",this.echartsColorList=[]}var T=(I.prototype.ngOnInit=function(){this.formatterPercent=function(n){return n+" %"},this.parserPercent=function(n){return n.replace(" %","")}},I.prototype.ngOnChanges=function(n){for(var t in n){var e=n[t];"chartCondition"===t&&e.currentValue&&(t=this.getChartOption(e.currentValue.type),this.lineSmoothChange(),this.xAxisrRotateChange(),this.intervalChange(),this.isLegendShow(),this.legendChange(),this.titleChange(),this.yAxisMaxBlur(),this.yAxisMinBlur(),this.radiusChange(),this.echartShapeChange.emit({chartOption:t}),this.currentChildChartsType=y.find(this.childChartsType,{type:e.currentValue.charttype}),this.currentChartType=e.currentValue.type)}},I.prototype.choiceChart=function(n){this.currentChartType!=n&&(this.echartsList.length<=0?this.message.create("error","请先选择数据"):"data"!==n&&(this.currentChildChartsType=y.find(this.childChartsType,{type:n}),this.currentChildChartsType||this.changeOptions(n)))},I.prototype.choiceSubChart=function(n){this.currentChartType!=n&&this.changeOptions(n)},I.prototype.changeOptions=function(n){var t=this;this.currentChartType?this.modalService.confirm({nzTitle:"更改图形",nzContent:"更改图形将清空当前图形配置，是否确认修改？",nzOnOk:function(){t.choiceType(n)},nzOnCancel:function(){}}):this.choiceType(n)},I.prototype.choiceType=function(n){var t=this.chartConditionService.chartCondition();this.chartCondition=y.find(t,{type:n}),this.chartCondition.input=y.cloneDeep(this.input),this.chartConditionChange.emit(this.chartCondition),this.currentChartType=n},I.prototype.getChartOption=function(n){n="pie"===n?this.chartsService.pieOptions():"doughnut"===n?this.chartsService.doughnutOptions():"radar"===n?this.chartsService.radarOptions():"bar"===n?this.chartsService.barOptions():"barY"===n?this.chartsService.barYOptions():"area"===n?this.chartsService.areaOptions():"line"===n?this.chartsService.lineOptions():{series:[{type:n}]};return this.chartsService.options.color=this.totalColor(),n},I.prototype.lineSmoothChange=function(n){var t=this,e=this.chartsService.options;e.series.forEach(function(n){"line"===n.type&&(n.smooth=Number(t.chartCondition.input.lineSmooth))}),n&&this.echartOptionsChange.emit(e)},I.prototype.xAxisrRotateChange=function(n){var t=this.chartsService.options;t&&t.xAxis&&(t.xAxis.axisLabel||(t.xAxis.axisLabel={}),Object.assign(t.xAxis.axisLabel,{rotate:this.chartCondition.input.xAxisrRotate}),n&&this.echartOptionsChange.emit(t))},I.prototype.intervalChange=function(n){var t=this.chartsService.options;t.xAxis&&(t.xAxis.axisLabel=t.xAxis.axisLabel||{},Object.assign(t.xAxis.axisLabel,{interval:this.chartCondition.input.axisLabelInterval?0:"auto"}),n&&this.echartOptionsChange.emit(t))},I.prototype.titleChange=function(n){var t=this.chartsService.options;t.title={text:this.chartCondition.input.title,left:this.chartCondition.input.titleX+"%",top:this.chartCondition.input.titleY+"%",textStyle:{fontSize:this.chartCondition.input.titleSize}},void 0!==n&&this.echartOptionsChange.emit(t)},I.prototype.yAxisMaxBlur=function(n){var t=this.chartsService.options;t.yAxis&&(t.yAxis.max=this.chartCondition.input.yAxisMax,n&&this.echartOptionsChange.emit(t))},I.prototype.yAxisMinBlur=function(n){var t=this.chartsService.options;t.yAxis&&(t.yAxis.min=this.chartCondition.input.yAxisMin,n&&this.echartOptionsChange.emit(t))},I.prototype.isLegendShow=function(n){var t,e=this.chartsService.options;e.legend=((t={show:!!this.chartCondition.input.isLegend})[this.chartCondition.input.legend]="0",t),n&&this.echartOptionsChange.emit(e)},I.prototype.legendChange=function(n){var t,e=this.chartsService.options;e.legend=((t={})[this.chartCondition.input.legend]="0",t.show=this.chartCondition.input.isLegend,t),n&&this.echartOptionsChange.emit(e)},I.prototype.radiusChange=function(n){var t,e,i=this.chartsService.options;i.series[0].radius&&"[object Array]"===Object.prototype.toString.call(i.series[0].radius)&&(t=this.chartCondition.input.inside+"%",e=this.chartCondition.input.outside+"%",i.series[0].radius.splice(0,1,t),i.series[0].radius.splice(1,1,e),n&&this.echartOptionsChange.emit(i))},I.prototype.changeColor=function(){var t=this;this.modalService.create({nzContent:k,nzComponentParams:{echartsList:this.echartsList,colorList:this.colorList,currentColorType:this.chartCondition.input.currentColorType},nzOnOk:function(n){t.chartCondition.input.currentColorType=n.currentColorType,t.chartsService.options.color=t.totalColor(),t.echartOptionsChange.emit(t.chartsService.options)}})},I.prototype.totalColor=function(){return this.colorList[Number(this.chartCondition.input.currentColorType)-1]},I.prototype.changeCurrentColor=function(){this.chartsService.options.color=this.totalColor(),this.echartOptionsChange.emit(this.chartsService.options)},I.decorators=[{type:v.Component,args:[{selector:"echart-options-dom",template:'<h2>图标类型</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 }}类型</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\'">功能配置</label>\n    <label nz-radio-button [nzValue]="\'style\'">组件样式</label>\n  </nz-radio-group>\n\n  <div *ngIf="chartCondition.input.nzTabPosition === \'setting\'">\n    <div *ngIf="chartCondition?.condition">\n      \x3c!-- 折线图 面积图 --\x3e\n      <ng-container *ngIf="chartCondition?.condition.lineStyle">\n        <h4>线条样式</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">普通</label>\n            <label nz-radio nzValue="1">曲线</label>\n          </nz-radio-group>\n        </div>\n        \x3c!-- <div>\n      标记点 <label nz-checkbox [(ngModel)]="checked">显示数据标记点</label>\n    </div> --\x3e\n        <hr />\n      </ng-container>\n      <ng-container *ngIf="chartCondition?.condition.x">\n        <h4>坐标x轴</h4>\n        标签文字显示方向\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="横向"></nz-option>\n          <nz-option nzValue="90" nzLabel="竖向"></nz-option>\n          <nz-option nzValue="30" nzLabel="左倾斜"></nz-option>\n          <nz-option nzValue="-30" nzLabel="右倾斜"></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            >强制显示所有标签</label\n          >\n        </div>\n\n        <hr />\n      </ng-container>\n      <h4>标题</h4>\n      \x3c!-- <label\n        nz-checkbox\n        name="dataLabeChecked"\n        [(ngModel)]="chartCondition.condition.title"\n        (ngModelChange)="isShowTitle($event)"\n        >显示标题</label\n      > --\x3e\n      <ng-container>\n        <input\n          nz-input\n          placeholder="标题"\n          name="title"\n          [(ngModel)]="chartCondition.input.title"\n          [ngModelOptions]="{ updateOn: \'blur\' }"\n          (ngModelChange)="titleChange($event)"\n        />\n\n        <div>\n          <span class="label">标题坐标X：</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">标题坐标Y：</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">标题大小：</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>坐标y轴</h4>\n\n        <input\n          nz-input\n          placeholder="最大值"\n          name="yAxisMax"\n          [(ngModel)]="chartCondition.input.yAxisMax"\n          [ngModelOptions]="{ updateOn: \'blur\' }"\n          (ngModelChange)="yAxisMaxBlur($event)"\n        />\n        <input\n          nz-input\n          placeholder="最小值"\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>数据标签</h4>\n        <label\n          nz-checkbox\n          name="dataLabeChecked"\n          [(ngModel)]="chartCondition.input.dataLabeChecked"\n          >显示数据标签</label\n        >\n        <hr />\n      </ng-container>\n      <ng-container *ngIf="chartCondition.condition.radius">\n        <h4>半径设置</h4>\n        <div>\n          <span class="label">内径：</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">外径：</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>图例</h4>\n        <label\n          nz-checkbox\n          name="isLegend"\n          [(ngModel)]="chartCondition.input.isLegend"\n          (ngModelChange)="isLegendShow(\'event\')"\n          >图例显示</label\n        >\n        <div>\n          图例显示在图表\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="底部"></nz-option>\n            <nz-option nzValue="top" nzLabel="头部"></nz-option>\n          </nz-select>\n        </div>\n        <hr />\n      </ng-container>\n\n      <h4>数据预警</h4>\n      <div>添加预警</div>\n    </div>\n  </div>\n  <div *ngIf="chartCondition.input.nzTabPosition === \'style\'">\n    <h4>整体样式</h4>\n    <div>背景</div>\n    <div>标题样式</div>\n\n    <hr />\n    <h4>图表配色</h4>\n\n    <div class="select-color" (click)="changeColor()">\n      配色方案 {{ 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="配色方案{{ 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          配色方案{{ 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;height:32px;padding:4px 11px;background-color:#fff;display:flex;justify-content:space-between;align-items:center}:host .ant-input,:host .ant-input-number{margin-bottom:5px}:host span.label{width:80px;display:inline-block}"]}]}],I.ctorParameters=function(){return[{type:S},{type:w},{type:g.NzModalService},{type:m.NzMessageService}]},I.propDecorators={colorList:[{type:v.Input}],echartsList:[{type:v.Input}],chartCondition:[{type:v.Input}],echartOptionsChange:[{type:v.Output}],echartShapeChange:[{type:v.Output}],chartConditionChange:[{type:v.Output}]},I);function I(n,t,e,i){this.chartConditionService=n,this.chartsService=t,this.modalService=e,this.message=i,this.echartOptionsChange=new v.EventEmitter,this.echartShapeChange=new v.EventEmitter,this.chartConditionChange=new v.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:!1,title:"",yAxisMax:null,yAxisMin:null,dataLabeChecked:!0,isLegend:!0,legend:"top",currentColorType:"1",inside:40,outside:50,titleX:0,titleY:0},this.selectedValue="lucy"}var D=(A.prototype.onResize=function(n){this.boardChart.resize()},A.prototype.ngOnInit=function(){},A.prototype.ngAfterViewInit=function(){this.chartsInit()},A.prototype.ngOnChanges=function(n){for(var t in n){var e=n[t];"option"===t&&e.currentValue&&this.boardChart&&(this.boardChart.clear(),this.boardChart.setOption(e.currentValue))}},A.prototype.chartsInit=function(){var t=this;this.boardChart=b.init(this.chartsContent.nativeElement),this.boardChart.setOption(this.option),this.boardChart.on("click",function(n){t.echartClick.emit(n)})},A.decorators=[{type:v.Component,args:[{selector:"echart-dom",template:'<div #chartsContent style="width: 100%; height: 100%"></div>\n',styles:[""]}]}],A.ctorParameters=function(){return[]},A.propDecorators={option:[{type:v.Input}],echartClick:[{type:v.Output}],chartsContent:[{type:v.ViewChild,args:["chartsContent",{"static":!1}]}],onResize:[{type:v.HostListener,args:["window:resize",["$event"]]}]},A);function A(){this.echartClick=new v.EventEmitter}var P=[C,T,k,D],P=(V.decorators=[{type:v.NgModule,args:[{declarations:x(P),imports:[u.NzInputNumberModule,h.NzGridModule,d.NzInputModule,p.NzEmptyModule,g.NzModalModule,m.NzMessageModule,c.NzButtonModule,s.NzSelectModule,l.NzCheckboxModule,a.NzRadioModule,e.FormsModule,r.NzTabsModule,o.NzDropDownModule,i.DragDropModule,t.CommonModule],exports:x(P),entryComponents:x(P),providers:[w,S]}]}],V);function V(){}n.BoardComponent=C,n.BoardModule=P,n.ɵe=D,n.ɵa=T,n.ɵd=k,n.ɵb=S,n.ɵc=w,Object.defineProperty(n,"__esModule",{value:!0})});
//# sourceMappingURL=kre-form-abc-src-lib-board.umd.min.js.map