zqq:0404版本

src/api/remoteSensingSourceData/index.js

@@ -0,0 +1,8 @@
+import request from '/@/utils/request';
+
+export const getRemoteSensingSourceData = (param) => {
+	return request({
+		url: '/api/biz-vordm/remote-sensing-source-data/front/page/eq' + param,
+		method: 'get',
+	});
+};

src/api/system/user.js

@@ -5,8 +5,8 @@ export const getUserInfo = () => {
 	return request({
 		url: '/api/system-manager/user/info',
 		method: 'get',
-    })
+	});
-}
+};
 
 export const resetPassword = (userIds) => {
 	return request({
@@ -14,9 +14,9 @@ export const resetPassword = (userIds) => {
 		method: 'post',
 		params: {
 			userIds,
-        }
+		},
-    })
+	});
-}
+};
 
 export const updatePassword = (oldPassword, newPassword, newPassword1) => {
 	return request({
@@ -26,16 +26,18 @@ export const updatePassword = (oldPassword, newPassword, newPassword1) => {
 			oldPassword,
 			newPassword,
 			newPassword1,
-        }
+		},
-    })
+	});
-}
+};
 
-export const getButtons = () => request({
+export const getButtons = () =>
+	request({
 		url: '/api/system-manager/menu/buttons',
-    method: 'get'
+		method: 'get',
 	});
 
-export const refreshToken = (refresh_token, tenantId) => request({
+export const refreshToken = (refresh_token, tenantId) =>
+	request({
 		url: '/api/system-manager/oauth/token',
 		method: 'post',
 		headers: {
@@ -45,7 +47,7 @@ export const refreshToken = (refresh_token, tenantId) => request({
 		data: qs.stringify({
 			tenantId,
 			refresh_token,
-		grant_type: "refresh_token",
+			grant_type: 'refresh_token',
-		scope: "all",
+			scope: 'all',
-	})
+		}),
 	});

src/views/dataService/remoteSensingData/index.vue

@@ -131,111 +131,74 @@
 
         <div class="system-user-search mb15">
           <!-- 选择灾害类型下拉框 -->
-          <el-select v-model="value_disastertype"
+          <el-select v-model="state.value_disasterType"
                      size="default"
                      placeholder="Select disaster type">
-            <el-option v-for="item in options_disastertype"
+            <el-option v-for="item in state.options_disasterType"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value" />
           </el-select>
           <!-- 选择灾害时间下拉框 -->
-          <el-date-picker v-model="value_disastertime"
+          <el-date-picker v-model="state.value_disasterTime"
                           type="date"
                           placeholder="Select disaster time"
                           class="ml10"
                           size="default" />
+          <!-- 选择受灾地 -->
+          <el-input v-model="state.value_disasterCountry"
+                    style="width: 20%;margin-left: 1%;"
+                    placeholder="请输入受灾地" />
+
           <!-- 选择灾害事件下拉框 -->
-          <el-select v-model="value_disasterevent"
+          <!-- <el-select v-model="state.value_disasterEvent"
                      size="default"
                      placeholder="Select disaster event"
                      class="ml10">
-            <el-option v-for="item in options_disasterevent"
+            <el-option v-for="item in options_disasterEvent"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value" />
-          </el-select>
-
-          <!-- 选择爬虫类型下拉框 -->
-          <el-select v-model="value_crawlertype"
-                     size="default"
-                     placeholder="Select crawler type"
-                     class="ml10">
-            <el-option v-for="item in options_crawlertype"
-                       :key="item.value"
-                       :label="item.label"
-                       :value="item.value" />
-          </el-select>
-          <!-- 选择爬虫状态下拉框 -->
-          <!-- <el-select v-model="value_crawlerstatus" size="default" placeholder="Select crawler status" class="ml10">
-					<el-option v-for="item in options_crawlerstatus" :key="item.value" :label="item.label" :value="item.value" />
           </el-select> -->
 
-          <!-- <el-input v-model="state.tableData.param.search" size="default" placeholder="请输入角色名称" style="max-width: 180px"> </el-input> -->
-
           <el-button size="default"
                      type="primary"
-                     class="ml10">
+                     class="ml10"
+                     @click="searchRemoteSensingSourceData">
             <el-icon>
               <ele-Search />
             </el-icon>
             Search
           </el-button>
 
-          <el-button size="default"
-                     type="success"
-                     class="ml10">
-            <el-icon>
-              <ele-Search />
-            </el-icon>
-            Start crawling
-          </el-button>
-
-          <el-button size="default"
-                     type="warning"
-                     class="ml10">
-            <el-icon>
-              <ele-Search />
-            </el-icon>
-            Stop crawling
-          </el-button>
-
-          <!-- <el-button size="default" type="success" class="ml10" @click="onOpenAddRole('add')">
-					<el-icon>
-						<ele-FolderAdd />
-					</el-icon>
-					新增角色
-				</el-button> -->
         </div>
-
+        <el-table :data="state.requestData"
-        <el-table :data="state.tableData.data"
-                  v-loading="state.tableData.loading"
                   style="width: 100%">
           <el-table-column type="index"
                            label="ID"
-                           width="50" />
+                           width="50"></el-table-column>
-          <el-table-column prop="userName"
+          <el-table-column prop="satelliteCode"
-                           label="User name"
+                           label="Satellite code"
                            show-overflow-tooltip></el-table-column>
-          <el-table-column prop="Administrator"
+          <el-table-column prop="productLevel"
-                           label="Administrator"
+                           label="Product level"
                            show-overflow-tooltip></el-table-column>
-          <el-table-column prop="Email"
+          <el-table-column prop="productResolution"
-                           label="Email"
+                           label="Product resolution(m)"
                            show-overflow-tooltip></el-table-column>
-          <el-table-column prop="Organization"
+          <el-table-column prop="cloudCover"
-                           label="Organization"
+                           label="Cloud cover(%)"
                            show-overflow-tooltip></el-table-column>
-          <el-table-column prop="Disaster type"
+          <el-table-column prop="projectBandNum"
-                           label="Disaster type"
+                           label="Project band num"
                            show-overflow-tooltip></el-table-column>
-          <el-table-column prop="Disaster keyword"
+          <el-table-column prop="sourceOrganization"
-                           label="Disaster keyword"
+                           label="Source organization"
                            show-overflow-tooltip></el-table-column>
-          <el-table-column prop="Affected country"
+          <el-table-column prop="thumbnailLink"
-                           label="Affected country"
+                           label="Thumbnail link"
                            show-overflow-tooltip></el-table-column>
-          <el-table-column prop="Longitude"
+          <!-- <el-table-column prop="Longitude"
                            label="Longitude"
                            show-overflow-tooltip></el-table-column>
           <el-table-column prop="Latitude"
@@ -252,7 +215,7 @@
                            show-overflow-tooltip></el-table-column>
           <el-table-column prop="responseStatus"
                            label="Response status"
-                           show-overflow-tooltip></el-table-column>
+                           show-overflow-tooltip></el-table-column> -->
 
           <!-- <el-table-column prop="describe" label="角色描述" show-overflow-tooltip></el-table-column>
 						<el-table-column prop="createTime" label="创建时间" show-overflow-tooltip></el-table-column> -->
@@ -278,8 +241,8 @@
                        class="mt15"
                        :pager-count="5"
                        :page-sizes="[10, 20, 30]"
-                       v-model:current-page="state.tableData.param.pageNum"
                        background
+                       v-model:current-page="state.tableData.param.pageNum"
                        v-model:page-size="state.tableData.param.pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="state.tableData.total">
@@ -290,8 +253,11 @@
 </template>
 
 <script setup>
-import { ref, reactive } from 'vue';
+import { ref, reactive, onMounted, watch } from 'vue';
 import Map from "/@/components/Map.vue";
+import { getRemoteSensingSourceData } from "/@/api/remoteSensingSourceData/index.js";
+import { time } from 'echarts';
+
 
 // 卫星类型
 const sensor = ref([
@@ -435,9 +401,26 @@ const idOptions = [
   },
 ]
 
+const state = reactive({
+  activeName: 'first',
+  startTime: '',
+  endTime: '',
+  addCoord: false,
+  satelliteSelected: [],
+  coordinateList: [],
+  selectID: '',
+  tableData: {
+    data: [],
+    total: 0,
+    loading: false,
+    param: {
+      search: '',
+      pageNum: 1,
+      pageSize: 10,
+    },
+  },
   //选择灾害类型下拉框
-const options_disastertype = [
+  options_disasterType: [{
-  {
     value: 'Earthquake',
     label: 'Earthquake',
   },
@@ -460,52 +443,27 @@ const options_disastertype = [
   {
     value: 'Landslide',
     label: 'Landslide',
-  },
+  }],
-];
+  value_disasterType: '',
-
+  value_disasterTime: '',
-//选择爬虫类型下拉框
+  value_disasterCountry: '',
-const options_crawlertype = [
+  requestData: [],
-  {
-    value: 'Bing',
-    label: 'Bing',
-  },
-  {
-    value: 'Twitter',
-    label: 'Twitter',
-  },
-  {
-    value: 'Baidu',
-    label: 'Baidu',
-  },
-  {
-    value: 'Weibo',
-    label: 'Weibo',
-  },
-];
-
-const state = reactive({
-  activeName: 'first',
-  startTime: '',
-  endTime: '',
-  addCoord: false,
-  satelliteSelected: [],
-  coordinateList: [],
-  selectID: '',
-  tableData: {
-    data: [],
-    total: 0,
-    loading: false,
-    param: {
-      search: '',
-      pageNum: 1,
-      pageSize: 10,
-    },
-  },
-  value_disastertype: '',
-  value_disastertime: '',
-  value_crawlertype: '',
 })
 
+//每页显示条数改变
+const onHandleSizeChange = (val) => {
+  // searchContent.value = "";
+  state.tableData.param.pageSize = val;
+  //   currentPage.value = currentPage.value;    
+};
+
+//当前页变动
+const onHandleCurrentChange = (val) => {
+  //  pageSize.value = pageSize.value;
+  state.tableData.param.pageNum = val;
+  //   studentData(classID.value, courseID.value, currentPage.value, pageSize.value);
+};
+
 const shortcuts = [
   {
     text: '1 month ago',
@@ -578,6 +536,85 @@ const ClearCondition = () => {
   state.selectID = ''
 }
 
+// 查询遥感元数据
+const searchRemoteSensingSourceData = () => {
+  let select = {
+    "type": state.value_disasterType,
+    "time": filterTime(state.value_disasterTime),
+    "country": state.value_disasterCountry,
+    "size": state.tableData.param.pageSize,
+    "current": state.tableData.param.pageNum
+  }
+
+  var requestParam = "";
+  for (var index = 0; index < Object.keys(select).length; index++) {
+    if (index == 0) {
+      requestParam += "?" + Object.keys(select)[index] + '=' + Object.values(select)[index]
+    }
+    else {
+      requestParam += '&' + Object.keys(select)[index] + '=' + Object.values(select)[index]
+    }
+  }
+
+  // 请求接口
+  getRemoteSensingSourceData(requestParam).then(
+    (res) => {
+      let requestRes = JSON.parse(JSON.stringify(res.records))
+      for (let index = 0; index < requestRes.length; index++) {
+        state.requestData.push(requestRes[index])
+      }
+      state.tableData.total = JSON.parse(JSON.stringify(res.total))
+      state.tableData.param.pageNum = JSON.parse(JSON.stringify(res.current))
+      state.tableData.param.pageSize = JSON.parse(JSON.stringify(res.size))
+    })
+}
+
+// 中国标准时间转年月日
+const filterTime = (time) => {
+  var date = new Date(time);
+  var y = date.getFullYear();
+  var m = date.getMonth() + 1;
+  m = m < 10 ? "0" + m : m;
+  var d = date.getDate();
+  d = d < 10 ? "0" + d : d;
+  var h = date.getHours();
+  h = h < 10 ? "0" + h : h;
+  var minute = date.getMinutes();
+  minute = minute < 10 ? "0" + minute : minute;
+  var s = date.getSeconds();
+  s = s < 10 ? "0" + s : s;
+  return y + "-" + m + "-" + d;
+  //   return y + "-" + m + "-" + d + " " + h + ":" + minute + ":" + s;
+}
+
+// 请求数据
+onMounted(() => {
+  //   var requestParam = "";
+  //   for (var index = 0; index < Object.keys(select).length; index++) {
+  //     if (index == 0) {
+  //       requestParam += "?" + Object.keys(select)[index] + '=' + Object.values(select)[index]
+  //     }
+  //     else {
+  //       requestParam += '&' + Object.keys(select)[index] + '=' + Object.values(select)[index]
+  //     }
+  //   }
+
+  //   getRemoteSensingSourceData(requestParam).then(
+  //     (res) => {
+  //       let requestRes = JSON.parse(JSON.stringify(res.records))
+  //       for (let index = 0; index < requestRes.length; index++) {
+  //         state.requestData.push(requestRes[index])
+  //       }
+  //     })
+})
+
+// 监听tab变化
+watch(() => state.activeName, (newValue, oldValue) => {
+  console.log('监听到了')
+},
+  { immediate: true }
+);
+
 </script>
 
 <style scoped lang="scss">