xiaowuler 3 years ago
parent
commit
87a4e6ea91
  1. 8
      04.系统编码/Frontend/src/components/MicrowaveRadiation.vue
  2. 87
      04.系统编码/Frontend/src/components/RamanLidar.vue
  3. 7
      04.系统编码/Frontend/src/model/heat-map-drawer.ts
  4. 40
      04.系统编码/Frontend/src/model/high-chart-create.ts
  5. 29
      04.系统编码/Frontend/src/uilts/box-drawer.ts

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

@ -274,7 +274,7 @@ export default {
specialStartTime: null, specialStartTime: null,
tLogPPicture: "/images/no-data.png", tLogPPicture: "/images/no-data.png",
SeasonValue: '1', SeasonValue: '1',
ElementChange: "BP-temp" ElementChange: "BP-temp",
}); });
let drawers = { let drawers = {
@ -996,6 +996,7 @@ export default {
// justify-content: space-between; // justify-content: space-between;
.special-picture { .special-picture {
height: 100%!important; height: 100%!important;
.title { .title {
top: 80px!important; top: 80px!important;
} }
@ -1025,14 +1026,15 @@ export default {
} }
.picture { .picture {
width: 100%; width: 100%;
height: 100%;
position: relative; position: relative;
margin-top: 30px; //margin-top: 30px;
.title { .title {
width: 100%; width: 100%;
font-size: 0.22rem; font-size: 0.22rem;
position: absolute; position: absolute;
left: 3.4rem; left: 3.4rem;
top: 0; top: 0.3rem;
z-index: 1000; z-index: 1000;
} }
} }

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

@ -77,7 +77,7 @@
<div class="time-item" v-for="(time, index) in times" :key="index" <div class="time-item" v-for="(time, index) in times" :key="index"
:class="{'active': currentTime === time.date, 'first-hour': time.day === '01'}"> :class="{'active': currentTime === time.date, 'first-hour': time.day === '01'}">
<span class="hour" style="padding-left: 10px">{{ time.month }}</span> <span class="hour" style="padding-left: 10px">{{ time.month }}</span>
<span class="time" @click="onDayClick(time, index)">{{ time.day }}</span> <span class="time" @click="onChangeDayClick(time, index)">{{ time.day }}</span>
</div> </div>
</div> </div>
@ -146,7 +146,7 @@
</div> </div>
</div> </div>
<div class="picture special-picture"> <div class="picture special-picture">
<div v-loading="loadingPmStatus" <div v-loading="loadingPm10Status"
style="width: 100%;" style="width: 100%;"
custom-class="loading" custom-class="loading"
element-loading-text="加载中"> element-loading-text="加载中">
@ -224,6 +224,7 @@
<div class="picture-container raman-picture-container" v-show="currentElement === 'extinction'"> <div class="picture-container raman-picture-container" v-show="currentElement === 'extinction'">
<div class="picture special-picture"> <div class="picture special-picture">
<h2 class="title" style="left: 3.3rem">质控前</h2>
<div v-loading="loadingExtinctionBeforeStatus" <div v-loading="loadingExtinctionBeforeStatus"
style="width: 100%;" style="width: 100%;"
custom-class="loading" custom-class="loading"
@ -232,6 +233,7 @@
</div> </div>
</div> </div>
<div class="picture special-picture"> <div class="picture special-picture">
<h2 class="title">质控后</h2>
<div v-loading="loadingExtinctionStatus" <div v-loading="loadingExtinctionStatus"
style="width: 100%;" style="width: 100%;"
custom-class="loading" custom-class="loading"
@ -243,6 +245,7 @@
<div class="picture-container raman-picture-container" v-show="currentElement === 'watervapor'"> <div class="picture-container raman-picture-container" v-show="currentElement === 'watervapor'">
<div class="picture special-picture"> <div class="picture special-picture">
<h2 class="title" style="left: 3.3rem">质控前</h2>
<div v-loading="loadingWatervaporBeforeStatus" <div v-loading="loadingWatervaporBeforeStatus"
style="width: 100%" style="width: 100%"
element-loading-text="加载中"> element-loading-text="加载中">
@ -250,6 +253,7 @@
</div> </div>
</div> </div>
<div class="picture special-picture"> <div class="picture special-picture">
<h2 class="title">质控后</h2>
<div v-loading="loadingWaterVaporStatus" <div v-loading="loadingWaterVaporStatus"
style="width: 100%" style="width: 100%"
element-loading-text="加载中"> element-loading-text="加载中">
@ -264,6 +268,7 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import {onMounted, reactive, toRefs, watch} from 'vue'; import {onMounted, reactive, toRefs, watch} from 'vue';
import moment from "moment"; import moment from "moment";
import {post} from '../uilts/axios'; import {post} from '../uilts/axios';
@ -344,6 +349,7 @@ export default {
loadingWaterVaporSingleStatus: false, loadingWaterVaporSingleStatus: false,
loadingExtinctionOpticsStatus: false, loadingExtinctionOpticsStatus: false,
loadingPmStatus: false, loadingPmStatus: false,
loadingPm10Status: false,
loadingCloudSolStatus: false, loadingCloudSolStatus: false,
loadingCloudRecognitionStatus: false, loadingCloudRecognitionStatus: false,
loadingExtinctionStatus: false, loadingExtinctionStatus: false,
@ -390,7 +396,7 @@ export default {
creates.boundaryLayerHeight = new HighChartCreate('BoundaryLayerHeight'); creates.boundaryLayerHeight = new HighChartCreate('BoundaryLayerHeight');
creates.boundaryLayerHeight.setChart(false,'line', 1000); creates.boundaryLayerHeight.setChart(false,'line', 1000);
creates.boundaryLayerHeight.setXAxisTypeDate(); creates.boundaryLayerHeight.setXAxisTypeDate();
creates.boundaryLayerHeight.setYAxis('边界层高度(m)'); creates.boundaryLayerHeight.setSpecialYAxis('边界层高度(m)');
creates.boundaryLayerHeight.setLegend(); creates.boundaryLayerHeight.setLegend();
creates.boundaryLayerHeight.setTooltip('高度: {point.y}'); creates.boundaryLayerHeight.setTooltip('高度: {point.y}');
creates.boundaryLayerHeight.setSeries('边界层高度',0, null, null, '#3636FF') creates.boundaryLayerHeight.setSeries('边界层高度',0, null, null, '#3636FF')
@ -403,19 +409,20 @@ export default {
creates.cloudsHeight.setChart(false, 'scatter', 1000); creates.cloudsHeight.setChart(false, 'scatter', 1000);
// creates.cloudsHeight.setSpecialXAxis('()', 24, 0, 2); // creates.cloudsHeight.setSpecialXAxis('()', 24, 0, 2);
creates.cloudsHeight.setXAxisTypeDate(); creates.cloudsHeight.setXAxisTypeDate();
creates.cloudsHeight.setYAxis('高度(m)'); creates.cloudsHeight.setSpecialYAxis('高度(m)');
creates.cloudsHeight.setLegend(); creates.cloudsHeight.setLegend();
creates.cloudsHeight.setTooltip('高度: {point.y}'); creates.cloudsHeight.setTooltip('高度: {point.y}');
creates.cloudsHeight.setSeries('云层高度') creates.cloudsHeight.setSeries('云层高度')
creates.cloudsHeight.init(); creates.cloudsHeight.init();
} }
// //
const cloudTopHeightInit = () => { const cloudTopHeightInit = () => {
creates.cloudTopHeight = new HighChartCreate('cloudTopHeight'); creates.cloudTopHeight = new HighChartCreate('cloudTopHeight');
creates.cloudTopHeight.setChart(false, 'scatter', 1000); creates.cloudTopHeight.setChart(false, 'scatter', 1000);
// creates.cloudTopHeight.setSpecialXAxis('()', 24, 0, 2); // creates.cloudTopHeight.setSpecialXAxis('()', 24, 0, 2);
creates.cloudTopHeight.setXAxisTypeDate(); creates.cloudTopHeight.setXAxisTypeDate();
creates.cloudTopHeight.setYAxis('高度(m)'); creates.cloudTopHeight.setSpecialYAxis('高度(m)');
creates.cloudTopHeight.setLegend(); creates.cloudTopHeight.setLegend();
creates.cloudTopHeight.setTooltip('高度: {point.y}'); creates.cloudTopHeight.setTooltip('高度: {point.y}');
creates.cloudTopHeight.setSeries('云顶高度') creates.cloudTopHeight.setSeries('云顶高度')
@ -427,7 +434,7 @@ export default {
creates.LidarRatio = new HighChartCreate('LidarRatio'); creates.LidarRatio = new HighChartCreate('LidarRatio');
creates.LidarRatio.setChart(false,'line', 1000); creates.LidarRatio.setChart(false,'line', 1000);
creates.LidarRatio.setSpecialXAxis('sr', 120, 0, 20); creates.LidarRatio.setSpecialXAxis('sr', 120, 0, 20);
creates.LidarRatio.setYAxis('高度(m)'); creates.LidarRatio.setSpecialYAxis('高度(m)');
creates.LidarRatio.setLegend(); creates.LidarRatio.setLegend();
creates.LidarRatio.setTooltip('高度: {point.y}'); creates.LidarRatio.setTooltip('高度: {point.y}');
creates.LidarRatio.setSeries('激光雷达比', 0, null, null, '#3636FF') creates.LidarRatio.setSeries('激光雷达比', 0, null, null, '#3636FF')
@ -438,10 +445,8 @@ export default {
const opticalThicknessInit = () => { const opticalThicknessInit = () => {
creates.opticalThickness = new HighChartCreate('opticalThickness'); creates.opticalThickness = new HighChartCreate('opticalThickness');
creates.opticalThickness.setChart(false,'line', 1000); creates.opticalThickness.setChart(false,'line', 1000);
// creates.opticalThickness.setSpecialXAxis('', 24, 0, 2);
// creates.opticalThickness.setXAxis('(/)', false);
creates.opticalThickness.setXAxisTypeDate(); creates.opticalThickness.setXAxisTypeDate();
creates.opticalThickness.setYAxis('光学厚度'); creates.opticalThickness.setSpecialYAxis('光学厚度');
creates.opticalThickness.setLegend(true); creates.opticalThickness.setLegend(true);
creates.opticalThickness.setTooltip('{point.y}'); creates.opticalThickness.setTooltip('{point.y}');
creates.opticalThickness.setSeries('气溶胶', 0, null, null, '#FF5352') creates.opticalThickness.setSeries('气溶胶', 0, null, null, '#FF5352')
@ -567,12 +572,12 @@ export default {
reloadCloudRecognition('backscatter', 801, 'backscatter', drawBackscatter); reloadCloudRecognition('backscatter', 801, 'backscatter', drawBackscatter);
break; break;
case 'pm2_5' : case 'pm2_5' :
initTimeLine() initTimeLine();
reloadCloudRecognition('pm2_5', 201, 'pm2_5', drawPm2Point5); reloadCloudRecognition('pm2_5', 201, 'pm2_5', drawPm2Point5);
reloadCloudRecognition('pm2_5', 201, 'pm10', drawPm10); reloadCloudRecognition('pm10', 201, 'pm10', drawPm10);
break; break;
case 'pblh' : case 'pblh' :
initTimeLine() initTimeLine();
reloadChartsRecognition('pblh', drawBoundaryLayerCharts); reloadChartsRecognition('pblh', drawBoundaryLayerCharts);
break; break;
case 'lidarratio' : case 'lidarratio' :
@ -595,7 +600,6 @@ export default {
// reloadCloudRecognition('layertype', 801, 'layertype', drawCloudRecognition); // reloadCloudRecognition('layertype', 801, 'layertype', drawCloudRecognition);
// break; // break;
case 'extinction' : case 'extinction' :
// initTimeLineDay()
initTimeLine(true); initTimeLine(true);
reloadExtinctionBefore(); reloadExtinctionBefore();
reloadCloudRecognition('extinction', 801, 'extinction', drawExtinctionAfter, false, 12); reloadCloudRecognition('extinction', 801, 'extinction', drawExtinctionAfter, false, 12);
@ -620,6 +624,7 @@ export default {
post("/qualityCompare/findByTimeAndElement", params).then((response: any) => { post("/qualityCompare/findByTimeAndElement", params).then((response: any) => {
options.loadingWatervaporBeforeStatus = false; options.loadingWatervaporBeforeStatus = false;
if (response.error != 0){ if (response.error != 0){
createEmptyCanvas('watervapor_chart-before', 800, 650);
console.log("未找到质控前数据文件"); console.log("未找到质控前数据文件");
return; return;
} }
@ -629,7 +634,7 @@ export default {
} }
let matrix = convertValueToBox(response.data); let matrix = convertValueToBox(response.data);
creates.watervaporBeforeDrawer = new HeatMapDrawer(800, 650, matrix, "watervapor_chart-before", 'g/kg','质控前'); creates.watervaporBeforeDrawer = new HeatMapDrawer(800, 650, matrix, "watervapor_chart-before", 'g/kg');
creates.watervaporBeforeDrawer.setAxis(new CoordinateScale(quailtyTimes), new CoordinateScale([0, 500, 1000, 1500], true, true)); creates.watervaporBeforeDrawer.setAxis(new CoordinateScale(quailtyTimes), new CoordinateScale([0, 500, 1000, 1500], true, true));
creates.watervaporBeforeDrawer.setColorChart(prepareWatervaporColors()); creates.watervaporBeforeDrawer.setColorChart(prepareWatervaporColors());
creates.watervaporBeforeDrawer.draw(); creates.watervaporBeforeDrawer.draw();
@ -646,6 +651,7 @@ export default {
post("/qualityCompare/findByTimeAndElement", params).then((response: any) => { post("/qualityCompare/findByTimeAndElement", params).then((response: any) => {
options.loadingExtinctionBeforeStatus = false; options.loadingExtinctionBeforeStatus = false;
if (response.error != 0){ if (response.error != 0){
createEmptyCanvas('extinction_chart-before', 800, 650);
console.log("未找到质控前数据文件"); console.log("未找到质控前数据文件");
return; return;
} }
@ -655,7 +661,7 @@ export default {
} }
let matrix = convertValueToBox(response.data); let matrix = convertValueToBox(response.data);
creates.extinctionBeforeDrawer = new HeatMapDrawer(800, 650, matrix, "extinction_chart-before", 'km/sr','质控前'); creates.extinctionBeforeDrawer = new HeatMapDrawer(800, 650, matrix, "extinction_chart-before", '/km');
creates.extinctionBeforeDrawer.setAxis(new CoordinateScale(options.timeArray), new CoordinateScale([0, 2000, 4000, 6000, 8000, 10000, 12000], true, true)); creates.extinctionBeforeDrawer.setAxis(new CoordinateScale(options.timeArray), new CoordinateScale([0, 2000, 4000, 6000, 8000, 10000, 12000], true, true));
creates.extinctionBeforeDrawer.setColorChart(prepareExtinctionnColors()); creates.extinctionBeforeDrawer.setColorChart(prepareExtinctionnColors());
creates.extinctionBeforeDrawer.draw(); creates.extinctionBeforeDrawer.draw();
@ -664,7 +670,6 @@ export default {
const convertValueToBox = (data) => { const convertValueToBox = (data) => {
let timeMoment = moment(options.date).set('h', 1).add(-1, 'd'); let timeMoment = moment(options.date).set('h', 1).add(-1, 'd');
console.log(options.currentElement)
if (options.currentElement === 'extinction'){ if (options.currentElement === 'extinction'){
timeMoment.add(12, 'h'); timeMoment.add(12, 'h');
} }
@ -713,7 +718,7 @@ export default {
clearHeatMapDrawer(creates.pm2Point5Drawer); clearHeatMapDrawer(creates.pm2Point5Drawer);
break; break;
case 'pm10': case 'pm10':
options.loadingPmStatus = true; options.loadingPm10Status = true;
clearHeatMapDrawer(creates.pm10Drawer); clearHeatMapDrawer(creates.pm10Drawer);
break; break;
case 'extinctionOptics': case 'extinctionOptics':
@ -814,7 +819,7 @@ export default {
const drawPm10 = (result: CustomeArray<any>) => { const drawPm10 = (result: CustomeArray<any>) => {
if (result.length != 24) return; if (result.length != 24) return;
options.loadingPmStatus = false; options.loadingPm10Status = false;
if (creates.pm10Drawer != null) { if (creates.pm10Drawer != null) {
creates.pm10Drawer.close(); creates.pm10Drawer.close();
} }
@ -943,7 +948,7 @@ export default {
} }
let matrix = converCloudRecognition(801, result, 'extinctionOptics'); let matrix = converCloudRecognition(801, result, 'extinctionOptics');
creates.opticsExtinctionDrawer = new HeatMapDrawer(1200, 650, matrix, "extinction_optics_chart",'/km/sr'); creates.opticsExtinctionDrawer = new HeatMapDrawer(1200, 650, matrix, "extinction_optics_chart",'/km');
creates.opticsExtinctionDrawer.setAxis(new CoordinateScale(options.timeArray), new CoordinateScale([0, 2000, 4000, 6000, 8000, 10000, 12000], true, true)); creates.opticsExtinctionDrawer.setAxis(new CoordinateScale(options.timeArray), new CoordinateScale([0, 2000, 4000, 6000, 8000, 10000, 12000], true, true));
creates.opticsExtinctionDrawer.setColorChart(prepareExtinctionnColors()); creates.opticsExtinctionDrawer.setColorChart(prepareExtinctionnColors());
creates.opticsExtinctionDrawer.draw(); creates.opticsExtinctionDrawer.draw();
@ -974,7 +979,7 @@ export default {
} }
let matrix = converCloudRecognition(101, result, 'watervapor'); let matrix = converCloudRecognition(101, result, 'watervapor');
creates.watervaporDrawer = new HeatMapDrawer(800, 650, matrix, "watervapor_chart-after",'g/kg', '质控前'); creates.watervaporDrawer = new HeatMapDrawer(800, 650, matrix, "watervapor_chart-after",'g/kg');
creates.watervaporDrawer.setAxis(new CoordinateScale(quailtyTimes), new CoordinateScale([0, 500, 1000, 1500], true, true)); creates.watervaporDrawer.setAxis(new CoordinateScale(quailtyTimes), new CoordinateScale([0, 500, 1000, 1500], true, true));
creates.watervaporDrawer.setColorChart(prepareWatervaporColors()); creates.watervaporDrawer.setColorChart(prepareWatervaporColors());
creates.watervaporDrawer.draw(); creates.watervaporDrawer.draw();
@ -996,7 +1001,7 @@ export default {
} }
let matrix = converCloudRecognition(801, result, 'extinction'); let matrix = converCloudRecognition(801, result, 'extinction');
creates.extinctionDrawer = new HeatMapDrawer(800, 650, matrix, "extinction_chart-after", 'km/sr','质控后'); creates.extinctionDrawer = new HeatMapDrawer(800, 650, matrix, "extinction_chart-after", '/km');
creates.extinctionDrawer.setAxis(new CoordinateScale(options.timeArray), new CoordinateScale([0, 2000, 4000, 6000, 8000, 10000, 12000], true, true)); creates.extinctionDrawer.setAxis(new CoordinateScale(options.timeArray), new CoordinateScale([0, 2000, 4000, 6000, 8000, 10000, 12000], true, true));
creates.extinctionDrawer.setColorChart(prepareExtinctionnColors()); creates.extinctionDrawer.setColorChart(prepareExtinctionnColors());
creates.extinctionDrawer.draw(); creates.extinctionDrawer.draw();
@ -1024,7 +1029,7 @@ export default {
} }
options.timeArray.reverse() options.timeArray.reverse()
} }
//
const reloadChartsRecognition = (element: string, callback: any) => { const reloadChartsRecognition = (element: string, callback: any) => {
preprocessingCharts(element) preprocessingCharts(element)
let result = new CustomeArray(callback); let result = new CustomeArray(callback);
@ -1051,7 +1056,6 @@ export default {
} }
let matrix = converCloudRecognition(801, result, 'layertype'); let matrix = converCloudRecognition(801, result, 'layertype');
creates.cloudRecognitionDrawer = new HeatMapDrawer(1200, 600, matrix, "cloud_recognition_chart"); creates.cloudRecognitionDrawer = new HeatMapDrawer(1200, 600, matrix, "cloud_recognition_chart");
creates.cloudRecognitionDrawer.setAxis(new CoordinateScale(options.timeArray), new CoordinateScale([0, 2000, 4000, 6000, 8000, 10000, 12000], true, true)); creates.cloudRecognitionDrawer.setAxis(new CoordinateScale(options.timeArray), new CoordinateScale([0, 2000, 4000, 6000, 8000, 10000, 12000], true, true));
creates.cloudRecognitionDrawer.setColorChart(prepareCloudRecognitionColors()); creates.cloudRecognitionDrawer.setColorChart(prepareCloudRecognitionColors());
@ -1060,7 +1064,10 @@ export default {
const prepareCloudRecognitionColors = () => { const prepareCloudRecognitionColors = () => {
return new ColorChart(['#0000FF', '#00FF00', '#FF0000', '#FFFFFF'], return new ColorChart(['#0000FF', '#00FF00', '#FF0000', '#FFFFFF'],
[3, 2, 1, 0, -99] [{ label: '冰云', value: 3 }, { label: '水云', value: 2 }, { label: '气溶胶', value: 1 }, { label: '晴空', value: 0 }],
false,
false,
"equal"
); );
} }
@ -1132,12 +1139,13 @@ export default {
} }
setCloudRecognitionResult(capacity, time, response.message, response.data, result); setCloudRecognitionResult(capacity, time, response.message, response.data, result);
}).catch(error => {
setCloudRecognitionResult(capacity, time, error.message, null, result);
}) })
// .catch(error => { // .catch(error => {
// setCloudRecognitionResult(capacity, time, error.message, null, result); // setCloudRecognitionResult(capacity, time, error.message, null, result);
// }) // })
// .catch(error => {
// setCloudRecognitionResult(capacity, time, error.message, null, result);
// })
} }
// //
@ -1550,12 +1558,12 @@ export default {
elementChange(element) elementChange(element)
} }
const onDayClick = (time, index) => { const onChangeDayClick = (time, index) => {
options.timeLineFormat = "hour" options.currentTime = time.date
options.currentTime = time.date;
options.date = moment(time.date).format('YYYY-MM-DD'); options.date = moment(time.date).format('YYYY-MM-DD');
options.index = index;
elementChange(options.currentElement) elementChange(options.currentElement)
options.index = index;
} }
const onPrevDayTimeClick = () => { const onPrevDayTimeClick = () => {
@ -1589,7 +1597,7 @@ export default {
// onSaveClick, // onSaveClick,
onTabClick, onTabClick,
onElementClick, onElementClick,
onDayClick, onChangeDayClick,
onPrevDayTimeClick, onPrevDayTimeClick,
onNextDayTimeClick onNextDayTimeClick
} }
@ -1628,35 +1636,36 @@ export default {
.picture { .picture {
width: 100%; width: 100%;
height: 100%;
position: relative; position: relative;
margin-top: 30px; //margin-top: 30px;
#watervapor_single_chart { #watervapor_single_chart {
transform: translateX(9%) translateY(15px); transform: translateX(9%) translateY(20px);
//transform: scale(1.0, 0.8) translateX(539px); //transform: scale(1.0, 0.8) translateX(539px);
} }
#extinction_optics_chart { #extinction_optics_chart {
//transform: scale(0.56, 0.85) translateX(-32%); //transform: scale(0.56, 0.85) translateX(-32%);
transform: translateX(9%) translateY(15px); transform: translateX(9%) translateY(20px);
} }
#pm2_5_chart { #pm2_5_chart {
transform: translateX(-50px) translateY(50px); transform: translateX(-50px) translateY(20px);
} }
#pm10_chart { #pm10_chart {
transform: translateX(-50px) translateY(50px); transform: translateX(-50px) translateY(20px);
} }
#backscatter_chart { #backscatter_chart {
transform: translateX(9%) translateY(50px); transform: translateX(9%) translateY(20px);
//transform: scale(0.6, 0.85) translateX(-76px); //transform: scale(0.6, 0.85) translateX(-76px);
} }
#cloud_sol_chart { #cloud_sol_chart {
transform: translateX(9%) translateY(50px); transform: translateX(9%) translateY(20px);
//transform: scale(0.6, 0.85) translate(-12%, -12px); //transform: scale(0.6, 0.85) translate(-12%, -12px);
} }
@ -1675,7 +1684,7 @@ export default {
width: 100%; width: 100%;
font-size: 0.22rem; font-size: 0.22rem;
position: absolute; position: absolute;
left: 2.10rem; left: 3.5rem;
top: 0.30rem; top: 0.30rem;
z-index: 100; z-index: 100;
} }

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

@ -85,6 +85,11 @@ export class HeatMapDrawer{
this.canvasContext.fillRect(startX, _y, this.defaultColorWidth, interval); this.canvasContext.fillRect(startX, _y, this.defaultColorWidth, interval);
this.canvasContext.fillStyle = "#000000"; this.canvasContext.fillStyle = "#000000";
if (this.colorChart.type == 'equal') {
const text = this.colorChart.values[targetIndex].label;
this.canvasContext.fillText(text, startX + this.defaultColorWidth + 2, _y + interval - 40);
continue;
}
if (index == 0){ if (index == 0){
if (this.colorChart.showStartValue){ if (this.colorChart.showStartValue){
const text = this.colorChart.values[targetIndex + 1]; const text = this.colorChart.values[targetIndex + 1];
@ -151,7 +156,7 @@ export class HeatMapDrawer{
} }
let targetValue = value[infoIndex].value; let targetValue = value[infoIndex].value;
let color = this.colorChart.getColor(targetValue); let color = this.colorChart.getColor(targetValue, this.id);
value[infoIndex].updateBorderInfo(x, y, width, height); value[infoIndex].updateBorderInfo(x, y, width, height);
if (color == null) continue; if (color == null) continue;
this.canvasContext.fillStyle = color; this.canvasContext.fillStyle = color;

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

@ -1,7 +1,10 @@
import * as Highcharts from 'highcharts'; import * as Highcharts from 'highcharts';
//import * as Exporting from 'highcharts/modules/exporting';
export class HighChartCreate { // // 初始化导出模块
// Exporting(Highcharts);
export class HighChartCreate {
private readonly id: string; private readonly id: string;
private highChart: any; private highChart: any;
@ -12,7 +15,6 @@ export class HighChartCreate {
private legend: any = null; private legend: any = null;
private tooltip: any = null; private tooltip: any = null;
private time: any = null; private time: any = null;
constructor(id: string) { constructor(id: string) {
this.id = id; this.id = id;
} }
@ -82,6 +84,11 @@ export class HighChartCreate {
fontFamily: '微软雅黑' fontFamily: '微软雅黑'
} }
}, },
labels: {
style: {
fontSize:'18px'
},
},
max: max, max: max,
min: min, min: min,
tickInterval: tickInterval, tickInterval: tickInterval,
@ -108,6 +115,34 @@ export class HighChartCreate {
opposite: opposite opposite: opposite
}); });
} }
public setSpecialYAxis(text: string, max: number = null, min: number = null, tickInterval: number = null, tickAmount: number = null, opposite: boolean = false, lineWidth: number = 1, reversed: boolean = true){
this.yAxis.push({
title: {
text: text,
style: {
color: '#000000',
fontSize: '18px',
fontFamily: '微软雅黑'
}
},
labels: {
y: 8,
style: {
fontSize:'18px'
},
},
max: max,
min: min,
tickInterval: tickInterval,
tickAmount: tickAmount,
lineWidth: lineWidth,
opposite: opposite
});
}
//图例标识 //图例标识
public setLegend(enabled: boolean = false){ public setLegend(enabled: boolean = false){
this.legend = { this.legend = {
@ -193,4 +228,3 @@ export class HighChartCreate {
} }
} }

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

@ -278,8 +278,8 @@ export class BoxDrawer{
private drawTemperatureText(unit): void { private drawTemperatureText(unit): void {
this.canvasContext.font = "normal 35px 微软雅黑"; this.canvasContext.font = "normal 35px 微软雅黑";
this.canvasContext.fillStyle = "#000000"; this.canvasContext.fillStyle = "#000000";
let unitX = 1390 let unitX = this.width - this.paddingRight;
if (unit === '(degree)') unitX =1350 if (unit === '(degree)') unitX = this.width - this.paddingRight - 30;
this.canvasContext.fillText(unit, unitX,50); this.canvasContext.fillText(unit, unitX,50);
} }
@ -306,7 +306,7 @@ export class BoxDrawer{
this.canvasContext.stroke(); this.canvasContext.stroke();
if (flag){ if (flag){
this.canvasContext.font = "normal 20px 微软雅黑"; this.canvasContext.font = "normal 25px 微软雅黑";
this.canvasContext.fillStyle = "#000000"; this.canvasContext.fillStyle = "#000000";
const text = moment(this.values.radar_data[index].data_time).format("HH:mm"); 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); this.canvasContext.fillText(text, _x - this.canvasContext.measureText(text).width / 2, startY + yInterval + this.borderHeight + 36);
@ -373,6 +373,7 @@ export class BoxDrawer{
export class ColorChart{ export class ColorChart{
public readonly type: string;
public colors: any = null; public colors: any = null;
public values: any = null; public values: any = null;
public showStartValue: boolean = false; public showStartValue: boolean = false;
@ -382,8 +383,8 @@ export class ColorChart{
private maxDefaultColor: string = null; private maxDefaultColor: string = null;
private readonly valueLength: number = 0; private readonly valueLength: number = 0;
constructor(colors: any, values: any, showStartValue: boolean = false, showEndValue: boolean = false, type: string = 'normal') {
constructor(colors: any, values: any, showStartValue: boolean = false, showEndValue: boolean = false) { this.type = type;
this.verify(colors, values); this.verify(colors, values);
this.colors = colors; this.colors = colors;
this.values = values; this.values = values;
@ -407,6 +408,8 @@ export class ColorChart{
} }
private verify(colors: any, values: any): void{ private verify(colors: any, values: any): void{
if (this.type == "equal") return;
if (values.length <= 2) if (values.length <= 2)
throw new Error("色标数据至少包含两个数据"); throw new Error("色标数据至少包含两个数据");
@ -414,10 +417,21 @@ export class ColorChart{
throw new Error("色标数据不正确,数据个数应为颜色个数 + 1"); throw new Error("色标数据不正确,数据个数应为颜色个数 + 1");
} }
public getColor(value: number): string{ public getColor(value: number, id: string = null ): string{
if (isNaN(value)) return null; if (isNaN(value)) return null;
const length = this.valueLength; const length = this.valueLength;
if (this.type == 'equal') {
if (this.minDefaultColor != null){
if (value < this.values[0].value) return this.minDefaultColor;
if (value > this.values[length - 1].value) return this.maxDefaultColor;
}
for(let index = 1; index < length; index ++){
if (this.values[index -1].value < value && this.values[index].value >= value){
return this.colors[index];
}
}
}
if (this.minDefaultColor != null){ if (this.minDefaultColor != null){
if (value < this.values[0]) return this.minDefaultColor; if (value < this.values[0]) return this.minDefaultColor;
if (value > this.values[length - 1]) return this.maxDefaultColor; if (value > this.values[length - 1]) return this.maxDefaultColor;
@ -428,6 +442,9 @@ export class ColorChart{
return this.colors[index - 1]; return this.colors[index - 1];
} }
} }
return null; return null;
} }
} }

Loading…
Cancel
Save