From 7442c9ea5e907c69597d7aa1da0fc4942c2480a0 Mon Sep 17 00:00:00 2001
From: xiaowuler <xiaowuler@163.com>
Date: Wed, 19 Jan 2022 17:51:41 +0800
Subject: [PATCH] modify some codes

---
 .../Frontend/src/uilts/box-drawer.ts          | 55 +++++++++++++++++--
 1 file changed, 50 insertions(+), 5 deletions(-)

diff --git a/04.系统编码/Frontend/src/uilts/box-drawer.ts b/04.系统编码/Frontend/src/uilts/box-drawer.ts
index 531f029..c5235e8 100644
--- a/04.系统编码/Frontend/src/uilts/box-drawer.ts
+++ b/04.系统编码/Frontend/src/uilts/box-drawer.ts
@@ -28,6 +28,9 @@ export class BoxDrawer{
     private verticalScaleIntervalLength: number = 0;
     private horizontalScaleIntervalLength: number = 0;
 
+    private paddingColorLeft: number = 50;
+    private defaultColorWidth: number = 30;
+
     constructor(width: number, height: number, colorChart: ColorChart, values: any) {
         this.width = width;
         this.height = height;
@@ -36,15 +39,57 @@ export class BoxDrawer{
 
         this.init();
         this.drawCoordinate();
+        this.drawColorChart();
         this.draw();
         this.base64Image = this.canvas.toDataURL();
     }
 
+    private drawColorChart(): void {
+        let startX = this.paddingLeft + this.horizontalScaleLine + this.borderWidth + this.paddingColorLeft;
+        let heightInterval = 0;
+        let startY = this.paddingTop + this.verticalScaleLine + heightInterval;
+        let interval = (this.borderHeight - heightInterval) / (this.colorChart.colors.length)
+        
+        this.canvasContext.font = "normal 18px Verdana";
+        this.canvasContext.fillStyle = "#000000";
+
+        for(let lastLen = this.colorChart.colors.length - 1, index = lastLen; index >= 0; index --){
+            const targetIndex = lastLen - index;
+            const _y = startY + index * interval;
+
+            this.canvasContext.fillStyle = this.colorChart.colors[targetIndex];
+            this.canvasContext.fillRect(startX, _y, this.defaultColorWidth, interval);
+
+            this.canvasContext.fillStyle = "#000000";
+            if (index == 0){
+                if (this.colorChart.showStartValue){
+                    const text = this.colorChart.values[targetIndex + 1];
+                    this.canvasContext.fillText(text, startX + this.defaultColorWidth,  _y + 9);
+                }
+
+                const text = this.colorChart.values[targetIndex];
+                this.canvasContext.fillText(text, startX + this.defaultColorWidth,  _y + interval + 9);
+            }else if (index == lastLen){
+                if (this.colorChart.showEndValue){
+                    console.log("sss")
+                    const text = this.colorChart.values[targetIndex];
+                    this.canvasContext.fillText(text, startX + this.defaultColorWidth,  _y + interval + 9);
+                }
+
+                const text = this.colorChart.values[targetIndex + 1];
+                this.canvasContext.fillText(text, startX + this.defaultColorWidth,  _y + 9);
+            }else{
+                const text = this.colorChart.values[targetIndex];
+                this.canvasContext.fillText(text, startX + this.defaultColorWidth,  _y + interval + 9);
+            }
+        }
+    }
+
     private draw(): void{
         let startX = this.paddingLeft + this.horizontalScaleLine - this.verticalScaleIntervalLength / 2;
         let startY = this.paddingTop + this.verticalScaleLine - this.horizontalScaleIntervalLength / 2;
         for(let dataIndex = 0, len = this.values.radar_data.length, lastDataLen = len - 1; dataIndex < len; dataIndex++){
-            // if (dataIndex > 0) return;
+            let value = this.values.radar_data[dataIndex];
             for(let lastInfoLen = this.values.radar_info.length - 1, infoIndex = lastInfoLen; infoIndex >= 0; infoIndex--){
                 let x = startX + dataIndex * this.verticalScaleIntervalLength;
                 let y = startY + (this.borderHeight - infoIndex * this.horizontalScaleIntervalLength);
@@ -65,7 +110,7 @@ export class BoxDrawer{
                     height = height / 2;
                 }
 
-                let color = this.colorChart.getColor(this.values.radar_data[dataIndex][this.values.radar_info[infoIndex].col_name]);
+                let color = this.colorChart.getColor(value[this.values.radar_info[infoIndex].col_name]);
                 if (color == null) continue;
                 this.canvasContext.fillStyle = color;
                 this.canvasContext.fillRect(x, y, width, height);
@@ -133,7 +178,7 @@ export class BoxDrawer{
     private drawHorizontalScale(): void{
         let scaleCount = this.values.radar_info.length;
         this.horizontalScaleIntervalLength = this.borderHeight / (scaleCount - 1);
-        let scaleSpecial = parseInt((scaleCount * 1.0 / this.verticalScaleSpecialCount).toString());
+        let scaleSpecial = parseInt((scaleCount * 1.0 / this.horizontalScaleSpecialCount).toString());
         let startX = this.paddingLeft + this.horizontalScaleLine;
         let startY = this.paddingTop + this.verticalScaleLine;
         const lastLen = scaleCount - 1;
@@ -189,8 +234,8 @@ export class BoxDrawer{
 
 export class ColorChart{
 
-    private colors: any = null;
-    private values: any = null;
+    public colors: any = null;
+    public values: any = null;
     public showStartValue: boolean = false;
     public showEndValue: boolean = false;