yaowang
/
vordm-admin
10
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

zqq:遥感影像数据获取（响应式）

This commit is contained in:
qqGroup0 2023-03-31 11:20:55 +08:00
parent 6030b5bc53
commit 4aaa34681b
1 changed files with 122 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

217
src/views/dataService/remoteSensingData/index.vue
View File

@ -4,94 +4,125 @@
@tab-click="handleClick">
<el-tab-pane label="Search condition"
name="first">
<el-row>
<el-col :span="8">
<div class="rsSelect">
<el-card class="box-card">
<span>Select time range</span>
<el-row class="block">
<el-col :span="5">
<span class="demonstration">Start time</span>
</el-col>
<el-col :span="19">
<el-date-picker style="width: 90%;"
v-model="state.startTime"
type="datetime"
placeholder="Select start time"
:shortcuts="shortcuts" />
</el-col>
</el-row>
<el-row class="block">
<el-col :span="5">
<span class="demonstration">End time</span>
</el-col>
<el-col :span="19">
<el-date-picker style="width: 90%;"
v-model="state.endTime"
type="datetime"
placeholder="Select end time"
:shortcuts="shortcuts" />
</el-col>
</el-row>
</el-card>
<div class="rsSelect">
<el-card class="box-card">
<span>Select time range</span>
<div class="block">
<span class="demonstration">Start time</span>
<el-date-picker style="width: 70%;"
v-model="state.startTime"
type="datetime"
placeholder="Select start time"
:shortcuts="shortcuts" />
</div>
<div class="block">
<span class="demonstration">End time</span>
<el-date-picker style="width: 70%;"
v-model="state.endTime"
type="datetime"
placeholder="Select end time"
:shortcuts="shortcuts" />
</div>
</el-card>
<el-card class="box-card"
style="margin-top: 3%;">
<span>Select a region</span>
<el-scrollbar wrap-class="list"
view-class="view-box"
:native="false">
<div class="coordinateContainer"
v-for="(coordinate,i) in state.coordinateList">
<span style="font-size:14px;float: left;width: 70%;">{{
<el-card class="box-card"
style="margin-top: 3%;">
<span>Select a region</span>
<el-scrollbar wrap-class="list"
view-class="view-box"
:native="false">
<div v-for="(coordinate,i) in state.coordinateList">
<el-row class="coordinateContainer">
<el-col :span="1"></el-col>
<el-col :span="19">
<span style="font-size:14px;width: 100%;">{{
'Lat:&emsp;' + parseFloat(coordinate.Lat).toFixed(4) + ',&emsp;&emsp;Lng:&emsp;' + parseFloat(coordinate.Lng).toFixed(4)
}}</span>
<span style="width:20%;margin-left: 80%;">
<el-button class="el-icon"
@click="editCoordinate"
size="small">
<ele-Edit />
</el-button>
<el-button class="el-icon"
@click="state.coordinateList.splice(i, 1);"
size="small">
<ele-Delete />
</el-button>
</span>
</el-col>
<el-col :span="2">
<el-button class="el-icon"
@click="editCoordinate"
size="small">
<ele-Edit />
</el-button>
</el-col>
<el-col :span="2">
<el-button class="el-icon"
@click="state.coordinateList.splice(i, 1);"
size="small">
<ele-Delete />
</el-button>
</el-col>
</el-row>
</div>
</el-scrollbar>
<el-row>
<el-col :span="1"></el-col>
<el-col :span="7">
<el-button class="coordinateBtn"
@click="addCoordinate">Add coordinates</el-button>
</el-col>
<el-col :span="7">
<el-button class="coordinateBtn"
@click="clearCoordinate">Clear coordinates</el-button>
</el-col>
</el-row>
</div>
</el-scrollbar>
<el-button class="coordinateBtn"
@click="addCoordinate">Add coordinates</el-button>
<el-button class="coordinateBtn"
@click="clearCoordinate">Clear coordinates</el-button>
</el-card>
</el-card>
<el-card class="box-card"
style="margin-top: 3%;">
<span>Select satellite type</span>
<el-tree-select class="satelliteSelect"
v-model="state.satelliteSelected"
:data="sensor"
multiple
:render-after-expand="false"
show-checkbox
placeholder="Select satellite type" />
</el-card>
<el-card class="box-card"
style="margin-top: 3%;">
<span>Select satellite type</span>
<el-tree-select class="satelliteSelect"
v-model="state.satelliteSelected"
:data="sensor"
multiple
:render-after-expand="false"
show-checkbox
placeholder="Select satellite type" />
</el-card>
<el-card class="box-card"
style="margin-top: 3%;">
<span>Select VoRDM ID</span>
<el-select class="idSelect"
v-model="state.selectID"
clearable
placeholder="Select VoRDM ID">
<el-option v-for="item in idOptions"
:key="item.value"
:label="item.label"
:value="item.value" />
</el-select>
</el-card>
<el-card class="box-card"
style="margin-top: 3%;">
<span>Select VoRDM ID</span>
<el-select class="idSelect"
v-model="state.selectID"
clearable
placeholder="Select VoRDM ID">
<el-option v-for="item in idOptions"
:key="item.value"
:label="item.label"
:value="item.value" />
</el-select>
</el-card>
<el-row>
<el-col :span="1"></el-col>
<el-col :span="6">
<el-button class="lowerBtn"
@click="startCrawl">Start Crawl</el-button>
</el-col>
<el-col :span="6">
<el-button class="lowerBtn"
@click="ClearCondition">Cancel</el-button>
</el-col>
</el-row>
</div>
</el-col>
<el-col :span="16">
<Map id="map"></Map>
</el-col>
<el-button class="lowerBtn"
@click="startCrawl">Start Crawl</el-button>
<el-button class="lowerBtn"
@click="ClearCondition">Cancel</el-button>
</div>
<Map id="map"></Map>
</el-row>
</el-tab-pane>
@ -553,9 +584,7 @@ const ClearCondition = () => {
.container {
padding: 1% 1%;
.rsSelect {
float: left;
border: 1px solid #040728;
width: 30%;
height: 52rem;
span {
display: block;
@ -570,29 +599,27 @@ const ClearCondition = () => {
.block {
margin-top: 2%;
.demonstration {
font-size: 14px;
float: left;
height: 20px;
line-height: 40px;
margin: 0 3%;
width: 20%;
}
}
.demonstration {
font-size: 14px;
float: left;
height: 20px;
line-height: 40px;
}
.coordinateContainer {
margin: 3%;
height: 15px;
}
.coordinateBtn {
margin-left: 3%;
width: 90%;
}
.lowerBtn {
margin: 3% 0 3% 3%;
width: 90%;
margin: 3% 0;
}
}
#map {
width: 70%;
height: 52rem;
float: left;
}
}
</style>