root
/
NanJingLamanRadarProject
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

commit

master
xuhuihui 3 years ago
parent
0608f43809
commit
022e9c9105
3 changed files with 211 additions and 131 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 227
      04.系统编码/Frontend/src/components/MicrowaveRadiation.vue
  2. 8
      04.系统编码/Frontend/src/index.less
  3. 107
      04.系统编码/Frontend/src/uilts/box-drawer.ts

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

@ -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;
}
}
}

8
04.系统编码/Frontend/src/index.less
View File

@ -419,11 +419,11 @@ img {
justify-content: center;
.picture {
height: 70%;
height: 100%;
.el-image {
height: 100%;
}
//.el-image {
// height: 100%;
//}
}
}

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

@ -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);
}

Write Preview
Loading…
Cancel
Save