diff --git a/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue b/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue
index 66bca94..768bef9 100644
--- a/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue
+++ b/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue
@@ -1,5 +1,5 @@
 <template>
-    <canvas id="myCanvas"></canvas>
+
     <div class="tabs">
         <div class="tab-item" @click="onTabClick('MWR')" :class="{'active': currentTab === 'MWR'}">
             质控对比
@@ -96,74 +96,60 @@
                 </div>
             </div>
             <div class="picture-view">
-                <span class="arrow arrow-prev" @click="onPrevImgClick"><img src="/images/prev-btn.png" /></span>
-                <span class="arrow arrow-next" @click="onNextImgClick"><img src="/images/next-btn.png" /></span>
-                <span class="save-btn" @click="onSaveClick" v-if="currentTab === 'MWR'"><img src="/images/save.png" /></span>
-                <a :href="downloadImgUrl" download class="save-btn" v-else><img src="/images/save.png" /></a>
-                <div class="download-pictures hide" id="pictures">
-                    <a v-for="(url, index) in urls" :key="index" download></a>
-                </div>
+<!--                <span class="arrow arrow-prev" @click="onPrevImgClick"><img src="/images/prev-btn.png" /></span>-->
+<!--                <span class="arrow arrow-next" @click="onNextImgClick"><img src="/images/next-btn.png" /></span>-->
+<!--                <span class="save-btn" @click="onSaveClick" v-if="currentTab === 'MWR'"><img src="/images/save.png" /></span>-->
+<!--                <a :href="downloadImgUrl" download class="save-btn" v-else><img src="/images/save.png" /></a>-->
+<!--                <div class="download-pictures hide" id="pictures">-->
+<!--                    <a v-for="(url, index) in urls" :key="index" download></a>-->
+<!--                </div>-->
                 <div class="picture-container contrast-picture-container" v-if="currentTab === 'MWR'">
                     <div class="picture">
                         <h2 class="title">{{ titleStartTime }}~{{ titleEndTime }}温度原始数据</h2>
-                        <el-image
-                            :src="contrast.noQCImgUrl"
-                            :preview-src-list="contrast.noQCImgPreview"
-                            :initial-index="0"
-                            fit="contain"
-                            @load="onImageLoad"
-                        >
-                            <template #error>
-                                <div class="image-slot">
-                                    <img src="/images/null-picture.png" />
-                                </div>
-                                <p class="image-tip">暂无图片</p>
-                            </template>
-                            <template #placeholder>
-                                <div class="image-placeholder">正在加载...</div>
-                            </template>
-                        </el-image>
+                        <canvas id="original-data-canvas"></canvas>
+<!--                        <el-image-->
+<!--                            :src="contrast.noQCImgUrl"-->
+<!--                            :preview-src-list="contrast.noQCImgPreview"-->
+<!--                            :initial-index="0"-->
+<!--                            fit="contain"-->
+<!--                            @load="onImageLoad"-->
+<!--                        >-->
+<!--                            <template #error>-->
+<!--                                <div class="image-slot">-->
+<!--                                    <img src="/images/null-picture.png" />-->
+<!--                                </div>-->
+<!--                                <p class="image-tip">暂无图片</p>-->
+<!--                            </template>-->
+<!--                            <template #placeholder>-->
+<!--                                <div class="image-placeholder">正在加载...</div>-->
+<!--                            </template>-->
+<!--                        </el-image>-->
                     </div>
                     <div class="picture">
                         <h2 class="title">{{ titleStartTime }}~{{ titleEndTime }}温度异常值标记</h2>
-                        <el-image
-                            :src="contrast.checkImgUrl"
-                            :preview-src-list="contrast.checkImgPreview"
-                            :initial-index="0"
-                            fit="contain"
-                            @load="onImageLoad"
-                            @mousemove="onImageMove"
-                        >
-                            <template #error>
-                                <div class="image-slot">
-                                    <img src="/images/null-picture.png" />
-                                </div>
-                                <p class="image-tip">暂无图片</p>
-                            </template>
-                            <template #placeholder>
-                                <div class="image-placeholder">正在加载...</div>
-                            </template>
-                        </el-image>
+                        <canvas id="abnormal-canvas"></canvas>
+<!--                        <el-image-->
+<!--                            :src="contrast.checkImgUrl"-->
+<!--                            :preview-src-list="contrast.checkImgPreview"-->
+<!--                            :initial-index="0"-->
+<!--                            fit="contain"-->
+<!--                            @load="onImageLoad"-->
+<!--                            @mousemove="onImageMove"-->
+<!--                        >-->
+<!--                            <template #error>-->
+<!--                                <div class="image-slot">-->
+<!--                                    <img src="/images/null-picture.png" />-->
+<!--                                </div>-->
+<!--                                <p class="image-tip">暂无图片</p>-->
+<!--                            </template>-->
+<!--                            <template #placeholder>-->
+<!--                                <div class="image-placeholder">正在加载...</div>-->
+<!--                            </template>-->
+<!--                        </el-image>-->
                     </div>
                     <div class="picture">
                         <h2 class="title">{{ titleStartTime }}~{{ titleEndTime }}温度野点插补结果</h2>
-                        <el-image
-                            :src="contrast.fillingImgUrl"
-                            :preview-src-list="contrast.fillingImgPreview"
-                            :initial-index="0"
-                            fit="contain"
-                            @load="onImageLoad"
-                        >
-                            <template #error>
-                                <div class="image-slot">
-                                    <img src="/images/null-picture.png" />
-                                </div>
-                                <p class="image-tip">暂无图片</p>
-                            </template>
-                            <template #placeholder>
-                                <div class="image-placeholder">正在加载...</div>
-                            </template>
-                        </el-image>
+                        <canvas id="interpolate-canvas"></canvas>
                     </div>
                 </div>
 
@@ -199,7 +185,7 @@
     import moment from "moment";
     import { MicrowaveRadiationConfig } from '../uilts/Config';
     import { post, get } from '../uilts/axios';
-    import {BoxDrawer, ColorChart} from "../uilts/box-drawer";
+    import {BoxDrawer, ColorChart, createEmptyCanvas} from "../uilts/box-drawer";
     import {ElMessage} from "element-plus";
     
     export default {
@@ -239,7 +225,13 @@
                 titleEndTime: null,
                 apiTimeLength: -2,
                 apiTimeInterval: 6
-            })
+            });
+
+            let drawers = {
+              originalDrawer: null,
+              interpolateDrawer: null,
+              abnormalDrawer: null
+            }
 
             onMounted(() => {
                 reloadQualityComparison()
@@ -521,32 +513,32 @@
                 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 = () => {
-                prevElement();
-            }
-
-            const onNextImgClick = () => {
-                nextElement();
-            }
-
-            const prevElement = () => {
-                let element = getCurrentElement();
+            // const onPrevImgClick = () => {
+            //     prevElement();
+            // }
 
-                options.index--;
-                if (options.index < 0)
-                    options.index = element.childElementCount - 1;
+            // const onNextImgClick = () => {
+            //     nextElement();
+            // }
 
-                setCurrentPlayElement(element);
-            }
+            // const prevElement = () => {
+            //     let element = getCurrentElement();
+            //
+            //     options.index--;
+            //     if (options.index < 0)
+            //         options.index = element.childElementCount - 1;
+            //
+            //     setCurrentPlayElement(element);
+            // }
 
-            const nextElement = () => {
-                let element = getCurrentElement();
-                options.index++;
-                if (options.index > element.childElementCount - 1)
-                    options.index = 0;
-                
-                setCurrentPlayElement(element);
-            }
+            // const nextElement = () => {
+            //     let element = getCurrentElement();
+            //     options.index++;
+            //     if (options.index > element.childElementCount - 1)
+            //         options.index = 0;
+            //
+            //     setCurrentPlayElement(element);
+            // }
             //重置时间
             const onRefreshClick = () => {
                 // cancelActive();
@@ -666,45 +658,56 @@
             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){
+              clearBoxDrawer(drawers.originalDrawer);
+              clearBoxDrawer(drawers.abnormalDrawer);
+              if (response.code != 200 || response.data.radar_data.length === 0){
                 ElMessage.error({
                   message: "请求失败",
                   type: 'error'
-                })
+                });
+
+                createEmptyCanvas('original-data-canvas', 1500, 500);
+                createEmptyCanvas('abnormal-canvas', 1500, 500);
                 return;
               }
-
-              console.log(response);
-              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]
-
+              drawers.originalDrawer = new BoxDrawer(1500, 500, prepareTmpOriginalColors(), response.data, 'original-data-canvas');
+              drawers.abnormalDrawer = new BoxDrawer(1500, 500, prepareTmpOriginalColors(), response.data, 'abnormal-canvas');
+              options.contrast.noQCImgUrl = drawers.originalDrawer.base64Image;
+              options.contrast.checkImgUrl = drawers.abnormalDrawer.base64Image
             })
           }
 
+          const clearBoxDrawer = (boxDrawer: BoxDrawer) => {
+              if (boxDrawer == null) return;
+              boxDrawer.close();
+          }
+
           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){
+
+              clearBoxDrawer(drawers.interpolateDrawer);
+              if (response.code != 200 || response.data.radar_data.length === 0){
                 ElMessage.error({
                   message: "请求失败",
                   type: 'error'
-                })
+                });
+                createEmptyCanvas('interpolate-canvas', 1500, 500);
                 return;
               }
-              let boxDrawer = new BoxDrawer(1500, 500, prepareTmpOriginalColors(), response.data, null);
-                options.contrast.fillingImgUrl = boxDrawer.base64Image;
-                options.contrast.fillingImgPreview = [boxDrawer.base64Image]
+
+              drawers.interpolateDrawer = new BoxDrawer(1500, 500, prepareTmpOriginalColors(), response.data, 'interpolate-canvas');
+              options.contrast.fillingImgUrl = drawers.interpolateDrawer.base64Image;
             })
           }
 
           const prepareTmpOriginalColors = () => {
-              return new ColorChart(['#860200','#CD0402','#FF1A04','#FF5E0C','#FEA61B','#FDED2A',
-                    '#C1FE46','#7AFD86','#2BFDCD','#05E6FD','#14A0FA','#1B5AFB','#1C1FF9','#1310C4','#09067C'],
-                  [ 999, 305, 300, 295, 290, 285, 280, 275, 270, 265, 260, 255, 250, 245, 240, 0]);
+              return new ColorChart(['#860200','#CD0402','#FF1A04','#FF5E0C',
+                    '#FEA61B','#FDED2A','#C1FE46','#7AFD86',
+                    '#2BFDCD','#05E6FD','#14A0FA','#1B5AFB',
+                    '#1C1FF9','#1310C4','#09067C'],
+                  [ 999, 305, 300, 295, 290, 285, 280, 275, 270, 265, 260, 255, 250, 245, 240, -999]);
           }
 
           const prepareApiParams = (radarDataCode, startTime, endTime) => {
@@ -728,8 +731,8 @@
                 // onDayClick,
                 onPrevDayClick,
                 onNextDayClick,
-                onPrevImgClick,
-                onNextImgClick,
+                // onPrevImgClick,
+                // onNextImgClick,
                 onRefreshClick,
                 onPlayClick,
                 onChange,
@@ -752,16 +755,18 @@
                 .picture {
                     width: 100%;
                     flex-direction: column;
-                  :deep(.el-image) {
-                    //width: 100%;
-                  }
-                  :deep(.el-image__inner) {
-                    width: 100%;
-                    //transform: scaleX(4.5);
+                    position: relative;
+
+                  #original-data-canvas , #abnormal-canvas ,#interpolate-canvas{
+                    transform: scale(0.5,0.4);
                   }
                     .title {
                         padding-bottom: 0;
                         font-size: 0.22rem;
+                        position: absolute;
+                        left: 296px;
+                        top: 0;
+                        z-index: 100;
                     }
                 }
             }
diff --git a/04.系统编码/Frontend/src/index.less b/04.系统编码/Frontend/src/index.less
index 01d61e9..5c5140f 100644
--- a/04.系统编码/Frontend/src/index.less
+++ b/04.系统编码/Frontend/src/index.less
@@ -419,11 +419,11 @@ img {
                 justify-content: center;
 
                 .picture {
-                    height: 70%;
+                    height: 100%;
 
-                    .el-image {
-                        height: 100%;
-                    }
+                    //.el-image {
+                    //    height: 100%;
+                    //}
                 }
             }
 
diff --git a/04.系统编码/Frontend/src/uilts/box-drawer.ts b/04.系统编码/Frontend/src/uilts/box-drawer.ts
index d1bd7af..0b165c1 100644
--- a/04.系统编码/Frontend/src/uilts/box-drawer.ts
+++ b/04.系统编码/Frontend/src/uilts/box-drawer.ts
@@ -2,13 +2,26 @@ import moment from "moment";
 import {h} from "vue";
 import {urlRE} from "vite/dist/node/utils/cssUtils";
 
+export function createEmptyCanvas(id: string, width: number, height: number): void{
+    let canvas: any = document.getElementById(id);
+    canvas.width = width;
+    canvas.height = height;
+
+    let canvasContext: any = canvas.getContext('2d');
+    canvasContext.fillStyle = 'white';
+    canvasContext.fillRect(0,0, width, height);
+
+    canvasContext.font = "normal 48px Verdana";
+    canvasContext.fillStyle = "#000000";
+    canvasContext.fillText('暂无数据', (width / 2) - (canvasContext.measureText('暂无数据').width / 2), height / 2 - 24);
+}
+
 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;
@@ -36,7 +49,6 @@ export class BoxDrawer{
     private paddingColorLeft: number = 50;
     private defaultColorWidth: number = 30;
 
-    // private boxes: any = [];
     private calc: Calc = null;
     private box: Box = null;
 
@@ -129,10 +141,10 @@ export class BoxDrawer{
                 let radarInfo = this.values.radar_info[infoIndex];
                 let targetValue = value[radarInfo.col_name];
                 let color = this.colorChart.getColor(targetValue);
+                rows.push(new Box(x, y, width, height, targetValue, radarInfo.col_factor, value.data_time, radarInfo.col_unit));
                 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);
         }
@@ -170,7 +182,6 @@ export class BoxDrawer{
         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();
     }
@@ -199,12 +210,20 @@ export class BoxDrawer{
 
             box.show(this.targetCanvasContext);
             this.box = box;
-        })
+        });
+        this.targetCanvas.addEventListener('mouseout', () => {
+            this.copyCanvas();
+        });
+    }
+
+    public close(): void{
+        this.targetCanvas.removeEventListener('mousemove');
+        this.targetCanvas.removeEventListener('mouseout');
     }
 
     private fillBackground(): void{
-        this.canvasContext.fillStyle = 'white'
-        this.canvasContext.fillRect(0,0, this.width,this.height)
+        this.canvasContext.fillStyle = 'white';
+        this.canvasContext.fillRect(0,0, this.width,this.height);
     }
 
     private drawCoordinate(): void{
@@ -361,11 +380,13 @@ class Box implements IBox{
     time: string;
     util: string;
 
-    rectWidth: number = 180;
-    rectHeight: number = 80;
+    rectWidth: number = 280;
+    rectHeight: number = 120;
     rectX: number;
     rectY: number;
 
+    isReserved: boolean = false;
+
     constructor(x: number, y: number, width: number, height: number, value: number, dataHeight: number, time: string, util: string) {
         this.x = x;
         this.y = y;
@@ -377,6 +398,7 @@ class Box implements IBox{
         this.time = time;
         this.util = util;
 
+        this.isReserved = this.y - 10 - this.rectHeight < 0;
         this.id = this.uuid();
     }
 
@@ -393,25 +415,78 @@ class Box implements IBox{
     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);
+        this.rectY = this.isReserved ? this.y + this.height / 2 + 10 : this.y - this.height / 2 - this.rectHeight - 10;
+        this.fillRoundRect(canvasContext, this.rectX, this.rectY, this.rectWidth, this.rectHeight, 10, 2, 'rgba(59, 55, 55, 0.8)');
+    }
+
+    /**该方法用来绘制圆角矩形
+     *@param cxt:canvas的上下文环境
+     *@param x:左上角x轴坐标
+     *@param y:左上角y轴坐标
+     *@param width:矩形的宽度
+     *@param height:矩形的高度
+     *@param radius:圆的半径
+     *@param lineWidth:线条粗细
+     *@param strokeColor:线条颜色
+     *@user: xiaowuler
+     **/
+    private fillRoundRect(cxt, x, y, width, height, radius, lineWidth, strokeColor): void {
+        //圆的直径必然要小于矩形的宽高
+        if (2 * radius > width || 2 * radius > height) { return; }
+
+        cxt.save();
+        cxt.translate(x, y);
+        //绘制圆角矩形的各个边
+        this.drawRoundRectPath(cxt, width, height, radius);
+        cxt.lineWidth = lineWidth || 2; //若是给定了值就用给定的值否则给予默认值2
+        cxt.fillStyle = strokeColor || "#000";
+        cxt.fill();
+        cxt.restore();
+    }
+
+    private drawRoundRectPath(cxt, width, height, radius): void {
+        cxt.beginPath();
+        //从右下角顺时针绘制，弧度从0到1/2PI
+        cxt.arc(width - radius, height - radius, radius, 0, Math.PI / 2);
+
+        //矩形下边线
+        cxt.lineTo(radius, height);
+
+        //左下角圆弧，弧度从1/2PI到PI
+        cxt.arc(radius, height - radius, radius, Math.PI / 2, Math.PI);
+
+        //矩形左边线
+        cxt.lineTo(0, radius);
+
+        //左上角圆弧，弧度从PI到3/2PI
+        cxt.arc(radius, radius, radius, Math.PI, Math.PI * 3 / 2);
+
+        //上边线
+        cxt.lineTo(width - radius, 0);
+
+        //右上角圆弧
+        cxt.arc(width - radius, radius, radius, Math.PI * 3 / 2, Math.PI * 2);
+
+        //右边线
+        cxt.lineTo(width, height - radius);
+        cxt.closePath();
     }
 
     private setText(canvasContext: any) : void{
-        canvasContext.font = "normal 14px Arial";
+        canvasContext.font = "normal 22px 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);
+        canvasContext.fillText(timeText, centerX - canvasContext.measureText(timeText).width / 2,  this.rectY + 30);
         const valueText = 'value：' + this.value;
-        canvasContext.fillText(valueText, centerX - canvasContext.measureText(valueText).width / 2,  this.rectY + 18 + 26);
+        canvasContext.fillText(valueText, centerX - canvasContext.measureText(valueText).width / 2,  this.rectY + 22 + 45);
         const heightText = 'height：' + this.dataHeight + ' ' + this.util;
-        canvasContext.fillText(heightText, centerX - canvasContext.measureText(heightText).width / 2,  this.rectY + 18 + 18 + 30);
+        canvasContext.fillText(heightText, centerX - canvasContext.measureText(heightText).width / 2,  this.rectY + 22 + 22 + 60);
     }
 
     private setSelectStyle(canvasContext: any): void{
-        canvasContext.lineWidth = 1;
+        canvasContext.lineWidth = 2;
         canvasContext.strokeStyle = "#ff0000";
         canvasContext.strokeRect(this.x, this.y, this.width, this.height);
     }