@flexem/fc-gui 3.0.0-alpha.97 → 3.0.0-alpha.99

package/elements/alarm/alarm-element.js

@@ -151,7 +151,6 @@ export class AlarmElement extends ConditionalDisplayElement {
         }
         fontString += this.model.generalSetting.headerFont.fontSize + ' ' + this.model.generalSetting.headerFont.fontFamily;
         tr.style.cssText = `height: ${this.model.heights[0]}px;
-            background: ${this.model.generalSetting.headerFillColor};
             color: ${this.model.generalSetting.headerFont.color};
             font: ${fontString};
             text-align: ${this.model.generalSetting.headerFont.textAlign};
@@ -171,7 +170,6 @@ export class AlarmElement extends ConditionalDisplayElement {
         for (let row = 0; row < this.pageSize; row++) {
             tr = document.createElement('tr');
             tr.style.cssText = `height: ${this.model.heights[row + 1]}px;
-                    background: ${this.model.generalSetting.tableFillColor};
                     font: ${this.model.generalSetting.fontStyle};
                     color: ${this.model.generalSetting.fontColor};
                     text-align: ${this.model.generalSetting.textAlign};
@@ -251,18 +249,18 @@ export class AlarmElement extends ConditionalDisplayElement {
         }
         const buttonWidth = this.displayOption.operationButtonWidth + 'px', buttonHeight = this.displayOption.operationButtonHeight + 'px';
         operationArea.append('button').style('width', buttonWidth).style('height', buttonHeight).style('border', 'none')
-            .style('float', 'right').style('background', 'white').style('background-image', 'url(assets/img/last_page.svg)')
+            .style('float', 'right').style('background-image', 'url(assets/img/last_page.svg)')
             .on('click', () => { this.loadLastPage(); });
         operationArea.append('button').style('width', buttonWidth).style('height', buttonHeight).style('border', 'none')
-            .style('float', 'right').style('background', 'white').style('background-image', 'url(assets/img/next_page.svg)')
+            .style('float', 'right').style('background-image', 'url(assets/img/next_page.svg)')
             .style('margin', `0 ${this.displayOption.operationButtonMargin}px 0 0`)
             .on('click', () => { this.loadNextPage(); });
         operationArea.append('button').style('width', buttonWidth).style('height', buttonHeight).style('border', 'none')
-            .style('float', 'right').style('background', 'white').style('background-image', 'url(assets/img/previous_page.svg)')
+            .style('float', 'right').style('background-image', 'url(assets/img/previous_page.svg)')
             .style('margin', `0 ${this.displayOption.operationButtonMargin}px 0 0`)
             .on('click', () => { this.loadPreviousPage(); });
         operationArea.append('button').style('width', buttonWidth).style('height', buttonHeight).style('border', 'none')
-            .style('float', 'right').style('background', 'white').style('background-image', 'url(assets/img/first_page.svg)')
+            .style('float', 'right').style('background-image', 'url(assets/img/first_page.svg)')
             .style('margin', `0 ${this.displayOption.operationButtonMargin}px 0 0`)
             .on('click', () => { this.loadFirstPage(); });
         this.setStatusAsNormal();

package/elements/historical-curve/historical-curve.element.d.ts

@@ -32,6 +32,8 @@ export declare class HistoricalCurveElement extends ConditionalDisplayElement {
     private elementStatus;
     private chartElement;
     private isMobileMode;
+    private data;
+    private timer;
     constructor(element: HTMLElement, injector: Injector, permissionChecker: PermissionChecker, variableCommunicator: VariableCommunicator, variableStore: VariableStore, historyDataStore: HistoryDataStore, signalRAppId: string);
     dispose(): void;
     private getValidTimePeriods;
@@ -40,6 +42,7 @@ export declare class HistoricalCurveElement extends ConditionalDisplayElement {
     private reRenderElement;
     private renderElement;
     private renderChart;
+    initPoint(): void;
     private getLineChart;
     private getMultiBarWithFocusChart;
     private renderCommonProperty;

package/elements/historical-curve/historical-curve.element.js

@@ -29,6 +29,7 @@ export class HistoricalCurveElement extends ConditionalDisplayElement {
             operationButtonMargin: 4
         };
         this.elementStatus = HistoricalCurveElementStatus.Loading;
+        this.data = [];
         this.logger = injector.get(LOGGER_SERVICE_TOKEN);
         this.localization = injector.get(LOCALIZATION);
         this.timePeriods = this.getValidTimePeriods();
@@ -140,6 +141,7 @@ export class HistoricalCurveElement extends ConditionalDisplayElement {
             each(result, v => values.push({ x: moment(v.time).local().toDate().valueOf(), y: v.values[key] }));
             data.push({ key: channel.name, area: channel.projectEnabled, values: values });
         });
+        this.data = data;
         nv.addGraph(() => {
             if (this.model.displaySetting.curveType === CurveType.BarGroup || this.model.displaySetting.curveType === CurveType.BarStack) {
                 return this.getMultiBarWithFocusChart(chartWidth, chartHeight, data);
@@ -149,6 +151,50 @@ export class HistoricalCurveElement extends ConditionalDisplayElement {
             }
         });
     }
+    initPoint() {
+        try {
+            const legendList = this.$element
+                .find('.nv-legend')
+                .find('.nv-series');
+            let hiddenCount = 0;
+            for (let i = 0; i < this.data.length; i++) {
+                const channel = this.model.dataSetting.channels[i];
+                if (legendList.eq(i).children().eq(0).css('fill-opacity') === '1') {
+                    const pointList = this.$element
+                        .find('.nv-scatterWrap')
+                        .find('.nv-series-' + (i - hiddenCount))
+                        .find('.nv-point');
+                    if (pointList && pointList.length) {
+                        for (let j = 0; j < pointList.length; j++) {
+                            const point = pointList.eq(j);
+                            const previousPoint = pointList.eq(j - 1);
+                            if (j && point.attr('transform').split(',')[1] !== previousPoint.attr('transform').split(',')[1]) {
+                                if (channel.enablePoint && channel.pointColor) {
+                                    const pointStyle = {
+                                        'stroke-opacity': 1,
+                                        'stroke-width': '2px',
+                                        'stroke': channel.pointColor,
+                                        'fill-opacity': 1,
+                                        'fill': channel.pointColor
+                                    };
+                                    point.addClass('nv-mark-point');
+                                    point.css(pointStyle);
+                                    previousPoint.addClass('nv-mark-point');
+                                    previousPoint.css(pointStyle);
+                                }
+                            }
+                        }
+                    }
+                }
+                else {
+                    hiddenCount++;
+                }
+            }
+        }
+        catch (e) {
+            console.log(e);
+        }
+    }
     getLineChart(chartWidth, chartHeight, data) {
         const chart = nv.models.lineChart().showLegend(true)
             .margin({ top: 0, bottom: 0, left: this.displayOption.marginLeft, right: this.displayOption.marginRight })
@@ -164,6 +210,19 @@ export class HistoricalCurveElement extends ConditionalDisplayElement {
         }
         this.renderCommonProperty(chart, chartWidth, chartHeight, data);
         this.renderOperationArea(chartWidth, chartHeight);
+        this.initPoint();
+        chart.legend.dispatch.on('legendClick', () => {
+            setTimeout(() => {
+                this.$element.find('.nv-mark-point').css({
+                    'stroke-opacity': 0,
+                    'stroke-width': 0,
+                    'stroke': 'unset',
+                    'fill-opacity': 0,
+                    'fill': 'unset'
+                }).removeClass('nv-mark-point');
+                this.initPoint();
+            }, 1);
+        });
         return chart;
     }
     getMultiBarWithFocusChart(chartWidth, chartHeight, data) {
@@ -207,6 +266,18 @@ export class HistoricalCurveElement extends ConditionalDisplayElement {
         chart.tooltip.headerFormatter(d => this.timeFormat(d, '%x %X'));
         if (this.model.displaySetting.showAxis) {
             chart.xAxis.showMaxMin(true).tickFormat(d => {
+                this.$element.find('.nv-mark-point').css({
+                    'stroke-opacity': 0,
+                    'stroke-width': 0,
+                    'stroke': 'unset',
+                    'fill-opacity': 0,
+                    'fill': 'unset'
+                }).removeClass('nv-mark-point');
+                clearTimeout(this.timer);
+                this.timer = undefined;
+                this.timer = setTimeout(() => {
+                    this.initPoint();
+                }, 100);
                 if (this.currentTimePeriod === 3 || this.currentTimePeriod === 4 || this.currentTimePeriod === 5) {
                     return this.timeFormat(d, '%y-%m-%d');
                 }
@@ -341,27 +412,31 @@ export class HistoricalCurveElement extends ConditionalDisplayElement {
             .append('foreignObject').attr('width', chartWidth).attr('height', this.displayOption.operationAreaHeight).attr('fill', 'none')
             .append('xhtml:div').style('height', (this.displayOption.operationAreaHeight - 4) + 'px').style('overflow', 'hidden').style('margin-top', '4px');
         const selectElement = operationArea.append('select').style('margin-left', this.displayOption.marginLeft + 'px')
+            .style('background-color', 'inherit')
             .style('font-size', this.displayOption.operationSelectFontSize).on('change', () => {
             const displayTimePeriod = this.rootElement.select('select').property('value');
             this.updateTimeRange(displayTimePeriod);
             this.reRenderElement(this.startTime, this.endTime, this.displayOption.dataLimit, HistoricalCurveTimeRange.BeginOpenEndOpen);
         });
+        const rect = this.$element.parent().parent().find('rect');
+        const fillColor = rect.attr('fill');
         const options = selectElement.selectAll('option').data(this.timePeriods).enter().append('option');
-        options.text(d => d.name).attr('value', d => d.key).property('selected', d => d.key === Number(this.currentTimePeriod));
+        options.text(d => d.name).attr('value', d => d.key).property('selected', d => d.key === Number(this.currentTimePeriod))
+            .style('background-color', fillColor);
         const buttonWidth = this.displayOption.operationButtonWidth + 'px', buttonHeight = this.displayOption.operationButtonHeight + 'px';
         operationArea.append('button').style('width', buttonWidth).style('height', buttonHeight).style('border', 'none')
-            .style('float', 'right').style('background', 'white').style('background-image', 'url(assets/img/last_page.svg)')
+            .style('float', 'right').style('background-image', 'url(assets/img/last_page.svg)')
             .on('click', () => { this.loadLastPage(); });
         operationArea.append('button').style('width', buttonWidth).style('height', buttonHeight).style('border', 'none')
-            .style('float', 'right').style('background', 'white').style('background-image', 'url(assets/img/next_page.svg)')
+            .style('float', 'right').style('background-image', 'url(assets/img/next_page.svg)')
             .style('margin', `0 ${this.displayOption.operationButtonMargin}px 0 0`)
             .on('click', () => { this.loadNextPage(); });
         operationArea.append('button').style('width', buttonWidth).style('height', buttonHeight).style('border', 'none')
-            .style('float', 'right').style('background', 'white').style('background-image', 'url(assets/img/previous_page.svg)')
+            .style('float', 'right').style('background-image', 'url(assets/img/previous_page.svg)')
             .style('margin', `0 ${this.displayOption.operationButtonMargin}px 0 0`)
             .on('click', () => { this.loadPreviousPage(); });
         operationArea.append('button').style('width', buttonWidth).style('height', buttonHeight).style('border', 'none')
-            .style('float', 'right').style('background', 'white').style('background-image', 'url(assets/img/first_page.svg)')
+            .style('float', 'right').style('background-image', 'url(assets/img/first_page.svg)')
             .style('margin', `0 ${this.displayOption.operationButtonMargin}px 0 0`)
             .on('click', () => { this.loadFirstPage(); });
     }

package/elements/historical-curve/historical-curve.element.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"HistoricalCurveElement":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../base/conditional-display-element","name":"ConditionalDisplayElement","line":21,"character":44},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":63,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":64,"character":18},{"__symbolic":"reference","module":"../../service","name":"PermissionChecker","line":65,"character":27},{"__symbolic":"reference","module":"../../communication","name":"VariableCommunicator","line":66,"character":30},{"__symbolic":"reference","module":"../../config","name":"VariableStore","line":67,"character":23},{"__symbolic":"reference","module":"../../config","name":"HistoryDataStore","line":68,"character":43},{"__symbolic":"reference","name":"string"}]}],"dispose":[{"__symbolic":"method"}],"getValidTimePeriods":[{"__symbolic":"method"}],"updateTimeRange":[{"__symbolic":"method"}],"updateQueryTimeRange":[{"__symbolic":"method"}],"reRenderElement":[{"__symbolic":"method"}],"renderElement":[{"__symbolic":"method"}],"renderChart":[{"__symbolic":"method"}],"getLineChart":[{"__symbolic":"method"}],"getMultiBarWithFocusChart":[{"__symbolic":"method"}],"renderCommonProperty":[{"__symbolic":"method"}],"renderOperationArea":[{"__symbolic":"method"}],"timeFormat":[{"__symbolic":"method"}],"loadFirstPage":[{"__symbolic":"method"}],"loadNextPage":[{"__symbolic":"method"}],"loadPreviousPage":[{"__symbolic":"method"}],"loadLastPage":[{"__symbolic":"method"}],"initElementStatus":[{"__symbolic":"method"}],"updateElementStatus":[{"__symbolic":"method"}],"setStatusAsUnbound":[{"__symbolic":"method"}],"setStatusAsLoading":[{"__symbolic":"method"}],"setStatusAsLoadFailed":[{"__symbolic":"method"}],"renderStatus":[{"__symbolic":"method"}],"clearStatus":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"HistoricalCurveElement":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../base/conditional-display-element","name":"ConditionalDisplayElement","line":21,"character":44},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":65,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":66,"character":18},{"__symbolic":"reference","module":"../../service","name":"PermissionChecker","line":67,"character":27},{"__symbolic":"reference","module":"../../communication","name":"VariableCommunicator","line":68,"character":30},{"__symbolic":"reference","module":"../../config","name":"VariableStore","line":69,"character":23},{"__symbolic":"reference","module":"../../config","name":"HistoryDataStore","line":70,"character":43},{"__symbolic":"reference","name":"string"}]}],"dispose":[{"__symbolic":"method"}],"getValidTimePeriods":[{"__symbolic":"method"}],"updateTimeRange":[{"__symbolic":"method"}],"updateQueryTimeRange":[{"__symbolic":"method"}],"reRenderElement":[{"__symbolic":"method"}],"renderElement":[{"__symbolic":"method"}],"renderChart":[{"__symbolic":"method"}],"initPoint":[{"__symbolic":"method"}],"getLineChart":[{"__symbolic":"method"}],"getMultiBarWithFocusChart":[{"__symbolic":"method"}],"renderCommonProperty":[{"__symbolic":"method"}],"renderOperationArea":[{"__symbolic":"method"}],"timeFormat":[{"__symbolic":"method"}],"loadFirstPage":[{"__symbolic":"method"}],"loadNextPage":[{"__symbolic":"method"}],"loadPreviousPage":[{"__symbolic":"method"}],"loadLastPage":[{"__symbolic":"method"}],"initElementStatus":[{"__symbolic":"method"}],"updateElementStatus":[{"__symbolic":"method"}],"setStatusAsUnbound":[{"__symbolic":"method"}],"setStatusAsLoading":[{"__symbolic":"method"}],"setStatusAsLoadFailed":[{"__symbolic":"method"}],"renderStatus":[{"__symbolic":"method"}],"clearStatus":[{"__symbolic":"method"}]}}}}]

package/elements/video/video-element.js

@@ -113,7 +113,12 @@ export class VideoElement extends ConditionalDisplayElement {
             else if (isIos) {
                 this.setIosVideo(this.videoUrl, videoId);
             }
-            this.videoPlayer = new EZUIPlayer(videoId);
+            try {
+                this.videoPlayer = new EZUIPlayer(videoId);
+            }
+            catch (err) {
+                console.log(err);
+            }
         }, 1000);
         const style = document.createElement('style');
         style.innerHTML = `#${videoId}::-webkit-media-controls-enclosure {

package/modal/write-value/write-value-modal.component.js

@@ -110,13 +110,24 @@ let WriteValueModalComponent = class WriteValueModalComponent {
                 value = this.formatWriteValue();
             }
         }
+        if (!this.args.releasedVariableService) {
+            this.onClosed({
+                value: value,
+                showValue: showValue,
+                enableNumericalOperation: false,
+                isNumericalOperation: this.isNumericalOperation,
+                variableRwType: 6
+            });
+            return;
+        }
         this.args.releasedVariableService.getVariableWithValueTransform(this.variableName).subscribe(result => {
             const valueTransform = JSON.parse(result.valueTransform);
             if ((valueTransform === null || valueTransform === void 0 ? void 0 : valueTransform.Type) !== 0) {
                 this.isNumericalOperation = true;
             }
             this.onClosed({
-                value, showValue,
+                value: value,
+                showValue: showValue,
                 enableNumericalOperation: this.enableNumericalOperation,
                 isNumericalOperation: this.isNumericalOperation,
                 variableRwType: result.variableRwType

package/model/historical-curve/historical-curve-chanel.model.d.ts

@@ -7,6 +7,14 @@ export interface HistroicalCurveChannelModel {
      * 连接线颜色
      */
     readonly connectorColor: string;
+    /**
+     * 启用标记点
+     */
+    readonly enablePoint: boolean;
+    /**
+     * 标记点颜色
+     */
+    readonly pointColor: string;
     /**
      * 是否投影颜色
      */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"main": "bundles/fc-gui.umd.js",
-	"version": "3.0.0-alpha.97",
+	"version": "3.0.0-alpha.99",
 	"module": "public_api.js",
 	"typings": "public_api.d.ts",
 	"license": "UNLICENSED",