commit

04.系统编码/Frontend/src/components/MicrowaveRadiation.vue

@@ -1,4 +1,5 @@
 <template>
+    <canvas id="myCanvas"></canvas>
     <div class="tabs">
         <div class="tab-item" @click="onTabClick('MWR')" :class="{'active': currentTab === 'MWR'}">
             质控对比
@@ -131,6 +132,7 @@
                             :initial-index="0"
                             fit="contain"
                             @load="onImageLoad"
+                            @mousemove="onImageMove"
                         >
                             <template #error>
                                 <div class="image-slot">
@@ -198,6 +200,7 @@
     import { MicrowaveRadiationConfig } from '../uilts/Config';
     import { post, get } from '../uilts/axios';
     import {BoxDrawer, ColorChart} from "../uilts/box-drawer";
+    import {ElMessage} from "element-plus";
     
     export default {
         name: 'MicrowaveRadiation',
@@ -205,7 +208,6 @@
             let timer = null;
 
             let options = reactive({
-                selectionTime: 6,
                 currentTab: 'MWR',
                 currentRegion: 'jiangning',
                 currentType: 'TEMP',
@@ -225,10 +227,10 @@
                 index: 0,
                 downloadSrc: null,
                 contrast: {
-                    noQCImgUrl: '/images/picture.png',
+                    noQCImgUrl: '',
-                    noQCImgPreview: ['/images/picture.png'],
+                    noQCImgPreview: [],
-                    checkImgUrl: '/images/picture.png',
+                    checkImgUrl: '',
-                    checkImgPreview: ['/images/picture.png'],
+                    checkImgPreview: [],
                     fillingImgUrl: '/images/picture.png',
                     fillingImgPreview: ['/images/picture.png']
                 },
@@ -240,6 +242,8 @@
             })
 
             onMounted(() => {
+                reloadQualityComparison()
+                reloadQualityInterpolation()
                 initTimeLine()
                 initHours();
                 setTimeout(() => {
@@ -313,6 +317,7 @@
                 options.apiTimeInterval = apiTimeInterval;
                 options.apiTimeLength = apiTimeLength;
                 options.currentElement = element;
+
                 initTimeLine()
                 // if (options.currentTab === 'MWR')
                 //     activeContrastImage();
@@ -429,33 +434,24 @@
             //初始化时间轴
             const initTimeLine = () => {
                 options.times = [];
-                let changeSelectionTime = null;
-                if (options. currentElement === 'six-minute') {
-                    options.selectionTime = 6
-                    changeSelectionTime = 2
-                } else if (options. currentElement === 'half-hour') {
-                    options.selectionTime = 30
-                    changeSelectionTime = 10
-                } else {
-                    options.selectionTime = 60
-                    changeSelectionTime = 20
-                }
                 options.currentTime = moment(options.date).hour(parseInt(options.currentHour)).minute(options.currentElement === 'six-minute' ? 30 : 0).format('YYYY-MM-DD HH:mm:ss');
                 options.titleEndTime = options.currentTime
-                let now = moment(options.date).hour(parseInt(options.currentHour) - changeSelectionTime).minute(options.currentElement === 'six-minute' ? 36 : 30);
+                let now = moment(options.date).hour(parseInt(options.currentHour) + options.apiTimeLength).minute(options.currentElement === 'six-minute' ? 36 : 30);
                 let minute = now.minute();
-                const remainder = minute %  options.selectionTime;
+                const remainder = minute %  options.apiTimeInterval;
                 if (remainder > 0){
-                    now.minute(minute + ( options.selectionTime - remainder));
+                    now.minute(minute + ( options.apiTimeInterval - remainder));
                 }
-                now.minute(now.minute() -  options.selectionTime);
+                now.minute(now.minute() -  options.apiTimeInterval);
+
                 for (let i = 0; i < 20 ; i++) {
                     options.times.push({
-                        hour: now.add(options.selectionTime, 'minute').format('HH时'),
+                        hour: now.add(options.apiTimeInterval, 'minute').format('HH时'),
                         minute: now.format('mm'),
                         date: now.format('YYYY-MM-DD HH:mm:00')
                     });
                 }
+
                 options.index = options.times.length - 1;
                 options.titleStartTime = options.times[0].date
 
@@ -490,23 +486,9 @@
             const onTimeClick = (time, index) => {
               options.currentTime = time.date;
               reloadQualityComparison();
-                // let changeTimeLineHour = null
-                // let changeTimeLineMinute = null
-                // if ( options.currentElement === 'six-minute') {
-                //     changeTimeLineHour = -2
-                //     changeTimeLineMinute = 6
-                // }
-                // else if ( options.currentElement === 'half-hour') {
-                //     changeTimeLineHour = -12
-                //     changeTimeLineMinute = 30
-                // }
-                // else {
-                //     changeTimeLineHour = -24
-                //     changeTimeLineMinute = 60
-                // }
                 // options.currentTime = time.date;
-                // options.titleStartTime = moment(time.date).add(changeTimeLineHour, 'h').add(changeTimeLineMinute, 'm').format('YYYY-MM-DD HH:mm:ss')
+                options.titleStartTime = moment(time.date).add(options.apiTimeLength, 'h').add(options.apiTimeInterval, 'm').format('YYYY-MM-DD HH:mm:ss')
-                // options.titleEndTime = time.date
+                options.titleEndTime = time.date
                 // options.index = index;
                 // test()
                 // cancelActive();
@@ -525,15 +507,18 @@
             //     options.isPlay = false;
             // }
 
+            //上一天
             const onPrevDayClick = () => {
                 options.date = moment(options.date).add(-1, 'day').format('YYYY-MM-DD');
-                options.titleStartTime =  moment(options.date).hour(parseInt(options.currentHour)).minute(options.currentElement === 'six-minute' ? 30 : 0).format('YYYY-MM-DD HH:mm:ss');
+                options.titleStartTime = moment(options.date).hour(parseInt(options.currentHour) + options.apiTimeLength).minute(options.currentElement === 'six-minute' ? 36 : 30).format('YYYY-MM-DD HH:mm:ss');
+                options.titleEndTime = moment(options.date).hour(parseInt(options.currentHour)).minute(options.currentElement === 'six-minute' ? 30 : 0).format('YYYY-MM-DD HH:mm:ss');
             }
 
+            //下一天
             const onNextDayClick = () => {
                 options.date = moment(options.date).add(1, 'day').format('YYYY-MM-DD');
-                options.titleStartTime =  moment(options.date).hour(parseInt(options.currentHour)).format('YYYY-MM-DD HH:mm')
+                options.titleStartTime = moment(options.date).hour(parseInt(options.currentHour) + options.apiTimeLength).minute(options.currentElement === 'six-minute' ? 36 : 30).format('YYYY-MM-DD HH:mm:ss');
-
+                options.titleEndTime = moment(options.date).hour(parseInt(options.currentHour)).minute(options.currentElement === 'six-minute' ? 30 : 0).format('YYYY-MM-DD HH:mm:ss');
             }
 
             const onPrevImgClick = () => {
@@ -675,19 +660,44 @@
               }
             })
           }
+
           // 重新加载质控对比数据
           const reloadQualityComparison = () => {
             const startTime = moment(options.currentTime).add(options.apiTimeLength, 'h').add(options.apiTimeInterval, 'm');
             const params = prepareApiParams(401, startTime, moment(options.currentTime));
             get('/njplatform/radardata/getOriginRangeData',params,'http://rdp.nagr.com.cn:18080').then((response: any)=> {
               if (response.code != 200){
-                // 弹出提示框
+                ElMessage.error({
+                  message: "请求失败",
+                  type: 'error'
+                })
                 return;
               }
 
-              console.log(response)
+              console.log(response);
-              let boxDrawer = new BoxDrawer(1500, 500, prepareTmpOriginalColors(), response.data);
+              let boxDrawer = new BoxDrawer(1500, 500, prepareTmpOriginalColors(), response.data, 'myCanvas');
               options.contrast.noQCImgUrl = boxDrawer.base64Image;
+              options.contrast.noQCImgPreview = [boxDrawer.base64Image]
+              options.contrast.checkImgUrl = boxDrawer.base64Image
+              options.contrast.checkImgPreview = [boxDrawer.base64Image]
+
+            })
+          }
+
+          const reloadQualityInterpolation = () => {
+            const startTime = moment(options.currentTime).add(options.apiTimeLength, 'h').add(options.apiTimeInterval, 'm');
+            const params = prepareApiParams(401, startTime, moment(options.currentTime));
+            get('/njplatform/radardata/getBpRangeData',params,'http://rdp.nagr.com.cn:18080').then((response: any)=> {
+              if (response.code != 200){
+                ElMessage.error({
+                  message: "请求失败",
+                  type: 'error'
+                })
+                return;
+              }
+              let boxDrawer = new BoxDrawer(1500, 500, prepareTmpOriginalColors(), response.data, null);
+                options.contrast.fillingImgUrl = boxDrawer.base64Image;
+                options.contrast.fillingImgPreview = [boxDrawer.base64Image]
             })
           }
 
@@ -705,6 +715,10 @@
             }
           }
 
+          const onImageMove = (e) => {
+              console.log(e);
+          }
+
             return {
                 ...toRefs(options),
                 onTabClick,
@@ -722,7 +736,8 @@
                 onImageLoad,
                 onDownloadClick,
                 onSaveClick,
-                changeColor
+                changeColor,
+                onImageMove
             }
         }
     }
@@ -739,7 +754,6 @@
                     flex-direction: column;
                   :deep(.el-image) {
                     //width: 100%;
-                    border: 5px solid red;
                   }
                   :deep(.el-image__inner) {
                     width: 100%;

04.系统编码/Frontend/src/uilts/box-drawer.ts

@@ -1,10 +1,15 @@
 import moment from "moment";
 import {h} from "vue";
+import {urlRE} from "vite/dist/node/utils/cssUtils";
 
 export class BoxDrawer{
 
     private canvas: any = null;
     private canvasContext: any = null;
+    private targetCanvas: any = null;
+    private targetCanvasContext: any = null;
+    // private canvasContext3d: any = null;
+
     private borderWidth: number = 0;
     private borderHeight: number = 0;
 
@@ -31,7 +36,13 @@ export class BoxDrawer{
     private paddingColorLeft: number = 50;
     private defaultColorWidth: number = 30;
 
-    constructor(width: number, height: number, colorChart: ColorChart, values: any) {
+    // private boxes: any = [];
+    private calc: Calc = null;
+    private box: Box = null;
+
+    constructor(width: number, height: number, colorChart: ColorChart, values: any, id: string) {
+        if (id == null) return;
+
         this.width = width;
         this.height = height;
         this.colorChart = colorChart;
@@ -41,6 +52,8 @@ export class BoxDrawer{
         this.drawCoordinate();
         this.drawColorChart();
         this.draw();
+
+        this.setTargetCanvas(id);
         this.base64Image = this.canvas.toDataURL();
     }
 
@@ -71,7 +84,6 @@ export class BoxDrawer{
                 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);
                 }
@@ -88,8 +100,12 @@ export class BoxDrawer{
     private draw(): void{
         let startX = this.paddingLeft + this.horizontalScaleLine - this.verticalScaleIntervalLength / 2;
         let startY = this.paddingTop + this.verticalScaleLine - this.horizontalScaleIntervalLength / 2;
+
+        let boxes = [];
         for(let dataIndex = 0, len = this.values.radar_data.length, lastDataLen = len - 1; dataIndex < len; dataIndex++){
             let value = this.values.radar_data[dataIndex];
+
+            let rows = [];
             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);
@@ -110,12 +126,22 @@ export class BoxDrawer{
                     height = height / 2;
                 }
 
-                let color = this.colorChart.getColor(value[this.values.radar_info[infoIndex].col_name]);
+                let radarInfo = this.values.radar_info[infoIndex];
+                let targetValue = value[radarInfo.col_name];
+                let color = this.colorChart.getColor(targetValue);
                 if (color == null) continue;
                 this.canvasContext.fillStyle = color;
                 this.canvasContext.fillRect(x, y, width, height);
+                rows.push(new Box(x, y, width, height, targetValue, radarInfo.col_factor, value.data_time, radarInfo.col_unit));
             }
+            boxes.push(rows);
         }
+        this.createCalc(boxes);
+    }
+
+    private createCalc(boxes: any): void{
+        this.calc = new Calc(this.width, this.height, this.paddingLeft + this.verticalScaleLine, this.paddingTop + this.horizontalScaleLine,
+            this.paddingRight + this.horizontalScaleLine, this.paddingBottom + this.verticalScaleLine, boxes);
     }
 
     private resetValues() : void{
@@ -135,9 +161,52 @@ export class BoxDrawer{
         this.canvas.height = this.height;
         this.canvasContext = this.canvas.getContext('2d');
 
+        this.fillBackground();
         this.resetValues();
     }
 
+    private setTargetCanvas(id): void{
+        this.targetCanvas = document.getElementById(id);
+        this.targetCanvas.width = this.width;
+        this.targetCanvas.height = this.height;
+        this.targetCanvasContext = this.targetCanvas.getContext('2d');
+        // canvasContext.drawImage(this.canvas, 0, 0, 1500, 500);
+        this.copyCanvas();
+        this.bindMoveEvent();
+    }
+
+    private copyCanvas(): void{
+        const imgData= this.canvasContext.getImageData(0,0, this.width, this.height);
+        this.targetCanvasContext.putImageData(imgData, 0, 0);
+    }
+
+    private bindMoveEvent(): void{
+        this.targetCanvas.addEventListener('mousemove', (e) => {
+            let box = this.calc.calc(e.offsetX, e.offsetY);
+            if (box == null) {
+                if (this.box != null){
+                    this.copyCanvas();
+                    this.box = null;
+                }
+                return;
+            }
+
+            if (this.box != null){
+                if (this.box.id == box.id) return;
+                this.copyCanvas();
+                this.box = null;
+            }
+
+            box.show(this.targetCanvasContext);
+            this.box = box;
+        })
+    }
+
+    private fillBackground(): void{
+        this.canvasContext.fillStyle = 'white'
+        this.canvasContext.fillRect(0,0, this.width,this.height)
+    }
+
     private drawCoordinate(): void{
         this.drawBorder();
         this.drawVerticalScale();
@@ -167,7 +236,7 @@ export class BoxDrawer{
             this.canvasContext.stroke();
 
             if (flag){
-                this.canvasContext.font = "normal 36px Verdana";
+                this.canvasContext.font = "normal 20px Verdana";
                 this.canvasContext.fillStyle = "#000000";
                 const text = moment(this.values.radar_data[index].data_time).format("HH:mm");
                 this.canvasContext.fillText(text, _x -  this.canvasContext.measureText(text).width / 2, startY + yInterval + this.borderHeight + 36);
@@ -196,23 +265,22 @@ export class BoxDrawer{
             this.canvasContext.stroke();
 
             if (flag){
-                this.canvasContext.font = "normal 36px Verdana";
+                this.canvasContext.font = "normal 20px Verdana";
                 this.canvasContext.fillStyle = "#000000";
                 const text = this.values.radar_info[index].col_factor;
-                this.canvasContext.fillText(text, startX - this.canvasContext.measureText(text).width - this.horizontalScaleLine,  _y + 18);
+                this.canvasContext.fillText(text, startX - this.canvasContext.measureText(text).width - this.horizontalScaleLine,  _y + 10);
             }
         }
     }
 
     private setScaleStyle(isSpecial: boolean): void{
         if (isSpecial){
-            this.canvasContext.lineWidth = 5;
+            this.canvasContext.lineWidth = 3;
-            this.canvasContext.strokeStyle = '#F41006';
+            this.canvasContext.strokeStyle = '#101010';
             return;
         }
-
         this.canvasContext.lineWidth = 2;
-        this.canvasContext.strokeStyle = '#444';
+        this.canvasContext.strokeStyle = '#5e5e5e';
     }
 
     private drawBorder(): void{
@@ -274,4 +342,138 @@ export class ColorChart{
         }
         return null;
     }
+}
+
+interface IBox {
+    show(canvasContext: any);
+}
+
+class Box implements IBox{
+    id: string = null;
+
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+
+    value: number;
+    dataHeight: number;
+    time: string;
+    util: string;
+
+    rectWidth: number = 180;
+    rectHeight: number = 80;
+    rectX: number;
+    rectY: number;
+
+    constructor(x: number, y: number, width: number, height: number, value: number, dataHeight: number, time: string, util: string) {
+        this.x = x;
+        this.y = y;
+        this.width = width;
+        this.height = height;
+        this.value = value;
+
+        this.dataHeight = dataHeight;
+        this.time = time;
+        this.util = util;
+
+        this.id = this.uuid();
+    }
+
+    show(canvasContext: any) {
+        this.setSelectStyle(canvasContext);
+        this.setTip(canvasContext);
+    }
+
+    private setTip(canvasContext: any): void{
+        this.setBackground(canvasContext);
+        this.setText(canvasContext);
+    }
+
+    private setBackground(canvasContext: any): void{
+        canvasContext.fillStyle = 'rgba(59, 55, 55, 0.8)';
+        this.rectX = this.x + this.width / 2 - this.rectWidth / 2;
+        this.rectY = this.y - this.height / 2 - this.rectHeight - 10;
+        canvasContext.fillRect(this.rectX, this.rectY, this.rectWidth, this.rectHeight);
+    }
+
+    private setText(canvasContext: any) : void{
+        canvasContext.font = "normal 14px Arial";
+        canvasContext.fillStyle = "#fafafa";
+
+        const centerX = this.rectX + this.rectWidth / 2;
+        const timeText = "time：" + this.time;
+        canvasContext.fillText(timeText, centerX - canvasContext.measureText(timeText).width / 2,  this.rectY + 22);
+        const valueText = 'value：' + this.value;
+        canvasContext.fillText(valueText, centerX - canvasContext.measureText(valueText).width / 2,  this.rectY + 18 + 26);
+        const heightText = 'height：' + this.dataHeight + ' ' + this.util;
+        canvasContext.fillText(heightText, centerX - canvasContext.measureText(heightText).width / 2,  this.rectY + 18 + 18 + 30);
+    }
+
+    private setSelectStyle(canvasContext: any): void{
+        canvasContext.lineWidth = 1;
+        canvasContext.strokeStyle = "#ff0000";
+        canvasContext.strokeRect(this.x, this.y, this.width, this.height);
+    }
+
+    uuid(): string{
+        return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
+            let r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
+            return v.toString(16);
+        });
+    }
+}
+
+class Calc{
+    private readonly width: number;
+    private readonly height: number;
+
+    private readonly paddingLeft: number;
+    private readonly paddingTop: number;
+    private readonly paddingRight: number;
+    private readonly paddingBottom: number;
+
+    private readonly boxWidth: number;
+    private readonly boxHeight: number;
+
+    private xMax: number = null;
+    private yMax: number = null;
+
+    private startX: number = null;
+    private startY: number = null;
+
+    private readonly boxes: any = null;
+
+    constructor(width: number, height: number,
+                paddingLeft: number, paddingTop: number, paddingRight: number, paddingBottom: number, boxes: any) {
+        this.width = width;
+        this.height = height;
+        this.paddingLeft = paddingLeft;
+        this.paddingTop = paddingTop;
+        this.paddingRight = paddingRight;
+        this.paddingBottom = paddingBottom;
+        this.boxes = boxes;
+        this.boxWidth = this.boxes[1][1].width;
+        this.boxHeight = this.boxes[1][1].height;
+
+        this.init();
+    }
+
+    private init(): void{
+        this.xMax = this.width - this.paddingRight;
+        this.yMax = this.height - this.paddingBottom;
+
+        this.startX = this.paddingLeft - this.boxWidth / 2;
+        this.startY = this.paddingTop - this.boxHeight / 2;
+    }
+
+    public calc(x: number, y: number): Box{
+        if (x <= this.paddingLeft || x >= this.xMax || y <= this.paddingTop || y >= this.yMax){
+            return null;
+        }
+
+        const indexX = parseInt(((x - this.startX) * 1.0 / this.boxWidth).toString());
+        const indexY = parseInt(((y - this.startY) * 1.0 / this.boxHeight).toString())
+        return this.boxes[indexX][indexY];
+    }
 }