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

commit

master
xuhuihui 4 years ago
parent
7442c9ea5e
commit
0608f43809
2 changed files with 271 additions and 55 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. 104
      04.系统编码/Frontend/src/components/MicrowaveRadiation.vue
  2. 222
      04.系统编码/Frontend/src/uilts/box-drawer.ts

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

@ -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',
noQCImgPreview: ['/images/picture.png'],
checkImgUrl: '/images/picture.png',
checkImgPreview: ['/images/picture.png'],
noQCImgUrl: '',
noQCImgPreview: [],
checkImgUrl: '',
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.titleEndTime = time.date
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.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)
let boxDrawer = new BoxDrawer(1500, 500, prepareTmpOriginalColors(), response.data);
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]
})
}
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%;

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

@ -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.strokeStyle = '#F41006';
this.canvasContext.lineWidth = 3;
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];
}
}
Write Preview
Loading…
Cancel
Save