[{"__symbolic":"module","version":4,"metadata":{"BatchImportVariableModalComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../../../../../../shared/configure-component-base","name":"ConfigureComponentBase","line":24,"character":55},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":19,"character":1},"arguments":[{"selector":"batch-import-variable-modal","template":"<div class=\"modal-content fe-modal-container choose-monitor design-content-batch designer-input-wrap\" bs-modal-drag> <div class=\"modal-header fe-modal-header border-bottom\"> <h4 class=\"fe-modal-header-title\"> <span>{{lc('BatchImport')}}</span> </h4> <div class=\"fe-modal-header-close\" aria-label=\"Close\" (click)=\"close()\">×</div> </div> <div class=\"modal-body\"> <div> <span class=\"tips-primary\">{{lc('ImportFromDataSource')}}{{lc('Variables')}}</span> <span class=\"tips-secondary\">({{lc('GenerateVariablesWithMonitorName')}})</span> </div> <form novalidate (ngSubmit)=\"getRefVariablesAndGroup()\"> <div class=\"variable-transverse clearfix\"> <div class=\"variable-title\"> <i class=\"star\">*</i> {{lc('DataSourceName')}}: </div> <div class=\"variable-input\"> <ng-select name=\"dataSourceName\" [items]=\"dataSourceList\" bindLabel=\"displayName\" bindValue=\"id\" [(ngModel)]=\"dataSourceId\" [searchable]=\"false\" [clearable]=\"false\" [required]=\"true\" placeholder=\"{{lc('PleaseSelect')}}\" (change)=\"onDataSourceChange()\" [notFoundText]=\"l('NoData')\"> <ng-template ng-option-tmp ng-label-tmp let-item=\"item\"> {{item.displayName}} </ng-template> </ng-select> </div> <button type=\"button\" class=\"fe-btn fe-btn-default fe-btn-save\" (click)=\"refresh()\" [disabled]=\"!dataSourceId || dataSourceId == 0\">{{l('Refresh')}}</button> </div> <div class=\"row search-condition\"> <div class=\"input-group col-md-4 col-xs-4\"> <input placeholder='{{lc(\"SearchRefVariableName\")}}' class=\"searchInput-variableName\" style=\"width: 100%;\" type=\"text\" name=\"variableName\" [(ngModel)]=\"fBoxVariableName\" (change)=\"getRefVariables()\"> <span class=\"fa fa-search form-control-search\"></span> </div> <div class=\"input-group col-md-3 col-xs-3\"> <ng-select name=\"groupSelect\" [items]=\"groupNames\" [(ngModel)]=\"selectedGroupName\" [searchable]=\"false\" [clearable]=\"true\" placeholder=\"{{lc('AllGroup')}}\" [notFoundText]=\"l('NoData')\" (change)=\"getRefVariables()\"> <ng-template ng-option-tmp ng-label-tmp let-item=\"item\"> {{item}} </ng-template> </ng-select> </div> </div> </form> <div class=\"primeng-datatable-container\" [busyIf]=\"primengTableHelper.isLoading\"> <p-table #batchImportDataTable (onLazyLoad)=\"getRefVariables($event)\" [value]=\"primengTableHelper.records\" rows=\"{{primengTableHelper.defaultRecordsCountPerPage}}\" [paginator]=\"false\" [scrollable]=\"true\" dataKey=\"id\" selectionMode=\"multiple\" [(selection)]=\"selectedFBoxVariables\" ScrollWidth=\"100%\" [responsive]=\"primengTableHelper.isResponsive\"> <ng-template pTemplate=\"header\"> <tr> <th class=\"checkbox\" style=\"width: 50px;\"> <p-tableHeaderCheckbox></p-tableHeaderCheckbox> </th> <th class=\"col-md-2 col-xs-2\"> {{lc('RefVariableName')}} </th> <th class=\"col-md-2 col-xs-2\"> {{lc('GroupName')}} </th> <th class=\"col-md-2 col-xs-2\"> {{lc('VariableDataType')}} </th> <th class=\"col-md-2 col-xs-2\"> {{lc('VariableDevice')}} </th> <th class=\"col-md-2 col-xs-2\"> {{lc('VariableAddress')}} </th> <th class=\"col-md-2 col-xs-2\"> {{lc('VariableRemark')}} </th> </tr> </ng-template> <ng-template pTemplate=\"body\" let-record> <tr [pSelectableRow]=\"record\"> <td class=\"checkbox\" style=\"width: 50px;\"> <p-tableCheckbox [value]=\"record\"></p-tableCheckbox> </td> <td> {{record.name}} </td> <td> {{record.groupName}} </td> <td> {{formatDataType(record.dataType, record.bitIndexEnabled)}} </td> <td> {{record.devAlias}} </td> <td> {{record.addressDescription}} </td> <td> {{record.memo}} </td> </tr> </ng-template> </p-table> <div class=\"primeng-no-data\" *ngIf=\"primengTableHelper.totalRecordsCount == 0\"> {{l('NoData')}} </div> <div class=\"primeng-paging-container\"> <p-paginator [rows]=\"primengTableHelper.defaultRecordsCountPerPage\" #paginator (onPageChange)=\"getRefVariables($event)\" [totalRecords]=\"primengTableHelper.totalRecordsCount\" [rowsPerPageOptions]=\"primengTableHelper.predefinedRecordsCountPerPage\"> </p-paginator> <span class=\"total-records-count\"> {{l('TotalRecordsCount', primengTableHelper.totalRecordsCount)}} </span> </div> <div class='selected-monitoring-point-content clearfix' *ngIf=\"selectedFBoxVariables && selectedFBoxVariables.length\"> <div *ngFor=\"let refVariable of selectedFBoxVariables\" class='selected-monitoring-point clearfix'> <span>{{refVariable.name}}</span> <i class=\"fcloud-cancel\" (click)='removeSelectedRefVariable(refVariable.id)'></i> </div> </div> </div> </div> <div class=\"fe-modal-footer\"> <div class=\"button-group\"> <button type=\"submit\" class=\"fe-btn fe-btn-default fe-btn-save\" [disabled]=\"saving || !dataSourceId || primengTableHelper.totalRecordsCount === 0\" (click)=\"importAllRefVariables()\"> {{lc('ImportAll')}} </button> <button type=\"button\" class=\"fe-btn fe-btn-default fe-btn-save\" [disabled]=\"saving || !selectedFBoxVariables || selectedFBoxVariables.length === 0\" (click)=\"importSelectedRefVariables()\"> {{lc('ImportSelected')}} </button> <button [disabled]=\"saving\" type=\"button\" class=\"fe-btn fe-btn-default fe-btn-cancel-one\" (click)=\"close()\"> {{l('Cancel')}} </button> </div> </div> </div> ","styles":[" .design-content-batch { .modal-dialog { min-width: 800px; } .modal .modal-content .modal-body { padding: 16px; padding-bottom: 0px; } .border-bottom { border-bottom: 1px solid #F4F4F4; } .checkbox { width: 31px; } .search-condition { margin-bottom: 10px; .input-group { padding-right: 0; } input, select { height: 32px; border: 1px solid #C4C6CF; padding: 0 10px; line-height: 32px; width: 100%; } input { padding-right: 35px; } } input, select { color: rgba(0, 0, 0, 0.6); } option { color: rgba(0, 0, 0, 0.6) } .variable-transverse { width: 484px; margin: 1rem 0; .variable-title, .variable-input { float: left; } .variable-title { line-height: 30px; text-align: right; padding-right: 20px; .star { color: red; } } .variable-input { width: 41%; input { width: 100%; height: 30px; } select { height: 32px; } .data-source-name-select { width: 100%; border: 1px solid #C4C6CF; height: 30px; } .monitor-point-name-select { width: calc(100% - 31px); } .open-monitor-btn { height: 30px; width: 30px; background-color: white; border: 1px solid #b5c2ca; cursor: pointer; span { color: #3695FF; } } button[disabled] { border: 1px solid #C4C6CF; background-color: #F2F3F7; height: 30px; } } button { height: 30px; line-height: 30px; margin-left: 5px; } } } .searchInput-variableName{ width: 100% !important; } .margin-right-15 { .var-btn:not(:last-child) { margin-right: 15px; } } .var-btn { display: inline-block; text-align: center; font-size: 14px; min-width: 80px; padding: 0 10px; transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out, -webkit-box-shadow .15s ease-in-out; } .var-btn:hover { cursor: pointer; } .var-btn-default { height: 34px; line-height: 34px; } .var-btn-save { color: white; background-color: #3695FF; border: 1px solid #3695ff; } .input-group { .form-control { padding-right: 16px; } .var-form-control { height: 34px; padding: 0 2rem 0 1.25rem; } .form-control-search { position: absolute; z-index: 4; right: 10px; display: block; width: 16px; height: 16px; line-height: 34px; text-align: center; pointer-events: none; color: #aaa; } ::ng-deep { .ng-select { width: 100%; .ng-select-container { height: 32px; } } } } select:required:invalid { color: gray !important; } option[disabled] { display: none !important; } option { color: black !important; } .tips-primary { font-size: 14px; color: #000; opacity: .6; margin-right: 10px; } .tips-secondary { font-size: 12px; margin-top: 3px; opacity: .3; } .selected-monitoring-point-content { width: 100%; background: #f2f3f8; margin-top: 10px; padding: 10px 10px 0; } .selected-monitoring-point { height: 32px; line-height: 32px; padding: 0 12px; position: relative; float: left; background: #E2E4E8; margin-right: 10px; margin-bottom: 10px; span { float: left; margin-right: 5px; } } .fcloud-cancel { float: left; line-height: 30px; color: #A0A2AD; cursor: pointer; } .fcloud-cancel:before { color: #A0A2AD; }"]}]}],"members":{"configureId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":25,"character":5}}]}],"variableImportEvent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":26,"character":5}}]}],"dataTable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":27,"character":5},"arguments":["batchImportDataTable",{"static":true}]}]}],"paginator":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":28,"character":5},"arguments":["paginator",{"static":false}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":39,"character":26},{"__symbolic":"reference","module":"../../../../../../shared/service-proxies/service-proxies","name":"DataSourceServiceProxy","line":40,"character":44},{"__symbolic":"reference","module":"../../../../../../shared/service-proxies/service-proxies","name":"VariableServiceProxy","line":41,"character":42},{"__symbolic":"reference","module":"../../../../../../shared/fbox/fbox/dataType.service","name":"DataTypeService","line":42,"character":42},{"__symbolic":"reference","module":"../../../../../../shared/service-proxies/service-proxies","name":"FBoxVariableServiceProxy","line":43,"character":46},{"__symbolic":"reference","module":"ngx-bootstrap","name":"BsModalService","line":44,"character":39},{"__symbolic":"reference","module":"ngx-bootstrap","name":"BsModalRef","line":45,"character":37}]}],"loadDataSource":[{"__symbolic":"method"}],"onDataSourceChange":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"clear":[{"__symbolic":"method"}],"close":[{"__symbolic":"method"}],"refresh":[{"__symbolic":"method"}],"getRefVariablesAndGroup":[{"__symbolic":"method"}],"getVariableGroup":[{"__symbolic":"method"}],"getRefVariables":[{"__symbolic":"method"}],"removeSelectedRefVariable":[{"__symbolic":"method"}],"importAllRefVariables":[{"__symbolic":"method"}],"importSelectedRefVariables":[{"__symbolic":"method"}],"batchImportVariableCheck":[{"__symbolic":"method"}],"batchImportVariable":[{"__symbolic":"method"}],"imported":[{"__symbolic":"method"}],"formatDataType":[{"__symbolic":"method"}]}}}}]