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