root
/
NanJingLamanRadarProject
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

commit

master
xuhuihui 4 years ago
parent
2b8060ac20
commit
a4c66b17d3
5 changed files with 222 additions and 120 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 63
      04.系统编码/Frontend/src/components/MicrowaveRadiation.vue
  2. 191
      04.系统编码/Frontend/src/components/RamanLidar.vue
  3. 62
      04.系统编码/Frontend/src/components/SynergyEvaluation.vue
  4. 8
      04.系统编码/Frontend/src/index.less
  5. 8
      04.系统编码/Frontend/src/model/high-chart-create.ts

63
04.系统编码/Frontend/src/components/MicrowaveRadiation.vue
View File

@ -50,6 +50,18 @@
</el-row> </el-row>
</div> </div>
<div class="menu-item" v-show="currentTab === 'shixu_BPFY'">
<h2 class="tip">要素选择</h2>
<el-row :gutter="12">
<el-col :span="24"><span :class="{'active': ElementChange === 'BP-temp'}"
@click="onElementChange('BP-temp')">BP反演温度</span></el-col>
<el-col :span="24"><span :class="{'active': ElementChange === 'BP-relative-humidity'}"
@click="onElementChange('BP-relative-humidity')">BP反演相对湿度</span></el-col>
<el-col :span="24"><span :class="{'active': ElementChange === 'BP-vapor-density'}"
@click="onElementChange('BP-vapor-density')">BP反演水汽密度</span></el-col>
</el-row>
</div>
</div> </div>
<div class="container panel"> <div class="container panel">
<div class="toolbar"> <div class="toolbar">
@ -123,20 +135,25 @@
</div> </div>
<!--BP反演产品--> <!--BP反演产品-->
<div v-show ="currentTab === 'shixu_BPFY'" class="picture-container contrast-picture-container shiXuBP"> <div v-show ="currentTab === 'shixu_BPFY'" style="height: 100%">
<div class="BPPicture picture"> <div v-show ="ElementChange === 'BP-temp'" class="picture-container">
<h2 class="title">BP反演温度</h2> <div class="BPPicture">
<canvas id="BP-temp"></canvas> <canvas id="BP-temp"></canvas>
</div> </div>
<div class="BPPicture picture"> </div>
<h2 class="title">BP反演相对湿度</h2>
<div v-show ="ElementChange === 'BP-relative-humidity'" class="picture-container ">
<div class="BPPicture">
<canvas id="BP-relative-humidity"></canvas> <canvas id="BP-relative-humidity"></canvas>
</div> </div>
<div class="BPPicture picture"> </div>
<h2 class="title">BP反演水汽密度</h2>
<div v-show ="ElementChange === 'BP-vapor-density'" class="picture-container ">
<div class="BPPicture">
<canvas id="BP-vapor-density"></canvas> <canvas id="BP-vapor-density"></canvas>
</div> </div>
</div> </div>
</div>
<div v-show ="currentTab === 'kuoxian'" class="verticalProfile"> <div v-show ="currentTab === 'kuoxian'" class="verticalProfile">
<div class="verticalProfile-picture"> <div class="verticalProfile-picture">
@ -263,7 +280,8 @@ export default {
highChartXAxis: [], highChartXAxis: [],
specialStartTime: null, specialStartTime: null,
tLogPPicture: "/images/no-data.png", tLogPPicture: "/images/no-data.png",
SeasonValue: '1' SeasonValue: '1',
ElementChange: "BP-temp"
}); });
let drawers = { let drawers = {
@ -927,6 +945,10 @@ export default {
reloadData() reloadData()
} }
const onElementChange = (type) => {
options.ElementChange = type
}
return { return {
...toRefs(options), ...toRefs(options),
onTabClick, onTabClick,
@ -938,7 +960,8 @@ export default {
onRefreshClick, onRefreshClick,
onChange, onChange,
changeColor, changeColor,
onchangeSeason onchangeSeason,
onElementChange
} }
} }
} }
@ -946,6 +969,7 @@ export default {
<style lang="less" scoped> <style lang="less" scoped>
.main { .main {
.container { .container {
width: 100%;
.verticalProfile { .verticalProfile {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -1001,20 +1025,15 @@ export default {
z-index: 1000; z-index: 1000;
} }
} }
.BPPicture {
width: 65% !important;
height: 45%;
position: relative;
#BP-temp, #BP-relative-humidity, #BP-vapor-density {
transform: scale(0.50, 0.4);
}
.title {
left: 3.85rem !important;
}
} }
//.BPPicture {
// width: 100% !important;
// height: 100%!important;
// position: relative;
//
//}
#BP-temp, #BP-relative-humidity, #BP-vapor-density {
transform: scale(1, 1.2) translate(-42px,100px);
} }
.shiXu { .shiXu {

191
04.系统编码/Frontend/src/components/RamanLidar.vue
View File

@ -44,8 +44,8 @@
<h2 class="tip">要素选择</h2> <h2 class="tip">要素选择</h2>
<el-row :gutter="12"> <el-row :gutter="12">
<el-col :span="24" v-for="(item, index) in elementData" :key = 'index'> <el-col :span="24" v-for="(item, index) in elementData" :key = 'index'>
<span @click="onElementClick(item)" <span @click="onElementClick(item.value)"
:class="{'active': currentElement === item}">{{ item }}</span></el-col> :class="{'active': currentElement === item.value}">{{ item.label }}</span></el-col>
</el-row> </el-row>
</div> </div>
</div> </div>
@ -72,7 +72,7 @@
<div class="picture-view"> <div class="picture-view">
<div class="picture-container raman-picture-container" v-show="currentElement === '水汽'"> <div class="picture-container raman-picture-container" v-show="currentElement === 'singleWatervapor'">
<div class="picture special-picture"> <div class="picture special-picture">
<div v-loading="loadingWaterVaporSingleStatus" <div v-loading="loadingWaterVaporSingleStatus"
style="width: 100%;height: 100%" style="width: 100%;height: 100%"
@ -83,10 +83,10 @@
</div> </div>
</div> </div>
<div class="picture-container raman-picture-container" v-show=" currentElement=== '光学厚度'"> <div class="picture-container raman-picture-container" v-show=" currentElement=== 'aod-icot-wcot'">
<div class="picture"> <div class="picture">
<div id="opticalThickness" <div id="opticalThickness"
style="width: 800px;height: 450px" style="width: 1000px;height: 450px"
v-loading="loadingOpticalThicknessStatus" v-loading="loadingOpticalThicknessStatus"
custom-class="loading" custom-class="loading"
element-loading-text="加载中"> element-loading-text="加载中">
@ -94,7 +94,7 @@
</div> </div>
</div> </div>
<div class="picture-container raman-picture-container" v-show = "currentElement=== '消光系数'"> <div class="picture-container raman-picture-container" v-show = "currentElement=== 'extinctionOptics'">
<div class="picture special-picture"> <div class="picture special-picture">
<div v-loading="loadingExtinctionOpticsStatus" <div v-loading="loadingExtinctionOpticsStatus"
style="width: 100%;height: 100%" style="width: 100%;height: 100%"
@ -105,7 +105,7 @@
</div> </div>
</div> </div>
<div class="picture-container raman-picture-container" v-show="currentElement=== '后向散射系数'"> <div class="picture-container raman-picture-container" v-show="currentElement=== 'backscatter'">
<div class="picture special-picture"> <div class="picture special-picture">
<div v-loading="loadingBackscatterStatus" <div v-loading="loadingBackscatterStatus"
style="width: 100%;" style="width: 100%;"
@ -116,7 +116,7 @@
</div> </div>
</div> </div>
<div class="picture-container raman-picture-container" v-show="currentElement=== '气溶胶PM'"> <div class="picture-container raman-picture-container" v-show="currentElement=== 'pm2_5'">
<div class="picture special-picture"> <div class="picture special-picture">
<div v-loading="loadingPmStatus" <div v-loading="loadingPmStatus"
style="width: 100%;" style="width: 100%;"
@ -136,20 +136,20 @@
</div> </div>
</div> </div>
<div class="picture-container raman-picture-container" v-show="currentElement=== '边界层高度'"> <div class="picture-container raman-picture-container" v-show="currentElement=== 'pblh'">
<div class="picture"> <div class="picture">
<div id="BoundaryLayerHeight" <div id="BoundaryLayerHeight"
style="width: 800px;height: 450px" style="width: 1000px;height: 450px"
v-loading="loadingBoundaryLayerHeightStatus" v-loading="loadingBoundaryLayerHeightStatus"
custom-class="loading" custom-class="loading"
element-loading-text="加载中"></div> element-loading-text="加载中"></div>
</div> </div>
</div> </div>
<div class="picture-container raman-picture-container" v-show="currentElement=== '激光雷达比'"> <div class="picture-container raman-picture-container" v-show="currentElement=== 'lidarratio'">
<div class="picture"> <div class="picture">
<div id="LidarRatio" <div id="LidarRatio"
style="width: 800px;height: 450px" style="width: 1000px;height: 450px"
v-loading="loadingLidarRatioStatus" v-loading="loadingLidarRatioStatus"
custom-class="loading" custom-class="loading"
element-loading-text="加载中"> element-loading-text="加载中">
@ -158,7 +158,7 @@
</div> </div>
<div class="picture-container raman-picture-container" v-show="currentElement=== '云气溶胶分类'"> <div class="picture-container raman-picture-container" v-show="currentElement=== 'cloudSol'">
<div class="picture special-picture"> <div class="picture special-picture">
<div v-loading="loadingCloudSolStatus" <div v-loading="loadingCloudSolStatus"
style="width: 100%;" style="width: 100%;"
@ -169,20 +169,20 @@
</div> </div>
</div> </div>
<div class="picture-container raman-picture-container" v-show="currentElement=== '云底高度'"> <div class="picture-container raman-picture-container" v-show="currentElement=== 'cloudbaseheight'">
<div class="picture"> <div class="picture">
<div id="cloudsHeight" <div id="cloudsHeight"
style="width: 800px;height: 450px" style="width: 1000px;height: 450px"
v-loading="loadingCloudsHeightStatus" v-loading="loadingCloudsHeightStatus"
custom-class="loading" custom-class="loading"
element-loading-text="加载中"></div> element-loading-text="加载中"></div>
</div> </div>
</div> </div>
<div class="picture-container raman-picture-container" v-show="currentElement=== '云顶高度'"> <div class="picture-container raman-picture-container" v-show="currentElement=== 'cloudtopheight'">
<div class="picture"> <div class="picture">
<div id="cloudTopHeight" <div id="cloudTopHeight"
style="width: 800px;height: 450px" style="width: 1000px;height: 450px"
v-loading="loadingCloudTopHeightStatus" v-loading="loadingCloudTopHeightStatus"
custom-class="loading" custom-class="loading"
element-loading-text="加载中"></div> element-loading-text="加载中"></div>
@ -313,8 +313,21 @@ export default {
timeArray: [], timeArray: [],
chartsData: [], chartsData: [],
chartTimeData: [], chartTimeData: [],
elementData: ['光学厚度', '消光系数', '后向散射系数'], elementData: [
currentElement: '光学厚度' {
value: 'aod-icot-wcot',
label: '光学厚度'
},
{
value: 'extinctionOptics',
label: '消光系数'
},
{
value: 'backscatter',
label: '后向散射系数'
},
],
currentElement: 'aod-icot-wcot'
}) })
onMounted(() => { onMounted(() => {
@ -329,9 +342,9 @@ export default {
//边界层高度 //边界层高度
const boundaryLayerHeightInit = () => { const boundaryLayerHeightInit = () => {
creates.boundaryLayerHeight = new HighChartCreate('BoundaryLayerHeight'); creates.boundaryLayerHeight = new HighChartCreate('BoundaryLayerHeight');
creates.boundaryLayerHeight.setChart(); creates.boundaryLayerHeight.setChart(false,'line', 1000);
creates.boundaryLayerHeight.setXAxis('时间(天/时)', false); creates.boundaryLayerHeight.setXAxisTypeDate();
creates.boundaryLayerHeight.setYAxis('边界层高度(米)', 3000, 0, 500, 7); creates.boundaryLayerHeight.setYAxis('边界层高度(米)');
creates.boundaryLayerHeight.setLegend(); creates.boundaryLayerHeight.setLegend();
creates.boundaryLayerHeight.setTooltip('高度: {point.y}'); creates.boundaryLayerHeight.setTooltip('高度: {point.y}');
creates.boundaryLayerHeight.setSeries('边界层高度') creates.boundaryLayerHeight.setSeries('边界层高度')
@ -341,10 +354,10 @@ export default {
//云层高度 //云层高度
const cloudsHeightInit = () => { const cloudsHeightInit = () => {
creates.cloudsHeight = new HighChartCreate('cloudsHeight'); creates.cloudsHeight = new HighChartCreate('cloudsHeight');
creates.cloudsHeight.setChart(false, 'scatter'); creates.cloudsHeight.setChart(false, 'scatter', 1000);
// creates.cloudsHeight.setSpecialXAxis('时间(小时)', 24, 0, 2); // creates.cloudsHeight.setSpecialXAxis('时间(小时)', 24, 0, 2);
creates.cloudsHeight.setXAxis('时间(天/时)', false); creates.cloudsHeight.setXAxisTypeDate();
creates.cloudsHeight.setYAxis('高度(米)', 14000, 0, 2000, 8); creates.cloudsHeight.setYAxis('高度(米)');
creates.cloudsHeight.setLegend(); creates.cloudsHeight.setLegend();
creates.cloudsHeight.setTooltip('高度: {point.y}'); creates.cloudsHeight.setTooltip('高度: {point.y}');
creates.cloudsHeight.setSeries('云层高度') creates.cloudsHeight.setSeries('云层高度')
@ -353,10 +366,10 @@ export default {
//云顶高度 //云顶高度
const cloudTopHeightInit = () => { const cloudTopHeightInit = () => {
creates.cloudTopHeight = new HighChartCreate('cloudTopHeight'); creates.cloudTopHeight = new HighChartCreate('cloudTopHeight');
creates.cloudTopHeight.setChart(false, 'scatter'); creates.cloudTopHeight.setChart(false, 'scatter', 1000);
// creates.cloudTopHeight.setSpecialXAxis('时间(小时)', 24, 0, 2); // creates.cloudTopHeight.setSpecialXAxis('时间(小时)', 24, 0, 2);
creates.cloudTopHeight.setXAxis('时间(天/时)', false); creates.cloudTopHeight.setXAxisTypeDate();
creates.cloudTopHeight.setYAxis('高度(米)', 14000, 0, 2000, 8); creates.cloudTopHeight.setYAxis('高度(米)');
creates.cloudTopHeight.setLegend(); creates.cloudTopHeight.setLegend();
creates.cloudTopHeight.setTooltip('高度: {point.y}'); creates.cloudTopHeight.setTooltip('高度: {point.y}');
creates.cloudTopHeight.setSeries('云顶高度') creates.cloudTopHeight.setSeries('云顶高度')
@ -366,9 +379,9 @@ export default {
//激光雷达比 //激光雷达比
const LidarRatioInit = () => { const LidarRatioInit = () => {
creates.LidarRatio = new HighChartCreate('LidarRatio'); creates.LidarRatio = new HighChartCreate('LidarRatio');
creates.LidarRatio.setChart(); creates.LidarRatio.setChart(false,'line', 1000);
creates.LidarRatio.setSpecialXAxis('sr', 120, 0, 20); creates.LidarRatio.setSpecialXAxis('sr', 120, 0, 20);
creates.LidarRatio.setYAxis('高度(米)', 3000, 0, 500, 7); creates.LidarRatio.setYAxis('高度(米)');
creates.LidarRatio.setLegend(); creates.LidarRatio.setLegend();
creates.LidarRatio.setTooltip('高度: {point.y}'); creates.LidarRatio.setTooltip('高度: {point.y}');
creates.LidarRatio.setSeries('激光雷达比') creates.LidarRatio.setSeries('激光雷达比')
@ -378,11 +391,11 @@ export default {
//光学厚度 //光学厚度
const opticalThicknessInit = () => { const opticalThicknessInit = () => {
creates.opticalThickness = new HighChartCreate('opticalThickness'); creates.opticalThickness = new HighChartCreate('opticalThickness');
creates.opticalThickness.setChart(); creates.opticalThickness.setChart(false,'line', 1000);
// creates.opticalThickness.setSpecialXAxis('时间（小时）', 24, 0, 2); // creates.opticalThickness.setSpecialXAxis('时间（小时）', 24, 0, 2);
// creates.opticalThickness.setXAxis('时间(天/时)', false); // creates.opticalThickness.setXAxis('时间(天/时)', false);
creates.opticalThickness.setXAxisTypeDate(); creates.opticalThickness.setXAxisTypeDate();
creates.opticalThickness.setYAxis('光学厚度', 6, 0, 1, 7); creates.opticalThickness.setYAxis('光学厚度');
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')
@ -401,21 +414,62 @@ export default {
cancelRequest(); cancelRequest();
options.elementData = [] options.elementData = []
if (options.currentTab === 'boundary-layer-height') { if (options.currentTab === 'boundary-layer-height') {
options.currentElement = '水汽' options.currentElement = 'singleWatervapor'
options.elementData = ['水汽'] options.elementData = [{
value: 'singleWatervapor',
label: '水汽'
}]
} else if (options.currentTab === 'optical-property') { } else if (options.currentTab === 'optical-property') {
options.currentElement = '光学厚度' options.currentElement = 'aod-icot-wcot'
options.elementData = ['光学厚度', '消光系数', '后向散射系数'] options.elementData = [
{
value: 'aod-icot-wcot',
label: '光学厚度'
},
{
value: 'extinctionOptics',
label: '消光系数'
},
{
value: 'backscatter',
label: '后向散射系数'
},]
} else if (options.currentTab === 'aerosol-product') { } else if (options.currentTab === 'aerosol-product') {
options.currentElement = '气溶胶PM' options.currentElement = 'pm2_5'
options.elementData = ['气溶胶PM', '边界层高度', '激光雷达比'] options.elementData = [
{
value: 'pm2_5',
label: '气溶胶PM'
},
{
value: 'pblh',
label: '边界层高度'
},
{
value: 'lidarratio',
label: '激光雷达比'
}
]
} else if (options.currentTab === 'BingoCloud') { } else if (options.currentTab === 'BingoCloud') {
options.currentElement = '云气溶胶分类' options.currentElement = 'cloudSol'
options.elementData = ['云气溶胶分类', '云底高度', '云顶高度'] options.elementData = [
{
value: 'cloudSol',
label: '云气溶胶分类'
},
{
value: 'cloudbaseheight',
label: '云底高度'
},
{
value: 'cloudtopheight',
label: '云顶高度'
}
]
} else if (options.currentTab === 'MWR') { } else if (options.currentTab === 'MWR') {
options.currentElement = '质控对比' options.currentElement = '质控对比'
@ -428,37 +482,37 @@ export default {
const elementChange = (code: string) => { const elementChange = (code: string) => {
switch (code) { switch (code) {
case '水汽' : case 'singleWatervapor' :
reloadCloudRecognition('singleWatervapor', 101, 'watervapor', drawSingleWatervapor); reloadCloudRecognition('singleWatervapor', 101, 'watervapor', drawSingleWatervapor);
break; break;
case '光学厚度' : case 'aod-icot-wcot' :
reloadChartsRecognition('aod', drawAerosolCharts); reloadChartsRecognition('aod', drawAerosolCharts);
reloadChartsRecognition('icot', drawIceCloudsCharts); reloadChartsRecognition('icot', drawIceCloudsCharts);
reloadChartsRecognition('wcot', drawWaterCloud); reloadChartsRecognition('wcot', drawWaterCloud);
break; break;
case '消光系数' : case 'extinctionOptics' :
reloadCloudRecognition('extinctionOptics', 801, 'extinction', drawOpticsExtinction); reloadCloudRecognition('extinctionOptics', 801, 'extinction', drawOpticsExtinction);
break; break;
case '后向散射系数' : case 'backscatter' :
reloadCloudRecognition('backscatter', 801, 'backscatter', drawBackscatter); reloadCloudRecognition('backscatter', 801, 'backscatter', drawBackscatter);
break; break;
case '气溶胶PM' : case 'pm2_5' :
reloadCloudRecognition('pm2_5', 201, 'pm2_5', drawPm2Point5); reloadCloudRecognition('pm2_5', 201, 'pm2_5', drawPm2Point5);
reloadCloudRecognition('pm2_5', 201, 'pm10', drawPm10); reloadCloudRecognition('pm2_5', 201, 'pm10', drawPm10);
break; break;
case '边界层高度' : case 'pblh' :
reloadChartsRecognition('pblh', drawBoundaryLayerCharts); reloadChartsRecognition('pblh', drawBoundaryLayerCharts);
break; break;
case '激光雷达比' : case 'lidarratio' :
reloadChartLidarratio('lidarratio', drawLidarRatioCharts); reloadChartLidarratio('lidarratio', drawLidarRatioCharts);
break; break;
case '云气溶胶分类' : case 'cloudSol' :
reloadCloudRecognition('cloudSol', 801, 'layertype', drawCloudSol); reloadCloudRecognition('cloudSol', 801, 'layertype', drawCloudSol);
break; break;
case '云底高度' : case 'cloudbaseheight' :
reloadChartsRecognition('cloudbaseheight', drawCloudsHeightCharts); reloadChartsRecognition('cloudbaseheight', drawCloudsHeightCharts);
break; break;
case '云顶高度' : case 'cloudtopheight' :
reloadChartsRecognition('cloudtopheight', drawCloudTopHeightCharts); reloadChartsRecognition('cloudtopheight', drawCloudTopHeightCharts);
break; break;
default: default:
@ -607,7 +661,6 @@ export default {
if (result.length != 24) return; if (result.length != 24) return;
const data = prepareChartData(result); const data = prepareChartData(result);
creates.boundaryLayerHeight.updateSeries(0, data) creates.boundaryLayerHeight.updateSeries(0, data)
creates.boundaryLayerHeight.updateXAxis(options.chartTimeData, 0)
options.loadingBoundaryLayerHeightStatus = false options.loadingBoundaryLayerHeightStatus = false
} }
@ -622,23 +675,20 @@ export default {
if (result.length != 24) return; if (result.length != 24) return;
const data = prepareChartData(result); const data = prepareChartData(result);
creates.opticalThickness.updateSeries(0, data); creates.opticalThickness.updateSeries(0, data);
// creates.opticalThickness.updateXAxis(options.chartTimeData, 0) // options.loadingOpticalThicknessStatus = false
options.loadingOpticalThicknessStatus = false
} }
const drawIceCloudsCharts = (result: CustomeArray<any>) => { const drawIceCloudsCharts = (result: CustomeArray<any>) => {
if (result.length != 24) return; if (result.length != 24) return;
const data = prepareChartData(result); const data = prepareChartData(result);
creates.opticalThickness.updateSeries(1, data) creates.opticalThickness.updateSeries(1, data)
// creates.opticalThickness.updateXAxis(options.chartTimeData, 0) // options.loadingOpticalThicknessStatus = false
options.loadingOpticalThicknessStatus = false
} }
const drawWaterCloud = (result: CustomeArray<any>) => { const drawWaterCloud = (result: CustomeArray<any>) => {
if (result.length != 24) return; if (result.length != 24) return;
const data = prepareChartData(result); const data = prepareChartData(result);
creates.opticalThickness.updateSeries(2, data) creates.opticalThickness.updateSeries(2, data)
// creates.opticalThickness.updateXAxis(options.chartTimeData, 0)
options.loadingOpticalThicknessStatus = false options.loadingOpticalThicknessStatus = false
} }
@ -647,7 +697,6 @@ export default {
if (result.length != 24) return; if (result.length != 24) return;
const data = prepareChartData(result); const data = prepareChartData(result);
creates.cloudTopHeight.updateSeries(0, data) creates.cloudTopHeight.updateSeries(0, data)
creates.cloudTopHeight.updateXAxis(options.chartTimeData, 0)
options.loadingCloudTopHeightStatus = false options.loadingCloudTopHeightStatus = false
} }
@ -655,7 +704,6 @@ export default {
if (result.length != 24) return; if (result.length != 24) return;
const data = prepareChartData(result); const data = prepareChartData(result);
creates.cloudsHeight.updateSeries(0, data) creates.cloudsHeight.updateSeries(0, data)
creates.cloudsHeight.updateXAxis(options.chartTimeData, 0)
options.loadingCloudsHeightStatus = false options.loadingCloudsHeightStatus = false
} }
@ -664,7 +712,7 @@ export default {
options.chartTimeData = []; options.chartTimeData = [];
result.sort((x, y) => moment(x.time, 'M_D_H').isBefore(moment(y.time, 'M_D_H')) ? -1 : 1); result.sort((x, y) => moment(x.time, 'M_D_H').isBefore(moment(y.time, 'M_D_H')) ? -1 : 1);
result.forEach(item => { result.forEach(item => {
options.chartTimeData.push(item.time) // options.chartTimeData.push(item.time)
if (item.data == null) { if (item.data == null) {
let temp = []; let temp = [];
for (let i = 0; i < 11; i++) { for (let i = 0; i < 11; i++) {
@ -743,7 +791,7 @@ export default {
} }
let matrix = converCloudRecognition(101, result, 'singleWatervapor'); let matrix = converCloudRecognition(101, result, 'singleWatervapor');
creates.singleWatervaporDrawer = new HeatMapDrawer(800, 600, matrix, "watervapor_single_chart",' g/g'); creates.singleWatervaporDrawer = new HeatMapDrawer(800, 600, matrix, "watervapor_single_chart",' g/kg');
creates.singleWatervaporDrawer.setAxis(new CoordinateScale(options.timeArray), new CoordinateScale([0, 500, 1000, 1500], true, true)); creates.singleWatervaporDrawer.setAxis(new CoordinateScale(options.timeArray), new CoordinateScale([0, 500, 1000, 1500], true, true));
creates.singleWatervaporDrawer.setColorChart(prepareWatervaporColors()); creates.singleWatervaporDrawer.setColorChart(prepareWatervaporColors());
creates.singleWatervaporDrawer.draw(); creates.singleWatervaporDrawer.draw();
@ -767,7 +815,7 @@ export default {
const prepareWatervaporColors = () => { const prepareWatervaporColors = () => {
return new ColorChart(['#990000', '#CC0000', '#FF0000', '#FF3300', '#FF6600', '#FF9900', '#FFCC00', '#FFFF00', '#CCFF33', '#99FF66', return new ColorChart(['#990000', '#CC0000', '#FF0000', '#FF3300', '#FF6600', '#FF9900', '#FFCC00', '#FFFF00', '#CCFF33', '#99FF66',
'#66FF99', '#33FFCC', '#00FFFF', '#00CCFF', '#0099FF', '#0066FF', '#0033FF', '#0000FF', '#0000CC', '#000099'], '#66FF99', '#33FFCC', '#00FFFF', '#00CCFF', '#0099FF', '#0066FF', '#0033FF', '#0000FF', '#0000CC', '#000099'],
[0.02, 0.019, 0.018, 0.017, 0.016, 0.15, 0.014, 0.013, 0.012, 0.011, 0.01, 0.009, 0.008, 0.007, 0.006, 0.005, 0.004, 0.003, 0.002, 0.001, 0], true, true [20, 19, 18, 17, 16, 15, 14, 13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1, 0], true, true
); );
} }
@ -891,6 +939,9 @@ export default {
if (name == 'backscatter') { if (name == 'backscatter') {
value = value == null ? NaN : Math.log10(value); value = value == null ? NaN : Math.log10(value);
} }
if (name == 'singleWatervapor' || name == 'watervapor') {
value = value == null ? NaN : value * 1000;
}
value = value == null ? NaN : value; value = value == null ? NaN : value;
matrix[tempIndex][h] = new Box(tempIndex, h, 0, 0, value, h * 15, time, "米"); matrix[tempIndex][h] = new Box(tempIndex, h, 0, 0, value, h * 15, time, "米");
} }
@ -1103,7 +1154,7 @@ export default {
options.date = moment(time.date).format('YYYY-MM-DD HH'); options.date = moment(time.date).format('YYYY-MM-DD HH');
elementChange(options.currentElement) elementChange(options.currentElement)
options.index = index; options.index = index;
reloadChangeData() // reloadChangeData()
// cancelActive(); // cancelActive();
// setTitle(moment(time.date, 'YYYY-MM-DD')); // setTitle(moment(time.date, 'YYYY-MM-DD'));
// activeImage(); // activeImage();
@ -1210,7 +1261,10 @@ export default {
const onChange = () => { const onChange = () => {
initTimeLine(); initTimeLine();
if (options.currentTab === 'MWR') {
reloadChangeData(); reloadChangeData();
}
elementChange(options.currentElement)
// setTitle(moment(options.date)); // setTitle(moment(options.date));
// activeImage(); // activeImage();
} }
@ -1289,6 +1343,7 @@ export default {
} }
const onElementClick = (element) => { const onElementClick = (element) => {
options.currentElement = element options.currentElement = element
elementChange(element) elementChange(element)
} }
@ -1350,31 +1405,31 @@ export default {
margin-top: 30px; margin-top: 30px;
#watervapor_single_chart { #watervapor_single_chart {
transform: scale(1.0, 1.0) translateX(38%); transform: scale(1.5, 1.0) translateX(24%);
//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: scale(1, 1) translateX(35%); transform: scale(1.5, 1) translateX(24%);
} }
#pm2_5_chart { #pm2_5_chart {
transform: scale(0.8, 1) translateX(-50px); transform: scale(1.0, 1) translateX(-50px);
} }
#pm10_chart { #pm10_chart {
transform: scale(0.8, 1) translateX(-50px); transform: scale(1.0, 1) translateX(-50px);
} }
#backscatter_chart { #backscatter_chart {
transform: scale(1, 1) translateX(35%); transform: scale(1.5, 1) translateX(24%);
//transform: scale(0.6, 0.85) translateX(-76px); //transform: scale(0.6, 0.85) translateX(-76px);
} }
#cloud_sol_chart { #cloud_sol_chart {
transform: scale(1, 1) translateX(35%); transform: scale(1.5, 1) translateX(24%);
//transform: scale(0.6, 0.85) translate(-12%, -12px); //transform: scale(0.6, 0.85) translate(-12%, -12px);
} }

62
04.系统编码/Frontend/src/components/SynergyEvaluation.vue
View File

@ -48,19 +48,30 @@
<el-col :span="24"><span @click="onTimeClick('time2230')" :class="{'active': currentTime === 'time2230'}">地表温度（22:30）</span></el-col> <el-col :span="24"><span @click="onTimeClick('time2230')" :class="{'active': currentTime === 'time2230'}">地表温度（22:30）</span></el-col>
</el-row> </el-row>
</div> </div>
<div class="menu-item" v-if="currentTab === 'element-change-trend'">
<h2 class="tip">时间点选择</h2>
<el-row :gutter="12">
<el-col :span="24"><span @click="onSurfaceTemperatureClick('time0130')" :class="{'active': currentSurfaceTemperatureTime === 'time0130'}">地表温度（01:30）</span></el-col>
<el-col :span="24"><span @click="onSurfaceTemperatureClick('time1030')" :class="{'active': currentSurfaceTemperatureTime === 'time1030'}">地表温度（10:30）</span></el-col>
<el-col :span="24"><span @click="onSurfaceTemperatureClick('time1330')" :class="{'active': currentSurfaceTemperatureTime === 'time1330'}">地表温度（13:30）</span></el-col>
<el-col :span="24"><span @click="onSurfaceTemperatureClick('time2230')" :class="{'active': currentSurfaceTemperatureTime === 'time2230'}">地表温度（22:30）</span></el-col>
</el-row>
</div> </div>
</div>
<div class="container panel synergy-container"> <div class="container panel synergy-container">
<span class="save-btn" @click="onSaveClick"><img src="/images/save.png" /></span> <span class="save-btn" @click="onSaveClick"><img src="/images/save.png" /></span>
<div class="download-pictures" id="pictures"> <div class="download-pictures" id="pictures">
<a v-for="(url, index) in urls" :key="index" download></a> <a v-for="(url, index) in urls" :key="index" download></a>
</div> </div>
<div class="element-select" v-if="currentTab === 'element-change-trend' || currentTab === 'element-monitor'"> <div class="element-select" v-if="currentTab === 'element-change-trend' || currentTab === 'element-monitor'">
<div class="surface-temperature" v-if="currentTab === 'element-change-trend' && currentCategory === 'LST'"> <!-- <div class="surface-temperature" v-if="currentTab === 'element-change-trend' && currentCategory === 'LST'">-->
<span @click="onSurfaceTemperatureClick('time0130')" :class="{'active': currentSurfaceTemperatureTime === 'time0130'}">地表温度（01:30）</span> <!-- <span @click="onSurfaceTemperatureClick('time0130')" :class="{'active': currentSurfaceTemperatureTime === 'time0130'}">地表温度（01:30）</span>-->
<span @click="onSurfaceTemperatureClick('time1030')" :class="{'active': currentSurfaceTemperatureTime === 'time1030'}">地表温度（10:30）</span> <!-- <span @click="onSurfaceTemperatureClick('time1030')" :class="{'active': currentSurfaceTemperatureTime === 'time1030'}">地表温度（10:30）</span>-->
<span @click="onSurfaceTemperatureClick('time1330')" :class="{'active': currentSurfaceTemperatureTime === 'time1330'}">地表温度（13:30）</span> <!-- <span @click="onSurfaceTemperatureClick('time1330')" :class="{'active': currentSurfaceTemperatureTime === 'time1330'}">地表温度（13:30）</span>-->
<span @click="onSurfaceTemperatureClick('time2230')" :class="{'active': currentSurfaceTemperatureTime === 'time2230'}">地表温度（22:30）</span> <!-- <span @click="onSurfaceTemperatureClick('time2230')" :class="{'active': currentSurfaceTemperatureTime === 'time2230'}">地表温度（22:30）</span>-->
</div> <!-- </div>-->
<div class="surface-temperature" v-if="currentTab === 'element-monitor'"> <div class="surface-temperature" v-if="currentTab === 'element-monitor'">
<span @click="onYearClick('2000')" :class="{'active': currentYear === '2000'}">2000</span> <span @click="onYearClick('2000')" :class="{'active': currentYear === '2000'}">2000</span>
<span @click="onYearClick('2001')" :class="{'active': currentYear === '2001'}">2001</span> <span @click="onYearClick('2001')" :class="{'active': currentYear === '2001'}">2001</span>
@ -109,9 +120,9 @@
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
<div class="picture-view multi-picture-view" v-if="currentTab === 'element-change-trend' || currentTab === 'element-monitor'" :style="{'marginTop': currentTab === 'element-change-trend' && currentCategory !== 'LST' ? 'calc(0.34rem + 2px)' : 0}"> <div class="picture-view multi-picture-view scroll" v-if="currentTab === 'element-change-trend' || currentTab === 'element-monitor'" :style="{'marginTop': currentTab === 'element-change-trend' && currentCategory !== 'LST' ? 'calc(0.34rem + 2px)' : 0}">
<el-row :gutter="0"> <el-row :gutter="20">
<el-col :span="4" v-for="(item, index) in trendItems" :key="index"> <el-col :span="12" v-for="(item, index) in trendItems" :key="index">
<el-image <el-image
:src="item.imgUrl" :src="item.imgUrl"
:preview-src-list="item.preview" :preview-src-list="item.preview"
@ -373,11 +384,15 @@
} }
} }
.multi-picture-view { .multi-picture-view {
width: 100%;
height: calc(~"100% - 0.76rem"); height: calc(~"100% - 0.76rem");
.el-row { :deep(.el-row) {
height: 100%; height: 100%;
padding-top: 10px;
margin-left: 0!important;
margin-right: 0!important;
.el-col { .el-col {
max-width: calc(~"(100% / 6) - 0.2rem"); max-width: calc(~"(100% / 4) - 0.2rem");
height: 50%; height: 50%;
margin: 0.2rem 0.2rem 0 0; margin: 0.2rem 0.2rem 0 0;
border: 1px solid #666666; border: 1px solid #666666;
@ -389,11 +404,14 @@
justify-content: center; justify-content: center;
} }
&:nth-of-type(6n) { //&:nth-of-type(6n) {
margin-right: 0; // margin-right: 0;
//}
} }
} }
} }
.scroll {
overflow-y: scroll;
} }
.element-select { .element-select {
position: relative; position: relative;
@ -424,4 +442,22 @@
} }
} }
} }
::-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>

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

@ -383,7 +383,6 @@ img {
width: 100%; width: 100%;
height: calc(~"100% - 0.71rem"); height: calc(~"100% - 0.71rem");
position: relative; position: relative;
.arrow { .arrow {
width: 0.68rem; width: 0.68rem;
display: block; display: block;
@ -414,19 +413,12 @@ img {
//} //}
.picture-container { .picture-container {
height: 100%; height: 100%;
display: flex; display: flex;
//flex-direction: column; //flex-direction: column;
justify-content: center; justify-content: center;
align-content: center; align-content: center;
.picture {
//height: 100%;
//.el-image {
// height: 100%;
//}
}
} }
.picture { .picture {

8
04.系统编码/Frontend/src/model/high-chart-create.ts
View File

@ -17,10 +17,11 @@ 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', width: number = null): void {
this.chart = { this.chart = {
type: type, type: type,
inverted: inverted inverted: inverted,
width: width
}; };
} }
@ -51,7 +52,6 @@ export class HighChartCreate {
type: 'datetime', type: 'datetime',
labels: { labels: {
formatter: function () { formatter: function () {
console.log(this)
return Highcharts.dateFormat('%d日%H时', this.value); return Highcharts.dateFormat('%d日%H时', this.value);
} }
} }
@ -87,7 +87,7 @@ export class HighChartCreate {
}) })
} }
public setYAxis(text: string, max: number, min: number, tickInterval: number, tickAmount: number, opposite: boolean = false, lineWidth: number = 1, reversed: boolean = true){ public setYAxis(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({ this.yAxis.push({
title: { title: {
text: text, text: text,

Write Preview
Loading…
Cancel
Save