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
Unified 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> <template>
<canvas id="myCanvas"></canvas>
<div class="tabs"> <div class="tabs">
<div class="tab-item" @click="onTabClick('MWR')" :class="{'active': currentTab === 'MWR'}"> <div class="tab-item" @click="onTabClick('MWR')" :class="{'active': currentTab === 'MWR'}">
质控对比 质控对比
@ -96,74 +96,60 @@
</div> </div>
</div> </div>
<div class="picture-view"> <div class="picture-view">
<span class="arrow arrow-prev" @click="onPrevImgClick"><img src="/images/prev-btn.png" /></span> <!-- <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="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> <!-- <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> <!-- <a :href="downloadImgUrl" download class="save-btn" v-else><img src="/images/save.png" /></a>-->
<div class="download-pictures hide" id="pictures"> <!-- <div class="download-pictures hide" id="pictures">-->
<a v-for="(url, index) in urls" :key="index" download></a> <!-- <a v-for="(url, index) in urls" :key="index" download></a>-->
</div> <!-- </div>-->
<div class="picture-container contrast-picture-container" v-if="currentTab === 'MWR'"> <div class="picture-container contrast-picture-container" v-if="currentTab === 'MWR'">
<div class="picture"> <div class="picture">
<h2 class="title">{{ titleStartTime }}~{{ titleEndTime }}温度原始数据</h2> <h2 class="title">{{ titleStartTime }}~{{ titleEndTime }}温度原始数据</h2>
<el-image <canvas id="original-data-canvas"></canvas>
:src="contrast.noQCImgUrl" <!-- <el-image-->
:preview-src-list="contrast.noQCImgPreview" <!-- :src="contrast.noQCImgUrl"-->
:initial-index="0" <!-- :preview-src-list="contrast.noQCImgPreview"-->
fit="contain" <!-- :initial-index="0"-->
@load="onImageLoad" <!-- fit="contain"-->
> <!-- @load="onImageLoad"-->
<template #error> <!-- >-->
<div class="image-slot"> <!-- <template #error>-->
<img src="/images/null-picture.png" /> <!-- <div class="image-slot">-->
</div> <!-- <img src="/images/null-picture.png" />-->
<p class="image-tip">暂无图片</p> <!-- </div>-->
</template> <!-- <p class="image-tip">暂无图片</p>-->
<template #placeholder> <!-- </template>-->
<div class="image-placeholder">正在加载...</div> <!-- <template #placeholder>-->
</template> <!-- <div class="image-placeholder">正在加载...</div>-->
</el-image> <!-- </template>-->
<!-- </el-image>-->
</div> </div>
<div class="picture"> <div class="picture">
<h2 class="title">{{ titleStartTime }}~{{ titleEndTime }}温度异常值标记</h2> <h2 class="title">{{ titleStartTime }}~{{ titleEndTime }}温度异常值标记</h2>
<el-image <canvas id="abnormal-canvas"></canvas>
:src="contrast.checkImgUrl" <!-- <el-image-->
:preview-src-list="contrast.checkImgPreview" <!-- :src="contrast.checkImgUrl"-->
:initial-index="0" <!-- :preview-src-list="contrast.checkImgPreview"-->
fit="contain" <!-- :initial-index="0"-->
@load="onImageLoad" <!-- fit="contain"-->
@mousemove="onImageMove" <!-- @load="onImageLoad"-->
> <!-- @mousemove="onImageMove"-->
<template #error> <!-- >-->
<div class="image-slot"> <!-- <template #error>-->
<img src="/images/null-picture.png" /> <!-- <div class="image-slot">-->
</div> <!-- <img src="/images/null-picture.png" />-->
<p class="image-tip">暂无图片</p> <!-- </div>-->
</template> <!-- <p class="image-tip">暂无图片</p>-->
<template #placeholder> <!-- </template>-->
<div class="image-placeholder">正在加载...</div> <!-- <template #placeholder>-->
</template> <!-- <div class="image-placeholder">正在加载...</div>-->
</el-image> <!-- </template>-->
<!-- </el-image>-->
</div> </div>
<div class="picture"> <div class="picture">
<h2 class="title">{{ titleStartTime }}~{{ titleEndTime }}温度野点插补结果</h2> <h2 class="title">{{ titleStartTime }}~{{ titleEndTime }}温度野点插补结果</h2>
<el-image <canvas id="interpolate-canvas"></canvas>
: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>
</div> </div>
</div> </div>
@ -199,7 +185,7 @@
import moment from "moment"; import moment from "moment";
import { MicrowaveRadiationConfig } from '../uilts/Config'; import { MicrowaveRadiationConfig } from '../uilts/Config';
import { post, get } from '../uilts/axios'; 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"; import {ElMessage} from "element-plus";
export default { export default {
@ -239,7 +225,13 @@
titleEndTime: null, titleEndTime: null,
apiTimeLength: -2, apiTimeLength: -2,
apiTimeInterval: 6 apiTimeInterval: 6
}) });
let drawers = {
originalDrawer: null,
interpolateDrawer: null,
abnormalDrawer: null
}
onMounted(() => { onMounted(() => {
reloadQualityComparison() 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'); 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 = () => { // const onPrevImgClick = () => {
prevElement(); // prevElement();
} // }
const onNextImgClick = () => {
nextElement();
}
const prevElement = () => {
let element = getCurrentElement();
options.index--;
if (options.index < 0)
options.index = element.childElementCount - 1;
setCurrentPlayElement(element); // const onNextImgClick = () => {
} // nextElement();
// }
const nextElement = () => { // const prevElement = () => {
let element = getCurrentElement(); // let element = getCurrentElement();
options.index++; //
if (options.index > element.childElementCount - 1) // options.index--;
options.index = 0; // if (options.index < 0)
// options.index = element.childElementCount - 1;
//
// setCurrentPlayElement(element);
// }
setCurrentPlayElement(element); // const nextElement = () => {
} // let element = getCurrentElement();
// options.index++;
// if (options.index > element.childElementCount - 1)
// options.index = 0;
//
// setCurrentPlayElement(element);
// }
//重置时间 //重置时间
const onRefreshClick = () => { const onRefreshClick = () => {
// cancelActive(); // cancelActive();
@ -666,45 +658,56 @@
const startTime = moment(options.currentTime).add(options.apiTimeLength, 'h').add(options.apiTimeInterval, 'm'); const startTime = moment(options.currentTime).add(options.apiTimeLength, 'h').add(options.apiTimeInterval, 'm');
const params = prepareApiParams(401, startTime, moment(options.currentTime)); const params = prepareApiParams(401, startTime, moment(options.currentTime));
get('/njplatform/radardata/getOriginRangeData',params,'http://rdp.nagr.com.cn:18080').then((response: any)=> { 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({ ElMessage.error({
message: "请求失败", message: "请求失败",
type: 'error' type: 'error'
}) });
createEmptyCanvas('original-data-canvas', 1500, 500);
createEmptyCanvas('abnormal-canvas', 1500, 500);
return; return;
} }
drawers.originalDrawer = new BoxDrawer(1500, 500, prepareTmpOriginalColors(), response.data, 'original-data-canvas');
console.log(response); drawers.abnormalDrawer = new BoxDrawer(1500, 500, prepareTmpOriginalColors(), response.data, 'abnormal-canvas');
let boxDrawer = new BoxDrawer(1500, 500, prepareTmpOriginalColors(), response.data, 'myCanvas'); options.contrast.noQCImgUrl = drawers.originalDrawer.base64Image;
options.contrast.noQCImgUrl = boxDrawer.base64Image; options.contrast.checkImgUrl = drawers.abnormalDrawer.base64Image
options.contrast.noQCImgPreview = [boxDrawer.base64Image]
options.contrast.checkImgUrl = boxDrawer.base64Image
options.contrast.checkImgPreview = [boxDrawer.base64Image]
}) })
} }
const clearBoxDrawer = (boxDrawer: BoxDrawer) => {
if (boxDrawer == null) return;
boxDrawer.close();
}
const reloadQualityInterpolation = () => { const reloadQualityInterpolation = () => {
const startTime = moment(options.currentTime).add(options.apiTimeLength, 'h').add(options.apiTimeInterval, 'm'); const startTime = moment(options.currentTime).add(options.apiTimeLength, 'h').add(options.apiTimeInterval, 'm');
const params = prepareApiParams(401, startTime, moment(options.currentTime)); const params = prepareApiParams(401, startTime, moment(options.currentTime));
get('/njplatform/radardata/getBpRangeData',params,'http://rdp.nagr.com.cn:18080').then((response: any)=> { 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({ ElMessage.error({
message: "请求失败", message: "请求失败",
type: 'error' type: 'error'
}) });
createEmptyCanvas('interpolate-canvas', 1500, 500);
return; return;
} }
let boxDrawer = new BoxDrawer(1500, 500, prepareTmpOriginalColors(), response.data, null);
options.contrast.fillingImgUrl = boxDrawer.base64Image; drawers.interpolateDrawer = new BoxDrawer(1500, 500, prepareTmpOriginalColors(), response.data, 'interpolate-canvas');
options.contrast.fillingImgPreview = [boxDrawer.base64Image] options.contrast.fillingImgUrl = drawers.interpolateDrawer.base64Image;
}) })
} }
const prepareTmpOriginalColors = () => { const prepareTmpOriginalColors = () => {
return new ColorChart(['#860200','#CD0402','#FF1A04','#FF5E0C','#FEA61B','#FDED2A', return new ColorChart(['#860200','#CD0402','#FF1A04','#FF5E0C',
'#C1FE46','#7AFD86','#2BFDCD','#05E6FD','#14A0FA','#1B5AFB','#1C1FF9','#1310C4','#09067C'], '#FEA61B','#FDED2A','#C1FE46','#7AFD86',
[ 999, 305, 300, 295, 290, 285, 280, 275, 270, 265, 260, 255, 250, 245, 240, 0]); '#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) => { const prepareApiParams = (radarDataCode, startTime, endTime) => {
@ -728,8 +731,8 @@
// onDayClick, // onDayClick,
onPrevDayClick, onPrevDayClick,
onNextDayClick, onNextDayClick,
onPrevImgClick, // onPrevImgClick,
onNextImgClick, // onNextImgClick,
onRefreshClick, onRefreshClick,
onPlayClick, onPlayClick,
onChange, onChange,
@ -752,16 +755,18 @@
.picture { .picture {
width: 100%; width: 100%;
flex-direction: column; flex-direction: column;
:deep(.el-image) { position: relative;
//width: 100%;
} #original-data-canvas , #abnormal-canvas ,#interpolate-canvas{
:deep(.el-image__inner) { transform: scale(0.5,0.4);
width: 100%;
//transform: scaleX(4.5);
} }
.title { .title {
padding-bottom: 0; padding-bottom: 0;
font-size: 0.22rem; 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; justify-content: center;
.picture { .picture {
height: 70%; height: 100%;
.el-image { //.el-image {
height: 100%; // 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 {h} from "vue";
import {urlRE} from "vite/dist/node/utils/cssUtils"; 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{ export class BoxDrawer{
private canvas: any = null; private canvas: any = null;
private canvasContext: any = null; private canvasContext: any = null;
private targetCanvas: any = null; private targetCanvas: any = null;
private targetCanvasContext: any = null; private targetCanvasContext: any = null;
// private canvasContext3d: any = null;
private borderWidth: number = 0; private borderWidth: number = 0;
private borderHeight: number = 0; private borderHeight: number = 0;
@ -36,7 +49,6 @@ export class BoxDrawer{
private paddingColorLeft: number = 50; private paddingColorLeft: number = 50;
private defaultColorWidth: number = 30; private defaultColorWidth: number = 30;
// private boxes: any = [];
private calc: Calc = null; private calc: Calc = null;
private box: Box = null; private box: Box = null;
@ -129,10 +141,10 @@ export class BoxDrawer{
let radarInfo = this.values.radar_info[infoIndex]; let radarInfo = this.values.radar_info[infoIndex];
let targetValue = value[radarInfo.col_name]; let targetValue = value[radarInfo.col_name];
let color = this.colorChart.getColor(targetValue); 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; if (color == null) continue;
this.canvasContext.fillStyle = color; this.canvasContext.fillStyle = color;
this.canvasContext.fillRect(x, y, width, height); 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); boxes.push(rows);
} }
@ -170,7 +182,6 @@ export class BoxDrawer{
this.targetCanvas.width = this.width; this.targetCanvas.width = this.width;
this.targetCanvas.height = this.height; this.targetCanvas.height = this.height;
this.targetCanvasContext = this.targetCanvas.getContext('2d'); this.targetCanvasContext = this.targetCanvas.getContext('2d');
// canvasContext.drawImage(this.canvas, 0, 0, 1500, 500);
this.copyCanvas(); this.copyCanvas();
this.bindMoveEvent(); this.bindMoveEvent();
} }
@ -199,12 +210,20 @@ export class BoxDrawer{
box.show(this.targetCanvasContext); box.show(this.targetCanvasContext);
this.box = box; this.box = box;
}) });
this.targetCanvas.addEventListener('mouseout', () => {
this.copyCanvas();
});
}
public close(): void{
this.targetCanvas.removeEventListener('mousemove');
this.targetCanvas.removeEventListener('mouseout');
} }
private fillBackground(): void{ private fillBackground(): void{
this.canvasContext.fillStyle = 'white' this.canvasContext.fillStyle = 'white';
this.canvasContext.fillRect(0,0, this.width,this.height) this.canvasContext.fillRect(0,0, this.width,this.height);
} }
private drawCoordinate(): void{ private drawCoordinate(): void{
@ -361,11 +380,13 @@ class Box implements IBox{
time: string; time: string;
util: string; util: string;
rectWidth: number = 180; rectWidth: number = 280;
rectHeight: number = 80; rectHeight: number = 120;
rectX: number; rectX: number;
rectY: number; rectY: number;
isReserved: boolean = false;
constructor(x: number, y: number, width: number, height: number, value: number, dataHeight: number, time: string, util: string) { constructor(x: number, y: number, width: number, height: number, value: number, dataHeight: number, time: string, util: string) {
this.x = x; this.x = x;
this.y = y; this.y = y;
@ -377,6 +398,7 @@ class Box implements IBox{
this.time = time; this.time = time;
this.util = util; this.util = util;
this.isReserved = this.y - 10 - this.rectHeight < 0;
this.id = this.uuid(); this.id = this.uuid();
} }
@ -393,25 +415,78 @@ class Box implements IBox{
private setBackground(canvasContext: any): void{ private setBackground(canvasContext: any): void{
canvasContext.fillStyle = 'rgba(59, 55, 55, 0.8)'; canvasContext.fillStyle = 'rgba(59, 55, 55, 0.8)';
this.rectX = this.x + this.width / 2 - this.rectWidth / 2; this.rectX = this.x + this.width / 2 - this.rectWidth / 2;
this.rectY = this.y - this.height / 2 - this.rectHeight - 10; this.rectY = this.isReserved ? this.y + this.height / 2 + 10 : this.y - this.height / 2 - this.rectHeight - 10;
canvasContext.fillRect(this.rectX, this.rectY, this.rectWidth, this.rectHeight); 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{ private setText(canvasContext: any) : void{
canvasContext.font = "normal 14px Arial"; canvasContext.font = "normal 22px Arial";
canvasContext.fillStyle = "#fafafa"; canvasContext.fillStyle = "#fafafa";
const centerX = this.rectX + this.rectWidth / 2; const centerX = this.rectX + this.rectWidth / 2;
const timeText = "time：" + this.time; 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; 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; 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{ private setSelectStyle(canvasContext: any): void{
canvasContext.lineWidth = 1; canvasContext.lineWidth = 2;
canvasContext.strokeStyle = "#ff0000"; canvasContext.strokeStyle = "#ff0000";
canvasContext.strokeRect(this.x, this.y, this.width, this.height); canvasContext.strokeRect(this.x, this.y, this.width, this.height);
} }

Write Preview
Loading…
Cancel
Save