|
|
@ -105,7 +105,7 @@ |
|
|
|
<div class="picture-container raman-picture-container" v-show=" currentElement=== 'aod-icot-wcot'"> |
|
|
|
<div class="picture"> |
|
|
|
<div id="opticalThickness" |
|
|
|
style="width: 1000px;height: 450px;margin-top: 66px" |
|
|
|
style="margin-top: 66px" |
|
|
|
v-loading="loadingOpticalThicknessStatus" |
|
|
|
custom-class="loading" |
|
|
|
element-loading-text="加载中"> |
|
|
@ -158,7 +158,7 @@ |
|
|
|
<div class="picture-container raman-picture-container" v-show="currentElement=== 'pblh'"> |
|
|
|
<div class="picture"> |
|
|
|
<div id="BoundaryLayerHeight" |
|
|
|
style="width: 1000px;height: 450px;margin-top: 66px" |
|
|
|
style="margin-top: 66px" |
|
|
|
v-loading="loadingBoundaryLayerHeightStatus" |
|
|
|
custom-class="loading" |
|
|
|
element-loading-text="加载中"></div> |
|
|
@ -168,7 +168,7 @@ |
|
|
|
<div class="picture-container raman-picture-container" v-show="currentElement=== 'lidarratio'"> |
|
|
|
<div class="picture"> |
|
|
|
<div id="LidarRatio" |
|
|
|
style="width: 1000px;height: 450px;margin-top: 66px" |
|
|
|
style="margin-top: 66px" |
|
|
|
v-loading="loadingLidarRatioStatus" |
|
|
|
custom-class="loading" |
|
|
|
element-loading-text="加载中"> |
|
|
@ -191,7 +191,7 @@ |
|
|
|
<div class="picture-container raman-picture-container" v-show="currentElement=== 'cloudbaseheight'"> |
|
|
|
<div class="picture special-picture"> |
|
|
|
<div id="cloudsHeight" |
|
|
|
style="width: 1000px;height: 450px;margin-top: 66px" |
|
|
|
style="margin-top: 66px" |
|
|
|
v-loading="loadingCloudsHeightStatus" |
|
|
|
custom-class="loading" |
|
|
|
element-loading-text="加载中"></div> |
|
|
@ -201,7 +201,7 @@ |
|
|
|
<div class="picture-container raman-picture-container" v-show="currentElement=== 'cloudtopheight'"> |
|
|
|
<div class="picture special-picture"> |
|
|
|
<div id="cloudTopHeight" |
|
|
|
style="width: 1000px;height: 450px;margin-top: 66px" |
|
|
|
style="margin-top: 66px" |
|
|
|
v-loading="loadingCloudTopHeightStatus" |
|
|
|
custom-class="loading" |
|
|
|
element-loading-text="加载中"></div> |
|
|
@ -209,7 +209,6 @@ |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- <div class="picture-container raman-picture-container" v-show="currentElement === 'layertype'">--> |
|
|
|
<!-- <div class="picture special-picture">--> |
|
|
|
<!--<!– <h2 class="title">云的识别</h2>–>--> |
|
|
@ -394,7 +393,7 @@ export default { |
|
|
|
//边界层高度 |
|
|
|
const boundaryLayerHeightInit = () => { |
|
|
|
creates.boundaryLayerHeight = new HighChartCreate('BoundaryLayerHeight'); |
|
|
|
creates.boundaryLayerHeight.setChart(false,'line', 1000); |
|
|
|
creates.boundaryLayerHeight.setChart(false, 'line', 1500, 600); |
|
|
|
creates.boundaryLayerHeight.setXAxisTypeDate(); |
|
|
|
creates.boundaryLayerHeight.setSpecialYAxis('边界层高度(m)'); |
|
|
|
creates.boundaryLayerHeight.setLegend(); |
|
|
@ -406,8 +405,7 @@ export default { |
|
|
|
//云层高度 |
|
|
|
const cloudsHeightInit = () => { |
|
|
|
creates.cloudsHeight = new HighChartCreate('cloudsHeight'); |
|
|
|
creates.cloudsHeight.setChart(false, 'scatter', 1000); |
|
|
|
// creates.cloudsHeight.setSpecialXAxis('时间(小时)', 24, 0, 2); |
|
|
|
creates.cloudsHeight.setChart(false, 'scatter', 1500, 600); |
|
|
|
creates.cloudsHeight.setXAxisTypeDate(); |
|
|
|
creates.cloudsHeight.setSpecialYAxis('高度(m)'); |
|
|
|
creates.cloudsHeight.setLegend(); |
|
|
@ -419,7 +417,7 @@ export default { |
|
|
|
//云顶高度 |
|
|
|
const cloudTopHeightInit = () => { |
|
|
|
creates.cloudTopHeight = new HighChartCreate('cloudTopHeight'); |
|
|
|
creates.cloudTopHeight.setChart(false, 'scatter', 1000); |
|
|
|
creates.cloudTopHeight.setChart(false, 'scatter', 1500, 600); |
|
|
|
// creates.cloudTopHeight.setSpecialXAxis('时间(小时)', 24, 0, 2); |
|
|
|
creates.cloudTopHeight.setXAxisTypeDate(); |
|
|
|
creates.cloudTopHeight.setSpecialYAxis('高度(m)'); |
|
|
@ -432,10 +430,9 @@ export default { |
|
|
|
//激光雷达比 |
|
|
|
const LidarRatioInit = () => { |
|
|
|
creates.LidarRatio = new HighChartCreate('LidarRatio'); |
|
|
|
creates.LidarRatio.setChart(false,'line', 1000); |
|
|
|
creates.LidarRatio.setChart(false, 'line', 1500, 600); |
|
|
|
creates.LidarRatio.setSpecialXAxis('激光雷达比(单位立体角)', 120, 0, 20); |
|
|
|
// creates.LidarRatio.setSpecialYAxis('高度(m)'); |
|
|
|
creates.LidarRatio.setYAxis('高度(m)', 3000, 0); |
|
|
|
creates.LidarRatio.setSpecialYAxis('高度(m)', 3000, 0); |
|
|
|
creates.LidarRatio.setLegend(); |
|
|
|
creates.LidarRatio.setTooltip('高度: {point.y}'); |
|
|
|
creates.LidarRatio.setSeries('激光雷达比', 0, null, null, '#3636FF') |
|
|
@ -445,7 +442,7 @@ export default { |
|
|
|
//光学厚度 |
|
|
|
const opticalThicknessInit = () => { |
|
|
|
creates.opticalThickness = new HighChartCreate('opticalThickness'); |
|
|
|
creates.opticalThickness.setChart(false,'line', 1000); |
|
|
|
creates.opticalThickness.setChart(false, 'line', 1500, 600); |
|
|
|
creates.opticalThickness.setXAxisTypeDate(); |
|
|
|
creates.opticalThickness.setSpecialYAxis('光学厚度'); |
|
|
|
creates.opticalThickness.setLegend(true); |
|
|
@ -513,7 +510,7 @@ export default { |
|
|
|
options.elementData = [ |
|
|
|
{ |
|
|
|
value: 'pm2_5', |
|
|
|
label: '气溶胶PM' |
|
|
|
label: '气溶胶浓度' |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: 'pblh', |
|
|
@ -625,7 +622,7 @@ export default { |
|
|
|
post("/qualityCompare/findByTimeAndElement", params).then((response: any) => { |
|
|
|
options.loadingWatervaporBeforeStatus = false; |
|
|
|
if (response.error != 0) { |
|
|
|
createEmptyCanvas('watervapor_chart-before', 800, 650); |
|
|
|
createEmptyCanvas('watervapor_chart-before', 810, 650); |
|
|
|
console.log("未找到质控前数据文件"); |
|
|
|
return; |
|
|
|
} |
|
|
@ -635,7 +632,7 @@ export default { |
|
|
|
} |
|
|
|
|
|
|
|
let matrix = convertValueToBox(response.data); |
|
|
|
creates.watervaporBeforeDrawer = new HeatMapDrawer(800, 650, matrix, "watervapor_chart-before", 'g/kg'); |
|
|
|
creates.watervaporBeforeDrawer = new HeatMapDrawer(810, 700, matrix, "watervapor_chart-before", 'g/kg'); |
|
|
|
creates.watervaporBeforeDrawer.setAxis(new CoordinateScale(quailtyTimes), new CoordinateScale([0, 500, 1000, 1500], true, true)); |
|
|
|
creates.watervaporBeforeDrawer.setColorChart(prepareWatervaporColors()); |
|
|
|
creates.watervaporBeforeDrawer.draw(); |
|
|
@ -652,7 +649,7 @@ export default { |
|
|
|
post("/qualityCompare/findByTimeAndElement", params).then((response: any) => { |
|
|
|
options.loadingExtinctionBeforeStatus = false; |
|
|
|
if (response.error != 0) { |
|
|
|
createEmptyCanvas('extinction_chart-before', 800, 650); |
|
|
|
createEmptyCanvas('extinction_chart-before', 810, 650); |
|
|
|
console.log("未找到质控前数据文件"); |
|
|
|
return; |
|
|
|
} |
|
|
@ -662,7 +659,7 @@ export default { |
|
|
|
} |
|
|
|
|
|
|
|
let matrix = convertValueToBox(response.data); |
|
|
|
creates.extinctionBeforeDrawer = new HeatMapDrawer(800, 650, matrix, "extinction_chart-before", '/km'); |
|
|
|
creates.extinctionBeforeDrawer = new HeatMapDrawer(810, 700, 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.setColorChart(prepareExtinctionnColors()); |
|
|
|
creates.extinctionBeforeDrawer.draw(); |
|
|
@ -788,7 +785,7 @@ export default { |
|
|
|
} |
|
|
|
|
|
|
|
let matrix = converCloudRecognition(801, result, 'backscatter'); |
|
|
|
creates.backscatterDrawer = new HeatMapDrawer(1200, 650, matrix, "backscatter_chart",'km/sr'); |
|
|
|
creates.backscatterDrawer = new HeatMapDrawer(1400, 700, matrix, "backscatter_chart", 'km/sr'); |
|
|
|
creates.backscatterDrawer.setAxis(new CoordinateScale(options.timeArray), new CoordinateScale([0, 2000, 4000, 6000, 8000, 10000, 12000], true, true)); |
|
|
|
creates.backscatterDrawer.setColorChart(prepareBackscatterColors()); |
|
|
|
creates.backscatterDrawer.draw(); |
|
|
@ -798,7 +795,6 @@ export default { |
|
|
|
let colorChart = new ColorChart(['#8F0000', '#E00000', '#FF1F00', '#FF6600', '#FF9900', '#FFE000', '#EBFF14', '#99FF66', '#66FF99', '#1FFFE0', |
|
|
|
'#00E0FF', '#0099FF', '#005CFF', '#0029FF', '#0000E0', '#000099'], |
|
|
|
[-1, -1.25, -1.5, -1.75, -2, -2.25, -2.5, -2.75, -3, -3.25, -3.5, -3.75, -4, -4.25, -4.5, -4.75, -5] |
|
|
|
// [-4, -4.25, -4.5, -4.75, -5, -5.25, -5.5, -5.75, -6, -6.25, -6.5, -6.75, -7, -7.25, -7.5, -7.75, -8] |
|
|
|
); |
|
|
|
colorChart.setDefaultColors('#000099', '#8F0000'); |
|
|
|
return colorChart; |
|
|
@ -811,7 +807,7 @@ export default { |
|
|
|
creates.pm2Point5Drawer.close(); |
|
|
|
} |
|
|
|
let matrix = converCloudRecognition(201, result, 'pm2_5'); |
|
|
|
creates.pm2Point5Drawer = new HeatMapDrawer(800, 650, matrix, "pm2_5_chart",'μg/m³', 'PM2.5'); |
|
|
|
creates.pm2Point5Drawer = new HeatMapDrawer(810, 700, matrix, "pm2_5_chart", 'μg/m³', 'PM2.5'); |
|
|
|
creates.pm2Point5Drawer.setAxis(new CoordinateScale(options.timeArray), new CoordinateScale([0, 1000, 2000, 3000], true, true)); |
|
|
|
creates.pm2Point5Drawer.setColorChart(preparePmColors()); |
|
|
|
creates.pm2Point5Drawer.draw(); |
|
|
@ -826,7 +822,7 @@ export default { |
|
|
|
} |
|
|
|
|
|
|
|
let matrix = converCloudRecognition(201, result, 'pm10'); |
|
|
|
creates.pm10Drawer = new HeatMapDrawer(800, 650, matrix, "pm10_chart", 'μg/m³', 'PM10'); |
|
|
|
creates.pm10Drawer = new HeatMapDrawer(810, 700, matrix, "pm10_chart", 'μg/m³', 'PM10'); |
|
|
|
creates.pm10Drawer.setAxis(new CoordinateScale(options.timeArray), new CoordinateScale([0, 1000, 2000, 3000], true, true)); |
|
|
|
creates.pm10Drawer.setColorChart(preparePmColors()); |
|
|
|
creates.pm10Drawer.draw(); |
|
|
@ -842,7 +838,6 @@ export default { |
|
|
|
const drawLidarRatioCharts = (result: CustomeArray<any>) => { |
|
|
|
if (result.length <= 0) return; |
|
|
|
const data = LidarRatioPrepareChartData(result); |
|
|
|
console.log(data); |
|
|
|
creates.LidarRatio.updateSeries(0, data); |
|
|
|
options.loadingLidarRatioStatus = false |
|
|
|
} |
|
|
@ -935,7 +930,7 @@ export default { |
|
|
|
} |
|
|
|
|
|
|
|
let matrix = converCloudRecognition(801, result, 'cloudSol'); |
|
|
|
creates.cloudSolDrawer = new HeatMapDrawer(1200, 650, matrix, "cloud_sol_chart"); |
|
|
|
creates.cloudSolDrawer = new HeatMapDrawer(1400, 700, matrix, "cloud_sol_chart"); |
|
|
|
creates.cloudSolDrawer.setAxis(new CoordinateScale(options.timeArray), new CoordinateScale([0, 2000, 4000, 6000, 8000, 10000, 12000], true, true)); |
|
|
|
creates.cloudSolDrawer.setColorChart(prepareCloudRecognitionColors()); |
|
|
|
creates.cloudSolDrawer.draw(); |
|
|
@ -950,7 +945,7 @@ export default { |
|
|
|
} |
|
|
|
|
|
|
|
let matrix = converCloudRecognition(801, result, 'extinctionOptics'); |
|
|
|
creates.opticsExtinctionDrawer = new HeatMapDrawer(1200, 650, matrix, "extinction_optics_chart",'/km'); |
|
|
|
creates.opticsExtinctionDrawer = new HeatMapDrawer(1400, 700, 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.setColorChart(prepareExtinctionnColors()); |
|
|
|
creates.opticsExtinctionDrawer.draw(); |
|
|
@ -966,7 +961,7 @@ export default { |
|
|
|
} |
|
|
|
|
|
|
|
let matrix = converCloudRecognition(101, result, 'singleWatervapor'); |
|
|
|
creates.singleWatervaporDrawer = new HeatMapDrawer(1200, 650, matrix, "watervapor_single_chart",' g/kg'); |
|
|
|
creates.singleWatervaporDrawer = new HeatMapDrawer(1400, 700, matrix, "watervapor_single_chart", ' g/kg'); |
|
|
|
creates.singleWatervaporDrawer.setAxis(new CoordinateScale(options.timeArray), new CoordinateScale([0, 500, 1000, 1500], true, true)); |
|
|
|
creates.singleWatervaporDrawer.setColorChart(prepareWatervaporColors()); |
|
|
|
creates.singleWatervaporDrawer.draw(); |
|
|
@ -981,7 +976,7 @@ export default { |
|
|
|
} |
|
|
|
|
|
|
|
let matrix = converCloudRecognition(101, result, 'watervapor'); |
|
|
|
creates.watervaporDrawer = new HeatMapDrawer(800, 650, matrix, "watervapor_chart-after",'g/kg'); |
|
|
|
creates.watervaporDrawer = new HeatMapDrawer(800, 700, matrix, "watervapor_chart-after", 'g/kg'); |
|
|
|
creates.watervaporDrawer.setAxis(new CoordinateScale(quailtyTimes), new CoordinateScale([0, 500, 1000, 1500], true, true)); |
|
|
|
creates.watervaporDrawer.setColorChart(prepareWatervaporColors()); |
|
|
|
creates.watervaporDrawer.draw(); |
|
|
@ -1003,7 +998,7 @@ export default { |
|
|
|
} |
|
|
|
|
|
|
|
let matrix = converCloudRecognition(801, result, 'extinction'); |
|
|
|
creates.extinctionDrawer = new HeatMapDrawer(800, 650, matrix, "extinction_chart-after", '/km'); |
|
|
|
creates.extinctionDrawer = new HeatMapDrawer(800, 700, 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.setColorChart(prepareExtinctionnColors()); |
|
|
|
creates.extinctionDrawer.draw(); |
|
|
@ -1044,9 +1039,7 @@ export default { |
|
|
|
const reloadChartLidarratio = (element: string, callback: any) => { |
|
|
|
preprocessingCharts(element) |
|
|
|
let result = new CustomeArray(callback); |
|
|
|
|
|
|
|
let time = moment(options.date); |
|
|
|
|
|
|
|
reloadSingleChartsRecognition(time.format('M_D_H'), element, result); |
|
|
|
} |
|
|
|
|
|
|
@ -1374,8 +1367,7 @@ export default { |
|
|
|
let element = getCurrentElement(); |
|
|
|
if (moment(options.date).add(-1, 'day').format('YYYY-MM-DD') == moment().format('YYYY-MM-DD')) { |
|
|
|
options.date = moment().format('YYYY-MM-DD HH') |
|
|
|
} |
|
|
|
else options.date = moment(options.date).add(-1, 'day').format('YYYY-MM-DD'); |
|
|
|
} else options.date = moment(options.date).add(-1, 'day').format('YYYY-MM-DD'); |
|
|
|
options.currentTime = options.date; |
|
|
|
options.index--; |
|
|
|
if (options.index < 0) { |
|
|
@ -1392,8 +1384,7 @@ export default { |
|
|
|
const onNextDayClick = () => { |
|
|
|
if (moment(options.date).add(1, 'day').format('YYYY-MM-DD') == moment().format('YYYY-MM-DD')) { |
|
|
|
options.date = moment().format('YYYY-MM-DD HH') |
|
|
|
} |
|
|
|
else options.date = moment(options.date).add(1, 'day').format('YYYY-MM-DD') |
|
|
|
} else options.date = moment(options.date).add(1, 'day').format('YYYY-MM-DD') |
|
|
|
options.timeLineFormat = "day"; |
|
|
|
initTimeLine() |
|
|
|
elementChange(options.currentElement) |
|
|
@ -1440,9 +1431,7 @@ export default { |
|
|
|
|
|
|
|
// const timeExcute = () => { |
|
|
|
// clearTimer(); |
|
|
|
// |
|
|
|
// let element = getCurrentElement(); |
|
|
|
// |
|
|
|
// timer = setInterval(() => { |
|
|
|
// options.index++; |
|
|
|
// if (options.index > element.childElementCount - 1) |
|
|
@ -1474,8 +1463,7 @@ export default { |
|
|
|
if (options.currentElement === 'extinction' || options.currentElement === 'lidarratio' || options.currentElement === 'watervapor') { |
|
|
|
options.timeLineFormat = "hour"; |
|
|
|
initTimeLineDay() |
|
|
|
} |
|
|
|
else { |
|
|
|
} else { |
|
|
|
if (moment(e).format('YYYY-MM-DD') == moment().format('YYYY-MM-DD')) { |
|
|
|
options.date = moment().format('YYYY-MM-DD HH') |
|
|
|
} |
|
|
@ -1570,7 +1558,6 @@ export default { |
|
|
|
options.date = moment(time.date).format('YYYY-MM-DD'); |
|
|
|
elementChange(options.currentElement) |
|
|
|
options.index = index; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
const onPrevDayTimeClick = () => { |
|
|
@ -1617,7 +1604,6 @@ export default { |
|
|
|
:deep(.el-date-editor), .control-btn, :deep(.el-select), .unit { |
|
|
|
padding-top: 0.08rem; |
|
|
|
} |
|
|
|
|
|
|
|
:deep(.el-input__prefix) { |
|
|
|
top: 4px; |
|
|
|
} |
|
|
@ -1632,7 +1618,7 @@ export default { |
|
|
|
} |
|
|
|
|
|
|
|
.raman-picture-container { |
|
|
|
width: calc(~"100% - 1rem"); |
|
|
|
//width: calc(~"100% - 1rem"); |
|
|
|
margin: 0 auto; |
|
|
|
|
|
|
|
.special-picture { |
|
|
@ -1648,43 +1634,34 @@ export default { |
|
|
|
//margin-top: 30px; |
|
|
|
|
|
|
|
#watervapor_single_chart { |
|
|
|
transform: translateX(9%) translateY(20px); |
|
|
|
//transform: scale(1.0, 0.8) translateX(539px); |
|
|
|
transform: translateX(6%) translateY(50px); |
|
|
|
} |
|
|
|
|
|
|
|
#extinction_optics_chart { |
|
|
|
//transform: scale(0.56, 0.85) translateX(-32%); |
|
|
|
transform: translateX(9%) translateY(20px); |
|
|
|
|
|
|
|
transform: translateX(6%) translateY(50px); |
|
|
|
} |
|
|
|
|
|
|
|
#pm2_5_chart { |
|
|
|
transform: translateX(-50px) translateY(20px); |
|
|
|
transform: translateX(-15px) translateY(50px); |
|
|
|
} |
|
|
|
|
|
|
|
#pm10_chart { |
|
|
|
transform: translateX(-50px) translateY(20px); |
|
|
|
transform: translateX(-15px) translateY(50px); |
|
|
|
} |
|
|
|
|
|
|
|
#backscatter_chart { |
|
|
|
transform: translateX(9%) translateY(20px); |
|
|
|
//transform: scale(0.6, 0.85) translateX(-76px); |
|
|
|
transform: translateX(6%) translateY(50px); |
|
|
|
} |
|
|
|
|
|
|
|
#cloud_sol_chart { |
|
|
|
transform: translateX(9%) translateY(20px); |
|
|
|
//transform: scale(0.6, 0.85) translate(-12%, -12px); |
|
|
|
transform: translateX(6%) translateY(50px); |
|
|
|
} |
|
|
|
|
|
|
|
//#cloud_recognition_chart, |
|
|
|
#extinction_chart-before, |
|
|
|
#extinction_chart-after, |
|
|
|
#watervapor_chart-before, |
|
|
|
#watervapor_chart-after |
|
|
|
{ |
|
|
|
transform: translateX(-50px) translateY(50px); |
|
|
|
//transform: scale(0.6, 0.8) translateX(-260px); |
|
|
|
//transform: scale(0.6, 0.8) translateX(-131px); |
|
|
|
#watervapor_chart-after { |
|
|
|
transform: translateY(50px); |
|
|
|
} |
|
|
|
|
|
|
|
.title { |
|
|
@ -1704,7 +1681,6 @@ export default { |
|
|
|
width: 50%; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|