Browse Source

commit

master
xuhuihui 3 years ago
parent
commit
23b814e9e6
  1. 280
      04.系统编码/Frontend/src/components/MicrowaveRadiation.vue
  2. 8
      04.系统编码/Frontend/src/index.less
  3. 2
      04.系统编码/Frontend/src/uilts/axios.ts
  4. 47
      04.系统编码/Frontend/src/uilts/box-drawer.ts

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

@ -32,9 +32,9 @@
<div class="menu-item" > <div class="menu-item" >
<h2 class="tip">分辨率选择</h2> <h2 class="tip">分辨率选择</h2>
<el-row :gutter="12"> <el-row :gutter="12">
<el-col :span="8" ><span @click="onElementClick('six-minute')" :class="{'active': currentElement === 'six-minute'}">6分钟</span></el-col> <el-col :span="8" ><span @click="onElementClick('six-minute', -2, 6)" :class="{'active': currentElement === 'six-minute'}">6分钟</span></el-col>
<el-col :span="8" ><span @click="onElementClick('half-hour')" :class="{'active': currentElement === 'half-hour'}">30分钟</span></el-col> <el-col :span="8" ><span @click="onElementClick('half-hour', -12, 30)" :class="{'active': currentElement === 'half-hour'}">30分钟</span></el-col>
<el-col :span="8" ><span @click="onElementClick('one-hour')" :class="{'active': currentElement === 'one-hour'}">1小时</span></el-col> <el-col :span="8" ><span @click="onElementClick('one-hour', -24, 60)" :class="{'active': currentElement === 'one-hour'}">1小时</span></el-col>
<!-- <el-col :span="8" ><span @click="onElementClick('CAPE')" :class="{'active': currentElement === 'CAPE'}">CAPE</span></el-col>--> <!-- <el-col :span="8" ><span @click="onElementClick('CAPE')" :class="{'active': currentElement === 'CAPE'}">CAPE</span></el-col>-->
<!-- <el-col :span="8" ><span @click="onElementClick('CIN')" :class="{'active': currentElement === 'CIN'}">CIN</span></el-col>--> <!-- <el-col :span="8" ><span @click="onElementClick('CIN')" :class="{'active': currentElement === 'CIN'}">CIN</span></el-col>-->
@ -75,7 +75,7 @@
<span @click="onPrevDayClick"><img src="/images/prev.png" /></span> <span @click="onPrevDayClick"><img src="/images/prev.png" /></span>
<span @click="onNextDayClick"><img src="/images/next.png" /></span> <span @click="onNextDayClick"><img src="/images/next.png" /></span>
</div> </div>
<el-select v-model="currentHour" placeholder="" @change="onChange" v-show="currentTab !== 'MWR'"> <el-select v-model="currentHour" placeholder="" @change="onChange">
<el-option <el-option
v-for="item in hours" v-for="item in hours"
:key="item.value" :key="item.value"
@ -84,11 +84,11 @@
> >
</el-option> </el-option>
</el-select> </el-select>
<p class="unit" v-if="currentTab !== 'MWR'"></p> <p class="unit" ></p>
<div class="refresh-btn" @click="onRefreshClick"> <div class="refresh-btn" @click="onRefreshClick">
<img src="/images/refresh.png" /> <img src="/images/refresh.png" />
</div> </div>
<div class="btns-group"> <div class="btns-group" v-if="currentTab==='kuoxian' || currentTab==='T-logP'">
<span @click="onPlayClick">{{isPlay ? '暂停动画' : '播放动画'}}</span> <span @click="onPlayClick">{{isPlay ? '暂停动画' : '播放动画'}}</span>
<a @click="onDownloadClick">下载动画</a> <a @click="onDownloadClick">下载动画</a>
<a id="weboDownload" download :href="downloadSrc" class="hide">下载隐藏层</a> <a id="weboDownload" download :href="downloadSrc" class="hide">下载隐藏层</a>
@ -104,7 +104,7 @@
</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">原始数据</h2> <h2 class="title">{{ titleStartTime }}~{{ titleEndTime }}温度原始数据</h2>
<el-image <el-image
:src="contrast.noQCImgUrl" :src="contrast.noQCImgUrl"
:preview-src-list="contrast.noQCImgPreview" :preview-src-list="contrast.noQCImgPreview"
@ -124,7 +124,7 @@
</el-image> </el-image>
</div> </div>
<div class="picture"> <div class="picture">
<h2 class="title">异常值标记</h2> <h2 class="title">{{ titleStartTime }}~{{ titleEndTime }}温度异常值标记</h2>
<el-image <el-image
:src="contrast.checkImgUrl" :src="contrast.checkImgUrl"
:preview-src-list="contrast.checkImgPreview" :preview-src-list="contrast.checkImgPreview"
@ -144,7 +144,7 @@
</el-image> </el-image>
</div> </div>
<div class="picture"> <div class="picture">
<h2 class="title">野点插补结果</h2> <h2 class="title">{{ titleStartTime }}~{{ titleEndTime }}温度野点插补结果</h2>
<el-image <el-image
:src="contrast.fillingImgUrl" :src="contrast.fillingImgUrl"
:preview-src-list="contrast.fillingImgPreview" :preview-src-list="contrast.fillingImgPreview"
@ -164,6 +164,7 @@
</el-image> </el-image>
</div> </div>
</div> </div>
<div class="picture-container" v-if="currentTab !== 'MWR'"> <div class="picture-container" v-if="currentTab !== 'MWR'">
<!-- <h2 class="title">{{title}}</h2> --> <!-- <h2 class="title">{{title}}</h2> -->
<div class="picture"> <div class="picture">
@ -195,7 +196,8 @@
import { onMounted, reactive, toRefs } from 'vue'; import { onMounted, reactive, toRefs } from 'vue';
import moment from "moment"; import moment from "moment";
import { MicrowaveRadiationConfig } from '../uilts/Config'; import { MicrowaveRadiationConfig } from '../uilts/Config';
import { post } from '../uilts/axios'; import { post, get } from '../uilts/axios';
import {BoxDrawer} from "../uilts/box-drawer";
export default { export default {
name: 'MicrowaveRadiation', name: 'MicrowaveRadiation',
@ -210,7 +212,7 @@
currentElement: 'six-minute', currentElement: 'six-minute',
currentCategory: 'CAPE', currentCategory: 'CAPE',
date: moment('2021-11-10').format('YYYY-MM-DD'), date: moment('2021-11-10').format('YYYY-MM-DD'),
currentHour: '23', currentHour: '24',
hours: [], hours: [],
times: [], times: [],
days: [], days: [],
@ -230,8 +232,11 @@
fillingImgUrl: '/images/picture.png', fillingImgUrl: '/images/picture.png',
fillingImgPreview: ['/images/picture.png'] fillingImgPreview: ['/images/picture.png']
}, },
urls: [] urls: [],
titleStartTime: null,
titleEndTime: null,
apiTimeLength: -2,
apiTimeInterval: 6
}) })
onMounted(() => { onMounted(() => {
@ -254,61 +259,65 @@
const onTabClick = (name) => { const onTabClick = (name) => {
options.currentTab = name; options.currentTab = name;
options.currentElement = 'six-minute' options.currentElement = 'six-minute'
if (options.currentTab === 'MWR') { // initTimeLine()
options.date = moment('2021-11-10').format('YYYY-MM-DD'); // if ( options.currentTab === 'MWR' ) {
// options.date = moment('2021-11-10').format('YYYY-MM-DD');
// options.currentElement = 'TEMP'; // options.currentElement = 'TEMP';
options.index = options.days.length - 1; // options.index = options.days.length - 1;
// initDays(); // initDays();
setTimeout(() => activeContrastImage(), 50)
} else {
if (options.currentTab === 'kuoxian' || options.currentTab === 'shixu_BPFY') {
// options.currentElement = 'TEMP';
setTimeout(()=>changeColor(),100) ;
}
else if (options.currentTab === 'shixu') {
options.date = moment('2021-12-04').format('YYYY-MM-DD');
// options.currentElement = 'CAPE';
}
options.date = moment('2021-12-05').format('YYYY-MM-DD');
options.index = options.times.length - 1;
if (options.currentTab === 'kuoxian' || options.currentTab === 'shixu_BPFY') { // setTimeout(() => activeContrastImage(), 50)
options.date = moment('2021-12-04').format('YYYY-MM-DD'); // } else {
// options.currentElement = 'TEMP'; //
options.currentHour = '23'; // if (options.currentTab === 'kuoxian' || options.currentTab === 'shixu_BPFY') {
} else if (options.currentTab === 'shixu') { // // options.currentElement = 'TEMP';
options.date = moment('2021-12-04').format('YYYY-MM-DD'); // setTimeout(()=>changeColor(),100) ;
// options.currentElement = 'CAPE'; // }
options.currentHour = '23'; // else if (options.currentTab === 'shixu') {
} else if (options.currentTab === 'T-logP') { // options.date = moment('2021-12-04').format('YYYY-MM-DD');
options.date = moment('2021-12-05').format('YYYY-MM-DD'); // // options.currentElement = 'CAPE';
// options.currentElement = 'TEMP'; // }
options.currentHour = '16'; //
} // options.date = moment('2021-12-05').format('YYYY-MM-DD');
initTimeLine(); // options.index = options.times.length - 1;
setTimeout(() => activeImage(moment(options.times[options.times.length - 1].date).hour(), moment(options.times[options.times.length - 1].date).minute()), 50) //
} // if (options.currentTab === 'kuoxian' || options.currentTab === 'shixu_BPFY') {
cancelActive(); // options.date = moment('2021-12-04').format('YYYY-MM-DD');
// // options.currentElement = 'TEMP';
// options.currentHour = '23';
// } else if (options.currentTab === 'shixu') {
// options.date = moment('2021-12-04').format('YYYY-MM-DD');
// // options.currentElement = 'CAPE';
// options.currentHour = '23';
// } else if (options.currentTab === 'T-logP') {
// options.date = moment('2021-12-05').format('YYYY-MM-DD');
// // options.currentElement = 'TEMP';
// options.currentHour = '16';
// }
// initTimeLine();
// // setTimeout(() => activeImage(moment(options.times[options.times.length - 1].date).hour(), moment(options.times[options.times.length - 1].date).minute()), 50)
// }
// cancelActive();
} }
const onRegionClick = (region) => { const onRegionClick = (region) => {
options.currentRegion = region; options.currentRegion = region;
cancelActive(); // cancelActive();
if (options.currentTab === 'MWR') // if (options.currentTab === 'MWR')
activeContrastImage(); // activeContrastImage();
else // else
activeImage(moment(options.times[options.index].date).hour(), moment(options.times[options.index].date).minute()); // activeImage(moment(options.times[options.index].date).hour(), moment(options.times[options.index].date).minute());
} }
const onElementClick = (element) => { const onElementClick = (element, apiTimeLength, apiTimeInterval) => {
options.apiTimeInterval = apiTimeInterval;
options.apiTimeLength = apiTimeLength;
options.currentElement = element; options.currentElement = element;
initTimeLine() initTimeLine()
cancelActive(); // if (options.currentTab === 'MWR')
if (options.currentTab === 'MWR') // activeContrastImage();
activeContrastImage(); // else
else // activeImage(moment(options.times[options.index].date).hour(), moment(options.times[options.index].date).minute());
activeImage(moment(options.times[options.index].date).hour(), moment(options.times[options.index].date).minute());
if (element === 'six-minute') { if (element === 'six-minute') {
setTimeout(() => { setTimeout(() => {
changeColor() changeColor()
@ -316,21 +325,23 @@
} }
} }
const activeContrastImage = () => { //
options.contrast.noQCImgUrl = MicrowaveRadiationConfig.getUrl(options.currentRegion, options.currentTab + '_noQC', moment(options.currentTime, 'YYYY-MM-DD')); // const activeContrastImage = () => {
options.contrast.noQCImgPreview = [options.contrast.noQCImgUrl]; // options.contrast.noQCImgUrl = MicrowaveRadiationConfig.getUrl(options.currentRegion, options.currentTab + '_noQC', moment(options.currentTime, 'YYYY-MM-DD'));
options.contrast.checkImgUrl = MicrowaveRadiationConfig.getUrl(options.currentRegion, options.currentTab + '_check', moment(options.currentTime, 'YYYY-MM-DD')); // options.contrast.noQCImgPreview = [options.contrast.noQCImgUrl];
options.contrast.checkImgPreview = [options.contrast.checkImgUrl]; // options.contrast.checkImgUrl = MicrowaveRadiationConfig.getUrl(options.currentRegion, options.currentTab + '_check', moment(options.currentTime, 'YYYY-MM-DD'));
options.contrast.fillingImgUrl = MicrowaveRadiationConfig.getUrl(options.currentRegion, options.currentTab + '_filling', moment(options.currentTime, 'YYYY-MM-DD')); // options.contrast.checkImgPreview = [options.contrast.checkImgUrl];
options.contrast.fillingImgPreview = [options.contrast.fillingImgUrl]; // options.contrast.fillingImgUrl = MicrowaveRadiationConfig.getUrl(options.currentRegion, options.currentTab + '_filling', moment(options.currentTime, 'YYYY-MM-DD'));
} // options.contrast.fillingImgPreview = [options.contrast.fillingImgUrl];
// }
const activeImage = (hour, minute) => { // const activeImage = (hour, minute) => {
let time = moment(options.date).hour(hour).minute(minute); // let time = moment(options.date).hour(hour).minute(minute);
let type = options.currentTab === 'T-logP' ? options.currentTab : (options.currentTab + '_' + options.currentElement); // let type = options.currentTab === 'T-logP' ? options.currentTab : (options.currentTab + '_' + options.currentElement);
options.imgUrl = MicrowaveRadiationConfig.getUrl(options.currentRegion, type, time); // options.imgUrl = MicrowaveRadiationConfig.getUrl(options.currentRegion, type, time);
options.srcList = [options.imgUrl]; // console.log(options.imgUrl)
} // options.srcList = [options.imgUrl];
// }
const onImageLoad = (event) => { const onImageLoad = (event) => {
if (event.currentTarget.getAttribute('src') !== '/images/default-picture.png') if (event.currentTarget.getAttribute('src') !== '/images/default-picture.png')
@ -361,6 +372,7 @@
}) })
} }
//
const prepareParams = () => { const prepareParams = () => {
let time = options.currentTab === 'MWR' ? moment(options.days[0].date).format("YYYYMMDDHHmmss") + '-' + moment(options.days[options.days.length - 1].date).format("YYYYMMDDHHmmss") : moment(options.times[0].date).format("YYYYMMDDHHmmss") + '-' + moment(options.times[options.times.length - 1].date).format("YYYYMMDDHHmmss"); let time = options.currentTab === 'MWR' ? moment(options.days[0].date).format("YYYYMMDDHHmmss") + '-' + moment(options.days[options.days.length - 1].date).format("YYYYMMDDHHmmss") : moment(options.times[0].date).format("YYYYMMDDHHmmss") + '-' + moment(options.times[options.times.length - 1].date).format("YYYYMMDDHHmmss");
return { return {
@ -414,32 +426,39 @@
}; };
} }
//
const initTimeLine = () => { const initTimeLine = () => {
options.times = []; options.times = [];
options.currentTime = moment(options.date).hour(parseInt(options.currentHour)).minute(options.currentElement === 'one-hour' ? 0 : 30).format('YYYY-MM-DD HH:mm'); let changeSelectionTime = null;
let now = moment(options.date).hour(parseInt(options.currentHour) - 2).minute(36);
let minute = now.minute();
if (options. currentElement === 'six-minute') { if (options. currentElement === 'six-minute') {
options.selectionTime = 6 options.selectionTime = 6
} changeSelectionTime = 2
else if (options. currentElement === 'half-hour') } else if (options. currentElement === 'half-hour') {
options.selectionTime = 30 options.selectionTime = 30
else changeSelectionTime = 10
} else {
options.selectionTime = 60 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 minute = now.minute();
const remainder = minute % options.selectionTime; const remainder = minute % options.selectionTime;
if (remainder > 0){ if (remainder > 0){
now.minute(minute + ( options.selectionTime - remainder)); now.minute(minute + ( options.selectionTime - remainder));
} }
now.minute(now.minute() - options.selectionTime); now.minute(now.minute() - options.selectionTime);
for (let i = 0; i < 22 ; i++) { for (let i = 0; i < 20 ; i++) {
options.times.push({ options.times.push({
hour: now.add( options.selectionTime, 'minute').format('HH时'), hour: now.add(options.selectionTime, 'minute').format('HH时'),
minute: now.format('mm'), minute: now.format('mm'),
date: now.format('YYYY-MM-DD HH:mm') date: now.format('YYYY-MM-DD HH:mm:00')
}); });
} }
options.index = options.times.length - 1; options.index = options.times.length - 1;
options.titleStartTime = options.times[0].date
} }
// const initDays = () => { // const initDays = () => {
@ -470,9 +489,50 @@
const onTimeClick = (time, index) => { const onTimeClick = (time, index) => {
options.currentTime = time.date; options.currentTime = time.date;
options.index = index; reloadQualityComparison();
cancelActive(); // let changeTimeLineHour = null
activeImage(moment(time.date).hour(), moment(time.date).minute()); // 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.index = index;
// test()
// cancelActive();
// activeImage(moment(time.date).hour(), moment(time.date).minute());
}
//
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){
//
return;
}
let boxDrawer = new BoxDrawer(1000, 1000);
})
}
const prepareApiParams = (radarDataCode, startTime, endTime) => {
return {
radar_data_code: radarDataCode,
data_time_start: startTime.format('YYYY-MM-DD HH:mm:ss'),
data_time_end: endTime.format('YYYY-MM-DD HH:mm:ss')
}
} }
// const onDayClick = (time, index) => { // const onDayClick = (time, index) => {
@ -482,17 +542,20 @@
// activeContrastImage(); // activeContrastImage();
// } // }
const cancelActive = () => { // const cancelActive = () => {
clearTimer(); // clearTimer();
options.isPlay = false; // options.isPlay = false;
} // }
const onPrevDayClick = () => { const onPrevDayClick = () => {
options.date = moment(options.date).add(-1, 'day').format('YYYY-MM-DD'); 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');
} }
const onNextDayClick = () => { const onNextDayClick = () => {
options.date = moment(options.date).add(1, 'day').format('YYYY-MM-DD'); 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')
} }
const onPrevImgClick = () => { const onPrevImgClick = () => {
@ -515,33 +578,32 @@
const nextElement = () => { const nextElement = () => {
let element = getCurrentElement(); let element = getCurrentElement();
options.index++; options.index++;
if (options.index > element.childElementCount - 1) if (options.index > element.childElementCount - 1)
options.index = 0; options.index = 0;
setCurrentPlayElement(element); setCurrentPlayElement(element);
} }
//
const onRefreshClick = () => { const onRefreshClick = () => {
cancelActive(); // cancelActive();
let element = getCurrentElement(); let element = getCurrentElement();
if (options.currentTab === 'MWR') { // if (options.currentTab === 'MWR') {
options.date = moment('2021-11-10').format('YYYY-MM-DD'); // options.date = moment('2021-11-10').format('YYYY-MM-DD');
options.currentTime = options.date; // options.currentTime = options.date;
element.children[options.days.length - 1].classList.add('active'); // element.children[options.days.length - 1].classList.add('active');
activeContrastImage(); // activeContrastImage();
} else { // } else {
options.currentHour = '23'; options.currentHour = '24';
options.date = moment('2021-12-05').format('YYYY-MM-DD'); options.date = moment('2021-12-05').format('YYYY-MM-DD');
options.currentTime = moment(options.date).hour(parseInt(options.currentHour)).format('YYYY-MM-DD HH:mm'); options.currentTime = moment(options.date).hour(parseInt(options.currentHour)).format('YYYY-MM-DD HH:mm');
element.children[options.times.length - 1].classList.add('active'); element.children[options.times.length - 1].classList.add('active');
// activeImage(moment(options.currentTime).hour(), moment(options.currentTime).minute(options.currentTab === 'T-logP' ? 0 : 30));
activeImage(moment(options.currentTime).hour(), moment(options.currentTime).minute(options.currentTab === 'T-logP' ? 0 : 30)); // }
}
} }
//
const onPlayClick = () => { const onPlayClick = () => {
options.isPlay = !options.isPlay; options.isPlay = !options.isPlay;
if (options.isPlay) { if (options.isPlay) {
@ -579,24 +641,22 @@
element.children[i].classList.remove('active'); element.children[i].classList.remove('active');
element.children[options.index].classList.add('active'); element.children[options.index].classList.add('active');
if(options.currentTab === 'MWR') { if(options.currentTab === 'MWR') {
options.currentTime = options.days[options.index].date; options.currentTime = options.days[options.index].date;
activeContrastImage(); // activeContrastImage();
} }
else { else {
options.currentTime = options.times[options.index].date; options.currentTime = options.times[options.index].date;
activeImage(moment(options.times[options.index].date).hour(), moment(options.times[options.index].date).minute()); // activeImage(moment(options.times[options.index].date).hour(), moment(options.times[options.index].date).minute());
} }
} }
const onChange = () => { const onChange = () => {
initTimeLine();
if(options.currentTab === 'MWR') { if(options.currentTab === 'MWR') {
// initDays(); // activeContrastImage();
activeContrastImage();
} else { } else {
initTimeLine(); // activeImage(moment(options.times[options.index].date).hour(), moment(options.times[options.index].date).minute());
activeImage(moment(options.times[options.index].date).hour(), moment(options.times[options.index].date).minute());
} }
} }
@ -631,15 +691,13 @@
const changeColor = () => { const changeColor = () => {
let timeLine = document.querySelectorAll('.time-item') let timeLine = document.querySelectorAll('.time-item')
timeLine.forEach((item :any, index) => { timeLine.forEach((item :any, index) => {
if( index >= 5 && index <= 14) { if( index >= 4 && index <= 13) {
const spanTimeColor = item.querySelector('.time') const spanTimeColor = item.querySelector('.time')
spanTimeColor.style.backgroundColor = '#CDDAF6' spanTimeColor.style.backgroundColor = '#CDDAF6'
} }
}) })
} }
return { return {
...toRefs(options), ...toRefs(options),
onTabClick, onTabClick,

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

@ -270,10 +270,16 @@ img {
} }
} }
.oneHour { .oneHour {
:nth-child(2n) {
span.time {
background-color: #CDDAF6;
}
}
.hour { .hour {
font-size: 0.12rem !important; font-size: 0.12rem !important;
color: #2c70fa; color: #2c70fa!important;
font-weight: 700; font-weight: 700;
} }
} }

2
04.系统编码/Frontend/src/uilts/axios.ts

@ -6,7 +6,7 @@ import { ElLoading } from 'element-plus'
let loading = null; let loading = null;
const service = axios.create({ const service = axios.create({
// baseURL:"http://112.124.40.88:8002", // baseURL:"http://112.124.40.88:8002",
// baseURL:'http://rdp.nagr.com.cn:18080',
baseURL:"http://localhost:8002", baseURL:"http://localhost:8002",
// baseURL: 'http://localhost:8002', // baseURL: 'http://localhost:8002',

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

@ -0,0 +1,47 @@
export class BoxDrawer{
private canvas: any = null;
private canvasContext: any = null;
private readonly weight: number = null;
private readonly height: number = null;
private readonly paddingLeft: number = 10;
private readonly paddingRight: number = 10;
private readonly paddingTop: number = 5;
private readonly paddingBottom: number = 5;
private readonly scaleLine: number = 4;
constructor(weight: number, height: number) {
this.weight = weight;
this.height = height;
this.init();
// this.drawCoordinate();
console.log(this.canvas.toDataURL());
}
private init(): void{
// 创建画布
this.canvas = document.createElement('canvas');
this.canvas.weight = this.weight;
this.canvas.height = this.height;
this.canvasContext = this.canvas.getContext('2d');
}
private drawCoordinate(): void{
this.drawBorder();
}
private drawBorder(): void{
const x = this.scaleLine + this.paddingLeft;
const y = this.scaleLine + this.paddingTop;
const _x = this.weight - this.scaleLine - this.paddingRight;
const _y = this.height - this.scaleLine - this.paddingBottom;
this.canvasContext.beginPath();
this.canvasContext.lineWidth="6";
this.canvasContext.strokeStyle="red";
this.canvasContext.rect(x, y, _x - x, _y - y);
this.canvasContext.stroke();
}
}
Loading…
Cancel
Save