|
|
@ -72,12 +72,12 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="toolbar day-toolbar" v-if="currentElement=== 'lidarratio' || currentElement === 'watervapor'"> |
|
|
|
<div class="toolbar day-toolbar" v-if="currentElement === 'lidarratio' || currentElement === 'watervapor'"> |
|
|
|
<div class="times"> |
|
|
|
<div class="time-item" v-for="(time, index) in times" :key="index" |
|
|
|
:class="{'active': currentTime === time.date, 'first-hour': time.day === '01'}"> |
|
|
|
<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> |
|
|
|
|
|
|
@ -224,6 +224,7 @@ |
|
|
|
|
|
|
|
<div class="picture-container raman-picture-container" v-show="currentElement === 'extinction'"> |
|
|
|
<div class="picture special-picture"> |
|
|
|
<h2 class="title" style="left: 3.3rem">质控前</h2> |
|
|
|
<div v-loading="loadingExtinctionBeforeStatus" |
|
|
|
style="width: 100%;" |
|
|
|
custom-class="loading" |
|
|
@ -232,6 +233,7 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="picture special-picture"> |
|
|
|
<h2 class="title">质控后</h2> |
|
|
|
<div v-loading="loadingExtinctionStatus" |
|
|
|
style="width: 100%;" |
|
|
|
custom-class="loading" |
|
|
@ -243,6 +245,7 @@ |
|
|
|
|
|
|
|
<div class="picture-container raman-picture-container" v-show="currentElement === 'watervapor'"> |
|
|
|
<div class="picture special-picture"> |
|
|
|
<h2 class="title" style="left: 3.3rem">质控前</h2> |
|
|
|
<div v-loading="loadingWatervaporBeforeStatus" |
|
|
|
style="width: 100%" |
|
|
|
element-loading-text="加载中"> |
|
|
@ -250,6 +253,7 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="picture special-picture"> |
|
|
|
<h2 class="title">质控后</h2> |
|
|
|
<div v-loading="loadingWaterVaporStatus" |
|
|
|
style="width: 100%" |
|
|
|
element-loading-text="加载中"> |
|
|
@ -567,12 +571,12 @@ export default { |
|
|
|
reloadCloudRecognition('backscatter', 801, 'backscatter', drawBackscatter); |
|
|
|
break; |
|
|
|
case 'pm2_5' : |
|
|
|
initTimeLine() |
|
|
|
initTimeLine(); |
|
|
|
reloadCloudRecognition('pm2_5', 201, 'pm2_5', drawPm2Point5); |
|
|
|
reloadCloudRecognition('pm2_5', 201, 'pm10', drawPm10); |
|
|
|
break; |
|
|
|
case 'pblh' : |
|
|
|
initTimeLine() |
|
|
|
initTimeLine(); |
|
|
|
reloadChartsRecognition('pblh', drawBoundaryLayerCharts); |
|
|
|
break; |
|
|
|
case 'lidarratio' : |
|
|
@ -580,7 +584,7 @@ export default { |
|
|
|
reloadChartLidarratio('lidarratio', drawLidarRatioCharts); |
|
|
|
break; |
|
|
|
case 'cloudSol' : |
|
|
|
//initTimeLine() |
|
|
|
initTimeLine() |
|
|
|
reloadCloudRecognition('cloudSol', 801, 'layertype', drawCloudSol); |
|
|
|
break; |
|
|
|
case 'cloudbaseheight' : |
|
|
@ -595,7 +599,6 @@ export default { |
|
|
|
// reloadCloudRecognition('layertype', 801, 'layertype', drawCloudRecognition); |
|
|
|
// break; |
|
|
|
case 'extinction' : |
|
|
|
// initTimeLineDay() |
|
|
|
initTimeLine(true); |
|
|
|
reloadExtinctionBefore(); |
|
|
|
reloadCloudRecognition('extinction', 801, 'extinction', drawExtinctionAfter, false, 12); |
|
|
@ -620,6 +623,7 @@ export default { |
|
|
|
post("/qualityCompare/findByTimeAndElement", params).then((response: any) => { |
|
|
|
options.loadingWatervaporBeforeStatus = false; |
|
|
|
if (response.error != 0){ |
|
|
|
createEmptyCanvas('watervapor_chart-before', 800, 650); |
|
|
|
console.log("未找到质控前数据文件"); |
|
|
|
return; |
|
|
|
} |
|
|
@ -629,7 +633,7 @@ export default { |
|
|
|
} |
|
|
|
|
|
|
|
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.setColorChart(prepareWatervaporColors()); |
|
|
|
creates.watervaporBeforeDrawer.draw(); |
|
|
@ -646,6 +650,7 @@ export default { |
|
|
|
post("/qualityCompare/findByTimeAndElement", params).then((response: any) => { |
|
|
|
options.loadingExtinctionBeforeStatus = false; |
|
|
|
if (response.error != 0){ |
|
|
|
createEmptyCanvas('extinction_chart-before', 800, 650); |
|
|
|
console.log("未找到质控前数据文件"); |
|
|
|
return; |
|
|
|
} |
|
|
@ -655,7 +660,7 @@ export default { |
|
|
|
} |
|
|
|
|
|
|
|
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/sr'); |
|
|
|
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(); |
|
|
@ -782,7 +787,7 @@ export default { |
|
|
|
} |
|
|
|
|
|
|
|
let matrix = converCloudRecognition(801, result, 'backscatter'); |
|
|
|
creates.backscatterDrawer = new HeatMapDrawer(1200, 650, matrix, "backscatter_chart",'/km/sr'); |
|
|
|
creates.backscatterDrawer = new HeatMapDrawer(1200, 650, 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(); |
|
|
@ -943,7 +948,7 @@ export default { |
|
|
|
} |
|
|
|
|
|
|
|
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/sr'); |
|
|
|
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(); |
|
|
@ -974,7 +979,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, 650, 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(); |
|
|
@ -996,7 +1001,7 @@ export default { |
|
|
|
} |
|
|
|
|
|
|
|
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/sr'); |
|
|
|
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(); |
|
|
@ -1550,12 +1555,12 @@ export default { |
|
|
|
elementChange(element) |
|
|
|
} |
|
|
|
|
|
|
|
const onDayClick = (time, index) => { |
|
|
|
options.timeLineFormat = "hour" |
|
|
|
options.currentTime = time.date; |
|
|
|
const onChangeDayClick = (time, index) => { |
|
|
|
options.currentTime = time.date |
|
|
|
options.date = moment(time.date).format('YYYY-MM-DD'); |
|
|
|
options.index = index; |
|
|
|
elementChange(options.currentElement) |
|
|
|
options.index = index; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
const onPrevDayTimeClick = () => { |
|
|
@ -1589,7 +1594,7 @@ export default { |
|
|
|
// onSaveClick, |
|
|
|
onTabClick, |
|
|
|
onElementClick, |
|
|
|
onDayClick, |
|
|
|
onChangeDayClick, |
|
|
|
onPrevDayTimeClick, |
|
|
|
onNextDayTimeClick |
|
|
|
} |
|
|
@ -1628,35 +1633,36 @@ export default { |
|
|
|
|
|
|
|
.picture { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
position: relative; |
|
|
|
margin-top: 30px; |
|
|
|
//margin-top: 30px; |
|
|
|
|
|
|
|
#watervapor_single_chart { |
|
|
|
transform: translateX(9%) translateY(15px); |
|
|
|
transform: translateX(9%) translateY(20px); |
|
|
|
//transform: scale(1.0, 0.8) translateX(539px); |
|
|
|
} |
|
|
|
|
|
|
|
#extinction_optics_chart { |
|
|
|
//transform: scale(0.56, 0.85) translateX(-32%); |
|
|
|
transform: translateX(9%) translateY(15px); |
|
|
|
transform: translateX(9%) translateY(20px); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
#pm2_5_chart { |
|
|
|
transform: translateX(-50px) translateY(50px); |
|
|
|
transform: translateX(-50px) translateY(20px); |
|
|
|
} |
|
|
|
|
|
|
|
#pm10_chart { |
|
|
|
transform: translateX(-50px) translateY(50px); |
|
|
|
transform: translateX(-50px) translateY(20px); |
|
|
|
} |
|
|
|
|
|
|
|
#backscatter_chart { |
|
|
|
transform: translateX(9%) translateY(50px); |
|
|
|
transform: translateX(9%) translateY(20px); |
|
|
|
//transform: scale(0.6, 0.85) translateX(-76px); |
|
|
|
} |
|
|
|
|
|
|
|
#cloud_sol_chart { |
|
|
|
transform: translateX(9%) translateY(50px); |
|
|
|
transform: translateX(9%) translateY(20px); |
|
|
|
//transform: scale(0.6, 0.85) translate(-12%, -12px); |
|
|
|
} |
|
|
|
|
|
|
@ -1675,7 +1681,7 @@ export default { |
|
|
|
width: 100%; |
|
|
|
font-size: 0.22rem; |
|
|
|
position: absolute; |
|
|
|
left: 2.10rem; |
|
|
|
left: 3.5rem; |
|
|
|
top: 0.30rem; |
|
|
|
z-index: 100; |
|
|
|
} |
|
|
|