Merge branch 'main' of http://47.92.168.204:3000/VoRDM/vordm-admin
This commit is contained in:
commit
be9637e1b1
|
@ -8,6 +8,36 @@ export function getList(params) {
|
|||
params,
|
||||
});
|
||||
}
|
||||
|
||||
export function getPage(current,size,params) {
|
||||
return request({
|
||||
url: '/api/'+moduleName+'/ui/disasterInfo/list',
|
||||
method: 'get',
|
||||
params:{
|
||||
current,
|
||||
size,
|
||||
...params
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export function updateDisasterManage(data){
|
||||
return request({
|
||||
url: '/api/'+moduleName+'/ui/disasterInfo/updateBatch',
|
||||
method: 'put',
|
||||
data: data,
|
||||
});
|
||||
}
|
||||
|
||||
export function removeManage(data){
|
||||
return request({
|
||||
url: '/api/'+moduleName+'/ui/disasterInfo/removeManage',
|
||||
method: 'put',
|
||||
data: data,
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
//review
|
||||
export function review(data) {
|
||||
return request({
|
||||
|
|
|
@ -9,9 +9,22 @@ export const getRemoteSensingSourceData = (param) => {
|
|||
});
|
||||
};
|
||||
|
||||
export const getSelectionCondition = (param) => {
|
||||
export const getRemoteSensingSourceDataByCondition = (current, size, optionsJson) => {
|
||||
return request({
|
||||
url: '/api/' + moduleName + '/ui/disasterInfo/selectCondition',
|
||||
url: '/api/' + moduleName + '/ui/remoteSensing/Condition',
|
||||
method: 'get',
|
||||
contentType: 'application/json',
|
||||
params: {
|
||||
optionsJson,
|
||||
current,
|
||||
size,
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
export const getPagesRemoteSensingSourceData = (param) => {
|
||||
return request({
|
||||
url: '/api/' + moduleName + '/ui/remoteSensing/PagesData',
|
||||
method: 'get',
|
||||
params: param,
|
||||
});
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<el-dialog title="edit picture" v-model="state.isShowDialog" width="700px" close-on-click-modal="false">
|
||||
<el-dialog title="edit picture" v-model="state.isShowDialog" width="700px" :close-on-click-modal="false" @close="closeDialog">
|
||||
<el-form :model="state.ruleForm" size="default" label-width="150px" :rules="rules" ref="adminAddFormRef">
|
||||
<el-form-item label="upload picture" prop="img">
|
||||
<el-upload
|
||||
|
|
|
@ -1,44 +1,45 @@
|
|||
<template>
|
||||
<div class="system-role-container layout-padding">
|
||||
<el-config-provider :locale="en">
|
||||
<el-row :gutter="22">
|
||||
<el-col :span="10">
|
||||
<div class="system-role-padding layout-padding-auto layout-padding-view">
|
||||
<el-table :data="state.disasterData.data"
|
||||
v-loading="state.disasterData.loading"
|
||||
style="width: 100%"
|
||||
highlight-current-row
|
||||
@row-click="tableClick">
|
||||
<el-table-column type="index"
|
||||
label="ID"
|
||||
width="50" />
|
||||
<el-table-column prop="disasterType"
|
||||
label="Disaster type"
|
||||
show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="disasterCountry"
|
||||
label="disaster country"
|
||||
show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="disasterTime"
|
||||
label="disaster time"
|
||||
show-overflow-tooltip></el-table-column>
|
||||
</el-table>
|
||||
<el-pagination @size-change="onHandleDisasterSizeChange"
|
||||
@current-change="onHandleDisasterCurrentChange"
|
||||
class="mt15"
|
||||
:pager-count="5"
|
||||
:page-sizes="[10, 20, 30]"
|
||||
v-model:current-page="state.disasterData.param.pageNum"
|
||||
background
|
||||
v-model:page-size="state.disasterData.param.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="state.disasterData.total">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="14">
|
||||
<div class="system-role-padding layout-padding-auto layout-padding-view">
|
||||
<div class="system-user-search mb15" style="display: flex;margin-left: 10px;margin-top: 10px;">
|
||||
<!-- <el-input size="default" placeholder="please enter username" style="max-width: 180px" v-model="state.searchName"
|
||||
<el-row :gutter="22">
|
||||
<el-col :span="10">
|
||||
<div class="system-role-padding layout-padding-auto layout-padding-view">
|
||||
<el-table :data="state.disasterData.data"
|
||||
v-loading="state.disasterData.loading"
|
||||
style="width: 100%"
|
||||
highlight-current-row
|
||||
@row-click="tableClick">
|
||||
<el-table-column type="index"
|
||||
label="ID"
|
||||
width="50" />
|
||||
<el-table-column prop="disasterType"
|
||||
label="Disaster type"
|
||||
show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="disasterCountry"
|
||||
label="disaster country"
|
||||
show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="disasterTime"
|
||||
label="disaster time"
|
||||
show-overflow-tooltip></el-table-column>
|
||||
</el-table>
|
||||
<el-pagination @size-change="onHandleDisasterSizeChange"
|
||||
@current-change="onHandleDisasterCurrentChange"
|
||||
class="mt15"
|
||||
:pager-count="5"
|
||||
:page-sizes="[10, 20, 30]"
|
||||
v-model:current-page="state.disasterData.param.pageNum"
|
||||
background
|
||||
v-model:page-size="state.disasterData.param.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="state.disasterData.total">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="14">
|
||||
<div class="system-role-padding layout-padding-auto layout-padding-view">
|
||||
<div class="system-user-search mb15"
|
||||
style="display: flex;margin-left: 10px;margin-top: 10px;">
|
||||
<!-- <el-input size="default" placeholder="please enter username" style="max-width: 180px" v-model="state.searchName"
|
||||
clearable></el-input>
|
||||
<el-button size="default" type="primary" class="ml10" @click="getTableData">
|
||||
<el-icon>
|
||||
|
@ -46,25 +47,32 @@
|
|||
</el-icon>
|
||||
search
|
||||
</el-button>-->
|
||||
<el-button size="default" type="success" class="ml10" @click="uploadData">
|
||||
<el-icon>
|
||||
<ele-Upload/>
|
||||
</el-icon>
|
||||
upload
|
||||
</el-button>
|
||||
<el-button size="default" type="danger" class="ml10" @click="batchDel">
|
||||
<el-icon>
|
||||
<ele-Delete/>
|
||||
</el-icon>
|
||||
batch delete
|
||||
</el-button>
|
||||
</div>
|
||||
<el-button size="default"
|
||||
type="success"
|
||||
class="ml10"
|
||||
@click="uploadData">
|
||||
<el-icon>
|
||||
<ele-Upload />
|
||||
</el-icon>
|
||||
upload
|
||||
</el-button>
|
||||
<el-button size="default"
|
||||
type="danger"
|
||||
class="ml10"
|
||||
@click="batchDel">
|
||||
<el-icon>
|
||||
<ele-Delete />
|
||||
</el-icon>
|
||||
batch delete
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<el-table :data="state.tableData.data"
|
||||
v-loading="state.tableData.loading"
|
||||
@selection-change="handleSelectionChange"
|
||||
style="width: 100%">
|
||||
<el-table-column type="selection" width="55" />
|
||||
<el-table-column type="selection"
|
||||
width="55" />
|
||||
<el-table-column type="index"
|
||||
label="ID"
|
||||
width="50" />
|
||||
|
@ -79,17 +87,24 @@
|
|||
label="image"
|
||||
show-overflow-tooltip>
|
||||
<template #default="scope">
|
||||
<el-popover trigger="hover" placement="right" popper-class="max-h-300px overflow-auto" :width="330">
|
||||
<el-popover trigger="hover"
|
||||
placement="right"
|
||||
popper-class="max-h-300px overflow-auto"
|
||||
:width="330">
|
||||
<!-- table中原本显示的图片 -->
|
||||
<template #reference>
|
||||
<img :src="scope.row.link" :alt="scope.row.link" style="max-height: 130px;max-width: 130px">
|
||||
<img :src="scope.row.link"
|
||||
:alt="scope.row.link"
|
||||
style="max-height: 130px;max-width: 130px">
|
||||
</template>
|
||||
<!-- 鼠标移入时弹出的图片 -->
|
||||
<img :src="scope.row.link" alt="" style="height: 150px;width: 300px">
|
||||
<img :src="scope.row.link"
|
||||
alt=""
|
||||
style="height: 150px;width: 300px">
|
||||
</el-popover>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="size"
|
||||
<!-- <el-table-column prop="size"
|
||||
label="size"
|
||||
show-overflow-tooltip>
|
||||
<template #default="scope">
|
||||
|
@ -98,13 +113,19 @@
|
|||
</el-table-column>
|
||||
<el-table-column prop="type"
|
||||
label="type"
|
||||
show-overflow-tooltip></el-table-column>
|
||||
show-overflow-tooltip></el-table-column>-->
|
||||
<el-table-column prop="Operate"
|
||||
label="Operate"
|
||||
show-overflow-tooltip>
|
||||
<template #default="scope">
|
||||
<el-button size="small" text type="primary" @click="editData(scope.row)">Edit</el-button>
|
||||
<el-button size="small" text type="primary" @click="del(scope.row)">Delete</el-button>
|
||||
<el-button size="small"
|
||||
text
|
||||
type="primary"
|
||||
@click="editData(scope.row)">Edit</el-button>
|
||||
<el-button size="small"
|
||||
text
|
||||
type="primary"
|
||||
@click="del(scope.row)">Delete</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
@ -119,14 +140,16 @@
|
|||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="state.tableData.total">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-config-provider>
|
||||
<RoleDialog ref="roleDialogRef"
|
||||
@refresh="getTableData()" />
|
||||
<Upload ref="uploadRef" @callback="getTableData"/>
|
||||
<EditPicture ref="editUploadRef" @callback="getTableData"/>
|
||||
<Upload ref="uploadRef"
|
||||
@callback="getTableData" />
|
||||
<EditPicture ref="editUploadRef"
|
||||
@callback="getTableData" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
@ -134,8 +157,8 @@
|
|||
import type { TabsPaneContext } from 'element-plus';
|
||||
import Upload from './component/upload.vue';
|
||||
import EditPicture from './component/editPicture.vue';
|
||||
import {getPicturePage,getDisasterPage,delPicture} from '/@/api/data/pictureInfo.js';
|
||||
import en from 'element-plus/dist/locale/en.mjs'
|
||||
import { getPicturePage, getDisasterPage, delPicture } from '/@/api/data/pictureInfo.js';
|
||||
import en from 'element-plus/dist/locale/en.mjs';
|
||||
const activeName = ref('first');
|
||||
|
||||
//复制内容
|
||||
|
@ -149,191 +172,198 @@ const editUploadRef = ref();
|
|||
// 定义变量内容
|
||||
const roleDialogRef = ref();
|
||||
const state = reactive({
|
||||
multipleSelection:[],
|
||||
tabVal:'first',
|
||||
disasterId:null,
|
||||
disasterData: {
|
||||
data: [],
|
||||
total: 0,
|
||||
loading: false,
|
||||
param: {
|
||||
search: '',
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
},
|
||||
tableData: {
|
||||
data: [],
|
||||
total: 0,
|
||||
loading: false,
|
||||
param: {
|
||||
search: '',
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
},
|
||||
multipleSelection: [],
|
||||
tabVal: 'first',
|
||||
disasterId: null,
|
||||
disasterData: {
|
||||
data: [],
|
||||
total: 0,
|
||||
loading: false,
|
||||
param: {
|
||||
search: '',
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
},
|
||||
tableData: {
|
||||
data: [],
|
||||
total: 0,
|
||||
loading: false,
|
||||
param: {
|
||||
search: '',
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
},
|
||||
});
|
||||
const handleSelectionChange = (val) => {
|
||||
state.multipleSelection = val
|
||||
}
|
||||
state.multipleSelection = val;
|
||||
};
|
||||
//格式化图片名称
|
||||
const formatName = (name) => {
|
||||
if(name){
|
||||
return name.substr(0,name.indexOf("."));
|
||||
}
|
||||
return name;
|
||||
}
|
||||
if (name) {
|
||||
return name.substr(0, name.indexOf('.'));
|
||||
}
|
||||
return name;
|
||||
};
|
||||
const auditData = (row) => {
|
||||
let id = row.id
|
||||
auditRef.value.openDialog([{"id":id}]);
|
||||
}
|
||||
let id = row.id;
|
||||
auditRef.value.openDialog([{ id: id }]);
|
||||
};
|
||||
//格式化字节
|
||||
const formatSize = (size) => {
|
||||
var data = "";
|
||||
if (size < 0.1 * 1024) { //如果小于0.1KB转化成B
|
||||
data = size.toFixed(2) + "B";
|
||||
} else if (size < 0.1 * 1024 * 1024) {//如果小于0.1MB转化成KB
|
||||
data = (size / 1024).toFixed(2) + "KB";
|
||||
} else if (size < 0.1 * 1024 * 1024 * 1024) { //如果小于0.1GB转化成MB
|
||||
data = (size / (1024 * 1024)).toFixed(2) + "MB";
|
||||
} else { //其他转化成GB
|
||||
data = (size / (1024 * 1024 * 1024)).toFixed(2) + "GB";
|
||||
}
|
||||
var sizestr = data + "";
|
||||
var len = sizestr.indexOf("\.");
|
||||
var dec = sizestr.substr(len + 1, 2);
|
||||
if (dec == "00") {//当小数点后为00时 去掉小数部分
|
||||
return sizestr.substring(0, len) + sizestr.substr(len + 3, 2);
|
||||
}
|
||||
return sizestr;
|
||||
}
|
||||
var data = '';
|
||||
if (size < 0.1 * 1024) {
|
||||
//如果小于0.1KB转化成B
|
||||
data = size.toFixed(2) + 'B';
|
||||
} else if (size < 0.1 * 1024 * 1024) {
|
||||
//如果小于0.1MB转化成KB
|
||||
data = (size / 1024).toFixed(2) + 'KB';
|
||||
} else if (size < 0.1 * 1024 * 1024 * 1024) {
|
||||
//如果小于0.1GB转化成MB
|
||||
data = (size / (1024 * 1024)).toFixed(2) + 'MB';
|
||||
} else {
|
||||
//其他转化成GB
|
||||
data = (size / (1024 * 1024 * 1024)).toFixed(2) + 'GB';
|
||||
}
|
||||
var sizestr = data + '';
|
||||
var len = sizestr.indexOf('.');
|
||||
var dec = sizestr.substr(len + 1, 2);
|
||||
if (dec == '00') {
|
||||
//当小数点后为00时 去掉小数部分
|
||||
return sizestr.substring(0, len) + sizestr.substr(len + 3, 2);
|
||||
}
|
||||
return sizestr;
|
||||
};
|
||||
const formatSizeUnits = (size) => {
|
||||
if (size === 0 || size === -1) return '0 B';
|
||||
var k = 1000, // or 1024
|
||||
sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
|
||||
i = Math.floor(Math.log(size) / Math.log(k));
|
||||
if (size === 0 || size === -1) return '0 B';
|
||||
var k = 1000, // or 1024
|
||||
sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
|
||||
i = Math.floor(Math.log(size) / Math.log(k));
|
||||
|
||||
return (size / Math.pow(k, i)).toPrecision(3) + ' ' + sizes[i];
|
||||
}
|
||||
return (size / Math.pow(k, i)).toPrecision(3) + ' ' + sizes[i];
|
||||
};
|
||||
//灾害表格点击事件
|
||||
const tableClick = (row, column, event) => {
|
||||
state.disasterId = row.disasterId;
|
||||
getTableData();
|
||||
}
|
||||
state.disasterId = row.disasterId;
|
||||
getTableData();
|
||||
};
|
||||
// 初始化灾害表格数据
|
||||
const getDisasterData = () => {
|
||||
state.disasterData.loading = true;
|
||||
getDisasterPage(state.disasterData.param.pageNum,state.disasterData.param.pageSize,{}).then(res=>{
|
||||
state.disasterData.data = res.records;
|
||||
state.disasterData.total = res.total;
|
||||
state.disasterData.loading = false;
|
||||
})
|
||||
}
|
||||
state.disasterData.loading = true;
|
||||
getDisasterPage(state.disasterData.param.pageNum, state.disasterData.param.pageSize, {}).then((res) => {
|
||||
state.disasterData.data = res.records;
|
||||
state.disasterData.total = res.total;
|
||||
state.disasterData.loading = false;
|
||||
});
|
||||
};
|
||||
|
||||
// 初始化表格数据
|
||||
const getTableData = () => {
|
||||
state.tableData.loading = true;
|
||||
getPicturePage(state.tableData.param.pageNum,state.tableData.param.pageSize,{"disasterId_equal":state.disasterId,"isDeleted_equal":0}).then(res=>{
|
||||
state.tableData.data = res.records;
|
||||
state.tableData.total = res.total;
|
||||
})
|
||||
setTimeout(() => {
|
||||
state.tableData.loading = false;
|
||||
}, 500);
|
||||
state.tableData.loading = true;
|
||||
getPicturePage(state.tableData.param.pageNum, state.tableData.param.pageSize, { disasterId_equal: state.disasterId, isDeleted_equal: 0 }).then(
|
||||
(res) => {
|
||||
state.tableData.data = res.records;
|
||||
state.tableData.total = res.total;
|
||||
}
|
||||
);
|
||||
setTimeout(() => {
|
||||
state.tableData.loading = false;
|
||||
}, 500);
|
||||
};
|
||||
// 打开上传弹窗
|
||||
const uploadData = () => {
|
||||
if(state.disasterId == null){
|
||||
ElMessage.warning("Please select the disaster first")
|
||||
return false;
|
||||
}
|
||||
uploadRef.value.openDialog(state.disasterId);
|
||||
if (state.disasterId == null) {
|
||||
ElMessage.warning('Please select the disaster first');
|
||||
return false;
|
||||
}
|
||||
uploadRef.value.openDialog(state.disasterId);
|
||||
};
|
||||
// 打开修改角色弹窗
|
||||
const editData = (row) => {
|
||||
editUploadRef.value.openDialog(row);
|
||||
editUploadRef.value.openDialog(row);
|
||||
};
|
||||
//批量删除图片数据
|
||||
const batchDel = () => {
|
||||
if(state.multipleSelection.length == 0){
|
||||
ElMessage.warning("Select the data to be operated first");
|
||||
return false;
|
||||
}
|
||||
ElMessageBox.confirm(`This action batch deletes the picture data,Whether to continue?`, 'tip', {
|
||||
confirmButtonText: 'confirm',
|
||||
cancelButtonText: 'cancel',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => {
|
||||
let id = state.multipleSelection.map(item=>item.id)
|
||||
delPicture(id.join()).then(res=>{
|
||||
getTableData();
|
||||
ElMessage.success('delete successfully');
|
||||
})
|
||||
})
|
||||
.catch(() => {});
|
||||
}
|
||||
if (state.multipleSelection.length == 0) {
|
||||
ElMessage.warning('Select the data to be operated first');
|
||||
return false;
|
||||
}
|
||||
ElMessageBox.confirm(`This action batch deletes the picture data,Whether to continue?`, 'tip', {
|
||||
confirmButtonText: 'confirm',
|
||||
cancelButtonText: 'cancel',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => {
|
||||
let id = state.multipleSelection.map((item) => item.id);
|
||||
delPicture(id.join()).then((res) => {
|
||||
getTableData();
|
||||
ElMessage.success('delete successfully');
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
// 删除图片信息
|
||||
const del = (row) => {
|
||||
ElMessageBox.confirm(`This action will delete the picture:“${row.name}”,,Whether to continue?`, 'tip', {
|
||||
confirmButtonText: 'confirm',
|
||||
cancelButtonText: 'cancel',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => {
|
||||
delPicture(row.id).then(res=>{
|
||||
getTableData();
|
||||
ElMessage.success('delete successfully');
|
||||
})
|
||||
})
|
||||
.catch(() => {});
|
||||
ElMessageBox.confirm(`This action will delete the picture:“${row.name}”,,Whether to continue?`, 'tip', {
|
||||
confirmButtonText: 'confirm',
|
||||
cancelButtonText: 'cancel',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => {
|
||||
delPicture(row.id).then((res) => {
|
||||
getTableData();
|
||||
ElMessage.success('delete successfully');
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
// 分页改变
|
||||
const onHandleDisasterSizeChange = (val) => {
|
||||
state.disasterData.param.pageSize = val;
|
||||
getDisasterData();
|
||||
state.disasterData.param.pageSize = val;
|
||||
getDisasterData();
|
||||
};
|
||||
// 分页改变
|
||||
const onHandleDisasterCurrentChange = (val) => {
|
||||
state.disasterData.param.pageNum = val;
|
||||
getDisasterData();
|
||||
state.disasterData.param.pageNum = val;
|
||||
getDisasterData();
|
||||
};
|
||||
// 分页改变
|
||||
const onHandleSizeChange = (val) => {
|
||||
state.tableData.param.pageSize = val;
|
||||
getTableData();
|
||||
state.tableData.param.pageSize = val;
|
||||
getTableData();
|
||||
};
|
||||
// 分页改变
|
||||
const onHandleCurrentChange = (val) => {
|
||||
state.tableData.param.pageNum = val;
|
||||
getTableData();
|
||||
state.tableData.param.pageNum = val;
|
||||
getTableData();
|
||||
};
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
getDisasterData();
|
||||
//getTableData();
|
||||
getDisasterData();
|
||||
//getTableData();
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
.demo-tabs > .el-tabs__content {
|
||||
padding: 32px;
|
||||
color: #6b778c;
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
padding: 32px;
|
||||
color: #6b778c;
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.system-role-container {
|
||||
.system-role-padding {
|
||||
padding: 15px;
|
||||
.el-table {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
.system-role-padding {
|
||||
padding: 15px;
|
||||
.el-table {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.demo-tabs > .el-tabs__content {
|
||||
padding: 32px;
|
||||
color: #6b778c;
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
padding: 32px;
|
||||
color: #6b778c;
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -1,93 +1,158 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="system-user-search mb15">
|
||||
<!-- 选择灾害类型 -->
|
||||
<el-select v-model="state.value_disasterType"
|
||||
size="default"
|
||||
clearable
|
||||
placeholder="Select disaster type"
|
||||
@visible-change="searchDisasterType">
|
||||
<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="state.value_disasterDate"
|
||||
type="date"
|
||||
placeholder="Select disaster time"
|
||||
format="YYYY-MM-DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
class="ml10"
|
||||
size="default"
|
||||
@focus="searchDisasterDate" />
|
||||
<!-- 选择受灾地 -->
|
||||
<el-select v-model="state.value_disasterCountry"
|
||||
size="default"
|
||||
clearable
|
||||
placeholder="Select disaster country"
|
||||
style="margin-left: 0.6%;"
|
||||
@visible-change="searchDisasterCountry">
|
||||
<el-option v-for="item in state.options_disasterCountry"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value" />
|
||||
</el-select>
|
||||
<el-row :gutter="22">
|
||||
<el-col :span="10">
|
||||
<div class="system-role-padding layout-padding-auto layout-padding-view">
|
||||
<span style="margin:2%;font-weight: 600;font-size: 18px;">Disaster Info</span>
|
||||
<el-table :data="state.disasterData.data"
|
||||
v-loading="state.disasterData.loading"
|
||||
style="width: 100%"
|
||||
highlight-current-row
|
||||
@row-click="tableClick">
|
||||
<el-table-column type="index"
|
||||
label="ID"
|
||||
width="50" />
|
||||
<el-table-column prop="disasterType"
|
||||
label="Disaster type"
|
||||
show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="disasterCountry"
|
||||
label="disaster country"
|
||||
show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="disasterTime"
|
||||
label="disaster time"
|
||||
show-overflow-tooltip></el-table-column>
|
||||
</el-table>
|
||||
<el-pagination @size-change="onHandleDisasterSizeChange"
|
||||
@current-change="onHandleDisasterCurrentChange"
|
||||
class="mt15"
|
||||
:pager-count="5"
|
||||
:page-sizes="[10, 20, 30]"
|
||||
v-model:current-page="state.disasterData.param.pageNum"
|
||||
background
|
||||
v-model:page-size="state.disasterData.param.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="state.disasterData.total">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="14">
|
||||
<div class="system-role-padding layout-padding-auto layout-padding-view">
|
||||
<div class="system-user-search mb15"
|
||||
style="display: flex;margin-left: 10px;margin-top: 10px;">
|
||||
<!-- 选择灾害类型 -->
|
||||
<!-- <el-select v-model="state.value_disasterType"
|
||||
size="default"
|
||||
clearable
|
||||
placeholder="Select disaster type"
|
||||
@visible-change="searchDisasterType">
|
||||
<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="state.value_disasterDate"
|
||||
type="date"
|
||||
placeholder="Select disaster time"
|
||||
format="YYYY-MM-DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
class="ml10"
|
||||
size="default"
|
||||
@focus="searchDisasterDate" /> -->
|
||||
<!-- 选择受灾地 -->
|
||||
<!-- <el-select v-model="state.value_disasterCountry"
|
||||
size="default"
|
||||
clearable
|
||||
placeholder="Select disaster country"
|
||||
style="margin-left: 0.6%;"
|
||||
@visible-change="searchDisasterCountry">
|
||||
<el-option v-for="item in state.options_disasterCountry"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value" />
|
||||
</el-select> -->
|
||||
|
||||
<el-button size="default"
|
||||
type="primary"
|
||||
class="ml10"
|
||||
@click="searchRemoteSensingSourceData">
|
||||
<el-icon>
|
||||
<ele-Search />
|
||||
</el-icon>
|
||||
Search
|
||||
</el-button>
|
||||
<el-row>
|
||||
<el-col :span="8">
|
||||
<el-tree-select v-model="state.value_satelliteType"
|
||||
:data="state.options_satelliteType"
|
||||
multiple
|
||||
collapse-tags
|
||||
collapse-tags-tooltip
|
||||
:render-after-expand="false"
|
||||
show-checkbox
|
||||
clearable
|
||||
placeholder="Select satellite type" />
|
||||
</el-col>
|
||||
<el-col :span="8"
|
||||
style="padding-left:1%;">
|
||||
<el-tree-select v-model="state.value_resolution"
|
||||
:data="state.options_resolution"
|
||||
multiple
|
||||
collapse-tags
|
||||
collapse-tags-tooltip
|
||||
:render-after-expand="false"
|
||||
show-checkbox
|
||||
clearable
|
||||
placeholder="Select resolution" />
|
||||
</el-col>
|
||||
<el-col :span="5">
|
||||
<el-button size="default"
|
||||
type="primary"
|
||||
class="ml10"
|
||||
@click="searchRemoteSensingSourceData">
|
||||
<el-icon>
|
||||
<ele-Search />
|
||||
</el-icon>
|
||||
Search
|
||||
</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
</div>
|
||||
<!-- id,卫星类型,生产日期,产品谱段,产品分辨率,云覆盖量,景中心经纬度,元数据下载链接,缩略图 支撑单位 -->
|
||||
<el-table :data="state.requestData"
|
||||
style="width: 100%">
|
||||
<el-table-column type="index"
|
||||
label="Index"
|
||||
align="center"
|
||||
width="80"></el-table-column>
|
||||
<el-table-column prop="satelliteCode"
|
||||
label="Satellite code"
|
||||
align="center"
|
||||
show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="productTime"
|
||||
label="Product time"
|
||||
align="center"
|
||||
show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="productBandsNum"
|
||||
label="Product bands num"
|
||||
align="center"
|
||||
show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="productResolution"
|
||||
label="Product resolution(m)"
|
||||
align="center"
|
||||
show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="cloudCover"
|
||||
label="Cloud cover(%)"
|
||||
align="center"
|
||||
show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="sourceOrganization"
|
||||
label="Source organization"
|
||||
align="center"
|
||||
show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="downloadUrl"
|
||||
label="Download url"
|
||||
align="center"
|
||||
show-overflow-tooltip> </el-table-column>
|
||||
<!-- <el-table-column prop="Operate"
|
||||
</div>
|
||||
<!-- id,卫星类型,生产日期,产品谱段,产品分辨率,云覆盖量,景中心经纬度,元数据下载链接,缩略图 支撑单位 -->
|
||||
<el-table :data="state.requestData"
|
||||
style="width: 100%">
|
||||
<el-table-column type="index"
|
||||
label="Index"
|
||||
align="center"
|
||||
width="80"></el-table-column>
|
||||
<el-table-column prop="satelliteCode"
|
||||
label="Satellite code"
|
||||
align="center"
|
||||
show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="productTime"
|
||||
label="Product time"
|
||||
align="center"
|
||||
show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="productBandsNum"
|
||||
label="Product bands num"
|
||||
align="center"
|
||||
show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="productResolution"
|
||||
label="Product resolution(m)"
|
||||
align="center"
|
||||
show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="cloudCover"
|
||||
label="Cloud cover(%)"
|
||||
align="center"
|
||||
show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="sourceOrganization"
|
||||
label="Source organization"
|
||||
align="center"
|
||||
show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="downloadUrl"
|
||||
label="Download url"
|
||||
align="center"
|
||||
show-overflow-tooltip> </el-table-column>
|
||||
<!-- <el-table-column prop="Operate"
|
||||
label="Operate"
|
||||
show-overflow-tooltip></el-table-column> -->
|
||||
|
||||
<!-- <template slot-scope="scope">
|
||||
<!-- <template slot-scope="scope">
|
||||
<el-link :href="scope.row.downloadUrl">查看详情</el-link>
|
||||
</template> -->
|
||||
<!-- <el-table-column prop="Longitude"
|
||||
<!-- <el-table-column prop="Longitude"
|
||||
label="Longitude"
|
||||
show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="Latitude"
|
||||
|
@ -101,9 +166,9 @@
|
|||
label="Response status"
|
||||
show-overflow-tooltip></el-table-column> -->
|
||||
|
||||
<!-- <el-table-column prop="describe" label="角色描述" 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> -->
|
||||
<!-- <el-table-column prop="status" label="角色状态" show-overflow-tooltip>
|
||||
<!-- <el-table-column prop="status" label="角色状态" show-overflow-tooltip>
|
||||
<template #default="scope">
|
||||
<el-tag type="success" v-if="scope.row.status">启用</el-tag>
|
||||
<el-tag type="info" v-else>禁用</el-tag>
|
||||
|
@ -119,27 +184,32 @@
|
|||
>
|
||||
</template>
|
||||
</el-table-column> -->
|
||||
</el-table>
|
||||
<el-pagination @size-change="onHandleSizeChange"
|
||||
@current-change="onHandleCurrentChange"
|
||||
class="mt15"
|
||||
:pager-count="5"
|
||||
:page-sizes="[10, 20, 30]"
|
||||
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">
|
||||
</el-pagination>
|
||||
</el-table>
|
||||
<el-pagination @size-change="onHandleSizeChange"
|
||||
@current-change="onHandleCurrentChange"
|
||||
class="mt15"
|
||||
:pager-count="5"
|
||||
:page-sizes="[10, 20, 30]"
|
||||
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">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue';
|
||||
import { getRemoteSensingSourceData, getSelectionCondition } from "/@/api/remoteSensingSourceData/remoteSensingSourceData.js";
|
||||
import { getRemoteSensingSourceData, getRemoteSensingSourceDataByCondition, getPagesRemoteSensingSourceData } from "/@/api/remoteSensingSourceData/remoteSensingSourceData.js";
|
||||
import { getDisasterPage } from '/@/api/data/otherData.js'
|
||||
|
||||
|
||||
const state = reactive({
|
||||
tableData: {
|
||||
disasterData: {
|
||||
data: [],
|
||||
total: 0,
|
||||
loading: false,
|
||||
|
@ -149,36 +219,351 @@ const state = reactive({
|
|||
pageSize: 10,
|
||||
},
|
||||
},
|
||||
tableData: {
|
||||
data: [],
|
||||
total: null,
|
||||
loading: false,
|
||||
param: {
|
||||
search: '',
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
},
|
||||
disasterId: null,
|
||||
listData: [],
|
||||
satelliteCodeList: [],
|
||||
//选择灾害类型下拉框
|
||||
options_disasterType: [],
|
||||
value_disasterType: '',
|
||||
value_disasterDate: '',
|
||||
options_disasterCountry: [],
|
||||
value_disasterCountry: [],
|
||||
// options_disasterType: [],
|
||||
// value_disasterType: '',
|
||||
// value_disasterDate: '',
|
||||
// options_disasterCountry: [],
|
||||
// value_disasterCountry: [],
|
||||
options_resolution: [{
|
||||
label: '<0.8m',
|
||||
value: '<0.8m'
|
||||
}, {
|
||||
label: '0.8m-1m',
|
||||
value: '0.8m-1m'
|
||||
}, {
|
||||
label: '1m-10m',
|
||||
value: '1m-10m'
|
||||
}, {
|
||||
label: '10m-30m',
|
||||
value: '10m-30m'
|
||||
}, {
|
||||
label: '30m-50m',
|
||||
value: '30m-50m'
|
||||
}, {
|
||||
label: '>50m',
|
||||
value: '>50m'
|
||||
}],
|
||||
options_satelliteType: [{
|
||||
label: 'Optical satellite',
|
||||
value: 'Optical satellite'
|
||||
}, {
|
||||
label: 'Hyperspectral satellite',
|
||||
value: 'Hyperspectral satellite'
|
||||
}, {
|
||||
label: 'Radar satellite',
|
||||
value: 'Radar satellite'
|
||||
}, {
|
||||
label: 'Night light satellite',
|
||||
value: 'Night light satellite'
|
||||
}],
|
||||
value_satelliteType: '',
|
||||
value_resolution: [],
|
||||
requestData: [],
|
||||
requestResolution: [],
|
||||
requestSatellite: []
|
||||
})
|
||||
|
||||
// 初始化灾害表格数据
|
||||
const getDisasterData = () => {
|
||||
state.disasterData.loading = true;
|
||||
getDisasterPage(state.disasterData.param.pageNum, state.disasterData.param.pageSize, {}).then(res => {
|
||||
state.disasterData.data = res.records;
|
||||
state.disasterData.total = res.total;
|
||||
state.disasterData.loading = false;
|
||||
})
|
||||
}
|
||||
|
||||
// 灾害表格点击事件
|
||||
const tableClick = (row) => {
|
||||
state.disasterId = row.disasterId;
|
||||
getData()
|
||||
}
|
||||
|
||||
// 获取遥感影像元数据
|
||||
const getData = () => {
|
||||
let data = {
|
||||
disasterId: state.disasterId,
|
||||
}
|
||||
getPagesRemoteSensingSourceData(data).then(
|
||||
(res) => {
|
||||
console.log(res.records);
|
||||
state.requestData = res.records;
|
||||
state.tableData.total = res.total;
|
||||
})
|
||||
// getRemoteSensingSourceDataByCondition(1, 1000, JSON.stringify(data)).then(
|
||||
// (res) => {
|
||||
// state.requestData = res.records;
|
||||
// for (let index = 0; index < res.records.length; index++) {
|
||||
// state.requestResolution[index] = state.requestData[index].productResolution
|
||||
// state.requestSatellite[index] = state.requestData[index].satelliteCode
|
||||
// }
|
||||
// state.requestResolution = new Set(state.requestResolution)
|
||||
// state.requestSatellite = new Set(state.requestSatellite)
|
||||
// })
|
||||
}
|
||||
|
||||
// 查询遥感元数据
|
||||
const searchRemoteSensingSourceData = () => {
|
||||
const select = {
|
||||
"disasterType": state.value_disasterType,
|
||||
"disasterDate": state.value_disasterDate,
|
||||
"disasterCountry": state.value_disasterCountry,
|
||||
"size": state.tableData.param.pageSize,
|
||||
"current": state.tableData.param.pageNum
|
||||
// 获取选择的卫星类型
|
||||
for (var i = 0; i < state.value_satelliteType.length; i++) {
|
||||
if (state.value_satelliteType[i] == state.options_satelliteType[0].value) {
|
||||
state.satelliteCodeList.push('Landset8_OLI_TIRS');
|
||||
}
|
||||
else if (state.value_satelliteType[i] == state.options_satelliteType[1].value) {
|
||||
let arrData = ['Sentinel -2_Sentinel - 2A', 'Sentinel -2_Sentinel - 2B', 'GF1', 'GF1B', 'GF1C', 'GF1D', 'GF2', 'GF4', 'GF6'];
|
||||
arrData.forEach(item => {
|
||||
state.satelliteCodeList.push(item);
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 请求接口
|
||||
getRemoteSensingSourceData(select).then(
|
||||
// 获取选择的分辨率
|
||||
var productResolutionMin = 0
|
||||
var productResolutionMax = null
|
||||
for (let index = 0; index < state.value_resolution.length; index++) {
|
||||
if (state.value_resolution[index] == state.options_resolution[0].value) {
|
||||
let data = {
|
||||
productResolutionMin: 0,
|
||||
productResolutionMax: 0.8
|
||||
}
|
||||
state.listData.push(data);
|
||||
}
|
||||
if (state.value_resolution[index] == state.options_resolution[1].value) {
|
||||
let data = {
|
||||
productResolutionMin: 0.8,
|
||||
productResolutionMax: 1
|
||||
}
|
||||
state.listData.push(data);
|
||||
}
|
||||
if (state.value_resolution[index] == state.options_resolution[2].value) {
|
||||
let data = {
|
||||
productResolutionMin: 1,
|
||||
productResolutionMax: 10
|
||||
}
|
||||
state.listData.push(data);
|
||||
}
|
||||
if (state.value_resolution[index] == state.options_resolution[3].value) {
|
||||
let data = {
|
||||
productResolutionMin: 10,
|
||||
productResolutionMax: 30
|
||||
}
|
||||
state.listData.push(data);
|
||||
}
|
||||
if (state.value_resolution[index] == state.options_resolution[4].value) {
|
||||
let data = {
|
||||
productResolutionMin: 30,
|
||||
productResolutionMax: 50
|
||||
}
|
||||
state.listData.push(data);
|
||||
}
|
||||
if (state.value_resolution[index] == state.options_resolution[5].value) {
|
||||
let data = {
|
||||
productResolutionMin: 50,
|
||||
productResolutionMax: 1000
|
||||
}
|
||||
state.listData.push(data);
|
||||
}
|
||||
}
|
||||
|
||||
let dataNew = {};
|
||||
if (state.satelliteCodeList.length != 0) {
|
||||
dataNew = {
|
||||
disasterId: state.disasterId,
|
||||
satelliteCodeList: state.satelliteCodeList.join(","),
|
||||
productResolutionVos: state.listData
|
||||
}
|
||||
} else {
|
||||
dataNew = {
|
||||
disasterId: state.disasterId,
|
||||
productResolutionVos: state.listData
|
||||
}
|
||||
}
|
||||
|
||||
getDataByCondition(state.tableData.param.pageNum, state.tableData.param.pageSize, dataNew)
|
||||
}
|
||||
|
||||
// 根据检索条件检索遥感元数据
|
||||
const getDataByCondition = (current, size, dataNew) => {
|
||||
console.log('传过来的数据:', state.tableData.param.pageNum);
|
||||
|
||||
getRemoteSensingSourceDataByCondition(current, size, JSON.stringify(dataNew)).then(
|
||||
(res) => {
|
||||
state.requestData = res.records;
|
||||
state.tableData.total = res.total;
|
||||
state.tableData.param.pageNum = res.current;
|
||||
state.tableData.param.pageSize = res.size;
|
||||
console.log(state.requestData)
|
||||
})
|
||||
}
|
||||
|
||||
// 获取分页遥感元数据
|
||||
const getTableData = (condition) => {
|
||||
state.tableData.loading = true;
|
||||
getPagesRemoteSensingSourceData(condition).then(
|
||||
(res) => {
|
||||
state.requestData = res.records;
|
||||
state.tableData.total = res.total;
|
||||
|
||||
var requestSatellite = []
|
||||
var requestResolution = []
|
||||
for (let index = 0; index < state.requestData.length; index++) {
|
||||
requestSatellite[index] = state.requestData[index].satelliteCode
|
||||
requestResolution[index] = state.requestData[index].productResolution
|
||||
}
|
||||
|
||||
// 获取卫星类型
|
||||
var uniSatellite = unique(requestSatellite);
|
||||
var lenSatellite = uniSatellite.length
|
||||
for (let index = 0; index < lenSatellite; index++) {
|
||||
let A = {}
|
||||
A['label'] = uniSatellite[index]
|
||||
A['value'] = uniSatellite[index]
|
||||
state.options_satelliteType[index] = A
|
||||
}
|
||||
// 获取分辨率
|
||||
var uniResolution = unique(requestResolution);
|
||||
var lenResolution = uniResolution.length
|
||||
for (let index = 0; index < lenResolution; index++) {
|
||||
let A = {}
|
||||
A['label'] = uniResolution[index]
|
||||
A['value'] = uniResolution[index]
|
||||
state.options_resolution[index] = A
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
|
||||
|
||||
// setTimeout(() => {
|
||||
// state.tableData.loading = false;
|
||||
// }, 500);
|
||||
}
|
||||
|
||||
// 获取卫星类型和分辨率
|
||||
const getSatelliteAndResolution = () => {
|
||||
var requestSatellite = []
|
||||
var requestResolution = []
|
||||
for (let index = 0; index < state.requestData.length; index++) {
|
||||
requestSatellite[index] = state.requestData[index].satelliteCode
|
||||
requestResolution[index] = state.requestData[index].productResolution
|
||||
}
|
||||
|
||||
// 获取卫星类型
|
||||
var uniSatellite = unique(requestSatellite);
|
||||
var lenSatellite = uniSatellite.length
|
||||
for (let index = 0; index < lenSatellite; index++) {
|
||||
let A = {}
|
||||
A['label'] = uniSatellite[index]
|
||||
A['value'] = uniSatellite[index]
|
||||
state.options_satelliteType[index] = A
|
||||
}
|
||||
// 获取分辨率
|
||||
var uniResolution = unique(requestResolution);
|
||||
var lenResolution = uniResolution.length
|
||||
for (let index = 0; index < lenResolution; index++) {
|
||||
let A = {}
|
||||
A['label'] = uniResolution[index]
|
||||
A['value'] = uniResolution[index]
|
||||
state.options_resolution[index] = A
|
||||
}
|
||||
}
|
||||
|
||||
// 数组列表去重
|
||||
const unique = (arr) => {
|
||||
return arr.filter(function (item, index, arr) {
|
||||
return arr.indexOf(item, 0) === index;
|
||||
});
|
||||
}
|
||||
|
||||
// 灾害信息表size改变
|
||||
const onHandleDisasterSizeChange = (val) => {
|
||||
state.disasterData.param.pageSize = val;
|
||||
getDisasterData();
|
||||
};
|
||||
// 灾害信息表current改变
|
||||
const onHandleDisasterCurrentChange = (val) => {
|
||||
state.disasterData.param.pageNum = val;
|
||||
getDisasterData();
|
||||
};
|
||||
|
||||
// 遥感元数据表size改变
|
||||
const onHandleSizeChange = (val) => {
|
||||
state.tableData.param.pageSize = val;
|
||||
state.tableData.param.pageNum = state.tableData.param.pageNum;
|
||||
let dataNew = {};
|
||||
if (state.satelliteCodeList.length != 0) {
|
||||
dataNew = {
|
||||
disasterId: state.disasterId,
|
||||
satelliteCodeList: state.satelliteCodeList.join(","),
|
||||
productResolutionVos: state.listData
|
||||
}
|
||||
} else {
|
||||
dataNew = {
|
||||
disasterId: state.disasterId,
|
||||
productResolutionVos: state.listData
|
||||
}
|
||||
}
|
||||
|
||||
getDataByCondition(state.tableData.param.pageNum, state.tableData.param.pageSize, dataNew)
|
||||
|
||||
// var condition = {
|
||||
// current: state.tableData.param.pageNum,
|
||||
// size: 10,
|
||||
// disasterId: state.disasterId,
|
||||
// satelliteCode: state.satelliteSelected,
|
||||
// productResolution: state.resolutionSelected
|
||||
// }
|
||||
// // searchRemoteSensingSourceData()
|
||||
// getTableData(condition)
|
||||
};
|
||||
|
||||
// 遥感元数据表current改变
|
||||
const onHandleCurrentChange = (val) => {
|
||||
state.tableData.param.pageSize = state.tableData.param.pageSize;
|
||||
state.tableData.param.pageNum = val;
|
||||
console.log('当前页:', state.tableData.param.pageNum);
|
||||
let dataNew = {};
|
||||
if (state.satelliteCodeList.length != 0) {
|
||||
dataNew = {
|
||||
disasterId: state.disasterId,
|
||||
satelliteCodeList: state.satelliteCodeList.join(","),
|
||||
productResolutionVos: state.listData
|
||||
}
|
||||
} else {
|
||||
dataNew = {
|
||||
disasterId: state.disasterId,
|
||||
productResolutionVos: state.listData
|
||||
}
|
||||
}
|
||||
|
||||
getDataByCondition(state.tableData.param.pageNum, state.tableData.param.pageSize, dataNew)
|
||||
// var condition = {
|
||||
// current: state.tableData.param.pageNum,
|
||||
// size: 10,
|
||||
// disasterId: state.disasterId,
|
||||
// satelliteCode: state.satelliteSelected,
|
||||
// productResolution: state.resolutionSelected
|
||||
// }
|
||||
// searchRemoteSensingSourceData()
|
||||
// getTableData(condition)
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getDisasterData();
|
||||
})
|
||||
|
||||
|
||||
// 查询受灾国家
|
||||
const searchDisasterCountry = () => {
|
||||
const selectCountry = {
|
||||
|
@ -246,25 +631,13 @@ const searchDisasterDate = () => {
|
|||
})
|
||||
}
|
||||
}
|
||||
|
||||
//每页显示条数改变
|
||||
const onHandleSizeChange = (val) => {
|
||||
state.tableData.param.pageSize = val;
|
||||
state.tableData.param.pageNum = state.tableData.param.pageNum;
|
||||
searchRemoteSensingSourceData()
|
||||
};
|
||||
|
||||
//当前页变动
|
||||
const onHandleCurrentChange = (val) => {
|
||||
state.tableData.param.pageSize = state.tableData.param.pageSize;
|
||||
state.tableData.param.pageNum = val;
|
||||
searchRemoteSensingSourceData()
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.system-role-padding {
|
||||
padding-bottom: 2%;
|
||||
}
|
||||
.el-pagination {
|
||||
padding-left: 1%;
|
||||
}
|
||||
</style>
|
|
@ -84,6 +84,8 @@
|
|||
v-model="state.satelliteSelected"
|
||||
:data="sensor"
|
||||
multiple
|
||||
collapse-tags
|
||||
collapse-tags-tooltip
|
||||
:render-after-expand="false"
|
||||
show-checkbox
|
||||
placeholder="Select satellite type" />
|
||||
|
@ -382,6 +384,10 @@ const ClearCondition = () => {
|
|||
}
|
||||
.coordinateBtn {
|
||||
width: 90%;
|
||||
word-break: keep-all;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.lowerBtn {
|
||||
width: 90%;
|
||||
|
|
|
@ -558,7 +558,7 @@ const setApplyDisaster = (data) => {
|
|||
})
|
||||
setTimeout(() => {
|
||||
initBarChart(xData,yData);
|
||||
}, 1000);
|
||||
}, 700);
|
||||
}
|
||||
/**
|
||||
* 设置灾种数量占比
|
||||
|
|
|
@ -35,18 +35,18 @@
|
|||
<el-table-column prop="disasterKeyword"
|
||||
label="DisasterKeyword"
|
||||
show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="disasterLevel"
|
||||
label="DisasterLevel"
|
||||
show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="disasterTime"
|
||||
label="DisasterTime"
|
||||
show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="managerName"
|
||||
label="ManagerName"
|
||||
show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="sponsorOrganization"
|
||||
label="SponsorOrganization"
|
||||
show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="researchField"
|
||||
label="ResearchField"
|
||||
show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="occupation"
|
||||
label="occupation"
|
||||
show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="Operate"
|
||||
label="Operate"
|
||||
show-overflow-tooltip>
|
||||
|
|
|
@ -0,0 +1,129 @@
|
|||
<template>
|
||||
<el-dialog title="management disaster" v-model="state.isShowDialog" width="900px" @close="closeDialog">
|
||||
<el-config-provider :locale="en">
|
||||
<div class="system-user-search mb15" style="display: flex;margin-left: 10px;margin-top: 10px;">
|
||||
<el-input size="default" placeholder="please enter disaster type" style="max-width: 190px" v-model="state.searchName"
|
||||
clearable></el-input>
|
||||
<el-button size="default" type="primary" class="ml10" @click="getDisaterInfo">
|
||||
<el-icon>
|
||||
<ele-Search/>
|
||||
</el-icon>
|
||||
search
|
||||
</el-button>
|
||||
</div>
|
||||
<el-table :data="state.tableData.data" :row-key="getRowKeys" @selection-change="handleSelectionChange" ref="tableRef">
|
||||
<el-table-column type="selection" width="55" :reserve-selection="true"/>
|
||||
<el-table-column property="dictValue" label="DisasterType" width="150" />
|
||||
<el-table-column property="disasterCountry" label="DisasterCountry" width="200" />
|
||||
<el-table-column property="disasterKeyword" label="DisasterKeyword" width="200" />d
|
||||
<el-table-column property="disasterTime" label="DisasterTime" />
|
||||
<el-table-column property="disasterLevel" label="DisasterLevel" />
|
||||
</el-table>
|
||||
<el-pagination @size-change="onHandleSizeChange"
|
||||
@current-change="onHandleCurrentChange"
|
||||
class="mt15"
|
||||
:pager-count="5"
|
||||
:page-sizes="[10, 20, 30]"
|
||||
v-model:current-page="state.tableData.param.pageNum"
|
||||
background
|
||||
v-model:page-size="state.tableData.param.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="state.tableData.total">
|
||||
</el-pagination>
|
||||
</el-config-provider>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="onCancel" size="default">cancel</el-button>
|
||||
<el-button type="primary" @click="onSubmit" size="default" :loading="state.isLoading">confirm</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import en from 'element-plus/dist/locale/en.mjs'
|
||||
import {getPage,updateDisasterManage} from '/@/api/disasterInfo/index.js';
|
||||
import {reactive, ref} from "vue";
|
||||
import {ElMessage} from "element-plus";
|
||||
const emit = defineEmits(['callback']);
|
||||
const tableRef = ref();
|
||||
const state = reactive({
|
||||
isShowDialog:false,
|
||||
table:false,
|
||||
loading:false,
|
||||
chiefId:null,
|
||||
multipleSelection:[],
|
||||
searchName:'',
|
||||
tableData: {
|
||||
data: [],
|
||||
total: 0,
|
||||
loading: false,
|
||||
param: {
|
||||
search: '',
|
||||
pageNum: 1,
|
||||
pageSize: 5,
|
||||
},
|
||||
},
|
||||
});
|
||||
const getRowKeys = (row) => {
|
||||
return row.id
|
||||
}
|
||||
const handleSelectionChange = (val) => {
|
||||
state.multipleSelection = val
|
||||
}
|
||||
// 打开弹窗
|
||||
const openDialog = (chiefId) => {
|
||||
state.isShowDialog = true;
|
||||
state.chiefId = chiefId;
|
||||
getDisaterInfo();
|
||||
};
|
||||
//获取灾害列表
|
||||
const getDisaterInfo = () => {
|
||||
getPage(state.tableData.param.pageNum,state.tableData.param.pageSize,{"respondStatus":3,"chiefId":state.chiefId,"disasterType":state.searchName}).then(res=>{
|
||||
state.tableData.data = res.records;
|
||||
state.tableData.total = res.total;
|
||||
})
|
||||
}
|
||||
// 关闭弹窗
|
||||
const closeDialog = () => {
|
||||
state.isShowDialog = false;
|
||||
state.multipleSelection = [];
|
||||
tableRef.value.clearSelection();
|
||||
};
|
||||
const onCancel = () => {
|
||||
closeDialog();
|
||||
}
|
||||
const onSubmit = () => {
|
||||
if(state.multipleSelection.length == 0){
|
||||
ElMessage.warning("Please check the data first");
|
||||
return false;
|
||||
}
|
||||
//将选中的灾害转为{"id":"","chiefId":""}格式
|
||||
const saveRes = state.multipleSelection.map(item=> ({id:item.id,chiefId:state.chiefId}))
|
||||
updateDisasterManage(saveRes).then(res=>{
|
||||
ElMessage.success("Management success")
|
||||
emit('callback');
|
||||
closeDialog();
|
||||
}).catch(err=>{
|
||||
|
||||
})
|
||||
}
|
||||
// 分页改变
|
||||
const onHandleSizeChange = (val) => {
|
||||
state.tableData.param.pageSize = val;
|
||||
getDisaterInfo();
|
||||
};
|
||||
// 分页改变
|
||||
const onHandleCurrentChange = (val) => {
|
||||
state.tableData.param.pageNum = val;
|
||||
getDisaterInfo();
|
||||
};
|
||||
// 暴露变量
|
||||
defineExpose({
|
||||
openDialog,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
|
@ -0,0 +1,158 @@
|
|||
<template>
|
||||
<el-config-provider :locale="en">
|
||||
<el-drawer
|
||||
v-model="state.table"
|
||||
title="Management Disaster"
|
||||
direction="rtl"
|
||||
size="50%"
|
||||
>
|
||||
<div class="system-user-search mb15" style="display: flex;margin-left: 10px;margin-top: 10px;">
|
||||
<el-input size="default" placeholder="please enter disaster type" style="max-width: 190px" v-model="state.searchName"
|
||||
clearable></el-input>
|
||||
<el-button size="default" type="primary" class="ml10" @click="getTableData">
|
||||
<el-icon>
|
||||
<ele-Search/>
|
||||
</el-icon>
|
||||
search
|
||||
</el-button>
|
||||
<el-button size="default" type="success" class="ml10" @click="addDisaster">
|
||||
<el-icon>
|
||||
<ele-FolderAdd/>
|
||||
</el-icon>
|
||||
add
|
||||
</el-button>
|
||||
<el-button size="default" type="danger" class="ml10" @click="batchDelete">
|
||||
<el-icon>
|
||||
<ele-Delete/>
|
||||
</el-icon>
|
||||
batch delete
|
||||
</el-button>
|
||||
</div>
|
||||
<el-table :data="state.tableData.data" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" />
|
||||
<el-table-column property="dictValue" label="DisasterType" width="150" />
|
||||
<el-table-column property="disasterCountry" label="DisasterCountry" width="200" />
|
||||
<el-table-column property="disasterTime" label="DisasterTime" />
|
||||
<el-table-column prop="Operate"
|
||||
label="Operate"
|
||||
show-overflow-tooltip>
|
||||
<template #default="scope">
|
||||
<el-button link type="primary" size="small" @click="deleteDisaster(scope.row)">Delete</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination @size-change="onHandleSizeChange"
|
||||
@current-change="onHandleCurrentChange"
|
||||
class="mt15"
|
||||
:pager-count="5"
|
||||
:page-sizes="[10, 20, 30]"
|
||||
v-model:current-page="state.tableData.param.pageNum"
|
||||
background
|
||||
v-model:page-size="state.tableData.param.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="state.tableData.total">
|
||||
</el-pagination>
|
||||
<DisasterInfo ref="disasterInfoRef" @callback="getTableData"/>
|
||||
</el-drawer>
|
||||
</el-config-provider>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import en from 'element-plus/dist/locale/en.mjs'
|
||||
import {reactive, ref} from "vue";
|
||||
import DisasterInfo from './disasterInfo.vue';
|
||||
import {getPage,removeManage} from '/@/api/disasterInfo/index.js';
|
||||
import {ElMessage, ElMessageBox} from "element-plus";
|
||||
const disasterInfoRef = ref();
|
||||
const state = reactive({
|
||||
table:false,
|
||||
loading:false,
|
||||
userId:null,
|
||||
multipleSelection:[],
|
||||
searchName:'',
|
||||
tableData: {
|
||||
data: [],
|
||||
total: 0,
|
||||
loading: false,
|
||||
param: {
|
||||
search: '',
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
},
|
||||
});
|
||||
const handleSelectionChange = (val) => {
|
||||
state.multipleSelection = val
|
||||
}
|
||||
const addDisaster = () => {
|
||||
disasterInfoRef.value.openDialog(state.userId);
|
||||
}
|
||||
//批量删除chief管理员管理灾害数据
|
||||
const batchDelete = () => {
|
||||
if(state.multipleSelection.length == 0){
|
||||
ElMessage.warning("Select the data to be operated first");
|
||||
return false;
|
||||
}
|
||||
ElMessageBox.confirm(`This action batch deletes the disaster data,Whether to continue?`, 'tip', {
|
||||
confirmButtonText: 'confirm',
|
||||
cancelButtonText: 'cancel',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => {
|
||||
let id = state.multipleSelection.map(item=>({id:item.id,chiefId:null}))
|
||||
removeManage(id).then(res=>{
|
||||
getTableData();
|
||||
ElMessage.success('delete successfully');
|
||||
})
|
||||
})
|
||||
.catch(() => {});
|
||||
}
|
||||
const deleteDisaster = (row) => {
|
||||
ElMessageBox.confirm(`This operation will delete the disaster:“${row.dictValue}”,Whether to continue?`, 'tip', {
|
||||
confirmButtonText: 'confirm',
|
||||
cancelButtonText: 'cancel',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => {
|
||||
let delData = [{"id":row.id,"cheif":null}]
|
||||
removeManage(delData).then(res=>{
|
||||
getTableData();
|
||||
ElMessage.success('Deleted successfully');
|
||||
})
|
||||
})
|
||||
.catch(() => {});
|
||||
}
|
||||
// 打开弹窗
|
||||
const openDialog = (userId) => {
|
||||
state.table = true;
|
||||
state.userId = userId;
|
||||
getTableData();
|
||||
};
|
||||
//分页查询已经管理的灾害数据
|
||||
const getTableData = () => {
|
||||
getPage(state.tableData.param.pageNum,state.tableData.param.pageSize,{"chiefIdEquals":state.userId,"disasterType":state.searchName}).then(res=>{
|
||||
state.tableData.data = res.records;
|
||||
state.tableData.total = res.total;
|
||||
})
|
||||
}
|
||||
|
||||
// 分页改变
|
||||
const onHandleSizeChange = (val) => {
|
||||
state.tableData.param.pageSize = val;
|
||||
getTableData();
|
||||
};
|
||||
// 分页改变
|
||||
const onHandleCurrentChange = (val) => {
|
||||
state.tableData.param.pageNum = val;
|
||||
getTableData();
|
||||
};
|
||||
|
||||
// 暴露变量
|
||||
defineExpose({
|
||||
openDialog,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
|
@ -53,6 +53,7 @@
|
|||
<template #default="scope">
|
||||
<el-button link type="primary" size="small" @click="editUser(scope.row)">Edit</el-button>
|
||||
<el-button link type="primary" size="small" @click="deleteUser(scope.row)">Delete</el-button>
|
||||
<el-button link type="primary" size="small" @click="manage(scope.row)">Manage</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
@ -71,6 +72,7 @@
|
|||
</div>
|
||||
<AddAdministrator ref="administratorRef" @callback="getTableData"/>
|
||||
<EditAdministrator ref="editAdministratorRef" @callback="getTableData"/>
|
||||
<ManageDisaster ref="manageRef"/>
|
||||
<RoleDialog ref="roleDialogRef"
|
||||
@refresh="getTableData()" />
|
||||
</div>
|
||||
|
@ -79,12 +81,36 @@
|
|||
<script lang="ts" setup name="systemRole">
|
||||
import en from 'element-plus/dist/locale/en.mjs'
|
||||
import type { TabsPaneContext } from 'element-plus';
|
||||
import ManageDisaster from './component/manageDisaster.vue';
|
||||
import AddAdministrator from './component/addAdministrator.vue';
|
||||
import EditAdministrator from './component/editAdministrator.vue';
|
||||
import {getAdminPage,remove} from '/@/api/response/administrator.js';
|
||||
const gridData = [
|
||||
{
|
||||
date: '2016-05-02',
|
||||
name: 'Peter Parker',
|
||||
address: 'Queens, New York City',
|
||||
},
|
||||
{
|
||||
date: '2016-05-04',
|
||||
name: 'Peter Parker',
|
||||
address: 'Queens, New York City',
|
||||
},
|
||||
{
|
||||
date: '2016-05-01',
|
||||
name: 'Peter Parker',
|
||||
address: 'Queens, New York City',
|
||||
},
|
||||
{
|
||||
date: '2016-05-03',
|
||||
name: 'Peter Parker',
|
||||
address: 'Queens, New York City',
|
||||
},
|
||||
]
|
||||
const activeName = ref('first');
|
||||
const administratorRef = ref();
|
||||
const editAdministratorRef = ref();
|
||||
const manageRef = ref();
|
||||
const handleClick = (tab: TabsPaneContext, event: Event) => {
|
||||
console.log(tab, event);
|
||||
};
|
||||
|
@ -99,6 +125,8 @@ const RoleDialog = defineAsyncComponent(() => import('/@/views/system/role/dialo
|
|||
// 定义变量内容
|
||||
const roleDialogRef = ref();
|
||||
const state = reactive({
|
||||
table:false,
|
||||
loading:false,
|
||||
multipleSelection:[],
|
||||
searchName:'',
|
||||
tableData: {
|
||||
|
@ -170,6 +198,11 @@ const deleteUser = (row) => {
|
|||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
//chief管理员管理灾害抽屉
|
||||
const manage = (row) => {
|
||||
manageRef.value.openDialog(row.id);
|
||||
//state.table = true;
|
||||
}
|
||||
// 分页改变
|
||||
const onHandleSizeChange = (val) => {
|
||||
state.tableData.param.pageSize = val;
|
||||
|
|
|
@ -30,7 +30,7 @@ const viteConfig = defineConfig((mode) => {
|
|||
hmr: true,
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: 'http://192.168.31.250:9090',
|
||||
target: 'http://192.168.31.14:9090',
|
||||
ws: true,
|
||||
changeOrigin: true,
|
||||
rewrite: (path) => path.replace(/^\/api/, ''),
|
||||
|
|
Loading…
Reference in New Issue