Browse Source

commit

master
xuhuihui 3 years ago
parent
commit
cbb5946a91
  1. 58
      04.系统编码/Frontend/package-lock.json
  2. 1
      04.系统编码/Frontend/package.json
  3. 128
      04.系统编码/Frontend/src/components/MicrowaveRadiation.vue
  4. 742
      04.系统编码/Frontend/src/components/RamanLidar.vue
  5. 3
      04.系统编码/Frontend/src/components/SystemManagement.vue
  6. 18
      04.系统编码/Frontend/src/model/heat-map-drawer.ts
  7. 12
      04.系统编码/Frontend/src/model/high-chart-create.ts
  8. 8
      04.系统编码/Frontend/src/uilts/Config.ts
  9. 12
      04.系统编码/Frontend/src/uilts/box-drawer.ts

58
04.系统编码/Frontend/package-lock.json

@ -18,6 +18,7 @@
"jsencrypt": "3.0.0-rc.1", "jsencrypt": "3.0.0-rc.1",
"moment": "^2.29.1", "moment": "^2.29.1",
"qs": "^6.10.1", "qs": "^6.10.1",
"smooth-scrollbar": "^8.7.4",
"typescript": "^4.5.2", "typescript": "^4.5.2",
"vue": "^3.0.4", "vue": "^3.0.4",
"vue-router": "^4.0.12" "vue-router": "^4.0.12"
@ -1120,6 +1121,16 @@
"is-what": "^3.12.0" "is-what": "^3.12.0"
} }
}, },
"node_modules/core-js": {
"version": "3.21.1",
"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.21.1.tgz",
"integrity": "sha512-FRq5b/VMrWlrmCzwRrpDYNxyHP9BcAZC+xHJaqTgIE5091ZV1NTmyh0sGOg5XqpnHvR0svdy0sv1gWA1zmhxig==",
"hasInstallScript": true,
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/core-js"
}
},
"node_modules/cross-spawn": { "node_modules/cross-spawn": {
"version": "7.0.3", "version": "7.0.3",
"resolved": "https://registry.npm.taobao.org/cross-spawn/download/cross-spawn-7.0.3.tgz", "resolved": "https://registry.npm.taobao.org/cross-spawn/download/cross-spawn-7.0.3.tgz",
@ -2267,6 +2278,11 @@
"resolved": "https://registry.npm.taobao.org/lodash/download/lodash-4.17.21.tgz", "resolved": "https://registry.npm.taobao.org/lodash/download/lodash-4.17.21.tgz",
"integrity": "sha1-Z5WRxWTDv/quhFTPCz3zcMPWkRw=" "integrity": "sha1-Z5WRxWTDv/quhFTPCz3zcMPWkRw="
}, },
"node_modules/lodash-es": {
"version": "4.17.21",
"resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
"integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
},
"node_modules/log-symbols": { "node_modules/log-symbols": {
"version": "4.1.0", "version": "4.1.0",
"resolved": "https://registry.nlark.com/log-symbols/download/log-symbols-4.1.0.tgz", "resolved": "https://registry.nlark.com/log-symbols/download/log-symbols-4.1.0.tgz",
@ -3322,6 +3338,21 @@
"node": ">=8" "node": ">=8"
} }
}, },
"node_modules/smooth-scrollbar": {
"version": "8.7.4",
"resolved": "https://registry.npmjs.org/smooth-scrollbar/-/smooth-scrollbar-8.7.4.tgz",
"integrity": "sha512-BSqZJExXoGbl9FGA4ci33DNmlHFRvDxJk4Q8OXmYykRLa1Hzg2YiV5slVogMd1UsxzNf6m0nralT8GdanKWoYw==",
"dependencies": {
"core-js": "^3.6.4",
"lodash-es": "^4.17.21",
"tslib": "^1.10.0"
}
},
"node_modules/smooth-scrollbar/node_modules/tslib": {
"version": "1.14.1",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
"integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
},
"node_modules/source-map": { "node_modules/source-map": {
"version": "0.6.1", "version": "0.6.1",
"resolved": "https://registry.npm.taobao.org/source-map/download/source-map-0.6.1.tgz", "resolved": "https://registry.npm.taobao.org/source-map/download/source-map-0.6.1.tgz",
@ -4647,6 +4678,11 @@
"is-what": "^3.12.0" "is-what": "^3.12.0"
} }
}, },
"core-js": {
"version": "3.21.1",
"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.21.1.tgz",
"integrity": "sha512-FRq5b/VMrWlrmCzwRrpDYNxyHP9BcAZC+xHJaqTgIE5091ZV1NTmyh0sGOg5XqpnHvR0svdy0sv1gWA1zmhxig=="
},
"cross-spawn": { "cross-spawn": {
"version": "7.0.3", "version": "7.0.3",
"resolved": "https://registry.npm.taobao.org/cross-spawn/download/cross-spawn-7.0.3.tgz", "resolved": "https://registry.npm.taobao.org/cross-spawn/download/cross-spawn-7.0.3.tgz",
@ -5521,6 +5557,11 @@
"resolved": "https://registry.npm.taobao.org/lodash/download/lodash-4.17.21.tgz", "resolved": "https://registry.npm.taobao.org/lodash/download/lodash-4.17.21.tgz",
"integrity": "sha1-Z5WRxWTDv/quhFTPCz3zcMPWkRw=" "integrity": "sha1-Z5WRxWTDv/quhFTPCz3zcMPWkRw="
}, },
"lodash-es": {
"version": "4.17.21",
"resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
"integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
},
"log-symbols": { "log-symbols": {
"version": "4.1.0", "version": "4.1.0",
"resolved": "https://registry.nlark.com/log-symbols/download/log-symbols-4.1.0.tgz", "resolved": "https://registry.nlark.com/log-symbols/download/log-symbols-4.1.0.tgz",
@ -6322,6 +6363,23 @@
"integrity": "sha1-ZTm+hwwWWtvVJAIg2+Nh8bxNRjQ=", "integrity": "sha1-ZTm+hwwWWtvVJAIg2+Nh8bxNRjQ=",
"dev": true "dev": true
}, },
"smooth-scrollbar": {
"version": "8.7.4",
"resolved": "https://registry.npmjs.org/smooth-scrollbar/-/smooth-scrollbar-8.7.4.tgz",
"integrity": "sha512-BSqZJExXoGbl9FGA4ci33DNmlHFRvDxJk4Q8OXmYykRLa1Hzg2YiV5slVogMd1UsxzNf6m0nralT8GdanKWoYw==",
"requires": {
"core-js": "^3.6.4",
"lodash-es": "^4.17.21",
"tslib": "^1.10.0"
},
"dependencies": {
"tslib": {
"version": "1.14.1",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
"integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
}
}
},
"source-map": { "source-map": {
"version": "0.6.1", "version": "0.6.1",
"resolved": "https://registry.npm.taobao.org/source-map/download/source-map-0.6.1.tgz", "resolved": "https://registry.npm.taobao.org/source-map/download/source-map-0.6.1.tgz",

1
04.系统编码/Frontend/package.json

@ -16,6 +16,7 @@
"jsencrypt": "3.0.0-rc.1", "jsencrypt": "3.0.0-rc.1",
"moment": "^2.29.1", "moment": "^2.29.1",
"qs": "^6.10.1", "qs": "^6.10.1",
"smooth-scrollbar": "^8.7.4",
"typescript": "^4.5.2", "typescript": "^4.5.2",
"vue": "^3.0.4", "vue": "^3.0.4",
"vue-router": "^4.0.12" "vue-router": "^4.0.12"

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

@ -54,7 +54,7 @@
<div class="toolbar"> <div class="toolbar">
<!--6分钟--> <!--6分钟-->
<div v-if="currentElement === 'six-minute'" class="times sixMinute"> <div v-show ="currentElement === 'six-minute'" class="times sixMinute">
<div v-for="(time, index) in times" :key="index" <div v-for="(time, index) in times" :key="index"
:class="{'active': currentTime === time.date, 'first-hour': time.minute === '00'}" class="time-item"> :class="{'active': currentTime === time.date, 'first-hour': time.minute === '00'}" class="time-item">
<span class="hour">{{ time.hour }}</span> <span class="hour">{{ time.hour }}</span>
@ -63,7 +63,7 @@
</div> </div>
<!--30分钟--> <!--30分钟-->
<div v-if="currentElement === 'half-hour'" class="times halfHour"> <div v-show ="currentElement === 'half-hour'" class="times halfHour">
<div v-for="(time, index) in times" :key="index" :class="{'active': currentTime === time.date}" <div v-for="(time, index) in times" :key="index" :class="{'active': currentTime === time.date}"
class="time-item"> class="time-item">
<span class="hour ">{{ time.hour }}</span> <span class="hour ">{{ time.hour }}</span>
@ -72,7 +72,7 @@
</div> </div>
<!--1小时--> <!--1小时-->
<div v-if="currentElement === 'one-hour'" class="times oneHour"> <div v-show ="currentElement === 'one-hour'" class="times oneHour">
<div v-for="(time, index) in times" :key="index" :class="{'active': currentTime === time.date}" <div v-for="(time, index) in times" :key="index" :class="{'active': currentTime === time.date}"
class="time-item"> class="time-item">
<span class="hour">{{ time.hour }}</span> <span class="hour">{{ time.hour }}</span>
@ -101,8 +101,16 @@
<div class="picture-view"> <div class="picture-view">
<!--质控对比--> <!--质控对比-->
<div v-if="currentTab === 'MWR'" class="picture-container contrast-picture-container picture-MWR"> <div v-show ="currentTab === 'MWR'" class="picture-container contrast-picture-container picture-MWR">
<div class="picture"> <!-- <el-switch-->
<!-- v-model="SeasonValue"-->
<!-- @change="onchangeSeason"-->
<!-- active-value="1"-->
<!-- inactive-value="2"-->
<!-- active-text="普通"-->
<!-- inactive-text="特殊"-->
<!-- />-->
<div class="picture special-picture">
<h2 class="title">质控前</h2> <h2 class="title">质控前</h2>
<canvas id='original-data-canvas'></canvas> <canvas id='original-data-canvas'></canvas>
</div> </div>
@ -110,14 +118,14 @@
<!-- <h2 class="title">温度异常值标记</h2>--> <!-- <h2 class="title">温度异常值标记</h2>-->
<!-- <canvas id='abnormal-canvas'></canvas>--> <!-- <canvas id='abnormal-canvas'></canvas>-->
<!-- </div>--> <!-- </div>-->
<div class="picture"> <div class="picture special-picture">
<h2 class="title">质控后</h2> <h2 class="title">质控后</h2>
<canvas id='interpolate-canvas'></canvas> <canvas id='interpolate-canvas'></canvas>
</div> </div>
</div> </div>
<!--BP反演产品--> <!--BP反演产品-->
<div v-if="currentTab === 'shixu_BPFY'" class="picture-container contrast-picture-container shiXuBP"> <div v-show ="currentTab === 'shixu_BPFY'" class="picture-container contrast-picture-container shiXuBP">
<div class="BPPicture picture"> <div class="BPPicture picture">
<h2 class="title">BP反演温度</h2> <h2 class="title">BP反演温度</h2>
<canvas id="BP-temp"></canvas> <canvas id="BP-temp"></canvas>
@ -132,7 +140,7 @@
</div> </div>
</div> </div>
<div v-if="currentTab === 'kuoxian'" class="verticalProfile"> <div v-show ="currentTab === 'kuoxian'" class="verticalProfile">
<div class="verticalProfile-picture"> <div class="verticalProfile-picture">
<h2 class="verticalProfileTitle">温度廓线</h2> <h2 class="verticalProfileTitle">温度廓线</h2>
<div id="verticalProfileTemp" style="width: 400px;height: 400px"></div> <div id="verticalProfileTemp" style="width: 400px;height: 400px"></div>
@ -142,12 +150,12 @@
<div id="verticalProfileRelativeHumidity" style="width: 400px;height: 400px"></div> <div id="verticalProfileRelativeHumidity" style="width: 400px;height: 400px"></div>
</div> </div>
<div class="verticalProfile-picture"> <div class="verticalProfile-picture">
<h2 class="verticalProfileTitle">水汽密度廓线</h2> <h2 class="verticalProfileTitle" style="left: 1.4rem;">水汽密度廓线</h2>
<div id="verticalProfileVaporDensity" style="width: 400px;height: 400px"></div> <div id="verticalProfileVaporDensity" style="width: 400px;height: 400px"></div>
</div> </div>
</div> </div>
<div v-if="currentTab === 'shixu'" class="picture-container contrast-picture-container shiXu"> <div v-show ="currentTab === 'shixu'" class="picture-container contrast-picture-container shiXu">
<div class="picture" style="margin-top: 570px"> <div class="picture" style="margin-top: 570px">
<h2 class="title">对流有效位能CAPE</h2> <h2 class="title">对流有效位能CAPE</h2>
<div id="convectiveHighChartCAPE" style="width: 100%;height:75%"></div> <div id="convectiveHighChartCAPE" style="width: 100%;height:75%"></div>
@ -183,8 +191,8 @@
</div> </div>
</div> </div>
<div v-if="currentTab === 'T-logP'" class="picture-container contrast-picture-container"> <div v-show ="currentTab === 'T-logP'" class="picture-container contrast-picture-container">
<img :src="tLogPPicture" style="width: 50%"> <img :src="tLogPPicture" style="width: 20%">
</div> </div>
</div> </div>
@ -258,7 +266,8 @@ export default {
BPTitleTime: null, BPTitleTime: null,
highChartXAxis: [], highChartXAxis: [],
specialStartTime: null, specialStartTime: null,
tLogPPicture: "/images/no-data.png" tLogPPicture: "/images/no-data.png",
SeasonValue: '1'
}); });
let drawers = { let drawers = {
@ -592,7 +601,6 @@ export default {
} }
post("/tLogP/findLater", params).then((response: any) => { post("/tLogP/findLater", params).then((response: any) => {
console.log(response)
response == "" ? options.tLogPPicture = "/images/no-data.png" : options.tLogPPicture = response ; response == "" ? options.tLogPPicture = "/images/no-data.png" : options.tLogPPicture = response ;
}) })
} }
@ -619,7 +627,7 @@ export default {
// createEmptyCanvas('abnormal-canvas', 1500, 500); // createEmptyCanvas('abnormal-canvas', 1500, 500);
return; return;
} }
drawers.originalDrawer = new BoxDrawer(1500, 500, prepareTmpOriginalColors(), response.data, 'original-data-canvas', '℃'); drawers.originalDrawer = new BoxDrawer(1500, 500, prepareTmpOriginalColors(options.SeasonValue), response.data, 'original-data-canvas', '℃');
// drawers.abnormalDrawer = new BoxDrawer(1500, 500, prepareTmpOriginalColors(), response.data, 'abnormal-canvas', ''); // drawers.abnormalDrawer = new BoxDrawer(1500, 500, prepareTmpOriginalColors(), response.data, 'abnormal-canvas', '');
// options.contrast.noQCImgUrl = drawers.originalDrawer.base64Image; // options.contrast.noQCImgUrl = drawers.originalDrawer.base64Image;
// options.contrast.checkImgUrl = drawers.abnormalDrawer.base64Image; // options.contrast.checkImgUrl = drawers.abnormalDrawer.base64Image;
@ -644,7 +652,7 @@ export default {
return; return;
} }
if (options.currentTab === 'MWR') if (options.currentTab === 'MWR')
drawers.interpolateDrawer = new BoxDrawer(1500, 500, prepareTmpOriginalColors(), response.data, 'interpolate-canvas', '℃'); drawers.interpolateDrawer = new BoxDrawer(1500, 500, prepareTmpOriginalColors(options.SeasonValue), response.data, 'interpolate-canvas', '℃');
else if (options.currentTab === 'shixu_BPFY') else if (options.currentTab === 'shixu_BPFY')
drawers.interpolateDrawer = new BoxDrawer(1500, 500, prepareBPTempColors(), response.data, 'BP-temp', '(degree)'); drawers.interpolateDrawer = new BoxDrawer(1500, 500, prepareBPTempColors(), response.data, 'BP-temp', '(degree)');
// options.contrast.fillingImgUrl = drawers.interpolateDrawer.base64Image; // options.contrast.fillingImgUrl = drawers.interpolateDrawer.base64Image;
@ -721,6 +729,7 @@ export default {
verify(); verify();
return []; return [];
} }
// creates.verticalProfile.updateXAxis(response.data.radar_info.map(r => r.col_factor)); // creates.verticalProfile.updateXAxis(response.data.radar_info.map(r => r.col_factor));
creates.verticalProfileTemp.updateXAxis(response.data.radar_info.map(r => r.col_factor)) creates.verticalProfileTemp.updateXAxis(response.data.radar_info.map(r => r.col_factor))
creates.verticalProfileVaporDensity.updateXAxis(response.data.radar_info.map(r => r.col_factor)) creates.verticalProfileVaporDensity.updateXAxis(response.data.radar_info.map(r => r.col_factor))
@ -857,13 +866,33 @@ export default {
}) })
} }
const prepareTmpOriginalColors = () => { // const prepareTmpOriginalColors = () => {
// return new ColorChart(['#860200', '#CD0402', '#FF1A04', '#FF5E0C',
// '#FEA61B', '#FDED2A', '#C1FE46', '#7AFD86',
// '#2BFDCD', '#05E6FD', '#14A0FA', '#1B5AFB',
// '#1C1FF9', '#1310C4', '#09067C'],
// [999, 30, 25, 20, 15, 10, 5, 0, -5, -10, -15, -20, -25, -30, -35, -999]
// );
// }
const prepareTmpOriginalColors = (type: string) => {
switch (type) {
case '1' :
return new ColorChart(['#860200', '#CD0402', '#FF1A04', '#FF5E0C', return new ColorChart(['#860200', '#CD0402', '#FF1A04', '#FF5E0C',
'#FEA61B', '#FDED2A', '#C1FE46', '#7AFD86', '#FEA61B', '#FDED2A', '#C1FE46', '#7AFD86',
'#2BFDCD', '#05E6FD', '#14A0FA', '#1B5AFB', '#2BFDCD', '#05E6FD', '#14A0FA', '#1B5AFB',
'#1C1FF9', '#1310C4', '#09067C'], '#1C1FF9', '#1310C4', '#09067C'],
[999, 30, 25, 20, 15, 10, 5, 0, -5, -10, -15, -20, -25, -30, -35, -999] [999, 30, 25, 20, 15, 10, 5, 0, -5, -10, -15, -20, -25, -30, -35, -999]
); );
case '2' :
return new ColorChart(['#860200', '#CD0402', '#FF1A04', '#FF5E0C',
'#FEA61B', '#FDED2A', '#C1FE46', '#7AFD86',
'#2BFDCD', '#05E6FD', '#14A0FA', '#1B5AFB',
'#1C1FF9', '#1310C4', '#09067C'],
[999, 15, 12, 11, 9, 7, 5, 3, 1, -1, -3, -5, -7, -9, -11, -999]
);
default:
throw new Error("无效的type类型");
}
} }
const prepareBPTempColors = () => { const prepareBPTempColors = () => {
@ -899,6 +928,10 @@ export default {
} }
} }
const onchangeSeason = () => {
reloadData()
}
return { return {
...toRefs(options), ...toRefs(options),
onTabClick, onTabClick,
@ -910,7 +943,7 @@ export default {
onRefreshClick, onRefreshClick,
onChange, onChange,
changeColor, changeColor,
onchangeSeason
} }
} }
} }
@ -918,7 +951,6 @@ export default {
<style lang="less" scoped> <style lang="less" scoped>
.main { .main {
.container { .container {
.verticalProfile { .verticalProfile {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -932,8 +964,8 @@ export default {
.verticalProfileTitle { .verticalProfileTitle {
position: absolute; position: absolute;
font-size: 0.22rem; font-size: 0.22rem;
left: 1.97rem; left: 1.77rem;
top: -0.38rem; top: -0.8rem;
} }
} }
} }
@ -943,7 +975,6 @@ export default {
} }
.contrast-picture-container { .contrast-picture-container {
width: calc(~"100% - 2.5rem"); width: calc(~"100% - 2.5rem");
margin: 0 auto; margin: 0 auto;
//width: 100%; //width: 100%;
@ -951,24 +982,28 @@ export default {
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
// justify-content: space-between; // justify-content: space-between;
.special-picture {
height: 100%!important;
.title {
top: 80px!important;
}
}
.picture { .picture {
width: 45%; width: 45%;
height: 45%; height: 45%;
position: relative; position: relative;
#original-data-canvas /*#abnormal-canvas*/, #interpolate-canvas { #original-data-canvas /*#abnormal-canvas*/, #interpolate-canvas {
transform: scale(0.38, 0.4); transform: scale(0.47, 0.8);
} }
.title { .title {
width: 100%; width: 100%;
font-size: 0.22rem; font-size: 0.22rem;
position: absolute; position: absolute;
left: 3.10rem; left: 3.10rem;
top: 0; top: 0;
z-index: 100; z-index: 1000;
} }
} }
@ -978,7 +1013,7 @@ export default {
position: relative; position: relative;
#BP-temp, #BP-relative-humidity, #BP-vapor-density { #BP-temp, #BP-relative-humidity, #BP-vapor-density {
transform: scale(0.40, 0.4); transform: scale(0.50, 0.4);
} }
.title { .title {
@ -1001,8 +1036,47 @@ export default {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
position: relative;
:deep(.el-switch) {
position: absolute;
left: 0px;
bottom: 0px;
width: 150px;
z-index: 1000;
//width: 10%;
}
:deep(.el-switch__core) {
width: 50px !important;
//height: 20px !important;
}
:deep(.el-switch__core::after) {
width: 80px;
height: 35px;
margin-top: -1px;
margin-bottom: 2px;
}
} }
} }
} }
::-webkit-scrollbar {
width: 8px;
border-radius: 4px;
}
::-webkit-scrollbar-track {
background-color: inherit;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
::-webkit-scrollbar-thumb {
background-color: #c3c9cd;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
</style> </style>

742
04.系统编码/Frontend/src/components/RamanLidar.vue

File diff suppressed because it is too large

3
04.系统编码/Frontend/src/components/SystemManagement.vue

@ -49,7 +49,8 @@
hide-on-single-page="hide-on-single-page" hide-on-single-page="hide-on-single-page"
@prev-click="prev" @prev-click="prev"
@next-click="next" @next-click="next"
@current-change="changEnum"> @current-change="changEnum"
>
</el-pagination> </el-pagination>
</div> </div>
</div> </div>

18
04.系统编码/Frontend/src/model/heat-map-drawer.ts

@ -16,7 +16,7 @@ export class HeatMapDrawer{
private readonly paddingLeft: number = 150; private readonly paddingLeft: number = 150;
private readonly paddingRight: number = 100; private readonly paddingRight: number = 100;
private readonly paddingTop: number = 60; private readonly paddingTop: number = 60;
private readonly paddingBottom: number = 50; private readonly paddingBottom: number = 100;
private colorChart: ColorChart = null; private colorChart: ColorChart = null;
private values: any = null; private values: any = null;
@ -39,8 +39,8 @@ export class HeatMapDrawer{
private yAxis: CoordinateScale; private yAxis: CoordinateScale;
private unit: string; private unit: string;
private name: string;
constructor(width: number, height: number, values: any, id: string, unit: string) { constructor(width: number, height: number, values: any, id: string, unit: string, name: string = '') {
if (id == null) return; if (id == null) return;
this.id = id; this.id = id;
@ -48,7 +48,7 @@ export class HeatMapDrawer{
this.height = height; this.height = height;
this.values = values; this.values = values;
this.unit = unit; this.unit = unit;
this.name = name;
this.init(); this.init();
} }
@ -241,6 +241,7 @@ export class HeatMapDrawer{
this.drawHorizontalScale(); this.drawHorizontalScale();
this.drawHeightText(); this.drawHeightText();
this.drawTemperatureText(this.unit); this.drawTemperatureText(this.unit);
this.drawResolutionName(this.name)
} }
//高度单位 //高度单位
@ -280,6 +281,13 @@ export class HeatMapDrawer{
this.canvasContext.fillText(unit, unitX, 50); this.canvasContext.fillText(unit, unitX, 50);
} }
private drawResolutionName(name): void {
this.canvasContext.font = "normal 35px Verdana";
this.canvasContext.fillStyle = "#000000";
let nameX = 380
this.canvasContext.fillText(name, nameX, 580)
}
private drawVerticalScale(): void{ private drawVerticalScale(): void{
let scaleCount = this.xAxis.scales.length; let scaleCount = this.xAxis.scales.length;
let verticalScaleIntervalLength = this.borderWidth / (scaleCount - 1); let verticalScaleIntervalLength = this.borderWidth / (scaleCount - 1);
@ -299,7 +307,7 @@ export class HeatMapDrawer{
this.canvasContext.stroke(); this.canvasContext.stroke();
if (true){ if (true){
this.canvasContext.font = "normal 20px Verdana"; this.canvasContext.font = "normal 15px Verdana";
this.canvasContext.fillStyle = "#000000"; this.canvasContext.fillStyle = "#000000";
this.canvasContext.fillText(this.xAxis.scales[index], _x - this.canvasContext.measureText(this.xAxis.scales[index]).width / 2, startY + this.verticalScaleLine + this.borderHeight + 36); this.canvasContext.fillText(this.xAxis.scales[index], _x - this.canvasContext.measureText(this.xAxis.scales[index]).width / 2, startY + this.verticalScaleLine + this.borderHeight + 36);
} }

12
04.系统编码/Frontend/src/model/high-chart-create.ts

@ -16,7 +16,7 @@ export class HighChartCreate {
this.id = id; this.id = id;
} }
public setChart(inverted: boolean = false, type: string = 'line'): void{ public setChart(inverted: boolean = false, type: string = 'line'): void {
this.chart = { this.chart = {
type: type, type: type,
inverted: inverted inverted: inverted
@ -76,12 +76,15 @@ export class HighChartCreate {
opposite: opposite opposite: opposite
}); });
} }
//图例标识
public setLegend(enabled: boolean = false){ public setLegend(enabled: boolean = false){
this.legend = { this.legend = {
layout: 'vertical', layout: 'vertical',
align: 'right', align: 'right',
verticalAlign: 'middle', verticalAlign: 'top',
floating: true,
x: 20,
y: 0,
enabled: enabled enabled: enabled
} }
} }
@ -94,10 +97,11 @@ export class HighChartCreate {
} }
// public setSeries(name: string) // public setSeries(name: string)
public setSeries(name: string, yAxis: number = 0, valueSuffix: string = null, color: string = null){ public setSeries(name: string, yAxis: number = 0, valueSuffix: string = null, color: string = null, linColor: string = null){
let series: any = { let series: any = {
name: name, name: name,
data: [], data: [],
color: linColor
} }
if (color == null || valueSuffix == null){ if (color == null || valueSuffix == null){
this.series.push(series); this.series.push(series);

8
04.系统编码/Frontend/src/uilts/Config.ts

@ -2,10 +2,10 @@ import { Moment } from "moment";
import { format } from "./String"; import { format } from "./String";
export class Config { export class Config {
public static url: string = ""; // public static url: string = "";
public static parentUrl: string = "http://10.124.102.10:8002/product/picture"; // public static parentUrl: string = "http://10.124.102.10:8002/product/picture";
// public static url: string = "http://localhost:8002"; public static url: string = "http://localhost:8002";
// public static parentUrl: string = "http://112.124.40.88:8999/product/picture"; public static parentUrl: string = "http://112.124.40.88:8999/product/picture";
// public static parentUrl: string = "http://rdp.nagr.com.cn:8082/product/picture"; // public static parentUrl: string = "http://rdp.nagr.com.cn:8082/product/picture";
} }

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

@ -16,7 +16,6 @@ export function createEmptyCanvas(id: string, width: number, height: number): vo
} }
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;
@ -242,7 +241,7 @@ export class BoxDrawer{
//高度单位 //高度单位
private drawHeightText(): void { private drawHeightText(): void {
let name =['高','度','(','k','m',')']; // 文本内容 let name =['高','度','(','k','m',')']; // 文本内容
let x = 70,y = 180; // 文字开始的坐标 let x = 70,y = 150; // 文字开始的坐标
let letterSpacing = 20; // 设置字间距 let letterSpacing = 20; // 设置字间距
for(let i = 0; i < name.length; i++) { for(let i = 0; i < name.length; i++) {
const str = name.slice(i, i + 1).toString(); const str = name.slice(i, i + 1).toString();
@ -426,8 +425,8 @@ export class Box implements IBox{
public dataHeight: number; public dataHeight: number;
time: string; time: string;
util: string; util: string;
//提示框的宽高
rectWidth: number = 280; rectWidth: number = 320;
rectHeight: number = 120; rectHeight: number = 120;
rectX: number; rectX: number;
rectY: number; rectY: number;
@ -529,13 +528,13 @@ export class Box implements IBox{
} }
private setText(canvasContext: any) : void{ private setText(canvasContext: any) : void{
canvasContext.font = "normal 22px Arial"; canvasContext.font = "normal 26px 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 + 30); canvasContext.fillText(timeText, centerX - canvasContext.measureText(timeText).width / 2, this.rectY + 30);
const valueText = 'value:' + this.value; const valueText = 'value:' + this.value.toPrecision(3);
canvasContext.fillText(valueText, centerX - canvasContext.measureText(valueText).width / 2, this.rectY + 22 + 45); 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 + 22 + 22 + 60); canvasContext.fillText(heightText, centerX - canvasContext.measureText(heightText).width / 2, this.rectY + 22 + 22 + 60);
@ -547,6 +546,7 @@ export class Box implements IBox{
canvasContext.strokeRect(this.x, this.y, this.width, this.height); canvasContext.strokeRect(this.x, this.y, this.width, this.height);
} }
uuid(): string{ uuid(): string{
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => { return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
let r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8); let r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);

Loading…
Cancel
Save